@hyphen/hyphen-components 9.0.0 → 9.1.1

package/dist/hyphen-components.cjs.development.js

@@ -4392,7 +4392,8 @@ var ResponsiveProvider = ({
 };
 
 // src/components/Sidebar/Sidebar.tsx
-var import_react62 = __toESM(require("react"));
+var import_react63 = __toESM(require("react"));
+var import_react_id = require("@radix-ui/react-id");
 var import_react_slot3 = require("@radix-ui/react-slot");
 var import_classnames34 = __toESM(require("classnames"));
 
@@ -4417,10 +4418,187 @@ function useIsMobile() {
 }
 
 // src/components/Sidebar/Sidebar.module.scss
-var Sidebar_module_default = { "rail": "rail__OwBtB", "group-data-": "group-data-__af4bi" };
+var Sidebar_module_default = { "rail": "rail__OwBtB", "group-data-": "group-data-__af4bi", "resizeDescription": "resizeDescription__Ou7UB" };
+
+// src/components/Sidebar/useSidebarResize.ts
+var import_react62 = __toESM(require("react"));
+function useSidebarResize({
+  resizable = false,
+  defaultWidth,
+  minWidth = 256,
+  maxWidth = 960,
+  widthStorageKey,
+  side,
+  isMobile,
+  expanded,
+  rootRef
+}) {
+  const initialWidth = defaultWidth ?? (side === "left" ? 256 : 384);
+  const [preferredWidth, setPreferredWidth] = (0, import_react62.useState)(initialWidth);
+  const [containerWidth, setContainerWidth] = (0, import_react62.useState)(Infinity);
+  const [dragging, setDragging] = (0, import_react62.useState)(false);
+  const gesture = (0, import_react62.useRef)(null);
+  const suppressClick = (0, import_react62.useRef)(false);
+  const currentWidth = (0, import_react62.useRef)(preferredWidth);
+  const enabled = resizable && !isMobile && expanded;
+  const maximum = Math.max(0, Math.min(maxWidth, containerWidth * (2 / 3)));
+  const minimum = Math.min(Math.max(0, minWidth), maximum);
+  const clamp = (value) => Math.max(minimum, Math.min(maximum, value));
+  const width = clamp(preferredWidth);
+  const [settledWidth, setSettledWidth] = (0, import_react62.useState)(width);
+  useIsomorphicLayoutEffect(() => {
+    if (!resizable) return;
+    let savedWidth = initialWidth;
+    try {
+      const saved = widthStorageKey && localStorage.getItem(widthStorageKey);
+      if (saved && Number.isFinite(Number(saved)) && Number(saved) > 0) {
+        savedWidth = Number(saved);
+      }
+    } catch {
+    }
+    setPreferredWidth(savedWidth);
+  }, [resizable, initialWidth, widthStorageKey]);
+  useIsomorphicLayoutEffect(() => {
+    if (!resizable || isMobile) return;
+    const container = rootRef.current?.closest("[data-sidebar-provider]");
+    if (!container) return;
+    const measure = () => setContainerWidth(container.getBoundingClientRect().width);
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+      return () => window.removeEventListener("resize", measure);
+    }
+    const observer = new ResizeObserver(measure);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [resizable, isMobile, rootRef]);
+  useIsomorphicLayoutEffect(() => {
+    if (dragging || width === settledWidth) return;
+    rootRef.current?.getBoundingClientRect();
+    setSettledWidth(width);
+  }, [dragging, width, settledWidth, rootRef]);
+  (0, import_react62.useEffect)(() => {
+    if (!enabled) {
+      gesture.current = null;
+      setDragging(false);
+    }
+  }, [enabled]);
+  (0, import_react62.useEffect)(() => {
+    if (!dragging) return;
+    const { cursor, userSelect } = document.body.style;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    return () => {
+      document.body.style.cursor = cursor;
+      document.body.style.userSelect = userSelect;
+    };
+  }, [dragging]);
+  const update = (next) => {
+    currentWidth.current = clamp(next);
+    setPreferredWidth(currentWidth.current);
+  };
+  const persist = () => {
+    if (!widthStorageKey) return;
+    try {
+      localStorage.setItem(widthStorageKey, String(currentWidth.current));
+    } catch {
+    }
+  };
+  const finish = () => {
+    if (!gesture.current) return;
+    if (gesture.current.moved) persist();
+    gesture.current = null;
+    setDragging(false);
+  };
+  const cancel = () => {
+    if (!gesture.current) return;
+    setPreferredWidth(gesture.current.preferred);
+    gesture.current = null;
+    setDragging(false);
+  };
+  const railProps = {
+    onPointerDown: (event) => {
+      suppressClick.current = false;
+      if (!enabled || event.button !== 0 || gesture.current) return;
+      gesture.current = {
+        id: event.pointerId,
+        x: event.clientX,
+        width,
+        preferred: preferredWidth,
+        moved: false
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+    },
+    onPointerMove: (event) => {
+      const start = gesture.current;
+      if (!start || start.id !== event.pointerId) return;
+      const delta = event.clientX - start.x;
+      if (!start.moved && Math.abs(delta) < 4) return;
+      start.moved = true;
+      suppressClick.current = true;
+      setDragging(true);
+      update(start.width + (side === "left" ? delta : -delta));
+    },
+    onPointerUp: (event) => {
+      const start = gesture.current;
+      if (!start || start.id !== event.pointerId) return;
+      if (start.moved) {
+        update(
+          start.width + (side === "left" ? 1 : -1) * (event.clientX - start.x)
+        );
+      }
+      finish();
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    },
+    onPointerCancel: cancel,
+    // Capture can end before pointerup reaches the rail. Keep the last move
+    // instead of treating release as a cancelled drag and restoring its start.
+    onLostPointerCapture: (event) => {
+      if (gesture.current?.id === event.pointerId) finish();
+    },
+    onClickCapture: (event) => {
+      if (suppressClick.current && event.detail !== 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        suppressClick.current = false;
+      }
+    },
+    onKeyDown: (event) => {
+      const modified = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+      if (!enabled || modified) return;
+      let next;
+      switch (event.key) {
+        case "ArrowLeft":
+          next = width + (side === "left" ? -10 : 10);
+          break;
+        case "ArrowRight":
+          next = width + (side === "left" ? 10 : -10);
+          break;
+        case "Home":
+          next = minimum;
+          break;
+        case "End":
+          next = maximum;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      update(next);
+      persist();
+    }
+  };
+  return {
+    width,
+    animate: !dragging && width === settledWidth,
+    enabled,
+    railProps
+  };
+}
+var SidebarResizeContext = import_react62.default.createContext(null);
 
 // src/components/Tooltip/Tooltip.tsx
-var React57 = __toESM(require("react"));
+var React58 = __toESM(require("react"));
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
 
 // src/components/Tooltip/Tooltip.module.scss
@@ -4432,7 +4610,7 @@ var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
 var TooltipPortal = TooltipPrimitive.Portal;
-var TooltipContent = React57.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React57.createElement(
+var TooltipContent = React58.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React58.createElement(
   TooltipPrimitive.Content,
   {
     ref,
@@ -4453,14 +4631,14 @@ var SIDEBAR_RIGHT_WIDTH = "24rem";
 var SIDEBAR_WIDTH_ICON = "44px";
 var SIDEBAR_KEYBOARD_SHORTCUT_LEFT = "[";
 var SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = "]";
-var SidebarIsMobileContext = import_react62.default.createContext(null);
-var SidebarLeftContext = import_react62.default.createContext(
+var SidebarIsMobileContext = import_react63.default.createContext(null);
+var SidebarLeftContext = import_react63.default.createContext(
   null
 );
-var SidebarRightContext = import_react62.default.createContext(
+var SidebarRightContext = import_react63.default.createContext(
   null
 );
-var SidebarSideContext = import_react62.default.createContext("left");
+var SidebarSideContext = import_react63.default.createContext("left");
 var resolveSideValue = (value, side, fallback) => {
   if (typeof value === "boolean") {
     return value;
@@ -4513,21 +4691,21 @@ var useSidebarSideState = ({
   );
   const controlledOpen = resolveControlledOpen(openProp, side);
   const isControlled = typeof controlledOpen === "boolean";
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react62.useState)(
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react63.useState)(
     controlledOpen ?? initialDefaultOpen
   );
-  const [openMobile, setOpenMobile] = (0, import_react62.useState)(
+  const [openMobile, setOpenMobile] = (0, import_react63.useState)(
     () => isMobile ? false : controlledOpen ?? initialDefaultOpen
   );
   const open = controlledOpen ?? uncontrolledOpen;
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (isMobile) {
       setOpenMobile(false);
     } else {
       setUncontrolledOpen(controlledOpen ?? initialDefaultOpen);
     }
   }, [isMobile, controlledOpen, initialDefaultOpen]);
-  const setOpen = (0, import_react62.useCallback)(
+  const setOpen = (0, import_react63.useCallback)(
     (value) => {
       const newOpenState = typeof value === "function" ? value(open) : value;
       if (newOpenState === open) {
@@ -4542,7 +4720,7 @@ var useSidebarSideState = ({
     },
     [open, isControlled, onOpenChange, side, storageKey]
   );
-  const toggleSidebar = (0, import_react62.useCallback)(() => {
+  const toggleSidebar = (0, import_react63.useCallback)(() => {
     lastToggledSideRef.current = side;
     if (isMobile) {
       setOpenMobile((value) => !value);
@@ -4551,7 +4729,7 @@ var useSidebarSideState = ({
     }
   }, [isMobile, setOpen, side, setOpenMobile, lastToggledSideRef]);
   const state = open ? "expanded" : "collapsed";
-  return (0, import_react62.useMemo)(
+  return (0, import_react63.useMemo)(
     () => ({
       state,
       open,
@@ -4564,13 +4742,13 @@ var useSidebarSideState = ({
   );
 };
 function useSidebar(sideOverride) {
-  const isMobile = import_react62.default.useContext(SidebarIsMobileContext);
+  const isMobile = import_react63.default.useContext(SidebarIsMobileContext);
   if (typeof isMobile !== "boolean") {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
-  const contextSide = import_react62.default.useContext(SidebarSideContext);
+  const contextSide = import_react63.default.useContext(SidebarSideContext);
   const side = sideOverride ?? contextSide;
-  const sideContext = import_react62.default.useContext(
+  const sideContext = import_react63.default.useContext(
     side === "left" ? SidebarLeftContext : SidebarRightContext
   );
   if (!sideContext) {
@@ -4582,7 +4760,7 @@ function useSidebar(sideOverride) {
     side
   };
 }
-var SidebarProvider = (0, import_react62.forwardRef)(
+var SidebarProvider = (0, import_react63.forwardRef)(
   ({
     defaultOpen = true,
     open: openProp,
@@ -4594,9 +4772,9 @@ var SidebarProvider = (0, import_react62.forwardRef)(
     ...props
   }, ref) => {
     const isMobile = useIsMobile();
-    const lastToggledSideRef = import_react62.default.useRef("left");
-    const leftToggleRef = import_react62.default.useRef(null);
-    const rightToggleRef = import_react62.default.useRef(null);
+    const lastToggledSideRef = import_react63.default.useRef("left");
+    const leftToggleRef = import_react63.default.useRef(null);
+    const rightToggleRef = import_react63.default.useRef(null);
     const leftState = useSidebarSideState({
       side: "left",
       isMobile,
@@ -4615,18 +4793,21 @@ var SidebarProvider = (0, import_react62.forwardRef)(
       storageKey,
       lastToggledSideRef
     });
-    (0, import_react62.useEffect)(() => {
+    (0, import_react63.useEffect)(() => {
       leftToggleRef.current = leftState.toggleSidebar;
     }, [leftState.toggleSidebar]);
-    (0, import_react62.useEffect)(() => {
+    (0, import_react63.useEffect)(() => {
       rightToggleRef.current = rightState.toggleSidebar;
     }, [rightState.toggleSidebar]);
-    (0, import_react62.useEffect)(() => {
+    (0, import_react63.useEffect)(() => {
       const handleKeyDown = (event) => {
         const target = event.target;
         if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable)) {
           return;
         }
+        if (event.metaKey || event.ctrlKey && !event.getModifierState("AltGraph")) {
+          return;
+        }
         const shortcutSide = event.key === SIDEBAR_KEYBOARD_SHORTCUT_LEFT ? "left" : event.key === SIDEBAR_KEYBOARD_SHORTCUT_RIGHT ? "right" : null;
         if (!shortcutSide) {
           return;
@@ -4638,7 +4819,7 @@ var SidebarProvider = (0, import_react62.forwardRef)(
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, []);
-    return /* @__PURE__ */ import_react62.default.createElement(SidebarIsMobileContext.Provider, { value: isMobile }, /* @__PURE__ */ import_react62.default.createElement(SidebarLeftContext.Provider, { value: leftState }, /* @__PURE__ */ import_react62.default.createElement(SidebarRightContext.Provider, { value: rightState }, /* @__PURE__ */ import_react62.default.createElement(TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ import_react62.default.createElement(
+    return /* @__PURE__ */ import_react63.default.createElement(SidebarIsMobileContext.Provider, { value: isMobile }, /* @__PURE__ */ import_react63.default.createElement(SidebarLeftContext.Provider, { value: leftState }, /* @__PURE__ */ import_react63.default.createElement(SidebarRightContext.Provider, { value: rightState }, /* @__PURE__ */ import_react63.default.createElement(TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ import_react63.default.createElement(
       "div",
       {
         style: {
@@ -4652,6 +4833,7 @@ var SidebarProvider = (0, import_react62.forwardRef)(
           className
         ),
         ref,
+        "data-sidebar-provider": "",
         ...props
       },
       children
@@ -4659,23 +4841,54 @@ var SidebarProvider = (0, import_react62.forwardRef)(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = import_react62.default.forwardRef(
-  ({ side = "left", collapsible = "offcanvas", className, children, ...props }, ref) => {
+var Sidebar = import_react63.default.forwardRef(
+  ({
+    side = "left",
+    collapsible = "offcanvas",
+    className,
+    children,
+    resizable,
+    defaultWidth,
+    minWidth,
+    maxWidth,
+    widthStorageKey,
+    ...props
+  }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar(side);
-    const sidebarWidth = side === "right" ? SIDEBAR_RIGHT_WIDTH : SIDEBAR_WIDTH;
+    const rootRef = import_react63.default.useRef(null);
+    const setRootRef = import_react63.default.useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const resize = useSidebarResize({
+      resizable,
+      defaultWidth,
+      minWidth,
+      maxWidth,
+      widthStorageKey,
+      side,
+      isMobile,
+      expanded: state === "expanded" || collapsible === "none",
+      rootRef
+    });
+    const sidebarWidth = resizable ? `${resize.width}px` : side === "right" ? SIDEBAR_RIGHT_WIDTH : SIDEBAR_WIDTH;
     if (isMobile) {
-      return /* @__PURE__ */ import_react62.default.createElement(SidebarSideContext.Provider, { value: side }, /* @__PURE__ */ import_react62.default.createElement(
+      return /* @__PURE__ */ import_react63.default.createElement(SidebarSideContext.Provider, { value: side }, /* @__PURE__ */ import_react63.default.createElement(SidebarResizeContext.Provider, { value: resize }, /* @__PURE__ */ import_react63.default.createElement(
         Drawer,
         {
           isOpen: openMobile,
           onDismiss: () => setOpenMobile(false),
           placement: side
         },
-        /* @__PURE__ */ import_react62.default.createElement(Box, { "data-sidebar": "sidebar", "data-mobile": "true", height: "100" }, children)
-      ));
+        /* @__PURE__ */ import_react63.default.createElement(Box, { "data-sidebar": "sidebar", "data-mobile": "true", height: "100" }, children)
+      )));
     }
     if (collapsible === "none") {
-      return /* @__PURE__ */ import_react62.default.createElement(SidebarSideContext.Provider, { value: side }, /* @__PURE__ */ import_react62.default.createElement(
+      return /* @__PURE__ */ import_react63.default.createElement(SidebarSideContext.Provider, { value: side }, /* @__PURE__ */ import_react63.default.createElement(SidebarResizeContext.Provider, { value: resize }, /* @__PURE__ */ import_react63.default.createElement(
         "div",
         {
           className: (0, import_classnames34.default)(
@@ -4684,18 +4897,19 @@ var Sidebar = import_react62.default.forwardRef(
           ),
           style: {
             "--sidebar-width": sidebarWidth,
-            width: "var(--sidebar-width)"
+            width: "var(--sidebar-width)",
+            ...resizable ? { position: "relative", flexShrink: 0 } : {}
           },
-          ref,
+          ref: setRootRef,
           ...props
         },
         children
-      ));
+      )));
     }
-    return /* @__PURE__ */ import_react62.default.createElement(SidebarSideContext.Provider, { value: side }, /* @__PURE__ */ import_react62.default.createElement(
+    return /* @__PURE__ */ import_react63.default.createElement(SidebarSideContext.Provider, { value: side }, /* @__PURE__ */ import_react63.default.createElement(SidebarResizeContext.Provider, { value: resize }, /* @__PURE__ */ import_react63.default.createElement(
       Box,
       {
-        ref,
+        ref: setRootRef,
         background: "primary",
         display: { base: "none", desktop: "block" },
         color: "base",
@@ -4709,13 +4923,13 @@ var Sidebar = import_react62.default.forwardRef(
         "data-side": side,
         className: "group"
       },
-      /* @__PURE__ */ import_react62.default.createElement(
+      /* @__PURE__ */ import_react63.default.createElement(
         "div",
         {
           style: {
             animationTimingFunction: "var(--sidebar-transition-timing, linear)",
             transitionTimingFunction: "var(--sidebar-transition-timing, linear)",
-            transitionDuration: "var(--sidebar-transition-duration, 200ms)",
+            transitionDuration: resize.animate ? "var(--sidebar-transition-duration, 200ms)" : "0ms",
             animationDuration: "var(--sidebar-transition-duration, 200ms)",
             transitionProperty: "width",
             width: getSidebarWidth(state, collapsible),
@@ -4724,7 +4938,7 @@ var Sidebar = import_react62.default.forwardRef(
           className: (0, import_classnames34.default)("position-relative", className)
         }
       ),
-      /* @__PURE__ */ import_react62.default.createElement(
+      /* @__PURE__ */ import_react63.default.createElement(
         "div",
         {
           className: (0, import_classnames34.default)(
@@ -4738,7 +4952,7 @@ var Sidebar = import_react62.default.forwardRef(
             zIndex: "var(--size-z-index-drawer)",
             animationTimingFunction: "var(--sidebar-transition-timing, linear)",
             transitionTimingFunction: "var(--sidebar-transition-timing, linear)",
-            transitionDuration: "var(--sidebar-transition-duration, 200ms)",
+            transitionDuration: resize.animate ? "var(--sidebar-transition-duration, 200ms)" : "0ms",
             animationDuration: "var(--sidebar-transition-duration, 200ms)",
             transitionProperty: "left, right, width",
             width: state === "collapsed" && collapsible === "icon" ? "var(--sidebar-width-icon)" : "var(--sidebar-width)",
@@ -4746,7 +4960,7 @@ var Sidebar = import_react62.default.forwardRef(
           },
           ...props
         },
-        /* @__PURE__ */ import_react62.default.createElement(
+        /* @__PURE__ */ import_react63.default.createElement(
           "div",
           {
             "data-sidebar": "sidebar",
@@ -4760,13 +4974,13 @@ var Sidebar = import_react62.default.forwardRef(
           children
         )
       )
-    ));
+    )));
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = import_react62.default.forwardRef(({ className, onClick, side, iconName = "dock-left", ...props }, ref) => {
+var SidebarTrigger = import_react63.default.forwardRef(({ className, onClick, side, iconName = "dock-left", ...props }, ref) => {
   const { toggleSidebar, side: contextSide } = useSidebar(side);
-  return /* @__PURE__ */ import_react62.default.createElement(
+  return /* @__PURE__ */ import_react63.default.createElement(
     Button,
     {
       ref,
@@ -4791,8 +5005,8 @@ var SidebarTrigger = import_react62.default.forwardRef(({ className, onClick, si
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarInset = import_react62.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ import_react62.default.createElement(
+var SidebarInset = import_react63.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ import_react63.default.createElement(
     "main",
     {
       ref,
@@ -4805,10 +5019,10 @@ var SidebarInset = import_react62.default.forwardRef(({ className, ...props }, r
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarHeader = import_react62.default.forwardRef(({ className, ...props }, ref) => {
+var SidebarHeader = import_react63.default.forwardRef(({ className, ...props }, ref) => {
   const { state } = useSidebar();
   const isCollapsed = state === "collapsed";
-  return /* @__PURE__ */ import_react62.default.createElement(
+  return /* @__PURE__ */ import_react63.default.createElement(
     "div",
     {
       ref,
@@ -4823,8 +5037,8 @@ var SidebarHeader = import_react62.default.forwardRef(({ className, ...props },
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = import_react62.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ import_react62.default.createElement(
+var SidebarFooter = import_react63.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ import_react63.default.createElement(
     "div",
     {
       ref,
@@ -4838,8 +5052,8 @@ var SidebarFooter = import_react62.default.forwardRef(({ className, ...props },
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarContent = import_react62.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ import_react62.default.createElement(
+var SidebarContent = import_react63.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ import_react63.default.createElement(
     "div",
     {
       ref,
@@ -4854,7 +5068,7 @@ var SidebarContent = import_react62.default.forwardRef(({ className, ...props },
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarMenu = import_react62.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react62.default.createElement(
+var SidebarMenu = import_react63.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react63.default.createElement(
   "ul",
   {
     ref,
@@ -4870,7 +5084,7 @@ var SidebarMenu = import_react62.default.forwardRef(({ className, ...props }, re
   }
 ));
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = import_react62.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react62.default.createElement(
+var SidebarMenuItem = import_react63.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react63.default.createElement(
   "li",
   {
     ref,
@@ -4881,11 +5095,11 @@ var SidebarMenuItem = import_react62.default.forwardRef(({ className, ...props }
   }
 ));
 SidebarMenuItem.displayName = "SidebarMenuItem";
-var SidebarMenuButton = import_react62.default.forwardRef(
+var SidebarMenuButton = import_react63.default.forwardRef(
   ({ asChild = false, isActive = false, tooltip, className, ...props }, ref) => {
     const Comp = asChild ? import_react_slot3.Slot : "button";
     const { isMobile, state, side } = useSidebar();
-    const button = /* @__PURE__ */ import_react62.default.createElement(
+    const button = /* @__PURE__ */ import_react63.default.createElement(
       Comp,
       {
         ref,
@@ -4911,7 +5125,7 @@ var SidebarMenuButton = import_react62.default.forwardRef(
         children: tooltip
       };
     }
-    return /* @__PURE__ */ import_react62.default.createElement(Tooltip, null, /* @__PURE__ */ import_react62.default.createElement(TooltipTrigger, { asChild: true }, button), /* @__PURE__ */ import_react62.default.createElement(
+    return /* @__PURE__ */ import_react63.default.createElement(Tooltip, null, /* @__PURE__ */ import_react63.default.createElement(TooltipTrigger, { asChild: true }, button), /* @__PURE__ */ import_react63.default.createElement(
       TooltipContent,
       {
         side: side === "right" ? "left" : "right",
@@ -4923,8 +5137,8 @@ var SidebarMenuButton = import_react62.default.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarGroup = import_react62.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ import_react62.default.createElement(
+var SidebarGroup = import_react63.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ import_react63.default.createElement(
     "div",
     {
       ref,
@@ -4938,8 +5152,8 @@ var SidebarGroup = import_react62.default.forwardRef(({ className, ...props }, r
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = import_react62.default.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ import_react62.default.createElement(
+var SidebarGroupLabel = import_react63.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ import_react63.default.createElement(
     "div",
     {
       ref,
@@ -4953,7 +5167,7 @@ var SidebarGroupLabel = import_react62.default.forwardRef(({ className, ...props
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarMenuSub = import_react62.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react62.default.createElement(
+var SidebarMenuSub = import_react63.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react63.default.createElement(
   "ul",
   {
     ref,
@@ -4969,11 +5183,11 @@ var SidebarMenuSub = import_react62.default.forwardRef(({ className, ...props },
   }
 ));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = import_react62.default.forwardRef(({ ...props }, ref) => /* @__PURE__ */ import_react62.default.createElement("li", { ref, ...props }));
+var SidebarMenuSubItem = import_react63.default.forwardRef(({ ...props }, ref) => /* @__PURE__ */ import_react63.default.createElement("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = import_react62.default.forwardRef(({ asChild = false, isActive, className, ...props }, ref) => {
+var SidebarMenuSubButton = import_react63.default.forwardRef(({ asChild = false, isActive, className, ...props }, ref) => {
   const Comp = asChild ? import_react_slot3.Slot : "a";
-  return /* @__PURE__ */ import_react62.default.createElement(
+  return /* @__PURE__ */ import_react63.default.createElement(
     Comp,
     {
       ref,
@@ -4992,9 +5206,9 @@ var SidebarMenuSubButton = import_react62.default.forwardRef(({ asChild = false,
   );
 });
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
-var SidebarMenuAction = import_react62.default.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarMenuAction = import_react63.default.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot3.Slot : "button";
-  return /* @__PURE__ */ import_react62.default.createElement(
+  return /* @__PURE__ */ import_react63.default.createElement(
     Comp,
     {
       ref,
@@ -5012,25 +5226,30 @@ var SidebarMenuAction = import_react62.default.forwardRef(({ className, asChild
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarRail = import_react62.default.forwardRef(({ className, ...props }, ref) => {
+var SidebarRail = import_react63.default.forwardRef(({ className, ...props }, ref) => {
   const { open, toggleSidebar, side } = useSidebar();
+  const resize = import_react63.default.useContext(SidebarResizeContext);
+  const descriptionId = (0, import_react_id.useId)();
   const shortcutLabel = side === "left" ? SIDEBAR_KEYBOARD_SHORTCUT_LEFT : SIDEBAR_KEYBOARD_SHORTCUT_RIGHT;
   const caretIcon = open ? side === "right" ? "caret-sm-right" : "caret-sm-left" : side === "right" ? "caret-sm-left" : "caret-sm-right";
-  return /* @__PURE__ */ import_react62.default.createElement(
+  return /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, /* @__PURE__ */ import_react63.default.createElement(
     "button",
     {
       ref,
       "data-sidebar": "rail",
-      "aria-label": "Toggle Sidebar",
-      tabIndex: -1,
+      "data-resizable": resize?.enabled || void 0,
+      "aria-label": resize?.enabled ? `Resize or toggle ${side} sidebar` : "Toggle Sidebar",
+      "aria-describedby": resize?.enabled ? descriptionId : void 0,
+      tabIndex: resize?.enabled ? 0 : -1,
+      ...resize?.enabled ? resize.railProps : {},
       onClick: toggleSidebar,
-      title: `Toggle Sidebar ${shortcutLabel}`,
+      title: resize?.enabled ? `Drag to resize; click to toggle (${shortcutLabel})` : `Toggle Sidebar ${shortcutLabel}`,
       className: (0, import_classnames34.default)(
         Sidebar_module_default.rail,
         "hover-show-child background-color-transparent display-flex p-top-5xl p-left-xl p-right-0 justify-content-center position-absolute",
         {
-          "cursor-w-resize": open && side === "left" || !open && side === "right",
-          "cursor-e-resize": !open && side === "left" || open && side === "right"
+          "cursor-w-resize": !resize?.enabled && (open && side === "left" || !open && side === "right"),
+          "cursor-e-resize": !resize?.enabled && (!open && side === "left" || open && side === "right")
         },
         className
       ),
@@ -5039,12 +5258,13 @@ var SidebarRail = import_react62.default.forwardRef(({ className, ...props }, re
         bottom: "20px",
         right: side === "left" ? "-14px" : void 0,
         left: side === "right" ? "-18px" : void 0,
-        width: "10px"
+        width: "10px",
+        ...resize?.enabled ? { cursor: "col-resize", touchAction: "none" } : {}
       },
       type: "button",
       ...props
     },
-    /* @__PURE__ */ import_react62.default.createElement(
+    /* @__PURE__ */ import_react63.default.createElement(
       Box,
       {
         radius: "xl",
@@ -5061,18 +5281,18 @@ var SidebarRail = import_react62.default.forwardRef(({ className, ...props }, re
         className: (0, import_classnames34.default)(
           "hover-child",
           {
-            "cursor-w-resize": open && side === "left" || !open && side === "right",
-            "cursor-e-resize": !open && side === "left" || open && side === "right"
+            "cursor-w-resize": !resize?.enabled && (open && side === "left" || !open && side === "right"),
+            "cursor-e-resize": !resize?.enabled && (!open && side === "left" || open && side === "right")
           },
           className
         )
       },
-      /* @__PURE__ */ import_react62.default.createElement(Icon, { name: caretIcon })
+      /* @__PURE__ */ import_react63.default.createElement(Icon, { name: caretIcon })
     )
-  );
+  ), resize?.enabled && /* @__PURE__ */ import_react63.default.createElement("span", { id: descriptionId, className: Sidebar_module_default.resizeDescription }, "Width ", Math.round(resize.width), " pixels. Use left and right arrows to resize, Home for minimum, End for maximum, and Enter or Space to toggle."));
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarMenuBadge = import_react62.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react62.default.createElement(
+var SidebarMenuBadge = import_react63.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react63.default.createElement(
   "div",
   {
     ref,
@@ -5091,28 +5311,28 @@ var SidebarMenuBadge = import_react62.default.forwardRef(({ className, ...props
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
 
 // src/components/Table/Table.tsx
-var import_react68 = __toESM(require("react"));
+var import_react69 = __toESM(require("react"));
 var import_classnames40 = __toESM(require("classnames"));
 
 // src/components/Table/Table.module.scss
 var Table_module_default = { "container": "container__zReWp", "loading-mask": "loading-mask__gwG6j", "scroll-container": "scroll-container__79zJk", "table": "table__ojslm", "auto": "auto__bXEGP", "fixed": "fixed__zPdl3", "borderless": "borderless__AlDGM", "scrollable": "scrollable__HSxT1", "scrollable-x": "scrollable-x__aKmx8", "scrollable-y": "scrollable-y__8nNit", "table-bordered": "table-bordered__oTd6P", "full-height": "full-height__YPJfE" };
 
 // src/components/Table/TableBody/TableBody.tsx
-var import_react66 = __toESM(require("react"));
+var import_react67 = __toESM(require("react"));
 var import_classnames38 = __toESM(require("classnames"));
 
 // src/components/Table/TableBody/TableBody.module.scss
 var TableBody_module_default = { "table-body": "table-body__cX0OQ", "striped": "striped__1Epqn", "hover": "hover__I3QF4" };
 
 // src/components/Table/common/TableRow/TableRow.tsx
-var import_react65 = __toESM(require("react"));
+var import_react66 = __toESM(require("react"));
 var import_classnames37 = __toESM(require("classnames"));
 
 // src/components/Table/common/TableRow/TableRow.module.scss
 var TableRow_module_default = { "table-row": "table-row__BdHbx", "hoverable": "hoverable__Bdemq" };
 
 // src/components/Table/TableBody/TableBodyCell/TableBodyCell.tsx
-var import_react63 = __toESM(require("react"));
+var import_react64 = __toESM(require("react"));
 var import_classnames35 = __toESM(require("classnames"));
 
 // src/components/Table/TableBody/TableBodyCell/TableBodyCell.module.scss
@@ -5145,7 +5365,7 @@ var TableBodyCell = ({
     },
     className
   );
-  return /* @__PURE__ */ import_react63.default.createElement(
+  return /* @__PURE__ */ import_react64.default.createElement(
     Box,
     {
       as: columnIsSticky ? "th" : "td",
@@ -5163,7 +5383,7 @@ var TableBodyCell = ({
 var TableBodyCell_default = TableBodyCell;
 
 // src/components/Table/TableHead/TableHeaderCell/TableHeaderCell.tsx
-var import_react64 = __toESM(require("react"));
+var import_react65 = __toESM(require("react"));
 var import_classnames36 = __toESM(require("classnames"));
 
 // src/components/Table/TableHead/TableHeaderCell/TableHeaderCell.module.scss
@@ -5190,7 +5410,7 @@ var TableHeaderCell = ({
   const renderIcon = () => {
     const renderArrows = () => {
       if (getSortDirection() === "ascending") {
-        return /* @__PURE__ */ import_react64.default.createElement(
+        return /* @__PURE__ */ import_react65.default.createElement(
           Icon,
           {
             name: "caret-sm-up",
@@ -5199,7 +5419,7 @@ var TableHeaderCell = ({
         );
       }
       if (getSortDirection() === "descending") {
-        return /* @__PURE__ */ import_react64.default.createElement(
+        return /* @__PURE__ */ import_react65.default.createElement(
           Icon,
           {
             name: "caret-sm-down",
@@ -5207,7 +5427,7 @@ var TableHeaderCell = ({
           }
         );
       }
-      return /* @__PURE__ */ import_react64.default.createElement(
+      return /* @__PURE__ */ import_react65.default.createElement(
         Box,
         {
           display: "inline-block",
@@ -5218,7 +5438,7 @@ var TableHeaderCell = ({
         }
       );
     };
-    return /* @__PURE__ */ import_react64.default.createElement("span", { className: TableHeaderCell_module_default["sort-icon"] }, renderArrows());
+    return /* @__PURE__ */ import_react65.default.createElement("span", { className: TableHeaderCell_module_default["sort-icon"] }, renderArrows());
   };
   const handleKeyPress = (event) => {
     if (!onSort || !isSortable) return;
@@ -5250,7 +5470,7 @@ var TableHeaderCell = ({
     },
     className
   );
-  return /* @__PURE__ */ import_react64.default.createElement(
+  return /* @__PURE__ */ import_react65.default.createElement(
     Box,
     {
       as: "th",
@@ -5263,7 +5483,7 @@ var TableHeaderCell = ({
       onKeyDown: handleKeyPress,
       scope: "col"
     },
-    /* @__PURE__ */ import_react64.default.createElement("div", { className: TableHeaderCell_module_default.heading }, column.heading, isSortable && renderIcon())
+    /* @__PURE__ */ import_react65.default.createElement("div", { className: TableHeaderCell_module_default.heading }, column.heading, isSortable && renderIcon())
   );
 };
 
@@ -5296,7 +5516,7 @@ var TableRow = ({
       return true;
     }
     if (Array.isArray(value)) return value.every(isRenderableCell);
-    return import_react65.default.isValidElement(value);
+    return import_react66.default.isValidElement(value);
   };
   const renderCellContent = (column) => {
     if (column.render) {
@@ -5316,8 +5536,8 @@ var TableRow = ({
     }
     return void 0;
   };
-  return /* @__PURE__ */ import_react65.default.createElement("tr", { className: tableRowClasses }, Object.values(columns).map(
-    (column, columnIndex) => isTableHead ? /* @__PURE__ */ import_react65.default.createElement(
+  return /* @__PURE__ */ import_react66.default.createElement("tr", { className: tableRowClasses }, Object.values(columns).map(
+    (column, columnIndex) => isTableHead ? /* @__PURE__ */ import_react66.default.createElement(
       TableHeaderCell,
       {
         column,
@@ -5335,7 +5555,7 @@ var TableRow = ({
         hasStickyHeader,
         sticky: column.sticky
       }
-    ) : /* @__PURE__ */ import_react65.default.createElement(
+    ) : /* @__PURE__ */ import_react66.default.createElement(
       TableBodyCell_default,
       {
         align: column.align || align,
@@ -5382,7 +5602,7 @@ var TableBody = ({
     }
     return `row-index-${rowIndex}`;
   };
-  return /* @__PURE__ */ import_react66.default.createElement("tbody", { className: tableBodyClasses }, rows.map((row, rowIndex) => /* @__PURE__ */ import_react66.default.createElement(
+  return /* @__PURE__ */ import_react67.default.createElement("tbody", { className: tableBodyClasses }, rows.map((row, rowIndex) => /* @__PURE__ */ import_react67.default.createElement(
     TableRow,
     {
       columns,
@@ -5399,7 +5619,7 @@ var TableBody = ({
 };
 
 // src/components/Table/TableHead/TableHead.tsx
-var import_react67 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 var import_classnames39 = __toESM(require("classnames"));
 var TableHead = ({
   columns,
@@ -5413,7 +5633,7 @@ var TableHead = ({
   truncateOverflow = false
 }) => {
   const tableHeadClasses = (0, import_classnames39.default)(className);
-  return /* @__PURE__ */ import_react67.default.createElement("thead", { className: tableHeadClasses }, /* @__PURE__ */ import_react67.default.createElement(
+  return /* @__PURE__ */ import_react68.default.createElement("thead", { className: tableHeadClasses }, /* @__PURE__ */ import_react68.default.createElement(
     TableRow,
     {
       columns,
@@ -5467,13 +5687,13 @@ var Table = ({
     [Table_module_default.borderless]: isBorderless,
     [Table_module_default.compact]: isCompact
   });
-  return /* @__PURE__ */ import_react68.default.createElement("div", { className: containerClasses }, isLoading && /* @__PURE__ */ import_react68.default.createElement("div", { className: Table_module_default["loading-mask"] }, /* @__PURE__ */ import_react68.default.createElement(Spinner, { size: "xl" })), /* @__PURE__ */ import_react68.default.createElement(
+  return /* @__PURE__ */ import_react69.default.createElement("div", { className: containerClasses }, isLoading && /* @__PURE__ */ import_react69.default.createElement("div", { className: Table_module_default["loading-mask"] }, /* @__PURE__ */ import_react69.default.createElement(Spinner, { size: "xl" })), /* @__PURE__ */ import_react69.default.createElement(
     "div",
     {
       className: scrollContainerClasses,
       "data-testid": "tableContainerDiv-testid"
     },
-    /* @__PURE__ */ import_react68.default.createElement("table", { className: tableClasses }, /* @__PURE__ */ import_react68.default.createElement(
+    /* @__PURE__ */ import_react69.default.createElement("table", { className: tableClasses }, /* @__PURE__ */ import_react69.default.createElement(
       TableHead,
       {
         columns,
@@ -5485,7 +5705,7 @@ var Table = ({
         truncateOverflow,
         hasStickyHeader
       }
-    ), /* @__PURE__ */ import_react68.default.createElement(
+    ), /* @__PURE__ */ import_react69.default.createElement(
       TableBody,
       {
         rows,
@@ -5504,22 +5724,22 @@ var Table = ({
 };
 
 // src/components/ThemeProvider/ThemeProvider.tsx
-var import_react69 = __toESM(require("react"));
+var import_react70 = __toESM(require("react"));
 var initialState = {
   theme: "system",
   setTheme: () => null
 };
-var ThemeProviderContext = (0, import_react69.createContext)(initialState);
+var ThemeProviderContext = (0, import_react70.createContext)(initialState);
 function ThemeProvider({
   children,
   defaultTheme = "system",
   storageKey = "hyphen-ui-theme",
   ...props
 }) {
-  const [theme, setTheme] = (0, import_react69.useState)(
+  const [theme, setTheme] = (0, import_react70.useState)(
     () => localStorage.getItem(storageKey) || defaultTheme
   );
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     const root = window.document.documentElement;
     root.classList.remove("light", "dark");
     if (theme === "system") {
@@ -5538,14 +5758,14 @@ function ThemeProvider({
     },
     isDarkMode
   };
-  return /* @__PURE__ */ import_react69.default.createElement(ThemeProviderContext.Provider, { ...props, value }, children);
+  return /* @__PURE__ */ import_react70.default.createElement(ThemeProviderContext.Provider, { ...props, value }, children);
 }
 
 // src/components/Toast/ToastContainer.tsx
-var import_react73 = __toESM(require("react"));
+var import_react74 = __toESM(require("react"));
 
 // src/components/Toast/ToastNotification.tsx
-var import_react70 = __toESM(require("react"));
+var import_react71 = __toESM(require("react"));
 var import_classnames41 = __toESM(require("classnames"));
 
 // src/components/Toast/ToastNotification.module.scss
@@ -5578,12 +5798,12 @@ var renderToastIcon = (toast2) => {
     iconName = "c-warning";
     iconColor = "white";
   }
-  const icon = type !== "loading" ? /* @__PURE__ */ import_react70.default.createElement(Icon, { name: iconName, color: iconColor }) : /* @__PURE__ */ import_react70.default.createElement(Spinner, null);
-  return /* @__PURE__ */ import_react70.default.createElement(Box, { justifyContent: "center", height: "100" }, icon);
+  const icon = type !== "loading" ? /* @__PURE__ */ import_react71.default.createElement(Icon, { name: iconName, color: iconColor }) : /* @__PURE__ */ import_react71.default.createElement(Spinner, null);
+  return /* @__PURE__ */ import_react71.default.createElement(Box, { justifyContent: "center", height: "100" }, icon);
 };
 var renderDismissIcon = (toast2, onDismiss) => {
   if (!toast2.canDismiss) return;
-  return /* @__PURE__ */ import_react70.default.createElement(
+  return /* @__PURE__ */ import_react71.default.createElement(
     Box,
     {
       as: "button",
@@ -5598,12 +5818,12 @@ var renderDismissIcon = (toast2, onDismiss) => {
       onClick: onDismiss,
       "aria-label": "dismiss notification"
     },
-    /* @__PURE__ */ import_react70.default.createElement(Icon, { name: "remove" })
+    /* @__PURE__ */ import_react71.default.createElement(Icon, { name: "remove" })
   );
 };
-var ToastNotification = import_react70.default.memo(
+var ToastNotification = import_react71.default.memo(
   ({ toast: toast2, position = "top-center", style, children, onDismiss }) => {
-    const message = /* @__PURE__ */ import_react70.default.createElement(
+    const message = /* @__PURE__ */ import_react71.default.createElement(
       Box,
       {
         direction: "row",
@@ -5625,7 +5845,7 @@ var ToastNotification = import_react70.default.memo(
         [ToastNotification_module_default["toast-error"]]: toast2.type === "error"
       }
     );
-    return /* @__PURE__ */ import_react70.default.createElement(
+    return /* @__PURE__ */ import_react71.default.createElement(
       Box,
       {
         alignItems: "center",
@@ -5642,16 +5862,16 @@ var ToastNotification = import_react70.default.memo(
       },
       typeof children === "function" ? children({
         message
-      }) : /* @__PURE__ */ import_react70.default.createElement(import_react70.default.Fragment, null, renderToastIcon(toast2), message, renderDismissIcon(toast2, onDismiss))
+      }) : /* @__PURE__ */ import_react71.default.createElement(import_react71.default.Fragment, null, renderToastIcon(toast2), message, renderDismissIcon(toast2, onDismiss))
     );
   }
 );
 
 // src/components/Toast/useToasts.ts
-var import_react72 = require("react");
+var import_react73 = require("react");
 
 // src/components/Toast/Toast.store.ts
-var import_react71 = require("react");
+var import_react72 = require("react");
 var TOAST_LIMIT = 20;
 var toastTimeouts = /* @__PURE__ */ new Map();
 var addToDismissedQueue = (toastId) => {
@@ -5787,8 +6007,8 @@ var defaultTimeouts = {
   custom: 4e3
 };
 var useToastStore = (toastOptions = {}) => {
-  const [state, setState] = (0, import_react71.useState)(memoryState);
-  (0, import_react71.useEffect)(() => {
+  const [state, setState] = (0, import_react72.useState)(memoryState);
+  (0, import_react72.useEffect)(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -5875,7 +6095,7 @@ toast.async = function(promise, messages, opts) {
 // src/components/Toast/useToasts.ts
 var useToasts = (toastOptions) => {
   const { toasts, pausedAt } = useToastStore(toastOptions);
-  (0, import_react72.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     if (pausedAt) {
       return;
     }
@@ -5897,7 +6117,7 @@ var useToasts = (toastOptions) => {
       timeouts.forEach((timeout) => timeout && clearTimeout(timeout));
     };
   }, [toasts, pausedAt]);
-  const handlers = (0, import_react72.useMemo)(
+  const handlers = (0, import_react73.useMemo)(
     () => ({
       startPause: () => {
         dispatch({
@@ -5979,7 +6199,7 @@ var renderNotification = (currentToast, children, containerPosition) => {
   if (children) {
     return children(currentToast);
   }
-  return /* @__PURE__ */ import_react73.default.createElement(
+  return /* @__PURE__ */ import_react74.default.createElement(
     ToastNotification,
     {
       toast: currentToast,
@@ -5999,7 +6219,7 @@ var ToastContainer = ({
   ...restProps
 }) => {
   const { toasts, handlers } = useToasts(toastOptions);
-  return /* @__PURE__ */ import_react73.default.createElement(
+  return /* @__PURE__ */ import_react74.default.createElement(
     Box,
     {
       style: {
@@ -6029,7 +6249,7 @@ var ToastContainer = ({
       const ref = t.height ? void 0 : createRectRef((rect) => {
         handlers.updateHeight(t.id, rect.height);
       });
-      return /* @__PURE__ */ import_react73.default.createElement(
+      return /* @__PURE__ */ import_react74.default.createElement(
         Box,
         {
           ref,
@@ -6047,7 +6267,7 @@ var ToastContainer = ({
 };
 
 // src/components/Toggle/Toggle.tsx
-var import_react74 = __toESM(require("react"));
+var import_react75 = __toESM(require("react"));
 var TogglePrimitive = __toESM(require("@radix-ui/react-toggle"));
 
 // src/components/Toggle/Toggle.module.scss
@@ -6055,7 +6275,7 @@ var Toggle_module_default = { "item": "item__PrPsJ", "outline": "outline__Lkabh"
 
 // src/components/Toggle/Toggle.tsx
 var import_classnames42 = __toESM(require("classnames"));
-var Toggle = (0, import_react74.forwardRef)(({ className, variant = "default", children, ...props }, ref) => /* @__PURE__ */ import_react74.default.createElement(
+var Toggle = (0, import_react75.forwardRef)(({ className, variant = "default", children, ...props }, ref) => /* @__PURE__ */ import_react75.default.createElement(
   TogglePrimitive.Root,
   {
     ref,
@@ -6072,12 +6292,12 @@ var Toggle = (0, import_react74.forwardRef)(({ className, variant = "default", c
 Toggle.displayName = "Toggle";
 
 // src/hooks/useBreakpoint/useBreakpoint.ts
-var import_react76 = require("react");
+var import_react77 = require("react");
 
 // src/hooks/useWindowSize/useWindowSize.ts
-var import_react75 = __toESM(require("react"));
+var import_react76 = __toESM(require("react"));
 var useWindowSize = () => {
-  const { innerWidth, innerHeight, outerHeight, outerWidth, isCreated } = import_react75.default.useContext(ResponsiveContext);
+  const { innerWidth, innerHeight, outerHeight, outerWidth, isCreated } = import_react76.default.useContext(ResponsiveContext);
   if (isCreated) {
     return {
       innerHeight,
@@ -6093,7 +6313,7 @@ var useWindowSize = () => {
 var defaultBreakpoint = { name: "base", minWidth: 0 };
 var useBreakpoint = () => {
   const windowSize = useWindowSize();
-  const [breakpoint, setBreakpoint] = (0, import_react76.useState)({
+  const [breakpoint, setBreakpoint] = (0, import_react77.useState)({
     ...defaultBreakpoint
   });
   useIsomorphicLayoutEffect(() => {
@@ -6120,7 +6340,7 @@ var useBreakpoint = () => {
 };
 
 // src/hooks/useOpenClose/useOpenClose.tsx
-var import_react77 = require("react");
+var import_react78 = require("react");
 var useOpenClose = (props = {}) => {
   const {
     defaultIsOpen,
@@ -6128,28 +6348,28 @@ var useOpenClose = (props = {}) => {
     onClose: onCloseProp,
     onOpen: onOpenProp
   } = props;
-  const openCallback = (0, import_react77.useCallback)(() => {
+  const openCallback = (0, import_react78.useCallback)(() => {
     onOpenProp?.();
   }, [onOpenProp]);
-  const closeCallback = (0, import_react77.useCallback)(() => {
+  const closeCallback = (0, import_react78.useCallback)(() => {
     onCloseProp?.();
   }, [onCloseProp]);
-  const [isOpenState, setIsOpen] = (0, import_react77.useState)(defaultIsOpen || false);
+  const [isOpenState, setIsOpen] = (0, import_react78.useState)(defaultIsOpen || false);
   const isOpen = isOpenProp !== void 0 ? isOpenProp : isOpenState;
   const isControlled = isOpenProp !== void 0;
-  const handleClose = (0, import_react77.useCallback)(() => {
+  const handleClose = (0, import_react78.useCallback)(() => {
     if (!isControlled) {
       setIsOpen(false);
     }
     closeCallback?.();
   }, [isControlled, closeCallback]);
-  const handleOpen = (0, import_react77.useCallback)(() => {
+  const handleOpen = (0, import_react78.useCallback)(() => {
     if (!isControlled) {
       setIsOpen(true);
     }
     openCallback?.();
   }, [isControlled, openCallback]);
-  const handleToggle = (0, import_react77.useCallback)(() => {
+  const handleToggle = (0, import_react78.useCallback)(() => {
     if (isOpen) {
       handleClose();
     } else {
@@ -6165,9 +6385,9 @@ var useOpenClose = (props = {}) => {
 };
 
 // src/hooks/useTheme/useTheme.ts
-var import_react78 = __toESM(require("react"));
+var import_react79 = __toESM(require("react"));
 var useTheme = () => {
-  const context = import_react78.default.useContext(ThemeProviderContext);
+  const context = import_react79.default.useContext(ThemeProviderContext);
   if (context === void 0)
     throw new Error(
       "useTheme must be used within a ThemeProvider. Be sure your App is wrapped in ThemeProvider."