@fairmint/ui 0.3.42 → 0.4.0

package/dist/_virtual/index3.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=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,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=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,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=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,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=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/FairmintLogo/FairmintLogoMark.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FairmintLogoMark.cjs","sources":["../../../src/components/FairmintLogo/FairmintLogoMark.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useId } from \"react\";\nimport { LOGO_MARK_BARS, LOGO_MARK_VIEWBOX, logoColors, logoFills } from \"../../theme/logo\";\n\nexport type FairmintLogoMarkFill = \"gradient\" | \"white\" | \"black\";\n\nexport interface FairmintLogoMarkProps {\n  /** Square size in pixels. @default 32 */\n  size?: number;\n  /** Bar fill style. @default \"gradient\" */\n  fill?: FairmintLogoMarkFill;\n  /** Number of ascending bars (3 or 4). @default 4 */\n  barCount?: 3 | 4;\n  /**\n   * Accessible name when the mark is standalone (nav icon, favicon).\n   * Omit or pass `\"\"` when decorative inside a labeled lockup or link.\n   */\n  alt?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nfunction resolveBarFill(fill: FairmintLogoMarkFill, gradientId: string): string {\n  if (fill === \"gradient\") {\n    return `url(#${gradientId})`;\n  }\n  return fill === \"white\" ? logoFills.white : logoFills.black;\n}\n\n/**\n * Simplified brand mark — flat ascending bars with the wordmark gradient.\n * Optimized for small lockups (20–40px); use `FairmintRibbonMark` for hero/icon fidelity.\n */\nexport function FairmintLogoMark({\n  size = 32,\n  fill = \"gradient\",\n  barCount = 4,\n  alt,\n  className,\n  style,\n}: FairmintLogoMarkProps) {\n  const gradientId = useId();\n  const bars = LOGO_MARK_BARS.slice(0, barCount);\n  const barFill = resolveBarFill(fill, gradientId);\n  const isDecorative = !alt;\n\n  return (\n    <svg\n      viewBox={`0 0 ${LOGO_MARK_VIEWBOX.width} ${LOGO_MARK_VIEWBOX.height}`}\n      width={size}\n      height={size}\n      className={className}\n      style={{ display: \"block\", flexShrink: 0, ...style }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden={isDecorative || undefined}\n      role={isDecorative ? undefined : \"img\"}\n      aria-label={isDecorative ? undefined : alt}\n    >\n      {!isDecorative && <title>{alt}</title>}\n      {bars.map((bar) => (\n        <rect\n          key={`${bar.x}-${bar.y}`}\n          x={bar.x}\n          y={bar.y}\n          width={bar.width}\n          height={bar.height}\n          fill={barFill}\n        />\n      ))}\n      {fill === \"gradient\" && (\n        <defs>\n          <linearGradient\n            id={gradientId}\n            x1=\"0\"\n            y1=\"24\"\n            x2=\"48\"\n            y2=\"24\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            {logoColors.gradientStops.map((stop) => (\n              <stop key={stop.offset} offset={stop.offset} stopColor={stop.color} />\n            ))}\n          </linearGradient>\n        </defs>\n      )}\n    </svg>\n  );\n}\n"],"names":["logoFills","useId","LOGO_MARK_BARS","jsxs","LOGO_MARK_VIEWBOX","jsx","logoColors"],"mappings":";;;;;AAsBA,SAAS,eAAe,MAA4B,YAA4B;AAC9E,MAAI,SAAS,YAAY;AACvB,WAAO,QAAQ,UAAU;AAAA,EAC3B;AACA,SAAO,SAAS,UAAUA,KAAAA,UAAU,QAAQA,KAAAA,UAAU;AACxD;AAMO,SAAS,iBAAiB;AAAA,EAC/B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,aAAaC,MAAAA,MAAA;AACnB,QAAM,OAAOC,KAAAA,eAAe,MAAM,GAAG,QAAQ;AAC7C,QAAM,UAAU,eAAe,MAAM,UAAU;AAC/C,QAAM,eAAe,CAAC;AAEtB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,OAAOC,KAAAA,kBAAkB,KAAK,IAAIA,KAAAA,kBAAkB,MAAM;AAAA,MACnE,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA,OAAO,EAAE,SAAS,SAAS,YAAY,GAAG,GAAG,MAAA;AAAA,MAC7C,OAAM;AAAA,MACN,eAAa,gBAAgB;AAAA,MAC7B,MAAM,eAAe,SAAY;AAAA,MACjC,cAAY,eAAe,SAAY;AAAA,MAEtC,UAAA;AAAA,QAAA,CAAC,gBAAgBC,2BAAAA,IAAC,SAAA,EAAO,UAAA,IAAA,CAAI;AAAA,QAC7B,KAAK,IAAI,CAAC,QACTA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,GAAG,IAAI;AAAA,YACP,GAAG,IAAI;AAAA,YACP,OAAO,IAAI;AAAA,YACX,QAAQ,IAAI;AAAA,YACZ,MAAM;AAAA,UAAA;AAAA,UALD,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;AAAA,QAAA,CAOzB;AAAA,QACA,SAAS,cACRA,2BAAAA,IAAC,QAAA,EACC,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAc;AAAA,YAEb,UAAAC,KAAAA,WAAW,cAAc,IAAI,CAAC,SAC7BD,2BAAAA,IAAC,QAAA,EAAuB,QAAQ,KAAK,QAAQ,WAAW,KAAK,MAAA,GAAlD,KAAK,MAAoD,CACrE;AAAA,UAAA;AAAA,QAAA,EACH,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}
+{"version":3,"file":"FairmintLogoMark.cjs","sources":["../../../src/components/FairmintLogo/FairmintLogoMark.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useId } from \"react\";\nimport { LOGO_MARK_BARS, LOGO_MARK_VIEWBOX, logoColors, logoFills } from \"../../theme/logo\";\n\nexport type FairmintLogoMarkFill = \"gradient\" | \"white\" | \"black\";\n\nexport interface FairmintLogoMarkProps {\n  /** Square size in pixels. @default 32 */\n  size?: number;\n  /** Bar fill style. @default \"gradient\" */\n  fill?: FairmintLogoMarkFill;\n  /** Number of ascending bars (3 or 4). @default 4 */\n  barCount?: 3 | 4;\n  /**\n   * Accessible name when the mark is standalone (nav icon, favicon).\n   * Omit or pass `\"\"` when decorative inside a labeled lockup or link.\n   */\n  alt?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nfunction resolveBarFill(fill: FairmintLogoMarkFill, gradientId: string): string {\n  if (fill === \"gradient\") {\n    return `url(#${gradientId})`;\n  }\n  return fill === \"white\" ? logoFills.white : logoFills.black;\n}\n\n/**\n * Simplified brand mark — flat ascending bars with the wordmark gradient.\n * Not used in product chrome; prefer `FairmintLogoMarkRounded`.\n */\nexport function FairmintLogoMark({\n  size = 32,\n  fill = \"gradient\",\n  barCount = 4,\n  alt,\n  className,\n  style,\n}: FairmintLogoMarkProps) {\n  const gradientId = useId();\n  const bars = LOGO_MARK_BARS.slice(0, barCount);\n  const barFill = resolveBarFill(fill, gradientId);\n  const isDecorative = !alt;\n\n  return (\n    <svg\n      viewBox={`0 0 ${LOGO_MARK_VIEWBOX.width} ${LOGO_MARK_VIEWBOX.height}`}\n      width={size}\n      height={size}\n      className={className}\n      style={{ display: \"block\", flexShrink: 0, ...style }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden={isDecorative || undefined}\n      role={isDecorative ? undefined : \"img\"}\n      aria-label={isDecorative ? undefined : alt}\n    >\n      {!isDecorative && <title>{alt}</title>}\n      {bars.map((bar) => (\n        <rect\n          key={`${bar.x}-${bar.y}`}\n          x={bar.x}\n          y={bar.y}\n          width={bar.width}\n          height={bar.height}\n          fill={barFill}\n        />\n      ))}\n      {fill === \"gradient\" && (\n        <defs>\n          <linearGradient\n            id={gradientId}\n            x1=\"0\"\n            y1=\"24\"\n            x2=\"48\"\n            y2=\"24\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            {logoColors.gradientStops.map((stop) => (\n              <stop key={stop.offset} offset={stop.offset} stopColor={stop.color} />\n            ))}\n          </linearGradient>\n        </defs>\n      )}\n    </svg>\n  );\n}\n"],"names":["logoFills","useId","LOGO_MARK_BARS","jsxs","LOGO_MARK_VIEWBOX","jsx","logoColors"],"mappings":";;;;;AAsBA,SAAS,eAAe,MAA4B,YAA4B;AAC9E,MAAI,SAAS,YAAY;AACvB,WAAO,QAAQ,UAAU;AAAA,EAC3B;AACA,SAAO,SAAS,UAAUA,KAAAA,UAAU,QAAQA,KAAAA,UAAU;AACxD;AAMO,SAAS,iBAAiB;AAAA,EAC/B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,aAAaC,MAAAA,MAAA;AACnB,QAAM,OAAOC,KAAAA,eAAe,MAAM,GAAG,QAAQ;AAC7C,QAAM,UAAU,eAAe,MAAM,UAAU;AAC/C,QAAM,eAAe,CAAC;AAEtB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,OAAOC,KAAAA,kBAAkB,KAAK,IAAIA,KAAAA,kBAAkB,MAAM;AAAA,MACnE,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA,OAAO,EAAE,SAAS,SAAS,YAAY,GAAG,GAAG,MAAA;AAAA,MAC7C,OAAM;AAAA,MACN,eAAa,gBAAgB;AAAA,MAC7B,MAAM,eAAe,SAAY;AAAA,MACjC,cAAY,eAAe,SAAY;AAAA,MAEtC,UAAA;AAAA,QAAA,CAAC,gBAAgBC,2BAAAA,IAAC,SAAA,EAAO,UAAA,IAAA,CAAI;AAAA,QAC7B,KAAK,IAAI,CAAC,QACTA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,GAAG,IAAI;AAAA,YACP,GAAG,IAAI;AAAA,YACP,OAAO,IAAI;AAAA,YACX,QAAQ,IAAI;AAAA,YACZ,MAAM;AAAA,UAAA;AAAA,UALD,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;AAAA,QAAA,CAOzB;AAAA,QACA,SAAS,cACRA,2BAAAA,IAAC,QAAA,EACC,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAc;AAAA,YAEb,UAAAC,KAAAA,WAAW,cAAc,IAAI,CAAC,SAC7BD,2BAAAA,IAAC,QAAA,EAAuB,QAAQ,KAAK,QAAQ,WAAW,KAAK,MAAA,GAAlD,KAAK,MAAoD,CACrE;AAAA,UAAA;AAAA,QAAA,EACH,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/components/FairmintLogo/FairmintLogoMark.d.ts

@@ -17,7 +17,7 @@ export interface FairmintLogoMarkProps {
 }
 /**
  * Simplified brand mark — flat ascending bars with the wordmark gradient.
- * Optimized for small lockups (20–40px); use `FairmintRibbonMark` for hero/icon fidelity.
+ * Not used in product chrome; prefer `FairmintLogoMarkRounded`.
  */
 export declare function FairmintLogoMark({ size, fill, barCount, alt, className, style, }: FairmintLogoMarkProps): import("react").JSX.Element;
 //# sourceMappingURL=FairmintLogoMark.d.ts.map

package/dist/components/FairmintLogo/FairmintLogoMark.js.map

@@ -1 +1 @@
-{"version":3,"file":"FairmintLogoMark.js","sources":["../../../src/components/FairmintLogo/FairmintLogoMark.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useId } from \"react\";\nimport { LOGO_MARK_BARS, LOGO_MARK_VIEWBOX, logoColors, logoFills } from \"../../theme/logo\";\n\nexport type FairmintLogoMarkFill = \"gradient\" | \"white\" | \"black\";\n\nexport interface FairmintLogoMarkProps {\n  /** Square size in pixels. @default 32 */\n  size?: number;\n  /** Bar fill style. @default \"gradient\" */\n  fill?: FairmintLogoMarkFill;\n  /** Number of ascending bars (3 or 4). @default 4 */\n  barCount?: 3 | 4;\n  /**\n   * Accessible name when the mark is standalone (nav icon, favicon).\n   * Omit or pass `\"\"` when decorative inside a labeled lockup or link.\n   */\n  alt?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nfunction resolveBarFill(fill: FairmintLogoMarkFill, gradientId: string): string {\n  if (fill === \"gradient\") {\n    return `url(#${gradientId})`;\n  }\n  return fill === \"white\" ? logoFills.white : logoFills.black;\n}\n\n/**\n * Simplified brand mark — flat ascending bars with the wordmark gradient.\n * Optimized for small lockups (20–40px); use `FairmintRibbonMark` for hero/icon fidelity.\n */\nexport function FairmintLogoMark({\n  size = 32,\n  fill = \"gradient\",\n  barCount = 4,\n  alt,\n  className,\n  style,\n}: FairmintLogoMarkProps) {\n  const gradientId = useId();\n  const bars = LOGO_MARK_BARS.slice(0, barCount);\n  const barFill = resolveBarFill(fill, gradientId);\n  const isDecorative = !alt;\n\n  return (\n    <svg\n      viewBox={`0 0 ${LOGO_MARK_VIEWBOX.width} ${LOGO_MARK_VIEWBOX.height}`}\n      width={size}\n      height={size}\n      className={className}\n      style={{ display: \"block\", flexShrink: 0, ...style }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden={isDecorative || undefined}\n      role={isDecorative ? undefined : \"img\"}\n      aria-label={isDecorative ? undefined : alt}\n    >\n      {!isDecorative && <title>{alt}</title>}\n      {bars.map((bar) => (\n        <rect\n          key={`${bar.x}-${bar.y}`}\n          x={bar.x}\n          y={bar.y}\n          width={bar.width}\n          height={bar.height}\n          fill={barFill}\n        />\n      ))}\n      {fill === \"gradient\" && (\n        <defs>\n          <linearGradient\n            id={gradientId}\n            x1=\"0\"\n            y1=\"24\"\n            x2=\"48\"\n            y2=\"24\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            {logoColors.gradientStops.map((stop) => (\n              <stop key={stop.offset} offset={stop.offset} stopColor={stop.color} />\n            ))}\n          </linearGradient>\n        </defs>\n      )}\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;;AAsBA,SAAS,eAAe,MAA4B,YAA4B;AAC9E,MAAI,SAAS,YAAY;AACvB,WAAO,QAAQ,UAAU;AAAA,EAC3B;AACA,SAAO,SAAS,UAAU,UAAU,QAAQ,UAAU;AACxD;AAMO,SAAS,iBAAiB;AAAA,EAC/B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,aAAa,MAAA;AACnB,QAAM,OAAO,eAAe,MAAM,GAAG,QAAQ;AAC7C,QAAM,UAAU,eAAe,MAAM,UAAU;AAC/C,QAAM,eAAe,CAAC;AAEtB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,OAAO,kBAAkB,KAAK,IAAI,kBAAkB,MAAM;AAAA,MACnE,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA,OAAO,EAAE,SAAS,SAAS,YAAY,GAAG,GAAG,MAAA;AAAA,MAC7C,OAAM;AAAA,MACN,eAAa,gBAAgB;AAAA,MAC7B,MAAM,eAAe,SAAY;AAAA,MACjC,cAAY,eAAe,SAAY;AAAA,MAEtC,UAAA;AAAA,QAAA,CAAC,gBAAgB,oBAAC,SAAA,EAAO,UAAA,IAAA,CAAI;AAAA,QAC7B,KAAK,IAAI,CAAC,QACT;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,GAAG,IAAI;AAAA,YACP,GAAG,IAAI;AAAA,YACP,OAAO,IAAI;AAAA,YACX,QAAQ,IAAI;AAAA,YACZ,MAAM;AAAA,UAAA;AAAA,UALD,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;AAAA,QAAA,CAOzB;AAAA,QACA,SAAS,cACR,oBAAC,QAAA,EACC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAc;AAAA,YAEb,UAAA,WAAW,cAAc,IAAI,CAAC,SAC7B,oBAAC,QAAA,EAAuB,QAAQ,KAAK,QAAQ,WAAW,KAAK,MAAA,GAAlD,KAAK,MAAoD,CACrE;AAAA,UAAA;AAAA,QAAA,EACH,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"FairmintLogoMark.js","sources":["../../../src/components/FairmintLogo/FairmintLogoMark.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useId } from \"react\";\nimport { LOGO_MARK_BARS, LOGO_MARK_VIEWBOX, logoColors, logoFills } from \"../../theme/logo\";\n\nexport type FairmintLogoMarkFill = \"gradient\" | \"white\" | \"black\";\n\nexport interface FairmintLogoMarkProps {\n  /** Square size in pixels. @default 32 */\n  size?: number;\n  /** Bar fill style. @default \"gradient\" */\n  fill?: FairmintLogoMarkFill;\n  /** Number of ascending bars (3 or 4). @default 4 */\n  barCount?: 3 | 4;\n  /**\n   * Accessible name when the mark is standalone (nav icon, favicon).\n   * Omit or pass `\"\"` when decorative inside a labeled lockup or link.\n   */\n  alt?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nfunction resolveBarFill(fill: FairmintLogoMarkFill, gradientId: string): string {\n  if (fill === \"gradient\") {\n    return `url(#${gradientId})`;\n  }\n  return fill === \"white\" ? logoFills.white : logoFills.black;\n}\n\n/**\n * Simplified brand mark — flat ascending bars with the wordmark gradient.\n * Not used in product chrome; prefer `FairmintLogoMarkRounded`.\n */\nexport function FairmintLogoMark({\n  size = 32,\n  fill = \"gradient\",\n  barCount = 4,\n  alt,\n  className,\n  style,\n}: FairmintLogoMarkProps) {\n  const gradientId = useId();\n  const bars = LOGO_MARK_BARS.slice(0, barCount);\n  const barFill = resolveBarFill(fill, gradientId);\n  const isDecorative = !alt;\n\n  return (\n    <svg\n      viewBox={`0 0 ${LOGO_MARK_VIEWBOX.width} ${LOGO_MARK_VIEWBOX.height}`}\n      width={size}\n      height={size}\n      className={className}\n      style={{ display: \"block\", flexShrink: 0, ...style }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden={isDecorative || undefined}\n      role={isDecorative ? undefined : \"img\"}\n      aria-label={isDecorative ? undefined : alt}\n    >\n      {!isDecorative && <title>{alt}</title>}\n      {bars.map((bar) => (\n        <rect\n          key={`${bar.x}-${bar.y}`}\n          x={bar.x}\n          y={bar.y}\n          width={bar.width}\n          height={bar.height}\n          fill={barFill}\n        />\n      ))}\n      {fill === \"gradient\" && (\n        <defs>\n          <linearGradient\n            id={gradientId}\n            x1=\"0\"\n            y1=\"24\"\n            x2=\"48\"\n            y2=\"24\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            {logoColors.gradientStops.map((stop) => (\n              <stop key={stop.offset} offset={stop.offset} stopColor={stop.color} />\n            ))}\n          </linearGradient>\n        </defs>\n      )}\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;;AAsBA,SAAS,eAAe,MAA4B,YAA4B;AAC9E,MAAI,SAAS,YAAY;AACvB,WAAO,QAAQ,UAAU;AAAA,EAC3B;AACA,SAAO,SAAS,UAAU,UAAU,QAAQ,UAAU;AACxD;AAMO,SAAS,iBAAiB;AAAA,EAC/B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,aAAa,MAAA;AACnB,QAAM,OAAO,eAAe,MAAM,GAAG,QAAQ;AAC7C,QAAM,UAAU,eAAe,MAAM,UAAU;AAC/C,QAAM,eAAe,CAAC;AAEtB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,OAAO,kBAAkB,KAAK,IAAI,kBAAkB,MAAM;AAAA,MACnE,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA,OAAO,EAAE,SAAS,SAAS,YAAY,GAAG,GAAG,MAAA;AAAA,MAC7C,OAAM;AAAA,MACN,eAAa,gBAAgB;AAAA,MAC7B,MAAM,eAAe,SAAY;AAAA,MACjC,cAAY,eAAe,SAAY;AAAA,MAEtC,UAAA;AAAA,QAAA,CAAC,gBAAgB,oBAAC,SAAA,EAAO,UAAA,IAAA,CAAI;AAAA,QAC7B,KAAK,IAAI,CAAC,QACT;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,GAAG,IAAI;AAAA,YACP,GAAG,IAAI;AAAA,YACP,OAAO,IAAI;AAAA,YACX,QAAQ,IAAI;AAAA,YACZ,MAAM;AAAA,UAAA;AAAA,UALD,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;AAAA,QAAA,CAOzB;AAAA,QACA,SAAS,cACR,oBAAC,QAAA,EACC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAc;AAAA,YAEb,UAAA,WAAW,cAAc,IAAI,CAAC,SAC7B,oBAAC,QAAA,EAAuB,QAAQ,KAAK,QAAQ,WAAW,KAAK,MAAA,GAAlD,KAAK,MAAoD,CACrE;AAAA,UAAA;AAAA,QAAA,EACH,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/FairmintLogo/FairmintLogoMarkRounded.cjs

@@ -6,17 +6,26 @@ const LOGO_MARK_ROUNDED_VIEWBOX = { width: 36, height: 36 };
 const LOGO_MARK_ROUNDED_TILE = logo.logoColors.markRoundedTile;
 const SIDE_NAV_COLLAPSED_LOGO_FRAME = 48;
 const SIDE_NAV_COLLAPSED_LOGO_SIZE = 36;
+function resolveGlyphColor(variant, glyphColor) {
+  if (glyphColor) {
+    return glyphColor;
+  }
+  return variant === "black" ? logo.logoFills.black : logo.logoFills.white;
+}
 function FairmintLogoMarkRounded({
   size = 32,
   frameSize,
+  variant = "tile",
   tileColor = LOGO_MARK_ROUNDED_TILE,
-  glyphColor = logo.logoFills.white,
+  glyphColor,
   alt,
   className,
   style
 }) {
   const isDecorative = !alt;
   const resolvedFrame = frameSize && frameSize > size ? frameSize : void 0;
+  const showTile = variant === "tile";
+  const resolvedGlyph = resolveGlyphColor(variant, glyphColor);
   const mark = /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
@@ -31,25 +40,25 @@ function FairmintLogoMarkRounded({
       "aria-label": isDecorative ? void 0 : alt,
       children: [
         !isDecorative && /* @__PURE__ */ jsxRuntime.jsx("title", { children: alt }),
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "36", height: "36", rx: "8", fill: tileColor }),
+        showTile && /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "36", height: "36", rx: "8", fill: tileColor }),
         /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "translate(18 18.07) scale(1.12) translate(-18 -18.07)", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.4661 20.3562V26.446H15.1251V18.7954L12.4661 20.3562Z", fill: glyphColor }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.4661 20.3562V26.446H15.1251V18.7954L12.4661 20.3562Z", fill: resolvedGlyph }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "path",
             {
               d: "M22.5714 22.7206V18.7932L19.9113 20.354V22.9428C19.9113 25.447 20.5768 26.7091 23.391 26.7091C24.0115 26.7091 24.9416 26.6194 25.4954 26.3556V24.1164C25.1627 24.3598 24.5198 24.4499 24.055 24.4499C22.8819 24.4499 22.5714 23.7836 22.5714 22.7206Z",
-              fill: glyphColor
+              fill: resolvedGlyph
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "path",
             {
               d: "M16.4329 9.42847C13.1307 9.42847 12.4656 11.3557 12.4656 14.3028V15.822H15.1254V13.8818C15.1254 12.7079 15.3456 11.6881 16.8315 11.6881C17.2086 11.6881 17.5629 11.7555 17.9388 11.8445L18.1148 9.5829C17.5625 9.47197 17.0071 9.42847 16.4329 9.42847Z",
-              fill: glyphColor
+              fill: resolvedGlyph
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22.5714 12.7273H19.9113V15.8081H22.5714V12.7273Z", fill: glyphColor }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M25.7283 15.8218H10.2717V18.0841H25.7283V15.8218Z", fill: glyphColor })
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22.5714 12.7273H19.9113V15.8081H22.5714V12.7273Z", fill: resolvedGlyph }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M25.7283 15.8218H10.2717V18.0841H25.7283V15.8218Z", fill: resolvedGlyph })
         ] })
       ]
     }

package/dist/components/FairmintLogo/FairmintLogoMarkRounded.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FairmintLogoMarkRounded.cjs","sources":["../../../src/components/FairmintLogo/FairmintLogoMarkRounded.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { logoColors, logoFills } from \"../../theme/logo\";\n\n/** Product FT mark — rounded square tile from the brand icon asset. */\nexport const LOGO_MARK_ROUNDED_VIEWBOX = { width: 36, height: 36 } as const;\n\n/** Default tile fill from the FT Mark Rounded Square source asset. */\nexport const LOGO_MARK_ROUNDED_TILE = logoColors.markRoundedTile;\n\n/**\n * Collapsed SideNav layout: 48×48 frame with a 36×36 mark centered inside\n * (white/transparent padding around the tile).\n */\nexport const SIDE_NAV_COLLAPSED_LOGO_FRAME = 48;\nexport const SIDE_NAV_COLLAPSED_LOGO_SIZE = 36;\n\nexport interface FairmintLogoMarkRoundedProps {\n  /** Square size of the filled tile in pixels. @default 32 */\n  size?: number;\n  /**\n   * Outer frame size. When set larger than `size`, centers the tile in a\n   * transparent square (e.g. frame 48 + size 36 for collapsed SideNav).\n   */\n  frameSize?: number;\n  /** Rounded tile fill. @default LOGO_MARK_ROUNDED_TILE */\n  tileColor?: string;\n  /** Glyph fill on the tile. @default white */\n  glyphColor?: string;\n  /**\n   * Accessible name when the mark is standalone (collapsed nav, favicon).\n   * Omit or pass `\"\"` when decorative inside a labeled lockup or link.\n   */\n  alt?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * Fairmint FT mark on a rounded square — preferred collapsed SideNav / app-icon lockup.\n * Source geometry: FT Mark Rounded Square. The purple tile fills `size`; optional\n * `frameSize` adds transparent padding around it.\n */\nexport function FairmintLogoMarkRounded({\n  size = 32,\n  frameSize,\n  tileColor = LOGO_MARK_ROUNDED_TILE,\n  glyphColor = logoFills.white,\n  alt,\n  className,\n  style,\n}: FairmintLogoMarkRoundedProps) {\n  const isDecorative = !alt;\n  const resolvedFrame = frameSize && frameSize > size ? frameSize : undefined;\n\n  const mark = (\n    <svg\n      viewBox={`0 0 ${LOGO_MARK_ROUNDED_VIEWBOX.width} ${LOGO_MARK_ROUNDED_VIEWBOX.height}`}\n      width={size}\n      height={size}\n      className={resolvedFrame ? undefined : className}\n      style={{ display: \"block\", flexShrink: 0, ...(resolvedFrame ? undefined : style) }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden={isDecorative || undefined}\n      role={isDecorative ? undefined : \"img\"}\n      aria-label={isDecorative ? undefined : alt}\n    >\n      {!isDecorative && <title>{alt}</title>}\n      {/* Tile fills the viewBox — padding belongs on `frameSize`, not inside the SVG. */}\n      <rect width=\"36\" height=\"36\" rx=\"8\" fill={tileColor} />\n      <g transform=\"translate(18 18.07) scale(1.12) translate(-18 -18.07)\">\n        <path d=\"M12.4661 20.3562V26.446H15.1251V18.7954L12.4661 20.3562Z\" fill={glyphColor} />\n        <path\n          d=\"M22.5714 22.7206V18.7932L19.9113 20.354V22.9428C19.9113 25.447 20.5768 26.7091 23.391 26.7091C24.0115 26.7091 24.9416 26.6194 25.4954 26.3556V24.1164C25.1627 24.3598 24.5198 24.4499 24.055 24.4499C22.8819 24.4499 22.5714 23.7836 22.5714 22.7206Z\"\n          fill={glyphColor}\n        />\n        <path\n          d=\"M16.4329 9.42847C13.1307 9.42847 12.4656 11.3557 12.4656 14.3028V15.822H15.1254V13.8818C15.1254 12.7079 15.3456 11.6881 16.8315 11.6881C17.2086 11.6881 17.5629 11.7555 17.9388 11.8445L18.1148 9.5829C17.5625 9.47197 17.0071 9.42847 16.4329 9.42847Z\"\n          fill={glyphColor}\n        />\n        <path d=\"M22.5714 12.7273H19.9113V15.8081H22.5714V12.7273Z\" fill={glyphColor} />\n        <path d=\"M25.7283 15.8218H10.2717V18.0841H25.7283V15.8218Z\" fill={glyphColor} />\n      </g>\n    </svg>\n  );\n\n  if (!resolvedFrame) {\n    return mark;\n  }\n\n  return (\n    <span\n      className={className}\n      style={{\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        width: resolvedFrame,\n        height: resolvedFrame,\n        flexShrink: 0,\n        ...style,\n      }}\n    >\n      {mark}\n    </span>\n  );\n}\n"],"names":["logoColors","logoFills","jsxs","jsx"],"mappings":";;;;AAIO,MAAM,4BAA4B,EAAE,OAAO,IAAI,QAAQ,GAAA;AAGvD,MAAM,yBAAyBA,KAAAA,WAAW;AAM1C,MAAM,gCAAgC;AACtC,MAAM,+BAA+B;AA4BrC,SAAS,wBAAwB;AAAA,EACtC,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,aAAaC,KAAAA,UAAU;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,eAAe,CAAC;AACtB,QAAM,gBAAgB,aAAa,YAAY,OAAO,YAAY;AAElE,QAAM,OACJC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,OAAO,0BAA0B,KAAK,IAAI,0BAA0B,MAAM;AAAA,MACnF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW,gBAAgB,SAAY;AAAA,MACvC,OAAO,EAAE,SAAS,SAAS,YAAY,GAAG,GAAI,gBAAgB,SAAY,MAAA;AAAA,MAC1E,OAAM;AAAA,MACN,eAAa,gBAAgB;AAAA,MAC7B,MAAM,eAAe,SAAY;AAAA,MACjC,cAAY,eAAe,SAAY;AAAA,MAEtC,UAAA;AAAA,QAAA,CAAC,gBAAgBC,2BAAAA,IAAC,SAAA,EAAO,UAAA,IAAA,CAAI;AAAA,QAE9BA,2BAAAA,IAAC,UAAK,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI,MAAM,UAAA,CAAW;AAAA,QACrDD,2BAAAA,KAAC,KAAA,EAAE,WAAU,yDACX,UAAA;AAAA,UAAAC,2BAAAA,IAAC,QAAA,EAAK,GAAE,4DAA2D,MAAM,YAAY;AAAA,UACrFA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAERA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAERA,2BAAAA,IAAC,QAAA,EAAK,GAAE,qDAAoD,MAAM,YAAY;AAAA,UAC9EA,2BAAAA,IAAC,QAAA,EAAK,GAAE,qDAAoD,MAAM,WAAA,CAAY;AAAA,QAAA,EAAA,CAChF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,GAAG;AAAA,MAAA;AAAA,MAGJ,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;;;;;;"}
+{"version":3,"file":"FairmintLogoMarkRounded.cjs","sources":["../../../src/components/FairmintLogo/FairmintLogoMarkRounded.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { logoColors, logoFills } from \"../../theme/logo\";\n\n/** Product FT mark — rounded square tile from the brand icon asset. */\nexport const LOGO_MARK_ROUNDED_VIEWBOX = { width: 36, height: 36 } as const;\n\n/** Default tile fill from the FT Mark Rounded Square source asset. */\nexport const LOGO_MARK_ROUNDED_TILE = logoColors.markRoundedTile;\n\n/**\n * Collapsed SideNav layout: 48×48 frame with a 36×36 mark centered inside\n * (white/transparent padding around the tile).\n */\nexport const SIDE_NAV_COLLAPSED_LOGO_FRAME = 48;\nexport const SIDE_NAV_COLLAPSED_LOGO_SIZE = 36;\n\nexport type FairmintLogoMarkRoundedVariant = \"tile\" | \"black\" | \"white\";\n\nexport interface FairmintLogoMarkRoundedProps {\n  /** Square size of the mark in pixels. @default 32 */\n  size?: number;\n  /**\n   * Outer frame size. When set larger than `size`, centers the mark in a\n   * transparent square (e.g. frame 48 + size 36 for collapsed SideNav).\n   */\n  frameSize?: number;\n  /**\n   * `tile` — purple rounded square with white FT glyph (collapsed nav / app icon).\n   * `black` — standalone FT ligature for light mode.\n   * `white` — standalone FT ligature for dark mode.\n   * @default \"tile\"\n   */\n  variant?: FairmintLogoMarkRoundedVariant;\n  /** Rounded tile fill. Applies to `variant=\"tile\"`. @default LOGO_MARK_ROUNDED_TILE */\n  tileColor?: string;\n  /** Glyph fill override. Defaults from `variant`. */\n  glyphColor?: string;\n  /**\n   * Accessible name when the mark is standalone (collapsed nav, favicon).\n   * Omit or pass `\"\"` when decorative inside a labeled lockup or link.\n   */\n  alt?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nfunction resolveGlyphColor(\n  variant: FairmintLogoMarkRoundedVariant,\n  glyphColor: string | undefined,\n): string {\n  if (glyphColor) {\n    return glyphColor;\n  }\n  return variant === \"black\" ? logoFills.black : logoFills.white;\n}\n\n/**\n * Fairmint FT mark — preferred collapsed SideNav / app-icon lockup.\n * Source geometry: FT Mark Rounded Square. `variant=\"tile\"` fills `size` with\n * the purple rounded square; `black` / `white` render the ligature alone for\n * light and dark surfaces. Optional `frameSize` adds transparent padding.\n */\nexport function FairmintLogoMarkRounded({\n  size = 32,\n  frameSize,\n  variant = \"tile\",\n  tileColor = LOGO_MARK_ROUNDED_TILE,\n  glyphColor,\n  alt,\n  className,\n  style,\n}: FairmintLogoMarkRoundedProps) {\n  const isDecorative = !alt;\n  const resolvedFrame = frameSize && frameSize > size ? frameSize : undefined;\n  const showTile = variant === \"tile\";\n  const resolvedGlyph = resolveGlyphColor(variant, glyphColor);\n\n  const mark = (\n    <svg\n      viewBox={`0 0 ${LOGO_MARK_ROUNDED_VIEWBOX.width} ${LOGO_MARK_ROUNDED_VIEWBOX.height}`}\n      width={size}\n      height={size}\n      className={resolvedFrame ? undefined : className}\n      style={{ display: \"block\", flexShrink: 0, ...(resolvedFrame ? undefined : style) }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden={isDecorative || undefined}\n      role={isDecorative ? undefined : \"img\"}\n      aria-label={isDecorative ? undefined : alt}\n    >\n      {!isDecorative && <title>{alt}</title>}\n      {/* Tile fills the viewBox — padding belongs on `frameSize`, not inside the SVG. */}\n      {showTile && <rect width=\"36\" height=\"36\" rx=\"8\" fill={tileColor} />}\n      <g transform=\"translate(18 18.07) scale(1.12) translate(-18 -18.07)\">\n        <path d=\"M12.4661 20.3562V26.446H15.1251V18.7954L12.4661 20.3562Z\" fill={resolvedGlyph} />\n        <path\n          d=\"M22.5714 22.7206V18.7932L19.9113 20.354V22.9428C19.9113 25.447 20.5768 26.7091 23.391 26.7091C24.0115 26.7091 24.9416 26.6194 25.4954 26.3556V24.1164C25.1627 24.3598 24.5198 24.4499 24.055 24.4499C22.8819 24.4499 22.5714 23.7836 22.5714 22.7206Z\"\n          fill={resolvedGlyph}\n        />\n        <path\n          d=\"M16.4329 9.42847C13.1307 9.42847 12.4656 11.3557 12.4656 14.3028V15.822H15.1254V13.8818C15.1254 12.7079 15.3456 11.6881 16.8315 11.6881C17.2086 11.6881 17.5629 11.7555 17.9388 11.8445L18.1148 9.5829C17.5625 9.47197 17.0071 9.42847 16.4329 9.42847Z\"\n          fill={resolvedGlyph}\n        />\n        <path d=\"M22.5714 12.7273H19.9113V15.8081H22.5714V12.7273Z\" fill={resolvedGlyph} />\n        <path d=\"M25.7283 15.8218H10.2717V18.0841H25.7283V15.8218Z\" fill={resolvedGlyph} />\n      </g>\n    </svg>\n  );\n\n  if (!resolvedFrame) {\n    return mark;\n  }\n\n  return (\n    <span\n      className={className}\n      style={{\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        width: resolvedFrame,\n        height: resolvedFrame,\n        flexShrink: 0,\n        ...style,\n      }}\n    >\n      {mark}\n    </span>\n  );\n}\n"],"names":["logoColors","logoFills","jsxs","jsx"],"mappings":";;;;AAIO,MAAM,4BAA4B,EAAE,OAAO,IAAI,QAAQ,GAAA;AAGvD,MAAM,yBAAyBA,KAAAA,WAAW;AAM1C,MAAM,gCAAgC;AACtC,MAAM,+BAA+B;AAgC5C,SAAS,kBACP,SACA,YACQ;AACR,MAAI,YAAY;AACd,WAAO;AAAA,EACT;AACA,SAAO,YAAY,UAAUC,KAAAA,UAAU,QAAQA,KAAAA,UAAU;AAC3D;AAQO,SAAS,wBAAwB;AAAA,EACtC,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,eAAe,CAAC;AACtB,QAAM,gBAAgB,aAAa,YAAY,OAAO,YAAY;AAClE,QAAM,WAAW,YAAY;AAC7B,QAAM,gBAAgB,kBAAkB,SAAS,UAAU;AAE3D,QAAM,OACJC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,OAAO,0BAA0B,KAAK,IAAI,0BAA0B,MAAM;AAAA,MACnF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW,gBAAgB,SAAY;AAAA,MACvC,OAAO,EAAE,SAAS,SAAS,YAAY,GAAG,GAAI,gBAAgB,SAAY,MAAA;AAAA,MAC1E,OAAM;AAAA,MACN,eAAa,gBAAgB;AAAA,MAC7B,MAAM,eAAe,SAAY;AAAA,MACjC,cAAY,eAAe,SAAY;AAAA,MAEtC,UAAA;AAAA,QAAA,CAAC,gBAAgBC,2BAAAA,IAAC,SAAA,EAAO,UAAA,IAAA,CAAI;AAAA,QAE7B,YAAYA,2BAAAA,IAAC,QAAA,EAAK,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI,MAAM,UAAA,CAAW;AAAA,QAClED,2BAAAA,KAAC,KAAA,EAAE,WAAU,yDACX,UAAA;AAAA,UAAAC,2BAAAA,IAAC,QAAA,EAAK,GAAE,4DAA2D,MAAM,eAAe;AAAA,UACxFA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAERA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAERA,2BAAAA,IAAC,QAAA,EAAK,GAAE,qDAAoD,MAAM,eAAe;AAAA,UACjFA,2BAAAA,IAAC,QAAA,EAAK,GAAE,qDAAoD,MAAM,cAAA,CAAe;AAAA,QAAA,EAAA,CACnF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,GAAG;AAAA,MAAA;AAAA,MAGJ,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;;;;;;"}

package/dist/components/FairmintLogo/FairmintLogoMarkRounded.d.ts

@@ -12,17 +12,25 @@ export declare const LOGO_MARK_ROUNDED_TILE: "#825BFF";
  */
 export declare const SIDE_NAV_COLLAPSED_LOGO_FRAME = 48;
 export declare const SIDE_NAV_COLLAPSED_LOGO_SIZE = 36;
+export type FairmintLogoMarkRoundedVariant = "tile" | "black" | "white";
 export interface FairmintLogoMarkRoundedProps {
-    /** Square size of the filled tile in pixels. @default 32 */
+    /** Square size of the mark in pixels. @default 32 */
     size?: number;
     /**
-     * Outer frame size. When set larger than `size`, centers the tile in a
+     * Outer frame size. When set larger than `size`, centers the mark in a
      * transparent square (e.g. frame 48 + size 36 for collapsed SideNav).
      */
     frameSize?: number;
-    /** Rounded tile fill. @default LOGO_MARK_ROUNDED_TILE */
+    /**
+     * `tile` — purple rounded square with white FT glyph (collapsed nav / app icon).
+     * `black` — standalone FT ligature for light mode.
+     * `white` — standalone FT ligature for dark mode.
+     * @default "tile"
+     */
+    variant?: FairmintLogoMarkRoundedVariant;
+    /** Rounded tile fill. Applies to `variant="tile"`. @default LOGO_MARK_ROUNDED_TILE */
     tileColor?: string;
-    /** Glyph fill on the tile. @default white */
+    /** Glyph fill override. Defaults from `variant`. */
     glyphColor?: string;
     /**
      * Accessible name when the mark is standalone (collapsed nav, favicon).
@@ -33,9 +41,10 @@ export interface FairmintLogoMarkRoundedProps {
     style?: CSSProperties;
 }
 /**
- * Fairmint FT mark on a rounded square — preferred collapsed SideNav / app-icon lockup.
- * Source geometry: FT Mark Rounded Square. The purple tile fills `size`; optional
- * `frameSize` adds transparent padding around it.
+ * Fairmint FT mark — preferred collapsed SideNav / app-icon lockup.
+ * Source geometry: FT Mark Rounded Square. `variant="tile"` fills `size` with
+ * the purple rounded square; `black` / `white` render the ligature alone for
+ * light and dark surfaces. Optional `frameSize` adds transparent padding.
  */
-export declare function FairmintLogoMarkRounded({ size, frameSize, tileColor, glyphColor, alt, className, style, }: FairmintLogoMarkRoundedProps): import("react").JSX.Element;
+export declare function FairmintLogoMarkRounded({ size, frameSize, variant, tileColor, glyphColor, alt, className, style, }: FairmintLogoMarkRoundedProps): import("react").JSX.Element;
 //# sourceMappingURL=FairmintLogoMarkRounded.d.ts.map

package/dist/components/FairmintLogo/FairmintLogoMarkRounded.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FairmintLogoMarkRounded.d.ts","sourceRoot":"","sources":["../../../src/components/FairmintLogo/FairmintLogoMarkRounded.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,uEAAuE;AACvE,eAAO,MAAM,yBAAyB;;;CAAqC,CAAC;AAE5E,sEAAsE;AACtE,eAAO,MAAM,sBAAsB,WAA6B,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,6BAA6B,KAAK,CAAC;AAChD,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAE/C,MAAM,WAAW,4BAA4B;IAC3C,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,IAAS,EACT,SAAS,EACT,SAAkC,EAClC,UAA4B,EAC5B,GAAG,EACH,SAAS,EACT,KAAK,GACN,EAAE,4BAA4B,+BAuD9B"}
+{"version":3,"file":"FairmintLogoMarkRounded.d.ts","sourceRoot":"","sources":["../../../src/components/FairmintLogo/FairmintLogoMarkRounded.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,uEAAuE;AACvE,eAAO,MAAM,yBAAyB;;;CAAqC,CAAC;AAE5E,sEAAsE;AACtE,eAAO,MAAM,sBAAsB,WAA6B,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,6BAA6B,KAAK,CAAC;AAChD,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAE/C,MAAM,MAAM,8BAA8B,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAExE,MAAM,WAAW,4BAA4B;IAC3C,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,8BAA8B,CAAC;IACzC,sFAAsF;IACtF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAYD;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,IAAS,EACT,SAAS,EACT,OAAgB,EAChB,SAAkC,EAClC,UAAU,EACV,GAAG,EACH,SAAS,EACT,KAAK,GACN,EAAE,4BAA4B,+BAyD9B"}

package/dist/components/FairmintLogo/FairmintLogoMarkRounded.js

@@ -4,17 +4,26 @@ const LOGO_MARK_ROUNDED_VIEWBOX = { width: 36, height: 36 };
 const LOGO_MARK_ROUNDED_TILE = logoColors.markRoundedTile;
 const SIDE_NAV_COLLAPSED_LOGO_FRAME = 48;
 const SIDE_NAV_COLLAPSED_LOGO_SIZE = 36;
+function resolveGlyphColor(variant, glyphColor) {
+  if (glyphColor) {
+    return glyphColor;
+  }
+  return variant === "black" ? logoFills.black : logoFills.white;
+}
 function FairmintLogoMarkRounded({
   size = 32,
   frameSize,
+  variant = "tile",
   tileColor = LOGO_MARK_ROUNDED_TILE,
-  glyphColor = logoFills.white,
+  glyphColor,
   alt,
   className,
   style
 }) {
   const isDecorative = !alt;
   const resolvedFrame = frameSize && frameSize > size ? frameSize : void 0;
+  const showTile = variant === "tile";
+  const resolvedGlyph = resolveGlyphColor(variant, glyphColor);
   const mark = /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -29,25 +38,25 @@ function FairmintLogoMarkRounded({
       "aria-label": isDecorative ? void 0 : alt,
       children: [
         !isDecorative && /* @__PURE__ */ jsx("title", { children: alt }),
-        /* @__PURE__ */ jsx("rect", { width: "36", height: "36", rx: "8", fill: tileColor }),
+        showTile && /* @__PURE__ */ jsx("rect", { width: "36", height: "36", rx: "8", fill: tileColor }),
         /* @__PURE__ */ jsxs("g", { transform: "translate(18 18.07) scale(1.12) translate(-18 -18.07)", children: [
-          /* @__PURE__ */ jsx("path", { d: "M12.4661 20.3562V26.446H15.1251V18.7954L12.4661 20.3562Z", fill: glyphColor }),
+          /* @__PURE__ */ jsx("path", { d: "M12.4661 20.3562V26.446H15.1251V18.7954L12.4661 20.3562Z", fill: resolvedGlyph }),
           /* @__PURE__ */ jsx(
             "path",
             {
               d: "M22.5714 22.7206V18.7932L19.9113 20.354V22.9428C19.9113 25.447 20.5768 26.7091 23.391 26.7091C24.0115 26.7091 24.9416 26.6194 25.4954 26.3556V24.1164C25.1627 24.3598 24.5198 24.4499 24.055 24.4499C22.8819 24.4499 22.5714 23.7836 22.5714 22.7206Z",
-              fill: glyphColor
+              fill: resolvedGlyph
             }
           ),
           /* @__PURE__ */ jsx(
             "path",
             {
               d: "M16.4329 9.42847C13.1307 9.42847 12.4656 11.3557 12.4656 14.3028V15.822H15.1254V13.8818C15.1254 12.7079 15.3456 11.6881 16.8315 11.6881C17.2086 11.6881 17.5629 11.7555 17.9388 11.8445L18.1148 9.5829C17.5625 9.47197 17.0071 9.42847 16.4329 9.42847Z",
-              fill: glyphColor
+              fill: resolvedGlyph
             }
           ),
-          /* @__PURE__ */ jsx("path", { d: "M22.5714 12.7273H19.9113V15.8081H22.5714V12.7273Z", fill: glyphColor }),
-          /* @__PURE__ */ jsx("path", { d: "M25.7283 15.8218H10.2717V18.0841H25.7283V15.8218Z", fill: glyphColor })
+          /* @__PURE__ */ jsx("path", { d: "M22.5714 12.7273H19.9113V15.8081H22.5714V12.7273Z", fill: resolvedGlyph }),
+          /* @__PURE__ */ jsx("path", { d: "M25.7283 15.8218H10.2717V18.0841H25.7283V15.8218Z", fill: resolvedGlyph })
         ] })
       ]
     }

package/dist/components/FairmintLogo/FairmintLogoMarkRounded.js.map

@@ -1 +1 @@
-{"version":3,"file":"FairmintLogoMarkRounded.js","sources":["../../../src/components/FairmintLogo/FairmintLogoMarkRounded.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { logoColors, logoFills } from \"../../theme/logo\";\n\n/** Product FT mark — rounded square tile from the brand icon asset. */\nexport const LOGO_MARK_ROUNDED_VIEWBOX = { width: 36, height: 36 } as const;\n\n/** Default tile fill from the FT Mark Rounded Square source asset. */\nexport const LOGO_MARK_ROUNDED_TILE = logoColors.markRoundedTile;\n\n/**\n * Collapsed SideNav layout: 48×48 frame with a 36×36 mark centered inside\n * (white/transparent padding around the tile).\n */\nexport const SIDE_NAV_COLLAPSED_LOGO_FRAME = 48;\nexport const SIDE_NAV_COLLAPSED_LOGO_SIZE = 36;\n\nexport interface FairmintLogoMarkRoundedProps {\n  /** Square size of the filled tile in pixels. @default 32 */\n  size?: number;\n  /**\n   * Outer frame size. When set larger than `size`, centers the tile in a\n   * transparent square (e.g. frame 48 + size 36 for collapsed SideNav).\n   */\n  frameSize?: number;\n  /** Rounded tile fill. @default LOGO_MARK_ROUNDED_TILE */\n  tileColor?: string;\n  /** Glyph fill on the tile. @default white */\n  glyphColor?: string;\n  /**\n   * Accessible name when the mark is standalone (collapsed nav, favicon).\n   * Omit or pass `\"\"` when decorative inside a labeled lockup or link.\n   */\n  alt?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * Fairmint FT mark on a rounded square — preferred collapsed SideNav / app-icon lockup.\n * Source geometry: FT Mark Rounded Square. The purple tile fills `size`; optional\n * `frameSize` adds transparent padding around it.\n */\nexport function FairmintLogoMarkRounded({\n  size = 32,\n  frameSize,\n  tileColor = LOGO_MARK_ROUNDED_TILE,\n  glyphColor = logoFills.white,\n  alt,\n  className,\n  style,\n}: FairmintLogoMarkRoundedProps) {\n  const isDecorative = !alt;\n  const resolvedFrame = frameSize && frameSize > size ? frameSize : undefined;\n\n  const mark = (\n    <svg\n      viewBox={`0 0 ${LOGO_MARK_ROUNDED_VIEWBOX.width} ${LOGO_MARK_ROUNDED_VIEWBOX.height}`}\n      width={size}\n      height={size}\n      className={resolvedFrame ? undefined : className}\n      style={{ display: \"block\", flexShrink: 0, ...(resolvedFrame ? undefined : style) }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden={isDecorative || undefined}\n      role={isDecorative ? undefined : \"img\"}\n      aria-label={isDecorative ? undefined : alt}\n    >\n      {!isDecorative && <title>{alt}</title>}\n      {/* Tile fills the viewBox — padding belongs on `frameSize`, not inside the SVG. */}\n      <rect width=\"36\" height=\"36\" rx=\"8\" fill={tileColor} />\n      <g transform=\"translate(18 18.07) scale(1.12) translate(-18 -18.07)\">\n        <path d=\"M12.4661 20.3562V26.446H15.1251V18.7954L12.4661 20.3562Z\" fill={glyphColor} />\n        <path\n          d=\"M22.5714 22.7206V18.7932L19.9113 20.354V22.9428C19.9113 25.447 20.5768 26.7091 23.391 26.7091C24.0115 26.7091 24.9416 26.6194 25.4954 26.3556V24.1164C25.1627 24.3598 24.5198 24.4499 24.055 24.4499C22.8819 24.4499 22.5714 23.7836 22.5714 22.7206Z\"\n          fill={glyphColor}\n        />\n        <path\n          d=\"M16.4329 9.42847C13.1307 9.42847 12.4656 11.3557 12.4656 14.3028V15.822H15.1254V13.8818C15.1254 12.7079 15.3456 11.6881 16.8315 11.6881C17.2086 11.6881 17.5629 11.7555 17.9388 11.8445L18.1148 9.5829C17.5625 9.47197 17.0071 9.42847 16.4329 9.42847Z\"\n          fill={glyphColor}\n        />\n        <path d=\"M22.5714 12.7273H19.9113V15.8081H22.5714V12.7273Z\" fill={glyphColor} />\n        <path d=\"M25.7283 15.8218H10.2717V18.0841H25.7283V15.8218Z\" fill={glyphColor} />\n      </g>\n    </svg>\n  );\n\n  if (!resolvedFrame) {\n    return mark;\n  }\n\n  return (\n    <span\n      className={className}\n      style={{\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        width: resolvedFrame,\n        height: resolvedFrame,\n        flexShrink: 0,\n        ...style,\n      }}\n    >\n      {mark}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAIO,MAAM,4BAA4B,EAAE,OAAO,IAAI,QAAQ,GAAA;AAGvD,MAAM,yBAAyB,WAAW;AAM1C,MAAM,gCAAgC;AACtC,MAAM,+BAA+B;AA4BrC,SAAS,wBAAwB;AAAA,EACtC,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,aAAa,UAAU;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,eAAe,CAAC;AACtB,QAAM,gBAAgB,aAAa,YAAY,OAAO,YAAY;AAElE,QAAM,OACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,OAAO,0BAA0B,KAAK,IAAI,0BAA0B,MAAM;AAAA,MACnF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW,gBAAgB,SAAY;AAAA,MACvC,OAAO,EAAE,SAAS,SAAS,YAAY,GAAG,GAAI,gBAAgB,SAAY,MAAA;AAAA,MAC1E,OAAM;AAAA,MACN,eAAa,gBAAgB;AAAA,MAC7B,MAAM,eAAe,SAAY;AAAA,MACjC,cAAY,eAAe,SAAY;AAAA,MAEtC,UAAA;AAAA,QAAA,CAAC,gBAAgB,oBAAC,SAAA,EAAO,UAAA,IAAA,CAAI;AAAA,QAE9B,oBAAC,UAAK,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI,MAAM,UAAA,CAAW;AAAA,QACrD,qBAAC,KAAA,EAAE,WAAU,yDACX,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,GAAE,4DAA2D,MAAM,YAAY;AAAA,UACrF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAER;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAER,oBAAC,QAAA,EAAK,GAAE,qDAAoD,MAAM,YAAY;AAAA,UAC9E,oBAAC,QAAA,EAAK,GAAE,qDAAoD,MAAM,WAAA,CAAY;AAAA,QAAA,EAAA,CAChF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,GAAG;AAAA,MAAA;AAAA,MAGJ,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"FairmintLogoMarkRounded.js","sources":["../../../src/components/FairmintLogo/FairmintLogoMarkRounded.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { logoColors, logoFills } from \"../../theme/logo\";\n\n/** Product FT mark — rounded square tile from the brand icon asset. */\nexport const LOGO_MARK_ROUNDED_VIEWBOX = { width: 36, height: 36 } as const;\n\n/** Default tile fill from the FT Mark Rounded Square source asset. */\nexport const LOGO_MARK_ROUNDED_TILE = logoColors.markRoundedTile;\n\n/**\n * Collapsed SideNav layout: 48×48 frame with a 36×36 mark centered inside\n * (white/transparent padding around the tile).\n */\nexport const SIDE_NAV_COLLAPSED_LOGO_FRAME = 48;\nexport const SIDE_NAV_COLLAPSED_LOGO_SIZE = 36;\n\nexport type FairmintLogoMarkRoundedVariant = \"tile\" | \"black\" | \"white\";\n\nexport interface FairmintLogoMarkRoundedProps {\n  /** Square size of the mark in pixels. @default 32 */\n  size?: number;\n  /**\n   * Outer frame size. When set larger than `size`, centers the mark in a\n   * transparent square (e.g. frame 48 + size 36 for collapsed SideNav).\n   */\n  frameSize?: number;\n  /**\n   * `tile` — purple rounded square with white FT glyph (collapsed nav / app icon).\n   * `black` — standalone FT ligature for light mode.\n   * `white` — standalone FT ligature for dark mode.\n   * @default \"tile\"\n   */\n  variant?: FairmintLogoMarkRoundedVariant;\n  /** Rounded tile fill. Applies to `variant=\"tile\"`. @default LOGO_MARK_ROUNDED_TILE */\n  tileColor?: string;\n  /** Glyph fill override. Defaults from `variant`. */\n  glyphColor?: string;\n  /**\n   * Accessible name when the mark is standalone (collapsed nav, favicon).\n   * Omit or pass `\"\"` when decorative inside a labeled lockup or link.\n   */\n  alt?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nfunction resolveGlyphColor(\n  variant: FairmintLogoMarkRoundedVariant,\n  glyphColor: string | undefined,\n): string {\n  if (glyphColor) {\n    return glyphColor;\n  }\n  return variant === \"black\" ? logoFills.black : logoFills.white;\n}\n\n/**\n * Fairmint FT mark — preferred collapsed SideNav / app-icon lockup.\n * Source geometry: FT Mark Rounded Square. `variant=\"tile\"` fills `size` with\n * the purple rounded square; `black` / `white` render the ligature alone for\n * light and dark surfaces. Optional `frameSize` adds transparent padding.\n */\nexport function FairmintLogoMarkRounded({\n  size = 32,\n  frameSize,\n  variant = \"tile\",\n  tileColor = LOGO_MARK_ROUNDED_TILE,\n  glyphColor,\n  alt,\n  className,\n  style,\n}: FairmintLogoMarkRoundedProps) {\n  const isDecorative = !alt;\n  const resolvedFrame = frameSize && frameSize > size ? frameSize : undefined;\n  const showTile = variant === \"tile\";\n  const resolvedGlyph = resolveGlyphColor(variant, glyphColor);\n\n  const mark = (\n    <svg\n      viewBox={`0 0 ${LOGO_MARK_ROUNDED_VIEWBOX.width} ${LOGO_MARK_ROUNDED_VIEWBOX.height}`}\n      width={size}\n      height={size}\n      className={resolvedFrame ? undefined : className}\n      style={{ display: \"block\", flexShrink: 0, ...(resolvedFrame ? undefined : style) }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden={isDecorative || undefined}\n      role={isDecorative ? undefined : \"img\"}\n      aria-label={isDecorative ? undefined : alt}\n    >\n      {!isDecorative && <title>{alt}</title>}\n      {/* Tile fills the viewBox — padding belongs on `frameSize`, not inside the SVG. */}\n      {showTile && <rect width=\"36\" height=\"36\" rx=\"8\" fill={tileColor} />}\n      <g transform=\"translate(18 18.07) scale(1.12) translate(-18 -18.07)\">\n        <path d=\"M12.4661 20.3562V26.446H15.1251V18.7954L12.4661 20.3562Z\" fill={resolvedGlyph} />\n        <path\n          d=\"M22.5714 22.7206V18.7932L19.9113 20.354V22.9428C19.9113 25.447 20.5768 26.7091 23.391 26.7091C24.0115 26.7091 24.9416 26.6194 25.4954 26.3556V24.1164C25.1627 24.3598 24.5198 24.4499 24.055 24.4499C22.8819 24.4499 22.5714 23.7836 22.5714 22.7206Z\"\n          fill={resolvedGlyph}\n        />\n        <path\n          d=\"M16.4329 9.42847C13.1307 9.42847 12.4656 11.3557 12.4656 14.3028V15.822H15.1254V13.8818C15.1254 12.7079 15.3456 11.6881 16.8315 11.6881C17.2086 11.6881 17.5629 11.7555 17.9388 11.8445L18.1148 9.5829C17.5625 9.47197 17.0071 9.42847 16.4329 9.42847Z\"\n          fill={resolvedGlyph}\n        />\n        <path d=\"M22.5714 12.7273H19.9113V15.8081H22.5714V12.7273Z\" fill={resolvedGlyph} />\n        <path d=\"M25.7283 15.8218H10.2717V18.0841H25.7283V15.8218Z\" fill={resolvedGlyph} />\n      </g>\n    </svg>\n  );\n\n  if (!resolvedFrame) {\n    return mark;\n  }\n\n  return (\n    <span\n      className={className}\n      style={{\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        width: resolvedFrame,\n        height: resolvedFrame,\n        flexShrink: 0,\n        ...style,\n      }}\n    >\n      {mark}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAIO,MAAM,4BAA4B,EAAE,OAAO,IAAI,QAAQ,GAAA;AAGvD,MAAM,yBAAyB,WAAW;AAM1C,MAAM,gCAAgC;AACtC,MAAM,+BAA+B;AAgC5C,SAAS,kBACP,SACA,YACQ;AACR,MAAI,YAAY;AACd,WAAO;AAAA,EACT;AACA,SAAO,YAAY,UAAU,UAAU,QAAQ,UAAU;AAC3D;AAQO,SAAS,wBAAwB;AAAA,EACtC,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,eAAe,CAAC;AACtB,QAAM,gBAAgB,aAAa,YAAY,OAAO,YAAY;AAClE,QAAM,WAAW,YAAY;AAC7B,QAAM,gBAAgB,kBAAkB,SAAS,UAAU;AAE3D,QAAM,OACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,OAAO,0BAA0B,KAAK,IAAI,0BAA0B,MAAM;AAAA,MACnF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW,gBAAgB,SAAY;AAAA,MACvC,OAAO,EAAE,SAAS,SAAS,YAAY,GAAG,GAAI,gBAAgB,SAAY,MAAA;AAAA,MAC1E,OAAM;AAAA,MACN,eAAa,gBAAgB;AAAA,MAC7B,MAAM,eAAe,SAAY;AAAA,MACjC,cAAY,eAAe,SAAY;AAAA,MAEtC,UAAA;AAAA,QAAA,CAAC,gBAAgB,oBAAC,SAAA,EAAO,UAAA,IAAA,CAAI;AAAA,QAE7B,YAAY,oBAAC,QAAA,EAAK,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI,MAAM,UAAA,CAAW;AAAA,QAClE,qBAAC,KAAA,EAAE,WAAU,yDACX,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,GAAE,4DAA2D,MAAM,eAAe;AAAA,UACxF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAER;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAER,oBAAC,QAAA,EAAK,GAAE,qDAAoD,MAAM,eAAe;AAAA,UACjF,oBAAC,QAAA,EAAK,GAAE,qDAAoD,MAAM,cAAA,CAAe;AAAA,QAAA,EAAA,CACnF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,GAAG;AAAA,MAAA;AAAA,MAGJ,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/layout/AppHeader/AppHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.cjs","sources":["../../../../src/components/layout/AppHeader/AppHeader.tsx"],"sourcesContent":["import { Burger, Group } from \"@mantine/core\";\nimport type { ReactNode } from \"react\";\n\nexport interface AppHeaderProps {\n  /** Logo element (typically FairmintLogo). */\n  logo: ReactNode;\n  /** Right-aligned content (user menu, actions). */\n  rightSection?: ReactNode;\n  /** Whether mobile nav is open. Controls burger state. */\n  mobileNavOpened?: boolean;\n  /** Toggle mobile nav callback. */\n  onMobileNavToggle?: () => void;\n  /** Header height in pixels. @default 60 */\n  height?: number;\n}\n\nexport function AppHeader({\n  logo,\n  rightSection,\n  mobileNavOpened = false,\n  onMobileNavToggle,\n  height = 60,\n}: AppHeaderProps) {\n  return (\n    <Group h={height} px=\"md\" justify=\"space-between\">\n      <Group>\n        {onMobileNavToggle && (\n          <Burger\n            opened={mobileNavOpened}\n            onClick={onMobileNavToggle}\n            hiddenFrom=\"sm\"\n            size=\"sm\"\n            aria-label=\"Toggle navigation\"\n          />\n        )}\n        {logo}\n      </Group>\n      {rightSection}\n    </Group>\n  );\n}\n"],"names":["Group","jsxs","jsx","Burger"],"mappings":";;;;;AAgBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,SAAS;AACX,GAAmB;AACjB,yCACGA,aAAA,EAAM,GAAG,QAAQ,IAAG,MAAK,SAAQ,iBAChC,UAAA;AAAA,IAAAC,gCAACD,MAAAA,OAAA,EACE,UAAA;AAAA,MAAA,qBACCE,2BAAAA;AAAAA,QAACC,OAAAA;AAAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAW;AAAA,UACX,MAAK;AAAA,UACL,cAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAGd;AAAA,IAAA,GACH;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;;"}
+{"version":3,"file":"AppHeader.cjs","sources":["../../../../src/components/layout/AppHeader/AppHeader.tsx"],"sourcesContent":["import { Burger, Group } from \"@mantine/core\";\nimport type { ReactNode } from \"react\";\n\nexport interface AppHeaderProps {\n  /** Logo element (typically FairmintLogo). Omit in product shells — wordmark lives in SideNav. */\n  logo?: ReactNode;\n  /** Right-aligned content (user menu, actions). */\n  rightSection?: ReactNode;\n  /** Whether mobile nav is open. Controls burger state. */\n  mobileNavOpened?: boolean;\n  /** Toggle mobile nav callback. */\n  onMobileNavToggle?: () => void;\n  /** Header height in pixels. @default 60 */\n  height?: number;\n}\n\nexport function AppHeader({\n  logo,\n  rightSection,\n  mobileNavOpened = false,\n  onMobileNavToggle,\n  height = 60,\n}: AppHeaderProps) {\n  return (\n    <Group h={height} px=\"md\" justify=\"space-between\">\n      <Group>\n        {onMobileNavToggle && (\n          <Burger\n            opened={mobileNavOpened}\n            onClick={onMobileNavToggle}\n            hiddenFrom=\"sm\"\n            size=\"sm\"\n            aria-label=\"Toggle navigation\"\n          />\n        )}\n        {logo}\n      </Group>\n      {rightSection}\n    </Group>\n  );\n}\n"],"names":["Group","jsxs","jsx","Burger"],"mappings":";;;;;AAgBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,SAAS;AACX,GAAmB;AACjB,yCACGA,aAAA,EAAM,GAAG,QAAQ,IAAG,MAAK,SAAQ,iBAChC,UAAA;AAAA,IAAAC,gCAACD,MAAAA,OAAA,EACE,UAAA;AAAA,MAAA,qBACCE,2BAAAA;AAAAA,QAACC,OAAAA;AAAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAW;AAAA,UACX,MAAK;AAAA,UACL,cAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAGd;AAAA,IAAA,GACH;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;;"}

package/dist/components/layout/AppHeader/AppHeader.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 export interface AppHeaderProps {
-    /** Logo element (typically FairmintLogo). */
-    logo: ReactNode;
+    /** Logo element (typically FairmintLogo). Omit in product shells — wordmark lives in SideNav. */
+    logo?: ReactNode;
     /** Right-aligned content (user menu, actions). */
     rightSection?: ReactNode;
     /** Whether mobile nav is open. Controls burger state. */

package/dist/components/layout/AppHeader/AppHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,IAAI,EAAE,SAAS,CAAC;IAChB,kDAAkD;IAClD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,yDAAyD;IACzD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,YAAY,EACZ,eAAuB,EACvB,iBAAiB,EACjB,MAAW,GACZ,EAAE,cAAc,+BAkBhB"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,cAAc;IAC7B,iGAAiG;IACjG,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kDAAkD;IAClD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,yDAAyD;IACzD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,YAAY,EACZ,eAAuB,EACvB,iBAAiB,EACjB,MAAW,GACZ,EAAE,cAAc,+BAkBhB"}

package/dist/components/layout/AppHeader/AppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sources":["../../../../src/components/layout/AppHeader/AppHeader.tsx"],"sourcesContent":["import { Burger, Group } from \"@mantine/core\";\nimport type { ReactNode } from \"react\";\n\nexport interface AppHeaderProps {\n  /** Logo element (typically FairmintLogo). */\n  logo: ReactNode;\n  /** Right-aligned content (user menu, actions). */\n  rightSection?: ReactNode;\n  /** Whether mobile nav is open. Controls burger state. */\n  mobileNavOpened?: boolean;\n  /** Toggle mobile nav callback. */\n  onMobileNavToggle?: () => void;\n  /** Header height in pixels. @default 60 */\n  height?: number;\n}\n\nexport function AppHeader({\n  logo,\n  rightSection,\n  mobileNavOpened = false,\n  onMobileNavToggle,\n  height = 60,\n}: AppHeaderProps) {\n  return (\n    <Group h={height} px=\"md\" justify=\"space-between\">\n      <Group>\n        {onMobileNavToggle && (\n          <Burger\n            opened={mobileNavOpened}\n            onClick={onMobileNavToggle}\n            hiddenFrom=\"sm\"\n            size=\"sm\"\n            aria-label=\"Toggle navigation\"\n          />\n        )}\n        {logo}\n      </Group>\n      {rightSection}\n    </Group>\n  );\n}\n"],"names":[],"mappings":";;;AAgBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,SAAS;AACX,GAAmB;AACjB,8BACG,OAAA,EAAM,GAAG,QAAQ,IAAG,MAAK,SAAQ,iBAChC,UAAA;AAAA,IAAA,qBAAC,OAAA,EACE,UAAA;AAAA,MAAA,qBACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAW;AAAA,UACX,MAAK;AAAA,UACL,cAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAGd;AAAA,IAAA,GACH;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"AppHeader.js","sources":["../../../../src/components/layout/AppHeader/AppHeader.tsx"],"sourcesContent":["import { Burger, Group } from \"@mantine/core\";\nimport type { ReactNode } from \"react\";\n\nexport interface AppHeaderProps {\n  /** Logo element (typically FairmintLogo). Omit in product shells — wordmark lives in SideNav. */\n  logo?: ReactNode;\n  /** Right-aligned content (user menu, actions). */\n  rightSection?: ReactNode;\n  /** Whether mobile nav is open. Controls burger state. */\n  mobileNavOpened?: boolean;\n  /** Toggle mobile nav callback. */\n  onMobileNavToggle?: () => void;\n  /** Header height in pixels. @default 60 */\n  height?: number;\n}\n\nexport function AppHeader({\n  logo,\n  rightSection,\n  mobileNavOpened = false,\n  onMobileNavToggle,\n  height = 60,\n}: AppHeaderProps) {\n  return (\n    <Group h={height} px=\"md\" justify=\"space-between\">\n      <Group>\n        {onMobileNavToggle && (\n          <Burger\n            opened={mobileNavOpened}\n            onClick={onMobileNavToggle}\n            hiddenFrom=\"sm\"\n            size=\"sm\"\n            aria-label=\"Toggle navigation\"\n          />\n        )}\n        {logo}\n      </Group>\n      {rightSection}\n    </Group>\n  );\n}\n"],"names":[],"mappings":";;;AAgBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,SAAS;AACX,GAAmB;AACjB,8BACG,OAAA,EAAM,GAAG,QAAQ,IAAG,MAAK,SAAQ,iBAChC,UAAA;AAAA,IAAA,qBAAC,OAAA,EACE,UAAA;AAAA,MAAA,qBACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAW;AAAA,UACX,MAAK;AAAA,UACL,cAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAGd;AAAA,IAAA,GACH;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/layout/SideNav/studioNavFixtures.d.ts

@@ -13,7 +13,7 @@ export declare const studioLegacyWithFundraisingSections: NonNullable<SideNavPro
 /** Master / venture fund portals — no Cap Table / Fundraising / Grants / Tax. */
 export declare const studioFundSections: NonNullable<SideNavProps["sections"]>;
 /** Labels that must appear for the unified (new portal) Studio nav. */
-export declare const STUDIO_UNIFIED_TOP_LEVEL_LABELS: readonly ["Dashboard", "Stakeholders", "Cap Table", "Fundraising", "Grants", "Tax & Compliance", "Documents"];
+export declare const STUDIO_UNIFIED_TOP_LEVEL_LABELS: readonly ["Dashboard", "Stakeholders", "Cap Table", "Fundraising", "Grants", "Tax & Compliance", "Documents", "Settings"];
 /** Labels that must appear for the classic legacy Studio nav. */
-export declare const STUDIO_LEGACY_TOP_LEVEL_LABELS: readonly ["Dashboard", "Stakeholders", "Investments", "Cap Table", "Shares", "SAFEs", "Warrants", "Grants", "Tax & Compliance", "Documents"];
+export declare const STUDIO_LEGACY_TOP_LEVEL_LABELS: readonly ["Dashboard", "Stakeholders", "Investments", "Cap Table", "Shares", "SAFEs", "Warrants", "Grants", "Tax & Compliance", "Documents", "Settings"];
 //# sourceMappingURL=studioNavFixtures.d.ts.map

package/dist/components/layout/SideNav/studioNavFixtures.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"studioNavFixtures.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/SideNav/studioNavFixtures.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AA0G9C,kGAAkG;AAClG,eAAO,MAAM,qBAAqB,EAAE,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAKvE,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,4BAA4B,EAAE,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAK9E,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAgBtE,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,mCAAmC,EAAE,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAiBrF,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,kBAAkB,EAAE,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAmBpE,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,+BAA+B,+GAQlC,CAAC;AAEX,iEAAiE;AACjE,eAAO,MAAM,8BAA8B,8IAWjC,CAAC"}
+{"version":3,"file":"studioNavFixtures.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/SideNav/studioNavFixtures.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AA+G9C,kGAAkG;AAClG,eAAO,MAAM,qBAAqB,EAAE,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAKvE,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,4BAA4B,EAAE,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAe9E,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAiBtE,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,mCAAmC,EAAE,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAkBrF,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,kBAAkB,EAAE,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAoBpE,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,+BAA+B,2HASlC,CAAC;AAEX,iEAAiE;AACjE,eAAO,MAAM,8BAA8B,0JAYjC,CAAC"}

package/dist/components/primitives/muiCompat.cjs

@@ -24,6 +24,7 @@ const Modal = require("../../node_modules/@mantine/core/esm/components/Modal/Mod
 const Stack$1 = require("../../node_modules/@mantine/core/esm/components/Stack/Stack.cjs");
 const Menu = require("../../node_modules/@mantine/core/esm/components/Menu/Menu.cjs");
 const TextInput = require("../../node_modules/@mantine/core/esm/components/TextInput/TextInput.cjs");
+const colors = require("../../theme/colors.cjs");
 dayjs_min.extend(customParseFormat);
 const compatBreakpointKeys = ["xs", "sm", "md", "lg", "xl"];
 const compatFallbackBreakpoints = {
@@ -96,6 +97,34 @@ const mapCompatSize = (size) => {
   }
   return void 0;
 };
+const mantineChipVariants = /* @__PURE__ */ new Set([
+  "default",
+  "dot",
+  "filled",
+  "gradient",
+  "light",
+  "outline",
+  "transparent",
+  "white"
+]);
+const mapChipVariant = (variant) => {
+  if (variant === "outlined") return "outline";
+  if (typeof variant === "string" && mantineChipVariants.has(variant)) return variant;
+  return void 0;
+};
+const chipBadgeColorMap = {
+  default: colors.colors.neutral,
+  error: colors.colors.error,
+  info: colors.colors.info,
+  primary: colors.colors.primary,
+  secondary: colors.colors.neutral,
+  success: colors.colors.success,
+  warning: colors.colors.warning
+};
+const mapChipBadgeColor = (color) => {
+  if (typeof color !== "string" || !color) return colors.colors.neutral;
+  return chipBadgeColorMap[color] || color;
+};
 const mapCompatIconButtonSize = (size) => size === "small" ? "sm" : size === "medium" ? "md" : size === "large" ? "lg" : size;
 const optionalBoolean = (value) => typeof value === "boolean" ? value : void 0;
 const optionalString = (value) => typeof value === "string" ? value : void 0;
@@ -893,7 +922,9 @@ const Chip = ({
   icon,
   onClick,
   onDelete,
+  size,
   sx: sx2,
+  variant,
   ...props
 }) => {
   const chipClassName = [
@@ -948,9 +979,11 @@ const Chip = ({
     Badge.Badge,
     {
       className: chipClassName,
-      color: resolveCompatColor(color),
+      color: mapChipBadgeColor(color),
       leftSection: icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fairmint-chip-icon", children: icon }) : void 0,
+      size: mapCompatSize(size),
       style: { textTransform: "none", ...sxToStyle(sx2) },
+      variant: mapChipVariant(variant),
       ...props,
       children: content
     }