Update props in components pass 2

app/components/utility/ModalFooter/ModalFooter.types.ts

@@ -14,6 +14,12 @@ export interface ModalFooterProps {
   nextButtonDisabled?: boolean;
   currentStep?: number;
   totalSteps?: number;
+  /**
+   * Whether to show the stepper component in the footer (Figma prop).
+   * Defaults to true if currentStep and totalSteps are provided.
+   * @default true
+   */
+  stepper?: boolean;
   footerContent?: React.ReactNode;
   className?: string;
 }

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

@@ -15,6 +15,7 @@ export function ModalFooterView({
   nextButtonDisabled = false,
   currentStep,
   totalSteps,
+  stepper: stepperProp,
   footerContent,
   className = "",
 }: ModalFooterProps) {
@@ -23,6 +24,13 @@ export function ModalFooterView({
   // Use localized defaults if text not provided
   const defaultBackText = backButtonText || t("buttons.back");
   const defaultNextText = nextButtonText || t("buttons.next");
+  
+  // Determine if stepper should be shown
+  // Defaults to true if currentStep and totalSteps are provided, unless explicitly set to false
+  const shouldShowStepper = stepperProp !== undefined 
+    ? stepperProp 
+    : (currentStep !== undefined && totalSteps !== undefined);
+
   return (
     <div
       className={`h-[64px] bg-[var(--color-surface-default-primary)] rounded-bl-[var(--radius-300,12px)] rounded-br-[var(--radius-300,12px)] shrink-0 relative ${className}`}
@@ -37,7 +45,7 @@ export function ModalFooterView({
       )}
 
       {/* Stepper (Centered) */}
-      {currentStep && totalSteps && (
+      {shouldShowStepper && currentStep && totalSteps && (
         <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
           <Stepper active={currentStep} totalSteps={totalSteps} />
         </div>