@fairmint/ui 0.3.32 → 0.3.34

package/dist/components/layout/MobileNav/MobileNav.cjs

@@ -0,0 +1,267 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const index = require("../../../theme/index.cjs");
+const zIndex = require("../../../theme/zIndex.cjs");
+const ActionIcon = require("../../primitives/ActionIcon/ActionIcon.cjs");
+const Drawer = require("../../primitives/Drawer/Drawer.cjs");
+const layout = require("../../primitives/layout.cjs");
+const SideNav = require("../SideNav/SideNav.cjs");
+const Group = require("../../../node_modules/@mantine/core/esm/components/Group/Group.cjs");
+const IconX = require("../../../node_modules/@tabler/icons-react/dist/esm/icons/IconX.cjs");
+const UnstyledButton = require("../../../node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.cjs");
+const Text = require("../../../node_modules/@mantine/core/esm/components/Text/Text.cjs");
+const IconChevronDown = require("../../../node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.cjs");
+const MOBILE_NAV_WIDTH = "100%";
+const MOBILE_NAV_ROW_MIN_HEIGHT = 48;
+function MobileNavRow({
+  item,
+  depth,
+  onItemClick
+}) {
+  const hasChildren = Boolean(item.children?.length);
+  const labelText = SideNav.getSideNavItemLabelText(item);
+  const childActive = item.children?.some((child) => child.active) ?? false;
+  const [opened, setOpened] = React.useState(Boolean(item.open) || childActive);
+  const active = Boolean(item.active) && !hasChildren;
+  const paddingLeft = 12 + depth * 16;
+  return /* @__PURE__ */ jsxRuntime.jsxs(layout.Box, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      UnstyledButton.UnstyledButton,
+      {
+        type: "button",
+        disabled: item.disabled,
+        "aria-label": labelText,
+        "aria-current": active ? "page" : void 0,
+        "aria-expanded": hasChildren ? opened : void 0,
+        onClick: () => {
+          if (hasChildren) {
+            setOpened((value) => !value);
+            return;
+          }
+          onItemClick(item.id);
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          width: "100%",
+          minHeight: MOBILE_NAV_ROW_MIN_HEIGHT,
+          paddingLeft,
+          paddingRight: 12,
+          borderRadius: index.radii.md,
+          textAlign: "left",
+          cursor: item.disabled ? "not-allowed" : "pointer",
+          opacity: item.disabled ? 0.5 : 1,
+          backgroundColor: active ? index.fairmintVars.colorSurfaceSelected : "transparent",
+          color: active ? index.fairmintVars.colorIconOnSurfaceSelected : index.fairmintVars.colorTextPrimary
+        },
+        styles: {
+          root: {
+            "&:hover:not(:disabled)": {
+              backgroundColor: active ? index.fairmintVars.colorSurfaceSelected : index.fairmintVars.colorBgHover
+            }
+          }
+        },
+        children: [
+          item.icon ? /* @__PURE__ */ jsxRuntime.jsx(
+            layout.Box,
+            {
+              component: "span",
+              style: {
+                display: "inline-flex",
+                color: active ? index.fairmintVars.colorIconOnSurfaceSelected : index.fairmintVars.colorIconSecondary,
+                flexShrink: 0
+              },
+              children: item.icon
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Text.Text,
+            {
+              size: "md",
+              fw: active ? 600 : 500,
+              style: {
+                flex: 1,
+                minWidth: 0,
+                color: active ? index.fairmintVars.colorIconOnSurfaceSelected : void 0
+              },
+              truncate: true,
+              children: item.label
+            }
+          ),
+          item.rightSection,
+          hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
+            IconChevronDown.default,
+            {
+              size: 18,
+              stroke: 1.5,
+              "aria-hidden": true,
+              style: {
+                flexShrink: 0,
+                transform: opened ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 120ms ease",
+                color: index.fairmintVars.colorIconTertiary
+              }
+            }
+          ) : null
+        ]
+      }
+    ),
+    hasChildren && opened ? /* @__PURE__ */ jsxRuntime.jsx(layout.Stack, { gap: 4, mt: 4, children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(MobileNavRow, { item: child, depth: depth + 1, onItemClick }, child.id)) }) : null
+  ] });
+}
+function MobileNav({
+  opened,
+  onClose,
+  items = [],
+  sections,
+  onItemClick,
+  header,
+  cta,
+  profile,
+  onProfileClick,
+  ariaLabel = "Main navigation",
+  zIndex: zIndex$1 = zIndex.overlayZIndexAboveLegacyShell
+}) {
+  const resolvedSections = sections ?? [{ id: "main", items }];
+  const handleItemClick = (id) => {
+    onItemClick(id);
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Drawer.Drawer,
+    {
+      opened,
+      onClose,
+      position: "left",
+      size: MOBILE_NAV_WIDTH,
+      padding: 0,
+      withCloseButton: false,
+      zIndex: zIndex$1,
+      styles: {
+        content: {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%"
+        },
+        body: {
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          height: "100%",
+          minHeight: 0,
+          overflow: "hidden",
+          padding: 0
+        },
+        header: {
+          display: "none"
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        layout.Stack,
+        {
+          component: "nav",
+          gap: "md",
+          "aria-label": ariaLabel,
+          style: {
+            height: "100%",
+            padding: 16,
+            paddingBottom: "max(16px, env(safe-area-inset-bottom))",
+            boxSizing: "border-box"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Group.Group,
+              {
+                justify: "space-between",
+                wrap: "nowrap",
+                align: "center",
+                gap: "sm",
+                style: { flexShrink: 0 },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(layout.Box, { style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center" }, children: header }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ActionIcon.ActionIcon,
+                    {
+                      type: "button",
+                      "aria-label": "Close navigation",
+                      color: "gray",
+                      variant: "subtle",
+                      size: "lg",
+                      onClick: onClose,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(IconX.default, { size: 20, stroke: 1.5 })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(layout.Stack, { gap: 4, style: { flex: 1, minHeight: 0, overflow: "auto" }, children: resolvedSections.flatMap(
+              (section) => section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                MobileNavRow,
+                {
+                  item,
+                  depth: 0,
+                  onItemClick: handleItemClick
+                },
+                `${section.id}:${item.id}`
+              ))
+            ) }),
+            (cta || profile) && /* @__PURE__ */ jsxRuntime.jsxs(layout.Stack, { gap: "sm", style: { flexShrink: 0 }, children: [
+              cta ? /* @__PURE__ */ jsxRuntime.jsx(layout.Box, { style: { width: "100%" }, children: cta }) : null,
+              cta && profile ? /* @__PURE__ */ jsxRuntime.jsx(layout.Divider, { color: index.fairmintVars.colorBorderDefault }) : null,
+              profile ? /* @__PURE__ */ jsxRuntime.jsxs(
+                UnstyledButton.UnstyledButton,
+                {
+                  type: "button",
+                  "aria-label": "Account menu",
+                  "aria-haspopup": "dialog",
+                  onClick: onProfileClick,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 12,
+                    width: "100%",
+                    minHeight: MOBILE_NAV_ROW_MIN_HEIGHT,
+                    padding: 8,
+                    borderRadius: index.radii.md,
+                    textAlign: "left",
+                    cursor: onProfileClick ? "pointer" : "default"
+                  },
+                  styles: {
+                    root: {
+                      "&:hover": {
+                        backgroundColor: index.fairmintVars.colorBgHover
+                      }
+                    }
+                  },
+                  children: [
+                    profile.avatar,
+                    /* @__PURE__ */ jsxRuntime.jsxs(layout.Stack, { gap: 0, style: { minWidth: 0, flex: 1 }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "sm", fw: 600, truncate: true, children: profile.displayName }),
+                      profile.subline && profile.subline !== profile.displayName ? /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "xs", c: "dimmed", truncate: true, children: profile.subline }) : null
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      IconChevronDown.default,
+                      {
+                        size: 18,
+                        stroke: 1.5,
+                        "aria-hidden": true,
+                        style: { color: index.fairmintVars.colorIconTertiary, flexShrink: 0 }
+                      }
+                    )
+                  ]
+                }
+              ) : null
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+exports.MOBILE_NAV_ROW_MIN_HEIGHT = MOBILE_NAV_ROW_MIN_HEIGHT;
+exports.MOBILE_NAV_WIDTH = MOBILE_NAV_WIDTH;
+exports.MobileNav = MobileNav;
+//# sourceMappingURL=MobileNav.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileNav.cjs","sources":["../../../../src/components/layout/MobileNav/MobileNav.tsx"],"sourcesContent":["import { IconChevronDown, IconX } from \"@tabler/icons-react\";\nimport { type ReactNode, useState } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\nimport { overlayZIndexAboveLegacyShell } from \"../../../theme/zIndex\";\nimport { ActionIcon } from \"../../primitives/ActionIcon/ActionIcon\";\nimport { Drawer } from \"../../primitives/Drawer/Drawer\";\nimport { Box, Divider, Group, Stack, Text, UnstyledButton } from \"../../primitives/layout\";\nimport { getSideNavItemLabelText, type SideNavItem, type SideNavSection } from \"../SideNav/SideNav\";\n\n/** Full-bleed mobile nav sheet width — not the 260px desktop rail. */\nexport const MOBILE_NAV_WIDTH = \"100%\";\n\n/** Minimum touch target for destination / profile rows. */\nexport const MOBILE_NAV_ROW_MIN_HEIGHT = 48;\n\nexport interface MobileNavProfile {\n  /** Primary line (user name). */\n  displayName: string;\n  /** Secondary line (company / email). */\n  subline?: string;\n  /** Avatar name for initials. Defaults to `displayName`. */\n  avatarName?: string;\n  /** Leading avatar node. When omitted, a text fallback is shown. */\n  avatar?: ReactNode;\n}\n\nexport interface MobileNavProps {\n  /** Whether the navigation sheet is open. */\n  opened: boolean;\n  /** Close handler (backdrop / escape). */\n  onClose: () => void;\n  /** Flat destination list when sections are not needed. */\n  items?: SideNavItem[];\n  /** Grouped destinations (section labels are not rendered — same as SideNav). */\n  sections?: SideNavSection[];\n  /** Leaf destination selected. Parents with children only expand/collapse. */\n  onItemClick: (id: string) => void;\n  /** Logo / brand chrome above destinations. */\n  header?: ReactNode;\n  /** Primary CTA above the profile (e.g. Start / Add investment). */\n  cta?: ReactNode;\n  /** Profile trigger shown at the bottom. Tapping calls `onProfileClick`. */\n  profile?: MobileNavProfile;\n  /** Called when the profile row is pressed (typically opens AccountSheet). */\n  onProfileClick?: () => void;\n  /** Accessible label for the navigation landmark. @default \"Main navigation\" */\n  ariaLabel?: string;\n  /** Overlay z-index. @default overlayZIndexAboveLegacyShell */\n  zIndex?: number;\n}\n\nfunction MobileNavRow({\n  item,\n  depth,\n  onItemClick,\n}: {\n  item: SideNavItem;\n  depth: number;\n  onItemClick: (id: string) => void;\n}) {\n  const hasChildren = Boolean(item.children?.length);\n  const labelText = getSideNavItemLabelText(item);\n  const childActive = item.children?.some((child) => child.active) ?? false;\n  const [opened, setOpened] = useState(Boolean(item.open) || childActive);\n  const active = Boolean(item.active) && !hasChildren;\n\n  const paddingLeft = 12 + depth * 16;\n\n  return (\n    <Box>\n      <UnstyledButton\n        type=\"button\"\n        disabled={item.disabled}\n        aria-label={labelText}\n        aria-current={active ? \"page\" : undefined}\n        aria-expanded={hasChildren ? opened : undefined}\n        onClick={() => {\n          if (hasChildren) {\n            setOpened((value) => !value);\n            return;\n          }\n          onItemClick(item.id);\n        }}\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 12,\n          width: \"100%\",\n          minHeight: MOBILE_NAV_ROW_MIN_HEIGHT,\n          paddingLeft,\n          paddingRight: 12,\n          borderRadius: radii.md,\n          textAlign: \"left\",\n          cursor: item.disabled ? \"not-allowed\" : \"pointer\",\n          opacity: item.disabled ? 0.5 : 1,\n          backgroundColor: active ? fairmintVars.colorSurfaceSelected : \"transparent\",\n          color: active ? fairmintVars.colorIconOnSurfaceSelected : fairmintVars.colorTextPrimary,\n        }}\n        styles={{\n          root: {\n            \"&:hover:not(:disabled)\": {\n              backgroundColor: active\n                ? fairmintVars.colorSurfaceSelected\n                : fairmintVars.colorBgHover,\n            },\n          },\n        }}\n      >\n        {item.icon ? (\n          <Box\n            component=\"span\"\n            style={{\n              display: \"inline-flex\",\n              color: active\n                ? fairmintVars.colorIconOnSurfaceSelected\n                : fairmintVars.colorIconSecondary,\n              flexShrink: 0,\n            }}\n          >\n            {item.icon}\n          </Box>\n        ) : null}\n        <Text\n          size=\"md\"\n          fw={active ? 600 : 500}\n          style={{\n            flex: 1,\n            minWidth: 0,\n            color: active ? fairmintVars.colorIconOnSurfaceSelected : undefined,\n          }}\n          truncate\n        >\n          {item.label}\n        </Text>\n        {item.rightSection}\n        {hasChildren ? (\n          <IconChevronDown\n            size={18}\n            stroke={1.5}\n            aria-hidden\n            style={{\n              flexShrink: 0,\n              transform: opened ? \"rotate(180deg)\" : \"rotate(0deg)\",\n              transition: \"transform 120ms ease\",\n              color: fairmintVars.colorIconTertiary,\n            }}\n          />\n        ) : null}\n      </UnstyledButton>\n\n      {hasChildren && opened ? (\n        <Stack gap={4} mt={4}>\n          {item.children?.map((child) => (\n            <MobileNavRow key={child.id} item={child} depth={depth + 1} onItemClick={onItemClick} />\n          ))}\n        </Stack>\n      ) : null}\n    </Box>\n  );\n}\n\n/**\n * Mobile-optimized navigation sheet for product shells.\n *\n * Full-bleed left drawer with 48px touch rows, pinned CTA + profile, and an\n * always-visible close control (full-bleed leaves no backdrop to dismiss).\n * Pair `onProfileClick` with {@link AccountSheet} for Sign out.\n */\nexport function MobileNav({\n  opened,\n  onClose,\n  items = [],\n  sections,\n  onItemClick,\n  header,\n  cta,\n  profile,\n  onProfileClick,\n  ariaLabel = \"Main navigation\",\n  zIndex = overlayZIndexAboveLegacyShell,\n}: MobileNavProps) {\n  const resolvedSections = sections ?? [{ id: \"main\", items }];\n\n  const handleItemClick = (id: string) => {\n    onItemClick(id);\n    onClose();\n  };\n\n  return (\n    <Drawer\n      opened={opened}\n      onClose={onClose}\n      position=\"left\"\n      size={MOBILE_NAV_WIDTH}\n      padding={0}\n      withCloseButton={false}\n      zIndex={zIndex}\n      styles={{\n        content: {\n          display: \"flex\",\n          flexDirection: \"column\",\n          height: \"100%\",\n        },\n        body: {\n          display: \"flex\",\n          flexDirection: \"column\",\n          flex: 1,\n          height: \"100%\",\n          minHeight: 0,\n          overflow: \"hidden\",\n          padding: 0,\n        },\n        header: {\n          display: \"none\",\n        },\n      }}\n    >\n      <Stack\n        component=\"nav\"\n        gap=\"md\"\n        aria-label={ariaLabel}\n        style={{\n          height: \"100%\",\n          padding: 16,\n          paddingBottom: \"max(16px, env(safe-area-inset-bottom))\",\n          boxSizing: \"border-box\",\n        }}\n      >\n        <Group\n          justify=\"space-between\"\n          wrap=\"nowrap\"\n          align=\"center\"\n          gap=\"sm\"\n          style={{ flexShrink: 0 }}\n        >\n          <Box style={{ flex: 1, minWidth: 0, display: \"flex\", alignItems: \"center\" }}>\n            {header}\n          </Box>\n          <ActionIcon\n            type=\"button\"\n            aria-label=\"Close navigation\"\n            color=\"gray\"\n            variant=\"subtle\"\n            size=\"lg\"\n            onClick={onClose}\n          >\n            <IconX size={20} stroke={1.5} />\n          </ActionIcon>\n        </Group>\n\n        <Stack gap={4} style={{ flex: 1, minHeight: 0, overflow: \"auto\" }}>\n          {resolvedSections.flatMap((section) =>\n            section.items.map((item) => (\n              <MobileNavRow\n                key={`${section.id}:${item.id}`}\n                item={item}\n                depth={0}\n                onItemClick={handleItemClick}\n              />\n            )),\n          )}\n        </Stack>\n\n        {(cta || profile) && (\n          <Stack gap=\"sm\" style={{ flexShrink: 0 }}>\n            {cta ? <Box style={{ width: \"100%\" }}>{cta}</Box> : null}\n            {cta && profile ? <Divider color={fairmintVars.colorBorderDefault} /> : null}\n            {profile ? (\n              <UnstyledButton\n                type=\"button\"\n                aria-label=\"Account menu\"\n                aria-haspopup=\"dialog\"\n                onClick={onProfileClick}\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: 12,\n                  width: \"100%\",\n                  minHeight: MOBILE_NAV_ROW_MIN_HEIGHT,\n                  padding: 8,\n                  borderRadius: radii.md,\n                  textAlign: \"left\",\n                  cursor: onProfileClick ? \"pointer\" : \"default\",\n                }}\n                styles={{\n                  root: {\n                    \"&:hover\": {\n                      backgroundColor: fairmintVars.colorBgHover,\n                    },\n                  },\n                }}\n              >\n                {profile.avatar}\n                <Stack gap={0} style={{ minWidth: 0, flex: 1 }}>\n                  <Text size=\"sm\" fw={600} truncate>\n                    {profile.displayName}\n                  </Text>\n                  {profile.subline && profile.subline !== profile.displayName ? (\n                    <Text size=\"xs\" c=\"dimmed\" truncate>\n                      {profile.subline}\n                    </Text>\n                  ) : null}\n                </Stack>\n                <IconChevronDown\n                  size={18}\n                  stroke={1.5}\n                  aria-hidden\n                  style={{ color: fairmintVars.colorIconTertiary, flexShrink: 0 }}\n                />\n              </UnstyledButton>\n            ) : null}\n          </Stack>\n        )}\n      </Stack>\n    </Drawer>\n  );\n}\n"],"names":["getSideNavItemLabelText","useState","Box","jsxs","UnstyledButton","radii","fairmintVars","jsx","Text","IconChevronDown","Stack","zIndex","overlayZIndexAboveLegacyShell","Drawer","Group","ActionIcon","IconX","Divider"],"mappings":"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"}

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

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+import { SideNavItem, SideNavSection } from '../SideNav/SideNav';
+/** Full-bleed mobile nav sheet width — not the 260px desktop rail. */
+export declare const MOBILE_NAV_WIDTH = "100%";
+/** Minimum touch target for destination / profile rows. */
+export declare const MOBILE_NAV_ROW_MIN_HEIGHT = 48;
+export interface MobileNavProfile {
+    /** Primary line (user name). */
+    displayName: string;
+    /** Secondary line (company / email). */
+    subline?: string;
+    /** Avatar name for initials. Defaults to `displayName`. */
+    avatarName?: string;
+    /** Leading avatar node. When omitted, a text fallback is shown. */
+    avatar?: ReactNode;
+}
+export interface MobileNavProps {
+    /** Whether the navigation sheet is open. */
+    opened: boolean;
+    /** Close handler (backdrop / escape). */
+    onClose: () => void;
+    /** Flat destination list when sections are not needed. */
+    items?: SideNavItem[];
+    /** Grouped destinations (section labels are not rendered — same as SideNav). */
+    sections?: SideNavSection[];
+    /** Leaf destination selected. Parents with children only expand/collapse. */
+    onItemClick: (id: string) => void;
+    /** Logo / brand chrome above destinations. */
+    header?: ReactNode;
+    /** Primary CTA above the profile (e.g. Start / Add investment). */
+    cta?: ReactNode;
+    /** Profile trigger shown at the bottom. Tapping calls `onProfileClick`. */
+    profile?: MobileNavProfile;
+    /** Called when the profile row is pressed (typically opens AccountSheet). */
+    onProfileClick?: () => void;
+    /** Accessible label for the navigation landmark. @default "Main navigation" */
+    ariaLabel?: string;
+    /** Overlay z-index. @default overlayZIndexAboveLegacyShell */
+    zIndex?: number;
+}
+/**
+ * Mobile-optimized navigation sheet for product shells.
+ *
+ * Full-bleed left drawer with 48px touch rows, pinned CTA + profile, and an
+ * always-visible close control (full-bleed leaves no backdrop to dismiss).
+ * Pair `onProfileClick` with {@link AccountSheet} for Sign out.
+ */
+export declare function MobileNav({ opened, onClose, items, sections, onItemClick, header, cta, profile, onProfileClick, ariaLabel, zIndex, }: MobileNavProps): import("react").JSX.Element;
+//# sourceMappingURL=MobileNav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMjD,OAAO,EAA2B,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpG,sEAAsE;AACtE,eAAO,MAAM,gBAAgB,SAAS,CAAC;AAEvC,2DAA2D;AAC3D,eAAO,MAAM,yBAAyB,KAAK,CAAC;AAE5C,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,4CAA4C;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,6EAA6E;IAC7E,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mEAAmE;IACnE,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,6EAA6E;IAC7E,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAgHD;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,OAAO,EACP,KAAU,EACV,QAAQ,EACR,WAAW,EACX,MAAM,EACN,GAAG,EACH,OAAO,EACP,cAAc,EACd,SAA6B,EAC7B,MAAsC,GACvC,EAAE,cAAc,+BAwIhB"}

package/dist/components/layout/MobileNav/MobileNav.js

@@ -0,0 +1,267 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { fairmintVars, radii } from "../../../theme/index.js";
+import { overlayZIndexAboveLegacyShell } from "../../../theme/zIndex.js";
+import { ActionIcon } from "../../primitives/ActionIcon/ActionIcon.js";
+import { Drawer } from "../../primitives/Drawer/Drawer.js";
+import { Stack, Box, Divider } from "../../primitives/layout.js";
+import { getSideNavItemLabelText } from "../SideNav/SideNav.js";
+import { Group } from "../../../node_modules/@mantine/core/esm/components/Group/Group.js";
+import IconX from "../../../node_modules/@tabler/icons-react/dist/esm/icons/IconX.js";
+import { UnstyledButton } from "../../../node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.js";
+import { Text } from "../../../node_modules/@mantine/core/esm/components/Text/Text.js";
+import IconChevronDown from "../../../node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js";
+const MOBILE_NAV_WIDTH = "100%";
+const MOBILE_NAV_ROW_MIN_HEIGHT = 48;
+function MobileNavRow({
+  item,
+  depth,
+  onItemClick
+}) {
+  const hasChildren = Boolean(item.children?.length);
+  const labelText = getSideNavItemLabelText(item);
+  const childActive = item.children?.some((child) => child.active) ?? false;
+  const [opened, setOpened] = useState(Boolean(item.open) || childActive);
+  const active = Boolean(item.active) && !hasChildren;
+  const paddingLeft = 12 + depth * 16;
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(
+      UnstyledButton,
+      {
+        type: "button",
+        disabled: item.disabled,
+        "aria-label": labelText,
+        "aria-current": active ? "page" : void 0,
+        "aria-expanded": hasChildren ? opened : void 0,
+        onClick: () => {
+          if (hasChildren) {
+            setOpened((value) => !value);
+            return;
+          }
+          onItemClick(item.id);
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          width: "100%",
+          minHeight: MOBILE_NAV_ROW_MIN_HEIGHT,
+          paddingLeft,
+          paddingRight: 12,
+          borderRadius: radii.md,
+          textAlign: "left",
+          cursor: item.disabled ? "not-allowed" : "pointer",
+          opacity: item.disabled ? 0.5 : 1,
+          backgroundColor: active ? fairmintVars.colorSurfaceSelected : "transparent",
+          color: active ? fairmintVars.colorIconOnSurfaceSelected : fairmintVars.colorTextPrimary
+        },
+        styles: {
+          root: {
+            "&:hover:not(:disabled)": {
+              backgroundColor: active ? fairmintVars.colorSurfaceSelected : fairmintVars.colorBgHover
+            }
+          }
+        },
+        children: [
+          item.icon ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "span",
+              style: {
+                display: "inline-flex",
+                color: active ? fairmintVars.colorIconOnSurfaceSelected : fairmintVars.colorIconSecondary,
+                flexShrink: 0
+              },
+              children: item.icon
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "md",
+              fw: active ? 600 : 500,
+              style: {
+                flex: 1,
+                minWidth: 0,
+                color: active ? fairmintVars.colorIconOnSurfaceSelected : void 0
+              },
+              truncate: true,
+              children: item.label
+            }
+          ),
+          item.rightSection,
+          hasChildren ? /* @__PURE__ */ jsx(
+            IconChevronDown,
+            {
+              size: 18,
+              stroke: 1.5,
+              "aria-hidden": true,
+              style: {
+                flexShrink: 0,
+                transform: opened ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 120ms ease",
+                color: fairmintVars.colorIconTertiary
+              }
+            }
+          ) : null
+        ]
+      }
+    ),
+    hasChildren && opened ? /* @__PURE__ */ jsx(Stack, { gap: 4, mt: 4, children: item.children?.map((child) => /* @__PURE__ */ jsx(MobileNavRow, { item: child, depth: depth + 1, onItemClick }, child.id)) }) : null
+  ] });
+}
+function MobileNav({
+  opened,
+  onClose,
+  items = [],
+  sections,
+  onItemClick,
+  header,
+  cta,
+  profile,
+  onProfileClick,
+  ariaLabel = "Main navigation",
+  zIndex = overlayZIndexAboveLegacyShell
+}) {
+  const resolvedSections = sections ?? [{ id: "main", items }];
+  const handleItemClick = (id) => {
+    onItemClick(id);
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      opened,
+      onClose,
+      position: "left",
+      size: MOBILE_NAV_WIDTH,
+      padding: 0,
+      withCloseButton: false,
+      zIndex,
+      styles: {
+        content: {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%"
+        },
+        body: {
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          height: "100%",
+          minHeight: 0,
+          overflow: "hidden",
+          padding: 0
+        },
+        header: {
+          display: "none"
+        }
+      },
+      children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          component: "nav",
+          gap: "md",
+          "aria-label": ariaLabel,
+          style: {
+            height: "100%",
+            padding: 16,
+            paddingBottom: "max(16px, env(safe-area-inset-bottom))",
+            boxSizing: "border-box"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Group,
+              {
+                justify: "space-between",
+                wrap: "nowrap",
+                align: "center",
+                gap: "sm",
+                style: { flexShrink: 0 },
+                children: [
+                  /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center" }, children: header }),
+                  /* @__PURE__ */ jsx(
+                    ActionIcon,
+                    {
+                      type: "button",
+                      "aria-label": "Close navigation",
+                      color: "gray",
+                      variant: "subtle",
+                      size: "lg",
+                      onClick: onClose,
+                      children: /* @__PURE__ */ jsx(IconX, { size: 20, stroke: 1.5 })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Stack, { gap: 4, style: { flex: 1, minHeight: 0, overflow: "auto" }, children: resolvedSections.flatMap(
+              (section) => section.items.map((item) => /* @__PURE__ */ jsx(
+                MobileNavRow,
+                {
+                  item,
+                  depth: 0,
+                  onItemClick: handleItemClick
+                },
+                `${section.id}:${item.id}`
+              ))
+            ) }),
+            (cta || profile) && /* @__PURE__ */ jsxs(Stack, { gap: "sm", style: { flexShrink: 0 }, children: [
+              cta ? /* @__PURE__ */ jsx(Box, { style: { width: "100%" }, children: cta }) : null,
+              cta && profile ? /* @__PURE__ */ jsx(Divider, { color: fairmintVars.colorBorderDefault }) : null,
+              profile ? /* @__PURE__ */ jsxs(
+                UnstyledButton,
+                {
+                  type: "button",
+                  "aria-label": "Account menu",
+                  "aria-haspopup": "dialog",
+                  onClick: onProfileClick,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 12,
+                    width: "100%",
+                    minHeight: MOBILE_NAV_ROW_MIN_HEIGHT,
+                    padding: 8,
+                    borderRadius: radii.md,
+                    textAlign: "left",
+                    cursor: onProfileClick ? "pointer" : "default"
+                  },
+                  styles: {
+                    root: {
+                      "&:hover": {
+                        backgroundColor: fairmintVars.colorBgHover
+                      }
+                    }
+                  },
+                  children: [
+                    profile.avatar,
+                    /* @__PURE__ */ jsxs(Stack, { gap: 0, style: { minWidth: 0, flex: 1 }, children: [
+                      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, truncate: true, children: profile.displayName }),
+                      profile.subline && profile.subline !== profile.displayName ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", truncate: true, children: profile.subline }) : null
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      IconChevronDown,
+                      {
+                        size: 18,
+                        stroke: 1.5,
+                        "aria-hidden": true,
+                        style: { color: fairmintVars.colorIconTertiary, flexShrink: 0 }
+                      }
+                    )
+                  ]
+                }
+              ) : null
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  MOBILE_NAV_ROW_MIN_HEIGHT,
+  MOBILE_NAV_WIDTH,
+  MobileNav
+};
+//# sourceMappingURL=MobileNav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileNav.js","sources":["../../../../src/components/layout/MobileNav/MobileNav.tsx"],"sourcesContent":["import { IconChevronDown, IconX } from \"@tabler/icons-react\";\nimport { type ReactNode, useState } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\nimport { overlayZIndexAboveLegacyShell } from \"../../../theme/zIndex\";\nimport { ActionIcon } from \"../../primitives/ActionIcon/ActionIcon\";\nimport { Drawer } from \"../../primitives/Drawer/Drawer\";\nimport { Box, Divider, Group, Stack, Text, UnstyledButton } from \"../../primitives/layout\";\nimport { getSideNavItemLabelText, type SideNavItem, type SideNavSection } from \"../SideNav/SideNav\";\n\n/** Full-bleed mobile nav sheet width — not the 260px desktop rail. */\nexport const MOBILE_NAV_WIDTH = \"100%\";\n\n/** Minimum touch target for destination / profile rows. */\nexport const MOBILE_NAV_ROW_MIN_HEIGHT = 48;\n\nexport interface MobileNavProfile {\n  /** Primary line (user name). */\n  displayName: string;\n  /** Secondary line (company / email). */\n  subline?: string;\n  /** Avatar name for initials. Defaults to `displayName`. */\n  avatarName?: string;\n  /** Leading avatar node. When omitted, a text fallback is shown. */\n  avatar?: ReactNode;\n}\n\nexport interface MobileNavProps {\n  /** Whether the navigation sheet is open. */\n  opened: boolean;\n  /** Close handler (backdrop / escape). */\n  onClose: () => void;\n  /** Flat destination list when sections are not needed. */\n  items?: SideNavItem[];\n  /** Grouped destinations (section labels are not rendered — same as SideNav). */\n  sections?: SideNavSection[];\n  /** Leaf destination selected. Parents with children only expand/collapse. */\n  onItemClick: (id: string) => void;\n  /** Logo / brand chrome above destinations. */\n  header?: ReactNode;\n  /** Primary CTA above the profile (e.g. Start / Add investment). */\n  cta?: ReactNode;\n  /** Profile trigger shown at the bottom. Tapping calls `onProfileClick`. */\n  profile?: MobileNavProfile;\n  /** Called when the profile row is pressed (typically opens AccountSheet). */\n  onProfileClick?: () => void;\n  /** Accessible label for the navigation landmark. @default \"Main navigation\" */\n  ariaLabel?: string;\n  /** Overlay z-index. @default overlayZIndexAboveLegacyShell */\n  zIndex?: number;\n}\n\nfunction MobileNavRow({\n  item,\n  depth,\n  onItemClick,\n}: {\n  item: SideNavItem;\n  depth: number;\n  onItemClick: (id: string) => void;\n}) {\n  const hasChildren = Boolean(item.children?.length);\n  const labelText = getSideNavItemLabelText(item);\n  const childActive = item.children?.some((child) => child.active) ?? false;\n  const [opened, setOpened] = useState(Boolean(item.open) || childActive);\n  const active = Boolean(item.active) && !hasChildren;\n\n  const paddingLeft = 12 + depth * 16;\n\n  return (\n    <Box>\n      <UnstyledButton\n        type=\"button\"\n        disabled={item.disabled}\n        aria-label={labelText}\n        aria-current={active ? \"page\" : undefined}\n        aria-expanded={hasChildren ? opened : undefined}\n        onClick={() => {\n          if (hasChildren) {\n            setOpened((value) => !value);\n            return;\n          }\n          onItemClick(item.id);\n        }}\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 12,\n          width: \"100%\",\n          minHeight: MOBILE_NAV_ROW_MIN_HEIGHT,\n          paddingLeft,\n          paddingRight: 12,\n          borderRadius: radii.md,\n          textAlign: \"left\",\n          cursor: item.disabled ? \"not-allowed\" : \"pointer\",\n          opacity: item.disabled ? 0.5 : 1,\n          backgroundColor: active ? fairmintVars.colorSurfaceSelected : \"transparent\",\n          color: active ? fairmintVars.colorIconOnSurfaceSelected : fairmintVars.colorTextPrimary,\n        }}\n        styles={{\n          root: {\n            \"&:hover:not(:disabled)\": {\n              backgroundColor: active\n                ? fairmintVars.colorSurfaceSelected\n                : fairmintVars.colorBgHover,\n            },\n          },\n        }}\n      >\n        {item.icon ? (\n          <Box\n            component=\"span\"\n            style={{\n              display: \"inline-flex\",\n              color: active\n                ? fairmintVars.colorIconOnSurfaceSelected\n                : fairmintVars.colorIconSecondary,\n              flexShrink: 0,\n            }}\n          >\n            {item.icon}\n          </Box>\n        ) : null}\n        <Text\n          size=\"md\"\n          fw={active ? 600 : 500}\n          style={{\n            flex: 1,\n            minWidth: 0,\n            color: active ? fairmintVars.colorIconOnSurfaceSelected : undefined,\n          }}\n          truncate\n        >\n          {item.label}\n        </Text>\n        {item.rightSection}\n        {hasChildren ? (\n          <IconChevronDown\n            size={18}\n            stroke={1.5}\n            aria-hidden\n            style={{\n              flexShrink: 0,\n              transform: opened ? \"rotate(180deg)\" : \"rotate(0deg)\",\n              transition: \"transform 120ms ease\",\n              color: fairmintVars.colorIconTertiary,\n            }}\n          />\n        ) : null}\n      </UnstyledButton>\n\n      {hasChildren && opened ? (\n        <Stack gap={4} mt={4}>\n          {item.children?.map((child) => (\n            <MobileNavRow key={child.id} item={child} depth={depth + 1} onItemClick={onItemClick} />\n          ))}\n        </Stack>\n      ) : null}\n    </Box>\n  );\n}\n\n/**\n * Mobile-optimized navigation sheet for product shells.\n *\n * Full-bleed left drawer with 48px touch rows, pinned CTA + profile, and an\n * always-visible close control (full-bleed leaves no backdrop to dismiss).\n * Pair `onProfileClick` with {@link AccountSheet} for Sign out.\n */\nexport function MobileNav({\n  opened,\n  onClose,\n  items = [],\n  sections,\n  onItemClick,\n  header,\n  cta,\n  profile,\n  onProfileClick,\n  ariaLabel = \"Main navigation\",\n  zIndex = overlayZIndexAboveLegacyShell,\n}: MobileNavProps) {\n  const resolvedSections = sections ?? [{ id: \"main\", items }];\n\n  const handleItemClick = (id: string) => {\n    onItemClick(id);\n    onClose();\n  };\n\n  return (\n    <Drawer\n      opened={opened}\n      onClose={onClose}\n      position=\"left\"\n      size={MOBILE_NAV_WIDTH}\n      padding={0}\n      withCloseButton={false}\n      zIndex={zIndex}\n      styles={{\n        content: {\n          display: \"flex\",\n          flexDirection: \"column\",\n          height: \"100%\",\n        },\n        body: {\n          display: \"flex\",\n          flexDirection: \"column\",\n          flex: 1,\n          height: \"100%\",\n          minHeight: 0,\n          overflow: \"hidden\",\n          padding: 0,\n        },\n        header: {\n          display: \"none\",\n        },\n      }}\n    >\n      <Stack\n        component=\"nav\"\n        gap=\"md\"\n        aria-label={ariaLabel}\n        style={{\n          height: \"100%\",\n          padding: 16,\n          paddingBottom: \"max(16px, env(safe-area-inset-bottom))\",\n          boxSizing: \"border-box\",\n        }}\n      >\n        <Group\n          justify=\"space-between\"\n          wrap=\"nowrap\"\n          align=\"center\"\n          gap=\"sm\"\n          style={{ flexShrink: 0 }}\n        >\n          <Box style={{ flex: 1, minWidth: 0, display: \"flex\", alignItems: \"center\" }}>\n            {header}\n          </Box>\n          <ActionIcon\n            type=\"button\"\n            aria-label=\"Close navigation\"\n            color=\"gray\"\n            variant=\"subtle\"\n            size=\"lg\"\n            onClick={onClose}\n          >\n            <IconX size={20} stroke={1.5} />\n          </ActionIcon>\n        </Group>\n\n        <Stack gap={4} style={{ flex: 1, minHeight: 0, overflow: \"auto\" }}>\n          {resolvedSections.flatMap((section) =>\n            section.items.map((item) => (\n              <MobileNavRow\n                key={`${section.id}:${item.id}`}\n                item={item}\n                depth={0}\n                onItemClick={handleItemClick}\n              />\n            )),\n          )}\n        </Stack>\n\n        {(cta || profile) && (\n          <Stack gap=\"sm\" style={{ flexShrink: 0 }}>\n            {cta ? <Box style={{ width: \"100%\" }}>{cta}</Box> : null}\n            {cta && profile ? <Divider color={fairmintVars.colorBorderDefault} /> : null}\n            {profile ? (\n              <UnstyledButton\n                type=\"button\"\n                aria-label=\"Account menu\"\n                aria-haspopup=\"dialog\"\n                onClick={onProfileClick}\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: 12,\n                  width: \"100%\",\n                  minHeight: MOBILE_NAV_ROW_MIN_HEIGHT,\n                  padding: 8,\n                  borderRadius: radii.md,\n                  textAlign: \"left\",\n                  cursor: onProfileClick ? \"pointer\" : \"default\",\n                }}\n                styles={{\n                  root: {\n                    \"&:hover\": {\n                      backgroundColor: fairmintVars.colorBgHover,\n                    },\n                  },\n                }}\n              >\n                {profile.avatar}\n                <Stack gap={0} style={{ minWidth: 0, flex: 1 }}>\n                  <Text size=\"sm\" fw={600} truncate>\n                    {profile.displayName}\n                  </Text>\n                  {profile.subline && profile.subline !== profile.displayName ? (\n                    <Text size=\"xs\" c=\"dimmed\" truncate>\n                      {profile.subline}\n                    </Text>\n                  ) : null}\n                </Stack>\n                <IconChevronDown\n                  size={18}\n                  stroke={1.5}\n                  aria-hidden\n                  style={{ color: fairmintVars.colorIconTertiary, flexShrink: 0 }}\n                />\n              </UnstyledButton>\n            ) : null}\n          </Stack>\n        )}\n      </Stack>\n    </Drawer>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAUO,MAAM,mBAAmB;AAGzB,MAAM,4BAA4B;AAsCzC,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,cAAc,QAAQ,KAAK,UAAU,MAAM;AACjD,QAAM,YAAY,wBAAwB,IAAI;AAC9C,QAAM,cAAc,KAAK,UAAU,KAAK,CAAC,UAAU,MAAM,MAAM,KAAK;AACpE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ,KAAK,IAAI,KAAK,WAAW;AACtE,QAAM,SAAS,QAAQ,KAAK,MAAM,KAAK,CAAC;AAExC,QAAM,cAAc,KAAK,QAAQ;AAEjC,8BACG,KAAA,EACC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU,KAAK;AAAA,QACf,cAAY;AAAA,QACZ,gBAAc,SAAS,SAAS;AAAA,QAChC,iBAAe,cAAc,SAAS;AAAA,QACtC,SAAS,MAAM;AACb,cAAI,aAAa;AACf,sBAAU,CAAC,UAAU,CAAC,KAAK;AAC3B;AAAA,UACF;AACA,sBAAY,KAAK,EAAE;AAAA,QACrB;AAAA,QACA,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,OAAO;AAAA,UACP,WAAW;AAAA,UACX;AAAA,UACA,cAAc;AAAA,UACd,cAAc,MAAM;AAAA,UACpB,WAAW;AAAA,UACX,QAAQ,KAAK,WAAW,gBAAgB;AAAA,UACxC,SAAS,KAAK,WAAW,MAAM;AAAA,UAC/B,iBAAiB,SAAS,aAAa,uBAAuB;AAAA,UAC9D,OAAO,SAAS,aAAa,6BAA6B,aAAa;AAAA,QAAA;AAAA,QAEzE,QAAQ;AAAA,UACN,MAAM;AAAA,YACJ,0BAA0B;AAAA,cACxB,iBAAiB,SACb,aAAa,uBACb,aAAa;AAAA,YAAA;AAAA,UACnB;AAAA,QACF;AAAA,QAGD,UAAA;AAAA,UAAA,KAAK,OACJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,OAAO,SACH,aAAa,6BACb,aAAa;AAAA,gBACjB,YAAY;AAAA,cAAA;AAAA,cAGb,UAAA,KAAK;AAAA,YAAA;AAAA,UAAA,IAEN;AAAA,UACJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,SAAS,MAAM;AAAA,cACnB,OAAO;AAAA,gBACL,MAAM;AAAA,gBACN,UAAU;AAAA,gBACV,OAAO,SAAS,aAAa,6BAA6B;AAAA,cAAA;AAAA,cAE5D,UAAQ;AAAA,cAEP,UAAA,KAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEP,KAAK;AAAA,UACL,cACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAQ;AAAA,cACR,eAAW;AAAA,cACX,OAAO;AAAA,gBACL,YAAY;AAAA,gBACZ,WAAW,SAAS,mBAAmB;AAAA,gBACvC,YAAY;AAAA,gBACZ,OAAO,aAAa;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGL,eAAe,SACd,oBAAC,OAAA,EAAM,KAAK,GAAG,IAAI,GAChB,UAAA,KAAK,UAAU,IAAI,CAAC,UACnB,oBAAC,cAAA,EAA4B,MAAM,OAAO,OAAO,QAAQ,GAAG,YAAA,GAAzC,MAAM,EAA6D,CACvF,EAAA,CACH,IACE;AAAA,EAAA,GACN;AAEJ;AASO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,QAAQ,CAAA;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AACX,GAAmB;AACjB,QAAM,mBAAmB,YAAY,CAAC,EAAE,IAAI,QAAQ,OAAO;AAE3D,QAAM,kBAAkB,CAAC,OAAe;AACtC,gBAAY,EAAE;AACd,YAAA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,SAAS;AAAA,UACT,eAAe;AAAA,UACf,QAAQ;AAAA,QAAA;AAAA,QAEV,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,eAAe;AAAA,UACf,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,UAAU;AAAA,UACV,SAAS;AAAA,QAAA;AAAA,QAEX,QAAQ;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MAGF,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAI;AAAA,UACJ,cAAY;AAAA,UACZ,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,WAAW;AAAA,UAAA;AAAA,UAGb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,KAAI;AAAA,gBACJ,OAAO,EAAE,YAAY,EAAA;AAAA,gBAErB,UAAA;AAAA,kBAAA,oBAAC,KAAA,EAAI,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,QAAQ,YAAY,SAAA,GAC9D,UAAA,QACH;AAAA,kBACA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,cAAW;AAAA,sBACX,OAAM;AAAA,sBACN,SAAQ;AAAA,sBACR,MAAK;AAAA,sBACL,SAAS;AAAA,sBAET,UAAA,oBAAC,OAAA,EAAM,MAAM,IAAI,QAAQ,IAAA,CAAK;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAChC;AAAA,cAAA;AAAA,YAAA;AAAA,YAGF,oBAAC,OAAA,EAAM,KAAK,GAAG,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,OAAA,GACtD,UAAA,iBAAiB;AAAA,cAAQ,CAAC,YACzB,QAAQ,MAAM,IAAI,CAAC,SACjB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC;AAAA,kBACA,OAAO;AAAA,kBACP,aAAa;AAAA,gBAAA;AAAA,gBAHR,GAAG,QAAQ,EAAE,IAAI,KAAK,EAAE;AAAA,cAAA,CAKhC;AAAA,YAAA,GAEL;AAAA,aAEE,OAAO,YACP,qBAAC,OAAA,EAAM,KAAI,MAAK,OAAO,EAAE,YAAY,EAAA,GAClC,UAAA;AAAA,cAAA,MAAM,oBAAC,OAAI,OAAO,EAAE,OAAO,UAAW,eAAI,IAAS;AAAA,cACnD,OAAO,UAAU,oBAAC,WAAQ,OAAO,aAAa,oBAAoB,IAAK;AAAA,cACvE,UACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,cAAW;AAAA,kBACX,iBAAc;AAAA,kBACd,SAAS;AAAA,kBACT,OAAO;AAAA,oBACL,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,KAAK;AAAA,oBACL,OAAO;AAAA,oBACP,WAAW;AAAA,oBACX,SAAS;AAAA,oBACT,cAAc,MAAM;AAAA,oBACpB,WAAW;AAAA,oBACX,QAAQ,iBAAiB,YAAY;AAAA,kBAAA;AAAA,kBAEvC,QAAQ;AAAA,oBACN,MAAM;AAAA,sBACJ,WAAW;AAAA,wBACT,iBAAiB,aAAa;AAAA,sBAAA;AAAA,oBAChC;AAAA,kBACF;AAAA,kBAGD,UAAA;AAAA,oBAAA,QAAQ;AAAA,oBACT,qBAAC,OAAA,EAAM,KAAK,GAAG,OAAO,EAAE,UAAU,GAAG,MAAM,EAAA,GACzC,UAAA;AAAA,sBAAA,oBAAC,MAAA,EAAK,MAAK,MAAK,IAAI,KAAK,UAAQ,MAC9B,kBAAQ,YAAA,CACX;AAAA,sBACC,QAAQ,WAAW,QAAQ,YAAY,QAAQ,cAC9C,oBAAC,MAAA,EAAK,MAAK,MAAK,GAAE,UAAS,UAAQ,MAChC,UAAA,QAAQ,SACX,IACE;AAAA,oBAAA,GACN;AAAA,oBACA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAM;AAAA,wBACN,QAAQ;AAAA,wBACR,eAAW;AAAA,wBACX,OAAO,EAAE,OAAO,aAAa,mBAAmB,YAAY,EAAA;AAAA,sBAAE;AAAA,oBAAA;AAAA,kBAChE;AAAA,gBAAA;AAAA,cAAA,IAEA;AAAA,YAAA,EAAA,CACN;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;"}