@fairmint/ui 0.3.26 → 0.3.27

package/dist/components/layout/SideNav/SideNav.js

@@ -1,15 +1,143 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { fairmintVars, radii } from "../../../theme/index.js";
+import { useUncontrolled } from "../../../node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.js";
 import { Stack } from "../../../node_modules/@mantine/core/esm/components/Stack/Stack.js";
-import { Text } from "../../../node_modules/@mantine/core/esm/components/Text/Text.js";
+import { Box } from "../../../node_modules/@mantine/core/esm/core/Box/Box.js";
+import { Group } from "../../../node_modules/@mantine/core/esm/components/Group/Group.js";
+import { Divider } from "../../../node_modules/@mantine/core/esm/components/Divider/Divider.js";
+import { UnstyledButton } from "../../../node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.js";
+import IconLayoutSidebarLeftExpand from "../../../node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutSidebarLeftExpand.js";
+import IconLayoutSidebarLeftCollapse from "../../../node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutSidebarLeftCollapse.js";
+import { Tooltip } from "../../../node_modules/@mantine/core/esm/components/Tooltip/Tooltip.js";
+import { ActionIcon } from "../../../node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.js";
+import { Menu } from "../../../node_modules/@mantine/core/esm/components/Menu/Menu.js";
 import { NavLink } from "../../../node_modules/@mantine/core/esm/components/NavLink/NavLink.js";
+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__ */ jsx(
+    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 ? fairmintVars.colorIconOnSurfaceSelected : "inherit"
+      },
+      children: letter
+    }
+  );
+}
+function CollapseToggle({
+  collapsed,
+  onToggle,
+  visible
+}) {
+  const label = collapsed ? "Expand navigation" : "Collapse navigation";
+  const Icon = collapsed ? IconLayoutSidebarLeftExpand : IconLayoutSidebarLeftCollapse;
+  const button = /* @__PURE__ */ jsx(
+    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: radii.md,
+        color: 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__ */ jsx(Icon, { size: 20, stroke: 1.5, "aria-hidden": true })
+    }
+  );
+  if (!collapsed) {
+    return button;
+  }
+  return /* @__PURE__ */ jsx(
+    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__ */ jsx(LetterFallback, { letter: getSideNavLetterFallback(labelText), active: Boolean(active) });
+  }
+  return void 0;
+}
+const COLLAPSED_ITEM_SIZE = 36;
+const navLinkStyles = (active) => ({
+  root: {
+    color: active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,
+    fontWeight: active ? 500 : 400,
+    borderRadius: radii.md,
+    // Prefer Fairmint selected surface over Mantine defaults for active chrome.
+    ...active ? {
+      "--nl-bg": fairmintVars.colorSurfaceSelected,
+      "--nl-hover": fairmintVars.colorSurfaceSelected,
+      "--nl-color": fairmintVars.colorIconOnSurfaceSelected,
+      backgroundColor: fairmintVars.colorSurfaceSelected
+    } : {}
+  },
+  section: {
+    color: active ? fairmintVars.colorIconOnSurfaceSelected : fairmintVars.colorIconTertiary
+  }
+});
+function ExpandedSideNavNode({ color, item, onItemClick }) {
   const containsActiveItem = hasActiveDescendant(item);
   const [opened, setOpened] = useState(item.open ?? containsActiveItem);
+  const labelText = getSideNavItemLabelText(item);
   useEffect(() => {
     if (item.open !== void 0) {
       setOpened(item.open);
@@ -21,8 +149,13 @@ function SideNavNode({ color, item, onItemClick }) {
   return /* @__PURE__ */ jsx(
     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,
@@ -30,20 +163,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: radii.md },
-      styles: {
-        root: {
-          color: item.active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,
-          fontWeight: item.active ? 500 : 400
-        },
-        section: {
-          color: item.active ? fairmintVars.colorBrandPrimary : fairmintVars.colorIconTertiary
+      styles: navLinkStyles(item.active),
+      children: item.children?.map((child) => /* @__PURE__ */ 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__ */ jsx(
+      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: fairmintVars.colorSurfaceSelected,
+          color: 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__ */ jsx(
+    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": fairmintVars.colorSurfaceSelected,
+          "--ai-hover": fairmintVars.colorSurfaceSelected,
+          "--ai-color": fairmintVars.colorIconOnSurfaceSelected,
+          "--ai-hover-color": fairmintVars.colorIconOnSurfaceSelected,
+          backgroundColor: fairmintVars.colorSurfaceSelected,
+          color: fairmintVars.colorIconOnSurfaceSelected
+        } : {
+          color: fairmintVars.colorIconTertiary
         }
       },
-      children: item.children?.map((child) => /* @__PURE__ */ jsx(SideNavNode, { item: child, color, onItemClick }, child.id))
+      children: leftSection
+    }
+  );
+  const control = hasChildren ? /* @__PURE__ */ jsxs(Menu, { position: "right-start", offset: 8, withinPortal: true, children: [
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        label: labelText,
+        position: "right",
+        withArrow: true,
+        events: { hover: true, focus: true, touch: true },
+        children: /* @__PURE__ */ jsx(Menu.Target, { children: link })
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsx(
+      CollapsedNestedMenuItems,
+      {
+        items: item.children ?? [],
+        onItemClick,
+        color
+      }
+    ) })
+  ] }) : /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      label: labelText,
+      position: "right",
+      withArrow: true,
+      events: { hover: true, focus: true, touch: true },
+      children: link
     }
   );
+  return /* @__PURE__ */ jsx(Box, { style: { width: "100%", display: "flex", justifyContent: "center" }, children: control });
+}
+function SideNavNode(props) {
+  if (props.collapsed) {
+    return /* @__PURE__ */ jsx(CollapsedSideNavNode, { ...props });
+  }
+  return /* @__PURE__ */ jsx(ExpandedSideNavNode, { ...props });
 }
 function SideNav({
   items = [],
@@ -51,30 +289,135 @@ 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__ */ jsx(
+  const [collapsedState, setCollapsedState] = useUncontrolled({
+    value: collapsed,
+    defaultValue: defaultCollapsed,
+    finalValue: false,
+    onChange: onCollapsedChange
+  });
+  const hasBottomChrome = Boolean(footer || cta || profile);
+  const [headerHovered, setHeaderHovered] = useState(false);
+  const showExpandedCollapseControl = headerHovered;
+  const showHeaderChrome = Boolean(header) || collapsible;
+  const collapseToggle = collapsible ? /* @__PURE__ */ jsx(
+    CollapseToggle,
+    {
+      collapsed: collapsedState,
+      visible: collapsedState ? true : showExpandedCollapseControl,
+      onToggle: () => setCollapsedState(!collapsedState)
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
     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 ? fairmintVars.colorBorderDefault : void 0,
         boxShadow: "none"
       },
-      children: resolvedSections.map((section) => /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
-        section.label && /* @__PURE__ */ jsx(Text, { size: "xs", fw: 700, tt: "uppercase", c: fairmintVars.colorTextTertiary, px: "sm", children: section.label }),
-        section.items.map((item) => /* @__PURE__ */ jsx(SideNavNode, { item, color, onItemClick }, item.id))
-      ] }, section.id))
+      children: [
+        showHeaderChrome ? collapsedState ? /* @__PURE__ */ jsxs(Stack, { gap: 6, align: "center", children: [
+          header ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%"
+              },
+              children: header
+            }
+          ) : null,
+          collapseToggle
+        ] }) : /* @__PURE__ */ jsxs(
+          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__ */ jsx(
+                Box,
+                {
+                  style: {
+                    flex: 1,
+                    minWidth: 0,
+                    overflow: "hidden",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "flex-start"
+                  },
+                  children: header
+                }
+              ) : null,
+              collapseToggle
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(Stack, { gap: 4, style: { flex: 1, minHeight: 0, overflow: "auto" }, children: resolvedSections.flatMap(
+          (section) => section.items.map((item) => /* @__PURE__ */ jsx(
+            SideNavNode,
+            {
+              item,
+              color,
+              onItemClick,
+              collapsed: collapsedState
+            },
+            `${section.id}:${item.id}`
+          ))
+        ) }),
+        hasBottomChrome ? /* @__PURE__ */ jsx(Stack, { gap: "sm", style: { flexShrink: 0 }, children: footer ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          cta ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              style: {
+                width: "100%",
+                display: "flex",
+                justifyContent: collapsedState ? "center" : "stretch"
+              },
+              children: cta
+            }
+          ) : null,
+          cta && profile ? /* @__PURE__ */ jsx(Divider, { color: fairmintVars.colorBorderDefault }) : null,
+          profile ? /* @__PURE__ */ jsx(Box, { style: { width: "100%" }, children: profile }) : null
+        ] }) }) : null
+      ]
     }
   );
 }
 export {
-  SideNav
+  SIDE_NAV_COLLAPSED_WIDTH,
+  SIDE_NAV_WIDTH,
+  SideNav,
+  getSideNavItemLabelText,
+  getSideNavLetterFallback
 };
 //# sourceMappingURL=SideNav.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SideNav.js","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import { NavLink, Stack, Text } from \"@mantine/core\";\nimport { type ReactNode, useEffect, useState } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\n\nexport interface SideNavItem {\n  /** Unique identifier for this nav item (e.g., route path or slug). */\n  id: string;\n  /** Display label. */\n  label: ReactNode;\n  /** Icon element. */\n  icon?: ReactNode;\n  /** Optional content rendered at the end of the item, such as a badge. */\n  rightSection?: ReactNode;\n  /** Whether this item is currently active. */\n  active?: boolean;\n  /** Whether the item is unavailable. */\n  disabled?: boolean;\n  /** Nested navigation items. */\n  children?: SideNavItem[];\n  /** Controlled expanded state for items with children. */\n  open?: boolean;\n}\n\nexport interface SideNavSection {\n  /** Unique identifier for the section. */\n  id: string;\n  /** Optional visible section heading. */\n  label?: ReactNode;\n  /** Navigation items in this section. */\n  items: SideNavItem[];\n}\n\nexport interface SideNavProps {\n  /** Navigation items to render when section headings are not needed. */\n  items?: SideNavItem[];\n  /** Grouped navigation items with optional section headings. */\n  sections?: SideNavSection[];\n  /** Callback when a nav item is clicked. Receives the item's `id`. */\n  onItemClick: (id: string) => void;\n  /** Active color. @default colors.primary */\n  color?: string;\n  /** Accessible label for the navigation landmark. @default \"Main navigation\" */\n  ariaLabel?: string;\n  /** Render a light right border when the parent shell does not already own the divider. @default false */\n  withBorder?: boolean;\n}\n\nfunction hasActiveDescendant(item: SideNavItem): boolean {\n  return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;\n}\n\ninterface SideNavNodeProps {\n  color: string;\n  item: SideNavItem;\n  onItemClick: (id: string) => void;\n}\n\nfunction SideNavNode({ color, item, onItemClick }: SideNavNodeProps) {\n  const containsActiveItem = hasActiveDescendant(item);\n  const [opened, setOpened] = useState(item.open ?? containsActiveItem);\n\n  useEffect(() => {\n    if (item.open !== undefined) {\n      setOpened(item.open);\n    } else if (containsActiveItem) {\n      setOpened(true);\n    }\n  }, [containsActiveItem, item.open]);\n\n  const hasChildren = Boolean(item.children?.length);\n\n  return (\n    <NavLink\n      label={item.label}\n      leftSection={item.icon}\n      rightSection={item.rightSection}\n      active={item.active}\n      disabled={item.disabled}\n      color={color}\n      variant=\"light\"\n      childrenOffset={16}\n      opened={hasChildren ? opened : undefined}\n      onClick={\n        hasChildren\n          ? () => setOpened((currentOpened) => !currentOpened)\n          : () => onItemClick(item.id)\n      }\n      style={{ borderRadius: radii.md }}\n      styles={{\n        root: {\n          color: item.active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,\n          fontWeight: item.active ? 500 : 400,\n        },\n        section: {\n          color: item.active ? fairmintVars.colorBrandPrimary : fairmintVars.colorIconTertiary,\n        },\n      }}\n    >\n      {item.children?.map((child) => (\n        <SideNavNode key={child.id} item={child} color={color} onItemClick={onItemClick} />\n      ))}\n    </NavLink>\n  );\n}\n\nexport function SideNav({\n  items = [],\n  sections,\n  onItemClick,\n  color = \"indigo\",\n  ariaLabel = \"Main navigation\",\n  withBorder = false,\n}: SideNavProps) {\n  const resolvedSections = sections ?? [{ id: \"main\", items }];\n\n  return (\n    <Stack\n      component=\"nav\"\n      gap=\"md\"\n      h=\"100%\"\n      p=\"md\"\n      aria-label={ariaLabel}\n      style={{\n        borderRight: withBorder ? \"1px solid\" : undefined,\n        borderRightColor: withBorder ? fairmintVars.colorBorderDefault : undefined,\n        boxShadow: \"none\",\n      }}\n    >\n      {resolvedSections.map((section) => (\n        <Stack key={section.id} gap={4}>\n          {section.label && (\n            <Text size=\"xs\" fw={700} tt=\"uppercase\" c={fairmintVars.colorTextTertiary} px=\"sm\">\n              {section.label}\n            </Text>\n          )}\n          {section.items.map((item) => (\n            <SideNavNode key={item.id} item={item} color={color} onItemClick={onItemClick} />\n          ))}\n        </Stack>\n      ))}\n    </Stack>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA+CA,SAAS,oBAAoB,MAA4B;AACvD,SAAO,KAAK,UAAU,KAAK,CAAC,UAAU,MAAM,UAAU,oBAAoB,KAAK,CAAC,KAAK;AACvF;AAQA,SAAS,YAAY,EAAE,OAAO,MAAM,eAAiC;AACnE,QAAM,qBAAqB,oBAAoB,IAAI;AACnD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK,QAAQ,kBAAkB;AAEpE,YAAU,MAAM;AACd,QAAI,KAAK,SAAS,QAAW;AAC3B,gBAAU,KAAK,IAAI;AAAA,IACrB,WAAW,oBAAoB;AAC7B,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,oBAAoB,KAAK,IAAI,CAAC;AAElC,QAAM,cAAc,QAAQ,KAAK,UAAU,MAAM;AAEjD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,KAAK;AAAA,MACZ,aAAa,KAAK;AAAA,MAClB,cAAc,KAAK;AAAA,MACnB,QAAQ,KAAK;AAAA,MACb,UAAU,KAAK;AAAA,MACf;AAAA,MACA,SAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,QAAQ,cAAc,SAAS;AAAA,MAC/B,SACE,cACI,MAAM,UAAU,CAAC,kBAAkB,CAAC,aAAa,IACjD,MAAM,YAAY,KAAK,EAAE;AAAA,MAE/B,OAAO,EAAE,cAAc,MAAM,GAAA;AAAA,MAC7B,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,OAAO,KAAK,SAAS,aAAa,mBAAmB,aAAa;AAAA,UAClE,YAAY,KAAK,SAAS,MAAM;AAAA,QAAA;AAAA,QAElC,SAAS;AAAA,UACP,OAAO,KAAK,SAAS,aAAa,oBAAoB,aAAa;AAAA,QAAA;AAAA,MACrE;AAAA,MAGD,UAAA,KAAK,UAAU,IAAI,CAAC,UACnB,oBAAC,aAAA,EAA2B,MAAM,OAAO,OAAc,YAAA,GAArC,MAAM,EAAyD,CAClF;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAAS,QAAQ;AAAA,EACtB,QAAQ,CAAA;AAAA,EACR;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,aAAa;AACf,GAAiB;AACf,QAAM,mBAAmB,YAAY,CAAC,EAAE,IAAI,QAAQ,OAAO;AAE3D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,GAAE;AAAA,MACF,GAAE;AAAA,MACF,cAAY;AAAA,MACZ,OAAO;AAAA,QACL,aAAa,aAAa,cAAc;AAAA,QACxC,kBAAkB,aAAa,aAAa,qBAAqB;AAAA,QACjE,WAAW;AAAA,MAAA;AAAA,MAGZ,2BAAiB,IAAI,CAAC,YACrB,qBAAC,OAAA,EAAuB,KAAK,GAC1B,UAAA;AAAA,QAAA,QAAQ,SACP,oBAAC,MAAA,EAAK,MAAK,MAAK,IAAI,KAAK,IAAG,aAAY,GAAG,aAAa,mBAAmB,IAAG,MAC3E,kBAAQ,OACX;AAAA,QAED,QAAQ,MAAM,IAAI,CAAC,SAClB,oBAAC,aAAA,EAA0B,MAAY,OAAc,eAAnC,KAAK,EAAwD,CAChF;AAAA,MAAA,EAAA,GARS,QAAQ,EASpB,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"SideNav.js","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import {\n  ActionIcon,\n  Box,\n  Divider,\n  Group,\n  Menu,\n  NavLink,\n  type NavLinkProps,\n  Stack,\n  Tooltip,\n  UnstyledButton,\n} from \"@mantine/core\";\nimport { useUncontrolled } from \"@mantine/hooks\";\nimport { IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpand } from \"@tabler/icons-react\";\nimport { type ReactNode, useEffect, useState } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\n\n/** Expanded product side-nav width (Brand System shell metric). */\nexport const SIDE_NAV_WIDTH = 260;\n\n/**\n * Collapsed icon-rail width.\n * Proposed shell metric for Dylan / Brand System review — not yet in Brand System v3.4.\n */\nexport const SIDE_NAV_COLLAPSED_WIDTH = 80;\n\nexport interface SideNavItem {\n  /** Unique identifier for this nav item (e.g., route path or slug). */\n  id: string;\n  /** Display label. */\n  label: ReactNode;\n  /**\n   * Accessible name when `label` is not a plain string.\n   * Also used for collapsed tooltips and letter-fallback derivation.\n   */\n  ariaLabel?: string;\n  /** Icon element. */\n  icon?: ReactNode;\n  /** Optional content rendered at the end of the item, such as a badge. */\n  rightSection?: ReactNode;\n  /** Whether this item is currently active. */\n  active?: boolean;\n  /** Whether the item is unavailable. */\n  disabled?: boolean;\n  /** Nested navigation items. */\n  children?: SideNavItem[];\n  /** Controlled expanded state for items with children. */\n  open?: boolean;\n}\n\nexport interface SideNavSection {\n  /** Unique identifier for the section. */\n  id: string;\n  /** Navigation items in this section. */\n  items: SideNavItem[];\n}\n\nexport interface SideNavProps {\n  /** Navigation items to render when section headings are not needed. */\n  items?: SideNavItem[];\n  /** Grouped navigation items. Sections are data-only — Fairmint product nav does not render section titles. */\n  sections?: SideNavSection[];\n  /** Callback when a nav item is clicked. Receives the item's `id`. */\n  onItemClick: (id: string) => void;\n  /** Active color. @default colors.primary */\n  color?: string;\n  /** Accessible label for the navigation landmark. @default \"Main navigation\" */\n  ariaLabel?: string;\n  /** Render a light right border when the parent shell does not already own the divider. @default false */\n  withBorder?: boolean;\n  /**\n   * Logo or other chrome above the nav list.\n   * Consumers own expanded wordmark vs collapsed mark switching.\n   */\n  header?: ReactNode;\n  /**\n   * Primary nav CTA pinned above the profile (Investor \"Add Investment\", Studio \"New\").\n   * Prefer this over stuffing the CTA into `items`.\n   */\n  cta?: ReactNode;\n  /**\n   * Account / profile control pinned to the bottom of the rail.\n   * Product shells keep profile here — not in the scrollable destination list or AppHeader.\n   */\n  profile?: ReactNode;\n  /**\n   * Custom bottom chrome. When set, replaces the standard `cta` + divider + `profile` composition.\n   */\n  footer?: ReactNode;\n  /** Controlled collapsed (icon-rail) state. */\n  collapsed?: boolean;\n  /** Uncontrolled initial collapsed state. @default false */\n  defaultCollapsed?: boolean;\n  /** Called when the user toggles collapse. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** When true, render a collapse/expand control beside the logo (visible on header hover). @default false */\n  collapsible?: boolean;\n}\n\nfunction hasActiveDescendant(item: SideNavItem): boolean {\n  return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;\n}\n\n/** Resolve a plain-text name for tooltips, aria-label, and letter fallback. */\nexport function getSideNavItemLabelText(item: Pick<SideNavItem, \"label\" | \"ariaLabel\">): string {\n  if (item.ariaLabel) {\n    return item.ariaLabel;\n  }\n  if (typeof item.label === \"string\") {\n    return item.label;\n  }\n  if (typeof item.label === \"number\") {\n    return String(item.label);\n  }\n  return \"Item\";\n}\n\n/** First letter/number monogram for icon-less items in the collapsed rail. */\nexport function getSideNavLetterFallback(labelText: string): string {\n  const match = labelText.match(/[\\p{L}\\p{N}]/u);\n  return match ? match[0].toUpperCase() : \"?\";\n}\n\nfunction LetterFallback({ letter, active = false }: { letter: string; active?: boolean }) {\n  return (\n    <Box\n      component=\"span\"\n      aria-hidden\n      data-active={active || undefined}\n      style={{\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        width: 20,\n        height: 20,\n        flexShrink: 0,\n        fontSize: 12,\n        fontWeight: active ? 700 : 600,\n        lineHeight: 1,\n        // Selected chrome lives on the parent control — glyph matches icon sizing.\n        color: active ? fairmintVars.colorIconOnSurfaceSelected : \"inherit\",\n      }}\n    >\n      {letter}\n    </Box>\n  );\n}\n\nfunction CollapseToggle({\n  collapsed,\n  onToggle,\n  visible,\n}: {\n  collapsed: boolean;\n  onToggle: () => void;\n  /** When false, hide visually but keep focusable for keyboard users via opacity/focus styles. */\n  visible: boolean;\n}) {\n  const label = collapsed ? \"Expand navigation\" : \"Collapse navigation\";\n  const Icon = collapsed ? IconLayoutSidebarLeftExpand : IconLayoutSidebarLeftCollapse;\n\n  const button = (\n    <UnstyledButton\n      data-sidenav-collapse\n      aria-label={label}\n      aria-expanded={!collapsed}\n      onClick={onToggle}\n      style={{\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        height: 32,\n        flexShrink: 0,\n        borderRadius: radii.md,\n        color: fairmintVars.colorIconTertiary,\n        opacity: visible ? 1 : 0,\n        pointerEvents: visible ? \"auto\" : \"none\",\n        transition: \"opacity 120ms ease\",\n        // Keep a layout slot when expanded so the wordmark does not shift on hover.\n        // Collapsed: always a fixed control below the logo.\n        width: 32,\n        overflow: \"hidden\",\n        padding: 0,\n      }}\n    >\n      <Icon size={20} stroke={1.5} aria-hidden />\n    </UnstyledButton>\n  );\n\n  if (!collapsed) {\n    return button;\n  }\n\n  return (\n    <Tooltip\n      label={label}\n      position=\"right\"\n      withArrow\n      events={{ hover: true, focus: true, touch: true }}\n      disabled={!visible}\n    >\n      {button}\n    </Tooltip>\n  );\n}\n\nfunction resolveLeftSection(\n  item: SideNavItem,\n  labelText: string,\n  { requireIcon, active }: { requireIcon: boolean; active?: boolean },\n): ReactNode {\n  if (item.icon) {\n    return item.icon;\n  }\n  if (requireIcon) {\n    return <LetterFallback letter={getSideNavLetterFallback(labelText)} active={Boolean(active)} />;\n  }\n  return undefined;\n}\n\n/** Collapsed rail control size — matches square CTA chrome. */\nconst COLLAPSED_ITEM_SIZE = 36;\n\nconst navLinkStyles = (active: boolean | undefined): NavLinkProps[\"styles\"] => ({\n  root: {\n    color: active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,\n    fontWeight: active ? 500 : 400,\n    borderRadius: radii.md,\n    // Prefer Fairmint selected surface over Mantine defaults for active chrome.\n    ...(active\n      ? {\n          \"--nl-bg\": fairmintVars.colorSurfaceSelected,\n          \"--nl-hover\": fairmintVars.colorSurfaceSelected,\n          \"--nl-color\": fairmintVars.colorIconOnSurfaceSelected,\n          backgroundColor: fairmintVars.colorSurfaceSelected,\n        }\n      : {}),\n  },\n  section: {\n    color: active ? fairmintVars.colorIconOnSurfaceSelected : fairmintVars.colorIconTertiary,\n  },\n});\n\ninterface SideNavNodeProps {\n  color: string;\n  item: SideNavItem;\n  onItemClick: (id: string) => void;\n  collapsed: boolean;\n}\n\nfunction ExpandedSideNavNode({ color, item, onItemClick }: Omit<SideNavNodeProps, \"collapsed\">) {\n  const containsActiveItem = hasActiveDescendant(item);\n  const [opened, setOpened] = useState(item.open ?? containsActiveItem);\n  const labelText = getSideNavItemLabelText(item);\n\n  useEffect(() => {\n    if (item.open !== undefined) {\n      setOpened(item.open);\n    } else if (containsActiveItem) {\n      setOpened(true);\n    }\n  }, [containsActiveItem, item.open]);\n\n  const hasChildren = Boolean(item.children?.length);\n\n  return (\n    <NavLink\n      component=\"button\"\n      type=\"button\"\n      label={item.label}\n      leftSection={resolveLeftSection(item, labelText, {\n        requireIcon: false,\n        active: item.active,\n      })}\n      rightSection={item.rightSection}\n      active={item.active}\n      disabled={item.disabled}\n      color={color}\n      variant=\"light\"\n      childrenOffset={16}\n      opened={hasChildren ? opened : undefined}\n      aria-label={item.ariaLabel}\n      onClick={\n        hasChildren\n          ? () => setOpened((currentOpened) => !currentOpened)\n          : () => onItemClick(item.id)\n      }\n      styles={navLinkStyles(item.active)}\n    >\n      {item.children?.map((child) => (\n        <ExpandedSideNavNode key={child.id} item={child} color={color} onItemClick={onItemClick} />\n      ))}\n    </NavLink>\n  );\n}\n\n/** Flatten nested groups to leaves for the collapsed flyout (one actionable list). */\nfunction collectCollapsedMenuLeaves(items: SideNavItem[]): SideNavItem[] {\n  return items.flatMap((item) =>\n    item.children?.length ? collectCollapsedMenuLeaves(item.children) : [item],\n  );\n}\n\nfunction CollapsedNestedMenuItems({\n  items,\n  onItemClick,\n  color,\n}: {\n  items: SideNavItem[];\n  onItemClick: (id: string) => void;\n  color: string;\n}) {\n  return collectCollapsedMenuLeaves(items).map((child) => {\n    const childLabel = getSideNavItemLabelText(child);\n    const isActive = Boolean(child.active);\n    return (\n      <Menu.Item\n        key={child.id}\n        disabled={child.disabled}\n        leftSection={resolveLeftSection(child, childLabel, {\n          requireIcon: true,\n          active: isActive,\n        })}\n        onClick={() => onItemClick(child.id)}\n        aria-current={isActive ? \"page\" : undefined}\n        data-active={isActive || undefined}\n        color={isActive ? color : undefined}\n        style={\n          isActive\n            ? {\n                backgroundColor: fairmintVars.colorSurfaceSelected,\n                color: fairmintVars.colorIconOnSurfaceSelected,\n                fontWeight: 600,\n              }\n            : undefined\n        }\n      >\n        {child.label}\n      </Menu.Item>\n    );\n  });\n}\n\nfunction CollapsedSideNavNode({ color, item, onItemClick }: Omit<SideNavNodeProps, \"collapsed\">) {\n  const labelText = getSideNavItemLabelText(item);\n  const hasChildren = Boolean(item.children?.length);\n  const isActive = Boolean(item.active || hasActiveDescendant(item));\n  const leftSection = resolveLeftSection(item, labelText, {\n    requireIcon: true,\n    active: isActive,\n  });\n\n  // ActionIcon (not NavLink): NavLink.css forces `width: 100%` and asymmetric\n  // horizontal padding, which makes selected/hover chrome a wide pill.\n  // Selected fill uses Fairmint surface/selected — Mantine `light` is too dim in dark mode.\n  const link = (\n    <ActionIcon\n      type=\"button\"\n      variant=\"subtle\"\n      color={color}\n      size={COLLAPSED_ITEM_SIZE}\n      radius=\"md\"\n      disabled={item.disabled}\n      aria-label={labelText}\n      aria-current={isActive ? \"page\" : undefined}\n      data-active={isActive || undefined}\n      onClick={hasChildren ? undefined : () => onItemClick(item.id)}\n      style={{\n        width: COLLAPSED_ITEM_SIZE,\n        height: COLLAPSED_ITEM_SIZE,\n        minWidth: COLLAPSED_ITEM_SIZE,\n        minHeight: COLLAPSED_ITEM_SIZE,\n        ...(isActive\n          ? {\n              \"--ai-bg\": fairmintVars.colorSurfaceSelected,\n              \"--ai-hover\": fairmintVars.colorSurfaceSelected,\n              \"--ai-color\": fairmintVars.colorIconOnSurfaceSelected,\n              \"--ai-hover-color\": fairmintVars.colorIconOnSurfaceSelected,\n              backgroundColor: fairmintVars.colorSurfaceSelected,\n              color: fairmintVars.colorIconOnSurfaceSelected,\n            }\n          : {\n              color: fairmintVars.colorIconTertiary,\n            }),\n      }}\n    >\n      {leftSection}\n    </ActionIcon>\n  );\n\n  const control = hasChildren ? (\n    <Menu position=\"right-start\" offset={8} withinPortal>\n      <Tooltip\n        label={labelText}\n        position=\"right\"\n        withArrow\n        events={{ hover: true, focus: true, touch: true }}\n      >\n        <Menu.Target>{link}</Menu.Target>\n      </Tooltip>\n      <Menu.Dropdown>\n        <CollapsedNestedMenuItems\n          items={item.children ?? []}\n          onItemClick={onItemClick}\n          color={color}\n        />\n      </Menu.Dropdown>\n    </Menu>\n  ) : (\n    <Tooltip\n      label={labelText}\n      position=\"right\"\n      withArrow\n      events={{ hover: true, focus: true, touch: true }}\n    >\n      {link}\n    </Tooltip>\n  );\n\n  // Uniform Stack child so Menu vs Tooltip wrappers cannot skew item gaps.\n  return <Box style={{ width: \"100%\", display: \"flex\", justifyContent: \"center\" }}>{control}</Box>;\n}\n\nfunction SideNavNode(props: SideNavNodeProps) {\n  if (props.collapsed) {\n    return <CollapsedSideNavNode {...props} />;\n  }\n  return <ExpandedSideNavNode {...props} />;\n}\n\nexport function SideNav({\n  items = [],\n  sections,\n  onItemClick,\n  color = \"indigo\",\n  ariaLabel = \"Main navigation\",\n  withBorder = false,\n  header,\n  cta,\n  profile,\n  footer,\n  collapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapsible = false,\n}: SideNavProps) {\n  const resolvedSections = sections ?? [{ id: \"main\", items }];\n  const [collapsedState, setCollapsedState] = useUncontrolled({\n    value: collapsed,\n    defaultValue: defaultCollapsed,\n    finalValue: false,\n    onChange: onCollapsedChange,\n  });\n\n  const hasBottomChrome = Boolean(footer || cta || profile);\n  const [headerHovered, setHeaderHovered] = useState(false);\n  const showExpandedCollapseControl = headerHovered;\n  const showHeaderChrome = Boolean(header) || collapsible;\n\n  const collapseToggle = collapsible ? (\n    <CollapseToggle\n      collapsed={collapsedState}\n      visible={collapsedState ? true : showExpandedCollapseControl}\n      onToggle={() => setCollapsedState(!collapsedState)}\n    />\n  ) : null;\n\n  return (\n    <Stack\n      component=\"nav\"\n      gap=\"md\"\n      h=\"100%\"\n      p={collapsedState ? \"sm\" : \"md\"}\n      aria-label={ariaLabel}\n      data-collapsed={collapsedState || undefined}\n      style={{\n        borderRight: withBorder ? \"1px solid\" : undefined,\n        borderRightColor: withBorder ? fairmintVars.colorBorderDefault : undefined,\n        boxShadow: \"none\",\n      }}\n    >\n      {showHeaderChrome ? (\n        collapsedState ? (\n          <Stack gap={6} align=\"center\">\n            {header ? (\n              <Box\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  width: \"100%\",\n                }}\n              >\n                {header}\n              </Box>\n            ) : null}\n            {collapseToggle}\n          </Stack>\n        ) : (\n          <Group\n            justify=\"space-between\"\n            wrap=\"nowrap\"\n            gap=\"xs\"\n            align=\"center\"\n            style={{ minHeight: 32 }}\n            onMouseEnter={() => setHeaderHovered(true)}\n            onMouseLeave={() => setHeaderHovered(false)}\n            onFocusCapture={() => setHeaderHovered(true)}\n            onBlurCapture={(event) => {\n              if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n                setHeaderHovered(false);\n              }\n            }}\n          >\n            {header ? (\n              <Box\n                style={{\n                  flex: 1,\n                  minWidth: 0,\n                  overflow: \"hidden\",\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"flex-start\",\n                }}\n              >\n                {header}\n              </Box>\n            ) : null}\n            {collapseToggle}\n          </Group>\n        )\n      ) : null}\n\n      <Stack gap={4} style={{ flex: 1, minHeight: 0, overflow: \"auto\" }}>\n        {resolvedSections.flatMap((section) =>\n          section.items.map((item) => (\n            <SideNavNode\n              key={`${section.id}:${item.id}`}\n              item={item}\n              color={color}\n              onItemClick={onItemClick}\n              collapsed={collapsedState}\n            />\n          )),\n        )}\n      </Stack>\n\n      {hasBottomChrome ? (\n        <Stack gap=\"sm\" style={{ flexShrink: 0 }}>\n          {footer ?? (\n            <>\n              {cta ? (\n                <Box\n                  style={{\n                    width: \"100%\",\n                    display: \"flex\",\n                    justifyContent: collapsedState ? \"center\" : \"stretch\",\n                  }}\n                >\n                  {cta}\n                </Box>\n              ) : null}\n              {cta && profile ? <Divider color={fairmintVars.colorBorderDefault} /> : null}\n              {profile ? <Box style={{ width: \"100%\" }}>{profile}</Box> : null}\n            </>\n          )}\n        </Stack>\n      ) : null}\n    </Stack>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/fairmint-ui.cjs

@@ -5,6 +5,7 @@ const ErrorFallback = require("./components/ErrorFallback/ErrorFallback.cjs");
 const FairmintBrandLogo = require("./components/FairmintLogo/FairmintBrandLogo.cjs");
 const FairmintLogo = require("./components/FairmintLogo/FairmintLogo.cjs");
 const FairmintLogoMark = require("./components/FairmintLogo/FairmintLogoMark.cjs");
+const FairmintLogoMarkRounded = require("./components/FairmintLogo/FairmintLogoMarkRounded.cjs");
 const FairmintProvider = require("./components/FairmintProvider/FairmintProvider.cjs");
 const BirthdayDatePicker = require("./components/form/BirthdayDatePicker/BirthdayDatePicker.cjs");
 const EmailField = require("./components/form/EmailField.cjs");
@@ -151,6 +152,11 @@ exports.ErrorFallback = ErrorFallback.ErrorFallback;
 exports.FairmintBrandLogo = FairmintBrandLogo.FairmintBrandLogo;
 exports.FairmintLogo = FairmintLogo.FairmintLogo;
 exports.FairmintLogoMark = FairmintLogoMark.FairmintLogoMark;
+exports.FairmintLogoMarkRounded = FairmintLogoMarkRounded.FairmintLogoMarkRounded;
+exports.LOGO_MARK_ROUNDED_TILE = FairmintLogoMarkRounded.LOGO_MARK_ROUNDED_TILE;
+exports.LOGO_MARK_ROUNDED_VIEWBOX = FairmintLogoMarkRounded.LOGO_MARK_ROUNDED_VIEWBOX;
+exports.SIDE_NAV_COLLAPSED_LOGO_FRAME = FairmintLogoMarkRounded.SIDE_NAV_COLLAPSED_LOGO_FRAME;
+exports.SIDE_NAV_COLLAPSED_LOGO_SIZE = FairmintLogoMarkRounded.SIDE_NAV_COLLAPSED_LOGO_SIZE;
 exports.FairmintProvider = FairmintProvider.FairmintProvider;
 exports.BirthdayDatePicker = BirthdayDatePicker.BirthdayDatePicker;
 exports.EmailField = EmailField.EmailField;
@@ -219,6 +225,8 @@ exports.LoadingOverlay = LoadingOverlay.LoadingOverlay;
 exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
 exports.AppHeader = AppHeader.AppHeader;
 exports.PageHeader = PageHeader.PageHeader;
+exports.SIDE_NAV_COLLAPSED_WIDTH = SideNav.SIDE_NAV_COLLAPSED_WIDTH;
+exports.SIDE_NAV_WIDTH = SideNav.SIDE_NAV_WIDTH;
 exports.SideNav = SideNav.SideNav;
 exports.UserMenu = UserMenu.UserMenu;
 exports.ActionIcon = ActionIcon.ActionIcon;

package/dist/fairmint-ui.cjs.map

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

package/dist/fairmint-ui.js

@@ -3,6 +3,7 @@ import { ErrorFallback } from "./components/ErrorFallback/ErrorFallback.js";
 import { FairmintBrandLogo } from "./components/FairmintLogo/FairmintBrandLogo.js";
 import { FairmintLogo } from "./components/FairmintLogo/FairmintLogo.js";
 import { FairmintLogoMark } from "./components/FairmintLogo/FairmintLogoMark.js";
+import { FairmintLogoMarkRounded, LOGO_MARK_ROUNDED_TILE, LOGO_MARK_ROUNDED_VIEWBOX, SIDE_NAV_COLLAPSED_LOGO_FRAME, SIDE_NAV_COLLAPSED_LOGO_SIZE } from "./components/FairmintLogo/FairmintLogoMarkRounded.js";
 import { FairmintProvider } from "./components/FairmintProvider/FairmintProvider.js";
 import { BirthdayDatePicker } from "./components/form/BirthdayDatePicker/BirthdayDatePicker.js";
 import { EmailField, emailSchema } from "./components/form/EmailField.js";
@@ -53,7 +54,7 @@ import { LoadingOverlay } from "./components/LoadingOverlay/LoadingOverlay.js";
 import { LoadingSpinner } from "./components/LoadingSpinner/LoadingSpinner.js";
 import { AppHeader } from "./components/layout/AppHeader/AppHeader.js";
 import { PageHeader } from "./components/layout/PageHeader/PageHeader.js";
-import { SideNav } from "./components/layout/SideNav/SideNav.js";
+import { SIDE_NAV_COLLAPSED_WIDTH, SIDE_NAV_WIDTH, SideNav } from "./components/layout/SideNav/SideNav.js";
 import { UserMenu } from "./components/layout/UserMenu/UserMenu.js";
 import { ActionIcon } from "./components/primitives/ActionIcon/ActionIcon.js";
 import { Alert } from "./components/primitives/Alert/Alert.js";
@@ -283,6 +284,7 @@ export {
   FairmintBrandLogo,
   FairmintLogo,
   FairmintLogoMark,
+  FairmintLogoMarkRounded,
   FairmintProvider,
   FairmintRibbonMark,
   FileDownloadOutlinedIcon,
@@ -314,6 +316,8 @@ export {
   InstagramLogo,
   InvestmentCard,
   InvestorProfileCard,
+  LOGO_MARK_ROUNDED_TILE,
+  LOGO_MARK_ROUNDED_VIEWBOX,
   LanguageIcon,
   LanguageLogo,
   LightbulbOutlinedIcon,
@@ -391,6 +395,10 @@ export {
   ReplayIcon,
   RocketIcon,
   RocketLaunchOutlinedIcon,
+  SIDE_NAV_COLLAPSED_LOGO_FRAME,
+  SIDE_NAV_COLLAPSED_LOGO_SIZE,
+  SIDE_NAV_COLLAPSED_WIDTH,
+  SIDE_NAV_WIDTH,
   STEP_FLOW_DEFAULT_MAX_WIDTH,
   STEP_PROGRESS_MOBILE_BREAKPOINT,
   SafeIcon,

package/dist/fairmint-ui.js.map

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

package/dist/index.d.ts

@@ -10,6 +10,8 @@ export type { FairmintLogoProps, FairmintLogoVariant, } from './components/Fairm
 export { FairmintLogo } from './components/FairmintLogo/FairmintLogo';
 export type { FairmintLogoMarkFill, FairmintLogoMarkProps, } from './components/FairmintLogo/FairmintLogoMark';
 export { FairmintLogoMark } from './components/FairmintLogo/FairmintLogoMark';
+export type { FairmintLogoMarkRoundedProps } from './components/FairmintLogo/FairmintLogoMarkRounded';
+export { FairmintLogoMarkRounded, LOGO_MARK_ROUNDED_TILE, LOGO_MARK_ROUNDED_VIEWBOX, SIDE_NAV_COLLAPSED_LOGO_FRAME, SIDE_NAV_COLLAPSED_LOGO_SIZE, } from './components/FairmintLogo/FairmintLogoMarkRounded';
 export type { FairmintProviderProps } from './components/FairmintProvider/FairmintProvider';
 export { FairmintProvider } from './components/FairmintProvider/FairmintProvider';
 export type { BirthdayDatePickerProps } from './components/form/BirthdayDatePicker/BirthdayDatePicker';
@@ -111,7 +113,7 @@ export { AppHeader } from './components/layout/AppHeader/AppHeader';
 export type { PageHeaderProps } from './components/layout/PageHeader/PageHeader';
 export { PageHeader } from './components/layout/PageHeader/PageHeader';
 export type { SideNavItem, SideNavProps, SideNavSection, } from './components/layout/SideNav/SideNav';
-export { SideNav } from './components/layout/SideNav/SideNav';
+export { SIDE_NAV_COLLAPSED_WIDTH, SIDE_NAV_WIDTH, SideNav, } from './components/layout/SideNav/SideNav';
 export type { UserMenuItem, UserMenuProps } from './components/layout/UserMenu/UserMenu';
 export { UserMenu } from './components/layout/UserMenu/UserMenu';
 export { ActionIcon } from './components/primitives/ActionIcon/ActionIcon';