Update proportion bar component

app/components/progress/Progress/Progress.container.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { ProgressView } from "./Progress.view";
-import type { ProgressProps } from "./Progress.types";
-
-const ProgressContainer = memo<ProgressProps>(
-  ({ progress = "3-2", className = "" }) => {
-    const barClasses = `h-[8px] relative w-full`;
-
-    return (
-      <ProgressView
-        progress={progress}
-        className={className}
-        barClasses={barClasses}
-      />
-    );
-  },
-);
-
-ProgressContainer.displayName = "Progress";
-
-export default ProgressContainer;

app/components/progress/Progress/index.tsx

@@ -1 +0,0 @@
-export { default } from "./Progress.container";

app/components/progress/ProportionBar/ProportionBar.container.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { memo } from "react";
+import { ProportionBarView } from "./ProportionBar.view";
+import type { ProportionBarProps } from "./ProportionBar.types";
+
+const ProportionBarContainer = memo<ProportionBarProps>(
+  ({ progress = "3-2", className = "" }) => {
+    const barClasses = `h-[8px] relative w-full`;
+
+    return (
+      <ProportionBarView
+        progress={progress}
+        className={className}
+        barClasses={barClasses}
+      />
+    );
+  },
+);
+
+ProportionBarContainer.displayName = "ProportionBar";
+
+export default ProportionBarContainer;

app/components/progress/ProportionBar/ProportionBar.types.ts

@@ -1,4 +1,4 @@
-export type ProgressBarState =
+export type ProportionBarState =
   | "1-0"
   | "1-1"
   | "1-2"
@@ -12,13 +12,13 @@ export type ProgressBarState =
   | "3-1"
   | "3-2";
 
-export interface ProgressProps {
-  progress?: ProgressBarState;
+export interface ProportionBarProps {
+  progress?: ProportionBarState;
   className?: string;
 }
 
-export interface ProgressViewProps {
-  progress: ProgressBarState;
+export interface ProportionBarViewProps {
+  progress: ProportionBarState;
   className: string;
   barClasses: string;
 }

app/components/progress/ProportionBar/ProportionBar.view.tsx

@@ -1,11 +1,11 @@
-import type { ProgressViewProps } from "./Progress.types";
+import type { ProportionBarViewProps } from "./ProportionBar.types";
 
-export function ProgressView({
+export function ProportionBarView({
   progress,
   className,
   barClasses,
-}: ProgressViewProps) {
-  // Progress bar type
+}: ProportionBarViewProps) {
+  // Proportion bar type
   const [fullSegments, partialSegment] = progress.split("-").map(Number);
   // Calculate total progress:
   // - For 1-X: first section is (X+1)/6 filled

app/components/progress/ProportionBar/index.tsx

@@ -0,0 +1 @@
+export { default } from "./ProportionBar.container";

app/components/utility/ModalFooter/ModalFooter.view.tsx

@@ -2,7 +2,7 @@
 
 import { useTranslation } from "../../../contexts/MessagesContext";
 import Button from "../../buttons/Button";
-import Stepper from "../../progress/Progress/Stepper";
+import Stepper from "../../progress/Stepper";
 import type { ModalFooterProps } from "./ModalFooter.types";
 
 export function ModalFooterView({