@cerberus-design/react 0.13.1 → 0.13.2

package/build/legacy/index.cjs

@@ -107,6 +107,7 @@ __export(src_exports, {
   useNavMenuContext: () => useNavMenuContext,
   useNotificationCenter: () => useNotificationCenter,
   usePromptModal: () => usePromptModal,
+  useRootColors: () => useRootColors,
   useTabsContext: () => useTabsContext,
   useTabsKeyboardNavigation: () => useTabsKeyboardNavigation,
   useTheme: () => useTheme,
@@ -1360,7 +1361,6 @@ function ModalHeader(props) {
         (0, import_patterns9.vstack)({
           alignItems: "flex-start",
           gap: "md",
-          mb: "md",
           position: "relative"
         })
       )
@@ -1727,11 +1727,8 @@ function NotificationDescription(props) {
 }
 
 // src/components/Portal.tsx
-var import_react_dom = require("react-dom");
-function Portal(props) {
-  const container = props.container || document.body;
-  return (0, import_react_dom.createPortal)(props.children, container, props.key);
-}
+var import_react12 = require("@ark-ui/react");
+var Portal = import_react12.Portal;
 
 // src/components/Radio.tsx
 var import_css28 = require("@cerberus/styled-system/css");
@@ -1899,21 +1896,21 @@ function Spinner(props) {
 }
 
 // src/components/Tab.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/context/tabs.tsx
 var import_recipes24 = require("@cerberus/styled-system/recipes");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var TabsContext = (0, import_react12.createContext)(null);
+var TabsContext = (0, import_react13.createContext)(null);
 function Tabs(props) {
   const { cache, active, id, palette } = props;
-  const [activeTab, setActiveTab] = (0, import_react12.useState)(() => cache ? "" : active ?? "");
-  const tabsList = (0, import_react12.useRef)([]);
-  const uuid = (0, import_react12.useMemo)(() => {
+  const [activeTab, setActiveTab] = (0, import_react13.useState)(() => cache ? "" : active ?? "");
+  const tabsList = (0, import_react13.useRef)([]);
+  const uuid = (0, import_react13.useMemo)(() => {
     return id ? `cerberus-tabs-${id}` : "cerberus-tabs";
   }, [id]);
-  const value = (0, import_react12.useMemo)(
+  const value = (0, import_react13.useMemo)(
     () => ({
       tabs: tabsList,
       id: uuid,
@@ -1923,7 +1920,7 @@ function Tabs(props) {
     }),
     [activeTab, setActiveTab, palette, uuid, tabsList]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (cache) {
       const cachedTab = window.localStorage.getItem(uuid);
       setActiveTab(
@@ -1931,7 +1928,7 @@ function Tabs(props) {
       );
     }
   }, [cache, active, uuid]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (cache && activeTab) {
       window.localStorage.setItem(uuid, activeTab);
     }
@@ -1939,7 +1936,7 @@ function Tabs(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TabsContext.Provider, { value, children: props.children });
 }
 function useTabsContext() {
-  const context = (0, import_react12.useContext)(TabsContext);
+  const context = (0, import_react13.useContext)(TabsContext);
   if (!context) {
     throw new Error("useTabsContext must be used within a Tabs Provider.");
   }
@@ -1950,7 +1947,7 @@ function useTabsContext() {
 var import_css30 = require("@cerberus/styled-system/css");
 
 // src/aria-helpers/tabs.aria.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function getNextIndex(index, length) {
   return index === length - 1 ? 0 : index + 1;
 }
@@ -1959,8 +1956,8 @@ function getPrevIndex(index, length) {
 }
 function useTabsKeyboardNavigation() {
   const { tabs: tabs2 } = useTabsContext();
-  const [activeTab, setActiveTab] = (0, import_react13.useState)(-1);
-  (0, import_react13.useEffect)(() => {
+  const [activeTab, setActiveTab] = (0, import_react14.useState)(-1);
+  (0, import_react14.useEffect)(() => {
     const handleKeyDown = (event) => {
       const index = activeTab === -1 ? tabs2.current.findIndex((tab) => tab.ariaSelected === "true") : activeTab;
       const nextIndex = getNextIndex(index, tabs2.current.length);
@@ -2010,9 +2007,9 @@ var import_jsx_runtime38 = require("react/jsx-runtime");
 function Tab(props) {
   const { value, ...nativeProps } = props;
   const { active, onTabUpdate, styles } = useTabsContext();
-  const [isPending, startTransition] = (0, import_react14.useTransition)();
+  const [isPending, startTransition] = (0, import_react15.useTransition)();
   const { ref } = useTabsKeyboardNavigation();
-  const isActive = (0, import_react14.useMemo)(() => active === value, [active, value]);
+  const isActive = (0, import_react15.useMemo)(() => active === value, [active, value]);
   function handleClick(e) {
     var _a;
     (_a = props.onClick) == null ? void 0 : _a.call(props, e);
@@ -2063,12 +2060,12 @@ function TabList(props) {
 
 // src/components/TabPanel.tsx
 var import_css32 = require("@cerberus/styled-system/css");
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function TabPanel(props) {
   const { tab, ...nativeProps } = props;
   const { active, styles } = useTabsContext();
-  const isActive = (0, import_react15.useMemo)(() => active === tab, [active, tab]);
+  const isActive = (0, import_react16.useMemo)(() => active === tab, [active, tab]);
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Show, { when: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
@@ -2346,26 +2343,26 @@ function Tooltip(props) {
 }
 
 // src/context/confirm-modal.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_css42 = require("@cerberus/styled-system/css");
 var import_patterns16 = require("@cerberus/styled-system/patterns");
 
 // src/hooks/useModal.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 function useModal() {
-  const modalRef = (0, import_react16.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
-  const show = (0, import_react16.useCallback)(() => {
+  const modalRef = (0, import_react17.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
+  const show = (0, import_react17.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.showModal();
     setIsOpen(true);
   }, []);
-  const close = (0, import_react16.useCallback)(() => {
+  const close = (0, import_react17.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.close();
     setIsOpen(false);
   }, []);
-  return (0, import_react16.useMemo)(() => {
+  return (0, import_react17.useMemo)(() => {
     return {
       modalRef,
       show,
@@ -2376,19 +2373,21 @@ function useModal() {
 }
 
 // src/context/confirm-modal.tsx
+var import_jsx = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var ConfirmModalContext = (0, import_react17.createContext)(null);
+var ConfirmModalContext = (0, import_react18.createContext)(null);
 function ConfirmModal(props) {
   const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react17.useRef)(null);
-  const [content, setContent] = (0, import_react17.useState)(null);
+  const resolveRef = (0, import_react18.useRef)(null);
+  const [content, setContent] = (0, import_react18.useState)(null);
   const focusTrap = trapFocus(modalRef);
   const ConfirmIcon = $cerberusIcons.confirmModal;
-  const palette = (0, import_react17.useMemo)(
-    () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
-    [content]
+  const kind = (content == null ? void 0 : content.kind) ?? "non-destructive";
+  const palette = (0, import_react18.useMemo)(
+    () => kind === "destructive" ? "danger" : "action",
+    [kind]
   );
-  const handleChoice = (0, import_react17.useCallback)(
+  const handleChoice = (0, import_react18.useCallback)(
     (e) => {
       var _a, _b;
       const target = e.currentTarget;
@@ -2400,17 +2399,17 @@ function ConfirmModal(props) {
     },
     [close]
   );
-  const handleShow = (0, import_react17.useCallback)(
+  const handleShow = (0, import_react18.useCallback)(
     (options) => {
       return new Promise((resolve) => {
-        setContent({ ...options, kind: options.kind || "non-destructive" });
+        setContent({ ...options });
         show();
         resolveRef.current = resolve;
       });
     },
     [show]
   );
-  const value = (0, import_react17.useMemo)(
+  const value = (0, import_react18.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -2418,7 +2417,7 @@ function ConfirmModal(props) {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx.VStack, { gap: "xl", w: "full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ModalHeader, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "div",
@@ -2456,48 +2455,40 @@ function ConfirmModal(props) {
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-        "div",
-        {
-          className: (0, import_patterns16.hstack)({
-            gap: "4"
-          }),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-              Button,
-              {
-                autoFocus: true,
-                className: (0, import_css42.css)({
-                  w: "1/2"
-                }),
-                name: "confirm",
-                onClick: handleChoice,
-                palette,
-                value: "true",
-                children: content == null ? void 0 : content.actionText
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-              Button,
-              {
-                className: (0, import_css42.css)({
-                  w: "1/2"
-                }),
-                name: "cancel",
-                onClick: handleChoice,
-                usage: "outlined",
-                value: "false",
-                children: content == null ? void 0 : content.cancelText
-              }
-            )
-          ]
-        }
-      )
-    ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx.HStack, { gap: "4", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          Button,
+          {
+            autoFocus: true,
+            className: (0, import_css42.css)({
+              w: "1/2"
+            }),
+            name: "confirm",
+            onClick: handleChoice,
+            palette,
+            value: "true",
+            children: content == null ? void 0 : content.actionText
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          Button,
+          {
+            className: (0, import_css42.css)({
+              w: "1/2"
+            }),
+            name: "cancel",
+            onClick: handleChoice,
+            usage: "outlined",
+            value: "false",
+            children: content == null ? void 0 : content.cancelText
+          }
+        )
+      ] })
+    ] }) }) })
   ] });
 }
 function useConfirmModal() {
-  const context = (0, import_react17.useContext)(ConfirmModalContext);
+  const context = (0, import_react18.useContext)(ConfirmModalContext);
   if (context === null) {
     throw new Error(
       "useConfirmModal must be used within a ConfirmModal Provider"
@@ -2507,21 +2498,21 @@ function useConfirmModal() {
 }
 
 // src/context/cta-modal.tsx
-var import_react18 = require("react");
-var import_jsx = require("@cerberus/styled-system/jsx");
-var import_css43 = require("@cerberus/styled-system/css");
+var import_react19 = require("react");
 var import_jsx2 = require("@cerberus/styled-system/jsx");
+var import_css43 = require("@cerberus/styled-system/css");
+var import_jsx3 = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime51 = require("react/jsx-runtime");
-var CTAModalContext = (0, import_react18.createContext)(null);
+var CTAModalContext = (0, import_react19.createContext)(null);
 function CTAModal(props) {
   var _a, _b;
   const { modalRef, show, close } = useModal();
-  const [content, setContent] = (0, import_react18.useState)(null);
+  const [content, setContent] = (0, import_react19.useState)(null);
   const focusTrap = trapFocus(modalRef);
   const FallbackIcon = $cerberusIcons.confirmModal;
   const confirmIcon = content == null ? void 0 : content.icon;
   const { close: CloseIcon } = $cerberusIcons;
-  const handleShow = (0, import_react18.useCallback)(
+  const handleShow = (0, import_react19.useCallback)(
     (options) => {
       const maxActions = 2;
       if (options.actions.length > maxActions) {
@@ -2534,7 +2525,7 @@ function CTAModal(props) {
     },
     [show]
   );
-  const handleActionClick = (0, import_react18.useCallback)(
+  const handleActionClick = (0, import_react19.useCallback)(
     (event) => {
       const index = event.currentTarget.getAttribute("data-index");
       const action = content == null ? void 0 : content.actions[Number(index)];
@@ -2545,7 +2536,7 @@ function CTAModal(props) {
     },
     [content, close]
   );
-  const value = (0, import_react18.useMemo)(
+  const value = (0, import_react19.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -2567,47 +2558,47 @@ function CTAModal(props) {
           children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CloseIcon, {}) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.HStack, { justify: "center", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          Avatar,
-          {
-            ariaLabel: "",
-            gradient: "charon-light",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              Show,
-              {
-                when: Boolean(confirmIcon),
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(FallbackIcon, { size: 24 }),
-                children: confirmIcon
-              }
-            ),
-            src: ""
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx3.VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx3.VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            Avatar,
+            {
+              ariaLabel: "",
+              gradient: "charon-light",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                Show,
+                {
+                  when: Boolean(confirmIcon),
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(FallbackIcon, { size: 24 }),
+                  children: confirmIcon
+                }
+              ),
+              src: ""
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.HStack, { gap: "md", pt: "sm", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        Button,
-        {
-          "data-index": index,
-          className: (0, import_css43.css)({
-            w: "1/2"
-          }),
-          onClick: handleActionClick,
-          shape: "rounded",
-          usage: "outlined",
-          children: action.text
-        },
-        index
-      )) }) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx2.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          Button,
+          {
+            "data-index": index,
+            className: (0, import_css43.css)({
+              w: "1/2"
+            }),
+            onClick: handleActionClick,
+            shape: "rounded",
+            usage: "outlined",
+            children: action.text
+          },
+          index
+        )) }) })
+      ] })
     ] }) })
   ] });
 }
 function useCTAModal() {
-  const context = (0, import_react18.useContext)(CTAModalContext);
+  const context = (0, import_react19.useContext)(CTAModalContext);
   if (context === null) {
     throw new Error("useCTAModal must be used within a CTAModal Provider");
   }
@@ -2615,22 +2606,22 @@ function useCTAModal() {
 }
 
 // src/context/notification-center.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_patterns17 = require("@cerberus/styled-system/patterns");
 var import_recipes34 = require("@cerberus/styled-system/recipes");
 var import_css44 = require("@cerberus/styled-system/css");
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var NotificationsContext = (0, import_react19.createContext)(null);
+var NotificationsContext = (0, import_react20.createContext)(null);
 function NotificationCenter(props) {
-  const [activeNotifications, setActiveNotifications] = (0, import_react19.useState)([]);
+  const [activeNotifications, setActiveNotifications] = (0, import_react20.useState)([]);
   const styles = (0, import_recipes34.notification)();
-  const handleNotify = (0, import_react19.useCallback)((options) => {
+  const handleNotify = (0, import_react20.useCallback)((options) => {
     setActiveNotifications((prev) => {
       const id = `${options.palette}:${prev.length + 1}`;
       return [...prev, { ...options, id }];
     });
   }, []);
-  const handleClose = (0, import_react19.useCallback)((e) => {
+  const handleClose = (0, import_react20.useCallback)((e) => {
     const target = e.currentTarget;
     setActiveNotifications((prev) => {
       const item = prev.find((option) => option.id === target.value);
@@ -2638,7 +2629,7 @@ function NotificationCenter(props) {
       return prev.filter((option) => option.id !== target.value);
     });
   }, []);
-  const handleCloseAll = (0, import_react19.useCallback)(() => {
+  const handleCloseAll = (0, import_react20.useCallback)(() => {
     setActiveNotifications((prev) => {
       prev.forEach((item) => {
         if (item.onClose) item.onClose();
@@ -2646,7 +2637,7 @@ function NotificationCenter(props) {
       return [];
     });
   }, []);
-  const value = (0, import_react19.useMemo)(
+  const value = (0, import_react20.useMemo)(
     () => ({
       notify: handleNotify
     }),
@@ -2737,7 +2728,7 @@ function MatchNotification(props) {
   }
 }
 function useNotificationCenter() {
-  const context = (0, import_react19.useContext)(NotificationsContext);
+  const context = (0, import_react20.useContext)(NotificationsContext);
   if (!context) {
     throw new Error(
       "useNotificationCenter must be used within a NotificationsProvider"
@@ -2747,33 +2738,33 @@ function useNotificationCenter() {
 }
 
 // src/context/prompt-modal.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_css45 = require("@cerberus/styled-system/css");
 var import_patterns18 = require("@cerberus/styled-system/patterns");
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var PromptModalContext = (0, import_react20.createContext)(null);
+var PromptModalContext = (0, import_react21.createContext)(null);
 function PromptModal(props) {
   const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react20.useRef)(null);
-  const [content, setContent] = (0, import_react20.useState)(null);
-  const [inputValue, setInputValue] = (0, import_react20.useState)("");
+  const resolveRef = (0, import_react21.useRef)(null);
+  const [content, setContent] = (0, import_react21.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react21.useState)("");
   const focusTrap = trapFocus(modalRef);
   const PromptIcon = $cerberusIcons.promptModal;
-  const isValid = (0, import_react20.useMemo)(
+  const isValid = (0, import_react21.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react20.useMemo)(
+  const palette = (0, import_react21.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react20.useCallback)(
+  const handleChange = (0, import_react21.useCallback)(
     (e) => {
       setInputValue(e.currentTarget.value);
     },
     [content]
   );
-  const handleChoice = (0, import_react20.useCallback)(
+  const handleChoice = (0, import_react21.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
@@ -2784,7 +2775,7 @@ function PromptModal(props) {
     },
     [inputValue, close]
   );
-  const handleShow = (0, import_react20.useCallback)(
+  const handleShow = (0, import_react21.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
@@ -2794,7 +2785,7 @@ function PromptModal(props) {
     },
     [show]
   );
-  const value = (0, import_react20.useMemo)(
+  const value = (0, import_react21.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -2928,7 +2919,7 @@ function PromptModal(props) {
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react20.useContext)(PromptModalContext);
+  const context = (0, import_react21.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }
@@ -2936,50 +2927,50 @@ function usePromptModal() {
 }
 
 // src/context/theme.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/hooks/useTheme.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 var THEME_KEY = "cerberus-theme";
 var MODE_KEY = "cerberus-mode";
 function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options = {}) {
   const { updateMode, updateTheme, cache } = options;
-  const [theme, setTheme] = (0, import_react21.useState)(defaultTheme);
-  const [colorMode, setColorMode] = (0, import_react21.useState)(defaultColorMode);
-  const handleThemeChange = (0, import_react21.useCallback)(
+  const [theme, setTheme] = (0, import_react22.useState)(defaultTheme);
+  const [colorMode, setColorMode] = (0, import_react22.useState)(defaultColorMode);
+  const handleThemeChange = (0, import_react22.useCallback)(
     (newTheme) => {
       setTheme(newTheme);
       updateTheme == null ? void 0 : updateTheme(newTheme);
     },
     [updateTheme]
   );
-  const handleColorModeChange = (0, import_react21.useCallback)(
+  const handleColorModeChange = (0, import_react22.useCallback)(
     (newMode) => {
       setColorMode(newMode);
       updateMode == null ? void 0 : updateMode(newMode);
     },
     [updateMode]
   );
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react22.useLayoutEffect)(() => {
     const theme2 = localStorage.getItem(THEME_KEY);
     if (theme2) {
       setTheme(theme2);
     }
   }, []);
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react22.useLayoutEffect)(() => {
     const mode = localStorage.getItem(MODE_KEY);
     if (mode) {
       setColorMode(mode);
     }
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const root = document.documentElement;
     root.dataset.pandaTheme = theme;
     if (cache) {
       localStorage.setItem(THEME_KEY, theme);
     }
   }, [theme, cache]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const root = document.documentElement;
     if (colorMode === "system") {
       root.dataset.colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -2990,7 +2981,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
       localStorage.setItem(MODE_KEY, colorMode);
     }
   }, [colorMode, cache]);
-  return (0, import_react21.useMemo)(
+  return (0, import_react22.useMemo)(
     () => ({
       theme,
       mode: colorMode,
@@ -3003,7 +2994,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 
 // src/context/theme.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react22.createContext)(
+var ThemeContext = (0, import_react23.createContext)(
   null
 );
 function ThemeProvider(props) {
@@ -3015,7 +3006,7 @@ function ThemeProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
-  const context = (0, import_react22.useContext)(ThemeContext);
+  const context = (0, import_react23.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useThemeContext must be used within a ThemeProvider");
   }
@@ -3023,13 +3014,13 @@ function useThemeContext() {
 }
 
 // src/hooks/useDate.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 function useDate(options) {
   const initialValue = (options == null ? void 0 : options.initialValue) ?? "";
   const format = (options == null ? void 0 : options.format) ?? DateFormats.USMilitary;
   const onChange = options == null ? void 0 : options.onChange;
-  const [value, setValue] = (0, import_react23.useState)(initialValue);
-  const handleChange = (0, import_react23.useCallback)(
+  const [value, setValue] = (0, import_react24.useState)(initialValue);
+  const handleChange = (0, import_react24.useCallback)(
     (e) => {
       const newValue = formatMilitaryDate(e.currentTarget.value);
       if (onChange) onChange(e);
@@ -3037,7 +3028,7 @@ function useDate(options) {
     },
     [onChange]
   );
-  return (0, import_react23.useMemo)(
+  return (0, import_react24.useMemo)(
     () => ({
       format,
       value,
@@ -3110,11 +3101,11 @@ var MONTHS = [
 ];
 
 // src/hooks/useToggle.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 function useToggle(options) {
-  const [checked, setChecked] = (0, import_react24.useState)((options == null ? void 0 : options.checked) ?? "");
+  const [checked, setChecked] = (0, import_react25.useState)((options == null ? void 0 : options.checked) ?? "");
   const onChange = options == null ? void 0 : options.onChange;
-  const handleChange = (0, import_react24.useCallback)(
+  const handleChange = (0, import_react25.useCallback)(
     (e) => {
       const target = e.currentTarget;
       setChecked((prev) => {
@@ -3124,7 +3115,42 @@ function useToggle(options) {
     },
     [onChange]
   );
-  return (0, import_react24.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
+  return (0, import_react25.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
+}
+
+// src/hooks/useRootColors.ts
+var import_react26 = require("react");
+function useRootColors(colors = []) {
+  const [state, dispatch] = (0, import_react26.useReducer)(rootColorsReducer, {});
+  const handleRefetch = (0, import_react26.useCallback)(() => {
+    return new Promise((resolve) => {
+      dispatch(formatColors(colors));
+      resolve();
+    });
+  }, []);
+  (0, import_react26.useEffect)(() => {
+    if (Object.keys(state).length === colors.length) return;
+    dispatch(formatColors(colors));
+    console.log("updating colors in root hook");
+  }, [colors]);
+  return (0, import_react26.useMemo)(
+    () => ({ colors: state, refetch: handleRefetch }),
+    [state, handleRefetch]
+  );
+}
+function formatColors(colors) {
+  const rootStyles = getComputedStyle(document.body);
+  return colors.reduce(
+    (acc, color) => {
+      const formattedColor = color.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase().replaceAll(".", "-");
+      acc[color] = rootStyles.getPropertyValue(`--cerberus-colors-${formattedColor}`).trim();
+      return acc;
+    },
+    {}
+  );
+}
+function rootColorsReducer(state, action) {
+  return { ...state, ...action };
 }
 
 // src/utils/index.ts
@@ -3223,6 +3249,7 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   useNavMenuContext,
   useNotificationCenter,
   usePromptModal,
+  useRootColors,
   useTabsContext,
   useTabsKeyboardNavigation,
   useTheme,