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

package/dist/index.d.ts

@@ -67,7 +67,7 @@ type ModalOverlayProps = {
     className?: string;
     children: ReactNode;
 };
-declare function ModalOverlay({ open, onClose, className, children }: ModalOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare function ModalOverlay({ open, onClose, className, children }: ModalOverlayProps): react_jsx_runtime.JSX.Element;
 type ModalSize = "sm" | "md" | "lg" | "xl";
 type ModalProps = {
     open: boolean;
@@ -193,22 +193,27 @@ type SelectOption = {
     value: string;
     disabled?: boolean;
 };
-type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "multiple"> & {
+type SelectProps = {
     options: SelectOption[];
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
     allowEmptyOption?: boolean;
     fullWidth?: boolean;
+    className?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    autoComplete?: string;
+    form?: string;
+    title?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
 };
-declare const Select: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "multiple"> & {
-    options: SelectOption[];
-    value: string;
-    onChange: (value: string) => void;
-    placeholder?: string;
-    allowEmptyOption?: boolean;
-    fullWidth?: boolean;
-} & React.RefAttributes<HTMLSelectElement>>;
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
 
 interface DropdownOption extends SelectOption {
 }
@@ -224,7 +229,7 @@ interface DropdownProps extends Omit<SelectProps, "allowEmptyOption" | "fullWidt
  * @deprecated Use Select for value selection and DropdownMenu for action menus.
  * Dropdown remains as a compatibility alias during migration.
  */
-declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLSelectElement>>;
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare function DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuTrigger(props: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -150,36 +150,20 @@ function Pill({
 }
 
 // src/components/modal/Modal.tsx
-import { useRef, useEffect } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function ModalOverlay({ open, onClose, className, children }) {
-  const mouseDownOnBackdrop = useRef(false);
-  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__ */ jsx5(
-    "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__ */ jsx5(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs2("div", { className: "portalLayer", children: [
+        /* @__PURE__ */ jsx5(DialogPrimitive.Overlay, { className: cx("backdrop", className) }),
+        /* @__PURE__ */ jsx5(DialogPrimitive.Content, { className: "overlayContent", children })
+      ] }) })
     }
   );
 }
@@ -187,13 +171,13 @@ function Modal({ open, onClose, title, subtitle, size = "md", children, footer }
   return /* @__PURE__ */ jsx5(ModalOverlay, { open, onClose, children: /* @__PURE__ */ jsxs2("div", { className: cx("modal", `size-${size}`), children: [
     /* @__PURE__ */ jsxs2("div", { className: "header", children: [
       /* @__PURE__ */ jsxs2("div", { className: "titles", children: [
-        /* @__PURE__ */ jsx5("div", { className: "title", children: title }),
-        subtitle && /* @__PURE__ */ jsx5("div", { className: "subtitle", children: subtitle })
+        /* @__PURE__ */ jsx5(DialogPrimitive.Title, { className: "title", children: title }),
+        subtitle ? /* @__PURE__ */ jsx5(DialogPrimitive.Description, { className: "subtitle", children: subtitle }) : null
       ] }),
-      /* @__PURE__ */ jsx5("button", { className: "closeButton", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx5(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx5("button", { className: "closeButton", "aria-label": "Close", children: /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
         /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
         /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ] }) })
+      ] }) }) })
     ] }),
     /* @__PURE__ */ jsx5("div", { className: "body", children }),
     footer && /* @__PURE__ */ jsx5("div", { className: "footer", children: footer })
@@ -217,12 +201,13 @@ import {
   createContext,
   useCallback,
   useContext,
-  useEffect as useEffect2,
+  useEffect,
   useMemo,
-  useRef as useRef2,
+  useRef,
   useState
 } from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import * as ToastPrimitive from "@radix-ui/react-toast";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_CONFIG = {
   position: "top-right",
   maxToasts: 5,
@@ -282,7 +267,7 @@ function ToastProvider({
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   const dismissAll = useCallback(() => setToasts([]), []);
-  useEffect2(() => {
+  useEffect(() => {
     if (!merged.pauseOnFocusLoss) return;
     const handleVisibility = () => setIsPaused(document.visibilityState !== "visible");
     document.addEventListener("visibilitychange", handleVisibility);
@@ -292,7 +277,7 @@ function ToastProvider({
     () => ({ toasts, push, success, error, warning, info, dismiss, dismissAll }),
     [toasts, push, success, error, warning, info, dismiss, dismissAll]
   );
-  return /* @__PURE__ */ jsxs3(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsx7(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs3(ToastPrimitive.Provider, { swipeDirection: "right", children: [
     children,
     /* @__PURE__ */ jsx7(
       ToastContainer,
@@ -305,7 +290,7 @@ function ToastProvider({
         onPauseChange: setIsPaused
       }
     )
-  ] });
+  ] }) });
 }
 function useToast() {
   const ctx = useContext(ToastContext);
@@ -337,26 +322,29 @@ function ToastContainer({
         return "topRight";
     }
   })();
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      className: cx("stack", posClass),
-      role: "presentation",
-      onMouseEnter: () => pauseOnHover && onPauseChange(true),
-      onMouseLeave: () => pauseOnHover && onPauseChange(false),
-      children: toasts.map((toast) => /* @__PURE__ */ jsx7(ToastItem, { toast, isPaused, onDismiss }, toast.id))
-    }
-  );
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    toasts.map((toast) => /* @__PURE__ */ jsx7(ToastItem, { toast, isPaused, onDismiss }, toast.id)),
+    /* @__PURE__ */ jsx7(
+      ToastPrimitive.Viewport,
+      {
+        className: cx("stack", posClass),
+        label: "Notifications",
+        onMouseEnter: () => pauseOnHover && onPauseChange(true),
+        onMouseLeave: () => pauseOnHover && onPauseChange(false)
+      }
+    )
+  ] });
 }
 function ToastItem({
   toast,
   isPaused,
   onDismiss
 }) {
-  const [exiting, setExiting] = useState(false);
-  const timerRef = useRef2(null);
-  const startRef = useRef2(0);
-  const remainingRef = useRef2(toast.duration ?? 0);
+  const [open, setOpen] = useState(true);
+  const timerRef = useRef(null);
+  const startRef = useRef(0);
+  const remainingRef = useRef(toast.duration ?? 0);
+  const closingRef = useRef(false);
   const palette = getPalette(toast.type);
   const styleVars = {
     ["--toast-bg"]: palette.background,
@@ -374,7 +362,9 @@ function ToastItem({
     }
   };
   const triggerDismiss = useCallback(() => {
-    setExiting(true);
+    if (closingRef.current) return;
+    closingRef.current = true;
+    setOpen(false);
     stopTimer();
     window.setTimeout(() => onDismiss(toast.id), 160);
   }, [onDismiss, toast.id]);
@@ -390,12 +380,12 @@ function ToastItem({
     },
     [triggerDismiss]
   );
-  useEffect2(() => {
+  useEffect(() => {
     if (!toast.duration || toast.duration <= 0) return void 0;
     schedule(toast.duration);
     return stopTimer;
   }, [schedule, toast.duration]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!toast.duration || toast.duration <= 0) return;
     if (isPaused) {
       const elapsed = performance.now() - startRef.current;
@@ -406,42 +396,60 @@ function ToastItem({
     }
   }, [isPaused, schedule, toast.duration]);
   const icon = getIcon(toast.type);
-  return /* @__PURE__ */ jsxs3("div", { className: cx("toast", exiting && "exit"), style: styleVars, role: "status", "aria-live": "polite", children: [
-    /* @__PURE__ */ jsx7("span", { className: "icon", "aria-hidden": true, children: icon }),
-    /* @__PURE__ */ jsxs3("div", { className: "body", children: [
-      /* @__PURE__ */ jsx7("div", { className: "message", children: toast.message }),
-      toast.action && /* @__PURE__ */ jsx7("div", { className: "actions", children: /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "button",
-          className: "actionButton",
-          onClick: () => {
-            toast.action?.onClick();
-            triggerDismiss();
-          },
-          children: toast.action.label
-        }
-      ) })
-    ] }),
-    toast.dismissible !== false && /* @__PURE__ */ jsx7(
-      "button",
-      {
-        type: "button",
-        className: "closeButton",
-        onClick: triggerDismiss,
-        "aria-label": "Dismiss notification",
-        children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx7(
-          "path",
+  return /* @__PURE__ */ jsxs3(
+    ToastPrimitive.Root,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) triggerDismiss();
+      },
+      duration: 2147483647,
+      className: "toast",
+      style: styleVars,
+      children: [
+        /* @__PURE__ */ jsx7("span", { className: "icon", "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ jsxs3("div", { className: "body", children: [
+          /* @__PURE__ */ jsx7(ToastPrimitive.Description, { className: "message", children: toast.message }),
+          toast.action && /* @__PURE__ */ jsx7("div", { className: "actions", children: /* @__PURE__ */ jsx7(
+            ToastPrimitive.Action,
+            {
+              asChild: true,
+              altText: toast.action.label,
+              children: /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  className: "actionButton",
+                  onClick: () => {
+                    toast.action?.onClick();
+                    triggerDismiss();
+                  },
+                  children: toast.action.label
+                }
+              )
+            }
+          ) })
+        ] }),
+        toast.dismissible !== false && /* @__PURE__ */ jsx7(ToastPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
+          "button",
           {
-            d: "M11 3L3 11M3 3l8 8",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round"
+            type: "button",
+            className: "closeButton",
+            "aria-label": "Dismiss notification",
+            children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx7(
+              "path",
+              {
+                d: "M11 3L3 11M3 3l8 8",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+              }
+            ) })
           }
         ) })
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 function getPalette(type) {
   switch (type) {
@@ -549,7 +557,7 @@ Checkbox.displayName = "Checkbox";
 // src/components/multi-select/MultiSelect.tsx
 import * as React4 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Fragment, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var MultiSelect = React4.forwardRef(
   ({
     options,
@@ -603,7 +611,7 @@ var MultiSelect = React4.forwardRef(
               "aria-labelledby": ariaLabelledBy,
               disabled,
               children: [
-                /* @__PURE__ */ jsx11("span", { className: "value", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx11("span", { className: "placeholder", children: placeholder }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+                /* @__PURE__ */ jsx11("span", { className: "value", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx11("span", { className: "placeholder", children: placeholder }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
                   visibleOptions.map((option) => /* @__PURE__ */ jsx11("span", { className: "chip", children: option.label }, option.value)),
                   overflowCount > 0 ? /* @__PURE__ */ jsxs4("span", { className: "chip chip-summary", children: [
                     "+",
@@ -706,7 +714,9 @@ import * as React6 from "react";
 
 // src/components/select/Select.tsx
 import * as React5 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
 import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var EMPTY_OPTION_VALUE = "__uzi_select_empty__";
 var Select = React5.forwardRef(
   ({
     options,
@@ -716,27 +726,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__ */ jsxs5("div", { className: cx("wrapper", fullWidth && "wrapper-fullWidth", className), children: [
-      /* @__PURE__ */ jsxs5(
-        "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__ */ jsx12("option", { value: "", disabled: !allowEmptyOption, children: placeholder }) : null,
-            options.map((opt) => /* @__PURE__ */ jsx12("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx12("span", { className: "chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", children: /* @__PURE__ */ jsx12("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__ */ jsx12("div", { className: cx("wrapper", fullWidth && "wrapper-fullWidth", className), children: /* @__PURE__ */ jsxs5(
+      SelectPrimitive.Root,
+      {
+        value: internalValue,
+        onValueChange: (nextValue) => onChange(nextValue === EMPTY_OPTION_VALUE ? "" : nextValue),
+        name,
+        disabled,
+        required,
+        autoComplete,
+        children: [
+          /* @__PURE__ */ jsxs5(
+            SelectPrimitive.Trigger,
+            {
+              ref,
+              id,
+              className: "select",
+              form,
+              title,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              onBlur,
+              onFocus,
+              children: [
+                /* @__PURE__ */ jsx12(SelectPrimitive.Value, { placeholder }),
+                /* @__PURE__ */ jsx12(SelectPrimitive.Icon, { className: "chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx12(
+                  "svg",
+                  {
+                    viewBox: "0 0 10 10",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "10",
+                    height: "10",
+                    children: /* @__PURE__ */ jsx12(
+                      "path",
+                      {
+                        d: "M2 3.5L5 6.5L8 3.5",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx12(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
+            SelectPrimitive.Content,
+            {
+              className: "content",
+              position: "popper",
+              sideOffset: 4,
+              align: "start",
+              children: /* @__PURE__ */ jsxs5(SelectPrimitive.Viewport, { className: "viewport", children: [
+                placeholder && allowEmptyOption ? /* @__PURE__ */ jsxs5(
+                  SelectPrimitive.Item,
+                  {
+                    value: EMPTY_OPTION_VALUE,
+                    className: "item",
+                    children: [
+                      /* @__PURE__ */ jsx12("span", { className: "indicator", children: /* @__PURE__ */ jsx12(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(
+                        "svg",
+                        {
+                          viewBox: "0 0 16 16",
+                          width: "16",
+                          height: "16",
+                          "aria-hidden": "true",
+                          className: "indicatorIcon",
+                          children: /* @__PURE__ */ jsx12(
+                            "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__ */ jsx12(SelectPrimitive.ItemText, { children: placeholder })
+                    ]
+                  }
+                ) : null,
+                options.map((opt) => /* @__PURE__ */ jsxs5(
+                  SelectPrimitive.Item,
+                  {
+                    value: opt.value,
+                    disabled: opt.disabled,
+                    className: "item",
+                    children: [
+                      /* @__PURE__ */ jsx12("span", { className: "indicator", children: /* @__PURE__ */ jsx12(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(
+                        "svg",
+                        {
+                          viewBox: "0 0 16 16",
+                          width: "16",
+                          height: "16",
+                          "aria-hidden": "true",
+                          className: "indicatorIcon",
+                          children: /* @__PURE__ */ jsx12(
+                            "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__ */ jsx12(SelectPrimitive.ItemText, { children: opt.label })
+                    ]
+                  },
+                  opt.value
+                ))
+              ] })
+            }
+          ) })
+        ]
+      }
+    ) });
   }
 );
 Select.displayName = "Select";
@@ -957,9 +1084,9 @@ function DropdownMenuSubContent({
 
 // src/components/app-shell/AppShell.tsx
 import {
-  useEffect as useEffect4,
+  useEffect as useEffect3,
   useId,
-  useRef as useRef3,
+  useRef as useRef2,
   useState as useState3
 } from "react";
 
@@ -968,7 +1095,7 @@ import {
   createContext as createContext2,
   useCallback as useCallback3,
   useContext as useContext2,
-  useEffect as useEffect3,
+  useEffect as useEffect2,
   useMemo as useMemo3,
   useState as useState2
 } from "react";
@@ -1011,7 +1138,7 @@ function ThemeProvider({
   const [internalTheme, setInternalTheme] = useState2(defaultTheme);
   const [internalAccent, setInternalAccent] = useState2(defaultAccent);
   const [systemTheme, setSystemTheme] = useState2("light");
-  useEffect3(() => {
+  useEffect2(() => {
     setSystemTheme(getSystemTheme());
     if (!disableStorage) {
       const storedTheme = window.localStorage.getItem(storageKey);
@@ -1025,7 +1152,7 @@ function ThemeProvider({
   const currentTheme = isThemeControlled ? theme : internalTheme;
   const currentAccent = isAccentControlled ? accent : internalAccent;
   const resolvedTheme = currentTheme === "system" ? systemTheme : currentTheme;
-  useEffect3(() => {
+  useEffect2(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => setSystemTheme(mediaQuery.matches ? "dark" : "light");
@@ -1033,7 +1160,7 @@ function ThemeProvider({
     mediaQuery.addEventListener("change", handleChange);
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
-  useEffect3(() => {
+  useEffect2(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
     root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
@@ -1217,13 +1344,13 @@ function AppShell({
   const [isDesktop, setIsDesktop] = useState3(false);
   const [sidebarOpen, setSidebarOpen] = useState3(false);
   const [transitionsReady, setTransitionsReady] = useState3(false);
-  const prevIsDesktopRef = useRef3(false);
-  const closeKeyRef = useRef3(closeSidebarOnChangeKey);
-  const sidebarRef = useRef3(null);
-  const hamburgerRef = useRef3(null);
-  const mainRef = useRef3(null);
+  const prevIsDesktopRef = useRef2(false);
+  const closeKeyRef = useRef2(closeSidebarOnChangeKey);
+  const sidebarRef = useRef2(null);
+  const hamburgerRef = useRef2(null);
+  const mainRef = useRef2(null);
   const sidebarId = useId();
-  useEffect4(() => {
+  useEffect3(() => {
     const desktop = getIsDesktop();
     setIsDesktop(desktop);
     setSidebarOpen(desktop);
@@ -1245,7 +1372,7 @@ function AppShell({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  useEffect4(() => {
+  useEffect3(() => {
     if (isDesktop || !sidebarOpen) return;
     const mainElement = mainRef.current;
     const closeSidebar = () => setSidebarOpen(false);
@@ -1270,13 +1397,13 @@ function AppShell({
       document.removeEventListener("touchmove", closeSidebar);
     };
   }, [sidebarOpen, isDesktop]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) {
       setSidebarOpen(false);
     }
     closeKeyRef.current = closeSidebarOnChangeKey;
   }, [closeSidebarOnChangeKey, isDesktop]);
-  useEffect4(() => {
+  useEffect3(() => {
     onSidebarToggle?.(sidebarOpen);
   }, [sidebarOpen, onSidebarToggle]);
   const toggleSidebar = () => setSidebarOpen((open) => !open);
@@ -1333,7 +1460,7 @@ function AppShell({
 }
 
 // src/components/sidebar-nav/SidebarNav.tsx
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var defaultIsActive = (item, path) => {
   if (item.active !== void 0) return item.active;
   if (!item.href) return false;
@@ -1410,7 +1537,7 @@ function SidebarNavEntry({
     item.disabled && "uziSidebarNavItemDisabled",
     itemClassName
   );
-  const content = /* @__PURE__ */ jsxs10(Fragment2, { children: [
+  const content = /* @__PURE__ */ jsxs10(Fragment3, { children: [
     item.icon && /* @__PURE__ */ jsx19("span", { className: "uziSidebarNavIcon", children: item.icon }),
     !collapsed ? /* @__PURE__ */ jsxs10("span", { className: "uziSidebarNavItemBody", children: [
       /* @__PURE__ */ jsxs10("span", { className: "uziSidebarNavLabelRow", children: [