@cerberus-design/react 0.14.2-next-d5ed509 → 0.14.2-next-81321e7

package/build/legacy/index.cjs

@@ -834,6 +834,7 @@ function IconButton(props) {
 }
 
 // src/components/DatePicker.client.tsx
+var import_react9 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var datePickerStyles2 = (0, import_recipes9.datePicker)();
 function DatePicker(props) {
@@ -908,15 +909,19 @@ function DatePickerInput(props) {
 }
 function RangePickerInput(props) {
   const { invalid, ...fieldStates } = useFieldContext();
+  const { defaultValue, ...nativeProps } = props;
+  const startDate = (0, import_react9.useMemo)(() => defaultValue == null ? void 0 : defaultValue[0], [defaultValue]);
+  const endDate = (0, import_react9.useMemo)(() => defaultValue == null ? void 0 : defaultValue[1], [defaultValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react8.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DatePickerTrigger, {}),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_react8.DatePicker.Input,
       {
-        ...props,
+        ...nativeProps,
         ...fieldStates,
         ...invalid && { "aria-invalid": true },
         "data-range-input": true,
+        defaultValue: startDate,
         className: (0, import_css11.cx)(props.className, datePickerStyles2.input),
         placeholder: props.placeholder ?? "DD MMM YYYY",
         maxLength: 11,
@@ -926,10 +931,11 @@ function RangePickerInput(props) {
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_react8.DatePicker.Input,
       {
-        ...props,
+        ...nativeProps,
         ...fieldStates,
         ...invalid && { "aria-invalid": true },
         "data-range-input": true,
+        defaultValue: endDate,
         "data-range-end-input": true,
         className: (0, import_css11.cx)(props.className, datePickerStyles2.input),
         placeholder: props.placeholder ?? "DD MMM YYYY",
@@ -1003,11 +1009,11 @@ function DatePickerCalendar() {
 
 // src/components/Droppable.tsx
 var import_core = require("@dnd-kit/core");
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function Droppable(props) {
   const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } = props;
-  const uuid = (0, import_react9.useId)();
+  const uuid = (0, import_react10.useId)();
   const { isOver, setNodeRef } = (0, import_core.useDroppable)({
     data,
     disabled,
@@ -1043,14 +1049,14 @@ function FieldMessage(props) {
 }
 
 // src/context/feature-flags.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var FeatureFlagContext = (0, import_react10.createContext)(null);
+var FeatureFlagContext = (0, import_react11.createContext)(null);
 function FeatureFlags(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
 }
 function useFeatureFlags(key) {
-  const context = (0, import_react10.useContext)(FeatureFlagContext);
+  const context = (0, import_react11.useContext)(FeatureFlagContext);
   if (context === null) {
     throw new Error(
       "useFeatureFlag must be used within a FeatureFlags Provider"
@@ -1111,7 +1117,7 @@ function FieldsetLabel(props) {
 }
 
 // src/components/FileStatus.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_recipes13 = require("@cerberus/styled-system/recipes");
 var import_css16 = require("@cerberus/styled-system/css");
 var import_patterns5 = require("@cerberus/styled-system/patterns");
@@ -1161,10 +1167,10 @@ var processStatus = /* @__PURE__ */ ((processStatus2) => {
 })(processStatus || {});
 function FileStatus(props) {
   const { file, now, status, onClick, ...nativeProps } = props;
-  const actionLabel = (0, import_react11.useMemo)(() => getStatusActionLabel(status), [status]);
-  const palette = (0, import_react11.useMemo)(() => getPalette(status), [status]);
-  const modalIconPalette = (0, import_react11.useMemo)(() => getModalIconPalette(status), [status]);
-  const styles = (0, import_react11.useMemo)(() => {
+  const actionLabel = (0, import_react12.useMemo)(() => getStatusActionLabel(status), [status]);
+  const palette = (0, import_react12.useMemo)(() => getPalette(status), [status]);
+  const modalIconPalette = (0, import_react12.useMemo)(() => getModalIconPalette(status), [status]);
+  const styles = (0, import_react12.useMemo)(() => {
     switch (status) {
       case "todo" /* TODO */:
         return (0, import_recipes13.fileStatus)({ status: "todo" });
@@ -1178,7 +1184,7 @@ function FileStatus(props) {
         return (0, import_recipes13.fileStatus)();
     }
   }, [status]);
-  const handleClick = (0, import_react11.useCallback)(
+  const handleClick = (0, import_react12.useCallback)(
     (e) => {
       const actionStatus = getStatusActionLabel(
         status
@@ -1520,18 +1526,18 @@ function Legend(props) {
 }
 
 // src/components/Menu.tsx
-var import_react12 = require("@ark-ui/react");
+var import_react13 = require("@ark-ui/react");
 var import_recipes18 = require("@cerberus/styled-system/recipes");
 var import_css21 = require("@cerberus/styled-system/css");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var menuStyles = (0, import_recipes18.menu)();
-var Menu = import_react12.Menu.Root;
+var Menu = import_react13.Menu.Root;
 function MenuTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react12.Menu.Trigger, { ...props, asChild: true });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react13.Menu.Trigger, { ...props, asChild: true });
 }
 function MenuContent(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react12.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_react12.Menu.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react13.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_react13.Menu.Content,
     {
       ...props,
       className: (0, import_css21.cx)(props.className, menuStyles.content)
@@ -1539,12 +1545,12 @@ function MenuContent(props) {
   ) });
 }
 function MenuItem(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react12.Menu.Item, { ...props, className: (0, import_css21.cx)(props.className, menuStyles.item) });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react13.Menu.Item, { ...props, className: (0, import_css21.cx)(props.className, menuStyles.item) });
 }
-var MenuItemGroup = import_react12.Menu.ItemGroup;
+var MenuItemGroup = import_react13.Menu.ItemGroup;
 function MenuGroupLabel(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_react12.Menu.ItemGroupLabel,
+    import_react13.Menu.ItemGroupLabel,
     {
       ...props,
       className: (0, import_css21.cx)(props.className, menuStyles.itemGroupLabel)
@@ -1553,7 +1559,7 @@ function MenuGroupLabel(props) {
 }
 function MenuSeparator(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_react12.Menu.Separator,
+    import_react13.Menu.Separator,
     {
       ...props,
       className: (0, import_css21.cx)(props.className, menuStyles.separator)
@@ -1564,7 +1570,7 @@ function MenuSeparator(props) {
 // src/components/Modal.tsx
 var import_css22 = require("@cerberus/styled-system/css");
 var import_recipes19 = require("@cerberus/styled-system/recipes");
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function ModalEl(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -1576,7 +1582,7 @@ function ModalEl(props, ref) {
     }
   );
 }
-var Modal = (0, import_react13.forwardRef)(ModalEl);
+var Modal = (0, import_react14.forwardRef)(ModalEl);
 
 // src/components/ModalHeader.tsx
 var import_css23 = require("@cerberus/styled-system/css");
@@ -1616,7 +1622,7 @@ function ModalDescription(props) {
 }
 
 // src/components/NavMenuTrigger.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_css27 = require("@cerberus/styled-system/css");
 var import_recipes22 = require("@cerberus/styled-system/recipes");
 
@@ -1630,17 +1636,17 @@ function createNavTriggerProps(values) {
 
 // src/context/navMenu.tsx
 var import_css26 = require("@cerberus/styled-system/css");
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var NavMenuContext = (0, import_react14.createContext)(null);
+var NavMenuContext = (0, import_react15.createContext)(null);
 function NavMenu(props) {
-  const triggerRef = (0, import_react14.useRef)(null);
-  const menuRef = (0, import_react14.useRef)(null);
-  const [expanded, setExpanded] = (0, import_react14.useState)(false);
-  const handleToggle = (0, import_react14.useCallback)(() => {
+  const triggerRef = (0, import_react15.useRef)(null);
+  const menuRef = (0, import_react15.useRef)(null);
+  const [expanded, setExpanded] = (0, import_react15.useState)(false);
+  const handleToggle = (0, import_react15.useCallback)(() => {
     setExpanded((prev) => !prev);
   }, []);
-  const value = (0, import_react14.useMemo)(
+  const value = (0, import_react15.useMemo)(
     () => ({
       triggerRef,
       menuRef,
@@ -1660,7 +1666,7 @@ function NavMenu(props) {
   ) });
 }
 function useNavMenuContext() {
-  const context = (0, import_react14.useContext)(NavMenuContext);
+  const context = (0, import_react15.useContext)(NavMenuContext);
   if (!context) {
     throw new Error("useNavMenuContext must be used within a NavMenu.");
   }
@@ -1687,7 +1693,7 @@ function NavMenuTrigger(props) {
   });
   const hasAs = Boolean(as);
   const AsSub = as;
-  const handleClick = (0, import_react15.useCallback)(
+  const handleClick = (0, import_react16.useCallback)(
     (e) => {
       if (onClick) return onClick(e);
       onToggle();
@@ -1730,7 +1736,7 @@ function NavMenuTrigger(props) {
 }
 
 // src/components/NavMenuList.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_css28 = require("@cerberus/styled-system/css");
 var import_patterns10 = require("@cerberus/styled-system/patterns");
 var import_jsx_runtime34 = require("react/jsx-runtime");
@@ -1787,7 +1793,7 @@ var navListStyles = (0, import_patterns10.vstack)({
 function NavMenuList(props) {
   const { position, ...nativeProps } = props;
   const { menuRef, expanded } = useNavMenuContext();
-  const locationStyles = (0, import_react16.useMemo)(
+  const locationStyles = (0, import_react17.useMemo)(
     () => getPosition(position ?? "bottom"),
     [position]
   );
@@ -1847,7 +1853,7 @@ function NavMenuLink(props) {
 var import_css30 = require("@cerberus/styled-system/css");
 var import_patterns11 = require("@cerberus/styled-system/patterns");
 var import_recipes23 = require("@cerberus/styled-system/recipes");
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/aria-helpers/trap-focus.aria.ts
 function trapFocus(modalRef) {
@@ -1886,7 +1892,7 @@ function MatchNotificationIcon(props) {
 }
 function Notification(props) {
   const { children, palette, onClose, ...nativeProps } = props;
-  const ref = (0, import_react17.useRef)(null);
+  const ref = (0, import_react18.useRef)(null);
   const onKeyDown = trapFocus(ref);
   const styles = (0, import_recipes23.notification)({ palette });
   const { icons } = useCerberusContext();
@@ -2133,7 +2139,7 @@ var import_css35 = require("@cerberus/styled-system/css");
 // src/context/tabs.tsx
 var import_tabs = require("@ark-ui/react/tabs");
 var import_recipes28 = require("@cerberus/styled-system/recipes");
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/utils/localStorage.ts
 function getLocalStorage(key, defaultValue) {
@@ -2150,18 +2156,18 @@ function setLocalStorage(key, value) {
 
 // src/context/tabs.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var TabsContext = (0, import_react18.createContext)(null);
+var TabsContext = (0, import_react19.createContext)(null);
 function Tabs(props) {
   const { cache, defaultValue, palette, uuid, ...arkProps } = props;
-  const [activeTab, setActiveTab] = (0, import_react18.useState)(
+  const [activeTab, setActiveTab] = (0, import_react19.useState)(
     () => cache ? "" : defaultValue
   );
   const styles = (0, import_recipes28.tabs)({ palette });
-  const cacheKey = (0, import_react18.useMemo)(
+  const cacheKey = (0, import_react19.useMemo)(
     () => uuid ? `cerberus-tabs-${uuid}` : "cerberus-tabs",
     [uuid]
   );
-  const handleValueChange = (0, import_react18.useCallback)(
+  const handleValueChange = (0, import_react19.useCallback)(
     (details) => {
       if (cache) {
         setLocalStorage(cacheKey, details.value);
@@ -2170,13 +2176,13 @@ function Tabs(props) {
     },
     [cache]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (cache && !activeTab) {
       const cachedTab = getLocalStorage(cacheKey, defaultValue ?? "");
       setActiveTab(cachedTab);
     }
   }, [cache, defaultValue, activeTab]);
-  const value = (0, import_react18.useMemo)(
+  const value = (0, import_react19.useMemo)(
     () => ({
       active: activeTab,
       styles
@@ -2197,7 +2203,7 @@ function Tabs(props) {
   ) });
 }
 function useTabsContext() {
-  const context = (0, import_react18.useContext)(TabsContext);
+  const context = (0, import_react19.useContext)(TabsContext);
   if (!context) {
     throw new Error("useTabsContext must be used within a Tabs Provider.");
   }
@@ -2550,26 +2556,26 @@ function Tooltip(props) {
 }
 
 // src/context/confirm-modal.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_css45 = require("@cerberus/styled-system/css");
 var import_patterns15 = require("@cerberus/styled-system/patterns");
 
 // src/hooks/useModal.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 function useModal() {
-  const modalRef = (0, import_react19.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
-  const show = (0, import_react19.useCallback)(() => {
+  const modalRef = (0, import_react20.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
+  const show = (0, import_react20.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.showModal();
     setIsOpen(true);
   }, []);
-  const close = (0, import_react19.useCallback)(() => {
+  const close = (0, import_react20.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.close();
     setIsOpen(false);
   }, []);
-  return (0, import_react19.useMemo)(() => {
+  return (0, import_react20.useMemo)(() => {
     return {
       modalRef,
       show,
@@ -2582,20 +2588,20 @@ function useModal() {
 // src/context/confirm-modal.tsx
 var import_jsx2 = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var ConfirmModalContext = (0, import_react20.createContext)(null);
+var ConfirmModalContext = (0, import_react21.createContext)(null);
 function ConfirmModal(props) {
   const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react20.useRef)(null);
-  const [content, setContent] = (0, import_react20.useState)(null);
+  const resolveRef = (0, import_react21.useRef)(null);
+  const [content, setContent] = (0, import_react21.useState)(null);
   const focusTrap = trapFocus(modalRef);
   const kind = (content == null ? void 0 : content.kind) ?? "non-destructive";
   const { icons } = useCerberusContext();
   const { confirmModal: ConfirmIcon } = icons;
-  const palette = (0, import_react20.useMemo)(
+  const palette = (0, import_react21.useMemo)(
     () => kind === "destructive" ? "danger" : "action",
     [kind]
   );
-  const handleChoice = (0, import_react20.useCallback)(
+  const handleChoice = (0, import_react21.useCallback)(
     (e) => {
       var _a, _b;
       const target = e.currentTarget;
@@ -2607,7 +2613,7 @@ function ConfirmModal(props) {
     },
     [close]
   );
-  const handleShow = (0, import_react20.useCallback)(
+  const handleShow = (0, import_react21.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options });
@@ -2617,7 +2623,7 @@ function ConfirmModal(props) {
     },
     [show]
   );
-  const value = (0, import_react20.useMemo)(
+  const value = (0, import_react21.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -2696,7 +2702,7 @@ function ConfirmModal(props) {
   ] });
 }
 function useConfirmModal() {
-  const context = (0, import_react20.useContext)(ConfirmModalContext);
+  const context = (0, import_react21.useContext)(ConfirmModalContext);
   if (context === null) {
     throw new Error(
       "useConfirmModal must be used within a ConfirmModal Provider"
@@ -2706,21 +2712,21 @@ function useConfirmModal() {
 }
 
 // src/context/cta-modal.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx3 = require("@cerberus/styled-system/jsx");
 var import_css46 = require("@cerberus/styled-system/css");
 var import_jsx4 = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime55 = require("react/jsx-runtime");
-var CTAModalContext = (0, import_react21.createContext)(null);
+var CTAModalContext = (0, import_react22.createContext)(null);
 function CTAModal(props) {
   var _a, _b;
   const { modalRef, show, close } = useModal();
-  const [content, setContent] = (0, import_react21.useState)(null);
+  const [content, setContent] = (0, import_react22.useState)(null);
   const focusTrap = trapFocus(modalRef);
   const confirmIcon = content == null ? void 0 : content.icon;
   const { icons } = useCerberusContext();
   const { close: CloseIcon, confirmModal: FallbackIcon } = icons;
-  const handleShow = (0, import_react21.useCallback)(
+  const handleShow = (0, import_react22.useCallback)(
     (options) => {
       const maxActions = 2;
       if (options.actions.length > maxActions) {
@@ -2733,7 +2739,7 @@ function CTAModal(props) {
     },
     [show]
   );
-  const handleActionClick = (0, import_react21.useCallback)(
+  const handleActionClick = (0, import_react22.useCallback)(
     (event) => {
       const index = event.currentTarget.getAttribute("data-index");
       const action = content == null ? void 0 : content.actions[Number(index)];
@@ -2743,7 +2749,7 @@ function CTAModal(props) {
     },
     [content, close]
   );
-  const value = (0, import_react21.useMemo)(
+  const value = (0, import_react22.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -2805,7 +2811,7 @@ function CTAModal(props) {
   ] });
 }
 function useCTAModal() {
-  const context = (0, import_react21.useContext)(CTAModalContext);
+  const context = (0, import_react22.useContext)(CTAModalContext);
   if (context === null) {
     throw new Error("useCTAModal must be used within a CTAModal Provider");
   }
@@ -2813,7 +2819,7 @@ function useCTAModal() {
 }
 
 // src/context/notification-center.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_patterns16 = require("@cerberus/styled-system/patterns");
 var import_recipes38 = require("@cerberus/styled-system/recipes");
 var import_css47 = require("@cerberus/styled-system/css");
@@ -2850,27 +2856,27 @@ function clearNotificationState(dispatch) {
 
 // src/context/notification-center.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var NotificationsContext = (0, import_react22.createContext)(null);
+var NotificationsContext = (0, import_react23.createContext)(null);
 function NotificationCenter(props) {
-  const [state, dispatch] = (0, import_react22.useReducer)(notificationCenterReducer, []);
+  const [state, dispatch] = (0, import_react23.useReducer)(notificationCenterReducer, []);
   const styles = (0, import_recipes38.notification)();
-  const timeout = (0, import_react22.useMemo)(
+  const timeout = (0, import_react23.useMemo)(
     () => props.duration || 6e3,
     [props.duration]
   );
-  const closeNotification = (0, import_react22.useCallback)(
+  const closeNotification = (0, import_react23.useCallback)(
     (id) => {
       updateNotificationState(dispatch, {
         id,
         state: "closed"
       });
-      setTimeout(() => {
+      window.setTimeout(() => {
         removeNotification(dispatch, id);
       }, 150);
     },
     [dispatch]
   );
-  const handleNotify = (0, import_react22.useCallback)(
+  const handleNotify = (0, import_react23.useCallback)(
     (options) => {
       const id = `${options.palette}:${state.length + 1}`;
       addNotification(dispatch, {
@@ -2878,26 +2884,26 @@ function NotificationCenter(props) {
         id,
         state: "open"
       });
-      setTimeout(() => {
+      window.setTimeout(() => {
         closeNotification(id);
       }, timeout);
     },
     [dispatch, state, timeout, closeNotification]
   );
-  const handleClose = (0, import_react22.useCallback)(
+  const handleClose = (0, import_react23.useCallback)(
     (e) => {
       const target = e.currentTarget;
       closeNotification(target.value);
     },
     [closeNotification]
   );
-  const handleCloseAll = (0, import_react22.useCallback)(() => {
+  const handleCloseAll = (0, import_react23.useCallback)(() => {
     state.forEach((item) => {
       if (item.onClose) item.onClose();
     });
     clearNotificationState(dispatch);
   }, [state, dispatch]);
-  const value = (0, import_react22.useMemo)(
+  const value = (0, import_react23.useMemo)(
     () => ({
       notify: handleNotify
     }),
@@ -2944,7 +2950,7 @@ function NotificationCenter(props) {
 }
 function MatchNotification(props) {
   const { palette, id, onClose, heading, description, open } = props;
-  const sharedProps = (0, import_react22.useMemo)(
+  const sharedProps = (0, import_react23.useMemo)(
     () => ({
       id,
       open: true,
@@ -2978,7 +2984,7 @@ function MatchNotification(props) {
   }
 }
 function useNotificationCenter() {
-  const context = (0, import_react22.useContext)(NotificationsContext);
+  const context = (0, import_react23.useContext)(NotificationsContext);
   if (!context) {
     throw new Error(
       "useNotificationCenter must be used within a NotificationsProvider"
@@ -2988,34 +2994,34 @@ function useNotificationCenter() {
 }
 
 // src/context/prompt-modal.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_css48 = require("@cerberus/styled-system/css");
 var import_patterns17 = require("@cerberus/styled-system/patterns");
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var PromptModalContext = (0, import_react23.createContext)(null);
+var PromptModalContext = (0, import_react24.createContext)(null);
 function PromptModal(props) {
   const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react23.useRef)(null);
-  const [content, setContent] = (0, import_react23.useState)(null);
-  const [inputValue, setInputValue] = (0, import_react23.useState)("");
+  const resolveRef = (0, import_react24.useRef)(null);
+  const [content, setContent] = (0, import_react24.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react24.useState)("");
   const focusTrap = trapFocus(modalRef);
   const { icons } = useCerberusContext();
   const { promptModal: PromptIcon } = icons;
-  const isValid = (0, import_react23.useMemo)(
+  const isValid = (0, import_react24.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react23.useMemo)(
+  const palette = (0, import_react24.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react23.useCallback)(
+  const handleChange = (0, import_react24.useCallback)(
     (e) => {
       setInputValue(e.currentTarget.value);
     },
     [content]
   );
-  const handleChoice = (0, import_react23.useCallback)(
+  const handleChoice = (0, import_react24.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
@@ -3026,7 +3032,7 @@ function PromptModal(props) {
     },
     [inputValue, close]
   );
-  const handleShow = (0, import_react23.useCallback)(
+  const handleShow = (0, import_react24.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
@@ -3036,7 +3042,7 @@ function PromptModal(props) {
     },
     [show]
   );
-  const value = (0, import_react23.useMemo)(
+  const value = (0, import_react24.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -3170,7 +3176,7 @@ function PromptModal(props) {
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react23.useContext)(PromptModalContext);
+  const context = (0, import_react24.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }
@@ -3178,50 +3184,50 @@ function usePromptModal() {
 }
 
 // src/context/theme.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/hooks/useTheme.ts
-var import_react24 = require("react");
+var import_react25 = 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_react24.useState)(defaultTheme);
-  const [colorMode, setColorMode] = (0, import_react24.useState)(defaultColorMode);
-  const handleThemeChange = (0, import_react24.useCallback)(
+  const [theme, setTheme] = (0, import_react25.useState)(defaultTheme);
+  const [colorMode, setColorMode] = (0, import_react25.useState)(defaultColorMode);
+  const handleThemeChange = (0, import_react25.useCallback)(
     (newTheme) => {
       setTheme(newTheme);
       updateTheme == null ? void 0 : updateTheme(newTheme);
     },
     [updateTheme]
   );
-  const handleColorModeChange = (0, import_react24.useCallback)(
+  const handleColorModeChange = (0, import_react25.useCallback)(
     (newMode) => {
       setColorMode(newMode);
       updateMode == null ? void 0 : updateMode(newMode);
     },
     [updateMode]
   );
-  (0, import_react24.useLayoutEffect)(() => {
+  (0, import_react25.useLayoutEffect)(() => {
     const theme2 = localStorage.getItem(THEME_KEY);
     if (theme2) {
       setTheme(theme2);
     }
   }, []);
-  (0, import_react24.useLayoutEffect)(() => {
+  (0, import_react25.useLayoutEffect)(() => {
     const mode = localStorage.getItem(MODE_KEY);
     if (mode) {
       setColorMode(mode);
     }
   }, []);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const root = document.documentElement;
     root.dataset.pandaTheme = theme;
     if (cache) {
       localStorage.setItem(THEME_KEY, theme);
     }
   }, [theme, cache]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const root = document.documentElement;
     if (colorMode === "system") {
       root.dataset.colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -3232,7 +3238,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
       localStorage.setItem(MODE_KEY, colorMode);
     }
   }, [colorMode, cache]);
-  return (0, import_react24.useMemo)(
+  return (0, import_react25.useMemo)(
     () => ({
       theme,
       mode: colorMode,
@@ -3245,7 +3251,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 
 // src/context/theme.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react25.createContext)(
+var ThemeContext = (0, import_react26.createContext)(
   null
 );
 function ThemeProvider(props) {
@@ -3257,7 +3263,7 @@ function ThemeProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
-  const context = (0, import_react25.useContext)(ThemeContext);
+  const context = (0, import_react26.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useThemeContext must be used within a ThemeProvider");
   }
@@ -3265,13 +3271,13 @@ function useThemeContext() {
 }
 
 // src/hooks/useDate.ts
-var import_react26 = require("react");
+var import_react27 = 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_react26.useState)(initialValue);
-  const handleChange = (0, import_react26.useCallback)(
+  const [value, setValue] = (0, import_react27.useState)(initialValue);
+  const handleChange = (0, import_react27.useCallback)(
     (e) => {
       const newValue = formatMilitaryDate(e.currentTarget.value);
       if (onChange) onChange(e);
@@ -3279,7 +3285,7 @@ function useDate(options) {
     },
     [onChange]
   );
-  return (0, import_react26.useMemo)(
+  return (0, import_react27.useMemo)(
     () => ({
       format,
       value,
@@ -3358,11 +3364,11 @@ var MONTHS = [
 ];
 
 // src/hooks/useToggle.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 function useToggle(options) {
-  const [checked, setChecked] = (0, import_react27.useState)((options == null ? void 0 : options.checked) ?? "");
+  const [checked, setChecked] = (0, import_react28.useState)((options == null ? void 0 : options.checked) ?? "");
   const onChange = options == null ? void 0 : options.onChange;
-  const handleChange = (0, import_react27.useCallback)(
+  const handleChange = (0, import_react28.useCallback)(
     (e) => {
       const target = e.currentTarget;
       setChecked((prev) => {
@@ -3372,25 +3378,25 @@ function useToggle(options) {
     },
     [onChange]
   );
-  return (0, import_react27.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
+  return (0, import_react28.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
 }
 
 // src/hooks/useRootColors.ts
-var import_react28 = require("react");
+var import_react29 = require("react");
 function useRootColors(colors = []) {
-  const [state, dispatch] = (0, import_react28.useReducer)(rootColorsReducer, {});
-  const handleRefetch = (0, import_react28.useCallback)(() => {
+  const [state, dispatch] = (0, import_react29.useReducer)(rootColorsReducer, {});
+  const handleRefetch = (0, import_react29.useCallback)(() => {
     return new Promise((resolve) => {
       dispatch(formatColors(colors));
       resolve();
     });
   }, []);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (Object.keys(state).length === colors.length) return;
     dispatch(formatColors(colors));
     console.log("updating colors in root hook");
   }, [colors]);
-  return (0, import_react28.useMemo)(
+  return (0, import_react29.useMemo)(
     () => ({ colors: state, refetch: handleRefetch }),
     [state, handleRefetch]
   );