@fairmint/ui 0.3.25 → 0.3.27

package/dist/components/FairmintLogo/FairmintLogoMarkRounded.cjs

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const logo = require("../../theme/logo.cjs");
+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 FairmintLogoMarkRounded({
+  size = 32,
+  frameSize,
+  tileColor = LOGO_MARK_ROUNDED_TILE,
+  glyphColor = logo.logoFills.white,
+  alt,
+  className,
+  style
+}) {
+  const isDecorative = !alt;
+  const resolvedFrame = frameSize && frameSize > size ? frameSize : void 0;
+  const mark = /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${LOGO_MARK_ROUNDED_VIEWBOX.width} ${LOGO_MARK_ROUNDED_VIEWBOX.height}`,
+      width: size,
+      height: size,
+      className: resolvedFrame ? void 0 : className,
+      style: { display: "block", flexShrink: 0, ...resolvedFrame ? void 0 : style },
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": isDecorative || void 0,
+      role: isDecorative ? void 0 : "img",
+      "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 }),
+        /* @__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: "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
+            }
+          ),
+          /* @__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
+            }
+          ),
+          /* @__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 })
+        ] })
+      ]
+    }
+  );
+  if (!resolvedFrame) {
+    return mark;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: resolvedFrame,
+        height: resolvedFrame,
+        flexShrink: 0,
+        ...style
+      },
+      children: mark
+    }
+  );
+}
+exports.FairmintLogoMarkRounded = FairmintLogoMarkRounded;
+exports.LOGO_MARK_ROUNDED_TILE = LOGO_MARK_ROUNDED_TILE;
+exports.LOGO_MARK_ROUNDED_VIEWBOX = LOGO_MARK_ROUNDED_VIEWBOX;
+exports.SIDE_NAV_COLLAPSED_LOGO_FRAME = SIDE_NAV_COLLAPSED_LOGO_FRAME;
+exports.SIDE_NAV_COLLAPSED_LOGO_SIZE = SIDE_NAV_COLLAPSED_LOGO_SIZE;
+//# sourceMappingURL=FairmintLogoMarkRounded.cjs.map

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

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

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

@@ -0,0 +1,41 @@
+import { CSSProperties } from 'react';
+/** Product FT mark — rounded square tile from the brand icon asset. */
+export declare const LOGO_MARK_ROUNDED_VIEWBOX: {
+    readonly width: 36;
+    readonly height: 36;
+};
+/** Default tile fill from the FT Mark Rounded Square source asset. */
+export declare const LOGO_MARK_ROUNDED_TILE: "#825BFF";
+/**
+ * Collapsed SideNav layout: 48×48 frame with a 36×36 mark centered inside
+ * (white/transparent padding around the tile).
+ */
+export declare const SIDE_NAV_COLLAPSED_LOGO_FRAME = 48;
+export declare const SIDE_NAV_COLLAPSED_LOGO_SIZE = 36;
+export interface FairmintLogoMarkRoundedProps {
+    /** Square size of the filled tile in pixels. @default 32 */
+    size?: number;
+    /**
+     * Outer frame size. When set larger than `size`, centers the tile in a
+     * transparent square (e.g. frame 48 + size 36 for collapsed SideNav).
+     */
+    frameSize?: number;
+    /** Rounded tile fill. @default LOGO_MARK_ROUNDED_TILE */
+    tileColor?: string;
+    /** Glyph fill on the tile. @default white */
+    glyphColor?: string;
+    /**
+     * Accessible name when the mark is standalone (collapsed nav, favicon).
+     * Omit or pass `""` when decorative inside a labeled lockup or link.
+     */
+    alt?: string;
+    className?: string;
+    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.
+ */
+export declare function FairmintLogoMarkRounded({ size, frameSize, tileColor, glyphColor, alt, className, style, }: FairmintLogoMarkRoundedProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FairmintLogoMarkRounded.d.ts.map

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

@@ -0,0 +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,2CAuD9B"}

package/dist/components/FairmintLogo/FairmintLogoMarkRounded.js

@@ -0,0 +1,82 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { logoColors, logoFills } from "../../theme/logo.js";
+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 FairmintLogoMarkRounded({
+  size = 32,
+  frameSize,
+  tileColor = LOGO_MARK_ROUNDED_TILE,
+  glyphColor = logoFills.white,
+  alt,
+  className,
+  style
+}) {
+  const isDecorative = !alt;
+  const resolvedFrame = frameSize && frameSize > size ? frameSize : void 0;
+  const mark = /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${LOGO_MARK_ROUNDED_VIEWBOX.width} ${LOGO_MARK_ROUNDED_VIEWBOX.height}`,
+      width: size,
+      height: size,
+      className: resolvedFrame ? void 0 : className,
+      style: { display: "block", flexShrink: 0, ...resolvedFrame ? void 0 : style },
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": isDecorative || void 0,
+      role: isDecorative ? void 0 : "img",
+      "aria-label": isDecorative ? void 0 : alt,
+      children: [
+        !isDecorative && /* @__PURE__ */ jsx("title", { children: alt }),
+        /* @__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: "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
+            }
+          ),
+          /* @__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
+            }
+          ),
+          /* @__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 })
+        ] })
+      ]
+    }
+  );
+  if (!resolvedFrame) {
+    return mark;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: resolvedFrame,
+        height: resolvedFrame,
+        flexShrink: 0,
+        ...style
+      },
+      children: mark
+    }
+  );
+}
+export {
+  FairmintLogoMarkRounded,
+  LOGO_MARK_ROUNDED_TILE,
+  LOGO_MARK_ROUNDED_VIEWBOX,
+  SIDE_NAV_COLLAPSED_LOGO_FRAME,
+  SIDE_NAV_COLLAPSED_LOGO_SIZE
+};
+//# sourceMappingURL=FairmintLogoMarkRounded.js.map

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

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

package/dist/components/layout/SideNav/SideNav.cjs

@@ -3,15 +3,143 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const index = require("../../../theme/index.cjs");
+const useUncontrolled = require("../../../node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.cjs");
 const Stack = require("../../../node_modules/@mantine/core/esm/components/Stack/Stack.cjs");
-const Text = require("../../../node_modules/@mantine/core/esm/components/Text/Text.cjs");
+const Box = require("../../../node_modules/@mantine/core/esm/core/Box/Box.cjs");
+const Group = require("../../../node_modules/@mantine/core/esm/components/Group/Group.cjs");
+const Divider = require("../../../node_modules/@mantine/core/esm/components/Divider/Divider.cjs");
+const UnstyledButton = require("../../../node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.cjs");
+const IconLayoutSidebarLeftExpand = require("../../../node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutSidebarLeftExpand.cjs");
+const IconLayoutSidebarLeftCollapse = require("../../../node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutSidebarLeftCollapse.cjs");
+const Tooltip = require("../../../node_modules/@mantine/core/esm/components/Tooltip/Tooltip.cjs");
+const ActionIcon = require("../../../node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.cjs");
+const Menu = require("../../../node_modules/@mantine/core/esm/components/Menu/Menu.cjs");
 const NavLink = require("../../../node_modules/@mantine/core/esm/components/NavLink/NavLink.cjs");
+const SIDE_NAV_WIDTH = 260;
+const SIDE_NAV_COLLAPSED_WIDTH = 80;
 function hasActiveDescendant(item) {
   return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;
 }
-function SideNavNode({ color, item, onItemClick }) {
+function getSideNavItemLabelText(item) {
+  if (item.ariaLabel) {
+    return item.ariaLabel;
+  }
+  if (typeof item.label === "string") {
+    return item.label;
+  }
+  if (typeof item.label === "number") {
+    return String(item.label);
+  }
+  return "Item";
+}
+function getSideNavLetterFallback(labelText) {
+  const match = labelText.match(/[\p{L}\p{N}]/u);
+  return match ? match[0].toUpperCase() : "?";
+}
+function LetterFallback({ letter, active = false }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      component: "span",
+      "aria-hidden": true,
+      "data-active": active || void 0,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 20,
+        height: 20,
+        flexShrink: 0,
+        fontSize: 12,
+        fontWeight: active ? 700 : 600,
+        lineHeight: 1,
+        // Selected chrome lives on the parent control — glyph matches icon sizing.
+        color: active ? index.fairmintVars.colorIconOnSurfaceSelected : "inherit"
+      },
+      children: letter
+    }
+  );
+}
+function CollapseToggle({
+  collapsed,
+  onToggle,
+  visible
+}) {
+  const label = collapsed ? "Expand navigation" : "Collapse navigation";
+  const Icon = collapsed ? IconLayoutSidebarLeftExpand.default : IconLayoutSidebarLeftCollapse.default;
+  const button = /* @__PURE__ */ jsxRuntime.jsx(
+    UnstyledButton.UnstyledButton,
+    {
+      "data-sidenav-collapse": true,
+      "aria-label": label,
+      "aria-expanded": !collapsed,
+      onClick: onToggle,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: 32,
+        flexShrink: 0,
+        borderRadius: index.radii.md,
+        color: index.fairmintVars.colorIconTertiary,
+        opacity: visible ? 1 : 0,
+        pointerEvents: visible ? "auto" : "none",
+        transition: "opacity 120ms ease",
+        // Keep a layout slot when expanded so the wordmark does not shift on hover.
+        // Collapsed: always a fixed control below the logo.
+        width: 32,
+        overflow: "hidden",
+        padding: 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 20, stroke: 1.5, "aria-hidden": true })
+    }
+  );
+  if (!collapsed) {
+    return button;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tooltip.Tooltip,
+    {
+      label,
+      position: "right",
+      withArrow: true,
+      events: { hover: true, focus: true, touch: true },
+      disabled: !visible,
+      children: button
+    }
+  );
+}
+function resolveLeftSection(item, labelText, { requireIcon, active }) {
+  if (item.icon) {
+    return item.icon;
+  }
+  if (requireIcon) {
+    return /* @__PURE__ */ jsxRuntime.jsx(LetterFallback, { letter: getSideNavLetterFallback(labelText), active: Boolean(active) });
+  }
+  return void 0;
+}
+const COLLAPSED_ITEM_SIZE = 36;
+const navLinkStyles = (active) => ({
+  root: {
+    color: active ? index.fairmintVars.colorTextPrimary : index.fairmintVars.colorTextSecondary,
+    fontWeight: active ? 500 : 400,
+    borderRadius: index.radii.md,
+    // Prefer Fairmint selected surface over Mantine defaults for active chrome.
+    ...active ? {
+      "--nl-bg": index.fairmintVars.colorSurfaceSelected,
+      "--nl-hover": index.fairmintVars.colorSurfaceSelected,
+      "--nl-color": index.fairmintVars.colorIconOnSurfaceSelected,
+      backgroundColor: index.fairmintVars.colorSurfaceSelected
+    } : {}
+  },
+  section: {
+    color: active ? index.fairmintVars.colorIconOnSurfaceSelected : index.fairmintVars.colorIconTertiary
+  }
+});
+function ExpandedSideNavNode({ color, item, onItemClick }) {
   const containsActiveItem = hasActiveDescendant(item);
   const [opened, setOpened] = React.useState(item.open ?? containsActiveItem);
+  const labelText = getSideNavItemLabelText(item);
   React.useEffect(() => {
     if (item.open !== void 0) {
       setOpened(item.open);
@@ -23,8 +151,13 @@ function SideNavNode({ color, item, onItemClick }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavLink.NavLink,
     {
+      component: "button",
+      type: "button",
       label: item.label,
-      leftSection: item.icon,
+      leftSection: resolveLeftSection(item, labelText, {
+        requireIcon: false,
+        active: item.active
+      }),
       rightSection: item.rightSection,
       active: item.active,
       disabled: item.disabled,
@@ -32,20 +165,125 @@ function SideNavNode({ color, item, onItemClick }) {
       variant: "light",
       childrenOffset: 16,
       opened: hasChildren ? opened : void 0,
+      "aria-label": item.ariaLabel,
       onClick: hasChildren ? () => setOpened((currentOpened) => !currentOpened) : () => onItemClick(item.id),
-      style: { borderRadius: index.radii.md },
-      styles: {
-        root: {
-          color: item.active ? index.fairmintVars.colorTextPrimary : index.fairmintVars.colorTextSecondary,
-          fontWeight: item.active ? 500 : 400
-        },
-        section: {
-          color: item.active ? index.fairmintVars.colorBrandPrimary : index.fairmintVars.colorIconTertiary
+      styles: navLinkStyles(item.active),
+      children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(ExpandedSideNavNode, { item: child, color, onItemClick }, child.id))
+    }
+  );
+}
+function collectCollapsedMenuLeaves(items) {
+  return items.flatMap(
+    (item) => item.children?.length ? collectCollapsedMenuLeaves(item.children) : [item]
+  );
+}
+function CollapsedNestedMenuItems({
+  items,
+  onItemClick,
+  color
+}) {
+  return collectCollapsedMenuLeaves(items).map((child) => {
+    const childLabel = getSideNavItemLabelText(child);
+    const isActive = Boolean(child.active);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Menu.Menu.Item,
+      {
+        disabled: child.disabled,
+        leftSection: resolveLeftSection(child, childLabel, {
+          requireIcon: true,
+          active: isActive
+        }),
+        onClick: () => onItemClick(child.id),
+        "aria-current": isActive ? "page" : void 0,
+        "data-active": isActive || void 0,
+        color: isActive ? color : void 0,
+        style: isActive ? {
+          backgroundColor: index.fairmintVars.colorSurfaceSelected,
+          color: index.fairmintVars.colorIconOnSurfaceSelected,
+          fontWeight: 600
+        } : void 0,
+        children: child.label
+      },
+      child.id
+    );
+  });
+}
+function CollapsedSideNavNode({ color, item, onItemClick }) {
+  const labelText = getSideNavItemLabelText(item);
+  const hasChildren = Boolean(item.children?.length);
+  const isActive = Boolean(item.active || hasActiveDescendant(item));
+  const leftSection = resolveLeftSection(item, labelText, {
+    requireIcon: true,
+    active: isActive
+  });
+  const link = /* @__PURE__ */ jsxRuntime.jsx(
+    ActionIcon.ActionIcon,
+    {
+      type: "button",
+      variant: "subtle",
+      color,
+      size: COLLAPSED_ITEM_SIZE,
+      radius: "md",
+      disabled: item.disabled,
+      "aria-label": labelText,
+      "aria-current": isActive ? "page" : void 0,
+      "data-active": isActive || void 0,
+      onClick: hasChildren ? void 0 : () => onItemClick(item.id),
+      style: {
+        width: COLLAPSED_ITEM_SIZE,
+        height: COLLAPSED_ITEM_SIZE,
+        minWidth: COLLAPSED_ITEM_SIZE,
+        minHeight: COLLAPSED_ITEM_SIZE,
+        ...isActive ? {
+          "--ai-bg": index.fairmintVars.colorSurfaceSelected,
+          "--ai-hover": index.fairmintVars.colorSurfaceSelected,
+          "--ai-color": index.fairmintVars.colorIconOnSurfaceSelected,
+          "--ai-hover-color": index.fairmintVars.colorIconOnSurfaceSelected,
+          backgroundColor: index.fairmintVars.colorSurfaceSelected,
+          color: index.fairmintVars.colorIconOnSurfaceSelected
+        } : {
+          color: index.fairmintVars.colorIconTertiary
         }
       },
-      children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(SideNavNode, { item: child, color, onItemClick }, child.id))
+      children: leftSection
+    }
+  );
+  const control = hasChildren ? /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { position: "right-start", offset: 8, withinPortal: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Tooltip.Tooltip,
+      {
+        label: labelText,
+        position: "right",
+        withArrow: true,
+        events: { hover: true, focus: true, touch: true },
+        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Target, { children: link })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      CollapsedNestedMenuItems,
+      {
+        items: item.children ?? [],
+        onItemClick,
+        color
+      }
+    ) })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+    Tooltip.Tooltip,
+    {
+      label: labelText,
+      position: "right",
+      withArrow: true,
+      events: { hover: true, focus: true, touch: true },
+      children: link
     }
   );
+  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { style: { width: "100%", display: "flex", justifyContent: "center" }, children: control });
+}
+function SideNavNode(props) {
+  if (props.collapsed) {
+    return /* @__PURE__ */ jsxRuntime.jsx(CollapsedSideNavNode, { ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ExpandedSideNavNode, { ...props });
 }
 function SideNav({
   items = [],
@@ -53,28 +291,133 @@ function SideNav({
   onItemClick,
   color = "indigo",
   ariaLabel = "Main navigation",
-  withBorder = false
+  withBorder = false,
+  header,
+  cta,
+  profile,
+  footer,
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  collapsible = false
 }) {
   const resolvedSections = sections ?? [{ id: "main", items }];
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const [collapsedState, setCollapsedState] = useUncontrolled.useUncontrolled({
+    value: collapsed,
+    defaultValue: defaultCollapsed,
+    finalValue: false,
+    onChange: onCollapsedChange
+  });
+  const hasBottomChrome = Boolean(footer || cta || profile);
+  const [headerHovered, setHeaderHovered] = React.useState(false);
+  const showExpandedCollapseControl = headerHovered;
+  const showHeaderChrome = Boolean(header) || collapsible;
+  const collapseToggle = collapsible ? /* @__PURE__ */ jsxRuntime.jsx(
+    CollapseToggle,
+    {
+      collapsed: collapsedState,
+      visible: collapsedState ? true : showExpandedCollapseControl,
+      onToggle: () => setCollapsedState(!collapsedState)
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Stack.Stack,
     {
       component: "nav",
       gap: "md",
       h: "100%",
-      p: "md",
+      p: collapsedState ? "sm" : "md",
       "aria-label": ariaLabel,
+      "data-collapsed": collapsedState || void 0,
       style: {
         borderRight: withBorder ? "1px solid" : void 0,
         borderRightColor: withBorder ? index.fairmintVars.colorBorderDefault : void 0,
         boxShadow: "none"
       },
-      children: resolvedSections.map((section) => /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { gap: 4, children: [
-        section.label && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "xs", fw: 700, tt: "uppercase", c: index.fairmintVars.colorTextTertiary, px: "sm", children: section.label }),
-        section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SideNavNode, { item, color, onItemClick }, item.id))
-      ] }, section.id))
+      children: [
+        showHeaderChrome ? collapsedState ? /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { gap: 6, align: "center", children: [
+          header ? /* @__PURE__ */ jsxRuntime.jsx(
+            Box.Box,
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%"
+              },
+              children: header
+            }
+          ) : null,
+          collapseToggle
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+          Group.Group,
+          {
+            justify: "space-between",
+            wrap: "nowrap",
+            gap: "xs",
+            align: "center",
+            style: { minHeight: 32 },
+            onMouseEnter: () => setHeaderHovered(true),
+            onMouseLeave: () => setHeaderHovered(false),
+            onFocusCapture: () => setHeaderHovered(true),
+            onBlurCapture: (event) => {
+              if (!event.currentTarget.contains(event.relatedTarget)) {
+                setHeaderHovered(false);
+              }
+            },
+            children: [
+              header ? /* @__PURE__ */ jsxRuntime.jsx(
+                Box.Box,
+                {
+                  style: {
+                    flex: 1,
+                    minWidth: 0,
+                    overflow: "hidden",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "flex-start"
+                  },
+                  children: header
+                }
+              ) : null,
+              collapseToggle
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { gap: 4, style: { flex: 1, minHeight: 0, overflow: "auto" }, children: resolvedSections.flatMap(
+          (section) => section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            SideNavNode,
+            {
+              item,
+              color,
+              onItemClick,
+              collapsed: collapsedState
+            },
+            `${section.id}:${item.id}`
+          ))
+        ) }),
+        hasBottomChrome ? /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { gap: "sm", style: { flexShrink: 0 }, children: footer ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          cta ? /* @__PURE__ */ jsxRuntime.jsx(
+            Box.Box,
+            {
+              style: {
+                width: "100%",
+                display: "flex",
+                justifyContent: collapsedState ? "center" : "stretch"
+              },
+              children: cta
+            }
+          ) : null,
+          cta && profile ? /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { color: index.fairmintVars.colorBorderDefault }) : null,
+          profile ? /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { style: { width: "100%" }, children: profile }) : null
+        ] }) }) : null
+      ]
     }
   );
 }
+exports.SIDE_NAV_COLLAPSED_WIDTH = SIDE_NAV_COLLAPSED_WIDTH;
+exports.SIDE_NAV_WIDTH = SIDE_NAV_WIDTH;
 exports.SideNav = SideNav;
+exports.getSideNavItemLabelText = getSideNavItemLabelText;
+exports.getSideNavLetterFallback = getSideNavLetterFallback;
 //# sourceMappingURL=SideNav.cjs.map