npm - @fairmint/ui - Versions diffs - 0.3.10 → 0.3.12 - Mend

@fairmint/ui 0.3.10 → 0.3.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (133) hide show

package/dist/components/generic/StatCard/StatCard.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatCard.cjs","sources":["../../../../src/components/generic/StatCard/StatCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Card, type CardProps } from \"../../primitives/Card/Card\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\n\nexport interface StatCardProps extends Omit<CardProps, \"children\"> {\n /** Card label (e.g., \"Total Value\"). /\n label: string;\n /* Formatted value string (e.g., \"$125,000\"). /\n value: string;\n /* Optional icon element. /\n icon?: ReactNode;\n /\n Mantine color name for the gradient background.\n * @default colors.primary\n /\n color?: string;\n /* Optional trend or supporting text below the value. */\n trend?: string;\n}\n\nexport function StatCard({\n label,\n value,\n icon,\n color = colors.primary,\n trend,\n ...rest\n}: StatCardProps) {\n return (\n <Card bg={`${color}.0`} bd={`1px solid ${color}.2`} {...rest}>\n <Group justify=\"space-between\" align=\"flex-start\">\n <Stack gap={4}>\n <Text\n size=\"xs\"\n fw={600}\n tt=\"uppercase\"\n c={`${color}.6`}\n style={{ letterSpacing: \"0.05em\" }}\n >\n {label}\n </Text>\n <Text fw={700} size=\"xl\" lh={1}>\n {value}\n </Text>\n {trend && (\n <Text size=\"xs\" c={fairmintVars.colorTextSecondary}>\n {trend}\n </Text>\n )}\n </Stack>\n {icon && (\n <Box c={`${color}.5`} fz=\"1.5rem\">\n {icon}\n </Box>\n )}\n </Group>\n </Card>\n );\n}\n"],"names":["colors","~~Card~~","~~jsxs~~","~~Group~~","~~Stack~~","~~jsx~~","~~Text~~","~~fairmintVars~~","Box"],"mappings":";;;;;;;;;AAsBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQA,OAAAA,OAAO;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,~~wCACGC~~,KAAAA,~~MAAA~~,~~EAAK~~,IAAI,GAAG,KAAK,~~MAAM~~,IAAI,aAAa,KAAK,~~MAAO~~,GAAG,~~MACtD~~,UAAAC,2BAAAA,KAACC,MAAAA,~~SAAM~~,SAAQ,iBAAgB,OAAM,cACnC,UAAA;AAAA,~~IAAAD~~,2BAAAA,KAACE,OAAAA,OAAA,EAAM,KAAK,GACV,UAAA;AAAA,~~MAAAC~~,2BAAAA;AAAAA,~~QAACC~~,KAAAA;AAAAA,~~QAAA~~;AAAA,~~UACC~~,MAAK;AAAA,~~UACL~~,IAAI;AAAA,~~UACJ~~,IAAG;AAAA,~~UACH~~,GAAG,GAAG,KAAK;AAAA,~~UACX~~,OAAO,EAAE,eAAe,SAAA;AAAA,~~UAEvB~~,UAAA;AAAA,~~QAAA~~;AAAA,~~MAAA~~;AAAA,~~MAEHD~~,2BAAAA,~~IAACC~~,KAAAA,QAAK,IAAI,KAAK,MAAK,MAAK,IAAI,GAC1B,UAAA,MAAA,CACH;AAAA,~~MACC~~,wCACEA,WAAA,EAAK,MAAK,MAAK,~~GAAGC~~,mBAAa,oBAC7B,UAAA,MAAA,CACH;AAAA,~~IAAA~~,GAEJ;AAAA,~~IACC~~,~~uCACEC~~,YAAA,EAAI,GAAG,GAAG,KAAK,MAAM,IAAG,UACtB,UAAA,KAAA,CACH;AAAA,~~EAAA~~,EAAA,CAEJ,EAAA~~,CACF~~;~~AAEJ~~;;"}
1	+ {"version":3,"file":"StatCard.cjs","sources":["../../../../src/components/generic/StatCard/StatCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Card, type CardProps } from \"../../primitives/Card/Card\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\n\nexport interface StatCardProps extends Omit<CardProps, \"children\"> {\n /** Card label (e.g., \"Total Value\"). /\n label: string;\n /* Formatted value string (e.g., \"$125,000\"). /\n value: string;\n /* Optional icon element. /\n icon?: ReactNode;\n /\n Mantine color name for the gradient background.\n * @default colors.primary\n /\n color?: string;\n /* Optional trend or supporting text below the value. */\n trend?: string;\n}\n\nexport function StatCard({\n label,\n value,\n icon,\n color = colors.primary,\n trend,\n ...rest\n}: StatCardProps) {\n const isNeutral = color === \"neutral\";\n\n return (\n <Card\n bg={isNeutral ? fairmintVars.colorBgSurface : `${color}.0`}\n bd={isNeutral ? `1px solid ${fairmintVars.colorBorderDefault}` : `1px solid ${color}.2`}\n {...rest}\n >\n <Group justify=\"space-between\" align=\"flex-start\">\n <Stack gap={4}>\n <Text\n size=\"xs\"\n fw={600}\n tt=\"uppercase\"\n c={isNeutral ? fairmintVars.colorTextTertiary : `${color}.6`}\n style={{ letterSpacing: \"0.05em\" }}\n >\n {label}\n </Text>\n <Text fw={700} size=\"xl\" lh={1}>\n {value}\n </Text>\n {trend && (\n <Text size=\"xs\" c={fairmintVars.colorTextSecondary}>\n {trend}\n </Text>\n )}\n </Stack>\n {icon && (\n <Box c={`${color}.5`} fz=\"1.5rem\">\n {icon}\n </Box>\n )}\n </Group>\n </Card>\n );\n}\n"],"names":["colors","jsx","Card","fairmintVars","jsxs","Group","Stack","Text","Box"],"mappings":";;;;;;;;;AAsBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQA,OAAAA,OAAO;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,YAAY,UAAU;AAE5B,SACEC,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC,IAAI,YAAYC,MAAAA,aAAa,iBAAiB,GAAG,KAAK;AAAA,MACtD,IAAI,YAAY,aAAaA,MAAAA,aAAa,kBAAkB,KAAK,aAAa,KAAK;AAAA,MAClF,GAAG;AAAA,MAEJ,UAAAC,2BAAAA,KAACC,MAAAA,OAAA,EAAM,SAAQ,iBAAgB,OAAM,cACnC,UAAA;AAAA,QAAAD,2BAAAA,KAACE,OAAAA,OAAA,EAAM,KAAK,GACV,UAAA;AAAA,UAAAL,2BAAAA;AAAAA,YAACM,KAAAA;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI;AAAA,cACJ,IAAG;AAAA,cACH,GAAG,YAAYJ,MAAAA,aAAa,oBAAoB,GAAG,KAAK;AAAA,cACxD,OAAO,EAAE,eAAe,SAAA;AAAA,cAEvB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEHF,2BAAAA,IAACM,KAAAA,QAAK,IAAI,KAAK,MAAK,MAAK,IAAI,GAC1B,UAAA,MAAA,CACH;AAAA,UACC,wCACEA,WAAA,EAAK,MAAK,MAAK,GAAGJ,mBAAa,oBAC7B,UAAA,MAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACC,uCACEK,YAAA,EAAI,GAAG,GAAG,KAAK,MAAM,IAAG,UACtB,UAAA,KAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/components/generic/StatCard/StatCard.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatCard.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/StatCard/StatCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAGlE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAsB,EACtB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,aAAa,~~2CA+Bf~~"}
1	+ {"version":3,"file":"StatCard.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/StatCard/StatCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAGlE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAsB,EACtB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,aAAa,2CAqCf"}

package/dist/components/generic/StatCard/StatCard.js CHANGED Viewed

@@ -13,24 +13,33 @@ function StatCard({
   trend,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx(Card, { bg: `${color}.0`, bd: `1px solid ${color}.2`, ...rest, children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", children: [
-    /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          size: "xs",
-          fw: 600,
-          tt: "uppercase",
-          c: `${color}.6`,
-          style: { letterSpacing: "0.05em" },
-          children: label
-        }
-      ),
-      /* @__PURE__ */ jsx(Text, { fw: 700, size: "xl", lh: 1, children: value }),
-      trend && /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, children: trend })
-    ] }),
-    icon && /* @__PURE__ */ jsx(Box, { c: `${color}.5`, fz: "1.5rem", children: icon })
-  ] }) });
+  const isNeutral = color === "neutral";
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      bg: isNeutral ? fairmintVars.colorBgSurface : `${color}.0`,
+      bd: isNeutral ? `1px solid ${fairmintVars.colorBorderDefault}` : `1px solid ${color}.2`,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              fw: 600,
+              tt: "uppercase",
+              c: isNeutral ? fairmintVars.colorTextTertiary : `${color}.6`,
+              style: { letterSpacing: "0.05em" },
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { fw: 700, size: "xl", lh: 1, children: value }),
+          trend && /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, children: trend })
+        ] }),
+        icon && /* @__PURE__ */ jsx(Box, { c: `${color}.5`, fz: "1.5rem", children: icon })
+      ] })
+    }
+  );
 }
 export {
   StatCard

package/dist/components/generic/StatCard/StatCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatCard.js","sources":["../../../../src/components/generic/StatCard/StatCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Card, type CardProps } from \"../../primitives/Card/Card\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\n\nexport interface StatCardProps extends Omit<CardProps, \"children\"> {\n /** Card label (e.g., \"Total Value\"). /\n label: string;\n /* Formatted value string (e.g., \"$125,000\"). /\n value: string;\n /* Optional icon element. /\n icon?: ReactNode;\n /\n Mantine color name for the gradient background.\n * @default colors.primary\n /\n color?: string;\n /* Optional trend or supporting text below the value. */\n trend?: string;\n}\n\nexport function StatCard({\n label,\n value,\n icon,\n color = colors.primary,\n trend,\n ...rest\n}: StatCardProps) {\n return (\n <Card bg={`${color}.0`} bd={`1px solid ${color}.2`} {...rest}>\n <Group justify=\"space-between\" align=\"flex-start\">\n <Stack gap={4}>\n <Text\n size=\"xs\"\n fw={600}\n tt=\"uppercase\"\n c={`${color}.6`}\n style={{ letterSpacing: \"0.05em\" }}\n >\n {label}\n </Text>\n <Text fw={700} size=\"xl\" lh={1}>\n {value}\n </Text>\n {trend && (\n <Text size=\"xs\" c={fairmintVars.colorTextSecondary}>\n {trend}\n </Text>\n )}\n </Stack>\n {icon && (\n <Box c={`${color}.5`} fz=\"1.5rem\">\n {icon}\n </Box>\n )}\n </Group>\n </Card>\n );\n}\n"],"names":[],"mappings":";;;;;;;AAsBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,OAAO;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,~~6BACG~~,~~MAAA~~,~~EAAK~~,IAAI,GAAG,KAAK,~~MAAM~~,IAAI,aAAa,KAAK,~~MAAO~~,GAAG,~~MACtD~~,UAAA,qBAAC,~~SAAM~~,SAAQ,iBAAgB,OAAM,cACnC,UAAA;AAAA,~~IAAA~~,qBAAC,OAAA,EAAM,KAAK,GACV,UAAA;AAAA,~~MAAA~~;AAAA,~~QAAC~~;AAAA,~~QAAA~~;AAAA,~~UACC~~,MAAK;AAAA,~~UACL~~,IAAI;AAAA,~~UACJ~~,IAAG;AAAA,~~UACH~~,GAAG,GAAG,KAAK;AAAA,~~UACX~~,OAAO,EAAE,eAAe,SAAA;AAAA,~~UAEvB~~,UAAA;AAAA,~~QAAA~~;AAAA,~~MAAA~~;AAAA,~~MAEH~~,oBAAC,QAAK,IAAI,KAAK,MAAK,MAAK,IAAI,GAC1B,UAAA,MAAA,CACH;AAAA,~~MACC~~,6BACE,MAAA,EAAK,MAAK,MAAK,GAAG,aAAa,oBAC7B,UAAA,MAAA,CACH;AAAA,~~IAAA~~,GAEJ;AAAA,~~IACC~~,4BACE,KAAA,EAAI,GAAG,GAAG,KAAK,MAAM,IAAG,UACtB,UAAA,KAAA,CACH;AAAA,~~EAAA~~,EAAA,CAEJ,EAAA~~,CACF~~;~~AAEJ~~;"}
1	+ {"version":3,"file":"StatCard.js","sources":["../../../../src/components/generic/StatCard/StatCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Card, type CardProps } from \"../../primitives/Card/Card\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\n\nexport interface StatCardProps extends Omit<CardProps, \"children\"> {\n /** Card label (e.g., \"Total Value\"). /\n label: string;\n /* Formatted value string (e.g., \"$125,000\"). /\n value: string;\n /* Optional icon element. /\n icon?: ReactNode;\n /\n Mantine color name for the gradient background.\n * @default colors.primary\n /\n color?: string;\n /* Optional trend or supporting text below the value. */\n trend?: string;\n}\n\nexport function StatCard({\n label,\n value,\n icon,\n color = colors.primary,\n trend,\n ...rest\n}: StatCardProps) {\n const isNeutral = color === \"neutral\";\n\n return (\n <Card\n bg={isNeutral ? fairmintVars.colorBgSurface : `${color}.0`}\n bd={isNeutral ? `1px solid ${fairmintVars.colorBorderDefault}` : `1px solid ${color}.2`}\n {...rest}\n >\n <Group justify=\"space-between\" align=\"flex-start\">\n <Stack gap={4}>\n <Text\n size=\"xs\"\n fw={600}\n tt=\"uppercase\"\n c={isNeutral ? fairmintVars.colorTextTertiary : `${color}.6`}\n style={{ letterSpacing: \"0.05em\" }}\n >\n {label}\n </Text>\n <Text fw={700} size=\"xl\" lh={1}>\n {value}\n </Text>\n {trend && (\n <Text size=\"xs\" c={fairmintVars.colorTextSecondary}>\n {trend}\n </Text>\n )}\n </Stack>\n {icon && (\n <Box c={`${color}.5`} fz=\"1.5rem\">\n {icon}\n </Box>\n )}\n </Group>\n </Card>\n );\n}\n"],"names":[],"mappings":";;;;;;;AAsBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,OAAO;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,YAAY,UAAU;AAE5B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,YAAY,aAAa,iBAAiB,GAAG,KAAK;AAAA,MACtD,IAAI,YAAY,aAAa,aAAa,kBAAkB,KAAK,aAAa,KAAK;AAAA,MAClF,GAAG;AAAA,MAEJ,UAAA,qBAAC,OAAA,EAAM,SAAQ,iBAAgB,OAAM,cACnC,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAM,KAAK,GACV,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI;AAAA,cACJ,IAAG;AAAA,cACH,GAAG,YAAY,aAAa,oBAAoB,GAAG,KAAK;AAAA,cACxD,OAAO,EAAE,eAAe,SAAA;AAAA,cAEvB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,oBAAC,QAAK,IAAI,KAAK,MAAK,MAAK,IAAI,GAC1B,UAAA,MAAA,CACH;AAAA,UACC,6BACE,MAAA,EAAK,MAAK,MAAK,GAAG,aAAa,oBAC7B,UAAA,MAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACC,4BACE,KAAA,EAAI,GAAG,GAAG,KAAK,MAAM,IAAG,UACtB,UAAA,KAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -52,8 +52,8 @@ function StepCard({
               style: {
                 flexShrink: 0,
                 pointerEvents: "none",
-                background: done ? index.brandColors.indigo : index.fairmintVars.colorBgSurfaceSecondary,
-                color: done ? "white" : index.fairmintVars.colorTextPrimary,
+                background: done ? index.fairmintVars.colorBrandPrimary : index.fairmintVars.colorBgSurfaceSecondary,
+                color: done ? index.fairmintVars.colorTextInverse : 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 })

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

	@@ -1 +1 @@
1	- {"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;;"}
1	+ {"version":3,"file":"StepCard.cjs","sources":["../../../../src/components/generic/StepCard/StepCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { 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\n ? fairmintVars.colorBrandPrimary\n : fairmintVars.colorBgSurfaceSecondary,\n color: done ? fairmintVars.colorTextInverse : 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","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,OACRE,MAAAA,aAAa,oBACbA,MAAAA,aAAa;AAAA,gBACjB,OAAO,OAAOA,MAAAA,aAAa,mBAAmBA,MAAAA,aAAa;AAAA,gBAC3D,QAAQ,OAAO,SAAY,aAAaA,MAAAA,aAAa,kBAAkB;AAAA,cAAA;AAAA,cAGxE,UAAA,OACE,YAAYH,2BAAAA,IAAC,kBAAA,CAAA,CAAiB,IAE/BA,2BAAAA,IAACQ,KAAAA,MAAA,EAAK,IAAI,KAAK,IAAI,IAChB,UAAAP,QAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJG,gCAACK,OAAAA,OAAI,OAAO,EAAE,UAAU,GAAG,MAAM,KAC/B,UAAA;AAAA,YAAAT,2BAAAA;AAAAA,cAACQ,KAAAA;AAAAA,cAAA;AAAA,gBACC,IAAI;AAAA,gBACJ,IAAIE,qBAAAA,qBAAqB;AAAA,gBACzB,GAAGP,MAAAA,aAAa;AAAA,gBAChB,IAAI;AAAA,gBAEH,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,eACCH,2BAAAA,IAACQ,KAAAA,MAAA,EAAK,MAAK,MAAK,GAAGL,MAAAA,aAAa,oBAAoB,IAAI,KAAK,IAAI,GAC9D,UAAA,YAAA,CACH;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,GACF;AAAA,QACAH,+BAACS,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 CHANGED Viewed

	@@ -1 +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,~~2CAsDf~~"}
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,2CAwDf"}

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { fairmintVars, brandColors } from "../../../theme/index.js";
+import { fairmintVars } 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";
@@ -50,8 +50,8 @@ function StepCard({
               style: {
                 flexShrink: 0,
                 pointerEvents: "none",
-                background: done ? brandColors.indigo : fairmintVars.colorBgSurfaceSecondary,
-                color: done ? "white" : fairmintVars.colorTextPrimary,
+                background: done ? fairmintVars.colorBrandPrimary : fairmintVars.colorBgSurfaceSecondary,
+                color: done ? fairmintVars.colorTextInverse : 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 })

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

	@@ -1 +1 @@
1	- {"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;"}
1	+ {"version":3,"file":"StepCard.js","sources":["../../../../src/components/generic/StepCard/StepCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { 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\n ? fairmintVars.colorBrandPrimary\n : fairmintVars.colorBgSurfaceSecondary,\n color: done ? fairmintVars.colorTextInverse : 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,OACR,aAAa,oBACb,aAAa;AAAA,gBACjB,OAAO,OAAO,aAAa,mBAAmB,aAAa;AAAA,gBAC3D,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/StepProgress/StepProgress.cjs CHANGED Viewed

@@ -8,8 +8,8 @@ const UnstyledButton = require("../../../node_modules/@mantine/core/esm/componen
 const CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
-    width: "14",
-    height: "14",
+    width: "11",
+    height: "11",
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",

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

	@@ -1 +1 @@
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":"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"}
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=\"11\"\n height=\"11\"\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":"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"}

package/dist/components/generic/StepProgress/StepProgress.js CHANGED Viewed

@@ -6,8 +6,8 @@ import { UnstyledButton } from "../../../node_modules/@mantine/core/esm/componen
 const CheckIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
-    width: "14",
-    height: "14",
+    width: "11",
+    height: "11",
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",

package/dist/components/generic/StepProgress/StepProgress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepProgress.js","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":[],"mappings":";;;;;AA6BA,MAAM,YAAY,MAChB;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;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,kCAAkC,YAAY;AAAA,IAC9C,mCAAmC,aAAa;AAAA,IAChD,yCAAyC,aAAa;AAAA,IACtD,2CAA2C,aAAa;AAAA,IACxD,6CAA6C,aAAa;AAAA;AAAA;AAAA,IAG1D,0CAA0C,aAAa,CAAC;AAAA,IACxD,kDAAkD,aAAa;AAAA,IAC/D,4CAA4C,aAAa,CAAC;AAAA,IAC1D,0CAA0C,aAAa;AAAA,EAAA;AAGzD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,OAAO;AAAA,MAEP,UAAA,oBAAC,QAAG,WAAU,gCACX,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,cAAM,aAAa,QAAQ;AAC3B,cAAM,SAAS,sBAAsB,MAAM,YAAY,kBAAkB;AACzE,cAAM,gBAAgB,QAAQ,YAAY,KAAK,CAAC,KAAK;AACrD,cAAM,cACJ,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,qCAAoC,eAAY,QAC7D,qBAAW,aAAa,oBAAC,WAAA,CAAA,CAAU,IAAK,WAAA,CAC3C;AAAA,UACA,oBAAC,QAAA,EAAK,WAAU,iCAAiC,eAAK,MAAA,CAAM;AAAA,QAAA,GAC9D;AAGF,eACE,oBAAC,MAAA,EAAuC,WAAU,gCAC/C,UAAA,gBACC;AAAA,UAAC;AAAA,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,IAGH;AAAA,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;"}
1	+ {"version":3,"file":"StepProgress.js","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=\"11\"\n height=\"11\"\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":[],"mappings":";;;;;AA6BA,MAAM,YAAY,MAChB;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;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,kCAAkC,YAAY;AAAA,IAC9C,mCAAmC,aAAa;AAAA,IAChD,yCAAyC,aAAa;AAAA,IACtD,2CAA2C,aAAa;AAAA,IACxD,6CAA6C,aAAa;AAAA;AAAA;AAAA,IAG1D,0CAA0C,aAAa,CAAC;AAAA,IACxD,kDAAkD,aAAa;AAAA,IAC/D,4CAA4C,aAAa,CAAC;AAAA,IAC1D,0CAA0C,aAAa;AAAA,EAAA;AAGzD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,OAAO;AAAA,MAEP,UAAA,oBAAC,QAAG,WAAU,gCACX,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,cAAM,aAAa,QAAQ;AAC3B,cAAM,SAAS,sBAAsB,MAAM,YAAY,kBAAkB;AACzE,cAAM,gBAAgB,QAAQ,YAAY,KAAK,CAAC,KAAK;AACrD,cAAM,cACJ,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,qCAAoC,eAAY,QAC7D,qBAAW,aAAa,oBAAC,WAAA,CAAA,CAAU,IAAK,WAAA,CAC3C;AAAA,UACA,oBAAC,QAAA,EAAK,WAAU,iCAAiC,eAAK,MAAA,CAAM;AAAA,QAAA,GAC9D;AAGF,eACE,oBAAC,MAAA,EAAuC,WAAU,gCAC/C,UAAA,gBACC;AAAA,UAAC;AAAA,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,IAGH;AAAA,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/layout/SideNav/SideNav.cjs CHANGED Viewed

@@ -17,11 +17,11 @@ function SideNav({ items, onItemClick, color = "indigo" }) {
       style: { borderRadius: index.radii.md },
       styles: {
         root: {
-          color: item.active ? void 0 : index.neutralColors[500],
+          color: item.active ? index.fairmintVars.colorTextPrimary : index.fairmintVars.colorTextSecondary,
           fontWeight: item.active ? 500 : 400
         },
         section: {
-          color: item.active ? void 0 : index.neutralColors[400]
+          color: item.active ? index.fairmintVars.colorBrandPrimary : index.fairmintVars.colorIconTertiary
         }
       }
     },

package/dist/components/layout/SideNav/SideNav.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideNav.cjs","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import { NavLink, Stack } from \"@mantine/core\";\nimport type { ReactNode } from \"react\";\nimport { ~~neutralColors~~, radii } from \"../../../theme\";\n\nexport interface SideNavItem {\n /** Unique identifier for this nav item (e.g., route path or slug). /\n id: string;\n /* Display label. /\n label: string;\n /* Icon element. /\n icon?: ReactNode;\n /* Whether this item is currently active. /\n active?: boolean;\n}\n\nexport interface SideNavProps {\n /* Navigation items to render. /\n items: SideNavItem[];\n /* Callback when a nav item is clicked. Receives the item's `id`. /\n onItemClick: (id: string) => void;\n /* Active color. @default \"indigo\" */\n color?: string;\n}\n\nexport function SideNav({ items, onItemClick, color = \"indigo\" }: SideNavProps) {\n return (\n <Stack component=\"nav\" gap={4} p=\"md\" aria-label=\"Main navigation\">\n {items.map((item) => (\n <NavLink\n key={item.id}\n label={item.label}\n leftSection={item.icon}\n active={item.active}\n onClick={() => onItemClick(item.id)}\n color={color}\n variant=\"light\"\n style={{ borderRadius: radii.md }}\n styles={{\n root: {\n color: item.active ? ~~undefined~~ : ~~neutralColors[500]~~,\n fontWeight: item.active ? 500 : 400,\n },\n section: {\n color: item.active ? ~~undefined~~ : ~~neutralColors[400]~~,\n },\n }}\n />\n ))}\n </Stack>\n );\n}\n"],"names":["jsx","Stack","NavLink","radii","~~neutralColors~~"],"mappings":";;;;;;AAwBO,SAAS,QAAQ,EAAE,OAAO,aAAa,QAAQ,YAA0B;AAC9E,SACEA,2BAAAA,IAACC,MAAAA,OAAA,EAAM,WAAU,OAAM,KAAK,GAAG,GAAE,MAAK,cAAW,mBAC9C,UAAA,MAAM,IAAI,CAAC,SACVD,2BAAAA;AAAAA,IAACE,QAAAA;AAAAA,IAAA;AAAA,MAEC,OAAO,KAAK;AAAA,MACZ,aAAa,KAAK;AAAA,MAClB,QAAQ,KAAK;AAAA,MACb,SAAS,MAAM,YAAY,KAAK,EAAE;AAAA,MAClC;AAAA,MACA,SAAQ;AAAA,MACR,OAAO,EAAE,cAAcC,MAAAA,MAAM,GAAA;AAAA,MAC7B,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,OAAO,KAAK,~~SAAS~~,~~SAAYC~~,MAAAA,~~cAAc,GAAG~~;AAAA,~~UAClD~~,YAAY,KAAK,SAAS,MAAM;AAAA,QAAA;AAAA,QAElC,SAAS;AAAA,UACP,OAAO,KAAK,~~SAAS~~,~~SAAYA~~,MAAAA,~~cAAc,GAAG~~;AAAA,QAAA;AAAA,~~MACpD~~;AAAA,IACF;AAAA,IAhBK,KAAK;AAAA,EAAA,CAkBb,GACH;AAEJ;;"}
1	+ {"version":3,"file":"SideNav.cjs","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import { NavLink, Stack } from \"@mantine/core\";\nimport type { ReactNode } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\n\nexport interface SideNavItem {\n /** Unique identifier for this nav item (e.g., route path or slug). /\n id: string;\n /* Display label. /\n label: string;\n /* Icon element. /\n icon?: ReactNode;\n /* Whether this item is currently active. /\n active?: boolean;\n}\n\nexport interface SideNavProps {\n /* Navigation items to render. /\n items: SideNavItem[];\n /* Callback when a nav item is clicked. Receives the item's `id`. /\n onItemClick: (id: string) => void;\n /* Active color. @default \"indigo\" */\n color?: string;\n}\n\nexport function SideNav({ items, onItemClick, color = \"indigo\" }: SideNavProps) {\n return (\n <Stack component=\"nav\" gap={4} p=\"md\" aria-label=\"Main navigation\">\n {items.map((item) => (\n <NavLink\n key={item.id}\n label={item.label}\n leftSection={item.icon}\n active={item.active}\n onClick={() => onItemClick(item.id)}\n color={color}\n variant=\"light\"\n style={{ borderRadius: radii.md }}\n styles={{\n root: {\n color: item.active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,\n fontWeight: item.active ? 500 : 400,\n },\n section: {\n color: item.active ? fairmintVars.colorBrandPrimary : fairmintVars.colorIconTertiary,\n },\n }}\n />\n ))}\n </Stack>\n );\n}\n"],"names":["jsx","Stack","NavLink","radii","fairmintVars"],"mappings":";;;;;;AAwBO,SAAS,QAAQ,EAAE,OAAO,aAAa,QAAQ,YAA0B;AAC9E,SACEA,2BAAAA,IAACC,MAAAA,OAAA,EAAM,WAAU,OAAM,KAAK,GAAG,GAAE,MAAK,cAAW,mBAC9C,UAAA,MAAM,IAAI,CAAC,SACVD,2BAAAA;AAAAA,IAACE,QAAAA;AAAAA,IAAA;AAAA,MAEC,OAAO,KAAK;AAAA,MACZ,aAAa,KAAK;AAAA,MAClB,QAAQ,KAAK;AAAA,MACb,SAAS,MAAM,YAAY,KAAK,EAAE;AAAA,MAClC;AAAA,MACA,SAAQ;AAAA,MACR,OAAO,EAAE,cAAcC,MAAAA,MAAM,GAAA;AAAA,MAC7B,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,OAAO,KAAK,SAASC,MAAAA,aAAa,mBAAmBA,MAAAA,aAAa;AAAA,UAClE,YAAY,KAAK,SAAS,MAAM;AAAA,QAAA;AAAA,QAElC,SAAS;AAAA,UACP,OAAO,KAAK,SAASA,MAAAA,aAAa,oBAAoBA,MAAAA,aAAa;AAAA,QAAA;AAAA,MACrE;AAAA,IACF;AAAA,IAhBK,KAAK;AAAA,EAAA,CAkBb,GACH;AAEJ;;"}

package/dist/components/layout/SideNav/SideNav.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { neutralColors, radii } from "../../../theme/index.js";
+import { fairmintVars, radii } from "../../../theme/index.js";
 import { Stack } from "../../../node_modules/@mantine/core/esm/components/Stack/Stack.js";
 import { NavLink } from "../../../node_modules/@mantine/core/esm/components/NavLink/NavLink.js";
 function SideNav({ items, onItemClick, color = "indigo" }) {
@@ -15,11 +15,11 @@ function SideNav({ items, onItemClick, color = "indigo" }) {
       style: { borderRadius: radii.md },
       styles: {
         root: {
-          color: item.active ? void 0 : neutralColors[500],
+          color: item.active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,
           fontWeight: item.active ? 500 : 400
         },
         section: {
-          color: item.active ? void 0 : neutralColors[400]
+          color: item.active ? fairmintVars.colorBrandPrimary : fairmintVars.colorIconTertiary
         }
       }
     },

package/dist/components/layout/SideNav/SideNav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideNav.js","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import { NavLink, Stack } from \"@mantine/core\";\nimport type { ReactNode } from \"react\";\nimport { ~~neutralColors~~, radii } from \"../../../theme\";\n\nexport interface SideNavItem {\n /** Unique identifier for this nav item (e.g., route path or slug). /\n id: string;\n /* Display label. /\n label: string;\n /* Icon element. /\n icon?: ReactNode;\n /* Whether this item is currently active. /\n active?: boolean;\n}\n\nexport interface SideNavProps {\n /* Navigation items to render. /\n items: SideNavItem[];\n /* Callback when a nav item is clicked. Receives the item's `id`. /\n onItemClick: (id: string) => void;\n /* Active color. @default \"indigo\" */\n color?: string;\n}\n\nexport function SideNav({ items, onItemClick, color = \"indigo\" }: SideNavProps) {\n return (\n <Stack component=\"nav\" gap={4} p=\"md\" aria-label=\"Main navigation\">\n {items.map((item) => (\n <NavLink\n key={item.id}\n label={item.label}\n leftSection={item.icon}\n active={item.active}\n onClick={() => onItemClick(item.id)}\n color={color}\n variant=\"light\"\n style={{ borderRadius: radii.md }}\n styles={{\n root: {\n color: item.active ? ~~undefined~~ : ~~neutralColors[500]~~,\n fontWeight: item.active ? 500 : 400,\n },\n section: {\n color: item.active ? ~~undefined~~ : ~~neutralColors[400]~~,\n },\n }}\n />\n ))}\n </Stack>\n );\n}\n"],"names":[],"mappings":";;;;AAwBO,SAAS,QAAQ,EAAE,OAAO,aAAa,QAAQ,YAA0B;AAC9E,SACE,oBAAC,OAAA,EAAM,WAAU,OAAM,KAAK,GAAG,GAAE,MAAK,cAAW,mBAC9C,UAAA,MAAM,IAAI,CAAC,SACV;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,OAAO,KAAK;AAAA,MACZ,aAAa,KAAK;AAAA,MAClB,QAAQ,KAAK;AAAA,MACb,SAAS,MAAM,YAAY,KAAK,EAAE;AAAA,MAClC;AAAA,MACA,SAAQ;AAAA,MACR,OAAO,EAAE,cAAc,MAAM,GAAA;AAAA,MAC7B,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,OAAO,KAAK,SAAS,~~SAAY~~,~~cAAc~~,~~GAAG~~;AAAA,~~UAClD~~,YAAY,KAAK,SAAS,MAAM;AAAA,QAAA;AAAA,QAElC,SAAS;AAAA,UACP,OAAO,KAAK,SAAS,~~SAAY~~,~~cAAc~~,~~GAAG~~;AAAA,QAAA;AAAA,~~MACpD~~;AAAA,IACF;AAAA,IAhBK,KAAK;AAAA,EAAA,CAkBb,GACH;AAEJ;"}
1	+ {"version":3,"file":"SideNav.js","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import { NavLink, Stack } from \"@mantine/core\";\nimport type { ReactNode } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\n\nexport interface SideNavItem {\n /** Unique identifier for this nav item (e.g., route path or slug). /\n id: string;\n /* Display label. /\n label: string;\n /* Icon element. /\n icon?: ReactNode;\n /* Whether this item is currently active. /\n active?: boolean;\n}\n\nexport interface SideNavProps {\n /* Navigation items to render. /\n items: SideNavItem[];\n /* Callback when a nav item is clicked. Receives the item's `id`. /\n onItemClick: (id: string) => void;\n /* Active color. @default \"indigo\" */\n color?: string;\n}\n\nexport function SideNav({ items, onItemClick, color = \"indigo\" }: SideNavProps) {\n return (\n <Stack component=\"nav\" gap={4} p=\"md\" aria-label=\"Main navigation\">\n {items.map((item) => (\n <NavLink\n key={item.id}\n label={item.label}\n leftSection={item.icon}\n active={item.active}\n onClick={() => onItemClick(item.id)}\n color={color}\n variant=\"light\"\n style={{ borderRadius: radii.md }}\n styles={{\n root: {\n color: item.active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,\n fontWeight: item.active ? 500 : 400,\n },\n section: {\n color: item.active ? fairmintVars.colorBrandPrimary : fairmintVars.colorIconTertiary,\n },\n }}\n />\n ))}\n </Stack>\n );\n}\n"],"names":[],"mappings":";;;;AAwBO,SAAS,QAAQ,EAAE,OAAO,aAAa,QAAQ,YAA0B;AAC9E,SACE,oBAAC,OAAA,EAAM,WAAU,OAAM,KAAK,GAAG,GAAE,MAAK,cAAW,mBAC9C,UAAA,MAAM,IAAI,CAAC,SACV;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,OAAO,KAAK;AAAA,MACZ,aAAa,KAAK;AAAA,MAClB,QAAQ,KAAK;AAAA,MACb,SAAS,MAAM,YAAY,KAAK,EAAE;AAAA,MAClC;AAAA,MACA,SAAQ;AAAA,MACR,OAAO,EAAE,cAAc,MAAM,GAAA;AAAA,MAC7B,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,OAAO,KAAK,SAAS,aAAa,mBAAmB,aAAa;AAAA,UAClE,YAAY,KAAK,SAAS,MAAM;AAAA,QAAA;AAAA,QAElC,SAAS;AAAA,UACP,OAAO,KAAK,SAAS,aAAa,oBAAoB,aAAa;AAAA,QAAA;AAAA,MACrE;AAAA,IACF;AAAA,IAhBK,KAAK;AAAA,EAAA,CAkBb,GACH;AAEJ;"}

package/dist/components/primitives/Badge/Badge.cjs CHANGED Viewed

@@ -15,14 +15,22 @@ const compatBadgeColorMap = {
   success: colors.colors.success,
   warning: colors.colors.warning
 };
+const semanticSolidColorMap = {
+  error: "var(--fairmint-color-error-solid)",
+  indigo: "var(--fairmint-color-brand-primary)",
+  info: "var(--fairmint-color-info-solid)",
+  success: "var(--fairmint-color-success-solid)",
+  warning: "var(--fairmint-color-warning-solid)"
+};
 const resolveBadgeColor = (color) => {
-  if (!color) return `var(--mantine-color-${colors.colors.error}-6)`;
+  if (!color) return index.fairmintVars.colorErrorSolid;
   const mappedColor = compatBadgeColorMap[color] || color;
   if (mappedColor.startsWith("#") || mappedColor.startsWith("rgb") || mappedColor.startsWith("hsl"))
     return mappedColor;
   if (mappedColor.startsWith("var(")) return mappedColor;
-  const [colorName, shade = "6"] = mappedColor.split(".");
-  return `var(--mantine-color-${colorName}-${shade})`;
+  const [colorName, shade] = mappedColor.split(".");
+  if (!shade && semanticSolidColorMap[colorName]) return semanticSolidColorMap[colorName];
+  return `var(--mantine-color-${colorName}-${shade ?? "6"})`;
 };
 const resolveAnchorStyle = (anchorOrigin) => {
   const vertical = anchorOrigin?.vertical ?? "top";

package/dist/components/primitives/Badge/Badge.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.cjs","sources":["../../../../src/components/primitives/Badge/Badge.tsx"],"sourcesContent":["import { Badge as MantineBadge, type BadgeProps as MantineBadgeProps } from \"@mantine/core\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { commonColors } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { type Sx, useSxStyle } from \"../sx\";\n\ntype BadgeAnchorOrigin = {\n horizontal?: \"left\" \| \"right\";\n vertical?: \"bottom\" \| \"top\";\n};\n\nexport interface BadgeProps extends MantineBadgeProps {\n anchorOrigin?: BadgeAnchorOrigin;\n badgeContent?: ReactNode;\n dot?: boolean;\n invisible?: boolean;\n max?: number;\n overlap?: \"circular\" \| \"rectangular\";\n processing?: boolean;\n showZero?: boolean;\n sx?: Sx;\n}\n\nconst compatBadgeColorMap: Record<string, string> = {\n default: colors.neutral,\n error: colors.error,\n info: colors.info,\n primary: colors.primary,\n secondary: colors.neutral,\n success: colors.success,\n warning: colors.warning,\n};\n\nconst resolveBadgeColor = (color: MantineBadgeProps[\"color\"]): string => {\n if (!color) return ~~`var(--mantine-color-${colors~~.~~error}-6)`;\~~n const mappedColor = compatBadgeColorMap[color] \|\| color;\n if (mappedColor.startsWith(\"#\") \|\| mappedColor.startsWith(\"rgb\") \|\| mappedColor.startsWith(\"hsl\"))\n return mappedColor;\n if (mappedColor.startsWith(\"var(\")) return mappedColor;\n\n const [colorName, shade ~~= \"6\"~~] = mappedColor.split(\".\");\n return `var(--mantine-color-${colorName}-${shade})`;\n};\n\nconst resolveAnchorStyle = (anchorOrigin?: BadgeAnchorOrigin): CSSProperties => {\n const vertical = anchorOrigin?.vertical ?? \"top\";\n const horizontal = anchorOrigin?.horizontal ?? \"right\";\n\n return {\n [horizontal]: -4,\n [vertical]: -4,\n };\n};\n\nconst formatBadgeContent = (badgeContent: ReactNode, max?: number) => {\n if (typeof badgeContent !== \"number\" \|\| max === undefined \|\| badgeContent <= max) {\n return badgeContent;\n }\n\n return `${max}+`;\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n (\n {\n anchorOrigin,\n badgeContent,\n children,\n color,\n dot,\n invisible,\n max,\n overlap: _overlap,\n processing: _processing,\n showZero,\n sx,\n style,\n variant = \"light\",\n ...props\n },\n ref,\n ) => {\n const sxStyle = useSxStyle(sx);\n\n if (dot \|\| badgeContent !== undefined) {\n const shouldHideBadge = invisible \|\| (!dot && badgeContent === 0 && !showZero);\n\n return (\n <span\n {...props}\n ref={ref}\n style={{\n display: \"inline-flex\",\n lineHeight: 1,\n position: \"relative\",\n ...sxStyle,\n ...(style as CSSProperties),\n }}\n >\n {children}\n {shouldHideBadge ? null : (\n <span\n aria-hidden={dot ? \"true\" : undefined}\n style={{\n backgroundColor: resolveBadgeColor(color),\n border: \"2px solid var(--mantine-color-body)\",\n borderRadius: 999,\n color: commonColors.white,\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: 10,\n fontWeight: 700,\n lineHeight: 1,\n minHeight: dot ? 10 : 16,\n minWidth: dot ? 10 : 16,\n padding: dot ? 0 : \"0 4px\",\n position: \"absolute\",\n ...resolveAnchorStyle(anchorOrigin),\n }}\n >\n {!dot && formatBadgeContent(badgeContent, max)}\n </span>\n )}\n </span>\n );\n }\n\n return (\n <MantineBadge\n component=\"span\"\n color={color}\n variant={variant}\n {...props}\n style={{ ...sxStyle, ...style }}\n ref={ref}\n >\n {children}\n </MantineBadge>\n );\n },\n);\nBadge.displayName = \"Badge\";\n"],"names":["colors","forwardRef","sx","useSxStyle","jsxs","jsx","commonColors","MantineBadge"],"mappings":";;;;;;;;AAwBA,MAAM,sBAA8C;AAAA,EAClD,SAASA,OAAAA,OAAO;AAAA,EAChB,OAAOA,OAAAA,OAAO;AAAA,EACd,MAAMA,OAAAA,OAAO;AAAA,EACb,SAASA,OAAAA,OAAO;AAAA,EAChB,WAAWA,OAAAA,OAAO;AAAA,EAClB,SAASA,OAAAA,OAAO;AAAA,EAChB,SAASA,OAAAA,OAAO;AAClB;AAEA,MAAM,oBAAoB,CAAC,UAA8C;AACvE,MAAI,CAAC,MAAO,~~QAAO~~,~~uBAAuBA~~,~~OAAAA,OAAO,KAAK~~;~~AACtD~~,QAAM,cAAc,oBAAoB,KAAK,KAAK;AAClD,MAAI,YAAY,WAAW,GAAG,KAAK,YAAY,WAAW,KAAK,KAAK,YAAY,WAAW,KAAK;AAC9F,WAAO;AACT,MAAI,YAAY,WAAW,MAAM,EAAG,QAAO;AAE3C,QAAM,CAAC,WAAW,~~QAAQ~~,~~GAAG,~~IAAI,YAAY,MAAM,GAAG;~~AACtD~~,SAAO,uBAAuB,SAAS,IAAI,~~KAAK~~;~~AAClD~~;AAEA,MAAM,qBAAqB,CAAC,iBAAoD;AAC9E,QAAM,WAAW,cAAc,YAAY;AAC3C,QAAM,aAAa,cAAc,cAAc;AAE/C,SAAO;AAAA,IACL,CAAC,UAAU,GAAG;AAAA,IACd,CAAC,QAAQ,GAAG;AAAA,EAAA;AAEhB;AAEA,MAAM,qBAAqB,CAAC,cAAyB,QAAiB;AACpE,MAAI,OAAO,iBAAiB,YAAY,QAAQ,UAAa,gBAAgB,KAAK;AAChF,WAAO;AAAA,EACT;AAEA,SAAO,GAAG,GAAG;AACf;AAEO,MAAM,QAAQC,MAAAA;AAAAA,EACnB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IAAA,IACAC;AAAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAUC,GAAAA,WAAWD,IAAE;AAE7B,QAAI,OAAO,iBAAiB,QAAW;AACrC,YAAM,kBAAkB,aAAc,CAAC,OAAO,iBAAiB,KAAK,CAAC;AAErE,aACEE,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,OAAO;AAAA,YACL,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,UAAU;AAAA,YACV,GAAG;AAAA,YACH,GAAI;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAA;AAAA,YACA,kBAAkB,OACjBC,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAa,MAAM,SAAS;AAAA,gBAC5B,OAAO;AAAA,kBACL,iBAAiB,kBAAkB,KAAK;AAAA,kBACxC,QAAQ;AAAA,kBACR,cAAc;AAAA,kBACd,OAAOC,MAAAA,aAAa;AAAA,kBACpB,SAAS;AAAA,kBACT,YAAY;AAAA,kBACZ,gBAAgB;AAAA,kBAChB,UAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,YAAY;AAAA,kBACZ,WAAW,MAAM,KAAK;AAAA,kBACtB,UAAU,MAAM,KAAK;AAAA,kBACrB,SAAS,MAAM,IAAI;AAAA,kBACnB,UAAU;AAAA,kBACV,GAAG,mBAAmB,YAAY;AAAA,gBAAA;AAAA,gBAGnC,UAAA,CAAC,OAAO,mBAAmB,cAAc,GAAG;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/C;AAAA,QAAA;AAAA,MAAA;AAAA,IAIR;AAEA,WACED,2BAAAA;AAAAA,MAACE,QAAAA;AAAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,OAAO,EAAE,GAAG,SAAS,GAAG,MAAA;AAAA,QACxB;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,MAAM,cAAc;;"}
1	+ {"version":3,"file":"Badge.cjs","sources":["../../../../src/components/primitives/Badge/Badge.tsx"],"sourcesContent":["import { Badge as MantineBadge, type BadgeProps as MantineBadgeProps } from \"@mantine/core\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { commonColors, fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { type Sx, useSxStyle } from \"../sx\";\n\ntype BadgeAnchorOrigin = {\n horizontal?: \"left\" \| \"right\";\n vertical?: \"bottom\" \| \"top\";\n};\n\nexport interface BadgeProps extends MantineBadgeProps {\n anchorOrigin?: BadgeAnchorOrigin;\n badgeContent?: ReactNode;\n dot?: boolean;\n invisible?: boolean;\n max?: number;\n overlap?: \"circular\" \| \"rectangular\";\n processing?: boolean;\n showZero?: boolean;\n sx?: Sx;\n}\n\nconst compatBadgeColorMap: Record<string, string> = {\n default: colors.neutral,\n error: colors.error,\n info: colors.info,\n primary: colors.primary,\n secondary: colors.neutral,\n success: colors.success,\n warning: colors.warning,\n};\n\nconst semanticSolidColorMap: Record<string, string> = {\n error: \"var(--fairmint-color-error-solid)\",\n indigo: \"var(--fairmint-color-brand-primary)\",\n info: \"var(--fairmint-color-info-solid)\",\n success: \"var(--fairmint-color-success-solid)\",\n warning: \"var(--fairmint-color-warning-solid)\",\n};\n\nconst resolveBadgeColor = (color: MantineBadgeProps[\"color\"]): string => {\n if (!color) return fairmintVars.colorErrorSolid;\n const mappedColor = compatBadgeColorMap[color] \|\| color;\n if (mappedColor.startsWith(\"#\") \|\| mappedColor.startsWith(\"rgb\") \|\| mappedColor.startsWith(\"hsl\"))\n return mappedColor;\n if (mappedColor.startsWith(\"var(\")) return mappedColor;\n\n const [colorName, shade] = mappedColor.split(\".\");\n if (!shade && semanticSolidColorMap[colorName]) return semanticSolidColorMap[colorName];\n\n return `var(--mantine-color-${colorName}-${shade ?? \"6\"})`;\n};\n\nconst resolveAnchorStyle = (anchorOrigin?: BadgeAnchorOrigin): CSSProperties => {\n const vertical = anchorOrigin?.vertical ?? \"top\";\n const horizontal = anchorOrigin?.horizontal ?? \"right\";\n\n return {\n [horizontal]: -4,\n [vertical]: -4,\n };\n};\n\nconst formatBadgeContent = (badgeContent: ReactNode, max?: number) => {\n if (typeof badgeContent !== \"number\" \|\| max === undefined \|\| badgeContent <= max) {\n return badgeContent;\n }\n\n return `${max}+`;\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n (\n {\n anchorOrigin,\n badgeContent,\n children,\n color,\n dot,\n invisible,\n max,\n overlap: _overlap,\n processing: _processing,\n showZero,\n sx,\n style,\n variant = \"light\",\n ...props\n },\n ref,\n ) => {\n const sxStyle = useSxStyle(sx);\n\n if (dot \|\| badgeContent !== undefined) {\n const shouldHideBadge = invisible \|\| (!dot && badgeContent === 0 && !showZero);\n\n return (\n <span\n {...props}\n ref={ref}\n style={{\n display: \"inline-flex\",\n lineHeight: 1,\n position: \"relative\",\n ...sxStyle,\n ...(style as CSSProperties),\n }}\n >\n {children}\n {shouldHideBadge ? null : (\n <span\n aria-hidden={dot ? \"true\" : undefined}\n style={{\n backgroundColor: resolveBadgeColor(color),\n border: \"2px solid var(--mantine-color-body)\",\n borderRadius: 999,\n color: commonColors.white,\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: 10,\n fontWeight: 700,\n lineHeight: 1,\n minHeight: dot ? 10 : 16,\n minWidth: dot ? 10 : 16,\n padding: dot ? 0 : \"0 4px\",\n position: \"absolute\",\n ...resolveAnchorStyle(anchorOrigin),\n }}\n >\n {!dot && formatBadgeContent(badgeContent, max)}\n </span>\n )}\n </span>\n );\n }\n\n return (\n <MantineBadge\n component=\"span\"\n color={color}\n variant={variant}\n {...props}\n style={{ ...sxStyle, ...style }}\n ref={ref}\n >\n {children}\n </MantineBadge>\n );\n },\n);\nBadge.displayName = \"Badge\";\n"],"names":["colors","fairmintVars","forwardRef","sx","useSxStyle","jsxs","jsx","commonColors","MantineBadge"],"mappings":"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"}

package/dist/components/primitives/Badge/Badge.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,EAAE,KAAK,EAAE,EAAc,MAAM,OAAO,CAAC;AAE5C,KAAK,iBAAiB,GAAG;IACvB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACnD,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,UAAU,GAAG,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,EAAE,CAAC;CACT;~~AAyCD~~,eAAO,MAAM,KAAK,wGA+EjB,CAAC"}
1	+ {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,EAAE,KAAK,EAAE,EAAc,MAAM,OAAO,CAAC;AAE5C,KAAK,iBAAiB,GAAG;IACvB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACnD,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,UAAU,GAAG,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,EAAE,CAAC;CACT;AAmDD,eAAO,MAAM,KAAK,wGA+EjB,CAAC"}

package/dist/components/primitives/Badge/Badge.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { commonColors } from "../../../theme/index.js";
+import { commonColors, fairmintVars } from "../../../theme/index.js";
 import { colors } from "../../../theme/colors.js";
 import { useSxStyle } from "../sx.js";
 import { Badge as Badge$1 } from "../../../node_modules/@mantine/core/esm/components/Badge/Badge.js";
@@ -13,14 +13,22 @@ const compatBadgeColorMap = {
   success: colors.success,
   warning: colors.warning
 };
+const semanticSolidColorMap = {
+  error: "var(--fairmint-color-error-solid)",
+  indigo: "var(--fairmint-color-brand-primary)",
+  info: "var(--fairmint-color-info-solid)",
+  success: "var(--fairmint-color-success-solid)",
+  warning: "var(--fairmint-color-warning-solid)"
+};
 const resolveBadgeColor = (color) => {
-  if (!color) return `var(--mantine-color-${colors.error}-6)`;
+  if (!color) return fairmintVars.colorErrorSolid;
   const mappedColor = compatBadgeColorMap[color] || color;
   if (mappedColor.startsWith("#") || mappedColor.startsWith("rgb") || mappedColor.startsWith("hsl"))
     return mappedColor;
   if (mappedColor.startsWith("var(")) return mappedColor;
-  const [colorName, shade = "6"] = mappedColor.split(".");
-  return `var(--mantine-color-${colorName}-${shade})`;
+  const [colorName, shade] = mappedColor.split(".");
+  if (!shade && semanticSolidColorMap[colorName]) return semanticSolidColorMap[colorName];
+  return `var(--mantine-color-${colorName}-${shade ?? "6"})`;
 };
 const resolveAnchorStyle = (anchorOrigin) => {
   const vertical = anchorOrigin?.vertical ?? "top";

package/dist/components/primitives/Badge/Badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.js","sources":["../../../../src/components/primitives/Badge/Badge.tsx"],"sourcesContent":["import { Badge as MantineBadge, type BadgeProps as MantineBadgeProps } from \"@mantine/core\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { commonColors } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { type Sx, useSxStyle } from \"../sx\";\n\ntype BadgeAnchorOrigin = {\n horizontal?: \"left\" \| \"right\";\n vertical?: \"bottom\" \| \"top\";\n};\n\nexport interface BadgeProps extends MantineBadgeProps {\n anchorOrigin?: BadgeAnchorOrigin;\n badgeContent?: ReactNode;\n dot?: boolean;\n invisible?: boolean;\n max?: number;\n overlap?: \"circular\" \| \"rectangular\";\n processing?: boolean;\n showZero?: boolean;\n sx?: Sx;\n}\n\nconst compatBadgeColorMap: Record<string, string> = {\n default: colors.neutral,\n error: colors.error,\n info: colors.info,\n primary: colors.primary,\n secondary: colors.neutral,\n success: colors.success,\n warning: colors.warning,\n};\n\nconst resolveBadgeColor = (color: MantineBadgeProps[\"color\"]): string => {\n if (!color) return ~~`var(--mantine-color-${colors~~.~~error}-6)`;\~~n const mappedColor = compatBadgeColorMap[color] \|\| color;\n if (mappedColor.startsWith(\"#\") \|\| mappedColor.startsWith(\"rgb\") \|\| mappedColor.startsWith(\"hsl\"))\n return mappedColor;\n if (mappedColor.startsWith(\"var(\")) return mappedColor;\n\n const [colorName, shade ~~= \"6\"~~] = mappedColor.split(\".\");\n return `var(--mantine-color-${colorName}-${shade})`;\n};\n\nconst resolveAnchorStyle = (anchorOrigin?: BadgeAnchorOrigin): CSSProperties => {\n const vertical = anchorOrigin?.vertical ?? \"top\";\n const horizontal = anchorOrigin?.horizontal ?? \"right\";\n\n return {\n [horizontal]: -4,\n [vertical]: -4,\n };\n};\n\nconst formatBadgeContent = (badgeContent: ReactNode, max?: number) => {\n if (typeof badgeContent !== \"number\" \|\| max === undefined \|\| badgeContent <= max) {\n return badgeContent;\n }\n\n return `${max}+`;\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n (\n {\n anchorOrigin,\n badgeContent,\n children,\n color,\n dot,\n invisible,\n max,\n overlap: _overlap,\n processing: _processing,\n showZero,\n sx,\n style,\n variant = \"light\",\n ...props\n },\n ref,\n ) => {\n const sxStyle = useSxStyle(sx);\n\n if (dot \|\| badgeContent !== undefined) {\n const shouldHideBadge = invisible \|\| (!dot && badgeContent === 0 && !showZero);\n\n return (\n <span\n {...props}\n ref={ref}\n style={{\n display: \"inline-flex\",\n lineHeight: 1,\n position: \"relative\",\n ...sxStyle,\n ...(style as CSSProperties),\n }}\n >\n {children}\n {shouldHideBadge ? null : (\n <span\n aria-hidden={dot ? \"true\" : undefined}\n style={{\n backgroundColor: resolveBadgeColor(color),\n border: \"2px solid var(--mantine-color-body)\",\n borderRadius: 999,\n color: commonColors.white,\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: 10,\n fontWeight: 700,\n lineHeight: 1,\n minHeight: dot ? 10 : 16,\n minWidth: dot ? 10 : 16,\n padding: dot ? 0 : \"0 4px\",\n position: \"absolute\",\n ...resolveAnchorStyle(anchorOrigin),\n }}\n >\n {!dot && formatBadgeContent(badgeContent, max)}\n </span>\n )}\n </span>\n );\n }\n\n return (\n <MantineBadge\n component=\"span\"\n color={color}\n variant={variant}\n {...props}\n style={{ ...sxStyle, ...style }}\n ref={ref}\n >\n {children}\n </MantineBadge>\n );\n },\n);\nBadge.displayName = \"Badge\";\n"],"names":["MantineBadge"],"mappings":";;;;;;AAwBA,MAAM,sBAA8C;AAAA,EAClD,SAAS,OAAO;AAAA,EAChB,OAAO,OAAO;AAAA,EACd,MAAM,OAAO;AAAA,EACb,SAAS,OAAO;AAAA,EAChB,WAAW,OAAO;AAAA,EAClB,SAAS,OAAO;AAAA,EAChB,SAAS,OAAO;AAClB;AAEA,MAAM,oBAAoB,CAAC,UAA8C;AACvE,MAAI,CAAC,MAAO,QAAO,~~uBAAuB,OAAO,KAAK~~;~~AACtD~~,QAAM,cAAc,oBAAoB,KAAK,KAAK;AAClD,MAAI,YAAY,WAAW,GAAG,KAAK,YAAY,WAAW,KAAK,KAAK,YAAY,WAAW,KAAK;AAC9F,WAAO;AACT,MAAI,YAAY,WAAW,MAAM,EAAG,QAAO;AAE3C,QAAM,CAAC,WAAW,~~QAAQ~~,~~GAAG,~~IAAI,YAAY,MAAM,GAAG;~~AACtD~~,SAAO,uBAAuB,SAAS,IAAI,~~KAAK~~;~~AAClD~~;AAEA,MAAM,qBAAqB,CAAC,iBAAoD;AAC9E,QAAM,WAAW,cAAc,YAAY;AAC3C,QAAM,aAAa,cAAc,cAAc;AAE/C,SAAO;AAAA,IACL,CAAC,UAAU,GAAG;AAAA,IACd,CAAC,QAAQ,GAAG;AAAA,EAAA;AAEhB;AAEA,MAAM,qBAAqB,CAAC,cAAyB,QAAiB;AACpE,MAAI,OAAO,iBAAiB,YAAY,QAAQ,UAAa,gBAAgB,KAAK;AAChF,WAAO;AAAA,EACT;AAEA,SAAO,GAAG,GAAG;AACf;AAEO,MAAM,QAAQ;AAAA,EACnB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAU,WAAW,EAAE;AAE7B,QAAI,OAAO,iBAAiB,QAAW;AACrC,YAAM,kBAAkB,aAAc,CAAC,OAAO,iBAAiB,KAAK,CAAC;AAErE,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,OAAO;AAAA,YACL,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,UAAU;AAAA,YACV,GAAG;AAAA,YACH,GAAI;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAA;AAAA,YACA,kBAAkB,OACjB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAa,MAAM,SAAS;AAAA,gBAC5B,OAAO;AAAA,kBACL,iBAAiB,kBAAkB,KAAK;AAAA,kBACxC,QAAQ;AAAA,kBACR,cAAc;AAAA,kBACd,OAAO,aAAa;AAAA,kBACpB,SAAS;AAAA,kBACT,YAAY;AAAA,kBACZ,gBAAgB;AAAA,kBAChB,UAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,YAAY;AAAA,kBACZ,WAAW,MAAM,KAAK;AAAA,kBACtB,UAAU,MAAM,KAAK;AAAA,kBACrB,SAAS,MAAM,IAAI;AAAA,kBACnB,UAAU;AAAA,kBACV,GAAG,mBAAmB,YAAY;AAAA,gBAAA;AAAA,gBAGnC,UAAA,CAAC,OAAO,mBAAmB,cAAc,GAAG;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/C;AAAA,QAAA;AAAA,MAAA;AAAA,IAIR;AAEA,WACE;AAAA,MAACA;AAAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,OAAO,EAAE,GAAG,SAAS,GAAG,MAAA;AAAA,QACxB;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,MAAM,cAAc;"}
1	+ {"version":3,"file":"Badge.js","sources":["../../../../src/components/primitives/Badge/Badge.tsx"],"sourcesContent":["import { Badge as MantineBadge, type BadgeProps as MantineBadgeProps } from \"@mantine/core\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { commonColors, fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { type Sx, useSxStyle } from \"../sx\";\n\ntype BadgeAnchorOrigin = {\n horizontal?: \"left\" \| \"right\";\n vertical?: \"bottom\" \| \"top\";\n};\n\nexport interface BadgeProps extends MantineBadgeProps {\n anchorOrigin?: BadgeAnchorOrigin;\n badgeContent?: ReactNode;\n dot?: boolean;\n invisible?: boolean;\n max?: number;\n overlap?: \"circular\" \| \"rectangular\";\n processing?: boolean;\n showZero?: boolean;\n sx?: Sx;\n}\n\nconst compatBadgeColorMap: Record<string, string> = {\n default: colors.neutral,\n error: colors.error,\n info: colors.info,\n primary: colors.primary,\n secondary: colors.neutral,\n success: colors.success,\n warning: colors.warning,\n};\n\nconst semanticSolidColorMap: Record<string, string> = {\n error: \"var(--fairmint-color-error-solid)\",\n indigo: \"var(--fairmint-color-brand-primary)\",\n info: \"var(--fairmint-color-info-solid)\",\n success: \"var(--fairmint-color-success-solid)\",\n warning: \"var(--fairmint-color-warning-solid)\",\n};\n\nconst resolveBadgeColor = (color: MantineBadgeProps[\"color\"]): string => {\n if (!color) return fairmintVars.colorErrorSolid;\n const mappedColor = compatBadgeColorMap[color] \|\| color;\n if (mappedColor.startsWith(\"#\") \|\| mappedColor.startsWith(\"rgb\") \|\| mappedColor.startsWith(\"hsl\"))\n return mappedColor;\n if (mappedColor.startsWith(\"var(\")) return mappedColor;\n\n const [colorName, shade] = mappedColor.split(\".\");\n if (!shade && semanticSolidColorMap[colorName]) return semanticSolidColorMap[colorName];\n\n return `var(--mantine-color-${colorName}-${shade ?? \"6\"})`;\n};\n\nconst resolveAnchorStyle = (anchorOrigin?: BadgeAnchorOrigin): CSSProperties => {\n const vertical = anchorOrigin?.vertical ?? \"top\";\n const horizontal = anchorOrigin?.horizontal ?? \"right\";\n\n return {\n [horizontal]: -4,\n [vertical]: -4,\n };\n};\n\nconst formatBadgeContent = (badgeContent: ReactNode, max?: number) => {\n if (typeof badgeContent !== \"number\" \|\| max === undefined \|\| badgeContent <= max) {\n return badgeContent;\n }\n\n return `${max}+`;\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n (\n {\n anchorOrigin,\n badgeContent,\n children,\n color,\n dot,\n invisible,\n max,\n overlap: _overlap,\n processing: _processing,\n showZero,\n sx,\n style,\n variant = \"light\",\n ...props\n },\n ref,\n ) => {\n const sxStyle = useSxStyle(sx);\n\n if (dot \|\| badgeContent !== undefined) {\n const shouldHideBadge = invisible \|\| (!dot && badgeContent === 0 && !showZero);\n\n return (\n <span\n {...props}\n ref={ref}\n style={{\n display: \"inline-flex\",\n lineHeight: 1,\n position: \"relative\",\n ...sxStyle,\n ...(style as CSSProperties),\n }}\n >\n {children}\n {shouldHideBadge ? null : (\n <span\n aria-hidden={dot ? \"true\" : undefined}\n style={{\n backgroundColor: resolveBadgeColor(color),\n border: \"2px solid var(--mantine-color-body)\",\n borderRadius: 999,\n color: commonColors.white,\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: 10,\n fontWeight: 700,\n lineHeight: 1,\n minHeight: dot ? 10 : 16,\n minWidth: dot ? 10 : 16,\n padding: dot ? 0 : \"0 4px\",\n position: \"absolute\",\n ...resolveAnchorStyle(anchorOrigin),\n }}\n >\n {!dot && formatBadgeContent(badgeContent, max)}\n </span>\n )}\n </span>\n );\n }\n\n return (\n <MantineBadge\n component=\"span\"\n color={color}\n variant={variant}\n {...props}\n style={{ ...sxStyle, ...style }}\n ref={ref}\n >\n {children}\n </MantineBadge>\n );\n },\n);\nBadge.displayName = \"Badge\";\n"],"names":["MantineBadge"],"mappings":"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"}