@fairmint/ui 0.3.9 → 0.3.11

package/dist/_virtual/index3.cjs

@@ -1,7 +1,5 @@
 "use strict";
-const _commonjsHelpers = require("./_commonjsHelpers.cjs");
-const index = require("../node_modules/fast-deep-equal/index.cjs");
-var fastDeepEqualExports = index.__require();
-const isEqual = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(fastDeepEqualExports);
-module.exports = isEqual;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var propTypes = { exports: {} };
+exports.__module = propTypes;
 //# sourceMappingURL=index3.cjs.map

package/dist/_virtual/index3.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index3.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index3.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/index3.js

@@ -1,8 +1,5 @@
-import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
-import { __require as requireFastDeepEqual } from "../node_modules/fast-deep-equal/index.js";
-var fastDeepEqualExports = requireFastDeepEqual();
-const isEqual = /* @__PURE__ */ getDefaultExportFromCjs(fastDeepEqualExports);
+var propTypes = { exports: {} };
 export {
-  isEqual as default
+  propTypes as __module
 };
 //# sourceMappingURL=index3.js.map

package/dist/_virtual/index3.js.map

@@ -1 +1 @@
-{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/index4.cjs

@@ -1,5 +1,7 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var propTypes = { exports: {} };
-exports.__module = propTypes;
+const _commonjsHelpers = require("./_commonjsHelpers.cjs");
+const index = require("../node_modules/fast-deep-equal/index.cjs");
+var fastDeepEqualExports = index.__require();
+const isEqual = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(fastDeepEqualExports);
+module.exports = isEqual;
 //# sourceMappingURL=index4.cjs.map

package/dist/_virtual/index4.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index4.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index4.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/index4.js

@@ -1,5 +1,8 @@
-var propTypes = { exports: {} };
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { __require as requireFastDeepEqual } from "../node_modules/fast-deep-equal/index.js";
+var fastDeepEqualExports = requireFastDeepEqual();
+const isEqual = /* @__PURE__ */ getDefaultExportFromCjs(fastDeepEqualExports);
 export {
-  propTypes as __module
+  isEqual as default
 };
 //# sourceMappingURL=index4.js.map

package/dist/_virtual/index4.js.map

@@ -1 +1 @@
-{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/FairmintProvider/FairmintProvider.cjs

@@ -19,7 +19,7 @@ function FairmintProvider({
       ...colorSchemeProps,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Notifications.Notifications, { position: notificationPosition }),
-        /* @__PURE__ */ jsxRuntime.jsx(DatesProvider.DatesProvider, { settings: { locale: "en", firstDayOfWeek: 0 }, children })
+        /* @__PURE__ */ jsxRuntime.jsx(DatesProvider.DatesProvider, { settings: { locale: "en", firstDayOfWeek: 0, weekendDays: [] }, children })
       ]
     }
   );

package/dist/components/FairmintProvider/FairmintProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FairmintProvider.cjs","sources":["../../../src/components/FairmintProvider/FairmintProvider.tsx"],"sourcesContent":["import type { MantineColorScheme } from \"@mantine/core\";\nimport { MantineProvider } from \"@mantine/core\";\nimport { DatesProvider } from \"@mantine/dates\";\nimport { Notifications } from \"@mantine/notifications\";\nimport type { ReactNode } from \"react\";\nimport { fairmintCssVariables, theme } from \"../../theme\";\n\nexport interface FairmintProviderProps {\n  children: ReactNode;\n  /** Color scheme. When `light` or `dark`, Mantine is locked to this value. @default \"light\" */\n  colorScheme?: MantineColorScheme;\n  /**\n   * Notification position.\n   * @default \"top-right\"\n   */\n  notificationPosition?:\n    | \"top-left\"\n    | \"top-right\"\n    | \"top-center\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"bottom-center\";\n}\n\nexport function FairmintProvider({\n  children,\n  colorScheme = \"light\",\n  notificationPosition = \"top-right\",\n}: FairmintProviderProps) {\n  if (import.meta.env?.DEV) {\n    validateSetup();\n  }\n\n  const colorSchemeProps =\n    colorScheme === \"light\" || colorScheme === \"dark\"\n      ? { forceColorScheme: colorScheme }\n      : { defaultColorScheme: colorScheme };\n\n  return (\n    <MantineProvider\n      theme={theme}\n      cssVariablesResolver={fairmintCssVariables}\n      {...colorSchemeProps}\n    >\n      <Notifications position={notificationPosition} />\n      <DatesProvider settings={{ locale: \"en\", firstDayOfWeek: 0 }}>{children}</DatesProvider>\n    </MantineProvider>\n  );\n}\n\nfunction validateSetup() {\n  if (typeof window === \"undefined\") return;\n  if (\n    (typeof process !== \"undefined\" && process.env?.NODE_ENV === \"test\") ||\n    import.meta.env?.MODE === \"test\"\n  )\n    return;\n\n  requestIdleCallback(() => {\n    const root = document.documentElement;\n    const mantineCss = getComputedStyle(root).getPropertyValue(\"--mantine-color-scheme\");\n    if (!mantineCss) {\n      console.warn(\n        '[@fairmint/ui] Mantine CSS not detected. Make sure you import \"@fairmint/ui/styles.css\" in your entry file.',\n      );\n    }\n  });\n}\n"],"names":["jsxs","MantineProvider","theme","fairmintCssVariables","jsx","Notifications","DatesProvider"],"mappings":";;;;;;;AAwBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,cAAc;AAAA,EACd,uBAAuB;AACzB,GAA0B;AAKxB,QAAM,mBACJ,gBAAgB,WAAW,gBAAgB,SACvC,EAAE,kBAAkB,YAAA,IACpB,EAAE,oBAAoB,YAAA;AAE5B,SACEA,2BAAAA;AAAAA,IAACC,gBAAAA;AAAAA,IAAA;AAAA,MAAA,OACCC,MAAAA;AAAAA,MACA,sBAAsBC,MAAAA;AAAAA,MACrB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,UAAU,sBAAsB;AAAA,QAC/CD,+BAACE,cAAAA,iBAAc,UAAU,EAAE,QAAQ,MAAM,gBAAgB,EAAA,GAAM,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9E;;"}
+{"version":3,"file":"FairmintProvider.cjs","sources":["../../../src/components/FairmintProvider/FairmintProvider.tsx"],"sourcesContent":["import type { MantineColorScheme } from \"@mantine/core\";\nimport { MantineProvider } from \"@mantine/core\";\nimport { DatesProvider } from \"@mantine/dates\";\nimport { Notifications } from \"@mantine/notifications\";\nimport type { ReactNode } from \"react\";\nimport { fairmintCssVariables, theme } from \"../../theme\";\n\nexport interface FairmintProviderProps {\n  children: ReactNode;\n  /** Color scheme. When `light` or `dark`, Mantine is locked to this value. @default \"light\" */\n  colorScheme?: MantineColorScheme;\n  /**\n   * Notification position.\n   * @default \"top-right\"\n   */\n  notificationPosition?:\n    | \"top-left\"\n    | \"top-right\"\n    | \"top-center\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"bottom-center\";\n}\n\nexport function FairmintProvider({\n  children,\n  colorScheme = \"light\",\n  notificationPosition = \"top-right\",\n}: FairmintProviderProps) {\n  if (import.meta.env?.DEV) {\n    validateSetup();\n  }\n\n  const colorSchemeProps =\n    colorScheme === \"light\" || colorScheme === \"dark\"\n      ? { forceColorScheme: colorScheme }\n      : { defaultColorScheme: colorScheme };\n\n  return (\n    <MantineProvider\n      theme={theme}\n      cssVariablesResolver={fairmintCssVariables}\n      {...colorSchemeProps}\n    >\n      <Notifications position={notificationPosition} />\n      {/* weekendDays: [] disables Mantine's default red weekend-day styling — red is our\n          error/destructive semantic color elsewhere, so it reads as disabled/invalid here. */}\n      <DatesProvider settings={{ locale: \"en\", firstDayOfWeek: 0, weekendDays: [] }}>\n        {children}\n      </DatesProvider>\n    </MantineProvider>\n  );\n}\n\nfunction validateSetup() {\n  if (typeof window === \"undefined\") return;\n  if (\n    (typeof process !== \"undefined\" && process.env?.NODE_ENV === \"test\") ||\n    import.meta.env?.MODE === \"test\"\n  )\n    return;\n\n  requestIdleCallback(() => {\n    const root = document.documentElement;\n    const mantineCss = getComputedStyle(root).getPropertyValue(\"--mantine-color-scheme\");\n    if (!mantineCss) {\n      console.warn(\n        '[@fairmint/ui] Mantine CSS not detected. Make sure you import \"@fairmint/ui/styles.css\" in your entry file.',\n      );\n    }\n  });\n}\n"],"names":["jsxs","MantineProvider","theme","fairmintCssVariables","jsx","Notifications","DatesProvider"],"mappings":";;;;;;;AAwBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,cAAc;AAAA,EACd,uBAAuB;AACzB,GAA0B;AAKxB,QAAM,mBACJ,gBAAgB,WAAW,gBAAgB,SACvC,EAAE,kBAAkB,YAAA,IACpB,EAAE,oBAAoB,YAAA;AAE5B,SACEA,2BAAAA;AAAAA,IAACC,gBAAAA;AAAAA,IAAA;AAAA,MAAA,OACCC,MAAAA;AAAAA,MACA,sBAAsBC,MAAAA;AAAAA,MACrB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,UAAU,sBAAsB;AAAA,QAG/CD,2BAAAA,IAACE,cAAAA,eAAA,EAAc,UAAU,EAAE,QAAQ,MAAM,gBAAgB,GAAG,aAAa,CAAA,EAAC,GACvE,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/components/FairmintProvider/FairmintProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FairmintProvider.d.ts","sourceRoot":"","sources":["../../../src/components/FairmintProvider/FairmintProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,8FAA8F;IAC9F,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC;;;OAGG;IACH,oBAAoB,CAAC,EACjB,UAAU,GACV,WAAW,GACX,YAAY,GACZ,aAAa,GACb,cAAc,GACd,eAAe,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,WAAqB,EACrB,oBAAkC,GACnC,EAAE,qBAAqB,2CAoBvB"}
+{"version":3,"file":"FairmintProvider.d.ts","sourceRoot":"","sources":["../../../src/components/FairmintProvider/FairmintProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,8FAA8F;IAC9F,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC;;;OAGG;IACH,oBAAoB,CAAC,EACjB,UAAU,GACV,WAAW,GACX,YAAY,GACZ,aAAa,GACb,cAAc,GACd,eAAe,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,WAAqB,EACrB,oBAAkC,GACnC,EAAE,qBAAqB,2CAwBvB"}

package/dist/components/FairmintProvider/FairmintProvider.js

@@ -17,7 +17,7 @@ function FairmintProvider({
       ...colorSchemeProps,
       children: [
         /* @__PURE__ */ jsx(Notifications, { position: notificationPosition }),
-        /* @__PURE__ */ jsx(DatesProvider, { settings: { locale: "en", firstDayOfWeek: 0 }, children })
+        /* @__PURE__ */ jsx(DatesProvider, { settings: { locale: "en", firstDayOfWeek: 0, weekendDays: [] }, children })
       ]
     }
   );

package/dist/components/FairmintProvider/FairmintProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"FairmintProvider.js","sources":["../../../src/components/FairmintProvider/FairmintProvider.tsx"],"sourcesContent":["import type { MantineColorScheme } from \"@mantine/core\";\nimport { MantineProvider } from \"@mantine/core\";\nimport { DatesProvider } from \"@mantine/dates\";\nimport { Notifications } from \"@mantine/notifications\";\nimport type { ReactNode } from \"react\";\nimport { fairmintCssVariables, theme } from \"../../theme\";\n\nexport interface FairmintProviderProps {\n  children: ReactNode;\n  /** Color scheme. When `light` or `dark`, Mantine is locked to this value. @default \"light\" */\n  colorScheme?: MantineColorScheme;\n  /**\n   * Notification position.\n   * @default \"top-right\"\n   */\n  notificationPosition?:\n    | \"top-left\"\n    | \"top-right\"\n    | \"top-center\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"bottom-center\";\n}\n\nexport function FairmintProvider({\n  children,\n  colorScheme = \"light\",\n  notificationPosition = \"top-right\",\n}: FairmintProviderProps) {\n  if (import.meta.env?.DEV) {\n    validateSetup();\n  }\n\n  const colorSchemeProps =\n    colorScheme === \"light\" || colorScheme === \"dark\"\n      ? { forceColorScheme: colorScheme }\n      : { defaultColorScheme: colorScheme };\n\n  return (\n    <MantineProvider\n      theme={theme}\n      cssVariablesResolver={fairmintCssVariables}\n      {...colorSchemeProps}\n    >\n      <Notifications position={notificationPosition} />\n      <DatesProvider settings={{ locale: \"en\", firstDayOfWeek: 0 }}>{children}</DatesProvider>\n    </MantineProvider>\n  );\n}\n\nfunction validateSetup() {\n  if (typeof window === \"undefined\") return;\n  if (\n    (typeof process !== \"undefined\" && process.env?.NODE_ENV === \"test\") ||\n    import.meta.env?.MODE === \"test\"\n  )\n    return;\n\n  requestIdleCallback(() => {\n    const root = document.documentElement;\n    const mantineCss = getComputedStyle(root).getPropertyValue(\"--mantine-color-scheme\");\n    if (!mantineCss) {\n      console.warn(\n        '[@fairmint/ui] Mantine CSS not detected. Make sure you import \"@fairmint/ui/styles.css\" in your entry file.',\n      );\n    }\n  });\n}\n"],"names":[],"mappings":";;;;;AAwBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,cAAc;AAAA,EACd,uBAAuB;AACzB,GAA0B;AAKxB,QAAM,mBACJ,gBAAgB,WAAW,gBAAgB,SACvC,EAAE,kBAAkB,YAAA,IACpB,EAAE,oBAAoB,YAAA;AAE5B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,sBAAsB;AAAA,MACrB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,eAAA,EAAc,UAAU,sBAAsB;AAAA,QAC/C,oBAAC,iBAAc,UAAU,EAAE,QAAQ,MAAM,gBAAgB,EAAA,GAAM,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9E;"}
+{"version":3,"file":"FairmintProvider.js","sources":["../../../src/components/FairmintProvider/FairmintProvider.tsx"],"sourcesContent":["import type { MantineColorScheme } from \"@mantine/core\";\nimport { MantineProvider } from \"@mantine/core\";\nimport { DatesProvider } from \"@mantine/dates\";\nimport { Notifications } from \"@mantine/notifications\";\nimport type { ReactNode } from \"react\";\nimport { fairmintCssVariables, theme } from \"../../theme\";\n\nexport interface FairmintProviderProps {\n  children: ReactNode;\n  /** Color scheme. When `light` or `dark`, Mantine is locked to this value. @default \"light\" */\n  colorScheme?: MantineColorScheme;\n  /**\n   * Notification position.\n   * @default \"top-right\"\n   */\n  notificationPosition?:\n    | \"top-left\"\n    | \"top-right\"\n    | \"top-center\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"bottom-center\";\n}\n\nexport function FairmintProvider({\n  children,\n  colorScheme = \"light\",\n  notificationPosition = \"top-right\",\n}: FairmintProviderProps) {\n  if (import.meta.env?.DEV) {\n    validateSetup();\n  }\n\n  const colorSchemeProps =\n    colorScheme === \"light\" || colorScheme === \"dark\"\n      ? { forceColorScheme: colorScheme }\n      : { defaultColorScheme: colorScheme };\n\n  return (\n    <MantineProvider\n      theme={theme}\n      cssVariablesResolver={fairmintCssVariables}\n      {...colorSchemeProps}\n    >\n      <Notifications position={notificationPosition} />\n      {/* weekendDays: [] disables Mantine's default red weekend-day styling — red is our\n          error/destructive semantic color elsewhere, so it reads as disabled/invalid here. */}\n      <DatesProvider settings={{ locale: \"en\", firstDayOfWeek: 0, weekendDays: [] }}>\n        {children}\n      </DatesProvider>\n    </MantineProvider>\n  );\n}\n\nfunction validateSetup() {\n  if (typeof window === \"undefined\") return;\n  if (\n    (typeof process !== \"undefined\" && process.env?.NODE_ENV === \"test\") ||\n    import.meta.env?.MODE === \"test\"\n  )\n    return;\n\n  requestIdleCallback(() => {\n    const root = document.documentElement;\n    const mantineCss = getComputedStyle(root).getPropertyValue(\"--mantine-color-scheme\");\n    if (!mantineCss) {\n      console.warn(\n        '[@fairmint/ui] Mantine CSS not detected. Make sure you import \"@fairmint/ui/styles.css\" in your entry file.',\n      );\n    }\n  });\n}\n"],"names":[],"mappings":";;;;;AAwBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,cAAc;AAAA,EACd,uBAAuB;AACzB,GAA0B;AAKxB,QAAM,mBACJ,gBAAgB,WAAW,gBAAgB,SACvC,EAAE,kBAAkB,YAAA,IACpB,EAAE,oBAAoB,YAAA;AAE5B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,sBAAsB;AAAA,MACrB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,eAAA,EAAc,UAAU,sBAAsB;AAAA,QAG/C,oBAAC,eAAA,EAAc,UAAU,EAAE,QAAQ,MAAM,gBAAgB,GAAG,aAAa,CAAA,EAAC,GACvE,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/LoadingOverlay/LoadingOverlay.cjs

@@ -8,7 +8,7 @@ function LoadingOverlay({
   contained = false,
   zIndex = 1301,
   spinnerSize = 36,
-  backgroundColor = `${index.brandColors.indigo}33`,
+  backgroundColor = `color-mix(in srgb, ${index.fairmintVars.colorBrandPrimary} 20%, transparent)`,
   style
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/LoadingOverlay/LoadingOverlay.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingOverlay.cjs","sources":["../../../src/components/LoadingOverlay/LoadingOverlay.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { brandColors } from \"../../theme\";\nimport { LoadingSpinner } from \"../LoadingSpinner/LoadingSpinner\";\nimport { Box } from \"../primitives/layout\";\n\nexport interface LoadingOverlayProps {\n  contained?: boolean;\n  zIndex?: number;\n  spinnerSize?: number;\n  backgroundColor?: string;\n  style?: CSSProperties;\n}\n\nexport function LoadingOverlay({\n  contained = false,\n  zIndex = 1301,\n  spinnerSize = 36,\n  backgroundColor = `${brandColors.indigo}33`,\n  style,\n}: LoadingOverlayProps) {\n  return (\n    <Box\n      style={{\n        alignItems: \"center\",\n        backgroundColor,\n        display: \"flex\",\n        height: contained ? \"100%\" : \"100vh\",\n        justifyContent: \"center\",\n        left: 0,\n        position: contained ? \"absolute\" : \"fixed\",\n        top: 0,\n        width: contained ? \"100%\" : \"100vw\",\n        zIndex,\n        ...style,\n      }}\n    >\n      <LoadingSpinner size={spinnerSize} />\n    </Box>\n  );\n}\n"],"names":["brandColors","jsx","Box","LoadingSpinner"],"mappings":";;;;;;AAaO,SAAS,eAAe;AAAA,EAC7B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,kBAAkB,GAAGA,kBAAY,MAAM;AAAA,EACvC;AACF,GAAwB;AACtB,SACEC,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY;AAAA,QACZ;AAAA,QACA,SAAS;AAAA,QACT,QAAQ,YAAY,SAAS;AAAA,QAC7B,gBAAgB;AAAA,QAChB,MAAM;AAAA,QACN,UAAU,YAAY,aAAa;AAAA,QACnC,KAAK;AAAA,QACL,OAAO,YAAY,SAAS;AAAA,QAC5B;AAAA,QACA,GAAG;AAAA,MAAA;AAAA,MAGL,UAAAD,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,YAAA,CAAa;AAAA,IAAA;AAAA,EAAA;AAGzC;;"}
+{"version":3,"file":"LoadingOverlay.cjs","sources":["../../../src/components/LoadingOverlay/LoadingOverlay.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { fairmintVars } from \"../../theme\";\nimport { LoadingSpinner } from \"../LoadingSpinner/LoadingSpinner\";\nimport { Box } from \"../primitives/layout\";\n\nexport interface LoadingOverlayProps {\n  contained?: boolean;\n  zIndex?: number;\n  spinnerSize?: number;\n  backgroundColor?: string;\n  style?: CSSProperties;\n}\n\nexport function LoadingOverlay({\n  contained = false,\n  zIndex = 1301,\n  spinnerSize = 36,\n  backgroundColor = `color-mix(in srgb, ${fairmintVars.colorBrandPrimary} 20%, transparent)`,\n  style,\n}: LoadingOverlayProps) {\n  return (\n    <Box\n      style={{\n        alignItems: \"center\",\n        backgroundColor,\n        display: \"flex\",\n        height: contained ? \"100%\" : \"100vh\",\n        justifyContent: \"center\",\n        left: 0,\n        position: contained ? \"absolute\" : \"fixed\",\n        top: 0,\n        width: contained ? \"100%\" : \"100vw\",\n        zIndex,\n        ...style,\n      }}\n    >\n      <LoadingSpinner size={spinnerSize} />\n    </Box>\n  );\n}\n"],"names":["fairmintVars","jsx","Box","LoadingSpinner"],"mappings":";;;;;;AAaO,SAAS,eAAe;AAAA,EAC7B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,kBAAkB,sBAAsBA,mBAAa,iBAAiB;AAAA,EACtE;AACF,GAAwB;AACtB,SACEC,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY;AAAA,QACZ;AAAA,QACA,SAAS;AAAA,QACT,QAAQ,YAAY,SAAS;AAAA,QAC7B,gBAAgB;AAAA,QAChB,MAAM;AAAA,QACN,UAAU,YAAY,aAAa;AAAA,QACnC,KAAK;AAAA,QACL,OAAO,YAAY,SAAS;AAAA,QAC5B;AAAA,QACA,GAAG;AAAA,MAAA;AAAA,MAGL,UAAAD,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,YAAA,CAAa;AAAA,IAAA;AAAA,EAAA;AAGzC;;"}

package/dist/components/LoadingOverlay/LoadingOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingOverlay/LoadingOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3C,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAiB,EACjB,MAAa,EACb,WAAgB,EAChB,eAA2C,EAC3C,KAAK,GACN,EAAE,mBAAmB,2CAoBrB"}
+{"version":3,"file":"LoadingOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingOverlay/LoadingOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3C,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAiB,EACjB,MAAa,EACb,WAAgB,EAChB,eAA0F,EAC1F,KAAK,GACN,EAAE,mBAAmB,2CAoBrB"}

package/dist/components/LoadingOverlay/LoadingOverlay.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { brandColors } from "../../theme/index.js";
+import { fairmintVars } from "../../theme/index.js";
 import { LoadingSpinner } from "../LoadingSpinner/LoadingSpinner.js";
 import { Box } from "../primitives/layout.js";
 function LoadingOverlay({
   contained = false,
   zIndex = 1301,
   spinnerSize = 36,
-  backgroundColor = `${brandColors.indigo}33`,
+  backgroundColor = `color-mix(in srgb, ${fairmintVars.colorBrandPrimary} 20%, transparent)`,
   style
 }) {
   return /* @__PURE__ */ jsx(

package/dist/components/LoadingOverlay/LoadingOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingOverlay.js","sources":["../../../src/components/LoadingOverlay/LoadingOverlay.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { brandColors } from \"../../theme\";\nimport { LoadingSpinner } from \"../LoadingSpinner/LoadingSpinner\";\nimport { Box } from \"../primitives/layout\";\n\nexport interface LoadingOverlayProps {\n  contained?: boolean;\n  zIndex?: number;\n  spinnerSize?: number;\n  backgroundColor?: string;\n  style?: CSSProperties;\n}\n\nexport function LoadingOverlay({\n  contained = false,\n  zIndex = 1301,\n  spinnerSize = 36,\n  backgroundColor = `${brandColors.indigo}33`,\n  style,\n}: LoadingOverlayProps) {\n  return (\n    <Box\n      style={{\n        alignItems: \"center\",\n        backgroundColor,\n        display: \"flex\",\n        height: contained ? \"100%\" : \"100vh\",\n        justifyContent: \"center\",\n        left: 0,\n        position: contained ? \"absolute\" : \"fixed\",\n        top: 0,\n        width: contained ? \"100%\" : \"100vw\",\n        zIndex,\n        ...style,\n      }}\n    >\n      <LoadingSpinner size={spinnerSize} />\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;AAaO,SAAS,eAAe;AAAA,EAC7B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,kBAAkB,GAAG,YAAY,MAAM;AAAA,EACvC;AACF,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY;AAAA,QACZ;AAAA,QACA,SAAS;AAAA,QACT,QAAQ,YAAY,SAAS;AAAA,QAC7B,gBAAgB;AAAA,QAChB,MAAM;AAAA,QACN,UAAU,YAAY,aAAa;AAAA,QACnC,KAAK;AAAA,QACL,OAAO,YAAY,SAAS;AAAA,QAC5B;AAAA,QACA,GAAG;AAAA,MAAA;AAAA,MAGL,UAAA,oBAAC,gBAAA,EAAe,MAAM,YAAA,CAAa;AAAA,IAAA;AAAA,EAAA;AAGzC;"}
+{"version":3,"file":"LoadingOverlay.js","sources":["../../../src/components/LoadingOverlay/LoadingOverlay.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { fairmintVars } from \"../../theme\";\nimport { LoadingSpinner } from \"../LoadingSpinner/LoadingSpinner\";\nimport { Box } from \"../primitives/layout\";\n\nexport interface LoadingOverlayProps {\n  contained?: boolean;\n  zIndex?: number;\n  spinnerSize?: number;\n  backgroundColor?: string;\n  style?: CSSProperties;\n}\n\nexport function LoadingOverlay({\n  contained = false,\n  zIndex = 1301,\n  spinnerSize = 36,\n  backgroundColor = `color-mix(in srgb, ${fairmintVars.colorBrandPrimary} 20%, transparent)`,\n  style,\n}: LoadingOverlayProps) {\n  return (\n    <Box\n      style={{\n        alignItems: \"center\",\n        backgroundColor,\n        display: \"flex\",\n        height: contained ? \"100%\" : \"100vh\",\n        justifyContent: \"center\",\n        left: 0,\n        position: contained ? \"absolute\" : \"fixed\",\n        top: 0,\n        width: contained ? \"100%\" : \"100vw\",\n        zIndex,\n        ...style,\n      }}\n    >\n      <LoadingSpinner size={spinnerSize} />\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;AAaO,SAAS,eAAe;AAAA,EAC7B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,kBAAkB,sBAAsB,aAAa,iBAAiB;AAAA,EACtE;AACF,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY;AAAA,QACZ;AAAA,QACA,SAAS;AAAA,QACT,QAAQ,YAAY,SAAS;AAAA,QAC7B,gBAAgB;AAAA,QAChB,MAAM;AAAA,QACN,UAAU,YAAY,aAAa;AAAA,QACnC,KAAK;AAAA,QACL,OAAO,YAAY,SAAS;AAAA,QAC5B;AAAA,QACA,GAAG;AAAA,MAAA;AAAA,MAGL,UAAA,oBAAC,gBAAA,EAAe,MAAM,YAAA,CAAa;AAAA,IAAA;AAAA,EAAA;AAGzC;"}

package/dist/components/LoadingSpinner/LoadingSpinner.cjs

@@ -27,7 +27,7 @@ function LoadingSpinner({ size = 32 }) {
       "svg",
       {
         ...iconProps,
-        stroke: index.neutralColors[300],
+        stroke: index.fairmintVars.colorBorderDefault,
         style: { position: "absolute", inset: 0 },
         "aria-hidden": "true",
         children: paths
@@ -37,7 +37,7 @@ function LoadingSpinner({ size = 32 }) {
       "svg",
       {
         ...iconProps,
-        stroke: index.brandColors.indigo,
+        stroke: index.fairmintVars.colorBrandPrimary,
         style: { position: "absolute", inset: 0, animation: "fillUp 1.4s ease-in-out infinite" },
         "aria-hidden": "true",
         children: paths

package/dist/components/LoadingSpinner/LoadingSpinner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.cjs","sources":["../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import { brandColors, neutralColors } from \"../../theme\";\nimport { Box } from \"../primitives/layout\";\n\nexport interface LoadingSpinnerProps {\n  /** Icon size in pixels. @default 32 */\n  size?: number;\n}\n\n/**\n * Animated certificate icon that fills from bottom to top.\n * Requires the consumer to import `@fairmint/ui/styles.css` for the keyframe animation.\n */\nexport function LoadingSpinner({ size = 32 }: LoadingSpinnerProps) {\n  const iconProps = {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: size,\n    height: size,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    strokeWidth: 1.5,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n  };\n\n  const paths = (\n    <>\n      <path d=\"M15 15m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\" />\n      <path d=\"M13 17.5v4.5l2 -1.5l2 1.5v-4.5\" />\n      <path d=\"M10 19h-5a2 2 0 0 1 -2 -2v-10c0 -1.1 .9 -2 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-1\" />\n      <path d=\"M6 9h12\" />\n      <path d=\"M6 12h3\" />\n      <path d=\"M6 15h2\" />\n    </>\n  );\n\n  return (\n    <Box pos=\"relative\" style={{ width: size, height: size }} role=\"status\" aria-label=\"Loading\">\n      <svg\n        {...iconProps}\n        stroke={neutralColors[300]}\n        style={{ position: \"absolute\", inset: 0 }}\n        aria-hidden=\"true\"\n      >\n        {paths}\n      </svg>\n      <svg\n        {...iconProps}\n        stroke={brandColors.indigo}\n        style={{ position: \"absolute\", inset: 0, animation: \"fillUp 1.4s ease-in-out infinite\" }}\n        aria-hidden=\"true\"\n      >\n        {paths}\n      </svg>\n    </Box>\n  );\n}\n"],"names":["jsxs","Fragment","jsx","Box","neutralColors","brandColors"],"mappings":";;;;;AAYO,SAAS,eAAe,EAAE,OAAO,MAA2B;AACjE,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,aAAa;AAAA,IACb,eAAe;AAAA,IACf,gBAAgB;AAAA,EAAA;AAGlB,QAAM,QACJA,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,IAAAC,2BAAAA,IAAC,QAAA,EAAK,GAAE,2CAAA,CAA2C;AAAA,IACnDA,2BAAAA,IAAC,QAAA,EAAK,GAAE,iCAAA,CAAiC;AAAA,IACzCA,2BAAAA,IAAC,QAAA,EAAK,GAAE,wFAAA,CAAwF;AAAA,IAChGA,2BAAAA,IAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,IAClBA,2BAAAA,IAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,IAClBA,2BAAAA,IAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,EAAA,GACpB;AAGF,SACEF,2BAAAA,KAACG,OAAAA,KAAA,EAAI,KAAI,YAAW,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAA,GAAQ,MAAK,UAAS,cAAW,WACjF,UAAA;AAAA,IAAAD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,QAAQE,MAAAA,cAAc,GAAG;AAAA,QACzB,OAAO,EAAE,UAAU,YAAY,OAAO,EAAA;AAAA,QACtC,eAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,QAAQG,MAAAA,YAAY;AAAA,QACpB,OAAO,EAAE,UAAU,YAAY,OAAO,GAAG,WAAW,mCAAA;AAAA,QACpD,eAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;;"}
+{"version":3,"file":"LoadingSpinner.cjs","sources":["../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import { fairmintVars } from \"../../theme\";\nimport { Box } from \"../primitives/layout\";\n\nexport interface LoadingSpinnerProps {\n  /** Icon size in pixels. @default 32 */\n  size?: number;\n}\n\n/**\n * Animated certificate icon that fills from bottom to top.\n * Requires the consumer to import `@fairmint/ui/styles.css` for the keyframe animation.\n */\nexport function LoadingSpinner({ size = 32 }: LoadingSpinnerProps) {\n  const iconProps = {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: size,\n    height: size,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    strokeWidth: 1.5,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n  };\n\n  const paths = (\n    <>\n      <path d=\"M15 15m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\" />\n      <path d=\"M13 17.5v4.5l2 -1.5l2 1.5v-4.5\" />\n      <path d=\"M10 19h-5a2 2 0 0 1 -2 -2v-10c0 -1.1 .9 -2 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-1\" />\n      <path d=\"M6 9h12\" />\n      <path d=\"M6 12h3\" />\n      <path d=\"M6 15h2\" />\n    </>\n  );\n\n  return (\n    <Box pos=\"relative\" style={{ width: size, height: size }} role=\"status\" aria-label=\"Loading\">\n      <svg\n        {...iconProps}\n        stroke={fairmintVars.colorBorderDefault}\n        style={{ position: \"absolute\", inset: 0 }}\n        aria-hidden=\"true\"\n      >\n        {paths}\n      </svg>\n      <svg\n        {...iconProps}\n        stroke={fairmintVars.colorBrandPrimary}\n        style={{ position: \"absolute\", inset: 0, animation: \"fillUp 1.4s ease-in-out infinite\" }}\n        aria-hidden=\"true\"\n      >\n        {paths}\n      </svg>\n    </Box>\n  );\n}\n"],"names":["jsxs","Fragment","jsx","Box","fairmintVars"],"mappings":";;;;;AAYO,SAAS,eAAe,EAAE,OAAO,MAA2B;AACjE,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,aAAa;AAAA,IACb,eAAe;AAAA,IACf,gBAAgB;AAAA,EAAA;AAGlB,QAAM,QACJA,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,IAAAC,2BAAAA,IAAC,QAAA,EAAK,GAAE,2CAAA,CAA2C;AAAA,IACnDA,2BAAAA,IAAC,QAAA,EAAK,GAAE,iCAAA,CAAiC;AAAA,IACzCA,2BAAAA,IAAC,QAAA,EAAK,GAAE,wFAAA,CAAwF;AAAA,IAChGA,2BAAAA,IAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,IAClBA,2BAAAA,IAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,IAClBA,2BAAAA,IAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,EAAA,GACpB;AAGF,SACEF,2BAAAA,KAACG,OAAAA,KAAA,EAAI,KAAI,YAAW,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAA,GAAQ,MAAK,UAAS,cAAW,WACjF,UAAA;AAAA,IAAAD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,QAAQE,MAAAA,aAAa;AAAA,QACrB,OAAO,EAAE,UAAU,YAAY,OAAO,EAAA;AAAA,QACtC,eAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,QAAQE,MAAAA,aAAa;AAAA,QACrB,OAAO,EAAE,UAAU,YAAY,OAAO,GAAG,WAAW,mCAAA;AAAA,QACpD,eAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;;"}

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { neutralColors, brandColors } from "../../theme/index.js";
+import { fairmintVars } from "../../theme/index.js";
 import { Box } from "../primitives/layout.js";
 function LoadingSpinner({ size = 32 }) {
   const iconProps = {
@@ -25,7 +25,7 @@ function LoadingSpinner({ size = 32 }) {
       "svg",
       {
         ...iconProps,
-        stroke: neutralColors[300],
+        stroke: fairmintVars.colorBorderDefault,
         style: { position: "absolute", inset: 0 },
         "aria-hidden": "true",
         children: paths
@@ -35,7 +35,7 @@ function LoadingSpinner({ size = 32 }) {
       "svg",
       {
         ...iconProps,
-        stroke: brandColors.indigo,
+        stroke: fairmintVars.colorBrandPrimary,
         style: { position: "absolute", inset: 0, animation: "fillUp 1.4s ease-in-out infinite" },
         "aria-hidden": "true",
         children: paths

package/dist/components/LoadingSpinner/LoadingSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.js","sources":["../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import { brandColors, neutralColors } from \"../../theme\";\nimport { Box } from \"../primitives/layout\";\n\nexport interface LoadingSpinnerProps {\n  /** Icon size in pixels. @default 32 */\n  size?: number;\n}\n\n/**\n * Animated certificate icon that fills from bottom to top.\n * Requires the consumer to import `@fairmint/ui/styles.css` for the keyframe animation.\n */\nexport function LoadingSpinner({ size = 32 }: LoadingSpinnerProps) {\n  const iconProps = {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: size,\n    height: size,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    strokeWidth: 1.5,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n  };\n\n  const paths = (\n    <>\n      <path d=\"M15 15m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\" />\n      <path d=\"M13 17.5v4.5l2 -1.5l2 1.5v-4.5\" />\n      <path d=\"M10 19h-5a2 2 0 0 1 -2 -2v-10c0 -1.1 .9 -2 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-1\" />\n      <path d=\"M6 9h12\" />\n      <path d=\"M6 12h3\" />\n      <path d=\"M6 15h2\" />\n    </>\n  );\n\n  return (\n    <Box pos=\"relative\" style={{ width: size, height: size }} role=\"status\" aria-label=\"Loading\">\n      <svg\n        {...iconProps}\n        stroke={neutralColors[300]}\n        style={{ position: \"absolute\", inset: 0 }}\n        aria-hidden=\"true\"\n      >\n        {paths}\n      </svg>\n      <svg\n        {...iconProps}\n        stroke={brandColors.indigo}\n        style={{ position: \"absolute\", inset: 0, animation: \"fillUp 1.4s ease-in-out infinite\" }}\n        aria-hidden=\"true\"\n      >\n        {paths}\n      </svg>\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AAYO,SAAS,eAAe,EAAE,OAAO,MAA2B;AACjE,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,aAAa;AAAA,IACb,eAAe;AAAA,IACf,gBAAgB;AAAA,EAAA;AAGlB,QAAM,QACJ,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,GAAE,2CAAA,CAA2C;AAAA,IACnD,oBAAC,QAAA,EAAK,GAAE,iCAAA,CAAiC;AAAA,IACzC,oBAAC,QAAA,EAAK,GAAE,wFAAA,CAAwF;AAAA,IAChG,oBAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,IAClB,oBAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,IAClB,oBAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,EAAA,GACpB;AAGF,SACE,qBAAC,KAAA,EAAI,KAAI,YAAW,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAA,GAAQ,MAAK,UAAS,cAAW,WACjF,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,QAAQ,cAAc,GAAG;AAAA,QACzB,OAAO,EAAE,UAAU,YAAY,OAAO,EAAA;AAAA,QACtC,eAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,QAAQ,YAAY;AAAA,QACpB,OAAO,EAAE,UAAU,YAAY,OAAO,GAAG,WAAW,mCAAA;AAAA,QACpD,eAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
+{"version":3,"file":"LoadingSpinner.js","sources":["../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import { fairmintVars } from \"../../theme\";\nimport { Box } from \"../primitives/layout\";\n\nexport interface LoadingSpinnerProps {\n  /** Icon size in pixels. @default 32 */\n  size?: number;\n}\n\n/**\n * Animated certificate icon that fills from bottom to top.\n * Requires the consumer to import `@fairmint/ui/styles.css` for the keyframe animation.\n */\nexport function LoadingSpinner({ size = 32 }: LoadingSpinnerProps) {\n  const iconProps = {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: size,\n    height: size,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    strokeWidth: 1.5,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n  };\n\n  const paths = (\n    <>\n      <path d=\"M15 15m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\" />\n      <path d=\"M13 17.5v4.5l2 -1.5l2 1.5v-4.5\" />\n      <path d=\"M10 19h-5a2 2 0 0 1 -2 -2v-10c0 -1.1 .9 -2 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-1\" />\n      <path d=\"M6 9h12\" />\n      <path d=\"M6 12h3\" />\n      <path d=\"M6 15h2\" />\n    </>\n  );\n\n  return (\n    <Box pos=\"relative\" style={{ width: size, height: size }} role=\"status\" aria-label=\"Loading\">\n      <svg\n        {...iconProps}\n        stroke={fairmintVars.colorBorderDefault}\n        style={{ position: \"absolute\", inset: 0 }}\n        aria-hidden=\"true\"\n      >\n        {paths}\n      </svg>\n      <svg\n        {...iconProps}\n        stroke={fairmintVars.colorBrandPrimary}\n        style={{ position: \"absolute\", inset: 0, animation: \"fillUp 1.4s ease-in-out infinite\" }}\n        aria-hidden=\"true\"\n      >\n        {paths}\n      </svg>\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AAYO,SAAS,eAAe,EAAE,OAAO,MAA2B;AACjE,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,aAAa;AAAA,IACb,eAAe;AAAA,IACf,gBAAgB;AAAA,EAAA;AAGlB,QAAM,QACJ,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,GAAE,2CAAA,CAA2C;AAAA,IACnD,oBAAC,QAAA,EAAK,GAAE,iCAAA,CAAiC;AAAA,IACzC,oBAAC,QAAA,EAAK,GAAE,wFAAA,CAAwF;AAAA,IAChG,oBAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,IAClB,oBAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,IAClB,oBAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,EAAA,GACpB;AAGF,SACE,qBAAC,KAAA,EAAI,KAAI,YAAW,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAA,GAAQ,MAAK,UAAS,cAAW,WACjF,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,QAAQ,aAAa;AAAA,QACrB,OAAO,EAAE,UAAU,YAAY,OAAO,EAAA;AAAA,QACtC,eAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,QAAQ,aAAa;AAAA,QACrB,OAAO,EAAE,UAAU,YAAY,OAAO,GAAG,WAAW,mCAAA;AAAA,QACpD,eAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/components/form/SignatureNameField/SignatureNameField.cjs

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const TextInput = require("../../primitives/TextInput/TextInput.cjs");
+const SIGNATURE_FONT_STACK = '"Meddon", "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive';
+const SIGNATURE_FONT_HREF = "https://fonts.googleapis.com/css2?family=Meddon&subset=latin&display=swap";
+const SIGNATURE_FONT_MARKER = "data-signature-font";
+const SIGNATURE_FONT_MARKER_VALUE = "meddon";
+function useSignatureFont() {
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (document.head.querySelector(`link[${SIGNATURE_FONT_MARKER}="${SIGNATURE_FONT_MARKER_VALUE}"]`))
+      return;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = SIGNATURE_FONT_HREF;
+    link.setAttribute(SIGNATURE_FONT_MARKER, SIGNATURE_FONT_MARKER_VALUE);
+    document.head.appendChild(link);
+  }, []);
+}
+function SignatureNameField({
+  label,
+  placeholder,
+  error,
+  scale = "md",
+  ...rest
+}) {
+  useSignatureFont();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TextInput.TextInput,
+    {
+      type: "text",
+      label: label ?? "Type your full legal name to sign",
+      placeholder,
+      autoComplete: "name",
+      error,
+      size: scale,
+      radius: "md",
+      styles: {
+        input: {
+          fontFamily: SIGNATURE_FONT_STACK,
+          // Meddon ships only as a single normal-weight, non-italic face —
+          // requesting bold/italic here would trigger the browser's faux
+          // bold/oblique synthesis, which distorts a connected script font.
+          fontWeight: 400,
+          fontStyle: "normal",
+          letterSpacing: "-0.01em"
+        }
+      },
+      ...rest
+    }
+  );
+}
+exports.SignatureNameField = SignatureNameField;
+//# sourceMappingURL=SignatureNameField.cjs.map

package/dist/components/form/SignatureNameField/SignatureNameField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignatureNameField.cjs","sources":["../../../../src/components/form/SignatureNameField/SignatureNameField.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { TextInputProps } from \"../../primitives/TextInput/TextInput\";\nimport { TextInput } from \"../../primitives/TextInput/TextInput\";\n\nconst SIGNATURE_FONT_STACK =\n  '\"Meddon\", \"Snell Roundhand\", \"Apple Chancery\", \"Brush Script MT\", cursive';\nconst SIGNATURE_FONT_HREF =\n  \"https://fonts.googleapis.com/css2?family=Meddon&subset=latin&display=swap\";\n\n/**\n * Marker attribute used for de-duplication instead of a `link[href=\"<url>\"]`\n * selector — CSS attribute selectors are unreliable across jsdom/happy-dom\n * when the URL contains `:`, `;`, `@`, `&`, `+`.\n */\nconst SIGNATURE_FONT_MARKER = \"data-signature-font\";\nconst SIGNATURE_FONT_MARKER_VALUE = \"meddon\";\n\n/**\n * Lazily injects the Meddon stylesheet on mount instead of loading it\n * globally — it's only used by signature surfaces, not every route. Never\n * removed on unmount: the browser caches it, and removing the link would\n * force a re-fetch on remount.\n */\nfunction useSignatureFont(): void {\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    if (\n      document.head.querySelector(`link[${SIGNATURE_FONT_MARKER}=\"${SIGNATURE_FONT_MARKER_VALUE}\"]`)\n    )\n      return;\n    const link = document.createElement(\"link\");\n    link.rel = \"stylesheet\";\n    link.href = SIGNATURE_FONT_HREF;\n    link.setAttribute(SIGNATURE_FONT_MARKER, SIGNATURE_FONT_MARKER_VALUE);\n    document.head.appendChild(link);\n  }, []);\n}\n\nexport interface SignatureNameFieldProps extends Omit<TextInputProps, \"type\" | \"size\"> {\n  error?: string;\n  /**\n   * Maps directly to `TextInput`'s own `size` prop, so the field renders at\n   * exactly the same height/font-size as any other field of that size — the\n   * signature look comes from the typeface, not from an oversized box.\n   */\n  scale?: \"lg\" | \"md\";\n}\n\n/**\n * Typed-name e-signature input: a `TextInput` styled in a handwriting face so\n * the field reads as \"this is a signature,\" not a form field, while matching\n * the size/proportions of every other field on the page. Consumers own the\n * surrounding attestation copy, validation, and submit/commit action.\n */\nexport function SignatureNameField({\n  label,\n  placeholder,\n  error,\n  scale = \"md\",\n  ...rest\n}: SignatureNameFieldProps) {\n  useSignatureFont();\n  return (\n    <TextInput\n      type=\"text\"\n      label={label ?? \"Type your full legal name to sign\"}\n      placeholder={placeholder}\n      autoComplete=\"name\"\n      error={error}\n      size={scale}\n      radius=\"md\"\n      styles={{\n        input: {\n          fontFamily: SIGNATURE_FONT_STACK,\n          // Meddon ships only as a single normal-weight, non-italic face —\n          // requesting bold/italic here would trigger the browser's faux\n          // bold/oblique synthesis, which distorts a connected script font.\n          fontWeight: 400,\n          fontStyle: \"normal\",\n          letterSpacing: \"-0.01em\",\n        },\n      }}\n      {...rest}\n    />\n  );\n}\n"],"names":["useEffect","jsx","TextInput"],"mappings":";;;;;AAIA,MAAM,uBACJ;AACF,MAAM,sBACJ;AAOF,MAAM,wBAAwB;AAC9B,MAAM,8BAA8B;AAQpC,SAAS,mBAAyB;AAChCA,QAAAA,UAAU,MAAM;AACd,QAAI,OAAO,aAAa,YAAa;AACrC,QACE,SAAS,KAAK,cAAc,QAAQ,qBAAqB,KAAK,2BAA2B,IAAI;AAE7F;AACF,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,MAAM;AACX,SAAK,OAAO;AACZ,SAAK,aAAa,uBAAuB,2BAA2B;AACpE,aAAS,KAAK,YAAY,IAAI;AAAA,EAChC,GAAG,CAAA,CAAE;AACP;AAkBO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAA4B;AAC1B,mBAAA;AACA,SACEC,2BAAAA;AAAAA,IAACC,UAAAA;AAAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAO,SAAS;AAAA,MAChB;AAAA,MACA,cAAa;AAAA,MACb;AAAA,MACA,MAAM;AAAA,MACN,QAAO;AAAA,MACP,QAAQ;AAAA,QACN,OAAO;AAAA,UACL,YAAY;AAAA;AAAA;AAAA;AAAA,UAIZ,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,eAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;;"}

package/dist/components/form/SignatureNameField/SignatureNameField.d.ts

@@ -0,0 +1,18 @@
+import { TextInputProps } from '../../primitives/TextInput/TextInput';
+export interface SignatureNameFieldProps extends Omit<TextInputProps, "type" | "size"> {
+    error?: string;
+    /**
+     * Maps directly to `TextInput`'s own `size` prop, so the field renders at
+     * exactly the same height/font-size as any other field of that size — the
+     * signature look comes from the typeface, not from an oversized box.
+     */
+    scale?: "lg" | "md";
+}
+/**
+ * Typed-name e-signature input: a `TextInput` styled in a handwriting face so
+ * the field reads as "this is a signature," not a form field, while matching
+ * the size/proportions of every other field on the page. Consumers own the
+ * surrounding attestation copy, validation, and submit/commit action.
+ */
+export declare function SignatureNameField({ label, placeholder, error, scale, ...rest }: SignatureNameFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SignatureNameField.d.ts.map

package/dist/components/form/SignatureNameField/SignatureNameField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignatureNameField.d.ts","sourceRoot":"","sources":["../../../../src/components/form/SignatureNameField/SignatureNameField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAqC3E,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAY,EACZ,GAAG,IAAI,EACR,EAAE,uBAAuB,2CAyBzB"}

package/dist/components/form/SignatureNameField/SignatureNameField.js

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { TextInput } from "../../primitives/TextInput/TextInput.js";
+const SIGNATURE_FONT_STACK = '"Meddon", "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive';
+const SIGNATURE_FONT_HREF = "https://fonts.googleapis.com/css2?family=Meddon&subset=latin&display=swap";
+const SIGNATURE_FONT_MARKER = "data-signature-font";
+const SIGNATURE_FONT_MARKER_VALUE = "meddon";
+function useSignatureFont() {
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (document.head.querySelector(`link[${SIGNATURE_FONT_MARKER}="${SIGNATURE_FONT_MARKER_VALUE}"]`))
+      return;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = SIGNATURE_FONT_HREF;
+    link.setAttribute(SIGNATURE_FONT_MARKER, SIGNATURE_FONT_MARKER_VALUE);
+    document.head.appendChild(link);
+  }, []);
+}
+function SignatureNameField({
+  label,
+  placeholder,
+  error,
+  scale = "md",
+  ...rest
+}) {
+  useSignatureFont();
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      type: "text",
+      label: label ?? "Type your full legal name to sign",
+      placeholder,
+      autoComplete: "name",
+      error,
+      size: scale,
+      radius: "md",
+      styles: {
+        input: {
+          fontFamily: SIGNATURE_FONT_STACK,
+          // Meddon ships only as a single normal-weight, non-italic face —
+          // requesting bold/italic here would trigger the browser's faux
+          // bold/oblique synthesis, which distorts a connected script font.
+          fontWeight: 400,
+          fontStyle: "normal",
+          letterSpacing: "-0.01em"
+        }
+      },
+      ...rest
+    }
+  );
+}
+export {
+  SignatureNameField
+};
+//# sourceMappingURL=SignatureNameField.js.map

package/dist/components/form/SignatureNameField/SignatureNameField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignatureNameField.js","sources":["../../../../src/components/form/SignatureNameField/SignatureNameField.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { TextInputProps } from \"../../primitives/TextInput/TextInput\";\nimport { TextInput } from \"../../primitives/TextInput/TextInput\";\n\nconst SIGNATURE_FONT_STACK =\n  '\"Meddon\", \"Snell Roundhand\", \"Apple Chancery\", \"Brush Script MT\", cursive';\nconst SIGNATURE_FONT_HREF =\n  \"https://fonts.googleapis.com/css2?family=Meddon&subset=latin&display=swap\";\n\n/**\n * Marker attribute used for de-duplication instead of a `link[href=\"<url>\"]`\n * selector — CSS attribute selectors are unreliable across jsdom/happy-dom\n * when the URL contains `:`, `;`, `@`, `&`, `+`.\n */\nconst SIGNATURE_FONT_MARKER = \"data-signature-font\";\nconst SIGNATURE_FONT_MARKER_VALUE = \"meddon\";\n\n/**\n * Lazily injects the Meddon stylesheet on mount instead of loading it\n * globally — it's only used by signature surfaces, not every route. Never\n * removed on unmount: the browser caches it, and removing the link would\n * force a re-fetch on remount.\n */\nfunction useSignatureFont(): void {\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    if (\n      document.head.querySelector(`link[${SIGNATURE_FONT_MARKER}=\"${SIGNATURE_FONT_MARKER_VALUE}\"]`)\n    )\n      return;\n    const link = document.createElement(\"link\");\n    link.rel = \"stylesheet\";\n    link.href = SIGNATURE_FONT_HREF;\n    link.setAttribute(SIGNATURE_FONT_MARKER, SIGNATURE_FONT_MARKER_VALUE);\n    document.head.appendChild(link);\n  }, []);\n}\n\nexport interface SignatureNameFieldProps extends Omit<TextInputProps, \"type\" | \"size\"> {\n  error?: string;\n  /**\n   * Maps directly to `TextInput`'s own `size` prop, so the field renders at\n   * exactly the same height/font-size as any other field of that size — the\n   * signature look comes from the typeface, not from an oversized box.\n   */\n  scale?: \"lg\" | \"md\";\n}\n\n/**\n * Typed-name e-signature input: a `TextInput` styled in a handwriting face so\n * the field reads as \"this is a signature,\" not a form field, while matching\n * the size/proportions of every other field on the page. Consumers own the\n * surrounding attestation copy, validation, and submit/commit action.\n */\nexport function SignatureNameField({\n  label,\n  placeholder,\n  error,\n  scale = \"md\",\n  ...rest\n}: SignatureNameFieldProps) {\n  useSignatureFont();\n  return (\n    <TextInput\n      type=\"text\"\n      label={label ?? \"Type your full legal name to sign\"}\n      placeholder={placeholder}\n      autoComplete=\"name\"\n      error={error}\n      size={scale}\n      radius=\"md\"\n      styles={{\n        input: {\n          fontFamily: SIGNATURE_FONT_STACK,\n          // Meddon ships only as a single normal-weight, non-italic face —\n          // requesting bold/italic here would trigger the browser's faux\n          // bold/oblique synthesis, which distorts a connected script font.\n          fontWeight: 400,\n          fontStyle: \"normal\",\n          letterSpacing: \"-0.01em\",\n        },\n      }}\n      {...rest}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAIA,MAAM,uBACJ;AACF,MAAM,sBACJ;AAOF,MAAM,wBAAwB;AAC9B,MAAM,8BAA8B;AAQpC,SAAS,mBAAyB;AAChC,YAAU,MAAM;AACd,QAAI,OAAO,aAAa,YAAa;AACrC,QACE,SAAS,KAAK,cAAc,QAAQ,qBAAqB,KAAK,2BAA2B,IAAI;AAE7F;AACF,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,MAAM;AACX,SAAK,OAAO;AACZ,SAAK,aAAa,uBAAuB,2BAA2B;AACpE,aAAS,KAAK,YAAY,IAAI;AAAA,EAChC,GAAG,CAAA,CAAE;AACP;AAkBO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAA4B;AAC1B,mBAAA;AACA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAO,SAAS;AAAA,MAChB;AAAA,MACA,cAAa;AAAA,MACb;AAAA,MACA,MAAM;AAAA,MACN,QAAO;AAAA,MACP,QAAQ;AAAA,QACN,OAAO;AAAA,UACL,YAAY;AAAA;AAAA;AAAA;AAAA,UAIZ,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,eAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/generic/Banner/Banner.cjs

@@ -19,6 +19,38 @@ const TONE_COLORS = {
   warning: colors.colors.warning,
   error: colors.colors.error
 };
+const TONE_TOKENS = {
+  brand: {
+    background: index.fairmintVars.colorBgBrandSubtle,
+    border: index.fairmintVars.colorBorderFocus,
+    icon: index.fairmintVars.colorBrandPrimary
+  },
+  neutral: {
+    background: index.fairmintVars.colorBgSurfaceSecondary,
+    border: index.fairmintVars.colorBorderDefault,
+    icon: index.fairmintVars.colorIconSecondary
+  },
+  info: {
+    background: index.fairmintVars.colorInfoBg,
+    border: index.fairmintVars.colorInfoBorder,
+    icon: index.fairmintVars.colorInfoText
+  },
+  success: {
+    background: index.fairmintVars.colorSuccessBg,
+    border: index.fairmintVars.colorSuccessBorder,
+    icon: index.fairmintVars.colorSuccessText
+  },
+  warning: {
+    background: index.fairmintVars.colorWarningBg,
+    border: index.fairmintVars.colorWarningBorder,
+    icon: index.fairmintVars.colorWarningText
+  },
+  error: {
+    background: index.fairmintVars.colorErrorBg,
+    border: index.fairmintVars.colorErrorBorder,
+    icon: index.fairmintVars.colorErrorText
+  }
+};
 const DefaultStatusIcon = ({ tone }) => {
   const commonProps = {
     width: 20,
@@ -62,25 +94,24 @@ const DefaultStatusIcon = ({ tone }) => {
   ] });
 };
 const surfaceProps = (tone, presentation) => {
-  const color = TONE_COLORS[tone];
+  const tokens = TONE_TOKENS[tone];
   if (presentation === "page-level") {
     return {
-      bg: `${color}.1`,
       style: {
+        backgroundColor: tokens.background,
         borderRadius: 0
       }
     };
   }
-  const borderShade = tone === "brand" ? 1 : tone === "neutral" ? 3 : 2;
   return {
-    bg: `${color}.0`,
-    bd: `1px solid ${color}.${borderShade}`,
     style: {
+      backgroundColor: tokens.background,
+      border: `1px solid ${tokens.border}`,
       borderRadius: index.radii.lg
     }
   };
 };
-const titleColor = () => index.neutralColors[900];
+const titleColor = () => index.fairmintVars.colorTextPrimary;
 const actionVariant = (tone, isSecondary) => {
   if (isSecondary) return "outline";
   if (tone === "brand") return "light";
@@ -139,7 +170,7 @@ const getBannerLayout = ({
 };
 const descriptionTextProps = {
   size: "sm",
-  c: index.neutralColors[500],
+  c: index.fairmintVars.colorTextSecondary,
   style: { lineHeight: 1.4 }
 };
 function BannerDescription({ children }) {
@@ -149,7 +180,7 @@ function BannerDescription({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     layout.Box,
     {
-      c: index.neutralColors[500],
+      c: index.fairmintVars.colorTextSecondary,
       style: {
         fontSize: fontSizes.fontSizes.sm,
         lineHeight: 1.4
@@ -173,6 +204,7 @@ function Banner({
   tone = "brand"
 }) {
   const color = TONE_COLORS[tone];
+  const tokens = TONE_TOKENS[tone];
   const iconNode = icon === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(DefaultStatusIcon, { tone }) : icon;
   const resolvedActions = actions ?? (action === void 0 ? [] : [action]);
   const resolvedRole = role ?? (tone === "error" ? "alert" : "status");
@@ -194,8 +226,6 @@ function Banner({
       role: resolvedRole,
       px: "md",
       py: "md",
-      bg: surface.bg,
-      bd: "bd" in surface ? surface.bd : void 0,
       style: {
         boxSizing: "border-box",
         width: "100%",
@@ -217,7 +247,12 @@ function Banner({
             radius: "sm",
             size: 40,
             variant: "light",
-            style: { gridArea: "icon", alignSelf: "center" },
+            style: {
+              backgroundColor: tokens.background,
+              color: tokens.icon,
+              gridArea: "icon",
+              alignSelf: "center"
+            },
             children: iconNode
           }
         ),