@fairmint/ui 0.3.31 → 0.3.33

package/dist/components/layout/AccountSheet/AccountSheet.cjs

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const index = require("../../../theme/index.cjs");
+const zIndex = require("../../../theme/zIndex.cjs");
+const BottomSheet = require("../../generic/BottomSheet/BottomSheet.cjs");
+const Avatar = require("../../primitives/Avatar/Avatar.cjs");
+const layout = require("../../primitives/layout.cjs");
+const colors = require("../../../theme/colors.cjs");
+const Text = require("../../../node_modules/@mantine/core/esm/components/Text/Text.cjs");
+const UnstyledButton = require("../../../node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.cjs");
+const ACCOUNT_SHEET_ROW_MIN_HEIGHT = 48;
+function resolvePaintColor(color) {
+  if (!color) return void 0;
+  if (color === colors.colors.error || color === "error" || color === "red") {
+    return index.fairmintVars.colorErrorText;
+  }
+  if (color === colors.colors.primary || color === "indigo" || color === "primary") {
+    return index.fairmintVars.colorBrandPrimary;
+  }
+  return color;
+}
+function AccountSheetRow({
+  item,
+  onItemClick
+}) {
+  const paint = resolvePaintColor(item.color);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    UnstyledButton.UnstyledButton,
+    {
+      type: "button",
+      onClick: () => onItemClick(item.id),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        width: "100%",
+        minHeight: ACCOUNT_SHEET_ROW_MIN_HEIGHT,
+        paddingInline: 8,
+        paddingBlock: 12,
+        borderRadius: index.radii.md,
+        textAlign: "left",
+        cursor: "pointer",
+        color: paint ?? index.fairmintVars.colorTextPrimary
+      },
+      styles: {
+        root: {
+          "&:hover": {
+            backgroundColor: index.fairmintVars.colorBgHover
+          }
+        }
+      },
+      children: [
+        item.icon ? /* @__PURE__ */ jsxRuntime.jsx(
+          layout.Box,
+          {
+            component: "span",
+            "aria-hidden": true,
+            style: {
+              display: "inline-flex",
+              color: paint ?? index.fairmintVars.colorIconSecondary,
+              flexShrink: 0
+            },
+            children: item.icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "sm", fw: 500, style: { color: paint ?? void 0 }, children: item.label })
+      ]
+    }
+  );
+}
+function AccountSheet({
+  opened,
+  onClose,
+  displayName,
+  email,
+  avatarName,
+  avatarColor = colors.colors.primary,
+  title = "Account",
+  items,
+  onItemClick,
+  zIndex: zIndex$1 = zIndex.overlayZIndexAboveLegacyShell + 10
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    BottomSheet.BottomSheet,
+    {
+      opened,
+      onClose,
+      title,
+      dismissLabel: "Dismiss account menu",
+      zIndex: zIndex$1,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          layout.Box,
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 12,
+              paddingInline: 8,
+              paddingBlock: 8
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { name: avatarName ?? displayName, radius: "md", size: 40, color: avatarColor }),
+              /* @__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: displayName }),
+                email && email !== displayName ? /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "xs", c: "dimmed", truncate: true, children: email }) : null
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(layout.Divider, { my: "xs", color: index.fairmintVars.colorBorderDefault }),
+        /* @__PURE__ */ jsxRuntime.jsx(layout.Stack, { gap: 4, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(layout.Box, { children: [
+          item.dividerBefore ? /* @__PURE__ */ jsxRuntime.jsx(layout.Divider, { my: "xs", color: index.fairmintVars.colorBorderDefault }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(AccountSheetRow, { item, onItemClick })
+        ] }, item.id)) })
+      ]
+    }
+  );
+}
+exports.ACCOUNT_SHEET_ROW_MIN_HEIGHT = ACCOUNT_SHEET_ROW_MIN_HEIGHT;
+exports.AccountSheet = AccountSheet;
+//# sourceMappingURL=AccountSheet.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountSheet.cjs","sources":["../../../../src/components/layout/AccountSheet/AccountSheet.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { colors, fairmintVars, radii } from \"../../../theme\";\nimport { overlayZIndexAboveLegacyShell } from \"../../../theme/zIndex\";\nimport { BottomSheet } from \"../../generic/BottomSheet/BottomSheet\";\nimport { Avatar } from \"../../primitives/Avatar/Avatar\";\nimport { Box, Divider, Stack, Text, UnstyledButton } from \"../../primitives/layout\";\n\n/** Minimum touch target height for mobile account actions (WCAG 2.5.5 / Apple HIG). */\nexport const ACCOUNT_SHEET_ROW_MIN_HEIGHT = 48;\n\nexport interface AccountSheetItem {\n  /** Unique identifier for this action. */\n  id: string;\n  /** Display label. */\n  label: string;\n  /** Leading icon element (app-owned icon library). */\n  icon?: ReactNode;\n  /**\n   * Item color. Accepts a CSS color or a Mantine semantic name (`colors.error` → `\"error\"`).\n   * Destructive actions like Sign out should pass `colors.error`.\n   */\n  color?: string;\n  /** Show a divider before this item. */\n  dividerBefore?: boolean;\n}\n\nexport interface AccountSheetProps {\n  /** Whether the bottom sheet is open. */\n  opened: boolean;\n  /** Close handler (backdrop, escape, or grip). */\n  onClose: () => void;\n  /** Primary identity line. */\n  displayName: string;\n  /** Optional secondary identity line (email). */\n  email?: string;\n  /** Name passed to Avatar (initials). Defaults to `displayName`. */\n  avatarName?: string;\n  /** Avatar color token. @default colors.primary */\n  avatarColor?: string;\n  /** Sheet title below the grip. @default \"Account\" */\n  title?: string;\n  /** Account actions. */\n  items: AccountSheetItem[];\n  /** Called when an action row is pressed. Receives the item `id`. */\n  onItemClick: (id: string) => void;\n  /** Overlay z-index. Defaults above legacy Studio/Investor shell chrome. */\n  zIndex?: number;\n}\n\n/** Map Mantine semantic names (e.g. `colors.error`) to CSS paint tokens for inline styles. */\nfunction resolvePaintColor(color?: string): string | undefined {\n  if (!color) return undefined;\n  if (color === colors.error || color === \"error\" || color === \"red\") {\n    return fairmintVars.colorErrorText;\n  }\n  if (color === colors.primary || color === \"indigo\" || color === \"primary\") {\n    return fairmintVars.colorBrandPrimary;\n  }\n  return color;\n}\n\nfunction AccountSheetRow({\n  item,\n  onItemClick,\n}: {\n  item: AccountSheetItem;\n  onItemClick: (id: string) => void;\n}) {\n  const paint = resolvePaintColor(item.color);\n\n  return (\n    <UnstyledButton\n      type=\"button\"\n      onClick={() => onItemClick(item.id)}\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 12,\n        width: \"100%\",\n        minHeight: ACCOUNT_SHEET_ROW_MIN_HEIGHT,\n        paddingInline: 8,\n        paddingBlock: 12,\n        borderRadius: radii.md,\n        textAlign: \"left\",\n        cursor: \"pointer\",\n        color: paint ?? fairmintVars.colorTextPrimary,\n      }}\n      styles={{\n        root: {\n          \"&:hover\": {\n            backgroundColor: fairmintVars.colorBgHover,\n          },\n        },\n      }}\n    >\n      {item.icon ? (\n        <Box\n          component=\"span\"\n          aria-hidden\n          style={{\n            display: \"inline-flex\",\n            color: paint ?? fairmintVars.colorIconSecondary,\n            flexShrink: 0,\n          }}\n        >\n          {item.icon}\n        </Box>\n      ) : null}\n      <Text size=\"sm\" fw={500} style={{ color: paint ?? undefined }}>\n        {item.label}\n      </Text>\n    </UnstyledButton>\n  );\n}\n\n/**\n * Touch-first account surface for mobile shells.\n * Composes `BottomSheet` with identity header + action rows.\n */\nexport function AccountSheet({\n  opened,\n  onClose,\n  displayName,\n  email,\n  avatarName,\n  avatarColor = colors.primary,\n  title = \"Account\",\n  items,\n  onItemClick,\n  zIndex = overlayZIndexAboveLegacyShell + 10,\n}: AccountSheetProps) {\n  return (\n    <BottomSheet\n      opened={opened}\n      onClose={onClose}\n      title={title}\n      dismissLabel=\"Dismiss account menu\"\n      zIndex={zIndex}\n    >\n      <Box\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 12,\n          paddingInline: 8,\n          paddingBlock: 8,\n        }}\n      >\n        <Avatar name={avatarName ?? displayName} radius=\"md\" size={40} color={avatarColor} />\n        <Stack gap={0} style={{ minWidth: 0, flex: 1 }}>\n          <Text size=\"sm\" fw={600} truncate>\n            {displayName}\n          </Text>\n          {email && email !== displayName ? (\n            <Text size=\"xs\" c=\"dimmed\" truncate>\n              {email}\n            </Text>\n          ) : null}\n        </Stack>\n      </Box>\n\n      <Divider my=\"xs\" color={fairmintVars.colorBorderDefault} />\n\n      <Stack gap={4}>\n        {items.map((item) => (\n          <Box key={item.id}>\n            {item.dividerBefore ? (\n              <Divider my=\"xs\" color={fairmintVars.colorBorderDefault} />\n            ) : null}\n            <AccountSheetRow item={item} onItemClick={onItemClick} />\n          </Box>\n        ))}\n      </Stack>\n    </BottomSheet>\n  );\n}\n"],"names":["colors","fairmintVars","jsxs","UnstyledButton","radii","jsx","Box","Text","zIndex","overlayZIndexAboveLegacyShell","BottomSheet","Avatar","Stack","Divider"],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+/** Minimum touch target height for mobile account actions (WCAG 2.5.5 / Apple HIG). */
+export declare const ACCOUNT_SHEET_ROW_MIN_HEIGHT = 48;
+export interface AccountSheetItem {
+    /** Unique identifier for this action. */
+    id: string;
+    /** Display label. */
+    label: string;
+    /** Leading icon element (app-owned icon library). */
+    icon?: ReactNode;
+    /**
+     * Item color. Accepts a CSS color or a Mantine semantic name (`colors.error` → `"error"`).
+     * Destructive actions like Sign out should pass `colors.error`.
+     */
+    color?: string;
+    /** Show a divider before this item. */
+    dividerBefore?: boolean;
+}
+export interface AccountSheetProps {
+    /** Whether the bottom sheet is open. */
+    opened: boolean;
+    /** Close handler (backdrop, escape, or grip). */
+    onClose: () => void;
+    /** Primary identity line. */
+    displayName: string;
+    /** Optional secondary identity line (email). */
+    email?: string;
+    /** Name passed to Avatar (initials). Defaults to `displayName`. */
+    avatarName?: string;
+    /** Avatar color token. @default colors.primary */
+    avatarColor?: string;
+    /** Sheet title below the grip. @default "Account" */
+    title?: string;
+    /** Account actions. */
+    items: AccountSheetItem[];
+    /** Called when an action row is pressed. Receives the item `id`. */
+    onItemClick: (id: string) => void;
+    /** Overlay z-index. Defaults above legacy Studio/Investor shell chrome. */
+    zIndex?: number;
+}
+/**
+ * Touch-first account surface for mobile shells.
+ * Composes `BottomSheet` with identity header + action rows.
+ */
+export declare function AccountSheet({ opened, onClose, displayName, email, avatarName, avatarColor, title, items, onItemClick, zIndex, }: AccountSheetProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AccountSheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountSheet.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/AccountSheet/AccountSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,uFAAuF;AACvF,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAE/C,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,wCAAwC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,oEAAoE;IACpE,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAoED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAA4B,EAC5B,KAAiB,EACjB,KAAK,EACL,WAAW,EACX,MAA2C,GAC5C,EAAE,iBAAiB,2CA6CnB"}

package/dist/components/layout/AccountSheet/AccountSheet.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { fairmintVars, radii } from "../../../theme/index.js";
+import { overlayZIndexAboveLegacyShell } from "../../../theme/zIndex.js";
+import { BottomSheet } from "../../generic/BottomSheet/BottomSheet.js";
+import { Avatar } from "../../primitives/Avatar/Avatar.js";
+import { Box, Stack, Divider } from "../../primitives/layout.js";
+import { colors } from "../../../theme/colors.js";
+import { Text } from "../../../node_modules/@mantine/core/esm/components/Text/Text.js";
+import { UnstyledButton } from "../../../node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.js";
+const ACCOUNT_SHEET_ROW_MIN_HEIGHT = 48;
+function resolvePaintColor(color) {
+  if (!color) return void 0;
+  if (color === colors.error || color === "error" || color === "red") {
+    return fairmintVars.colorErrorText;
+  }
+  if (color === colors.primary || color === "indigo" || color === "primary") {
+    return fairmintVars.colorBrandPrimary;
+  }
+  return color;
+}
+function AccountSheetRow({
+  item,
+  onItemClick
+}) {
+  const paint = resolvePaintColor(item.color);
+  return /* @__PURE__ */ jsxs(
+    UnstyledButton,
+    {
+      type: "button",
+      onClick: () => onItemClick(item.id),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        width: "100%",
+        minHeight: ACCOUNT_SHEET_ROW_MIN_HEIGHT,
+        paddingInline: 8,
+        paddingBlock: 12,
+        borderRadius: radii.md,
+        textAlign: "left",
+        cursor: "pointer",
+        color: paint ?? fairmintVars.colorTextPrimary
+      },
+      styles: {
+        root: {
+          "&:hover": {
+            backgroundColor: fairmintVars.colorBgHover
+          }
+        }
+      },
+      children: [
+        item.icon ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            "aria-hidden": true,
+            style: {
+              display: "inline-flex",
+              color: paint ?? fairmintVars.colorIconSecondary,
+              flexShrink: 0
+            },
+            children: item.icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, style: { color: paint ?? void 0 }, children: item.label })
+      ]
+    }
+  );
+}
+function AccountSheet({
+  opened,
+  onClose,
+  displayName,
+  email,
+  avatarName,
+  avatarColor = colors.primary,
+  title = "Account",
+  items,
+  onItemClick,
+  zIndex = overlayZIndexAboveLegacyShell + 10
+}) {
+  return /* @__PURE__ */ jsxs(
+    BottomSheet,
+    {
+      opened,
+      onClose,
+      title,
+      dismissLabel: "Dismiss account menu",
+      zIndex,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 12,
+              paddingInline: 8,
+              paddingBlock: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx(Avatar, { name: avatarName ?? displayName, radius: "md", size: 40, color: avatarColor }),
+              /* @__PURE__ */ jsxs(Stack, { gap: 0, style: { minWidth: 0, flex: 1 }, children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, truncate: true, children: displayName }),
+                email && email !== displayName ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", truncate: true, children: email }) : null
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { my: "xs", color: fairmintVars.colorBorderDefault }),
+        /* @__PURE__ */ jsx(Stack, { gap: 4, children: items.map((item) => /* @__PURE__ */ jsxs(Box, { children: [
+          item.dividerBefore ? /* @__PURE__ */ jsx(Divider, { my: "xs", color: fairmintVars.colorBorderDefault }) : null,
+          /* @__PURE__ */ jsx(AccountSheetRow, { item, onItemClick })
+        ] }, item.id)) })
+      ]
+    }
+  );
+}
+export {
+  ACCOUNT_SHEET_ROW_MIN_HEIGHT,
+  AccountSheet
+};
+//# sourceMappingURL=AccountSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountSheet.js","sources":["../../../../src/components/layout/AccountSheet/AccountSheet.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { colors, fairmintVars, radii } from \"../../../theme\";\nimport { overlayZIndexAboveLegacyShell } from \"../../../theme/zIndex\";\nimport { BottomSheet } from \"../../generic/BottomSheet/BottomSheet\";\nimport { Avatar } from \"../../primitives/Avatar/Avatar\";\nimport { Box, Divider, Stack, Text, UnstyledButton } from \"../../primitives/layout\";\n\n/** Minimum touch target height for mobile account actions (WCAG 2.5.5 / Apple HIG). */\nexport const ACCOUNT_SHEET_ROW_MIN_HEIGHT = 48;\n\nexport interface AccountSheetItem {\n  /** Unique identifier for this action. */\n  id: string;\n  /** Display label. */\n  label: string;\n  /** Leading icon element (app-owned icon library). */\n  icon?: ReactNode;\n  /**\n   * Item color. Accepts a CSS color or a Mantine semantic name (`colors.error` → `\"error\"`).\n   * Destructive actions like Sign out should pass `colors.error`.\n   */\n  color?: string;\n  /** Show a divider before this item. */\n  dividerBefore?: boolean;\n}\n\nexport interface AccountSheetProps {\n  /** Whether the bottom sheet is open. */\n  opened: boolean;\n  /** Close handler (backdrop, escape, or grip). */\n  onClose: () => void;\n  /** Primary identity line. */\n  displayName: string;\n  /** Optional secondary identity line (email). */\n  email?: string;\n  /** Name passed to Avatar (initials). Defaults to `displayName`. */\n  avatarName?: string;\n  /** Avatar color token. @default colors.primary */\n  avatarColor?: string;\n  /** Sheet title below the grip. @default \"Account\" */\n  title?: string;\n  /** Account actions. */\n  items: AccountSheetItem[];\n  /** Called when an action row is pressed. Receives the item `id`. */\n  onItemClick: (id: string) => void;\n  /** Overlay z-index. Defaults above legacy Studio/Investor shell chrome. */\n  zIndex?: number;\n}\n\n/** Map Mantine semantic names (e.g. `colors.error`) to CSS paint tokens for inline styles. */\nfunction resolvePaintColor(color?: string): string | undefined {\n  if (!color) return undefined;\n  if (color === colors.error || color === \"error\" || color === \"red\") {\n    return fairmintVars.colorErrorText;\n  }\n  if (color === colors.primary || color === \"indigo\" || color === \"primary\") {\n    return fairmintVars.colorBrandPrimary;\n  }\n  return color;\n}\n\nfunction AccountSheetRow({\n  item,\n  onItemClick,\n}: {\n  item: AccountSheetItem;\n  onItemClick: (id: string) => void;\n}) {\n  const paint = resolvePaintColor(item.color);\n\n  return (\n    <UnstyledButton\n      type=\"button\"\n      onClick={() => onItemClick(item.id)}\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 12,\n        width: \"100%\",\n        minHeight: ACCOUNT_SHEET_ROW_MIN_HEIGHT,\n        paddingInline: 8,\n        paddingBlock: 12,\n        borderRadius: radii.md,\n        textAlign: \"left\",\n        cursor: \"pointer\",\n        color: paint ?? fairmintVars.colorTextPrimary,\n      }}\n      styles={{\n        root: {\n          \"&:hover\": {\n            backgroundColor: fairmintVars.colorBgHover,\n          },\n        },\n      }}\n    >\n      {item.icon ? (\n        <Box\n          component=\"span\"\n          aria-hidden\n          style={{\n            display: \"inline-flex\",\n            color: paint ?? fairmintVars.colorIconSecondary,\n            flexShrink: 0,\n          }}\n        >\n          {item.icon}\n        </Box>\n      ) : null}\n      <Text size=\"sm\" fw={500} style={{ color: paint ?? undefined }}>\n        {item.label}\n      </Text>\n    </UnstyledButton>\n  );\n}\n\n/**\n * Touch-first account surface for mobile shells.\n * Composes `BottomSheet` with identity header + action rows.\n */\nexport function AccountSheet({\n  opened,\n  onClose,\n  displayName,\n  email,\n  avatarName,\n  avatarColor = colors.primary,\n  title = \"Account\",\n  items,\n  onItemClick,\n  zIndex = overlayZIndexAboveLegacyShell + 10,\n}: AccountSheetProps) {\n  return (\n    <BottomSheet\n      opened={opened}\n      onClose={onClose}\n      title={title}\n      dismissLabel=\"Dismiss account menu\"\n      zIndex={zIndex}\n    >\n      <Box\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 12,\n          paddingInline: 8,\n          paddingBlock: 8,\n        }}\n      >\n        <Avatar name={avatarName ?? displayName} radius=\"md\" size={40} color={avatarColor} />\n        <Stack gap={0} style={{ minWidth: 0, flex: 1 }}>\n          <Text size=\"sm\" fw={600} truncate>\n            {displayName}\n          </Text>\n          {email && email !== displayName ? (\n            <Text size=\"xs\" c=\"dimmed\" truncate>\n              {email}\n            </Text>\n          ) : null}\n        </Stack>\n      </Box>\n\n      <Divider my=\"xs\" color={fairmintVars.colorBorderDefault} />\n\n      <Stack gap={4}>\n        {items.map((item) => (\n          <Box key={item.id}>\n            {item.dividerBefore ? (\n              <Divider my=\"xs\" color={fairmintVars.colorBorderDefault} />\n            ) : null}\n            <AccountSheetRow item={item} onItemClick={onItemClick} />\n          </Box>\n        ))}\n      </Stack>\n    </BottomSheet>\n  );\n}\n"],"names":[],"mappings":"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"}

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":";;;;;;;;;;;;;;;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,YAAYA,QAAAA,wBAAwB,IAAI;AAC9C,QAAM,cAAc,KAAK,UAAU,KAAK,CAAC,UAAU,MAAM,MAAM,KAAK;AACpE,QAAM,CAAC,QAAQ,SAAS,IAAIC,MAAAA,SAAS,QAAQ,KAAK,IAAI,KAAK,WAAW;AACtE,QAAM,SAAS,QAAQ,KAAK,MAAM,KAAK,CAAC;AAExC,QAAM,cAAc,KAAK,QAAQ;AAEjC,yCACGC,YAAA,EACC,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,eAAAA;AAAAA,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,cAAcC,MAAAA,MAAM;AAAA,UACpB,WAAW;AAAA,UACX,QAAQ,KAAK,WAAW,gBAAgB;AAAA,UACxC,SAAS,KAAK,WAAW,MAAM;AAAA,UAC/B,iBAAiB,SAASC,mBAAa,uBAAuB;AAAA,UAC9D,OAAO,SAASA,mBAAa,6BAA6BA,MAAAA,aAAa;AAAA,QAAA;AAAA,QAEzE,QAAQ;AAAA,UACN,MAAM;AAAA,YACJ,0BAA0B;AAAA,cACxB,iBAAiB,SACbA,mBAAa,uBACbA,MAAAA,aAAa;AAAA,YAAA;AAAA,UACnB;AAAA,QACF;AAAA,QAGD,UAAA;AAAA,UAAA,KAAK,OACJC,2BAAAA;AAAAA,YAACL,OAAAA;AAAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,OAAO,SACHI,MAAAA,aAAa,6BACbA,MAAAA,aAAa;AAAA,gBACjB,YAAY;AAAA,cAAA;AAAA,cAGb,UAAA,KAAK;AAAA,YAAA;AAAA,UAAA,IAEN;AAAA,UACJC,2BAAAA;AAAAA,YAACC,KAAAA;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,SAAS,MAAM;AAAA,cACnB,OAAO;AAAA,gBACL,MAAM;AAAA,gBACN,UAAU;AAAA,gBACV,OAAO,SAASF,MAAAA,aAAa,6BAA6B;AAAA,cAAA;AAAA,cAE5D,UAAQ;AAAA,cAEP,UAAA,KAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEP,KAAK;AAAA,UACL,cACCC,2BAAAA;AAAAA,YAACE,gBAAAA;AAAAA,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,OAAOH,MAAAA,aAAa;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGL,eAAe,SACdC,2BAAAA,IAACG,OAAAA,OAAA,EAAM,KAAK,GAAG,IAAI,GAChB,UAAA,KAAK,UAAU,IAAI,CAAC,UACnBH,2BAAAA,IAAC,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,EAAA,QACZI,WAASC,OAAAA;AACX,GAAmB;AACjB,QAAM,mBAAmB,YAAY,CAAC,EAAE,IAAI,QAAQ,OAAO;AAE3D,QAAM,kBAAkB,CAAC,OAAe;AACtC,gBAAY,EAAE;AACd,YAAA;AAAA,EACF;AAEA,SACEL,2BAAAA;AAAAA,IAACM,OAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,iBAAiB;AAAA,MAAA,QACjBF;AAAAA,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,UAAAR,2BAAAA;AAAAA,QAACO,OAAAA;AAAAA,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,YAAAP,2BAAAA;AAAAA,cAACW,MAAAA;AAAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,KAAI;AAAA,gBACJ,OAAO,EAAE,YAAY,EAAA;AAAA,gBAErB,UAAA;AAAA,kBAAAP,2BAAAA,IAACL,OAAAA,KAAA,EAAI,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,QAAQ,YAAY,SAAA,GAC9D,UAAA,QACH;AAAA,kBACAK,2BAAAA;AAAAA,oBAACQ,WAAAA;AAAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,cAAW;AAAA,sBACX,OAAM;AAAA,sBACN,SAAQ;AAAA,sBACR,MAAK;AAAA,sBACL,SAAS;AAAA,sBAET,UAAAR,2BAAAA,IAACS,eAAA,EAAM,MAAM,IAAI,QAAQ,IAAA,CAAK;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAChC;AAAA,cAAA;AAAA,YAAA;AAAA,YAGFT,2BAAAA,IAACG,OAAAA,OAAA,EAAM,KAAK,GAAG,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,OAAA,GACtD,UAAA,iBAAiB;AAAA,cAAQ,CAAC,YACzB,QAAQ,MAAM,IAAI,CAAC,SACjBH,2BAAAA;AAAAA,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,YACPJ,2BAAAA,KAACO,OAAAA,OAAA,EAAM,KAAI,MAAK,OAAO,EAAE,YAAY,EAAA,GAClC,UAAA;AAAA,cAAA,MAAMH,2BAAAA,IAACL,cAAI,OAAO,EAAE,OAAO,UAAW,eAAI,IAAS;AAAA,cACnD,OAAO,UAAUK,2BAAAA,IAACU,OAAAA,WAAQ,OAAOX,MAAAA,aAAa,oBAAoB,IAAK;AAAA,cACvE,UACCH,2BAAAA;AAAAA,gBAACC,eAAAA;AAAAA,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,cAAcC,MAAAA,MAAM;AAAA,oBACpB,WAAW;AAAA,oBACX,QAAQ,iBAAiB,YAAY;AAAA,kBAAA;AAAA,kBAEvC,QAAQ;AAAA,oBACN,MAAM;AAAA,sBACJ,WAAW;AAAA,wBACT,iBAAiBC,MAAAA,aAAa;AAAA,sBAAA;AAAA,oBAChC;AAAA,kBACF;AAAA,kBAGD,UAAA;AAAA,oBAAA,QAAQ;AAAA,oBACTH,2BAAAA,KAACO,OAAAA,OAAA,EAAM,KAAK,GAAG,OAAO,EAAE,UAAU,GAAG,MAAM,EAAA,GACzC,UAAA;AAAA,sBAAAH,2BAAAA,IAACC,KAAAA,MAAA,EAAK,MAAK,MAAK,IAAI,KAAK,UAAQ,MAC9B,kBAAQ,YAAA,CACX;AAAA,sBACC,QAAQ,WAAW,QAAQ,YAAY,QAAQ,cAC9CD,2BAAAA,IAACC,KAAAA,MAAA,EAAK,MAAK,MAAK,GAAE,UAAS,UAAQ,MAChC,UAAA,QAAQ,SACX,IACE;AAAA,oBAAA,GACN;AAAA,oBACAD,2BAAAA;AAAAA,sBAACE,gBAAAA;AAAAA,sBAAA;AAAA,wBACC,MAAM;AAAA,wBACN,QAAQ;AAAA,wBACR,eAAW;AAAA,wBACX,OAAO,EAAE,OAAOH,MAAAA,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;;;;"}