@tomny-dev/uzi 0.1.9-pr.2.1.1 → 0.1.9-pr.2.2.1

package/dist/index.cjs

@@ -224,36 +224,20 @@ function Pill({
 }
 
 // src/components/modal/Modal.tsx
-var import_react = require("react");
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ModalOverlay({ open, onClose, className, children }) {
-  const mouseDownOnBackdrop = (0, import_react.useRef)(false);
-  (0, import_react.useEffect)(() => {
-    if (!open) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        e.stopPropagation();
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown, true);
-    return () => window.removeEventListener("keydown", handleKeyDown, true);
-  }, [open, onClose]);
-  if (!open) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "div",
+    DialogPrimitive.Root,
     {
-      className: cx("backdrop", className),
-      role: "dialog",
-      "aria-modal": "true",
-      onMouseDown: (e) => {
-        mouseDownOnBackdrop.current = e.target === e.currentTarget;
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) onClose();
       },
-      onMouseUp: (e) => {
-        if (mouseDownOnBackdrop.current && e.target === e.currentTarget) onClose();
-        mouseDownOnBackdrop.current = false;
-      },
-      children
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "portalLayer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Overlay, { className: cx("backdrop", className) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Content, { className: "overlayContent", children })
+      ] }) })
     }
   );
 }
@@ -261,13 +245,13 @@ function Modal({ open, onClose, title, subtitle, size = "md", children, footer }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ModalOverlay, { open, onClose, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cx("modal", `size-${size}`), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "titles", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "title", children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "subtitle", children: subtitle })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Title, { className: "title", children: title }),
+        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Description, { className: "subtitle", children: subtitle }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "closeButton", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "closeButton", "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ] }) })
+      ] }) }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "body", children }),
     footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "footer", children: footer })
@@ -287,7 +271,8 @@ function Alert({ tone, children, className }) {
 }
 
 // src/components/toast/ToastContext.tsx
-var import_react2 = require("react");
+var import_react = require("react");
+var ToastPrimitive = __toESM(require("@radix-ui/react-toast"), 1);
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_CONFIG = {
   position: "top-right",
@@ -296,17 +281,17 @@ var DEFAULT_CONFIG = {
   pauseOnHover: true,
   pauseOnFocusLoss: true
 };
-var ToastContext = (0, import_react2.createContext)(void 0);
+var ToastContext = (0, import_react.createContext)(void 0);
 var toastIdCounter = 0;
 var generateToastId = () => `toast-${++toastIdCounter}-${Date.now()}`;
 function ToastProvider({
   children,
   config
 }) {
-  const [toasts, setToasts] = (0, import_react2.useState)([]);
-  const [isPaused, setIsPaused] = (0, import_react2.useState)(false);
-  const merged = (0, import_react2.useMemo)(() => ({ ...DEFAULT_CONFIG, ...config }), [config]);
-  const push = (0, import_react2.useCallback)(
+  const [toasts, setToasts] = (0, import_react.useState)([]);
+  const [isPaused, setIsPaused] = (0, import_react.useState)(false);
+  const merged = (0, import_react.useMemo)(() => ({ ...DEFAULT_CONFIG, ...config }), [config]);
+  const push = (0, import_react.useCallback)(
     (message, options = {}) => {
       const id = generateToastId();
       setToasts((prev) => {
@@ -328,37 +313,37 @@ function ToastProvider({
     },
     [merged.defaultDuration, merged.maxToasts]
   );
-  const success = (0, import_react2.useCallback)(
+  const success = (0, import_react.useCallback)(
     (message, options) => push(message, { ...options, type: "success" }),
     [push]
   );
-  const error = (0, import_react2.useCallback)(
+  const error = (0, import_react.useCallback)(
     (message, options) => push(message, { ...options, type: "error", duration: options?.duration ?? 6e3 }),
     [push]
   );
-  const warning = (0, import_react2.useCallback)(
+  const warning = (0, import_react.useCallback)(
     (message, options) => push(message, { ...options, type: "warning" }),
     [push]
   );
-  const info = (0, import_react2.useCallback)(
+  const info = (0, import_react.useCallback)(
     (message, options) => push(message, { ...options, type: "info" }),
     [push]
   );
-  const dismiss = (0, import_react2.useCallback)((id) => {
+  const dismiss = (0, import_react.useCallback)((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const dismissAll = (0, import_react2.useCallback)(() => setToasts([]), []);
-  (0, import_react2.useEffect)(() => {
+  const dismissAll = (0, import_react.useCallback)(() => setToasts([]), []);
+  (0, import_react.useEffect)(() => {
     if (!merged.pauseOnFocusLoss) return;
     const handleVisibility = () => setIsPaused(document.visibilityState !== "visible");
     document.addEventListener("visibilitychange", handleVisibility);
     return () => document.removeEventListener("visibilitychange", handleVisibility);
   }, [merged.pauseOnFocusLoss]);
-  const value = (0, import_react2.useMemo)(
+  const value = (0, import_react.useMemo)(
     () => ({ toasts, push, success, error, warning, info, dismiss, dismissAll }),
     [toasts, push, success, error, warning, info, dismiss, dismissAll]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ToastPrimitive.Provider, { swipeDirection: "right", children: [
     children,
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ToastContainer,
@@ -371,10 +356,10 @@ function ToastProvider({
         onPauseChange: setIsPaused
       }
     )
-  ] });
+  ] }) });
 }
 function useToast() {
-  const ctx = (0, import_react2.useContext)(ToastContext);
+  const ctx = (0, import_react.useContext)(ToastContext);
   if (!ctx) throw new Error("useToast must be used within a ToastProvider");
   return ctx;
 }
@@ -403,26 +388,29 @@ function ToastContainer({
         return "topRight";
     }
   })();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "div",
-    {
-      className: cx("stack", posClass),
-      role: "presentation",
-      onMouseEnter: () => pauseOnHover && onPauseChange(true),
-      onMouseLeave: () => pauseOnHover && onPauseChange(false),
-      children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastItem, { toast, isPaused, onDismiss }, toast.id))
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastItem, { toast, isPaused, onDismiss }, toast.id)),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ToastPrimitive.Viewport,
+      {
+        className: cx("stack", posClass),
+        label: "Notifications",
+        onMouseEnter: () => pauseOnHover && onPauseChange(true),
+        onMouseLeave: () => pauseOnHover && onPauseChange(false)
+      }
+    )
+  ] });
 }
 function ToastItem({
   toast,
   isPaused,
   onDismiss
 }) {
-  const [exiting, setExiting] = (0, import_react2.useState)(false);
-  const timerRef = (0, import_react2.useRef)(null);
-  const startRef = (0, import_react2.useRef)(0);
-  const remainingRef = (0, import_react2.useRef)(toast.duration ?? 0);
+  const [open, setOpen] = (0, import_react.useState)(true);
+  const timerRef = (0, import_react.useRef)(null);
+  const startRef = (0, import_react.useRef)(0);
+  const remainingRef = (0, import_react.useRef)(toast.duration ?? 0);
+  const closingRef = (0, import_react.useRef)(false);
   const palette = getPalette(toast.type);
   const styleVars = {
     ["--toast-bg"]: palette.background,
@@ -439,12 +427,14 @@ function ToastItem({
       timerRef.current = null;
     }
   };
-  const triggerDismiss = (0, import_react2.useCallback)(() => {
-    setExiting(true);
+  const triggerDismiss = (0, import_react.useCallback)(() => {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    setOpen(false);
     stopTimer();
     window.setTimeout(() => onDismiss(toast.id), 160);
   }, [onDismiss, toast.id]);
-  const schedule = (0, import_react2.useCallback)(
+  const schedule = (0, import_react.useCallback)(
     (delay) => {
       if (!delay || delay <= 0) {
         triggerDismiss();
@@ -456,12 +446,12 @@ function ToastItem({
     },
     [triggerDismiss]
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (!toast.duration || toast.duration <= 0) return void 0;
     schedule(toast.duration);
     return stopTimer;
   }, [schedule, toast.duration]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (!toast.duration || toast.duration <= 0) return;
     if (isPaused) {
       const elapsed = performance.now() - startRef.current;
@@ -472,42 +462,60 @@ function ToastItem({
     }
   }, [isPaused, schedule, toast.duration]);
   const icon = getIcon(toast.type);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx("toast", exiting && "exit"), style: styleVars, role: "status", "aria-live": "polite", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "icon", "aria-hidden": true, children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "message", children: toast.message }),
-      toast.action && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "actions", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "button",
-        {
-          type: "button",
-          className: "actionButton",
-          onClick: () => {
-            toast.action?.onClick();
-            triggerDismiss();
-          },
-          children: toast.action.label
-        }
-      ) })
-    ] }),
-    toast.dismissible !== false && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "closeButton",
-        onClick: triggerDismiss,
-        "aria-label": "Dismiss notification",
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "path",
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    ToastPrimitive.Root,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) triggerDismiss();
+      },
+      duration: 2147483647,
+      className: "toast",
+      style: styleVars,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "icon", "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastPrimitive.Description, { className: "message", children: toast.message }),
+          toast.action && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "actions", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            ToastPrimitive.Action,
+            {
+              asChild: true,
+              altText: toast.action.label,
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "actionButton",
+                  onClick: () => {
+                    toast.action?.onClick();
+                    triggerDismiss();
+                  },
+                  children: toast.action.label
+                }
+              )
+            }
+          ) })
+        ] }),
+        toast.dismissible !== false && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
           {
-            d: "M11 3L3 11M3 3l8 8",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round"
+            type: "button",
+            className: "closeButton",
+            "aria-label": "Dismiss notification",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "path",
+              {
+                d: "M11 3L3 11M3 3l8 8",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+              }
+            ) })
           }
         ) })
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 function getPalette(type) {
   switch (type) {
@@ -772,7 +780,9 @@ var React6 = __toESM(require("react"), 1);
 
 // src/components/select/Select.tsx
 var React5 = __toESM(require("react"), 1);
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var EMPTY_OPTION_VALUE = "__uzi_select_empty__";
 var Select = React5.forwardRef(
   ({
     options,
@@ -782,27 +792,144 @@ var Select = React5.forwardRef(
     allowEmptyOption = false,
     fullWidth = true,
     className,
-    ...rest
+    id,
+    name,
+    disabled,
+    required,
+    autoComplete,
+    form,
+    title,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    onBlur,
+    onFocus
   }, ref) => {
-    const isPlaceholderShown = Boolean(placeholder) && value === "";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cx("wrapper", fullWidth && "wrapper-fullWidth", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-        "select",
-        {
-          ref,
-          value,
-          onChange: (e) => onChange(e.target.value),
-          className: cx("select", isPlaceholderShown && "select-placeholder"),
-          "data-placeholder-shown": isPlaceholderShown ? "true" : void 0,
-          ...rest,
-          children: [
-            placeholder ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "", disabled: !allowEmptyOption, children: placeholder }) : null,
-            options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M2 3.5L5 6.5L8 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
-    ] });
+    const internalValue = value === "" && allowEmptyOption ? EMPTY_OPTION_VALUE : value;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cx("wrapper", fullWidth && "wrapper-fullWidth", className), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      SelectPrimitive.Root,
+      {
+        value: internalValue,
+        onValueChange: (nextValue) => onChange(nextValue === EMPTY_OPTION_VALUE ? "" : nextValue),
+        name,
+        disabled,
+        required,
+        autoComplete,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            SelectPrimitive.Trigger,
+            {
+              ref,
+              id,
+              className: "select",
+              form,
+              title,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              onBlur,
+              onFocus,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.Value, { placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.Icon, { className: "chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "svg",
+                  {
+                    viewBox: "0 0 10 10",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "10",
+                    height: "10",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      "path",
+                      {
+                        d: "M2 3.5L5 6.5L8 3.5",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            SelectPrimitive.Content,
+            {
+              className: "content",
+              position: "popper",
+              sideOffset: 4,
+              align: "start",
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SelectPrimitive.Viewport, { className: "viewport", children: [
+                placeholder && allowEmptyOption ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  SelectPrimitive.Item,
+                  {
+                    value: EMPTY_OPTION_VALUE,
+                    className: "item",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "svg",
+                        {
+                          viewBox: "0 0 16 16",
+                          width: "16",
+                          height: "16",
+                          "aria-hidden": "true",
+                          className: "indicatorIcon",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                            "path",
+                            {
+                              d: "M3.5 8.5 6.5 11.5 12.5 4.5",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: "1.8",
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round"
+                            }
+                          )
+                        }
+                      ) }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.ItemText, { children: placeholder })
+                    ]
+                  }
+                ) : null,
+                options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  SelectPrimitive.Item,
+                  {
+                    value: opt.value,
+                    disabled: opt.disabled,
+                    className: "item",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "svg",
+                        {
+                          viewBox: "0 0 16 16",
+                          width: "16",
+                          height: "16",
+                          "aria-hidden": "true",
+                          className: "indicatorIcon",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                            "path",
+                            {
+                              d: "M3.5 8.5 6.5 11.5 12.5 4.5",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: "1.8",
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round"
+                            }
+                          )
+                        }
+                      ) }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.ItemText, { children: opt.label })
+                    ]
+                  },
+                  opt.value
+                ))
+              ] })
+            }
+          ) })
+        ]
+      }
+    ) });
   }
 );
 Select.displayName = "Select";
@@ -1022,10 +1149,10 @@ function DropdownMenuSubContent({
 }
 
 // src/components/app-shell/AppShell.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 
 // src/theme/ThemeProvider.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 
 // src/theme/constants.ts
 var UZI_THEMES = ["light", "dark", "system"];
@@ -1039,7 +1166,7 @@ var THEME_STORAGE_KEY2 = THEME_STORAGE_KEY;
 var ACCENT_STORAGE_KEY2 = ACCENT_STORAGE_KEY;
 var THEME_ATTRIBUTE = "data-uzi-theme";
 var ACCENT_ATTRIBUTE = "data-uzi-accent";
-var ThemeContext = (0, import_react3.createContext)(void 0);
+var ThemeContext = (0, import_react2.createContext)(void 0);
 function isTheme(value) {
   return UZI_THEMES.includes(value);
 }
@@ -1062,10 +1189,10 @@ function ThemeProvider({
   accentStorageKey = ACCENT_STORAGE_KEY2,
   disableStorage = false
 }) {
-  const [internalTheme, setInternalTheme] = (0, import_react3.useState)(defaultTheme);
-  const [internalAccent, setInternalAccent] = (0, import_react3.useState)(defaultAccent);
-  const [systemTheme, setSystemTheme] = (0, import_react3.useState)("light");
-  (0, import_react3.useEffect)(() => {
+  const [internalTheme, setInternalTheme] = (0, import_react2.useState)(defaultTheme);
+  const [internalAccent, setInternalAccent] = (0, import_react2.useState)(defaultAccent);
+  const [systemTheme, setSystemTheme] = (0, import_react2.useState)("light");
+  (0, import_react2.useEffect)(() => {
     setSystemTheme(getSystemTheme());
     if (!disableStorage) {
       const storedTheme = window.localStorage.getItem(storageKey);
@@ -1079,7 +1206,7 @@ function ThemeProvider({
   const currentTheme = isThemeControlled ? theme : internalTheme;
   const currentAccent = isAccentControlled ? accent : internalAccent;
   const resolvedTheme = currentTheme === "system" ? systemTheme : currentTheme;
-  (0, import_react3.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => setSystemTheme(mediaQuery.matches ? "dark" : "light");
@@ -1087,7 +1214,7 @@ function ThemeProvider({
     mediaQuery.addEventListener("change", handleChange);
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
     root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
@@ -1095,7 +1222,7 @@ function ThemeProvider({
     root.style.colorScheme = resolvedTheme;
     root.classList.toggle("dark", resolvedTheme === "dark");
   }, [currentAccent, resolvedTheme]);
-  const setTheme = (0, import_react3.useCallback)(
+  const setTheme = (0, import_react2.useCallback)(
     (nextTheme) => {
       if (!isThemeControlled) setInternalTheme(nextTheme);
       if (!disableStorage && typeof window !== "undefined") {
@@ -1105,7 +1232,7 @@ function ThemeProvider({
     },
     [disableStorage, isThemeControlled, onThemeChange, storageKey]
   );
-  const setAccent = (0, import_react3.useCallback)(
+  const setAccent = (0, import_react2.useCallback)(
     (nextAccent) => {
       if (!isAccentControlled) setInternalAccent(nextAccent);
       if (!disableStorage && typeof window !== "undefined") {
@@ -1115,10 +1242,10 @@ function ThemeProvider({
     },
     [accentStorageKey, disableStorage, isAccentControlled, onAccentChange]
   );
-  const toggleTheme = (0, import_react3.useCallback)(() => {
+  const toggleTheme = (0, import_react2.useCallback)(() => {
     setTheme(resolvedTheme === "dark" ? "light" : "dark");
   }, [resolvedTheme, setTheme]);
-  const value = (0, import_react3.useMemo)(
+  const value = (0, import_react2.useMemo)(
     () => ({
       theme: currentTheme,
       resolvedTheme,
@@ -1132,7 +1259,7 @@ function ThemeProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  const context = (0, import_react3.useContext)(ThemeContext);
+  const context = (0, import_react2.useContext)(ThemeContext);
   if (!context) throw new Error("useTheme must be used within a ThemeProvider");
   return context;
 }
@@ -1268,16 +1395,16 @@ function AppShell({
   hamburgerLabel = "Toggle navigation",
   onSidebarToggle
 }) {
-  const [isDesktop, setIsDesktop] = (0, import_react4.useState)(false);
-  const [sidebarOpen, setSidebarOpen] = (0, import_react4.useState)(false);
-  const [transitionsReady, setTransitionsReady] = (0, import_react4.useState)(false);
-  const prevIsDesktopRef = (0, import_react4.useRef)(false);
-  const closeKeyRef = (0, import_react4.useRef)(closeSidebarOnChangeKey);
-  const sidebarRef = (0, import_react4.useRef)(null);
-  const hamburgerRef = (0, import_react4.useRef)(null);
-  const mainRef = (0, import_react4.useRef)(null);
-  const sidebarId = (0, import_react4.useId)();
-  (0, import_react4.useEffect)(() => {
+  const [isDesktop, setIsDesktop] = (0, import_react3.useState)(false);
+  const [sidebarOpen, setSidebarOpen] = (0, import_react3.useState)(false);
+  const [transitionsReady, setTransitionsReady] = (0, import_react3.useState)(false);
+  const prevIsDesktopRef = (0, import_react3.useRef)(false);
+  const closeKeyRef = (0, import_react3.useRef)(closeSidebarOnChangeKey);
+  const sidebarRef = (0, import_react3.useRef)(null);
+  const hamburgerRef = (0, import_react3.useRef)(null);
+  const mainRef = (0, import_react3.useRef)(null);
+  const sidebarId = (0, import_react3.useId)();
+  (0, import_react3.useEffect)(() => {
     const desktop = getIsDesktop();
     setIsDesktop(desktop);
     setSidebarOpen(desktop);
@@ -1299,7 +1426,7 @@ function AppShell({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (isDesktop || !sidebarOpen) return;
     const mainElement = mainRef.current;
     const closeSidebar = () => setSidebarOpen(false);
@@ -1324,13 +1451,13 @@ function AppShell({
       document.removeEventListener("touchmove", closeSidebar);
     };
   }, [sidebarOpen, isDesktop]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) {
       setSidebarOpen(false);
     }
     closeKeyRef.current = closeSidebarOnChangeKey;
   }, [closeSidebarOnChangeKey, isDesktop]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     onSidebarToggle?.(sidebarOpen);
   }, [sidebarOpen, onSidebarToggle]);
   const toggleSidebar = () => setSidebarOpen((open) => !open);