@fairmint/ui 0.3.10 → 0.3.12

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/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
           }
         ),

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fontSizes, neutralColors, radii, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\nexport type BannerPresentation = \"inline\" | \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" | \"color\" | \"variant\"> {\n  /** Visible action label. */\n  label: ReactNode;\n}\n\nexport type BannerActions =\n  | readonly [BannerActionProps]\n  | readonly [BannerActionProps, BannerActionProps];\n\nexport interface BannerProps {\n  /** Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. */\n  title?: ReactNode;\n  /** Supporting context. Omit for a title-only banner. */\n  description?: ReactNode;\n  /** Semantic meaning and visual treatment. @default \"brand\" */\n  tone?: BannerTone;\n  /** Inline content callout or full-width page-edge treatment. @default \"inline\" */\n  presentation?: BannerPresentation;\n  /** Icon shown in the 40px semantic tile. Pass `null` to hide the tile. */\n  icon?: ReactNode | null;\n  /** Optional badge label displayed beside the title. */\n  badgeLabel?: ReactNode;\n  /** Optional standardized CTA. */\n  action?: BannerActionProps;\n  /** Up to two CTAs in visual order: secondary first, primary last. */\n  actions?: BannerActions;\n  /** Override the default accessible role. Error defaults to alert; other tones use status. */\n  role?: AriaRole;\n  /** Accessible label for the banner region. Defaults to the string title when possible. */\n  ariaLabel?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n  brand: colors.primary,\n  neutral: colors.neutral,\n  info: colors.info,\n  success: colors.success,\n  warning: colors.warning,\n  error: colors.error,\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n  const commonProps = {\n    width: 20,\n    height: 20,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 1.75,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n    \"aria-hidden\": true,\n  };\n\n  if (tone === \"success\") {\n    return (\n      <svg {...commonProps}>\n        <title>Success</title>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n      </svg>\n    );\n  }\n\n  if (tone === \"warning\") {\n    return (\n      <svg {...commonProps}>\n        <title>Warning</title>\n        <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </svg>\n    );\n  }\n\n  if (tone === \"error\") {\n    return (\n      <svg {...commonProps}>\n        <title>Error</title>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"m9 9 6 6\" />\n        <path d=\"m15 9-6 6\" />\n      </svg>\n    );\n  }\n\n  return (\n    <svg {...commonProps}>\n      <title>Information</title>\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 11v5\" />\n      <path d=\"M12 8h.01\" />\n    </svg>\n  );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n  const color = TONE_COLORS[tone];\n\n  if (presentation === \"page-level\") {\n    return {\n      bg: `${color}.1`,\n      style: {\n        borderRadius: 0,\n      } satisfies CSSProperties,\n    };\n  }\n\n  // Chip Banner: tinted surface + semantic border (error border = error.2)\n  const borderShade = tone === \"brand\" ? 1 : tone === \"neutral\" ? 3 : 2;\n\n  return {\n    bg: `${color}.0`,\n    bd: `1px solid ${color}.${borderShade}`,\n    style: {\n      borderRadius: radii.lg,\n    } satisfies CSSProperties,\n  };\n};\n\n/** Titles always use dark primary text for WCAG AA contrast, inline or page-level. */\nconst titleColor = () => neutralColors[900];\n\nconst actionVariant = (tone: BannerTone, isSecondary: boolean): ButtonProps[\"variant\"] => {\n  if (isSecondary) return \"outline\";\n  if (tone === \"brand\") return \"light\";\n  if (tone === \"neutral\") return \"outline\";\n  return \"filled\";\n};\n\ninterface BannerLayoutOptions {\n  hasIcon: boolean;\n  hasTitle: boolean;\n  hasDescription: boolean;\n  hasActions: boolean;\n}\n\nconst getBannerLayout = ({\n  hasActions,\n  hasDescription,\n  hasIcon,\n  hasTitle,\n}: BannerLayoutOptions) => {\n  const mobileColumns = hasIcon ? \"40px minmax(0, 1fr)\" : \"minmax(0, 1fr)\";\n  const desktopContentColumns = hasIcon ? [\"40px\"] : [];\n\n  if (hasTitle || hasDescription) {\n    desktopContentColumns.push(\"minmax(0, 1fr)\");\n  }\n\n  if (hasActions) {\n    desktopContentColumns.push(\"auto\");\n  }\n\n  const mobileRows: string[] = [];\n  if (hasIcon && hasTitle) mobileRows.push('\"icon title\"');\n  else if (hasIcon) mobileRows.push('\"icon icon\"');\n  else if (hasTitle) mobileRows.push('\"title\"');\n\n  if (hasDescription) mobileRows.push(hasIcon ? '\"description description\"' : '\"description\"');\n  if (hasActions) mobileRows.push(hasIcon ? '\"actions actions\"' : '\"actions\"');\n\n  const desktopRows: string[] = [];\n  const actionCell = hasActions ? \" actions\" : \"\";\n  if (hasIcon && hasTitle && hasDescription) {\n    desktopRows.push(`\"icon title${actionCell}\"`, `\"icon description${actionCell}\"`);\n  } else if (hasIcon && hasTitle) {\n    desktopRows.push(`\"icon title${actionCell}\"`);\n  } else if (hasIcon && hasDescription) {\n    desktopRows.push(`\"icon description${actionCell}\"`);\n  } else if (hasIcon) {\n    desktopRows.push(`\"icon${hasActions ? \" actions\" : \"\"}\"`);\n  } else if (hasTitle && hasDescription) {\n    desktopRows.push(`\"title${actionCell}\"`, `\"description${actionCell}\"`);\n  } else if (hasTitle) {\n    desktopRows.push(`\"title${actionCell}\"`);\n  } else if (hasDescription) {\n    desktopRows.push(`\"description${actionCell}\"`);\n  } else if (hasActions) {\n    desktopRows.push('\"actions\"');\n  }\n\n  return {\n    gridTemplateAreas: {\n      base: mobileRows.join(\" \"),\n      sm: desktopRows.join(\" \"),\n    },\n    gridTemplateColumns: {\n      base: mobileColumns,\n      sm: desktopContentColumns.join(\" \") || \"auto\",\n    },\n  };\n};\n\nconst descriptionTextProps = {\n  size: \"sm\" as const,\n  c: neutralColors[500],\n  style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return <Text {...descriptionTextProps}>{children}</Text>;\n  }\n\n  return (\n    <Box\n      c={neutralColors[500]}\n      style={{\n        fontSize: fontSizes.sm,\n        lineHeight: 1.4,\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n  action,\n  ariaLabel,\n  badgeLabel,\n  className,\n  description,\n  icon,\n  actions,\n  presentation = \"inline\",\n  role,\n  style,\n  title,\n  tone = \"brand\",\n}: BannerProps) {\n  const color = TONE_COLORS[tone];\n  const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n  const resolvedActions = actions ?? (action === undefined ? [] : [action]);\n  const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n  const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n  const surface = surfaceProps(tone, presentation);\n  const layout = getBannerLayout({\n    hasActions: resolvedActions.length > 0,\n    hasDescription: description !== undefined,\n    hasIcon: iconNode !== null,\n    hasTitle: title !== undefined || badgeLabel !== undefined,\n  });\n\n  return (\n    <Box\n      aria-label={resolvedAriaLabel}\n      className={className}\n      data-presentation={presentation}\n      data-tone={tone}\n      role={resolvedRole}\n      px=\"md\"\n      py=\"md\"\n      bg={surface.bg}\n      bd={\"bd\" in surface ? surface.bd : undefined}\n      style={{\n        boxSizing: \"border-box\",\n        width: \"100%\",\n        ...surface.style,\n        ...style,\n      }}\n      sx={{\n        display: \"grid\",\n        columnGap: spacing.sm,\n        rowGap: spacing.xs,\n        ...layout,\n      }}\n    >\n      {iconNode !== null && (\n        <ThemeIcon\n          aria-hidden\n          color={color}\n          radius=\"sm\"\n          size={40}\n          variant=\"light\"\n          style={{ gridArea: \"icon\", alignSelf: \"center\" }}\n        >\n          {iconNode}\n        </ThemeIcon>\n      )}\n\n      {(title !== undefined || badgeLabel !== undefined) && (\n        <Group\n          align=\"center\"\n          gap=\"xs\"\n          wrap=\"wrap\"\n          style={{ gridArea: \"title\", minWidth: 0, overflowWrap: \"anywhere\" }}\n        >\n          {title !== undefined && (\n            <Text\n              fw={600}\n              size=\"md\"\n              c={titleColor()}\n              style={{ lineHeight: 1.35, minWidth: 0, overflowWrap: \"anywhere\" }}\n            >\n              {title}\n            </Text>\n          )}\n          {badgeLabel !== undefined && (\n            <Badge color={color} size=\"sm\" variant=\"light\">\n              {badgeLabel}\n            </Badge>\n          )}\n        </Group>\n      )}\n\n      {description !== undefined && (\n        <Box style={{ gridArea: \"description\", minWidth: 0, overflowWrap: \"anywhere\" }}>\n          <BannerDescription>{description}</BannerDescription>\n        </Box>\n      )}\n\n      {resolvedActions.length > 0 && (\n        <Box\n          sx={{\n            display: \"flex\",\n            flexDirection: { base: \"column\", sm: \"row\" },\n            alignItems: \"stretch\",\n            justifyContent: \"flex-end\",\n            gap: spacing.xs,\n            minWidth: 0,\n            width: { base: \"100%\", sm: \"max-content\" },\n            maxWidth: \"100%\",\n          }}\n          style={{ gridArea: \"actions\", alignSelf: \"center\", justifySelf: \"end\" }}\n        >\n          {resolvedActions.map(({ label, ...buttonProps }, index) => (\n            <Button\n              key={buttonProps.id ?? (typeof label === \"string\" ? label : `banner-action-${index}`)}\n              {...buttonProps}\n              color={color}\n              variant={actionVariant(tone, index < resolvedActions.length - 1)}\n              style={{\n                ...buttonProps.style,\n                boxSizing: \"border-box\",\n                flex: \"0 1 auto\",\n                minHeight: 44,\n                maxWidth: \"100%\",\n                overflowWrap: \"anywhere\",\n                whiteSpace: \"normal\",\n                width: \"100%\",\n              }}\n            >\n              {label}\n            </Button>\n          ))}\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":["colors","jsxs","jsx","radii","neutralColors","Text","Box","fontSizes","layout","spacing","ThemeIcon","Group","Badge","index","Button"],"mappings":"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"}
+{"version":3,"file":"Banner.cjs","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, fontSizes, radii, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\nexport type BannerPresentation = \"inline\" | \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" | \"color\" | \"variant\"> {\n  /** Visible action label. */\n  label: ReactNode;\n}\n\nexport type BannerActions =\n  | readonly [BannerActionProps]\n  | readonly [BannerActionProps, BannerActionProps];\n\nexport interface BannerProps {\n  /** Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. */\n  title?: ReactNode;\n  /** Supporting context. Omit for a title-only banner. */\n  description?: ReactNode;\n  /** Semantic meaning and visual treatment. @default \"brand\" */\n  tone?: BannerTone;\n  /** Inline content callout or full-width page-edge treatment. @default \"inline\" */\n  presentation?: BannerPresentation;\n  /** Icon shown in the 40px semantic tile. Pass `null` to hide the tile. */\n  icon?: ReactNode | null;\n  /** Optional badge label displayed beside the title. */\n  badgeLabel?: ReactNode;\n  /** Optional standardized CTA. */\n  action?: BannerActionProps;\n  /** Up to two CTAs in visual order: secondary first, primary last. */\n  actions?: BannerActions;\n  /** Override the default accessible role. Error defaults to alert; other tones use status. */\n  role?: AriaRole;\n  /** Accessible label for the banner region. Defaults to the string title when possible. */\n  ariaLabel?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n  brand: colors.primary,\n  neutral: colors.neutral,\n  info: colors.info,\n  success: colors.success,\n  warning: colors.warning,\n  error: colors.error,\n} as const;\n\nconst TONE_TOKENS = {\n  brand: {\n    background: fairmintVars.colorBgBrandSubtle,\n    border: fairmintVars.colorBorderFocus,\n    icon: fairmintVars.colorBrandPrimary,\n  },\n  neutral: {\n    background: fairmintVars.colorBgSurfaceSecondary,\n    border: fairmintVars.colorBorderDefault,\n    icon: fairmintVars.colorIconSecondary,\n  },\n  info: {\n    background: fairmintVars.colorInfoBg,\n    border: fairmintVars.colorInfoBorder,\n    icon: fairmintVars.colorInfoText,\n  },\n  success: {\n    background: fairmintVars.colorSuccessBg,\n    border: fairmintVars.colorSuccessBorder,\n    icon: fairmintVars.colorSuccessText,\n  },\n  warning: {\n    background: fairmintVars.colorWarningBg,\n    border: fairmintVars.colorWarningBorder,\n    icon: fairmintVars.colorWarningText,\n  },\n  error: {\n    background: fairmintVars.colorErrorBg,\n    border: fairmintVars.colorErrorBorder,\n    icon: fairmintVars.colorErrorText,\n  },\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n  const commonProps = {\n    width: 20,\n    height: 20,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 1.75,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n    \"aria-hidden\": true,\n  };\n\n  if (tone === \"success\") {\n    return (\n      <svg {...commonProps}>\n        <title>Success</title>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n      </svg>\n    );\n  }\n\n  if (tone === \"warning\") {\n    return (\n      <svg {...commonProps}>\n        <title>Warning</title>\n        <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </svg>\n    );\n  }\n\n  if (tone === \"error\") {\n    return (\n      <svg {...commonProps}>\n        <title>Error</title>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"m9 9 6 6\" />\n        <path d=\"m15 9-6 6\" />\n      </svg>\n    );\n  }\n\n  return (\n    <svg {...commonProps}>\n      <title>Information</title>\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 11v5\" />\n      <path d=\"M12 8h.01\" />\n    </svg>\n  );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n  const tokens = TONE_TOKENS[tone];\n\n  if (presentation === \"page-level\") {\n    return {\n      style: {\n        backgroundColor: tokens.background,\n        borderRadius: 0,\n      } satisfies CSSProperties,\n    };\n  }\n\n  return {\n    style: {\n      backgroundColor: tokens.background,\n      border: `1px solid ${tokens.border}`,\n      borderRadius: radii.lg,\n    } satisfies CSSProperties,\n  };\n};\n\n/**\n * Banner titles always use primary text color regardless of tone or\n * presentation — tinted semantic shades are reserved for the fill/border/icon,\n * keeping title contrast consistent (and WCAG AA) across color schemes.\n */\nconst titleColor = () => fairmintVars.colorTextPrimary;\n\nconst actionVariant = (tone: BannerTone, isSecondary: boolean): ButtonProps[\"variant\"] => {\n  if (isSecondary) return \"outline\";\n  if (tone === \"brand\") return \"light\";\n  if (tone === \"neutral\") return \"outline\";\n  return \"filled\";\n};\n\ninterface BannerLayoutOptions {\n  hasIcon: boolean;\n  hasTitle: boolean;\n  hasDescription: boolean;\n  hasActions: boolean;\n}\n\nconst getBannerLayout = ({\n  hasActions,\n  hasDescription,\n  hasIcon,\n  hasTitle,\n}: BannerLayoutOptions) => {\n  const mobileColumns = hasIcon ? \"40px minmax(0, 1fr)\" : \"minmax(0, 1fr)\";\n  const desktopContentColumns = hasIcon ? [\"40px\"] : [];\n\n  if (hasTitle || hasDescription) {\n    desktopContentColumns.push(\"minmax(0, 1fr)\");\n  }\n\n  if (hasActions) {\n    desktopContentColumns.push(\"auto\");\n  }\n\n  const mobileRows: string[] = [];\n  if (hasIcon && hasTitle) mobileRows.push('\"icon title\"');\n  else if (hasIcon) mobileRows.push('\"icon icon\"');\n  else if (hasTitle) mobileRows.push('\"title\"');\n\n  if (hasDescription) mobileRows.push(hasIcon ? '\"description description\"' : '\"description\"');\n  if (hasActions) mobileRows.push(hasIcon ? '\"actions actions\"' : '\"actions\"');\n\n  const desktopRows: string[] = [];\n  const actionCell = hasActions ? \" actions\" : \"\";\n  if (hasIcon && hasTitle && hasDescription) {\n    desktopRows.push(`\"icon title${actionCell}\"`, `\"icon description${actionCell}\"`);\n  } else if (hasIcon && hasTitle) {\n    desktopRows.push(`\"icon title${actionCell}\"`);\n  } else if (hasIcon && hasDescription) {\n    desktopRows.push(`\"icon description${actionCell}\"`);\n  } else if (hasIcon) {\n    desktopRows.push(`\"icon${hasActions ? \" actions\" : \"\"}\"`);\n  } else if (hasTitle && hasDescription) {\n    desktopRows.push(`\"title${actionCell}\"`, `\"description${actionCell}\"`);\n  } else if (hasTitle) {\n    desktopRows.push(`\"title${actionCell}\"`);\n  } else if (hasDescription) {\n    desktopRows.push(`\"description${actionCell}\"`);\n  } else if (hasActions) {\n    desktopRows.push('\"actions\"');\n  }\n\n  return {\n    gridTemplateAreas: {\n      base: mobileRows.join(\" \"),\n      sm: desktopRows.join(\" \"),\n    },\n    gridTemplateColumns: {\n      base: mobileColumns,\n      sm: desktopContentColumns.join(\" \") || \"auto\",\n    },\n  };\n};\n\nconst descriptionTextProps = {\n  size: \"sm\" as const,\n  c: fairmintVars.colorTextSecondary,\n  style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return <Text {...descriptionTextProps}>{children}</Text>;\n  }\n\n  return (\n    <Box\n      c={fairmintVars.colorTextSecondary}\n      style={{\n        fontSize: fontSizes.sm,\n        lineHeight: 1.4,\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n  action,\n  ariaLabel,\n  badgeLabel,\n  className,\n  description,\n  icon,\n  actions,\n  presentation = \"inline\",\n  role,\n  style,\n  title,\n  tone = \"brand\",\n}: BannerProps) {\n  const color = TONE_COLORS[tone];\n  const tokens = TONE_TOKENS[tone];\n  const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n  const resolvedActions = actions ?? (action === undefined ? [] : [action]);\n  const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n  const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n  const surface = surfaceProps(tone, presentation);\n  const layout = getBannerLayout({\n    hasActions: resolvedActions.length > 0,\n    hasDescription: description !== undefined,\n    hasIcon: iconNode !== null,\n    hasTitle: title !== undefined || badgeLabel !== undefined,\n  });\n\n  return (\n    <Box\n      aria-label={resolvedAriaLabel}\n      className={className}\n      data-presentation={presentation}\n      data-tone={tone}\n      role={resolvedRole}\n      px=\"md\"\n      py=\"md\"\n      style={{\n        boxSizing: \"border-box\",\n        width: \"100%\",\n        ...surface.style,\n        ...style,\n      }}\n      sx={{\n        display: \"grid\",\n        columnGap: spacing.sm,\n        rowGap: spacing.xs,\n        ...layout,\n      }}\n    >\n      {iconNode !== null && (\n        <ThemeIcon\n          aria-hidden\n          color={color}\n          radius=\"sm\"\n          size={40}\n          variant=\"light\"\n          style={{\n            backgroundColor: tokens.background,\n            color: tokens.icon,\n            gridArea: \"icon\",\n            alignSelf: \"center\",\n          }}\n        >\n          {iconNode}\n        </ThemeIcon>\n      )}\n\n      {(title !== undefined || badgeLabel !== undefined) && (\n        <Group\n          align=\"center\"\n          gap=\"xs\"\n          wrap=\"wrap\"\n          style={{ gridArea: \"title\", minWidth: 0, overflowWrap: \"anywhere\" }}\n        >\n          {title !== undefined && (\n            <Text\n              fw={600}\n              size=\"md\"\n              c={titleColor()}\n              style={{ lineHeight: 1.35, minWidth: 0, overflowWrap: \"anywhere\" }}\n            >\n              {title}\n            </Text>\n          )}\n          {badgeLabel !== undefined && (\n            <Badge color={color} size=\"sm\" variant=\"light\">\n              {badgeLabel}\n            </Badge>\n          )}\n        </Group>\n      )}\n\n      {description !== undefined && (\n        <Box style={{ gridArea: \"description\", minWidth: 0, overflowWrap: \"anywhere\" }}>\n          <BannerDescription>{description}</BannerDescription>\n        </Box>\n      )}\n\n      {resolvedActions.length > 0 && (\n        <Box\n          sx={{\n            display: \"flex\",\n            flexDirection: { base: \"column\", sm: \"row\" },\n            alignItems: \"stretch\",\n            justifyContent: \"flex-end\",\n            gap: spacing.xs,\n            minWidth: 0,\n            width: { base: \"100%\", sm: \"max-content\" },\n            maxWidth: \"100%\",\n          }}\n          style={{ gridArea: \"actions\", alignSelf: \"center\", justifySelf: \"end\" }}\n        >\n          {resolvedActions.map(({ label, ...buttonProps }, index) => (\n            <Button\n              key={buttonProps.id ?? (typeof label === \"string\" ? label : `banner-action-${index}`)}\n              {...buttonProps}\n              color={color}\n              variant={actionVariant(tone, index < resolvedActions.length - 1)}\n              style={{\n                ...buttonProps.style,\n                boxSizing: \"border-box\",\n                flex: \"0 1 auto\",\n                minHeight: 44,\n                maxWidth: \"100%\",\n                overflowWrap: \"anywhere\",\n                whiteSpace: \"normal\",\n                width: \"100%\",\n              }}\n            >\n              {label}\n            </Button>\n          ))}\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":["colors","fairmintVars","jsxs","jsx","radii","Text","Box","fontSizes","layout","spacing","ThemeIcon","Group","Badge","index","Button"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG1E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AACxF,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5F,4BAA4B;IAC5B,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,MAAM,aAAa,GACrB,SAAS,CAAC,iBAAiB,CAAC,GAC5B,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,oGAAoG;IACpG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kFAAkF;IAClF,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,0EAA0E;IAC1E,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,uDAAuD;IACvD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,qEAAqE;IACrE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA4LD;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAuB,EACvB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAc,GACf,EAAE,WAAW,2CAwHb"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG1E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AACxF,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5F,4BAA4B;IAC5B,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,MAAM,aAAa,GACrB,SAAS,CAAC,iBAAiB,CAAC,GAC5B,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,oGAAoG;IACpG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kFAAkF;IAClF,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,0EAA0E;IAC1E,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,uDAAuD;IACvD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,qEAAqE;IACrE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA8ND;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAuB,EACvB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAc,GACf,EAAE,WAAW,2CA4Hb"}

package/dist/components/generic/Banner/Banner.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { radii, neutralColors } from "../../../theme/index.js";
+import { fairmintVars, radii } from "../../../theme/index.js";
 import { colors } from "../../../theme/colors.js";
 import { Badge } from "../../primitives/Badge/Badge.js";
 import { Button } from "../../primitives/Button/Button.js";
@@ -17,6 +17,38 @@ const TONE_COLORS = {
   warning: colors.warning,
   error: colors.error
 };
+const TONE_TOKENS = {
+  brand: {
+    background: fairmintVars.colorBgBrandSubtle,
+    border: fairmintVars.colorBorderFocus,
+    icon: fairmintVars.colorBrandPrimary
+  },
+  neutral: {
+    background: fairmintVars.colorBgSurfaceSecondary,
+    border: fairmintVars.colorBorderDefault,
+    icon: fairmintVars.colorIconSecondary
+  },
+  info: {
+    background: fairmintVars.colorInfoBg,
+    border: fairmintVars.colorInfoBorder,
+    icon: fairmintVars.colorInfoText
+  },
+  success: {
+    background: fairmintVars.colorSuccessBg,
+    border: fairmintVars.colorSuccessBorder,
+    icon: fairmintVars.colorSuccessText
+  },
+  warning: {
+    background: fairmintVars.colorWarningBg,
+    border: fairmintVars.colorWarningBorder,
+    icon: fairmintVars.colorWarningText
+  },
+  error: {
+    background: fairmintVars.colorErrorBg,
+    border: fairmintVars.colorErrorBorder,
+    icon: fairmintVars.colorErrorText
+  }
+};
 const DefaultStatusIcon = ({ tone }) => {
   const commonProps = {
     width: 20,
@@ -60,25 +92,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: radii.lg
     }
   };
 };
-const titleColor = () => neutralColors[900];
+const titleColor = () => fairmintVars.colorTextPrimary;
 const actionVariant = (tone, isSecondary) => {
   if (isSecondary) return "outline";
   if (tone === "brand") return "light";
@@ -137,7 +168,7 @@ const getBannerLayout = ({
 };
 const descriptionTextProps = {
   size: "sm",
-  c: neutralColors[500],
+  c: fairmintVars.colorTextSecondary,
   style: { lineHeight: 1.4 }
 };
 function BannerDescription({ children }) {
@@ -147,7 +178,7 @@ function BannerDescription({ children }) {
   return /* @__PURE__ */ jsx(
     Box,
     {
-      c: neutralColors[500],
+      c: fairmintVars.colorTextSecondary,
       style: {
         fontSize: fontSizes.sm,
         lineHeight: 1.4
@@ -171,6 +202,7 @@ function Banner({
   tone = "brand"
 }) {
   const color = TONE_COLORS[tone];
+  const tokens = TONE_TOKENS[tone];
   const iconNode = icon === void 0 ? /* @__PURE__ */ jsx(DefaultStatusIcon, { tone }) : icon;
   const resolvedActions = actions ?? (action === void 0 ? [] : [action]);
   const resolvedRole = role ?? (tone === "error" ? "alert" : "status");
@@ -192,8 +224,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%",
@@ -215,7 +245,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
           }
         ),