@fairmint/ui 0.3.6 → 0.3.8

package/dist/components/generic/DetailDrawer/DetailDrawer.cjs

@@ -10,19 +10,7 @@ function DetailDrawer({
   size = "md",
   ...rest
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Drawer.Drawer,
-    {
-      opened,
-      onClose,
-      title,
-      position: "right",
-      size,
-      p: "lg",
-      ...rest,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Drawer.Drawer, { opened, onClose, title, position: "right", size, ...rest, children });
 }
 exports.DetailDrawer = DetailDrawer;
 //# sourceMappingURL=DetailDrawer.cjs.map

package/dist/components/generic/DetailDrawer/DetailDrawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DetailDrawer.cjs","sources":["../../../../src/components/generic/DetailDrawer/DetailDrawer.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Drawer, type DrawerProps } from \"../../primitives/Drawer/Drawer\";\n\nexport interface DetailDrawerProps extends Omit<DrawerProps, \"title\"> {\n  /** Drawer title shown in the header. Accepts ReactNode for flexibility (layout component). */\n  title: ReactNode;\n  /** Whether the drawer is open. */\n  opened: boolean;\n  /** Close callback. */\n  onClose: () => void;\n  /** Drawer content. */\n  children: ReactNode;\n  /** Drawer width. @default \"md\" */\n  size?: DrawerProps[\"size\"];\n}\n\nexport function DetailDrawer({\n  title,\n  opened,\n  onClose,\n  children,\n  size = \"md\",\n  ...rest\n}: DetailDrawerProps) {\n  return (\n    <Drawer\n      opened={opened}\n      onClose={onClose}\n      title={title}\n      position=\"right\"\n      size={size}\n      p=\"lg\"\n      {...rest}\n    >\n      {children}\n    </Drawer>\n  );\n}\n"],"names":["jsx","Drawer"],"mappings":";;;;AAgBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAsB;AACpB,SACEA,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAS;AAAA,MACT;AAAA,MACA,GAAE;AAAA,MACD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
+{"version":3,"file":"DetailDrawer.cjs","sources":["../../../../src/components/generic/DetailDrawer/DetailDrawer.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Drawer, type DrawerProps } from \"../../primitives/Drawer/Drawer\";\n\nexport interface DetailDrawerProps extends Omit<DrawerProps, \"title\"> {\n  /** Drawer title shown in the header. Accepts ReactNode for flexibility (layout component). */\n  title: ReactNode;\n  /** Whether the drawer is open. */\n  opened: boolean;\n  /** Close callback. */\n  onClose: () => void;\n  /** Drawer content. */\n  children: ReactNode;\n  /** Drawer width. @default \"md\" */\n  size?: DrawerProps[\"size\"];\n}\n\nexport function DetailDrawer({\n  title,\n  opened,\n  onClose,\n  children,\n  size = \"md\",\n  ...rest\n}: DetailDrawerProps) {\n  return (\n    <Drawer opened={opened} onClose={onClose} title={title} position=\"right\" size={size} {...rest}>\n      {children}\n    </Drawer>\n  );\n}\n"],"names":["jsx","Drawer"],"mappings":";;;;AAgBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAsB;AACpB,SACEA,+BAACC,OAAAA,QAAA,EAAO,QAAgB,SAAkB,OAAc,UAAS,SAAQ,MAAa,GAAG,MACtF,SAAA,CACH;AAEJ;;"}

package/dist/components/generic/DetailDrawer/DetailDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DetailDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/DetailDrawer/DetailDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE1E,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IACnE,8FAA8F;IAC9F,KAAK,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,sBAAsB;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,IAAW,EACX,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAcnB"}
+{"version":3,"file":"DetailDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/DetailDrawer/DetailDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE1E,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IACnE,8FAA8F;IAC9F,KAAK,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,sBAAsB;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,IAAW,EACX,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAMnB"}

package/dist/components/generic/DetailDrawer/DetailDrawer.js

@@ -8,19 +8,7 @@ function DetailDrawer({
   size = "md",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx(
-    Drawer,
-    {
-      opened,
-      onClose,
-      title,
-      position: "right",
-      size,
-      p: "lg",
-      ...rest,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(Drawer, { opened, onClose, title, position: "right", size, ...rest, children });
 }
 export {
   DetailDrawer

package/dist/components/generic/DetailDrawer/DetailDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailDrawer.js","sources":["../../../../src/components/generic/DetailDrawer/DetailDrawer.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Drawer, type DrawerProps } from \"../../primitives/Drawer/Drawer\";\n\nexport interface DetailDrawerProps extends Omit<DrawerProps, \"title\"> {\n  /** Drawer title shown in the header. Accepts ReactNode for flexibility (layout component). */\n  title: ReactNode;\n  /** Whether the drawer is open. */\n  opened: boolean;\n  /** Close callback. */\n  onClose: () => void;\n  /** Drawer content. */\n  children: ReactNode;\n  /** Drawer width. @default \"md\" */\n  size?: DrawerProps[\"size\"];\n}\n\nexport function DetailDrawer({\n  title,\n  opened,\n  onClose,\n  children,\n  size = \"md\",\n  ...rest\n}: DetailDrawerProps) {\n  return (\n    <Drawer\n      opened={opened}\n      onClose={onClose}\n      title={title}\n      position=\"right\"\n      size={size}\n      p=\"lg\"\n      {...rest}\n    >\n      {children}\n    </Drawer>\n  );\n}\n"],"names":[],"mappings":";;AAgBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAsB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAS;AAAA,MACT;AAAA,MACA,GAAE;AAAA,MACD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"DetailDrawer.js","sources":["../../../../src/components/generic/DetailDrawer/DetailDrawer.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Drawer, type DrawerProps } from \"../../primitives/Drawer/Drawer\";\n\nexport interface DetailDrawerProps extends Omit<DrawerProps, \"title\"> {\n  /** Drawer title shown in the header. Accepts ReactNode for flexibility (layout component). */\n  title: ReactNode;\n  /** Whether the drawer is open. */\n  opened: boolean;\n  /** Close callback. */\n  onClose: () => void;\n  /** Drawer content. */\n  children: ReactNode;\n  /** Drawer width. @default \"md\" */\n  size?: DrawerProps[\"size\"];\n}\n\nexport function DetailDrawer({\n  title,\n  opened,\n  onClose,\n  children,\n  size = \"md\",\n  ...rest\n}: DetailDrawerProps) {\n  return (\n    <Drawer opened={opened} onClose={onClose} title={title} position=\"right\" size={size} {...rest}>\n      {children}\n    </Drawer>\n  );\n}\n"],"names":[],"mappings":";;AAgBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAsB;AACpB,SACE,oBAAC,QAAA,EAAO,QAAgB,SAAkB,OAAc,UAAS,SAAQ,MAAa,GAAG,MACtF,SAAA,CACH;AAEJ;"}

package/dist/components/generic/StepCard/StepCard.cjs

@@ -36,8 +36,8 @@ function StepCard({
       radius: "lg",
       p: { base: "md", sm: "xl" },
       style: {
-        background: "white",
-        border: `1px solid ${index.neutralColors[200]}`
+        background: index.fairmintVars.colorBgSurface,
+        border: `1px solid ${index.fairmintVars.colorBorderDefault}`
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(layout.Stack, { gap: "md", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: "md", align: "flex-start", wrap: "nowrap", children: [
@@ -45,23 +45,32 @@ function StepCard({
             ThemeIcon.ThemeIcon,
             {
               size: 32,
-              radius: "md",
+              radius: "xl",
               variant: done ? "filled" : "light",
               color: done ? "indigo" : "gray",
               "aria-label": done ? `Step ${index$1} complete` : `Step ${index$1}`,
               style: {
                 flexShrink: 0,
                 pointerEvents: "none",
-                background: done ? index.brandColors.indigo : index.neutralColors[100],
-                color: done ? "white" : index.neutralColors[600],
-                border: done ? void 0 : `1px solid ${index.neutralColors[200]}`
+                background: done ? index.brandColors.indigo : index.fairmintVars.colorBgSurfaceSecondary,
+                color: done ? "white" : index.fairmintVars.colorTextPrimary,
+                border: done ? void 0 : `1px solid ${index.fairmintVars.colorBorderDefault}`
               },
               children: done ? doneIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultCheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { fw: 700, fz: 14, children: index$1 })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(layout.Box, { style: { minWidth: 0, flex: 1 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { fw: 700, fz: responsiveTypography.responsiveTypography.cardTitle, c: index.neutralColors[900], lh: 1.3, children: title }),
-            description && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "sm", c: index.neutralColors[600], lh: 1.5, mt: 4, children: description })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Text.Text,
+              {
+                fw: 700,
+                fz: responsiveTypography.responsiveTypography.cardTitle,
+                c: index.fairmintVars.colorTextPrimary,
+                lh: 1.3,
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "sm", c: index.fairmintVars.colorTextSecondary, lh: 1.5, mt: 4, children: description })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(layout.Box, { pl: { base: 0, sm: 48 }, children })

package/dist/components/generic/StepCard/StepCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StepCard.cjs","sources":["../../../../src/components/generic/StepCard/StepCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { brandColors, neutralColors, responsiveTypography } from \"../../../theme\";\nimport { Box, Group, Paper, Stack, Text, ThemeIcon } from \"../../primitives/layout\";\n\n/** Default check glyph shown when `done === true`. Inline SVG — check only, no circle outline. */\nconst DefaultCheckIcon = () => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m5 13 4 4 10-10\" />\n  </svg>\n);\n\nexport interface StepCardProps {\n  /** 1-indexed step number shown in the indicator when not done. */\n  index: number;\n  /** Step title. */\n  title: string;\n  /** Optional supporting text below the title. */\n  description?: string;\n  /** When true, the indicator flips from the number to a check glyph. */\n  done?: boolean;\n  /**\n   * Override the icon shown when `done === true`. Defaults to a check-only\n   * glyph. Accept-as-ReactNode so consumers don't need to import an icon library.\n   */\n  doneIcon?: ReactNode;\n  /** Step content rendered below the header. */\n  children: ReactNode;\n}\n\n/**\n * Numbered step card used in multi-section wizards and form flows.\n *\n * The numbered indicator on the left flips to a check when the step is\n * marked done — a quiet progress signal that doesn't compete with the\n * right-column summary or page-level progress UI. Each step sits in\n * its own `Paper` for clear visual separation.\n *\n * The header indicator is the focal point; consumers control the body\n * via `children`.\n */\nexport function StepCard({\n  index,\n  title,\n  description,\n  done = false,\n  doneIcon,\n  children,\n}: StepCardProps) {\n  return (\n    <Paper\n      radius=\"lg\"\n      p={{ base: \"md\", sm: \"xl\" }}\n      style={{\n        background: \"white\",\n        border: `1px solid ${neutralColors[200]}`,\n      }}\n    >\n      <Stack gap=\"md\">\n        <Group gap=\"md\" align=\"flex-start\" wrap=\"nowrap\">\n          <ThemeIcon\n            size={32}\n            radius=\"md\"\n            variant={done ? \"filled\" : \"light\"}\n            color={done ? \"indigo\" : \"gray\"}\n            aria-label={done ? `Step ${index} complete` : `Step ${index}`}\n            style={{\n              flexShrink: 0,\n              pointerEvents: \"none\",\n              background: done ? brandColors.indigo : neutralColors[100],\n              color: done ? \"white\" : neutralColors[600],\n              border: done ? undefined : `1px solid ${neutralColors[200]}`,\n            }}\n          >\n            {done ? (\n              (doneIcon ?? <DefaultCheckIcon />)\n            ) : (\n              <Text fw={700} fz={14}>\n                {index}\n              </Text>\n            )}\n          </ThemeIcon>\n          <Box style={{ minWidth: 0, flex: 1 }}>\n            <Text fw={700} fz={responsiveTypography.cardTitle} c={neutralColors[900]} lh={1.3}>\n              {title}\n            </Text>\n            {description && (\n              <Text size=\"sm\" c={neutralColors[600]} lh={1.5} mt={4}>\n                {description}\n              </Text>\n            )}\n          </Box>\n        </Group>\n        <Box pl={{ base: 0, sm: 48 }}>{children}</Box>\n      </Stack>\n    </Paper>\n  );\n}\n"],"names":["jsx","index","Paper","neutralColors","jsxs","Stack","Group","ThemeIcon","brandColors","Text","Box","responsiveTypography"],"mappings":";;;;;;;;;AAKA,MAAM,mBAAmB,MACvBA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IAEZ,UAAAA,2BAAAA,IAAC,QAAA,EAAK,GAAE,kBAAA,CAAkB;AAAA,EAAA;AAC5B;AAgCK,SAAS,SAAS;AAAA,EAAA,OACvBC;AAAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAkB;AAChB,SACED,2BAAAA;AAAAA,IAACE,OAAAA;AAAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,GAAG,EAAE,MAAM,MAAM,IAAI,KAAA;AAAA,MACrB,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ,aAAaC,MAAAA,cAAc,GAAG,CAAC;AAAA,MAAA;AAAA,MAGzC,UAAAC,2BAAAA,KAACC,OAAAA,OAAA,EAAM,KAAI,MACT,UAAA;AAAA,QAAAD,gCAACE,MAAAA,SAAM,KAAI,MAAK,OAAM,cAAa,MAAK,UACtC,UAAA;AAAA,UAAAN,2BAAAA;AAAAA,YAACO,UAAAA;AAAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAS,OAAO,WAAW;AAAA,cAC3B,OAAO,OAAO,WAAW;AAAA,cACzB,cAAY,OAAO,QAAQN,OAAK,cAAc,QAAQA,OAAK;AAAA,cAC3D,OAAO;AAAA,gBACL,YAAY;AAAA,gBACZ,eAAe;AAAA,gBACf,YAAY,OAAOO,MAAAA,YAAY,SAASL,MAAAA,cAAc,GAAG;AAAA,gBACzD,OAAO,OAAO,UAAUA,MAAAA,cAAc,GAAG;AAAA,gBACzC,QAAQ,OAAO,SAAY,aAAaA,MAAAA,cAAc,GAAG,CAAC;AAAA,cAAA;AAAA,cAG3D,UAAA,OACE,YAAYH,2BAAAA,IAAC,kBAAA,CAAA,CAAiB,IAE/BA,2BAAAA,IAACS,KAAAA,MAAA,EAAK,IAAI,KAAK,IAAI,IAChB,UAAAR,QAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJG,gCAACM,OAAAA,OAAI,OAAO,EAAE,UAAU,GAAG,MAAM,KAC/B,UAAA;AAAA,YAAAV,2BAAAA,IAACS,KAAAA,MAAA,EAAK,IAAI,KAAK,IAAIE,qBAAAA,qBAAqB,WAAW,GAAGR,MAAAA,cAAc,GAAG,GAAG,IAAI,KAC3E,UAAA,OACH;AAAA,YACC,eACCH,2BAAAA,IAACS,KAAAA,MAAA,EAAK,MAAK,MAAK,GAAGN,MAAAA,cAAc,GAAG,GAAG,IAAI,KAAK,IAAI,GACjD,UAAA,YAAA,CACH;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,GACF;AAAA,QACAH,+BAACU,OAAAA,OAAI,IAAI,EAAE,MAAM,GAAG,IAAI,GAAA,GAAO,SAAA,CAAS;AAAA,MAAA,EAAA,CAC1C;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"StepCard.cjs","sources":["../../../../src/components/generic/StepCard/StepCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { brandColors, fairmintVars, responsiveTypography } from \"../../../theme\";\nimport { Box, Group, Paper, Stack, Text, ThemeIcon } from \"../../primitives/layout\";\n\n/** Default check glyph shown when `done === true`. Inline SVG — check only, no circle outline. */\nconst DefaultCheckIcon = () => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m5 13 4 4 10-10\" />\n  </svg>\n);\n\nexport interface StepCardProps {\n  /** 1-indexed step number shown in the indicator when not done. */\n  index: number;\n  /** Step title. */\n  title: string;\n  /** Optional supporting text below the title. */\n  description?: string;\n  /** When true, the indicator flips from the number to a check glyph. */\n  done?: boolean;\n  /**\n   * Override the icon shown when `done === true`. Defaults to a check-only\n   * glyph. Accept-as-ReactNode so consumers don't need to import an icon library.\n   */\n  doneIcon?: ReactNode;\n  /** Step content rendered below the header. */\n  children: ReactNode;\n}\n\n/**\n * Numbered step card used in multi-section wizards and form flows.\n *\n * The numbered indicator on the left flips to a check when the step is\n * marked done — a quiet progress signal that doesn't compete with the\n * right-column summary or page-level progress UI. Each step sits in\n * its own `Paper` for clear visual separation.\n *\n * The header indicator is the focal point; consumers control the body\n * via `children`.\n */\nexport function StepCard({\n  index,\n  title,\n  description,\n  done = false,\n  doneIcon,\n  children,\n}: StepCardProps) {\n  return (\n    <Paper\n      radius=\"lg\"\n      p={{ base: \"md\", sm: \"xl\" }}\n      style={{\n        background: fairmintVars.colorBgSurface,\n        border: `1px solid ${fairmintVars.colorBorderDefault}`,\n      }}\n    >\n      <Stack gap=\"md\">\n        <Group gap=\"md\" align=\"flex-start\" wrap=\"nowrap\">\n          <ThemeIcon\n            size={32}\n            radius=\"xl\"\n            variant={done ? \"filled\" : \"light\"}\n            color={done ? \"indigo\" : \"gray\"}\n            aria-label={done ? `Step ${index} complete` : `Step ${index}`}\n            style={{\n              flexShrink: 0,\n              pointerEvents: \"none\",\n              background: done ? brandColors.indigo : fairmintVars.colorBgSurfaceSecondary,\n              color: done ? \"white\" : fairmintVars.colorTextPrimary,\n              border: done ? undefined : `1px solid ${fairmintVars.colorBorderDefault}`,\n            }}\n          >\n            {done ? (\n              (doneIcon ?? <DefaultCheckIcon />)\n            ) : (\n              <Text fw={700} fz={14}>\n                {index}\n              </Text>\n            )}\n          </ThemeIcon>\n          <Box style={{ minWidth: 0, flex: 1 }}>\n            <Text\n              fw={700}\n              fz={responsiveTypography.cardTitle}\n              c={fairmintVars.colorTextPrimary}\n              lh={1.3}\n            >\n              {title}\n            </Text>\n            {description && (\n              <Text size=\"sm\" c={fairmintVars.colorTextSecondary} lh={1.5} mt={4}>\n                {description}\n              </Text>\n            )}\n          </Box>\n        </Group>\n        <Box pl={{ base: 0, sm: 48 }}>{children}</Box>\n      </Stack>\n    </Paper>\n  );\n}\n"],"names":["jsx","index","Paper","fairmintVars","jsxs","Stack","Group","ThemeIcon","brandColors","Text","Box","responsiveTypography"],"mappings":";;;;;;;;;AAKA,MAAM,mBAAmB,MACvBA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IAEZ,UAAAA,2BAAAA,IAAC,QAAA,EAAK,GAAE,kBAAA,CAAkB;AAAA,EAAA;AAC5B;AAgCK,SAAS,SAAS;AAAA,EAAA,OACvBC;AAAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAkB;AAChB,SACED,2BAAAA;AAAAA,IAACE,OAAAA;AAAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,GAAG,EAAE,MAAM,MAAM,IAAI,KAAA;AAAA,MACrB,OAAO;AAAA,QACL,YAAYC,MAAAA,aAAa;AAAA,QACzB,QAAQ,aAAaA,MAAAA,aAAa,kBAAkB;AAAA,MAAA;AAAA,MAGtD,UAAAC,2BAAAA,KAACC,OAAAA,OAAA,EAAM,KAAI,MACT,UAAA;AAAA,QAAAD,gCAACE,MAAAA,SAAM,KAAI,MAAK,OAAM,cAAa,MAAK,UACtC,UAAA;AAAA,UAAAN,2BAAAA;AAAAA,YAACO,UAAAA;AAAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAS,OAAO,WAAW;AAAA,cAC3B,OAAO,OAAO,WAAW;AAAA,cACzB,cAAY,OAAO,QAAQN,OAAK,cAAc,QAAQA,OAAK;AAAA,cAC3D,OAAO;AAAA,gBACL,YAAY;AAAA,gBACZ,eAAe;AAAA,gBACf,YAAY,OAAOO,MAAAA,YAAY,SAASL,MAAAA,aAAa;AAAA,gBACrD,OAAO,OAAO,UAAUA,MAAAA,aAAa;AAAA,gBACrC,QAAQ,OAAO,SAAY,aAAaA,MAAAA,aAAa,kBAAkB;AAAA,cAAA;AAAA,cAGxE,UAAA,OACE,YAAYH,2BAAAA,IAAC,kBAAA,CAAA,CAAiB,IAE/BA,2BAAAA,IAACS,KAAAA,MAAA,EAAK,IAAI,KAAK,IAAI,IAChB,UAAAR,QAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJG,gCAACM,OAAAA,OAAI,OAAO,EAAE,UAAU,GAAG,MAAM,KAC/B,UAAA;AAAA,YAAAV,2BAAAA;AAAAA,cAACS,KAAAA;AAAAA,cAAA;AAAA,gBACC,IAAI;AAAA,gBACJ,IAAIE,qBAAAA,qBAAqB;AAAA,gBACzB,GAAGR,MAAAA,aAAa;AAAA,gBAChB,IAAI;AAAA,gBAEH,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,eACCH,2BAAAA,IAACS,KAAAA,MAAA,EAAK,MAAK,MAAK,GAAGN,MAAAA,aAAa,oBAAoB,IAAI,KAAK,IAAI,GAC9D,UAAA,YAAA,CACH;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,GACF;AAAA,QACAH,+BAACU,OAAAA,OAAI,IAAI,EAAE,MAAM,GAAG,IAAI,GAAA,GAAO,SAAA,CAAS;AAAA,MAAA,EAAA,CAC1C;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/components/generic/StepCard/StepCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepCard.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/StepCard/StepCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBvC,MAAM,WAAW,aAAa;IAC5B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,aAAa,2CAiDf"}
+{"version":3,"file":"StepCard.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/StepCard/StepCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBvC,MAAM,WAAW,aAAa;IAC5B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,aAAa,2CAsDf"}

package/dist/components/generic/StepCard/StepCard.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { neutralColors, brandColors } from "../../../theme/index.js";
+import { fairmintVars, brandColors } from "../../../theme/index.js";
 import { Paper, Stack, Box } from "../../primitives/layout.js";
 import { Group } from "../../../node_modules/@mantine/core/esm/components/Group/Group.js";
 import { ThemeIcon } from "../../../node_modules/@mantine/core/esm/components/ThemeIcon/ThemeIcon.js";
@@ -34,8 +34,8 @@ function StepCard({
       radius: "lg",
       p: { base: "md", sm: "xl" },
       style: {
-        background: "white",
-        border: `1px solid ${neutralColors[200]}`
+        background: fairmintVars.colorBgSurface,
+        border: `1px solid ${fairmintVars.colorBorderDefault}`
       },
       children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
         /* @__PURE__ */ jsxs(Group, { gap: "md", align: "flex-start", wrap: "nowrap", children: [
@@ -43,23 +43,32 @@ function StepCard({
             ThemeIcon,
             {
               size: 32,
-              radius: "md",
+              radius: "xl",
               variant: done ? "filled" : "light",
               color: done ? "indigo" : "gray",
               "aria-label": done ? `Step ${index} complete` : `Step ${index}`,
               style: {
                 flexShrink: 0,
                 pointerEvents: "none",
-                background: done ? brandColors.indigo : neutralColors[100],
-                color: done ? "white" : neutralColors[600],
-                border: done ? void 0 : `1px solid ${neutralColors[200]}`
+                background: done ? brandColors.indigo : fairmintVars.colorBgSurfaceSecondary,
+                color: done ? "white" : fairmintVars.colorTextPrimary,
+                border: done ? void 0 : `1px solid ${fairmintVars.colorBorderDefault}`
               },
               children: done ? doneIcon ?? /* @__PURE__ */ jsx(DefaultCheckIcon, {}) : /* @__PURE__ */ jsx(Text, { fw: 700, fz: 14, children: index })
             }
           ),
           /* @__PURE__ */ jsxs(Box, { style: { minWidth: 0, flex: 1 }, children: [
-            /* @__PURE__ */ jsx(Text, { fw: 700, fz: responsiveTypography.cardTitle, c: neutralColors[900], lh: 1.3, children: title }),
-            description && /* @__PURE__ */ jsx(Text, { size: "sm", c: neutralColors[600], lh: 1.5, mt: 4, children: description })
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                fw: 700,
+                fz: responsiveTypography.cardTitle,
+                c: fairmintVars.colorTextPrimary,
+                lh: 1.3,
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ jsx(Text, { size: "sm", c: fairmintVars.colorTextSecondary, lh: 1.5, mt: 4, children: description })
           ] })
         ] }),
         /* @__PURE__ */ jsx(Box, { pl: { base: 0, sm: 48 }, children })

package/dist/components/generic/StepCard/StepCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepCard.js","sources":["../../../../src/components/generic/StepCard/StepCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { brandColors, neutralColors, responsiveTypography } from \"../../../theme\";\nimport { Box, Group, Paper, Stack, Text, ThemeIcon } from \"../../primitives/layout\";\n\n/** Default check glyph shown when `done === true`. Inline SVG — check only, no circle outline. */\nconst DefaultCheckIcon = () => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m5 13 4 4 10-10\" />\n  </svg>\n);\n\nexport interface StepCardProps {\n  /** 1-indexed step number shown in the indicator when not done. */\n  index: number;\n  /** Step title. */\n  title: string;\n  /** Optional supporting text below the title. */\n  description?: string;\n  /** When true, the indicator flips from the number to a check glyph. */\n  done?: boolean;\n  /**\n   * Override the icon shown when `done === true`. Defaults to a check-only\n   * glyph. Accept-as-ReactNode so consumers don't need to import an icon library.\n   */\n  doneIcon?: ReactNode;\n  /** Step content rendered below the header. */\n  children: ReactNode;\n}\n\n/**\n * Numbered step card used in multi-section wizards and form flows.\n *\n * The numbered indicator on the left flips to a check when the step is\n * marked done — a quiet progress signal that doesn't compete with the\n * right-column summary or page-level progress UI. Each step sits in\n * its own `Paper` for clear visual separation.\n *\n * The header indicator is the focal point; consumers control the body\n * via `children`.\n */\nexport function StepCard({\n  index,\n  title,\n  description,\n  done = false,\n  doneIcon,\n  children,\n}: StepCardProps) {\n  return (\n    <Paper\n      radius=\"lg\"\n      p={{ base: \"md\", sm: \"xl\" }}\n      style={{\n        background: \"white\",\n        border: `1px solid ${neutralColors[200]}`,\n      }}\n    >\n      <Stack gap=\"md\">\n        <Group gap=\"md\" align=\"flex-start\" wrap=\"nowrap\">\n          <ThemeIcon\n            size={32}\n            radius=\"md\"\n            variant={done ? \"filled\" : \"light\"}\n            color={done ? \"indigo\" : \"gray\"}\n            aria-label={done ? `Step ${index} complete` : `Step ${index}`}\n            style={{\n              flexShrink: 0,\n              pointerEvents: \"none\",\n              background: done ? brandColors.indigo : neutralColors[100],\n              color: done ? \"white\" : neutralColors[600],\n              border: done ? undefined : `1px solid ${neutralColors[200]}`,\n            }}\n          >\n            {done ? (\n              (doneIcon ?? <DefaultCheckIcon />)\n            ) : (\n              <Text fw={700} fz={14}>\n                {index}\n              </Text>\n            )}\n          </ThemeIcon>\n          <Box style={{ minWidth: 0, flex: 1 }}>\n            <Text fw={700} fz={responsiveTypography.cardTitle} c={neutralColors[900]} lh={1.3}>\n              {title}\n            </Text>\n            {description && (\n              <Text size=\"sm\" c={neutralColors[600]} lh={1.5} mt={4}>\n                {description}\n              </Text>\n            )}\n          </Box>\n        </Group>\n        <Box pl={{ base: 0, sm: 48 }}>{children}</Box>\n      </Stack>\n    </Paper>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,MACvB;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IAEZ,UAAA,oBAAC,QAAA,EAAK,GAAE,kBAAA,CAAkB;AAAA,EAAA;AAC5B;AAgCK,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAkB;AAChB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,GAAG,EAAE,MAAM,MAAM,IAAI,KAAA;AAAA,MACrB,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ,aAAa,cAAc,GAAG,CAAC;AAAA,MAAA;AAAA,MAGzC,UAAA,qBAAC,OAAA,EAAM,KAAI,MACT,UAAA;AAAA,QAAA,qBAAC,SAAM,KAAI,MAAK,OAAM,cAAa,MAAK,UACtC,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAS,OAAO,WAAW;AAAA,cAC3B,OAAO,OAAO,WAAW;AAAA,cACzB,cAAY,OAAO,QAAQ,KAAK,cAAc,QAAQ,KAAK;AAAA,cAC3D,OAAO;AAAA,gBACL,YAAY;AAAA,gBACZ,eAAe;AAAA,gBACf,YAAY,OAAO,YAAY,SAAS,cAAc,GAAG;AAAA,gBACzD,OAAO,OAAO,UAAU,cAAc,GAAG;AAAA,gBACzC,QAAQ,OAAO,SAAY,aAAa,cAAc,GAAG,CAAC;AAAA,cAAA;AAAA,cAG3D,UAAA,OACE,YAAY,oBAAC,kBAAA,CAAA,CAAiB,IAE/B,oBAAC,MAAA,EAAK,IAAI,KAAK,IAAI,IAChB,UAAA,MAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,qBAAC,OAAI,OAAO,EAAE,UAAU,GAAG,MAAM,KAC/B,UAAA;AAAA,YAAA,oBAAC,MAAA,EAAK,IAAI,KAAK,IAAI,qBAAqB,WAAW,GAAG,cAAc,GAAG,GAAG,IAAI,KAC3E,UAAA,OACH;AAAA,YACC,eACC,oBAAC,MAAA,EAAK,MAAK,MAAK,GAAG,cAAc,GAAG,GAAG,IAAI,KAAK,IAAI,GACjD,UAAA,YAAA,CACH;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,GACF;AAAA,QACA,oBAAC,OAAI,IAAI,EAAE,MAAM,GAAG,IAAI,GAAA,GAAO,SAAA,CAAS;AAAA,MAAA,EAAA,CAC1C;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"StepCard.js","sources":["../../../../src/components/generic/StepCard/StepCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { brandColors, fairmintVars, responsiveTypography } from \"../../../theme\";\nimport { Box, Group, Paper, Stack, Text, ThemeIcon } from \"../../primitives/layout\";\n\n/** Default check glyph shown when `done === true`. Inline SVG — check only, no circle outline. */\nconst DefaultCheckIcon = () => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m5 13 4 4 10-10\" />\n  </svg>\n);\n\nexport interface StepCardProps {\n  /** 1-indexed step number shown in the indicator when not done. */\n  index: number;\n  /** Step title. */\n  title: string;\n  /** Optional supporting text below the title. */\n  description?: string;\n  /** When true, the indicator flips from the number to a check glyph. */\n  done?: boolean;\n  /**\n   * Override the icon shown when `done === true`. Defaults to a check-only\n   * glyph. Accept-as-ReactNode so consumers don't need to import an icon library.\n   */\n  doneIcon?: ReactNode;\n  /** Step content rendered below the header. */\n  children: ReactNode;\n}\n\n/**\n * Numbered step card used in multi-section wizards and form flows.\n *\n * The numbered indicator on the left flips to a check when the step is\n * marked done — a quiet progress signal that doesn't compete with the\n * right-column summary or page-level progress UI. Each step sits in\n * its own `Paper` for clear visual separation.\n *\n * The header indicator is the focal point; consumers control the body\n * via `children`.\n */\nexport function StepCard({\n  index,\n  title,\n  description,\n  done = false,\n  doneIcon,\n  children,\n}: StepCardProps) {\n  return (\n    <Paper\n      radius=\"lg\"\n      p={{ base: \"md\", sm: \"xl\" }}\n      style={{\n        background: fairmintVars.colorBgSurface,\n        border: `1px solid ${fairmintVars.colorBorderDefault}`,\n      }}\n    >\n      <Stack gap=\"md\">\n        <Group gap=\"md\" align=\"flex-start\" wrap=\"nowrap\">\n          <ThemeIcon\n            size={32}\n            radius=\"xl\"\n            variant={done ? \"filled\" : \"light\"}\n            color={done ? \"indigo\" : \"gray\"}\n            aria-label={done ? `Step ${index} complete` : `Step ${index}`}\n            style={{\n              flexShrink: 0,\n              pointerEvents: \"none\",\n              background: done ? brandColors.indigo : fairmintVars.colorBgSurfaceSecondary,\n              color: done ? \"white\" : fairmintVars.colorTextPrimary,\n              border: done ? undefined : `1px solid ${fairmintVars.colorBorderDefault}`,\n            }}\n          >\n            {done ? (\n              (doneIcon ?? <DefaultCheckIcon />)\n            ) : (\n              <Text fw={700} fz={14}>\n                {index}\n              </Text>\n            )}\n          </ThemeIcon>\n          <Box style={{ minWidth: 0, flex: 1 }}>\n            <Text\n              fw={700}\n              fz={responsiveTypography.cardTitle}\n              c={fairmintVars.colorTextPrimary}\n              lh={1.3}\n            >\n              {title}\n            </Text>\n            {description && (\n              <Text size=\"sm\" c={fairmintVars.colorTextSecondary} lh={1.5} mt={4}>\n                {description}\n              </Text>\n            )}\n          </Box>\n        </Group>\n        <Box pl={{ base: 0, sm: 48 }}>{children}</Box>\n      </Stack>\n    </Paper>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,MACvB;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IAEZ,UAAA,oBAAC,QAAA,EAAK,GAAE,kBAAA,CAAkB;AAAA,EAAA;AAC5B;AAgCK,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAkB;AAChB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,GAAG,EAAE,MAAM,MAAM,IAAI,KAAA;AAAA,MACrB,OAAO;AAAA,QACL,YAAY,aAAa;AAAA,QACzB,QAAQ,aAAa,aAAa,kBAAkB;AAAA,MAAA;AAAA,MAGtD,UAAA,qBAAC,OAAA,EAAM,KAAI,MACT,UAAA;AAAA,QAAA,qBAAC,SAAM,KAAI,MAAK,OAAM,cAAa,MAAK,UACtC,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAS,OAAO,WAAW;AAAA,cAC3B,OAAO,OAAO,WAAW;AAAA,cACzB,cAAY,OAAO,QAAQ,KAAK,cAAc,QAAQ,KAAK;AAAA,cAC3D,OAAO;AAAA,gBACL,YAAY;AAAA,gBACZ,eAAe;AAAA,gBACf,YAAY,OAAO,YAAY,SAAS,aAAa;AAAA,gBACrD,OAAO,OAAO,UAAU,aAAa;AAAA,gBACrC,QAAQ,OAAO,SAAY,aAAa,aAAa,kBAAkB;AAAA,cAAA;AAAA,cAGxE,UAAA,OACE,YAAY,oBAAC,kBAAA,CAAA,CAAiB,IAE/B,oBAAC,MAAA,EAAK,IAAI,KAAK,IAAI,IAChB,UAAA,MAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,qBAAC,OAAI,OAAO,EAAE,UAAU,GAAG,MAAM,KAC/B,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,gBACJ,IAAI,qBAAqB;AAAA,gBACzB,GAAG,aAAa;AAAA,gBAChB,IAAI;AAAA,gBAEH,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,eACC,oBAAC,MAAA,EAAK,MAAK,MAAK,GAAG,aAAa,oBAAoB,IAAI,KAAK,IAAI,GAC9D,UAAA,YAAA,CACH;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,GACF;AAAA,QACA,oBAAC,OAAI,IAAI,EAAE,MAAM,GAAG,IAAI,GAAA,GAAO,SAAA,CAAS;AAAA,MAAA,EAAA,CAC1C;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/generic/StepFlow/StepFlow.cjs

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const layout = require("../../primitives/layout.cjs");
+const StepCard = require("../StepCard/StepCard.cjs");
+const StepProgress = require("../StepProgress/StepProgress.cjs");
+;/* empty css               */
+const DEFAULT_MAX_WIDTH = 640;
+const MAX_WIDTH_TOKENS = {
+  xs: "444px",
+  sm: "600px",
+  md: "900px",
+  lg: "1200px",
+  xl: "1536px"
+};
+const resolveMaxWidth = (maxWidth) => {
+  if (typeof maxWidth === "number") return `${maxWidth}px`;
+  return MAX_WIDTH_TOKENS[maxWidth] ?? maxWidth;
+};
+const resolveActiveStep = (activeStep, stepCount) => {
+  if (!Number.isFinite(activeStep)) return 1;
+  return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);
+};
+const renderStepContent = (step, stepNumber, done) => /* @__PURE__ */ jsxRuntime.jsx(StepCard.StepCard, { index: stepNumber, title: step.title, description: step.description, done, children: step.content });
+function StepFlow({
+  steps,
+  activeStep,
+  orientation = "horizontal",
+  onStepChange,
+  maxWidth = DEFAULT_MAX_WIDTH,
+  ariaLabel = "Progress"
+}) {
+  if (steps.length === 0) return null;
+  const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);
+  const activeIndex = resolvedActiveStep - 1;
+  const activeStepData = steps[activeIndex];
+  const rootStyle = {
+    "--fairmint-step-flow-max-width": resolveMaxWidth(maxWidth)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    layout.Box,
+    {
+      className: "fairmint-step-flow",
+      "data-orientation": orientation,
+      "data-active-step": resolvedActiveStep,
+      style: rootStyle,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StepProgress.StepProgress,
+          {
+            steps,
+            activeStep: resolvedActiveStep,
+            orientation,
+            onStepChange,
+            ariaLabel
+          }
+        ),
+        activeStepData && /* @__PURE__ */ jsxRuntime.jsx(layout.Box, { className: "fairmint-step-flow__content", children: renderStepContent(activeStepData, resolvedActiveStep, activeStepData.completed ?? false) })
+      ]
+    }
+  );
+}
+const STEP_FLOW_DEFAULT_MAX_WIDTH = DEFAULT_MAX_WIDTH;
+exports.STEP_FLOW_DEFAULT_MAX_WIDTH = STEP_FLOW_DEFAULT_MAX_WIDTH;
+exports.StepFlow = StepFlow;
+//# sourceMappingURL=StepFlow.cjs.map

package/dist/components/generic/StepFlow/StepFlow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepFlow.cjs","sources":["../../../../src/components/generic/StepFlow/StepFlow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Box } from \"../../primitives/layout\";\nimport { StepCard } from \"../StepCard/StepCard\";\nimport { StepProgress, type StepProgressStep } from \"../StepProgress/StepProgress\";\nimport \"./StepFlow.css\";\n\nconst DEFAULT_MAX_WIDTH = 640;\n\nexport type StepFlowOrientation = \"horizontal\" | \"vertical\";\n\nexport interface StepFlowStep extends StepProgressStep {\n  /** Heading shown inside the numbered content container. */\n  title: string;\n  /** Optional supporting text below the title. */\n  description?: string;\n  /** Content rendered inside the step container. */\n  content: ReactNode;\n}\n\nexport interface StepFlowProps {\n  /** Ordered steps. The visible number is derived from this array and is 1-indexed. */\n  steps: readonly StepFlowStep[];\n  /** Current step number. This is intentionally 1-indexed to match StepCard and the UI. */\n  activeStep: number;\n  /** Horizontal in-app progress or vertical onboarding rail. @default \"horizontal\" */\n  orientation?: StepFlowOrientation;\n  /** Called with the 1-indexed step number when a progress pill is activated. */\n  onStepChange?: (step: number) => void;\n  /** Maximum width of the shared flow shell. @default 640 */\n  maxWidth?: number | string;\n  /** Accessible label for the progress navigation. @default \"Progress\" */\n  ariaLabel?: string;\n}\n\nconst MAX_WIDTH_TOKENS: Record<string, string> = {\n  xs: \"444px\",\n  sm: \"600px\",\n  md: \"900px\",\n  lg: \"1200px\",\n  xl: \"1536px\",\n};\n\nconst resolveMaxWidth = (maxWidth: number | string) => {\n  if (typeof maxWidth === \"number\") return `${maxWidth}px`;\n  return MAX_WIDTH_TOKENS[maxWidth] ?? maxWidth;\n};\n\nconst resolveActiveStep = (activeStep: number, stepCount: number) => {\n  if (!Number.isFinite(activeStep)) return 1;\n  return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);\n};\n\nconst renderStepContent = (step: StepFlowStep, stepNumber: number, done: boolean) => (\n  <StepCard index={stepNumber} title={step.title} description={step.description} done={done}>\n    {step.content}\n  </StepCard>\n);\n\n/**\n * Canonical Fairmint shell for bounded multi-step flows.\n *\n * Horizontal flows pair step pills with one numbered content container. Vertical\n * flows move the same progress pills into a rail beside the active container.\n * The feature owns persistence, validation, and whether a step is safe to visit.\n */\nexport function StepFlow({\n  steps,\n  activeStep,\n  orientation = \"horizontal\",\n  onStepChange,\n  maxWidth = DEFAULT_MAX_WIDTH,\n  ariaLabel = \"Progress\",\n}: StepFlowProps) {\n  if (steps.length === 0) return null;\n\n  const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);\n  const activeIndex = resolvedActiveStep - 1;\n  const activeStepData = steps[activeIndex];\n  const rootStyle = {\n    \"--fairmint-step-flow-max-width\": resolveMaxWidth(maxWidth),\n  };\n\n  return (\n    <Box\n      className=\"fairmint-step-flow\"\n      data-orientation={orientation}\n      data-active-step={resolvedActiveStep}\n      style={rootStyle}\n    >\n      <StepProgress\n        steps={steps}\n        activeStep={resolvedActiveStep}\n        orientation={orientation}\n        onStepChange={onStepChange}\n        ariaLabel={ariaLabel}\n      />\n\n      {activeStepData && (\n        <Box className=\"fairmint-step-flow__content\">\n          {renderStepContent(activeStepData, resolvedActiveStep, activeStepData.completed ?? false)}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\nexport const STEP_FLOW_DEFAULT_MAX_WIDTH = DEFAULT_MAX_WIDTH;\n"],"names":["StepCard","jsxs","Box","jsx","StepProgress"],"mappings":";;;;;;;AAMA,MAAM,oBAAoB;AA4B1B,MAAM,mBAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,kBAAkB,CAAC,aAA8B;AACrD,MAAI,OAAO,aAAa,SAAU,QAAO,GAAG,QAAQ;AACpD,SAAO,iBAAiB,QAAQ,KAAK;AACvC;AAEA,MAAM,oBAAoB,CAAC,YAAoB,cAAsB;AACnE,MAAI,CAAC,OAAO,SAAS,UAAU,EAAG,QAAO;AACzC,SAAO,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,UAAU,GAAG,CAAC,GAAG,SAAS;AAChE;AAEA,MAAM,oBAAoB,CAAC,MAAoB,YAAoB,wCAChEA,SAAAA,UAAA,EAAS,OAAO,YAAY,OAAO,KAAK,OAAO,aAAa,KAAK,aAAa,MAC5E,eAAK,SACR;AAUK,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AACd,GAAkB;AAChB,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QAAM,qBAAqB,kBAAkB,YAAY,MAAM,MAAM;AACrE,QAAM,cAAc,qBAAqB;AACzC,QAAM,iBAAiB,MAAM,WAAW;AACxC,QAAM,YAAY;AAAA,IAChB,kCAAkC,gBAAgB,QAAQ;AAAA,EAAA;AAG5D,SACEC,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,oBAAkB;AAAA,MAClB,OAAO;AAAA,MAEP,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAACC,aAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA,YAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD,kBACCD,2BAAAA,IAACD,OAAAA,KAAA,EAAI,WAAU,+BACZ,UAAA,kBAAkB,gBAAgB,oBAAoB,eAAe,aAAa,KAAK,EAAA,CAC1F;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEO,MAAM,8BAA8B;;;"}

package/dist/components/generic/StepFlow/StepFlow.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { StepProgressStep } from '../StepProgress/StepProgress';
+export type StepFlowOrientation = "horizontal" | "vertical";
+export interface StepFlowStep extends StepProgressStep {
+    /** Heading shown inside the numbered content container. */
+    title: string;
+    /** Optional supporting text below the title. */
+    description?: string;
+    /** Content rendered inside the step container. */
+    content: ReactNode;
+}
+export interface StepFlowProps {
+    /** Ordered steps. The visible number is derived from this array and is 1-indexed. */
+    steps: readonly StepFlowStep[];
+    /** Current step number. This is intentionally 1-indexed to match StepCard and the UI. */
+    activeStep: number;
+    /** Horizontal in-app progress or vertical onboarding rail. @default "horizontal" */
+    orientation?: StepFlowOrientation;
+    /** Called with the 1-indexed step number when a progress pill is activated. */
+    onStepChange?: (step: number) => void;
+    /** Maximum width of the shared flow shell. @default 640 */
+    maxWidth?: number | string;
+    /** Accessible label for the progress navigation. @default "Progress" */
+    ariaLabel?: string;
+}
+/**
+ * Canonical Fairmint shell for bounded multi-step flows.
+ *
+ * Horizontal flows pair step pills with one numbered content container. Vertical
+ * flows move the same progress pills into a rail beside the active container.
+ * The feature owns persistence, validation, and whether a step is safe to visit.
+ */
+export declare function StepFlow({ steps, activeStep, orientation, onStepChange, maxWidth, ariaLabel, }: StepFlowProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const STEP_FLOW_DEFAULT_MAX_WIDTH = 640;
+//# sourceMappingURL=StepFlow.d.ts.map

package/dist/components/generic/StepFlow/StepFlow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepFlow.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/StepFlow/StepFlow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,gBAAgB,CAAC;AAIxB,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,qFAAqF;IACrF,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,yFAAyF;IACzF,UAAU,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,+EAA+E;IAC/E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,UAAU,EACV,WAA0B,EAC1B,YAAY,EACZ,QAA4B,EAC5B,SAAsB,GACvB,EAAE,aAAa,kDAgCf;AAED,eAAO,MAAM,2BAA2B,MAAoB,CAAC"}

package/dist/components/generic/StepFlow/StepFlow.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Box } from "../../primitives/layout.js";
+import { StepCard } from "../StepCard/StepCard.js";
+import { StepProgress } from "../StepProgress/StepProgress.js";
+/* empty css             */
+const DEFAULT_MAX_WIDTH = 640;
+const MAX_WIDTH_TOKENS = {
+  xs: "444px",
+  sm: "600px",
+  md: "900px",
+  lg: "1200px",
+  xl: "1536px"
+};
+const resolveMaxWidth = (maxWidth) => {
+  if (typeof maxWidth === "number") return `${maxWidth}px`;
+  return MAX_WIDTH_TOKENS[maxWidth] ?? maxWidth;
+};
+const resolveActiveStep = (activeStep, stepCount) => {
+  if (!Number.isFinite(activeStep)) return 1;
+  return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);
+};
+const renderStepContent = (step, stepNumber, done) => /* @__PURE__ */ jsx(StepCard, { index: stepNumber, title: step.title, description: step.description, done, children: step.content });
+function StepFlow({
+  steps,
+  activeStep,
+  orientation = "horizontal",
+  onStepChange,
+  maxWidth = DEFAULT_MAX_WIDTH,
+  ariaLabel = "Progress"
+}) {
+  if (steps.length === 0) return null;
+  const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);
+  const activeIndex = resolvedActiveStep - 1;
+  const activeStepData = steps[activeIndex];
+  const rootStyle = {
+    "--fairmint-step-flow-max-width": resolveMaxWidth(maxWidth)
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: "fairmint-step-flow",
+      "data-orientation": orientation,
+      "data-active-step": resolvedActiveStep,
+      style: rootStyle,
+      children: [
+        /* @__PURE__ */ jsx(
+          StepProgress,
+          {
+            steps,
+            activeStep: resolvedActiveStep,
+            orientation,
+            onStepChange,
+            ariaLabel
+          }
+        ),
+        activeStepData && /* @__PURE__ */ jsx(Box, { className: "fairmint-step-flow__content", children: renderStepContent(activeStepData, resolvedActiveStep, activeStepData.completed ?? false) })
+      ]
+    }
+  );
+}
+const STEP_FLOW_DEFAULT_MAX_WIDTH = DEFAULT_MAX_WIDTH;
+export {
+  STEP_FLOW_DEFAULT_MAX_WIDTH,
+  StepFlow
+};
+//# sourceMappingURL=StepFlow.js.map

package/dist/components/generic/StepFlow/StepFlow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepFlow.js","sources":["../../../../src/components/generic/StepFlow/StepFlow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Box } from \"../../primitives/layout\";\nimport { StepCard } from \"../StepCard/StepCard\";\nimport { StepProgress, type StepProgressStep } from \"../StepProgress/StepProgress\";\nimport \"./StepFlow.css\";\n\nconst DEFAULT_MAX_WIDTH = 640;\n\nexport type StepFlowOrientation = \"horizontal\" | \"vertical\";\n\nexport interface StepFlowStep extends StepProgressStep {\n  /** Heading shown inside the numbered content container. */\n  title: string;\n  /** Optional supporting text below the title. */\n  description?: string;\n  /** Content rendered inside the step container. */\n  content: ReactNode;\n}\n\nexport interface StepFlowProps {\n  /** Ordered steps. The visible number is derived from this array and is 1-indexed. */\n  steps: readonly StepFlowStep[];\n  /** Current step number. This is intentionally 1-indexed to match StepCard and the UI. */\n  activeStep: number;\n  /** Horizontal in-app progress or vertical onboarding rail. @default \"horizontal\" */\n  orientation?: StepFlowOrientation;\n  /** Called with the 1-indexed step number when a progress pill is activated. */\n  onStepChange?: (step: number) => void;\n  /** Maximum width of the shared flow shell. @default 640 */\n  maxWidth?: number | string;\n  /** Accessible label for the progress navigation. @default \"Progress\" */\n  ariaLabel?: string;\n}\n\nconst MAX_WIDTH_TOKENS: Record<string, string> = {\n  xs: \"444px\",\n  sm: \"600px\",\n  md: \"900px\",\n  lg: \"1200px\",\n  xl: \"1536px\",\n};\n\nconst resolveMaxWidth = (maxWidth: number | string) => {\n  if (typeof maxWidth === \"number\") return `${maxWidth}px`;\n  return MAX_WIDTH_TOKENS[maxWidth] ?? maxWidth;\n};\n\nconst resolveActiveStep = (activeStep: number, stepCount: number) => {\n  if (!Number.isFinite(activeStep)) return 1;\n  return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);\n};\n\nconst renderStepContent = (step: StepFlowStep, stepNumber: number, done: boolean) => (\n  <StepCard index={stepNumber} title={step.title} description={step.description} done={done}>\n    {step.content}\n  </StepCard>\n);\n\n/**\n * Canonical Fairmint shell for bounded multi-step flows.\n *\n * Horizontal flows pair step pills with one numbered content container. Vertical\n * flows move the same progress pills into a rail beside the active container.\n * The feature owns persistence, validation, and whether a step is safe to visit.\n */\nexport function StepFlow({\n  steps,\n  activeStep,\n  orientation = \"horizontal\",\n  onStepChange,\n  maxWidth = DEFAULT_MAX_WIDTH,\n  ariaLabel = \"Progress\",\n}: StepFlowProps) {\n  if (steps.length === 0) return null;\n\n  const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);\n  const activeIndex = resolvedActiveStep - 1;\n  const activeStepData = steps[activeIndex];\n  const rootStyle = {\n    \"--fairmint-step-flow-max-width\": resolveMaxWidth(maxWidth),\n  };\n\n  return (\n    <Box\n      className=\"fairmint-step-flow\"\n      data-orientation={orientation}\n      data-active-step={resolvedActiveStep}\n      style={rootStyle}\n    >\n      <StepProgress\n        steps={steps}\n        activeStep={resolvedActiveStep}\n        orientation={orientation}\n        onStepChange={onStepChange}\n        ariaLabel={ariaLabel}\n      />\n\n      {activeStepData && (\n        <Box className=\"fairmint-step-flow__content\">\n          {renderStepContent(activeStepData, resolvedActiveStep, activeStepData.completed ?? false)}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\nexport const STEP_FLOW_DEFAULT_MAX_WIDTH = DEFAULT_MAX_WIDTH;\n"],"names":[],"mappings":";;;;;AAMA,MAAM,oBAAoB;AA4B1B,MAAM,mBAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,kBAAkB,CAAC,aAA8B;AACrD,MAAI,OAAO,aAAa,SAAU,QAAO,GAAG,QAAQ;AACpD,SAAO,iBAAiB,QAAQ,KAAK;AACvC;AAEA,MAAM,oBAAoB,CAAC,YAAoB,cAAsB;AACnE,MAAI,CAAC,OAAO,SAAS,UAAU,EAAG,QAAO;AACzC,SAAO,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,UAAU,GAAG,CAAC,GAAG,SAAS;AAChE;AAEA,MAAM,oBAAoB,CAAC,MAAoB,YAAoB,6BAChE,UAAA,EAAS,OAAO,YAAY,OAAO,KAAK,OAAO,aAAa,KAAK,aAAa,MAC5E,eAAK,SACR;AAUK,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AACd,GAAkB;AAChB,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QAAM,qBAAqB,kBAAkB,YAAY,MAAM,MAAM;AACrE,QAAM,cAAc,qBAAqB;AACzC,QAAM,iBAAiB,MAAM,WAAW;AACxC,QAAM,YAAY;AAAA,IAChB,kCAAkC,gBAAgB,QAAQ;AAAA,EAAA;AAG5D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,oBAAkB;AAAA,MAClB,OAAO;AAAA,MAEP,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,YAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD,kBACC,oBAAC,KAAA,EAAI,WAAU,+BACZ,UAAA,kBAAkB,gBAAgB,oBAAoB,eAAe,aAAa,KAAK,EAAA,CAC1F;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEO,MAAM,8BAA8B;"}

package/dist/components/generic/StepProgress/StepProgress.cjs

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const index = require("../../../theme/index.cjs");
+const layout = require("../../primitives/layout.cjs");
+;/* empty css                   */
+const UnstyledButton = require("../../../node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.cjs");
+const CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m5 13 4 4 10-10" })
+  }
+);
+const resolveActiveStep = (activeStep, stepCount) => {
+  if (!Number.isFinite(activeStep)) return 1;
+  return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);
+};
+const getStepProgressStatus = (step, stepNumber, activeStep) => {
+  if (stepNumber === activeStep) return "active";
+  if (step.completed ?? stepNumber < activeStep) return "complete";
+  return "pending";
+};
+function StepProgress({
+  steps,
+  activeStep,
+  orientation = "horizontal",
+  onStepChange,
+  ariaLabel = "Progress"
+}) {
+  if (steps.length === 0) return null;
+  const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);
+  const rootStyle = {
+    "--fairmint-step-progress-brand": index.brandColors.indigo,
+    "--fairmint-step-progress-border": index.fairmintVars.colorBorderDefault,
+    "--fairmint-step-progress-text-primary": index.fairmintVars.colorTextPrimary,
+    "--fairmint-step-progress-text-secondary": index.fairmintVars.colorTextSecondary,
+    "--fairmint-step-progress-surface-selected": index.fairmintVars.colorSurfaceSelected,
+    // One shared accent tone for anything bordering/reading on colorSurfaceSelected,
+    // instead of two adjacent-but-different indigo shades competing.
+    "--fairmint-step-progress-active-border": index.indigoColors[2],
+    "--fairmint-step-progress-active-indicator-text": index.commonColors.white,
+    "--fairmint-step-progress-complete-border": index.indigoColors[2],
+    "--fairmint-step-progress-complete-text": index.fairmintVars.colorIconOnSurfaceSelected
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    layout.Box,
+    {
+      component: "nav",
+      "aria-label": ariaLabel,
+      className: "fairmint-step-progress",
+      "data-orientation": orientation,
+      style: rootStyle,
+      children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "fairmint-step-progress__list", children: steps.map((step, index2) => {
+        const stepNumber = index2 + 1;
+        const status = getStepProgressStatus(step, stepNumber, resolvedActiveStep);
+        const isInteractive = Boolean(onStepChange) && !step.disabled;
+        const pillContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fairmint-step-progress__indicator", "aria-hidden": "true", children: status === "complete" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : stepNumber }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fairmint-step-progress__label", children: step.label })
+        ] });
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "fairmint-step-progress__item", children: isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(
+          UnstyledButton.UnstyledButton,
+          {
+            type: "button",
+            className: "fairmint-step-progress__pill",
+            "data-state": status,
+            "data-interactive": "true",
+            "aria-current": status === "active" ? "step" : void 0,
+            "aria-label": `Step ${stepNumber}: ${step.label}`,
+            onClick: () => onStepChange?.(stepNumber),
+            children: pillContent
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "fairmint-step-progress__pill",
+            "data-state": status,
+            "aria-current": status === "active" ? "step" : void 0,
+            title: `Step ${stepNumber}: ${step.label}`,
+            children: pillContent
+          }
+        ) }, `${stepNumber}-${step.label}`);
+      }) })
+    }
+  );
+}
+const STEP_PROGRESS_MOBILE_BREAKPOINT = "48em";
+exports.STEP_PROGRESS_MOBILE_BREAKPOINT = STEP_PROGRESS_MOBILE_BREAKPOINT;
+exports.StepProgress = StepProgress;
+exports.getStepProgressStatus = getStepProgressStatus;
+//# sourceMappingURL=StepProgress.cjs.map

package/dist/components/generic/StepProgress/StepProgress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepProgress.cjs","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"sourcesContent":["import { brandColors, commonColors, fairmintVars, indigoColors } from \"../../../theme\";\nimport { Box, UnstyledButton } from \"../../primitives/layout\";\nimport \"./StepProgress.css\";\n\nexport type StepProgressOrientation = \"horizontal\" | \"vertical\";\nexport type StepProgressStepStatus = \"complete\" | \"active\" | \"pending\";\n\nexport interface StepProgressStep {\n  /** Visible label in the progress pill. */\n  label: string;\n  /** Explicitly mark a step complete when completion is not derived from activeStep. */\n  completed?: boolean;\n  /** Prevent navigation to this step when onStepChange is supplied. */\n  disabled?: boolean;\n}\n\nexport interface StepProgressProps {\n  /** Ordered steps. The visible number is derived from this array and is 1-indexed. */\n  steps: readonly StepProgressStep[];\n  /** Current step number. This is intentionally 1-indexed to match StepCard and the UI. */\n  activeStep: number;\n  /** Row of pills for in-app progress or a rail for onboarding. @default \"horizontal\" */\n  orientation?: StepProgressOrientation;\n  /** Called with the 1-indexed step number when a pill is activated. */\n  onStepChange?: (step: number) => void;\n  /** Accessible label for the navigation. @default \"Progress\" */\n  ariaLabel?: string;\n}\n\nconst CheckIcon = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m5 13 4 4 10-10\" />\n  </svg>\n);\n\nconst resolveActiveStep = (activeStep: number, stepCount: number) => {\n  if (!Number.isFinite(activeStep)) return 1;\n  return Math.min(Math.max(Math.trunc(activeStep), 1), stepCount);\n};\n\nexport const getStepProgressStatus = (\n  step: StepProgressStep,\n  stepNumber: number,\n  activeStep: number,\n): StepProgressStepStatus => {\n  if (stepNumber === activeStep) return \"active\";\n  if (step.completed ?? stepNumber < activeStep) return \"complete\";\n  return \"pending\";\n};\n\n/**\n * Numbered progress pills shared by horizontal in-app flows and vertical\n * onboarding rails. Owns navigation only — the numbered content container is\n * `StepCard`, and `StepFlow` pairs the two into the canonical shell.\n */\nexport function StepProgress({\n  steps,\n  activeStep,\n  orientation = \"horizontal\",\n  onStepChange,\n  ariaLabel = \"Progress\",\n}: StepProgressProps) {\n  if (steps.length === 0) return null;\n\n  const resolvedActiveStep = resolveActiveStep(activeStep, steps.length);\n  const rootStyle = {\n    \"--fairmint-step-progress-brand\": brandColors.indigo,\n    \"--fairmint-step-progress-border\": fairmintVars.colorBorderDefault,\n    \"--fairmint-step-progress-text-primary\": fairmintVars.colorTextPrimary,\n    \"--fairmint-step-progress-text-secondary\": fairmintVars.colorTextSecondary,\n    \"--fairmint-step-progress-surface-selected\": fairmintVars.colorSurfaceSelected,\n    // One shared accent tone for anything bordering/reading on colorSurfaceSelected,\n    // instead of two adjacent-but-different indigo shades competing.\n    \"--fairmint-step-progress-active-border\": indigoColors[2],\n    \"--fairmint-step-progress-active-indicator-text\": commonColors.white,\n    \"--fairmint-step-progress-complete-border\": indigoColors[2],\n    \"--fairmint-step-progress-complete-text\": fairmintVars.colorIconOnSurfaceSelected,\n  };\n\n  return (\n    <Box\n      component=\"nav\"\n      aria-label={ariaLabel}\n      className=\"fairmint-step-progress\"\n      data-orientation={orientation}\n      style={rootStyle}\n    >\n      <ol className=\"fairmint-step-progress__list\">\n        {steps.map((step, index) => {\n          const stepNumber = index + 1;\n          const status = getStepProgressStatus(step, stepNumber, resolvedActiveStep);\n          const isInteractive = Boolean(onStepChange) && !step.disabled;\n          const pillContent = (\n            <>\n              <span className=\"fairmint-step-progress__indicator\" aria-hidden=\"true\">\n                {status === \"complete\" ? <CheckIcon /> : stepNumber}\n              </span>\n              <span className=\"fairmint-step-progress__label\">{step.label}</span>\n            </>\n          );\n\n          return (\n            <li key={`${stepNumber}-${step.label}`} className=\"fairmint-step-progress__item\">\n              {isInteractive ? (\n                <UnstyledButton\n                  type=\"button\"\n                  className=\"fairmint-step-progress__pill\"\n                  data-state={status}\n                  data-interactive=\"true\"\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  aria-label={`Step ${stepNumber}: ${step.label}`}\n                  onClick={() => onStepChange?.(stepNumber)}\n                >\n                  {pillContent}\n                </UnstyledButton>\n              ) : (\n                <span\n                  className=\"fairmint-step-progress__pill\"\n                  data-state={status}\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  title={`Step ${stepNumber}: ${step.label}`}\n                >\n                  {pillContent}\n                </span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </Box>\n  );\n}\n\nexport const STEP_PROGRESS_MOBILE_BREAKPOINT = \"48em\";\n"],"names":["jsx","brandColors","fairmintVars","indigoColors","commonColors","Box","index","jsxs","Fragment","UnstyledButton"],"mappings":";;;;;;;AA6BA,MAAM,YAAY,MAChBA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IAEZ,UAAAA,2BAAAA,IAAC,QAAA,EAAK,GAAE,kBAAA,CAAkB;AAAA,EAAA;AAC5B;AAGF,MAAM,oBAAoB,CAAC,YAAoB,cAAsB;AACnE,MAAI,CAAC,OAAO,SAAS,UAAU,EAAG,QAAO;AACzC,SAAO,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,UAAU,GAAG,CAAC,GAAG,SAAS;AAChE;AAEO,MAAM,wBAAwB,CACnC,MACA,YACA,eAC2B;AAC3B,MAAI,eAAe,WAAY,QAAO;AACtC,MAAI,KAAK,aAAa,aAAa,WAAY,QAAO;AACtD,SAAO;AACT;AAOO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AACd,GAAsB;AACpB,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QAAM,qBAAqB,kBAAkB,YAAY,MAAM,MAAM;AACrE,QAAM,YAAY;AAAA,IAChB,kCAAkCC,MAAAA,YAAY;AAAA,IAC9C,mCAAmCC,MAAAA,aAAa;AAAA,IAChD,yCAAyCA,MAAAA,aAAa;AAAA,IACtD,2CAA2CA,MAAAA,aAAa;AAAA,IACxD,6CAA6CA,MAAAA,aAAa;AAAA;AAAA;AAAA,IAG1D,0CAA0CC,MAAAA,aAAa,CAAC;AAAA,IACxD,kDAAkDC,MAAAA,aAAa;AAAA,IAC/D,4CAA4CD,MAAAA,aAAa,CAAC;AAAA,IAC1D,0CAA0CD,MAAAA,aAAa;AAAA,EAAA;AAGzD,SACEF,2BAAAA;AAAAA,IAACK,OAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,OAAO;AAAA,MAEP,UAAAL,2BAAAA,IAAC,QAAG,WAAU,gCACX,gBAAM,IAAI,CAAC,MAAMM,WAAU;AAC1B,cAAM,aAAaA,SAAQ;AAC3B,cAAM,SAAS,sBAAsB,MAAM,YAAY,kBAAkB;AACzE,cAAM,gBAAgB,QAAQ,YAAY,KAAK,CAAC,KAAK;AACrD,cAAM,cACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,UAAAR,2BAAAA,IAAC,QAAA,EAAK,WAAU,qCAAoC,eAAY,QAC7D,qBAAW,aAAaA,2BAAAA,IAAC,WAAA,CAAA,CAAU,IAAK,WAAA,CAC3C;AAAA,UACAA,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCAAiC,eAAK,MAAA,CAAM;AAAA,QAAA,GAC9D;AAGF,eACEA,2BAAAA,IAAC,MAAA,EAAuC,WAAU,gCAC/C,UAAA,gBACCA,2BAAAA;AAAAA,UAACS,eAAAA;AAAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAY;AAAA,YACZ,oBAAiB;AAAA,YACjB,gBAAc,WAAW,WAAW,SAAS;AAAA,YAC7C,cAAY,QAAQ,UAAU,KAAK,KAAK,KAAK;AAAA,YAC7C,SAAS,MAAM,eAAe,UAAU;AAAA,YAEvC,UAAA;AAAA,UAAA;AAAA,QAAA,IAGHT,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAY;AAAA,YACZ,gBAAc,WAAW,WAAW,SAAS;AAAA,YAC7C,OAAO,QAAQ,UAAU,KAAK,KAAK,KAAK;AAAA,YAEvC,UAAA;AAAA,UAAA;AAAA,QAAA,KApBE,GAAG,UAAU,IAAI,KAAK,KAAK,EAuBpC;AAAA,MAEJ,CAAC,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAEO,MAAM,kCAAkC;;;;"}

package/dist/components/generic/StepProgress/StepProgress.d.ts

@@ -0,0 +1,31 @@
+export type StepProgressOrientation = "horizontal" | "vertical";
+export type StepProgressStepStatus = "complete" | "active" | "pending";
+export interface StepProgressStep {
+    /** Visible label in the progress pill. */
+    label: string;
+    /** Explicitly mark a step complete when completion is not derived from activeStep. */
+    completed?: boolean;
+    /** Prevent navigation to this step when onStepChange is supplied. */
+    disabled?: boolean;
+}
+export interface StepProgressProps {
+    /** Ordered steps. The visible number is derived from this array and is 1-indexed. */
+    steps: readonly StepProgressStep[];
+    /** Current step number. This is intentionally 1-indexed to match StepCard and the UI. */
+    activeStep: number;
+    /** Row of pills for in-app progress or a rail for onboarding. @default "horizontal" */
+    orientation?: StepProgressOrientation;
+    /** Called with the 1-indexed step number when a pill is activated. */
+    onStepChange?: (step: number) => void;
+    /** Accessible label for the navigation. @default "Progress" */
+    ariaLabel?: string;
+}
+export declare const getStepProgressStatus: (step: StepProgressStep, stepNumber: number, activeStep: number) => StepProgressStepStatus;
+/**
+ * Numbered progress pills shared by horizontal in-app flows and vertical
+ * onboarding rails. Owns navigation only — the numbered content container is
+ * `StepCard`, and `StepFlow` pairs the two into the canonical shell.
+ */
+export declare function StepProgress({ steps, activeStep, orientation, onStepChange, ariaLabel, }: StepProgressProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const STEP_PROGRESS_MOBILE_BREAKPOINT = "48em";
+//# sourceMappingURL=StepProgress.d.ts.map

package/dist/components/generic/StepProgress/StepProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/StepProgress/StepProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEvE,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,qFAAqF;IACrF,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,yFAAyF;IACzF,UAAU,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,eAAO,MAAM,qBAAqB,GAChC,MAAM,gBAAgB,EACtB,YAAY,MAAM,EAClB,YAAY,MAAM,KACjB,sBAIF,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,UAAU,EACV,WAA0B,EAC1B,YAAY,EACZ,SAAsB,GACvB,EAAE,iBAAiB,kDAsEnB;AAED,eAAO,MAAM,+BAA+B,SAAS,CAAC"}