@fairmint/ui 0.3.10 → 0.3.11

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

@@ -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;;"}
+{"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

@@ -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"}
+{"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

@@ -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

@@ -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;"}
+{"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

@@ -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

@@ -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;;"}
+{"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

@@ -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"}
+{"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

@@ -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

@@ -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;"}
+{"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/layout/SideNav/SideNav.cjs

@@ -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

@@ -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;;"}
+{"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

@@ -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

@@ -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;"}
+{"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

@@ -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

@@ -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":"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"}
+{"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

@@ -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"}
+{"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

@@ -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

@@ -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;"}
+{"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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"}

package/dist/components/primitives/muiCompat.cjs

@@ -5,7 +5,6 @@ const dayjs_min = require("../../_virtual/dayjs.min.cjs");
 const customParseFormat = require("../../_virtual/customParseFormat.cjs");
 const React = require("react");
 const index = require("../../theme/index.cjs");
-const colors = require("../../theme/colors.cjs");
 const ActionIcon = require("./ActionIcon/ActionIcon.cjs");
 const Badge = require("./Badge/Badge.cjs");
 const Loader = require("./Loader/Loader.cjs");
@@ -43,10 +42,6 @@ const ChevronIcon = ({ direction }) => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: direction === "left" ? "M15 6 9 12l6 6" : "m9 6 6 6-6 6" })
   }
 );
-const themeColor = (name, shade) => {
-  const palette = index.theme.colors?.[name];
-  return Array.isArray(palette) ? palette[shade] : void 0;
-};
 const compatBreakpointKeys = ["xs", "sm", "md", "lg", "xl"];
 const compatFallbackBreakpoints = {
   xs: "30em",
@@ -61,26 +56,26 @@ const compatBreakpoints = {
   up: (key) => `@media (min-width: ${compatBreakpointWidth(key)})`
 };
 const compatColorMap = {
-  action: index.neutralColors[500],
-  "action.active": index.neutralColors[700],
-  "action.selected": index.neutralColors[200],
-  brand: index.brandColors.indigo,
-  default: index.neutralColors[500],
-  disabled: index.neutralColors[500],
-  error: index.semanticColors.error,
-  "error.main": index.semanticColors.error,
-  info: index.semanticColors.info,
-  "info.darkest": themeColor(colors.colors.info, 9) || index.semanticColors.info,
+  action: index.fairmintVars.colorIconSecondary,
+  "action.active": index.fairmintVars.colorIconPrimary,
+  "action.selected": index.fairmintVars.colorBgSelected,
+  brand: index.fairmintVars.colorBrandPrimary,
+  default: index.fairmintVars.colorTextSecondary,
+  disabled: index.fairmintVars.colorTextDisabled,
+  error: index.fairmintVars.colorErrorText,
+  "error.main": index.fairmintVars.colorErrorText,
+  info: index.fairmintVars.colorInfoText,
+  "info.darkest": index.fairmintVars.colorInfoSolid,
   inherit: "inherit",
-  primary: index.brandColors.indigo,
-  secondary: index.neutralColors[500],
-  success: index.semanticColors.success,
-  "success.dark": themeColor(colors.colors.success, 7) || index.semanticColors.success,
-  "text.disabled": index.neutralColors[500],
-  "text.primary": index.neutralColors[900],
-  "text.secondary": index.neutralColors[500],
-  warning: index.semanticColors.warning,
-  "warning.darkest": themeColor(colors.colors.warning, 9) || index.semanticColors.warning
+  primary: index.fairmintVars.colorBrandPrimary,
+  secondary: index.fairmintVars.colorTextSecondary,
+  success: index.fairmintVars.colorSuccessText,
+  "success.dark": index.fairmintVars.colorSuccessSolid,
+  "text.disabled": index.fairmintVars.colorTextDisabled,
+  "text.primary": index.fairmintVars.colorTextPrimary,
+  "text.secondary": index.fairmintVars.colorTextSecondary,
+  warning: index.fairmintVars.colorWarningText,
+  "warning.darkest": index.fairmintVars.colorWarningSolid
 };
 const resolveCompatColor = (color) => {
   if (typeof color !== "string" || !color) return void 0;
@@ -313,36 +308,36 @@ const compatTheme = {
   breakpoints: compatBreakpoints,
   palette: {
     action: {
-      active: index.neutralColors[700],
-      hover: index.neutralColors[100],
-      selected: index.neutralColors[200]
+      active: index.fairmintVars.colorIconPrimary,
+      hover: index.fairmintVars.colorBgHover,
+      selected: index.fairmintVars.colorBgSelected
     },
-    background: { default: index.neutralColors[50], paper: index.commonColors.white },
+    background: { default: index.fairmintVars.colorBgCanvas, paper: index.fairmintVars.colorBgSurface },
     common: { black: index.commonColors.black, white: index.commonColors.white },
-    divider: index.neutralColors[200],
-    error: { main: index.semanticColors.error },
+    divider: index.fairmintVars.colorBorderDefault,
+    error: { main: index.fairmintVars.colorErrorText },
     grey: {
-      50: index.neutralColors[50],
-      100: index.neutralColors[100],
-      500: index.neutralColors[500],
-      900: index.neutralColors[900]
+      50: index.fairmintVars.colorBgSurfaceSecondary,
+      100: index.fairmintVars.colorBgHover,
+      500: index.fairmintVars.colorTextSecondary,
+      900: index.fairmintVars.colorTextPrimary
     },
-    info: { main: index.semanticColors.info },
+    info: { main: index.fairmintVars.colorInfoText },
     mode: "light",
     primary: {
       contrastText: index.commonColors.white,
-      dark: themeColor(colors.colors.primary, 8) || index.brandColors.indigo,
-      light: themeColor(colors.colors.primary, 3) || index.brandColors.indigo,
-      main: index.brandColors.indigo
+      dark: index.fairmintVars.colorBrandPrimaryHover,
+      light: index.fairmintVars.colorBrandPrimaryActive,
+      main: index.fairmintVars.colorBrandPrimary
     },
-    secondary: { main: index.neutralColors[500] },
-    success: { main: index.semanticColors.success },
+    secondary: { main: index.fairmintVars.colorTextSecondary },
+    success: { main: index.fairmintVars.colorSuccessText },
     text: {
-      disabled: index.neutralColors[500],
-      primary: index.neutralColors[900],
-      secondary: index.neutralColors[600]
+      disabled: index.fairmintVars.colorTextDisabled,
+      primary: index.fairmintVars.colorTextPrimary,
+      secondary: index.fairmintVars.colorTextSecondary
     },
-    warning: { main: index.semanticColors.warning }
+    warning: { main: index.fairmintVars.colorWarningText }
   },
   shape: { borderRadius: 4 },
   spacing: (...values) => values.map((value) => typeof value === "number" ? `${value * 8}px` : value).join(" "),
@@ -1159,6 +1154,7 @@ const SvgIcon = ({
     "svg",
     {
       "aria-hidden": titleAccess ? void 0 : true,
+      color: htmlColor || resolveCompatColor(color),
       fill: "currentColor",
       focusable: "false",
       height: "1em",
@@ -1271,6 +1267,7 @@ const DatePicker = ({
         style,
         sx: { ...sxToStyle(sx2), ...sxToStyle(textFieldSx) }
       }),
+      popoverProps: { zIndex: 1400 },
       ...textFieldProps,
       ...props
     }