Create flow UX updates

app/components/utility/CardStack/CardStack.container.tsx

@@ -21,6 +21,7 @@ const CardStackContainer = memo<CardStackProps>(
     title = "",
     description = "",
     layout = "default",
+    headerLockupSize,
     className = "",
   }) => {
     const [internalExpanded, setInternalExpanded] = useState(false);
@@ -74,6 +75,7 @@ const CardStackContainer = memo<CardStackProps>(
         title={title}
         description={description}
         layout={layout}
+        headerLockupSize={headerLockupSize}
         className={className}
       />
     );

app/components/utility/CardStack/CardStack.types.ts

@@ -1,3 +1,5 @@
+import type { HeaderLockupSizeValue } from "../../type/HeaderLockup/HeaderLockup.types";
+
 export interface CardStackItem {
   id: string;
   label: string;
@@ -19,6 +21,8 @@ export interface CardStackProps {
   description?: string;
   /** "default" = compact grid/column + expanded grid; "singleStack" = always one column, expand shows more in same stack */
   layout?: "default" | "singleStack";
+  /** Optional title/description lockup size (create-flow passes `md`-matched `L`/`M`). Defaults to `L`. */
+  headerLockupSize?: HeaderLockupSizeValue;
   className?: string;
 }
 
@@ -34,5 +38,6 @@ export interface CardStackViewProps {
   title: string;
   description: string;
   layout: "default" | "singleStack";
+  headerLockupSize: HeaderLockupSizeValue | undefined;
   className: string;
 }

app/components/utility/CardStack/CardStack.view.tsx

@@ -16,8 +16,10 @@ export function CardStackView({
   title,
   description,
   layout,
+  headerLockupSize,
   className,
 }: CardStackViewProps) {
+  const lockupSize = headerLockupSize ?? "L";
   const isSelected = (id: string) => selectedIds.includes(id);
   // Compact: recommended only (up to 5). Expanded: all cards.
   const compactCards = cards.filter((c) => c.recommended ?? false).slice(0, 5);
@@ -33,7 +35,7 @@ export function CardStackView({
               title={title}
               description={description}
               justification="center"
-              size="L"
+              size={lockupSize}
             />
           </div>
         ) : null}
@@ -73,7 +75,7 @@ export function CardStackView({
             title={title}
             description={description}
             justification="center"
-            size="L"
+            size={lockupSize}
           />
         </div>
       ) : null}