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}

app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx

@@ -43,10 +43,10 @@ export function CreateFlowTopNavView({
               palette={buttonPalette}
               size="xsmall"
               onClick={onShare}
-              ariaLabel="Share"
+              ariaLabel={t("shareAriaLabel")}
               className="md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
             >
-              Share
+              {t("share")}
             </Button>
           )}
 
@@ -56,10 +56,10 @@ export function CreateFlowTopNavView({
               palette={buttonPalette}
               size="xsmall"
               onClick={onExport}
-              ariaLabel="Export"
+              ariaLabel={t("exportAriaLabel")}
               className="justify-center gap-[var(--spacing-scale-002,2px)] !pl-[var(--spacing-scale-012,12px)] !pr-[var(--spacing-scale-006,6px)] md:!pr-[var(--spacing-scale-006,6px)] !text-[10px] md:!text-[12px] !leading-[12px] md:!leading-[14px] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
             >
-              <span>Export</span>
+              <span>{t("export")}</span>
               <svg
                 width="12"
                 height="12"
@@ -83,10 +83,10 @@ export function CreateFlowTopNavView({
               palette={buttonPalette}
               size="xsmall"
               onClick={onEdit}
-              ariaLabel="Edit"
+              ariaLabel={t("editAriaLabel")}
               className="md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
             >
-              Edit
+              {t("edit")}
             </Button>
           )}