@cerberus-design/react 0.13.2-next-9a3c62b → 0.13.2-next-61259ca

package/build/legacy/index.cjs

@@ -869,14 +869,13 @@ function CircularProgress(props) {
 }
 
 // src/components/DatePicker.client.tsx
-var import_react7 = require("@ark-ui/react");
+var import_react6 = require("@ark-ui/react");
 
 // src/components/Portal.tsx
 var import_react4 = require("@ark-ui/react");
 var Portal = import_react4.Portal;
 
 // src/components/DatePicker.client.tsx
-var import_react8 = require("react");
 var import_recipes8 = require("@cerberus/styled-system/recipes");
 var import_css10 = require("@cerberus/styled-system/css");
 
@@ -1012,113 +1011,16 @@ function DatePickerTableCellTrigger(props) {
 var DatePickerView = import_react5.DatePicker.View;
 var DatePickerContext = import_react5.DatePicker.Context;
 
-// src/hooks/useDate.ts
-var import_react6 = 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_react6.useState)(initialValue);
-  const handleChange = (0, import_react6.useCallback)(
-    (e) => {
-      const newValue = formatMilitaryDate(e.currentTarget.value);
-      if (onChange) onChange(e);
-      setValue(newValue);
-    },
-    [onChange]
-  );
-  return (0, import_react6.useMemo)(
-    () => ({
-      format,
-      value,
-      ISO: formatMilitaryToISO(value),
-      onChange: handleChange
-    }),
-    [format, value, handleChange]
-  );
-}
-function formatMilitaryToISO(input3) {
-  const [day, month, year] = input3.split(" ");
-  const monthIndex = MONTHS.findIndex((m) => m.startsWith(month));
-  const monthNum = monthIndex + 1;
-  return `${year ?? "0000"}-${monthNum.toString().padStart(2, "0")}-${day.padStart(
-    2,
-    "0"
-  )}`;
-}
-function formatMilitaryDate(input3) {
-  let formatted = input3.toUpperCase().replace(/[^0-9A-Z]/g, "");
-  let day = "";
-  let month = "";
-  let year = "";
-  if (formatted.length >= 2) {
-    day = formatted.replace(/[^0-9]/g, "").slice(0, 2);
-    const dayNum = parseInt(day, 10);
-    if (dayNum > 31) day = "31";
-    else if (dayNum === 0) day = "01";
-    formatted = formatted.slice(2);
-  }
-  if (formatted.length >= 3) {
-    month = formatted.slice(0, 3);
-    const monthIndex = MONTHS.findIndex((m) => m.startsWith(month));
-    if (monthIndex !== -1) {
-      month = MONTHS[monthIndex];
-    } else {
-      month = month.replace(/[^A-Z]/g, "");
-    }
-    formatted = formatted.slice(3);
-  }
-  if (formatted.length > 0) {
-    year = formatted.slice(0, 4);
-  }
-  return [day, month, year].filter(Boolean).join(" ");
-}
-function formatISOToMilitary(date) {
-  const [year, month, day] = date.split("-");
-  const monthIndex = parseInt(month, 10) - 1;
-  const monthStr = MONTHS[monthIndex];
-  return `${day} ${monthStr} ${year}`;
-}
-var DateFormats = {
-  get ISO() {
-    return "YYYY-MM-DD";
-  },
-  get USMilitary() {
-    return "DD MMM YYYY";
-  },
-  get Months() {
-    return MONTHS;
-  }
-};
-var MONTHS = [
-  "JAN",
-  "FEB",
-  "MAR",
-  "APR",
-  "MAY",
-  "JUN",
-  "JUL",
-  "AUG",
-  "SEP",
-  "OCT",
-  "NOV",
-  "DEC"
-];
-
 // src/components/DatePicker.client.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var datePickerStyles2 = (0, import_recipes8.datePicker)();
 function DatePicker(props) {
   const states = useFieldContext();
-  const handleFormat = (0, import_react8.useCallback)((value) => {
-    return formatISOToMilitary(value.toString());
-  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react7.DatePicker.Root,
+    import_react6.DatePicker.Root,
     {
       ...props,
       ...states,
-      format: handleFormat,
       positioning: {
         placement: "bottom-start"
       }
@@ -1127,10 +1029,10 @@ function DatePicker(props) {
 }
 function DatePickerInput(props) {
   const { invalid, ...fieldStates } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react7.DatePicker.Control, { className: datePickerStyles2.control, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react6.DatePicker.Control, { className: datePickerStyles2.control, children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTrigger, {}),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react7.DatePicker.Input,
+      import_react6.DatePicker.Input,
       {
         ...props,
         ...fieldStates,
@@ -1144,10 +1046,10 @@ function DatePickerInput(props) {
 }
 function RangePickerInput(props) {
   const { invalid, ...fieldStates } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react7.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react6.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTrigger, {}),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react7.DatePicker.Input,
+      import_react6.DatePicker.Input,
       {
         ...props,
         ...fieldStates,
@@ -1160,7 +1062,7 @@ function RangePickerInput(props) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react7.DatePicker.Input,
+      import_react6.DatePicker.Input,
       {
         ...props,
         ...fieldStates,
@@ -1177,8 +1079,8 @@ function RangePickerInput(props) {
 }
 function DatePickerContent(props) {
   const { children, ...contentProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react7.DatePicker.Positioner, { className: datePickerStyles2.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react7.DatePicker.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.Positioner, { className: datePickerStyles2.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react6.DatePicker.Content,
     {
       ...contentProps,
       className: (0, import_css10.cx)(contentProps.className, datePickerStyles2.content),
@@ -1206,8 +1108,8 @@ function DatePickerDayView(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerView, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerContext, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerViewControlGroup, {}),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DatePickerTable, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react7.DatePicker.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react7.DatePicker.TableRow, { children: datePicker3.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableHeader, { children: weekDay.narrow }, id)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react7.DatePicker.TableBody, { children: datePicker3.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react7.DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableRow, { children: datePicker3.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableHeader, { children: weekDay.narrow }, id)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableBody, { children: datePicker3.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         DatePickerTableCellTrigger,
         {
           "data-date": getDayValue(day),
@@ -1218,15 +1120,15 @@ function DatePickerDayView(props) {
   ] }) }) });
 }
 function DatePickerMonthView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react7.DatePicker.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react7.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react7.DatePicker.TableBody, { children: datePicker3.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react7.DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableBody, { children: datePicker3.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
   ] }) }) });
 }
 function DatePickerYearView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react7.DatePicker.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react7.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react7.DatePicker.TableBody, { children: datePicker3.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react7.DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableBody, { children: datePicker3.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
   ] }) }) });
 }
 function DatePickerCalendar() {
@@ -1239,11 +1141,11 @@ function DatePickerCalendar() {
 
 // src/components/Droppable.tsx
 var import_core = require("@dnd-kit/core");
-var import_react9 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime14 = 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_react7.useId)();
   const { isOver, setNodeRef } = (0, import_core.useDroppable)({
     data,
     disabled,
@@ -1279,14 +1181,14 @@ function FieldMessage(props) {
 }
 
 // src/context/feature-flags.tsx
-var import_react10 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var FeatureFlagContext = (0, import_react10.createContext)(null);
+var FeatureFlagContext = (0, import_react8.createContext)(null);
 function FeatureFlags(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
 }
 function useFeatureFlags(key) {
-  const context = (0, import_react10.useContext)(FeatureFlagContext);
+  const context = (0, import_react8.useContext)(FeatureFlagContext);
   if (context === null) {
     throw new Error(
       "useFeatureFlag must be used within a FeatureFlags Provider"
@@ -1347,7 +1249,7 @@ function FieldsetLabel(props) {
 }
 
 // src/components/FileStatus.tsx
-var import_react11 = require("react");
+var import_react9 = require("react");
 var import_recipes12 = require("@cerberus/styled-system/recipes");
 var import_css15 = require("@cerberus/styled-system/css");
 var import_patterns5 = require("@cerberus/styled-system/patterns");
@@ -1397,10 +1299,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_react9.useMemo)(() => getStatusActionLabel(status), [status]);
+  const palette = (0, import_react9.useMemo)(() => getPalette(status), [status]);
+  const modalIconPalette = (0, import_react9.useMemo)(() => getModalIconPalette(status), [status]);
+  const styles = (0, import_react9.useMemo)(() => {
     switch (status) {
       case "todo" /* TODO */:
         return (0, import_recipes12.fileStatus)({ status: "todo" });
@@ -1414,7 +1316,7 @@ function FileStatus(props) {
         return (0, import_recipes12.fileStatus)();
     }
   }, [status]);
-  const handleClick = (0, import_react11.useCallback)(
+  const handleClick = (0, import_react9.useCallback)(
     (e) => {
       const actionStatus = getStatusActionLabel(
         status
@@ -1752,18 +1654,18 @@ function Legend(props) {
 }
 
 // src/components/Menu.tsx
-var import_react12 = require("@ark-ui/react");
+var import_react10 = require("@ark-ui/react");
 var import_recipes17 = require("@cerberus/styled-system/recipes");
 var import_css20 = require("@cerberus/styled-system/css");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var menuStyles = (0, import_recipes17.menu)();
-var Menu = import_react12.Menu.Root;
+var Menu = import_react10.Menu.Root;
 function MenuTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react12.Menu.Trigger, { ...props, asChild: true });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react10.Menu.Trigger, { ...props, asChild: true });
 }
 function MenuContent(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react12.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_react12.Menu.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react10.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_react10.Menu.Content,
     {
       ...props,
       className: (0, import_css20.cx)(props.className, menuStyles.content)
@@ -1771,12 +1673,12 @@ function MenuContent(props) {
   ) });
 }
 function MenuItem(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react12.Menu.Item, { ...props, className: (0, import_css20.cx)(props.className, menuStyles.item) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react10.Menu.Item, { ...props, className: (0, import_css20.cx)(props.className, menuStyles.item) });
 }
-var MenuItemGroup = import_react12.Menu.ItemGroup;
+var MenuItemGroup = import_react10.Menu.ItemGroup;
 function MenuGroupLabel(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_react12.Menu.ItemGroupLabel,
+    import_react10.Menu.ItemGroupLabel,
     {
       ...props,
       className: (0, import_css20.cx)(props.className, menuStyles.itemGroupLabel)
@@ -1785,7 +1687,7 @@ function MenuGroupLabel(props) {
 }
 function MenuSeparator(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_react12.Menu.Separator,
+    import_react10.Menu.Separator,
     {
       ...props,
       className: (0, import_css20.cx)(props.className, menuStyles.separator)
@@ -1796,7 +1698,7 @@ function MenuSeparator(props) {
 // src/components/Modal.tsx
 var import_css21 = require("@cerberus/styled-system/css");
 var import_recipes18 = require("@cerberus/styled-system/recipes");
-var import_react13 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function ModalEl(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -1808,7 +1710,7 @@ function ModalEl(props, ref) {
     }
   );
 }
-var Modal = (0, import_react13.forwardRef)(ModalEl);
+var Modal = (0, import_react11.forwardRef)(ModalEl);
 
 // src/components/ModalHeader.tsx
 var import_css22 = require("@cerberus/styled-system/css");
@@ -1848,7 +1750,7 @@ function ModalDescription(props) {
 }
 
 // src/components/NavMenuTrigger.tsx
-var import_react15 = require("react");
+var import_react13 = require("react");
 var import_css26 = require("@cerberus/styled-system/css");
 var import_recipes21 = require("@cerberus/styled-system/recipes");
 
@@ -1862,17 +1764,17 @@ function createNavTriggerProps(values) {
 
 // src/context/navMenu.tsx
 var import_css25 = require("@cerberus/styled-system/css");
-var import_react14 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var NavMenuContext = (0, import_react14.createContext)(null);
+var NavMenuContext = (0, import_react12.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_react12.useRef)(null);
+  const menuRef = (0, import_react12.useRef)(null);
+  const [expanded, setExpanded] = (0, import_react12.useState)(false);
+  const handleToggle = (0, import_react12.useCallback)(() => {
     setExpanded((prev) => !prev);
   }, []);
-  const value = (0, import_react14.useMemo)(
+  const value = (0, import_react12.useMemo)(
     () => ({
       triggerRef,
       menuRef,
@@ -1892,7 +1794,7 @@ function NavMenu(props) {
   ) });
 }
 function useNavMenuContext() {
-  const context = (0, import_react14.useContext)(NavMenuContext);
+  const context = (0, import_react12.useContext)(NavMenuContext);
   if (!context) {
     throw new Error("useNavMenuContext must be used within a NavMenu.");
   }
@@ -1919,7 +1821,7 @@ function NavMenuTrigger(props) {
   });
   const hasAs = Boolean(as);
   const AsSub = as;
-  const handleClick = (0, import_react15.useCallback)(
+  const handleClick = (0, import_react13.useCallback)(
     (e) => {
       if (onClick) return onClick(e);
       onToggle();
@@ -1962,7 +1864,7 @@ function NavMenuTrigger(props) {
 }
 
 // src/components/NavMenuList.tsx
-var import_react16 = require("react");
+var import_react14 = require("react");
 var import_css27 = require("@cerberus/styled-system/css");
 var import_patterns10 = require("@cerberus/styled-system/patterns");
 var import_jsx_runtime33 = require("react/jsx-runtime");
@@ -2019,7 +1921,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_react14.useMemo)(
     () => getPosition(position ?? "bottom"),
     [position]
   );
@@ -2079,7 +1981,7 @@ function NavMenuLink(props) {
 var import_css29 = require("@cerberus/styled-system/css");
 var import_patterns11 = require("@cerberus/styled-system/patterns");
 var import_recipes22 = require("@cerberus/styled-system/recipes");
-var import_react17 = require("react");
+var import_react15 = require("react");
 
 // src/aria-helpers/trap-focus.aria.ts
 function trapFocus(modalRef) {
@@ -2117,7 +2019,7 @@ function MatchNotificationIcon(props) {
 }
 function Notification(props) {
   const { children, palette, onClose, ...nativeProps } = props;
-  const ref = (0, import_react17.useRef)(null);
+  const ref = (0, import_react15.useRef)(null);
   const onKeyDown = trapFocus(ref);
   const styles = (0, import_recipes22.notification)({ palette });
   const { close: CloseIcon } = $cerberusIcons;
@@ -2355,21 +2257,21 @@ function Spinner(props) {
 }
 
 // src/components/Tab.tsx
-var import_react20 = require("react");
+var import_react18 = require("react");
 
 // src/context/tabs.tsx
 var import_recipes27 = require("@cerberus/styled-system/recipes");
-var import_react18 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var TabsContext = (0, import_react18.createContext)(null);
+var TabsContext = (0, import_react16.createContext)(null);
 function Tabs(props) {
   const { cache, active, id, palette } = props;
-  const [activeTab, setActiveTab] = (0, import_react18.useState)(() => cache ? "" : active ?? "");
-  const tabsList = (0, import_react18.useRef)([]);
-  const uuid = (0, import_react18.useMemo)(() => {
+  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 value = (0, import_react18.useMemo)(
+  const value = (0, import_react16.useMemo)(
     () => ({
       tabs: tabsList,
       id: uuid,
@@ -2379,7 +2281,7 @@ function Tabs(props) {
     }),
     [activeTab, setActiveTab, palette, uuid, tabsList]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (cache) {
       const cachedTab = window.localStorage.getItem(uuid);
       setActiveTab(
@@ -2387,7 +2289,7 @@ function Tabs(props) {
       );
     }
   }, [cache, active, uuid]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (cache && activeTab) {
       window.localStorage.setItem(uuid, activeTab);
     }
@@ -2395,7 +2297,7 @@ function Tabs(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabsContext.Provider, { value, children: props.children });
 }
 function useTabsContext() {
-  const context = (0, import_react18.useContext)(TabsContext);
+  const context = (0, import_react16.useContext)(TabsContext);
   if (!context) {
     throw new Error("useTabsContext must be used within a Tabs Provider.");
   }
@@ -2406,7 +2308,7 @@ function useTabsContext() {
 var import_css34 = require("@cerberus/styled-system/css");
 
 // src/aria-helpers/tabs.aria.ts
-var import_react19 = require("react");
+var import_react17 = require("react");
 function getNextIndex(index, length) {
   return index === length - 1 ? 0 : index + 1;
 }
@@ -2415,8 +2317,8 @@ function getPrevIndex(index, length) {
 }
 function useTabsKeyboardNavigation() {
   const { tabs: tabs2 } = useTabsContext();
-  const [activeTab, setActiveTab] = (0, import_react19.useState)(-1);
-  (0, import_react19.useEffect)(() => {
+  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);
@@ -2466,9 +2368,9 @@ var import_jsx_runtime42 = require("react/jsx-runtime");
 function Tab(props) {
   const { value, ...nativeProps } = props;
   const { active, onTabUpdate, styles } = useTabsContext();
-  const [isPending, startTransition] = (0, import_react20.useTransition)();
+  const [isPending, startTransition] = (0, import_react18.useTransition)();
   const { ref } = useTabsKeyboardNavigation();
-  const isActive = (0, import_react20.useMemo)(() => active === value, [active, value]);
+  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);
@@ -2519,12 +2421,12 @@ function TabList(props) {
 
 // src/components/TabPanel.tsx
 var import_css36 = require("@cerberus/styled-system/css");
-var import_react21 = require("react");
+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_react21.useMemo)(() => active === tab, [active, tab]);
+  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",
     {
@@ -2833,26 +2735,26 @@ function Tooltip(props) {
 }
 
 // src/context/confirm-modal.tsx
-var import_react23 = require("react");
+var import_react21 = require("react");
 var import_css46 = require("@cerberus/styled-system/css");
 var import_patterns16 = require("@cerberus/styled-system/patterns");
 
 // src/hooks/useModal.ts
-var import_react22 = require("react");
+var import_react20 = require("react");
 function useModal() {
-  const modalRef = (0, import_react22.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
-  const show = (0, import_react22.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_react22.useCallback)(() => {
+  const close = (0, import_react20.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.close();
     setIsOpen(false);
   }, []);
-  return (0, import_react22.useMemo)(() => {
+  return (0, import_react20.useMemo)(() => {
     return {
       modalRef,
       show,
@@ -2865,19 +2767,19 @@ 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_react23.createContext)(null);
+var ConfirmModalContext = (0, import_react21.createContext)(null);
 function ConfirmModal(props) {
   const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react23.useRef)(null);
-  const [content, setContent] = (0, import_react23.useState)(null);
+  const resolveRef = (0, import_react21.useRef)(null);
+  const [content, setContent] = (0, import_react21.useState)(null);
   const focusTrap = trapFocus(modalRef);
   const ConfirmIcon = $cerberusIcons.confirmModal;
   const kind = (content == null ? void 0 : content.kind) ?? "non-destructive";
-  const palette = (0, import_react23.useMemo)(
+  const palette = (0, import_react21.useMemo)(
     () => kind === "destructive" ? "danger" : "action",
     [kind]
   );
-  const handleChoice = (0, import_react23.useCallback)(
+  const handleChoice = (0, import_react21.useCallback)(
     (e) => {
       var _a, _b;
       const target = e.currentTarget;
@@ -2889,7 +2791,7 @@ function ConfirmModal(props) {
     },
     [close]
   );
-  const handleShow = (0, import_react23.useCallback)(
+  const handleShow = (0, import_react21.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options });
@@ -2899,7 +2801,7 @@ function ConfirmModal(props) {
     },
     [show]
   );
-  const value = (0, import_react23.useMemo)(
+  const value = (0, import_react21.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -2978,7 +2880,7 @@ function ConfirmModal(props) {
   ] });
 }
 function useConfirmModal() {
-  const context = (0, import_react23.useContext)(ConfirmModalContext);
+  const context = (0, import_react21.useContext)(ConfirmModalContext);
   if (context === null) {
     throw new Error(
       "useConfirmModal must be used within a ConfirmModal Provider"
@@ -2988,21 +2890,21 @@ function useConfirmModal() {
 }
 
 // src/context/cta-modal.tsx
-var import_react24 = require("react");
+var import_react22 = require("react");
 var import_jsx3 = require("@cerberus/styled-system/jsx");
 var import_css47 = 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_react24.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_react24.useState)(null);
+  const [content, setContent] = (0, import_react22.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_react24.useCallback)(
+  const handleShow = (0, import_react22.useCallback)(
     (options) => {
       const maxActions = 2;
       if (options.actions.length > maxActions) {
@@ -3015,7 +2917,7 @@ function CTAModal(props) {
     },
     [show]
   );
-  const handleActionClick = (0, import_react24.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)];
@@ -3025,7 +2927,7 @@ function CTAModal(props) {
     },
     [content, close]
   );
-  const value = (0, import_react24.useMemo)(
+  const value = (0, import_react22.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -3087,7 +2989,7 @@ function CTAModal(props) {
   ] });
 }
 function useCTAModal() {
-  const context = (0, import_react24.useContext)(CTAModalContext);
+  const context = (0, import_react22.useContext)(CTAModalContext);
   if (context === null) {
     throw new Error("useCTAModal must be used within a CTAModal Provider");
   }
@@ -3095,22 +2997,22 @@ function useCTAModal() {
 }
 
 // src/context/notification-center.tsx
-var import_react25 = require("react");
+var import_react23 = require("react");
 var import_patterns17 = 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_react25.createContext)(null);
+var NotificationsContext = (0, import_react23.createContext)(null);
 function NotificationCenter(props) {
-  const [activeNotifications, setActiveNotifications] = (0, import_react25.useState)([]);
+  const [activeNotifications, setActiveNotifications] = (0, import_react23.useState)([]);
   const styles = (0, import_recipes37.notification)();
-  const handleNotify = (0, import_react25.useCallback)((options) => {
+  const handleNotify = (0, import_react23.useCallback)((options) => {
     setActiveNotifications((prev) => {
       const id = `${options.palette}:${prev.length + 1}`;
       return [...prev, { ...options, id }];
     });
   }, []);
-  const handleClose = (0, import_react25.useCallback)((e) => {
+  const handleClose = (0, import_react23.useCallback)((e) => {
     const target = e.currentTarget;
     setActiveNotifications((prev) => {
       const item = prev.find((option) => option.id === target.value);
@@ -3118,7 +3020,7 @@ function NotificationCenter(props) {
       return prev.filter((option) => option.id !== target.value);
     });
   }, []);
-  const handleCloseAll = (0, import_react25.useCallback)(() => {
+  const handleCloseAll = (0, import_react23.useCallback)(() => {
     setActiveNotifications((prev) => {
       prev.forEach((item) => {
         if (item.onClose) item.onClose();
@@ -3126,7 +3028,7 @@ function NotificationCenter(props) {
       return [];
     });
   }, []);
-  const value = (0, import_react25.useMemo)(
+  const value = (0, import_react23.useMemo)(
     () => ({
       notify: handleNotify
     }),
@@ -3217,7 +3119,7 @@ function MatchNotification(props) {
   }
 }
 function useNotificationCenter() {
-  const context = (0, import_react25.useContext)(NotificationsContext);
+  const context = (0, import_react23.useContext)(NotificationsContext);
   if (!context) {
     throw new Error(
       "useNotificationCenter must be used within a NotificationsProvider"
@@ -3227,33 +3129,33 @@ function useNotificationCenter() {
 }
 
 // src/context/prompt-modal.tsx
-var import_react26 = require("react");
+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_react26.createContext)(null);
+var PromptModalContext = (0, import_react24.createContext)(null);
 function PromptModal(props) {
   const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react26.useRef)(null);
-  const [content, setContent] = (0, import_react26.useState)(null);
-  const [inputValue, setInputValue] = (0, import_react26.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 PromptIcon = $cerberusIcons.promptModal;
-  const isValid = (0, import_react26.useMemo)(
+  const isValid = (0, import_react24.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react26.useMemo)(
+  const palette = (0, import_react24.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react26.useCallback)(
+  const handleChange = (0, import_react24.useCallback)(
     (e) => {
       setInputValue(e.currentTarget.value);
     },
     [content]
   );
-  const handleChoice = (0, import_react26.useCallback)(
+  const handleChoice = (0, import_react24.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
@@ -3264,7 +3166,7 @@ function PromptModal(props) {
     },
     [inputValue, close]
   );
-  const handleShow = (0, import_react26.useCallback)(
+  const handleShow = (0, import_react24.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
@@ -3274,7 +3176,7 @@ function PromptModal(props) {
     },
     [show]
   );
-  const value = (0, import_react26.useMemo)(
+  const value = (0, import_react24.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -3408,7 +3310,7 @@ function PromptModal(props) {
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react26.useContext)(PromptModalContext);
+  const context = (0, import_react24.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }
@@ -3416,50 +3318,50 @@ function usePromptModal() {
 }
 
 // src/context/theme.tsx
-var import_react28 = require("react");
+var import_react26 = require("react");
 
 // src/hooks/useTheme.ts
-var import_react27 = 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_react27.useState)(defaultTheme);
-  const [colorMode, setColorMode] = (0, import_react27.useState)(defaultColorMode);
-  const handleThemeChange = (0, import_react27.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_react27.useCallback)(
+  const handleColorModeChange = (0, import_react25.useCallback)(
     (newMode) => {
       setColorMode(newMode);
       updateMode == null ? void 0 : updateMode(newMode);
     },
     [updateMode]
   );
-  (0, import_react27.useLayoutEffect)(() => {
+  (0, import_react25.useLayoutEffect)(() => {
     const theme2 = localStorage.getItem(THEME_KEY);
     if (theme2) {
       setTheme(theme2);
     }
   }, []);
-  (0, import_react27.useLayoutEffect)(() => {
+  (0, import_react25.useLayoutEffect)(() => {
     const mode = localStorage.getItem(MODE_KEY);
     if (mode) {
       setColorMode(mode);
     }
   }, []);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const root = document.documentElement;
     root.dataset.pandaTheme = theme;
     if (cache) {
       localStorage.setItem(THEME_KEY, theme);
     }
   }, [theme, cache]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const root = document.documentElement;
     if (colorMode === "system") {
       root.dataset.colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -3470,7 +3372,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
       localStorage.setItem(MODE_KEY, colorMode);
     }
   }, [colorMode, cache]);
-  return (0, import_react27.useMemo)(
+  return (0, import_react25.useMemo)(
     () => ({
       theme,
       mode: colorMode,
@@ -3483,7 +3385,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 
 // src/context/theme.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react28.createContext)(
+var ThemeContext = (0, import_react26.createContext)(
   null
 );
 function ThemeProvider(props) {
@@ -3495,19 +3397,112 @@ function ThemeProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
-  const context = (0, import_react28.useContext)(ThemeContext);
+  const context = (0, import_react26.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useThemeContext must be used within a ThemeProvider");
   }
   return context;
 }
 
+// src/hooks/useDate.ts
+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_react27.useState)(initialValue);
+  const handleChange = (0, import_react27.useCallback)(
+    (e) => {
+      const newValue = formatMilitaryDate(e.currentTarget.value);
+      if (onChange) onChange(e);
+      setValue(newValue);
+    },
+    [onChange]
+  );
+  return (0, import_react27.useMemo)(
+    () => ({
+      format,
+      value,
+      ISO: formatMilitaryToISO(value),
+      onChange: handleChange
+    }),
+    [format, value, handleChange]
+  );
+}
+function formatMilitaryToISO(input3) {
+  const [day, month, year] = input3.split(" ");
+  const monthIndex = MONTHS.findIndex((m) => m.startsWith(month));
+  const monthNum = monthIndex + 1;
+  return `${year ?? "0000"}-${monthNum.toString().padStart(2, "0")}-${day.padStart(
+    2,
+    "0"
+  )}`;
+}
+function formatMilitaryDate(input3) {
+  let formatted = input3.toUpperCase().replace(/[^0-9A-Z]/g, "");
+  let day = "";
+  let month = "";
+  let year = "";
+  if (formatted.length >= 2) {
+    day = formatted.replace(/[^0-9]/g, "").slice(0, 2);
+    const dayNum = parseInt(day, 10);
+    if (dayNum > 31) day = "31";
+    else if (dayNum === 0) day = "01";
+    formatted = formatted.slice(2);
+  }
+  if (formatted.length >= 3) {
+    month = formatted.slice(0, 3);
+    const monthIndex = MONTHS.findIndex((m) => m.startsWith(month));
+    if (monthIndex !== -1) {
+      month = MONTHS[monthIndex];
+    } else {
+      month = month.replace(/[^A-Z]/g, "");
+    }
+    formatted = formatted.slice(3);
+  }
+  if (formatted.length > 0) {
+    year = formatted.slice(0, 4);
+  }
+  return [day, month, year].filter(Boolean).join(" ");
+}
+function formatISOToMilitary(date) {
+  const [year, month, day] = date.split("-");
+  const monthIndex = parseInt(month, 10) - 1;
+  const monthStr = MONTHS[monthIndex];
+  return `${day} ${monthStr} ${year}`;
+}
+var DateFormats = {
+  get ISO() {
+    return "YYYY-MM-DD";
+  },
+  get USMilitary() {
+    return "DD MMM YYYY";
+  },
+  get Months() {
+    return MONTHS;
+  }
+};
+var MONTHS = [
+  "JAN",
+  "FEB",
+  "MAR",
+  "APR",
+  "MAY",
+  "JUN",
+  "JUL",
+  "AUG",
+  "SEP",
+  "OCT",
+  "NOV",
+  "DEC"
+];
+
 // src/hooks/useToggle.ts
-var import_react29 = require("react");
+var import_react28 = require("react");
 function useToggle(options) {
-  const [checked, setChecked] = (0, import_react29.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_react29.useCallback)(
+  const handleChange = (0, import_react28.useCallback)(
     (e) => {
       const target = e.currentTarget;
       setChecked((prev) => {
@@ -3517,25 +3512,25 @@ function useToggle(options) {
     },
     [onChange]
   );
-  return (0, import_react29.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
+  return (0, import_react28.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
 }
 
 // src/hooks/useRootColors.ts
-var import_react30 = require("react");
+var import_react29 = require("react");
 function useRootColors(colors = []) {
-  const [state, dispatch] = (0, import_react30.useReducer)(rootColorsReducer, {});
-  const handleRefetch = (0, import_react30.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_react30.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_react30.useMemo)(
+  return (0, import_react29.useMemo)(
     () => ({ colors: state, refetch: handleRefetch }),
     [state, handleRefetch]
   );