@cerberus-design/react 0.13.2-next-61259ca → 0.14.0-next-01a1b5e

package/build/legacy/index.cjs

@@ -99,11 +99,13 @@ __export(src_exports, {
   Spinner: () => Spinner,
   THEME_KEY: () => THEME_KEY,
   Tab: () => Tab,
+  TabIndicator: () => TabIndicator,
   TabList: () => TabList,
   TabPanel: () => TabPanel,
   Table: () => Table,
   Tabs: () => Tabs,
   TabsContext: () => TabsContext,
+  TabsList: () => TabsList,
   Tag: () => Tag,
   Tbody: () => Tbody,
   Td: () => Td,
@@ -121,8 +123,10 @@ __export(src_exports, {
   formatMilitaryDate: () => formatMilitaryDate,
   formatMilitaryToISO: () => formatMilitaryToISO,
   formatNotifyCount: () => formatNotifyCount,
+  getLocalStorage: () => getLocalStorage,
   getPosition: () => getPosition,
   processStatus: () => processStatus,
+  setLocalStorage: () => setLocalStorage,
   trapFocus: () => trapFocus,
   useCTAModal: () => useCTAModal,
   useConfirmModal: () => useConfirmModal,
@@ -135,7 +139,6 @@ __export(src_exports, {
   usePromptModal: () => usePromptModal,
   useRootColors: () => useRootColors,
   useTabsContext: () => useTabsContext,
-  useTabsKeyboardNavigation: () => useTabsKeyboardNavigation,
   useTheme: () => useTheme,
   useThemeContext: () => useThemeContext,
   useToggle: () => useToggle
@@ -2256,45 +2259,75 @@ function Spinner(props) {
   );
 }
 
-// src/components/Tab.tsx
-var import_react18 = require("react");
+// src/components/Tabs.client.tsx
+var import_tabs2 = require("@ark-ui/react/tabs");
+var import_css34 = require("@cerberus/styled-system/css");
 
 // src/context/tabs.tsx
+var import_tabs = require("@ark-ui/react/tabs");
 var import_recipes27 = require("@cerberus/styled-system/recipes");
 var import_react16 = require("react");
+
+// src/utils/localStorage.ts
+function getLocalStorage(key, defaultValue) {
+  const value = window.localStorage.getItem(key);
+  if (value) {
+    return value;
+  }
+  return defaultValue;
+}
+function setLocalStorage(key, value) {
+  const stringValue = typeof value === "string" ? value : JSON.stringify(value);
+  window.localStorage.setItem(key, stringValue);
+}
+
+// src/context/tabs.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var TabsContext = (0, import_react16.createContext)(null);
 function Tabs(props) {
-  const { cache, active, id, palette } = props;
-  const [activeTab, setActiveTab] = (0, import_react16.useState)(() => cache ? "" : active ?? "");
-  const tabsList = (0, import_react16.useRef)([]);
-  const uuid = (0, import_react16.useMemo)(() => {
-    return id ? `cerberus-tabs-${id}` : "cerberus-tabs";
-  }, [id]);
+  const { cache, defaultValue, palette, uuid, ...arkProps } = props;
+  const [activeTab, setActiveTab] = (0, import_react16.useState)(
+    () => cache ? "" : defaultValue
+  );
+  const styles = (0, import_recipes27.tabs)({ palette });
+  const cacheKey = (0, import_react16.useMemo)(
+    () => uuid ? `cerberus-tabs-${uuid}` : "cerberus-tabs",
+    [uuid]
+  );
+  const handleValueChange = (0, import_react16.useCallback)(
+    (details) => {
+      if (cache) {
+        setLocalStorage(cacheKey, details.value);
+      }
+      setActiveTab(details.value);
+    },
+    [cache]
+  );
+  (0, import_react16.useEffect)(() => {
+    if (cache && !activeTab) {
+      const cachedTab = getLocalStorage(cacheKey, defaultValue ?? "");
+      setActiveTab(cachedTab);
+    }
+  }, [cache, defaultValue, activeTab]);
   const value = (0, import_react16.useMemo)(
     () => ({
-      tabs: tabsList,
-      id: uuid,
       active: activeTab,
-      styles: (0, import_recipes27.tabs)({ palette }),
-      onTabUpdate: setActiveTab
+      styles
     }),
-    [activeTab, setActiveTab, palette, uuid, tabsList]
+    [activeTab, palette, styles]
   );
-  (0, import_react16.useEffect)(() => {
-    if (cache) {
-      const cachedTab = window.localStorage.getItem(uuid);
-      setActiveTab(
-        cache ? cachedTab || (props.active ?? "") : props.active ?? ""
-      );
-    }
-  }, [cache, active, uuid]);
-  (0, import_react16.useEffect)(() => {
-    if (cache && activeTab) {
-      window.localStorage.setItem(uuid, activeTab);
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabsContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_tabs.Tabs.Root,
+    {
+      ...arkProps,
+      "aria-busy": !activeTab,
+      className: styles.root,
+      defaultValue,
+      onValueChange: handleValueChange,
+      value: activeTab,
+      children: props.children
     }
-  }, [activeTab, cache]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabsContext.Provider, { value, children: props.children });
+  ) });
 }
 function useTabsContext() {
   const context = (0, import_react16.useContext)(TabsContext);
@@ -2304,197 +2337,110 @@ function useTabsContext() {
   return context;
 }
 
-// src/components/Tab.tsx
-var import_css34 = require("@cerberus/styled-system/css");
-
-// src/aria-helpers/tabs.aria.ts
-var import_react17 = require("react");
-function getNextIndex(index, length) {
-  return index === length - 1 ? 0 : index + 1;
-}
-function getPrevIndex(index, length) {
-  return index === 0 ? length - 1 : index - 1;
-}
-function useTabsKeyboardNavigation() {
-  const { tabs: tabs2 } = useTabsContext();
-  const [activeTab, setActiveTab] = (0, import_react17.useState)(-1);
-  (0, import_react17.useEffect)(() => {
-    const handleKeyDown = (event) => {
-      const index = activeTab === -1 ? tabs2.current.findIndex((tab) => tab.ariaSelected === "true") : activeTab;
-      const nextIndex = getNextIndex(index, tabs2.current.length);
-      const prevIndex = getPrevIndex(index, tabs2.current.length);
-      if (index === -1) return;
-      switch (event.key) {
-        case "ArrowLeft":
-          event.preventDefault();
-          setActiveTab(prevIndex);
-          tabs2.current[prevIndex].focus();
-          break;
-        case "ArrowRight":
-          event.preventDefault();
-          setActiveTab(nextIndex);
-          tabs2.current[nextIndex].focus();
-          break;
-        case "Home":
-          event.preventDefault();
-          setActiveTab(0);
-          tabs2.current[0].focus();
-          break;
-        case "End":
-          event.preventDefault();
-          setActiveTab(tabs2.current.length - 1);
-          tabs2.current[tabs2.current.length - 1].focus();
-          break;
-        default:
-          break;
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [activeTab, tabs2.current]);
-  return {
-    ref: (tab) => {
-      if (tab && !tabs2.current.includes(tab)) {
-        tabs2.current.push(tab);
-      }
+// src/components/Tabs.client.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function TabsList(props) {
+  const { children, ...tabsProps } = props;
+  const { styles } = useTabsContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    import_tabs2.Tabs.List,
+    {
+      ...tabsProps,
+      className: (0, import_css34.cx)(tabsProps.className, styles.list),
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TabIndicator, {})
+      ]
     }
-  };
+  );
 }
-
-// src/components/Tab.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var TabList = TabsList;
 function Tab(props) {
-  const { value, ...nativeProps } = props;
-  const { active, onTabUpdate, styles } = useTabsContext();
-  const [isPending, startTransition] = (0, import_react18.useTransition)();
-  const { ref } = useTabsKeyboardNavigation();
-  const isActive = (0, import_react18.useMemo)(() => active === value, [active, value]);
-  function handleClick(e) {
-    var _a;
-    (_a = props.onClick) == null ? void 0 : _a.call(props, e);
-    startTransition(() => onTabUpdate(e.currentTarget.value));
-  }
+  const { styles } = useTabsContext();
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    "button",
+    import_tabs2.Tabs.Trigger,
     {
-      ...nativeProps,
-      ...!isActive && { tabIndex: -1 },
-      "aria-controls": `panel:${value}`,
-      "aria-busy": isPending,
-      "aria-selected": isActive,
-      id: `tab:${value}`,
-      className: (0, import_css34.cx)(nativeProps.className, styles.tab),
-      onClick: handleClick,
-      role: "tab",
-      ref,
-      value
+      ...props,
+      className: (0, import_css34.cx)(props.className, styles.trigger)
     }
   );
 }
-
-// src/components/TabList.tsx
-var import_css35 = require("@cerberus/styled-system/css");
-var import_patterns14 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-function TabList(props) {
-  const { description, ...nativeProps } = props;
-  const { id, styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    "div",
+function TabIndicator(props) {
+  const { styles } = useTabsContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    import_tabs2.Tabs.Indicator,
     {
-      ...nativeProps,
-      "aria-label": description,
-      className: (0, import_css35.cx)(
-        nativeProps.className,
-        (0, import_patterns14.hstack)({
-          gap: "0"
-        }),
-        styles.tabList
-      ),
-      id: id ?? nativeProps.id,
-      role: "tablist"
+      ...props,
+      className: (0, import_css34.cx)(props.className, styles.indicator)
     }
   );
 }
-
-// src/components/TabPanel.tsx
-var import_css36 = require("@cerberus/styled-system/css");
-var import_react19 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
 function TabPanel(props) {
-  const { tab, ...nativeProps } = props;
-  const { active, styles } = useTabsContext();
-  const isActive = (0, import_react19.useMemo)(() => active === tab, [active, tab]);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Show, { when: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    "div",
+  const { styles } = useTabsContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    import_tabs2.Tabs.Content,
     {
-      ...nativeProps,
-      ...isActive && { tabIndex: 0 },
-      "aria-labelledby": `tab:${tab}`,
-      className: (0, import_css36.cx)(nativeProps.className, styles.tabPanel),
-      id: `panel:${tab}`,
-      role: "tabpanel"
+      ...props,
+      className: (0, import_css34.cx)(props.className, styles.content)
     }
-  ) });
+  );
 }
 
 // src/components/Table.tsx
-var import_css37 = require("@cerberus/styled-system/css");
+var import_css35 = require("@cerberus/styled-system/css");
 var import_recipes28 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Table(props) {
   const { caption, children, ...nativeProps } = props;
   const styles = (0, import_recipes28.table)();
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "table",
     {
       ...nativeProps,
-      className: (0, import_css37.cx)(nativeProps.className, styles.table),
+      className: (0, import_css35.cx)(nativeProps.className, styles.table),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("caption", { className: styles.caption, children: caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("caption", { className: styles.caption, children: caption }),
         children
       ]
     }
   ) });
 }
 function Tr(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("tr", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tr", { ...props });
 }
 
 // src/components/Thead.tsx
-var import_css38 = require("@cerberus/styled-system/css");
+var import_css36 = require("@cerberus/styled-system/css");
 var import_recipes29 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Thead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("thead", { ...props, className: (0, import_css38.cx)(props.className, (0, import_recipes29.thead)()) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("thead", { ...props, className: (0, import_css36.cx)(props.className, (0, import_recipes29.thead)()) });
 }
 
 // src/components/Th.tsx
-var import_css39 = require("@cerberus/styled-system/css");
+var import_css37 = require("@cerberus/styled-system/css");
 var import_recipes30 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function Th(props) {
   const { size, onClick, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     Show,
     {
       when: Boolean(onClick),
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "th",
         {
           ...nativeProps,
-          className: (0, import_css39.cx)(nativeProps.className, (0, import_recipes30.th)({ size }))
+          className: (0, import_css37.cx)(nativeProps.className, (0, import_recipes30.th)({ size }))
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "button",
         {
-          className: (0, import_css39.cx)(
+          className: (0, import_css37.cx)(
             nativeProps.className,
             (0, import_recipes30.th)({ size }),
-            (0, import_css39.css)({
+            (0, import_css37.css)({
               alignItems: "center",
               display: "inline-flex",
               justifyContent: "space-between",
@@ -2514,16 +2460,16 @@ function Th(props) {
 }
 
 // src/components/Td.tsx
-var import_css40 = require("@cerberus/styled-system/css");
+var import_css38 = require("@cerberus/styled-system/css");
 var import_recipes31 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Td(props) {
   const { size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "td",
     {
       ...nativeProps,
-      className: (0, import_css40.cx)(
+      className: (0, import_css38.cx)(
         nativeProps.className,
         (0, import_recipes31.td)({
           size
@@ -2535,15 +2481,15 @@ function Td(props) {
 
 // src/components/Tbody.tsx
 var import_recipes32 = require("@cerberus/styled-system/recipes");
-var import_css41 = require("@cerberus/styled-system/css");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_css39 = require("@cerberus/styled-system/css");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function Tbody(props) {
   const { decoration, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "tbody",
     {
       ...nativeProps,
-      className: (0, import_css41.cx)(
+      className: (0, import_css39.cx)(
         nativeProps.className,
         (0, import_recipes32.tbody)({
           decoration
@@ -2554,9 +2500,9 @@ function Tbody(props) {
 }
 
 // src/components/Tag.tsx
-var import_css42 = require("@cerberus/styled-system/css");
+var import_css40 = require("@cerberus/styled-system/css");
 var import_recipes33 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function Tag(props) {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
   const palette = (props == null ? void 0 : props.palette) ?? "page";
@@ -2564,11 +2510,11 @@ function Tag(props) {
   const shape = isClosable ? "pill" : initShape;
   const closableStyles = isClosable ? closableCss : "";
   const { close: Close2 } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "span",
     {
       ...nativeProps,
-      className: (0, import_css42.cx)(
+      className: (0, import_css40.cx)(
         nativeProps.className,
         (0, import_recipes33.tag)({
           gradient,
@@ -2580,7 +2526,7 @@ function Tag(props) {
       ),
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "button",
           {
             "aria-label": "Close",
@@ -2590,14 +2536,14 @@ function Tag(props) {
               size: "sm"
             }),
             onClick,
-            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Close2, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Close2, {})
           }
         ) })
       ]
     }
   );
 }
-var closableCss = (0, import_css42.css)({
+var closableCss = (0, import_css40.css)({
   bgColor: "action.bg.active",
   color: "action.text.initial",
   paddingInlineEnd: "0"
@@ -2605,53 +2551,53 @@ var closableCss = (0, import_css42.css)({
 
 // src/components/Text.tsx
 var import_jsx = require("@cerberus-design/styled-system/jsx");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Text(props) {
   const { as = "p", ...pandaJSXProps } = props;
   switch (as) {
     case "h1":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H1, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H1, { ...pandaJSXProps });
     case "h2":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H2, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H2, { ...pandaJSXProps });
     case "h3":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H3, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H3, { ...pandaJSXProps });
     case "h4":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H4, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H4, { ...pandaJSXProps });
     case "h5":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H5, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H5, { ...pandaJSXProps });
     case "h6":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H6, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H6, { ...pandaJSXProps });
     case "strong":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.Strong, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.Strong, { ...pandaJSXProps });
     case "em":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.Em, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.Em, { ...pandaJSXProps });
     case "small":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.Small, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.Small, { ...pandaJSXProps });
     case "span":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.Span, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.Span, { ...pandaJSXProps });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.P, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.P, { ...pandaJSXProps });
   }
 }
 
 // src/components/Textarea.tsx
-var import_css43 = require("@cerberus/styled-system/css");
+var import_css41 = require("@cerberus/styled-system/css");
 var import_recipes34 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Textarea(props) {
   const { describedBy, ...nativeProps } = props;
   const { invalid, ...fieldState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "textarea",
     {
       ...nativeProps,
       ...fieldState,
       ...describedBy && { "aria-describedby": describedBy },
       ...invalid && { "aria-invalid": true },
-      className: (0, import_css43.cx)(
+      className: (0, import_css41.cx)(
         props.className,
         (0, import_recipes34.input)().input,
-        (0, import_css43.css)({
+        (0, import_css41.css)({
           pxi: "2",
           py: "2",
           resize: "vertical"
@@ -2663,43 +2609,43 @@ function Textarea(props) {
 }
 
 // src/components/Toggle.tsx
-var import_css44 = require("@cerberus/styled-system/css");
-var import_patterns15 = require("@cerberus/styled-system/patterns");
+var import_css42 = require("@cerberus/styled-system/css");
+var import_patterns14 = require("@cerberus/styled-system/patterns");
 var import_recipes35 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function Toggle(props) {
   const { size, describedBy, ...nativeProps } = props;
   const styles = (0, import_recipes35.toggle)({ size });
   const { invalid, ...state } = useFieldContext();
   const Icon = $cerberusIcons.toggleChecked;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "span",
     {
-      className: (0, import_css44.cx)("group", styles.track, (0, import_patterns15.hstack)()),
+      className: (0, import_css42.cx)("group", styles.track, (0, import_patterns14.hstack)()),
       "data-checked": props.checked || props.defaultChecked,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "input",
           {
             ...nativeProps,
             ...state,
             ...describedBy && { "aria-describedby": describedBy },
             ...invalid && { "aria-invalid": true },
-            className: (0, import_css44.cx)("peer", styles.input),
+            className: (0, import_css42.cx)("peer", styles.input),
             role: "switch",
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "span",
           {
-            className: (0, import_css44.cx)(
+            className: (0, import_css42.cx)(
               styles.thumb,
-              (0, import_patterns15.vstack)({
+              (0, import_patterns14.vstack)({
                 justify: "center"
               })
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, {})
           }
         )
       ]
@@ -2709,24 +2655,24 @@ function Toggle(props) {
 
 // src/components/Tooltip.tsx
 var import_tooltip = require("@ark-ui/react/tooltip");
-var import_css45 = require("@cerberus/styled-system/css");
+var import_css43 = require("@cerberus/styled-system/css");
 var import_recipes36 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function Tooltip(props) {
   const { content, children, asChild, ...nativeProps } = props;
   const styles = (0, import_recipes36.tooltip)();
   const position = {
     placement: props.position || "top"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, asChild, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, asChild, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
       import_tooltip.Tooltip.Content,
       {
         ...nativeProps,
-        className: (0, import_css45.cx)(nativeProps.className, styles.content),
+        className: (0, import_css43.cx)(nativeProps.className, styles.content),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
           content
         ]
       }
@@ -2735,26 +2681,26 @@ function Tooltip(props) {
 }
 
 // src/context/confirm-modal.tsx
-var import_react21 = require("react");
-var import_css46 = require("@cerberus/styled-system/css");
-var import_patterns16 = require("@cerberus/styled-system/patterns");
+var import_react18 = require("react");
+var import_css44 = require("@cerberus/styled-system/css");
+var import_patterns15 = require("@cerberus/styled-system/patterns");
 
 // src/hooks/useModal.ts
-var import_react20 = require("react");
+var import_react17 = require("react");
 function useModal() {
-  const modalRef = (0, import_react20.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
-  const show = (0, import_react20.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_react20.useCallback)(() => {
+  const close = (0, import_react17.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.close();
     setIsOpen(false);
   }, []);
-  return (0, import_react20.useMemo)(() => {
+  return (0, import_react17.useMemo)(() => {
     return {
       modalRef,
       show,
@@ -2766,20 +2712,20 @@ function useModal() {
 
 // src/context/confirm-modal.tsx
 var import_jsx2 = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var ConfirmModalContext = (0, import_react21.createContext)(null);
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var ConfirmModalContext = (0, import_react18.createContext)(null);
 function ConfirmModal(props) {
   const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react21.useRef)(null);
-  const [content, setContent] = (0, import_react21.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 kind = (content == null ? void 0 : content.kind) ?? "non-destructive";
-  const palette = (0, import_react21.useMemo)(
+  const palette = (0, import_react18.useMemo)(
     () => kind === "destructive" ? "danger" : "action",
     [kind]
   );
-  const handleChoice = (0, import_react21.useCallback)(
+  const handleChoice = (0, import_react18.useCallback)(
     (e) => {
       var _a, _b;
       const target = e.currentTarget;
@@ -2791,7 +2737,7 @@ function ConfirmModal(props) {
     },
     [close]
   );
-  const handleShow = (0, import_react21.useCallback)(
+  const handleShow = (0, import_react18.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options });
@@ -2801,42 +2747,42 @@ function ConfirmModal(props) {
     },
     [show]
   );
-  const value = (0, import_react21.useMemo)(
+  const value = (0, import_react18.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(ConfirmModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "div",
           {
-            className: (0, import_patterns16.hstack)({
+            className: (0, import_patterns15.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2844,15 +2790,15 @@ function ConfirmModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx2.HStack, { gap: "4", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx2.HStack, { gap: "4", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Button,
           {
             autoFocus: true,
-            className: (0, import_css46.css)({
+            className: (0, import_css44.css)({
               w: "1/2"
             }),
             name: "confirm",
@@ -2862,10 +2808,10 @@ function ConfirmModal(props) {
             children: content == null ? void 0 : content.actionText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Button,
           {
-            className: (0, import_css46.css)({
+            className: (0, import_css44.css)({
               w: "1/2"
             }),
             name: "cancel",
@@ -2880,7 +2826,7 @@ function ConfirmModal(props) {
   ] });
 }
 function useConfirmModal() {
-  const context = (0, import_react21.useContext)(ConfirmModalContext);
+  const context = (0, import_react18.useContext)(ConfirmModalContext);
   if (context === null) {
     throw new Error(
       "useConfirmModal must be used within a ConfirmModal Provider"
@@ -2890,21 +2836,21 @@ function useConfirmModal() {
 }
 
 // src/context/cta-modal.tsx
-var import_react22 = require("react");
+var import_react19 = require("react");
 var import_jsx3 = require("@cerberus/styled-system/jsx");
-var import_css47 = require("@cerberus/styled-system/css");
+var import_css45 = require("@cerberus/styled-system/css");
 var import_jsx4 = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var CTAModalContext = (0, import_react22.createContext)(null);
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var CTAModalContext = (0, import_react19.createContext)(null);
 function CTAModal(props) {
   var _a, _b;
   const { modalRef, show, close } = useModal();
-  const [content, setContent] = (0, import_react22.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_react22.useCallback)(
+  const handleShow = (0, import_react19.useCallback)(
     (options) => {
       const maxActions = 2;
       if (options.actions.length > maxActions) {
@@ -2917,7 +2863,7 @@ function CTAModal(props) {
     },
     [show]
   );
-  const handleActionClick = (0, import_react22.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)];
@@ -2927,54 +2873,54 @@ function CTAModal(props) {
     },
     [content, close]
   );
-  const value = (0, import_react22.useMemo)(
+  const value = (0, import_react19.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(CTAModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(CTAModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "span",
         {
-          className: (0, import_css47.css)({
+          className: (0, import_css45.css)({
             padding: "md",
             position: "absolute",
             right: 0,
             top: 0,
             zIndex: "decorator"
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CloseIcon, {}) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CloseIcon, {}) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx4.VStack, { gap: "xl", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx4.VStack, { gap: "lg", w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx4.VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx4.VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             Avatar,
             {
               ariaLabel: "",
               gradient: "charon-light",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 Show,
                 {
                   when: Boolean(confirmIcon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FallbackIcon, { size: 24 }),
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FallbackIcon, { size: 24 }),
                   children: confirmIcon
                 }
               ),
               src: ""
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_jsx3.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx3.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(
           Button,
           {
             "data-index": index,
-            className: (0, import_css47.css)({
+            className: (0, import_css45.css)({
               w: "1/2"
             }),
             onClick: handleActionClick,
@@ -2989,7 +2935,7 @@ function CTAModal(props) {
   ] });
 }
 function useCTAModal() {
-  const context = (0, import_react22.useContext)(CTAModalContext);
+  const context = (0, import_react19.useContext)(CTAModalContext);
   if (context === null) {
     throw new Error("useCTAModal must be used within a CTAModal Provider");
   }
@@ -2997,22 +2943,22 @@ function useCTAModal() {
 }
 
 // src/context/notification-center.tsx
-var import_react23 = require("react");
-var import_patterns17 = require("@cerberus/styled-system/patterns");
+var import_react20 = require("react");
+var import_patterns16 = require("@cerberus/styled-system/patterns");
 var import_recipes37 = require("@cerberus/styled-system/recipes");
-var import_css48 = require("@cerberus/styled-system/css");
-var import_jsx_runtime57 = require("react/jsx-runtime");
-var NotificationsContext = (0, import_react23.createContext)(null);
+var import_css46 = require("@cerberus/styled-system/css");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var NotificationsContext = (0, import_react20.createContext)(null);
 function NotificationCenter(props) {
-  const [activeNotifications, setActiveNotifications] = (0, import_react23.useState)([]);
+  const [activeNotifications, setActiveNotifications] = (0, import_react20.useState)([]);
   const styles = (0, import_recipes37.notification)();
-  const handleNotify = (0, import_react23.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_react23.useCallback)((e) => {
+  const handleClose = (0, import_react20.useCallback)((e) => {
     const target = e.currentTarget;
     setActiveNotifications((prev) => {
       const item = prev.find((option) => option.id === target.value);
@@ -3020,7 +2966,7 @@ function NotificationCenter(props) {
       return prev.filter((option) => option.id !== target.value);
     });
   }, []);
-  const handleCloseAll = (0, import_react23.useCallback)(() => {
+  const handleCloseAll = (0, import_react20.useCallback)(() => {
     setActiveNotifications((prev) => {
       prev.forEach((item) => {
         if (item.onClose) item.onClose();
@@ -3028,19 +2974,19 @@ function NotificationCenter(props) {
       return [];
     });
   }, []);
-  const value = (0, import_react23.useMemo)(
+  const value = (0, import_react20.useMemo)(
     () => ({
       notify: handleNotify
     }),
     [handleNotify]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(NotificationsContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(NotificationsContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: styles.center, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: styles.center, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         Button,
         {
-          className: (0, import_css48.cx)(styles.closeAll, (0, import_patterns17.animateIn)()),
+          className: (0, import_css46.cx)(styles.closeAll, (0, import_patterns16.animateIn)()),
           onClick: handleCloseAll,
           palette: "action",
           shape: "rounded",
@@ -3049,17 +2995,17 @@ function NotificationCenter(props) {
           children: "Close all"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         "div",
         {
-          className: (0, import_patterns17.vstack)({
+          className: (0, import_patterns16.vstack)({
             alignItems: "flex-end",
             gap: "4"
           }),
           style: {
             alignItems: "flex-end"
           },
-          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             MatchNotification,
             {
               ...option,
@@ -3076,7 +3022,7 @@ function MatchNotification(props) {
   const { palette, id, onClose, heading, description } = props;
   switch (palette) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
         Notification,
         {
           id,
@@ -3084,14 +3030,14 @@ function MatchNotification(props) {
           open: true,
           palette: "success",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(NotificationHeading, { palette: "success", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(NotificationDescription, { palette: "success", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationHeading, { palette: "success", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationDescription, { palette: "success", children: description })
           ]
         },
         id
       );
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
         Notification,
         {
           id,
@@ -3099,27 +3045,27 @@ function MatchNotification(props) {
           open: true,
           palette: "warning",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(NotificationHeading, { palette: "warning", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(NotificationDescription, { palette: "warning", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationHeading, { palette: "warning", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationDescription, { palette: "warning", children: description })
           ]
         },
         id
       );
     case "danger":
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(NotificationHeading, { palette: "danger", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(NotificationDescription, { palette: "danger", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationHeading, { palette: "danger", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationDescription, { palette: "danger", children: description })
       ] }, id);
     case "info":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(NotificationHeading, { palette: "info", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(NotificationDescription, { palette: "info", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationHeading, { palette: "info", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationDescription, { palette: "info", children: description })
       ] }, id);
   }
 }
 function useNotificationCenter() {
-  const context = (0, import_react23.useContext)(NotificationsContext);
+  const context = (0, import_react20.useContext)(NotificationsContext);
   if (!context) {
     throw new Error(
       "useNotificationCenter must be used within a NotificationsProvider"
@@ -3129,33 +3075,33 @@ function useNotificationCenter() {
 }
 
 // src/context/prompt-modal.tsx
-var import_react24 = require("react");
-var import_css49 = require("@cerberus/styled-system/css");
-var import_patterns18 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime58 = require("react/jsx-runtime");
-var PromptModalContext = (0, import_react24.createContext)(null);
+var import_react21 = require("react");
+var import_css47 = require("@cerberus/styled-system/css");
+var import_patterns17 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var PromptModalContext = (0, import_react21.createContext)(null);
 function PromptModal(props) {
   const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react24.useRef)(null);
-  const [content, setContent] = (0, import_react24.useState)(null);
-  const [inputValue, setInputValue] = (0, import_react24.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_react24.useMemo)(
+  const isValid = (0, import_react21.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react24.useMemo)(
+  const palette = (0, import_react21.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react24.useCallback)(
+  const handleChange = (0, import_react21.useCallback)(
     (e) => {
       setInputValue(e.currentTarget.value);
     },
     [content]
   );
-  const handleChoice = (0, import_react24.useCallback)(
+  const handleChoice = (0, import_react21.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
@@ -3166,7 +3112,7 @@ function PromptModal(props) {
     },
     [inputValue, close]
   );
-  const handleShow = (0, import_react24.useCallback)(
+  const handleShow = (0, import_react21.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
@@ -3176,42 +3122,42 @@ function PromptModal(props) {
     },
     [show]
   );
-  const value = (0, import_react24.useMemo)(
+  const value = (0, import_react21.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           "div",
           {
-            className: (0, import_patterns18.hstack)({
+            className: (0, import_patterns17.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -3219,22 +3165,22 @@ function PromptModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         "div",
         {
-          className: (0, import_patterns18.vstack)({
+          className: (0, import_patterns17.vstack)({
             alignItems: "flex-start",
             mt: "4",
             mb: "8"
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Field, { invalid: !isValid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
               Label,
               {
-                className: (0, import_css49.css)({
+                className: (0, import_css47.css)({
                   gap: 1,
                   justifyContent: "flex-start"
                 }),
@@ -3242,10 +3188,10 @@ function PromptModal(props) {
                 size: "md",
                 children: [
                   "Type",
-                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                     "strong",
                     {
-                      className: (0, import_css49.css)({
+                      className: (0, import_css47.css)({
                         textTransform: "uppercase"
                       }),
                       children: content == null ? void 0 : content.key
@@ -3255,7 +3201,7 @@ function PromptModal(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Input,
               {
                 id: "confirm",
@@ -3267,19 +3213,19 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         "div",
         {
-          className: (0, import_patterns18.hstack)({
+          className: (0, import_patterns17.hstack)({
             justifyContent: "stretch",
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Button,
               {
                 autoFocus: true,
-                className: (0, import_css49.css)({
+                className: (0, import_css47.css)({
                   w: "1/2"
                 }),
                 disabled: !isValid,
@@ -3290,10 +3236,10 @@ function PromptModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Button,
               {
-                className: (0, import_css49.css)({
+                className: (0, import_css47.css)({
                   w: "1/2"
                 }),
                 name: "cancel",
@@ -3310,7 +3256,7 @@ function PromptModal(props) {
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react24.useContext)(PromptModalContext);
+  const context = (0, import_react21.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }
@@ -3318,50 +3264,50 @@ function usePromptModal() {
 }
 
 // src/context/theme.tsx
-var import_react26 = require("react");
+var import_react23 = require("react");
 
 // src/hooks/useTheme.ts
-var import_react25 = 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_react25.useState)(defaultTheme);
-  const [colorMode, setColorMode] = (0, import_react25.useState)(defaultColorMode);
-  const handleThemeChange = (0, import_react25.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_react25.useCallback)(
+  const handleColorModeChange = (0, import_react22.useCallback)(
     (newMode) => {
       setColorMode(newMode);
       updateMode == null ? void 0 : updateMode(newMode);
     },
     [updateMode]
   );
-  (0, import_react25.useLayoutEffect)(() => {
+  (0, import_react22.useLayoutEffect)(() => {
     const theme2 = localStorage.getItem(THEME_KEY);
     if (theme2) {
       setTheme(theme2);
     }
   }, []);
-  (0, import_react25.useLayoutEffect)(() => {
+  (0, import_react22.useLayoutEffect)(() => {
     const mode = localStorage.getItem(MODE_KEY);
     if (mode) {
       setColorMode(mode);
     }
   }, []);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const root = document.documentElement;
     root.dataset.pandaTheme = theme;
     if (cache) {
       localStorage.setItem(THEME_KEY, theme);
     }
   }, [theme, cache]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const root = document.documentElement;
     if (colorMode === "system") {
       root.dataset.colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -3372,7 +3318,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
       localStorage.setItem(MODE_KEY, colorMode);
     }
   }, [colorMode, cache]);
-  return (0, import_react25.useMemo)(
+  return (0, import_react22.useMemo)(
     () => ({
       theme,
       mode: colorMode,
@@ -3384,8 +3330,8 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 }
 
 // src/context/theme.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react26.createContext)(
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react23.createContext)(
   null
 );
 function ThemeProvider(props) {
@@ -3394,10 +3340,10 @@ function ThemeProvider(props) {
     updateMode: props.updateMode,
     updateTheme: props.updateTheme
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ThemeContext.Provider, { value: state, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
-  const context = (0, import_react26.useContext)(ThemeContext);
+  const context = (0, import_react23.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useThemeContext must be used within a ThemeProvider");
   }
@@ -3405,13 +3351,13 @@ function useThemeContext() {
 }
 
 // src/hooks/useDate.ts
-var import_react27 = 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_react27.useState)(initialValue);
-  const handleChange = (0, import_react27.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);
@@ -3419,7 +3365,7 @@ function useDate(options) {
     },
     [onChange]
   );
-  return (0, import_react27.useMemo)(
+  return (0, import_react24.useMemo)(
     () => ({
       format,
       value,
@@ -3498,11 +3444,11 @@ var MONTHS = [
 ];
 
 // src/hooks/useToggle.ts
-var import_react28 = require("react");
+var import_react25 = require("react");
 function useToggle(options) {
-  const [checked, setChecked] = (0, import_react28.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_react28.useCallback)(
+  const handleChange = (0, import_react25.useCallback)(
     (e) => {
       const target = e.currentTarget;
       setChecked((prev) => {
@@ -3512,25 +3458,25 @@ function useToggle(options) {
     },
     [onChange]
   );
-  return (0, import_react28.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
+  return (0, import_react25.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
 }
 
 // src/hooks/useRootColors.ts
-var import_react29 = require("react");
+var import_react26 = require("react");
 function useRootColors(colors = []) {
-  const [state, dispatch] = (0, import_react29.useReducer)(rootColorsReducer, {});
-  const handleRefetch = (0, import_react29.useCallback)(() => {
+  const [state, dispatch] = (0, import_react26.useReducer)(rootColorsReducer, {});
+  const handleRefetch = (0, import_react26.useCallback)(() => {
     return new Promise((resolve) => {
       dispatch(formatColors(colors));
       resolve();
     });
   }, []);
-  (0, import_react29.useEffect)(() => {
+  (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_react29.useMemo)(
+  return (0, import_react26.useMemo)(
     () => ({ colors: state, refetch: handleRefetch }),
     [state, handleRefetch]
   );
@@ -3638,11 +3584,13 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   Spinner,
   THEME_KEY,
   Tab,
+  TabIndicator,
   TabList,
   TabPanel,
   Table,
   Tabs,
   TabsContext,
+  TabsList,
   Tag,
   Tbody,
   Td,
@@ -3660,8 +3608,10 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   formatMilitaryDate,
   formatMilitaryToISO,
   formatNotifyCount,
+  getLocalStorage,
   getPosition,
   processStatus,
+  setLocalStorage,
   trapFocus,
   useCTAModal,
   useConfirmModal,
@@ -3674,7 +3624,6 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   usePromptModal,
   useRootColors,
   useTabsContext,
-  useTabsKeyboardNavigation,
   useTheme,
   useThemeContext,
   useToggle,