@particle-academy/react-fancy 5.12.0 → 5.13.1

package/dist/chunk-EERAEPQO.cjs

@@ -0,0 +1,177 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+
+var MenuContext = react.createContext(null);
+function useMenu() {
+  const ctx = react.useContext(MenuContext);
+  if (!ctx) {
+    throw new Error("useMenu must be used within a <Menu> component");
+  }
+  return ctx;
+}
+function MenuItem({
+  children,
+  href,
+  as: As,
+  icon,
+  active = false,
+  disabled = false,
+  badge,
+  onClick,
+  className,
+  ...rest
+}) {
+  const { orientation } = useMenu();
+  const isVertical = orientation === "vertical";
+  const isLink = Boolean(href || As);
+  const Tag = isLink ? As ?? "a" : "button";
+  const tagProps = isLink ? { ...href ? { href } : {}, onClick } : { type: "button", onClick };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Tag,
+    {
+      ...tagProps,
+      ...rest,
+      "data-react-fancy-menu-item": "",
+      "data-active": active || void 0,
+      "aria-current": active ? "page" : void 0,
+      "aria-disabled": disabled || void 0,
+      className: chunk3Z6ALUWP_cjs.cn(
+        "flex items-center gap-2 rounded-md text-sm font-medium transition-colors",
+        "outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
+        isVertical ? "w-full px-3 py-2" : "px-3 py-2",
+        active ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100" : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children }),
+        badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge })
+      ]
+    }
+  );
+}
+MenuItem.displayName = "MenuItem";
+function MenuSubmenu({
+  children,
+  label,
+  icon,
+  defaultOpen = false,
+  className
+}) {
+  const [open, setOpen] = react.useState(defaultOpen);
+  const { orientation } = useMenu();
+  const isVertical = orientation === "vertical";
+  if (!isVertical) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-react-fancy-menu-submenu": "",
+        className: chunk3Z6ALUWP_cjs.cn("group relative", className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: chunk3Z6ALUWP_cjs.cn(
+                "flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900",
+                "dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100"
+              ),
+              children: [
+                icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 opacity-60" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: chunk3Z6ALUWP_cjs.cn(
+                "invisible absolute left-0 top-full z-50 min-w-[180px] pt-1 opacity-0 transition-all",
+                "group-hover:visible group-hover:opacity-100"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900", children })
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-menu-submenu": "", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        className: chunk3Z6ALUWP_cjs.cn(
+          "flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+          "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900",
+          "dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100"
+        ),
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              className: chunk3Z6ALUWP_cjs.cn(
+                "h-3.5 w-3.5 opacity-60 transition-transform duration-200",
+                open && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: chunk3Z6ALUWP_cjs.cn(
+          "grid transition-[grid-template-rows] duration-200",
+          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4 border-l border-zinc-200 pl-2 pt-1 dark:border-zinc-700", children }) })
+      }
+    )
+  ] });
+}
+MenuSubmenu.displayName = "MenuSubmenu";
+function MenuGroup({ children, label, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-menu-group": "", className: chunk3Z6ALUWP_cjs.cn("py-1", className), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500", children: label }),
+    children
+  ] });
+}
+MenuGroup.displayName = "MenuGroup";
+function MenuRoot({ children, orientation = "vertical", className }) {
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value: { orientation }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "data-react-fancy-menu": "",
+      "data-orientation": orientation,
+      className: chunk3Z6ALUWP_cjs.cn(
+        "flex gap-0.5",
+        isVertical ? "flex-col" : "flex-row items-center",
+        className
+      ),
+      children
+    }
+  ) });
+}
+var Menu = Object.assign(MenuRoot, {
+  Item: MenuItem,
+  Submenu: MenuSubmenu,
+  Group: MenuGroup
+});
+
+exports.Menu = Menu;
+exports.useMenu = useMenu;
+//# sourceMappingURL=chunk-EERAEPQO.cjs.map
+//# sourceMappingURL=chunk-EERAEPQO.cjs.map

package/dist/chunk-EERAEPQO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Menu/Menu.context.ts","../src/components/Menu/MenuItem.tsx","../src/components/Menu/MenuSubmenu.tsx","../src/components/Menu/MenuGroup.tsx","../src/components/Menu/Menu.tsx"],"names":["createContext","useContext","jsxs","cn","jsx","useState","ChevronDown"],"mappings":"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","file":"chunk-EERAEPQO.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { MenuContextValue } from \"./Menu.types\";\n\nexport const MenuContext = createContext<MenuContextValue | null>(null);\n\nexport function useMenu(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) {\n    throw new Error(\"useMenu must be used within a <Menu> component\");\n  }\n  return ctx;\n}\n","import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMenu } from \"./Menu.context\";\nimport type { MenuItemProps } from \"./Menu.types\";\n\nexport function MenuItem({\n  children,\n  href,\n  as: As,\n  icon,\n  active = false,\n  disabled = false,\n  badge,\n  onClick,\n  className,\n  ...rest\n}: MenuItemProps) {\n  const { orientation } = useMenu();\n  const isVertical = orientation === \"vertical\";\n\n  // See NavigableProps: link mode engages on `href` OR `as`, and `onClick`\n  // survives into it rather than being dropped.\n  const isLink = Boolean(href || As);\n  const Tag = isLink ? ((As ?? \"a\") as ElementType) : \"button\";\n  const tagProps = isLink\n    ? { ...(href ? { href } : {}), onClick }\n    : { type: \"button\" as const, onClick };\n\n  return (\n    <Tag\n      {...tagProps}\n      {...rest}\n      data-react-fancy-menu-item=\"\"\n      data-active={active || undefined}\n      aria-current={active ? \"page\" : undefined}\n      aria-disabled={disabled || undefined}\n      className={cn(\n        \"flex items-center gap-2 rounded-md text-sm font-medium transition-colors\",\n        \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n        isVertical ? \"w-full px-3 py-2\" : \"px-3 py-2\",\n        active\n          ? \"bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100\"\n          : \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n        disabled && \"pointer-events-none opacity-50\",\n        className,\n      )}\n    >\n      {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n      <span className=\"flex-1 truncate text-left\">{children}</span>\n      {badge && <span className=\"shrink-0\">{badge}</span>}\n    </Tag>\n  );\n}\n\nMenuItem.displayName = \"MenuItem\";\n","import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMenu } from \"./Menu.context\";\nimport type { MenuSubmenuProps } from \"./Menu.types\";\n\nexport function MenuSubmenu({\n  children,\n  label,\n  icon,\n  defaultOpen = false,\n  className,\n}: MenuSubmenuProps) {\n  const [open, setOpen] = useState(defaultOpen);\n  const { orientation } = useMenu();\n  const isVertical = orientation === \"vertical\";\n\n  if (!isVertical) {\n    // Horizontal submenus use a hover-based dropdown\n    return (\n      <div\n        data-react-fancy-menu-submenu=\"\"\n        className={cn(\"group relative\", className)}\n      >\n        <button\n          type=\"button\"\n          className={cn(\n            \"flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors\",\n            \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n            \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n          )}\n        >\n          {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n          <span>{label}</span>\n          <ChevronDown className=\"h-3.5 w-3.5 opacity-60\" />\n        </button>\n        <div\n          className={cn(\n            \"invisible absolute left-0 top-full z-50 min-w-[180px] pt-1 opacity-0 transition-all\",\n            \"group-hover:visible group-hover:opacity-100\",\n          )}\n        >\n          <div className=\"rounded-lg border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900\">\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Vertical submenus use accordion-style expand/collapse\n  return (\n    <div data-react-fancy-menu-submenu=\"\" className={className}>\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        className={cn(\n          \"flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors\",\n          \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n          \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n        )}\n      >\n        {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n        <span className=\"flex-1 text-left\">{label}</span>\n        <ChevronDown\n          className={cn(\n            \"h-3.5 w-3.5 opacity-60 transition-transform duration-200\",\n            open && \"rotate-180\",\n          )}\n        />\n      </button>\n      <div\n        className={cn(\n          \"grid transition-[grid-template-rows] duration-200\",\n          open ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n        )}\n      >\n        <div className=\"overflow-hidden\">\n          <div className=\"ml-4 border-l border-zinc-200 pl-2 pt-1 dark:border-zinc-700\">\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nMenuSubmenu.displayName = \"MenuSubmenu\";\n","import { cn } from \"../../utils/cn\";\nimport type { MenuGroupProps } from \"./Menu.types\";\n\nexport function MenuGroup({ children, label, className }: MenuGroupProps) {\n  return (\n    <div data-react-fancy-menu-group=\"\" className={cn(\"py-1\", className)}>\n      {label && (\n        <p className=\"mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500\">\n          {label}\n        </p>\n      )}\n      {children}\n    </div>\n  );\n}\n\nMenuGroup.displayName = \"MenuGroup\";\n","import { cn } from \"../../utils/cn\";\nimport { MenuContext } from \"./Menu.context\";\nimport { MenuItem } from \"./MenuItem\";\nimport { MenuSubmenu } from \"./MenuSubmenu\";\nimport { MenuGroup } from \"./MenuGroup\";\nimport type { MenuProps } from \"./Menu.types\";\n\nfunction MenuRoot({ children, orientation = \"vertical\", className }: MenuProps) {\n  const isVertical = orientation === \"vertical\";\n\n  return (\n    <MenuContext.Provider value={{ orientation }}>\n      <nav\n        data-react-fancy-menu=\"\"\n        data-orientation={orientation}\n        className={cn(\n          \"flex gap-0.5\",\n          isVertical ? \"flex-col\" : \"flex-row items-center\",\n          className,\n        )}\n      >\n        {children}\n      </nav>\n    </MenuContext.Provider>\n  );\n}\n\nexport const Menu = Object.assign(MenuRoot, {\n  Item: MenuItem,\n  Submenu: MenuSubmenu,\n  Group: MenuGroup,\n});\n"]}

package/dist/chunk-EIBW5YLS.js

@@ -0,0 +1,52 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var AudioViewer = forwardRef(
+  ({
+    src,
+    title,
+    controls = true,
+    autoPlay = false,
+    loop = false,
+    onError,
+    className,
+    style
+  }, ref) => {
+    const [errored, setErrored] = useState(false);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-audio-viewer": "",
+        className: cn(
+          "flex flex-col gap-2 rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900",
+          className
+        ),
+        style,
+        children: [
+          title && /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-zinc-700 dark:text-zinc-200", children: title }),
+          errored ? /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Couldn't load audio." }) : /* @__PURE__ */ jsx(
+            "audio",
+            {
+              src,
+              controls,
+              autoPlay,
+              loop,
+              onError: () => {
+                setErrored(true);
+                onError?.();
+              },
+              className: "w-full"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AudioViewer.displayName = "AudioViewer";
+
+export { AudioViewer };
+//# sourceMappingURL=chunk-EIBW5YLS.js.map
+//# sourceMappingURL=chunk-EIBW5YLS.js.map

package/dist/chunk-EIBW5YLS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AudioViewer/AudioViewer.tsx"],"names":[],"mappings":";;;;AAYO,IAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CACE;AAAA,IACE,GAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,GAAW,IAAA;AAAA,IACX,QAAA,GAAW,KAAA;AAAA,IACX,IAAA,GAAO,KAAA;AAAA,IACP,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,+BAAA,EAA8B,EAAA;AAAA,QAC9B,SAAA,EAAW,EAAA;AAAA,UACT,0GAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+DAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,0BACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CAAA,EAA2C,kCAE1D,CAAA,mBAEA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,IAAA;AAAA,cACA,SAAS,MAAM;AACb,gBAAA,UAAA,CAAW,IAAI,CAAA;AACf,gBAAA,OAAA,IAAU;AAAA,cACZ,CAAA;AAAA,cACA,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-EIBW5YLS.js","sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { AudioViewerProps } from \"./AudioViewer.types\";\n\n/**\n * A standalone audio viewer — a themed card wrapping the native audio player,\n * with an optional title. Renders for audio sources inside `<MediaViewer>`.\n *\n * ```tsx\n * <AudioViewer src=\"/track.mp3\" title=\"track.mp3\" />\n * ```\n */\nexport const AudioViewer = forwardRef<HTMLDivElement, AudioViewerProps>(\n  (\n    {\n      src,\n      title,\n      controls = true,\n      autoPlay = false,\n      loop = false,\n      onError,\n      className,\n      style,\n    },\n    ref,\n  ) => {\n    const [errored, setErrored] = useState(false);\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-audio-viewer=\"\"\n        className={cn(\n          \"flex flex-col gap-2 rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900\",\n          className,\n        )}\n        style={style}\n      >\n        {title && (\n          <div className=\"truncate text-sm font-medium text-zinc-700 dark:text-zinc-200\">\n            {title}\n          </div>\n        )}\n        {errored ? (\n          <div className=\"text-sm text-zinc-500 dark:text-zinc-400\">\n            Couldn&apos;t load audio.\n          </div>\n        ) : (\n          <audio\n            src={src}\n            controls={controls}\n            autoPlay={autoPlay}\n            loop={loop}\n            onError={() => {\n              setErrored(true);\n              onError?.();\n            }}\n            className=\"w-full\"\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAudioViewer.displayName = \"AudioViewer\";\n"]}

package/dist/chunk-ESKVRRVA.js

@@ -0,0 +1,56 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var StatBand = forwardRef(
+  ({ columns = 4, className, style, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-react-fancy-stat-band": "",
+        className: cn("grid gap-6", className),
+        style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+StatBand.displayName = "StatBand";
+var valueClasses = {
+  sm: "text-xl",
+  md: "text-3xl",
+  lg: "text-5xl"
+};
+var StatRoot = forwardRef(
+  ({ value, label, size = "md", className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, "data-react-fancy-stat": "", className: cn(className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-react-fancy-stat-value": "",
+          className: cn(
+            "font-semibold leading-none tracking-tight text-zinc-900 tabular-nums dark:text-zinc-100",
+            valueClasses[size]
+          ),
+          children: value
+        }
+      ),
+      label != null && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-react-fancy-stat-label": "",
+          className: "mt-1.5 font-mono text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400",
+          children: label
+        }
+      )
+    ] }) });
+  }
+);
+StatRoot.displayName = "Stat";
+var Stat = Object.assign(StatRoot, { Band: StatBand });
+
+export { Stat, StatBand };
+//# sourceMappingURL=chunk-ESKVRRVA.js.map
+//# sourceMappingURL=chunk-ESKVRRVA.js.map

package/dist/chunk-ESKVRRVA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Stat/StatBand.tsx","../src/components/Stat/Stat.tsx"],"names":["forwardRef","jsx"],"mappings":";;;;AAWO,IAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,EAAE,OAAA,GAAU,CAAA,EAAG,SAAA,EAAW,OAAO,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC9D,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,4BAAA,EAA2B,EAAA;AAAA,QAC3B,SAAA,EAAW,EAAA,CAAG,YAAA,EAAc,SAAS,CAAA;AAAA,QACrC,OAAO,EAAE,mBAAA,EAAqB,UAAU,OAAO,CAAA,iBAAA,CAAA,EAAqB,GAAG,KAAA,EAAM;AAAA,QAC5E,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;ACtBvB,IAAM,YAAA,GAA+D;AAAA,EACnE,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,UAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAcA,IAAM,QAAA,GAAWA,UAAAA;AAAA,EACf,CAAC,EAAE,KAAA,EAAO,KAAA,EAAO,IAAA,GAAO,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACrE,IAAA,uBACEC,GAAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,uBAAA,EAAsB,EAAA,EAAG,SAAA,EAAW,EAAA,CAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EACnE,sCACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAAA,GAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,6BAAA,EAA4B,EAAA;AAAA,UAC5B,SAAA,EAAW,EAAA;AAAA,YACT,yFAAA;AAAA,YACA,aAAa,IAAI;AAAA,WACnB;AAAA,UAEC,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MACC,KAAA,IAAS,wBACRA,GAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,6BAAA,EAA4B,EAAA;AAAA,UAC5B,SAAA,EAAU,mFAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EAEJ,CAAA,EAEJ,CAAA;AAAA,EAEJ;AACF,CAAA;AAEA,QAAA,CAAS,WAAA,GAAc,MAAA;AAEhB,IAAM,OAAO,MAAA,CAAO,MAAA,CAAO,UAAU,EAAE,IAAA,EAAM,UAAU","file":"chunk-ESKVRRVA.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { StatBandProps } from \"./Stat.types\";\n\n/**\n * The row a set of `<Stat>`s sits in.\n *\n * A plain grid, but it is the reason `<Stat>` defaults to `tabular-nums`: a\n * figure alone can be proportional without anyone noticing, and only becomes\n * wrong once it has neighbours to fail to line up with.\n */\nexport const StatBand = forwardRef<HTMLDivElement, StatBandProps>(\n  ({ columns = 4, className, style, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-stat-band=\"\"\n        className={cn(\"grid gap-6\", className)}\n        style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, ...style }}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nStatBand.displayName = \"StatBand\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { StatBand } from \"./StatBand\";\nimport type { StatProps } from \"./Stat.types\";\n\nconst valueClasses: Record<NonNullable<StatProps[\"size\"]>, string> = {\n  sm: \"text-xl\",\n  md: \"text-3xl\",\n  lg: \"text-5xl\",\n};\n\n/**\n * A big display figure with a caption — the `2016 / 120+ / 08 / 14` band cell.\n *\n * Twenty-seven gallery styles build this, and **five of seventeen forgot\n * `tabular-nums`**. That is not a cosmetic slip: in a proportional face a `1` is\n * narrower than a `0`, so a row of figures that is supposed to read as a band\n * comes out visibly ragged, and the fix is one property nobody remembers to\n * look for. It is the default here.\n *\n * Distinct from a right-aligned key/value list — this is a large flush-left\n * figure repeated across a row.\n */\nconst StatRoot = forwardRef<HTMLDivElement, StatProps>(\n  ({ value, label, size = \"md\", className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} data-react-fancy-stat=\"\" className={cn(className)} {...props}>\n        {children ?? (\n          <>\n            <div\n              data-react-fancy-stat-value=\"\"\n              className={cn(\n                \"font-semibold leading-none tracking-tight text-zinc-900 tabular-nums dark:text-zinc-100\",\n                valueClasses[size],\n              )}\n            >\n              {value}\n            </div>\n            {label != null && (\n              <div\n                data-react-fancy-stat-label=\"\"\n                className=\"mt-1.5 font-mono text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400\"\n              >\n                {label}\n              </div>\n            )}\n          </>\n        )}\n      </div>\n    );\n  },\n);\n\nStatRoot.displayName = \"Stat\";\n\nexport const Stat = Object.assign(StatRoot, { Band: StatBand });\n"]}

package/dist/chunk-EVXDG2XN.js

@@ -0,0 +1,108 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var glowColors = {
+  on: "#a855f7",
+  // violet — neutral
+  xp: "#22c55e",
+  // green
+  achievement: "#f59e0b"
+  // amber
+};
+var containerSizeClasses = {
+  xs: "h-6 w-6",
+  sm: "h-8 w-8",
+  md: "h-10 w-10",
+  lg: "h-12 w-12",
+  xl: "h-16 w-16"
+};
+var fallbackTextSize = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-lg"
+};
+var statusSizeClasses = {
+  xs: "h-1.5 w-1.5",
+  sm: "h-2 w-2",
+  md: "h-2.5 w-2.5",
+  lg: "h-3 w-3",
+  xl: "h-4 w-4"
+};
+var statusColorClasses = {
+  online: "bg-green-500",
+  offline: "bg-zinc-400",
+  busy: "bg-red-500",
+  away: "bg-amber-500"
+};
+var Avatar = forwardRef(
+  ({
+    src,
+    alt = "",
+    fallback,
+    size = "md",
+    status,
+    glow,
+    className
+  }, ref) => {
+    const glowKey = glow === true ? "on" : glow || null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-avatar": "",
+        className: cn(
+          "relative inline-flex items-center justify-center rounded-full",
+          containerSizeClasses[size],
+          !src && "bg-zinc-200 dark:bg-zinc-700",
+          className
+        ),
+        children: [
+          glowKey && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              "data-react-fancy-avatar-glow": glowKey,
+              className: "fancy-avatar-glow",
+              style: { "--fancy-glow": glowColors[glowKey] }
+            }
+          ),
+          src ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt,
+              className: "h-full w-full rounded-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "font-medium text-zinc-600 dark:text-zinc-300 select-none",
+                fallbackTextSize[size]
+              ),
+              children: fallback
+            }
+          ),
+          status && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute bottom-0 right-0 rounded-full ring-2 ring-white dark:ring-zinc-900",
+                statusSizeClasses[size],
+                statusColorClasses[status]
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+export { Avatar };
+//# sourceMappingURL=chunk-EVXDG2XN.js.map
+//# sourceMappingURL=chunk-EVXDG2XN.js.map

package/dist/chunk-EVXDG2XN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;AAIA,IAAM,UAAA,GAAa;AAAA,EACjB,EAAA,EAAI,SAAA;AAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA;AAAA,EACJ,WAAA,EAAa;AAAA;AACf,CAAA;AAKA,IAAM,oBAAA,GAAmD;AAAA,EACvD,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,gBAAA,GAA+C;AAAA,EACnD,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,iBAAA,GAAgD;AAAA,EACpD,EAAA,EAAI,aAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,aAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,kBAAA,GAAmD;AAAA,EACvD,MAAA,EAAQ,cAAA;AAAA,EACR,OAAA,EAAS,aAAA;AAAA,EACT,IAAA,EAAM,YAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAA;AAEO,IAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CACE;AAAA,IACE,GAAA;AAAA,IACA,GAAA,GAAM,EAAA;AAAA,IACN,QAAA;AAAA,IACA,IAAA,GAAO,IAAA;AAAA,IACP,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,MAAM,OAAA,GAAU,IAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA,IAAQ,IAAA;AAC/C,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,yBAAA,EAAwB,EAAA;AAAA,QACxB,SAAA,EAAW,EAAA;AAAA,UACT,+DAAA;AAAA,UACA,qBAAqB,IAAI,CAAA;AAAA,UACzB,CAAC,GAAA,IAAO,8BAAA;AAAA,UACR;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,OAAA,oBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAW,IAAA;AAAA,cACX,8BAAA,EAA8B,OAAA;AAAA,cAC9B,SAAA,EAAU,mBAAA;AAAA,cACV,KAAA,EAAO,EAAE,cAAA,EAAgB,UAAA,CAAW,OAAO,CAAA;AAAE;AAAA,WAC/C;AAAA,UAED,GAAA,mBACC,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,GAAA;AAAA,cACA,SAAA,EAAU;AAAA;AAAA,WACZ,mBAEA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,0DAAA;AAAA,gBACA,iBAAiB,IAAI;AAAA,eACvB;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED,MAAA,oBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,6EAAA;AAAA,gBACA,kBAAkB,IAAI,CAAA;AAAA,gBACtB,mBAAmB,MAAM;AAAA;AAC3B;AAAA;AACF;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-EVXDG2XN.js","sourcesContent":["import { forwardRef, type CSSProperties } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { AvatarProps } from \"./Avatar.types\";\n\nconst glowColors = {\n  on: \"#a855f7\", // violet — neutral\n  xp: \"#22c55e\", // green\n  achievement: \"#f59e0b\", // amber\n} as const;\n\ntype AvatarSize = NonNullable<AvatarProps[\"size\"]>;\ntype AvatarStatus = NonNullable<AvatarProps[\"status\"]>;\n\nconst containerSizeClasses: Record<AvatarSize, string> = {\n  xs: \"h-6 w-6\",\n  sm: \"h-8 w-8\",\n  md: \"h-10 w-10\",\n  lg: \"h-12 w-12\",\n  xl: \"h-16 w-16\",\n};\n\nconst fallbackTextSize: Record<AvatarSize, string> = {\n  xs: \"text-xs\",\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n  xl: \"text-lg\",\n};\n\nconst statusSizeClasses: Record<AvatarSize, string> = {\n  xs: \"h-1.5 w-1.5\",\n  sm: \"h-2 w-2\",\n  md: \"h-2.5 w-2.5\",\n  lg: \"h-3 w-3\",\n  xl: \"h-4 w-4\",\n};\n\nconst statusColorClasses: Record<AvatarStatus, string> = {\n  online: \"bg-green-500\",\n  offline: \"bg-zinc-400\",\n  busy: \"bg-red-500\",\n  away: \"bg-amber-500\",\n};\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      src,\n      alt = \"\",\n      fallback,\n      size = \"md\",\n      status,\n      glow,\n      className,\n    },\n    ref,\n  ) => {\n    const glowKey = glow === true ? \"on\" : glow || null;\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-avatar=\"\"\n        className={cn(\n          \"relative inline-flex items-center justify-center rounded-full\",\n          containerSizeClasses[size],\n          !src && \"bg-zinc-200 dark:bg-zinc-700\",\n          className,\n        )}\n      >\n        {glowKey && (\n          <span\n            aria-hidden\n            data-react-fancy-avatar-glow={glowKey}\n            className=\"fancy-avatar-glow\"\n            style={{ \"--fancy-glow\": glowColors[glowKey] } as CSSProperties}\n          />\n        )}\n        {src ? (\n          <img\n            src={src}\n            alt={alt}\n            className=\"h-full w-full rounded-full object-cover\"\n          />\n        ) : (\n          <span\n            className={cn(\n              \"font-medium text-zinc-600 dark:text-zinc-300 select-none\",\n              fallbackTextSize[size],\n            )}\n          >\n            {fallback}\n          </span>\n        )}\n        {status && (\n          <span\n            className={cn(\n              \"absolute bottom-0 right-0 rounded-full ring-2 ring-white dark:ring-zinc-900\",\n              statusSizeClasses[size],\n              statusColorClasses[status],\n            )}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAvatar.displayName = \"Avatar\";\n"]}

package/dist/chunk-F6NEPU67.cjs

@@ -0,0 +1,218 @@
+'use strict';
+
+var chunkTXTRTTG7_cjs = require('./chunk-TXTRTTG7.cjs');
+var chunk3WGRVDQR_cjs = require('./chunk-3WGRVDQR.cjs');
+var chunkNBZC6LOB_cjs = require('./chunk-NBZC6LOB.cjs');
+var chunkRXDRYWVD_cjs = require('./chunk-RXDRYWVD.cjs');
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DrawerContext = react.createContext(null);
+function useDrawer() {
+  const ctx = react.useContext(DrawerContext);
+  if (!ctx) {
+    throw new Error("Drawer compound components must be used within <Drawer>");
+  }
+  return ctx;
+}
+function DrawerHeader({ children, closable = true, className }) {
+  const { close } = useDrawer();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-react-fancy-drawer-header": "",
+      className: chunk3Z6ALUWP_cjs.cn(
+        "flex shrink-0 items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-700",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children }),
+        closable ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: close,
+            className: "rounded-lg p-1 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 18 })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+DrawerHeader.displayName = "DrawerHeader";
+function DrawerBody({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-react-fancy-drawer-body": "",
+      className: chunk3Z6ALUWP_cjs.cn("min-h-0 flex-1 overflow-auto px-4 py-3 text-zinc-700 dark:text-zinc-300", className),
+      children
+    }
+  );
+}
+DrawerBody.displayName = "DrawerBody";
+function DrawerFooter({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-react-fancy-drawer-footer": "",
+      className: chunk3Z6ALUWP_cjs.cn(
+        "flex shrink-0 items-center justify-end gap-2 border-t border-zinc-200 px-4 py-3 dark:border-zinc-700",
+        className
+      ),
+      children
+    }
+  );
+}
+DrawerFooter.displayName = "DrawerFooter";
+function DrawerContainer({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-react-fancy-drawer-container": "",
+      ...rest,
+      className: chunk3Z6ALUWP_cjs.cn("relative overflow-hidden", className),
+      children
+    }
+  );
+}
+DrawerContainer.displayName = "DrawerContainer";
+var WIDTH = {
+  sm: "w-64",
+  md: "w-80",
+  lg: "w-96",
+  xl: "w-[32rem]",
+  full: "w-full"
+};
+var HEIGHT = {
+  sm: "h-32",
+  md: "h-64",
+  lg: "h-96",
+  xl: "h-[32rem]",
+  full: "h-full"
+};
+var ANCHOR = {
+  left: "inset-y-0 left-0",
+  right: "inset-y-0 right-0",
+  top: "inset-x-0 top-0",
+  bottom: "inset-x-0 bottom-0"
+};
+var ENTER = {
+  left: "fancy-slide-in-left",
+  right: "fancy-slide-in-right",
+  top: "fancy-slide-in-top",
+  bottom: "fancy-slide-in-bottom"
+};
+var EXIT = {
+  left: "fancy-slide-out-left",
+  right: "fancy-slide-out-right",
+  top: "fancy-slide-out-top",
+  bottom: "fancy-slide-out-bottom"
+};
+var EDGE = {
+  left: "border-r",
+  right: "border-l",
+  top: "border-b",
+  bottom: "border-t"
+};
+function DrawerRoot({
+  children,
+  open,
+  onClose,
+  side = "right",
+  size = "md",
+  attach = "viewport",
+  backdrop = true,
+  dismissOnBackdrop = true,
+  dismissOnEscape = true,
+  className,
+  ...rest
+}) {
+  const panelRef = react.useRef(null);
+  const horizontal = side === "left" || side === "right";
+  const isViewport = attach === "viewport";
+  const close = react.useCallback(() => onClose(), [onClose]);
+  chunkRXDRYWVD_cjs.useEscapeKey(close, open && dismissOnEscape);
+  chunkTXTRTTG7_cjs.useFocusTrap(panelRef, open && isViewport);
+  react.useEffect(() => {
+    if (!open || !isViewport) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [open, isViewport]);
+  const { mounted, className: animClass, ref: animRef } = chunk3WGRVDQR_cjs.useAnimation({
+    open,
+    enterClass: ENTER[side],
+    exitClass: EXIT[side]
+  });
+  const ctx = react.useMemo(() => ({ open, close, side }), [open, close, side]);
+  if (!mounted) return null;
+  const frame = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-react-fancy-drawer-frame": "",
+      className: chunk3Z6ALUWP_cjs.cn(isViewport ? "fixed inset-0 z-50" : "absolute inset-0 z-20", !backdrop && "pointer-events-none"),
+      children: [
+        backdrop ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-react-fancy-drawer-backdrop": "",
+            className: chunk3Z6ALUWP_cjs.cn(
+              "absolute inset-0 bg-black/40 transition-opacity",
+              isViewport && "backdrop-blur-sm",
+              open ? "opacity-100" : "opacity-0"
+            ),
+            onClick: dismissOnBackdrop ? close : void 0,
+            "aria-hidden": "true"
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: (node) => {
+              panelRef.current = node;
+              animRef.current = node;
+            },
+            "data-react-fancy-drawer": "",
+            "data-side": side,
+            role: "dialog",
+            "aria-modal": isViewport || void 0,
+            ...rest,
+            className: chunk3Z6ALUWP_cjs.cn(
+              "pointer-events-auto absolute flex flex-col border-zinc-200 bg-white shadow-xl dark:border-zinc-700 dark:bg-zinc-900",
+              ANCHOR[side],
+              EDGE[side],
+              horizontal ? WIDTH[size] : HEIGHT[size],
+              // Cross-axis fills the anchor; the main axis is capped so a viewport
+              // drawer can never grow past the screen on a small device.
+              horizontal ? "h-full" : "w-full",
+              isViewport && (horizontal ? "max-w-[90vw]" : "max-h-[90vh]"),
+              !isViewport && (horizontal ? "max-w-full" : "max-h-full"),
+              animClass,
+              className
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: ctx, children: isViewport ? /* @__PURE__ */ jsxRuntime.jsx(chunkNBZC6LOB_cjs.Portal, { children: frame }) : frame });
+}
+var Drawer = Object.assign(DrawerRoot, {
+  Header: DrawerHeader,
+  Body: DrawerBody,
+  Footer: DrawerFooter,
+  Container: DrawerContainer
+});
+
+exports.Drawer = Drawer;
+exports.useDrawer = useDrawer;
+//# sourceMappingURL=chunk-F6NEPU67.cjs.map
+//# sourceMappingURL=chunk-F6NEPU67.cjs.map