@cerberus-design/react 0.16.0-next-22894bb → 0.16.0-next-1e5283a

package/build/legacy/index.cjs

@@ -64,15 +64,17 @@ __export(src_exports, {
   DatePickerViewControl: () => DatePickerViewControl,
   DatePickerViewControlGroup: () => DatePickerViewControlGroup,
   DatePickerYearView: () => DatePickerYearView,
-  Dialog: () => Dialog,
+  Dialog: () => Dialog2,
   DialogBackdrop: () => DialogBackdrop,
   DialogCloseIconTrigger: () => DialogCloseIconTrigger,
   DialogCloseTrigger: () => DialogCloseTrigger,
   DialogContent: () => DialogContent,
   DialogDescription: () => DialogDescription,
   DialogHeading: () => DialogHeading,
+  DialogParts: () => DialogParts,
   DialogPositioner: () => DialogPositioner,
   DialogProvider: () => DialogProvider,
+  DialogRoot: () => DialogRoot,
   DialogTrigger: () => DialogTrigger,
   Droppable: () => Droppable,
   FeatureFlag: () => FeatureFlag,
@@ -1626,7 +1628,7 @@ function CircularProgress(props) {
 }
 
 // src/components/cta-dialog/provider.tsx
-var import_react19 = require("react");
+var import_react17 = require("react");
 var import_jsx4 = require("@cerberus/styled-system/jsx");
 
 // src/components/for.tsx
@@ -1638,52 +1640,85 @@ function For(props) {
   return (_a = props.each) == null ? void 0 : _a.map(props.children);
 }
 
-// src/components/Dialog.tsx
-var import_react16 = require("@ark-ui/react");
-var import_recipes17 = require("@cerberus/styled-system/recipes");
-
-// src/components/Portal.tsx
-var import_react15 = require("@ark-ui/react");
-var Portal = import_react15.Portal;
-
-// src/components/Dialog.tsx
+// src/components/dialog/primitives.tsx
+var import_dialog = require("@ark-ui/react/dialog");
 var import_css23 = require("@cerberus/styled-system/css");
+var import_recipes17 = require("@cerberus/styled-system/recipes");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-function DialogProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react16.Dialog.Root, { ...props });
+function DialogRoot(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_dialog.Dialog.Root, { ...props });
+}
+function DialogTrigger(props) {
+  const styles = (0, import_recipes17.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_dialog.Dialog.Trigger,
+    {
+      ...props,
+      className: (0, import_css23.cx)(styles.trigger, props.className)
+    }
+  );
+}
+function DialogBackdrop(props) {
+  const styles = (0, import_recipes17.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_dialog.Dialog.Backdrop,
+    {
+      ...props,
+      className: (0, import_css23.cx)(styles.backdrop, props.className)
+    }
+  );
+}
+function DialogPositioner(props) {
+  const styles = (0, import_recipes17.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_dialog.Dialog.Positioner,
+    {
+      ...props,
+      className: (0, import_css23.cx)(styles.positioner, props.className)
+    }
+  );
 }
-function Dialog(props) {
+function DialogContent(props) {
   const { size, ...contentProps } = props;
   const styles = (0, import_recipes17.dialog)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DialogBackdrop, { className: styles.backdrop }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DialogPositioner, { className: styles.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DialogContent, { className: styles.content, ...contentProps }) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_dialog.Dialog.Content,
+    {
+      ...contentProps,
+      className: (0, import_css23.cx)(styles.content, contentProps.className)
+    }
+  );
 }
 function DialogHeading(props) {
   const styles = (0, import_recipes17.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react16.Dialog.Title, { ...props, className: (0, import_css23.cx)(props.className, styles.title) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_dialog.Dialog.Title, { ...props, className: (0, import_css23.cx)(styles.title, props.className) });
 }
 function DialogDescription(props) {
   const styles = (0, import_recipes17.dialog)();
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_react16.Dialog.Description,
+    import_dialog.Dialog.Description,
     {
       ...props,
-      className: (0, import_css23.cx)(props.className, styles.description)
+      className: (0, import_css23.cx)(styles.description, props.className)
     }
   );
 }
-var DialogTrigger = import_react16.Dialog.Trigger;
-var DialogCloseTrigger = import_react16.Dialog.CloseTrigger;
-var DialogBackdrop = import_react16.Dialog.Backdrop;
-var DialogPositioner = import_react16.Dialog.Positioner;
-var DialogContent = import_react16.Dialog.Content;
+function DialogCloseTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_dialog.Dialog.CloseTrigger, { ...props });
+}
+var DialogProvider = DialogRoot;
 
-// src/components/Dialog.client.tsx
-var import_react17 = require("@ark-ui/react");
-var import_recipes19 = require("@cerberus/styled-system/recipes");
-var import_css25 = require("@cerberus/styled-system/css");
+// src/components/dialog/parts.ts
+var DialogParts = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Backdrop: DialogBackdrop,
+  Positioner: DialogPositioner,
+  Content: DialogContent,
+  Heading: DialogHeading,
+  Description: DialogDescription,
+  CloseTrigger: DialogCloseTrigger
+};
 
 // src/components/IconButton.tsx
 var import_css24 = require("@cerberus/styled-system/css");
@@ -1708,17 +1743,19 @@ function IconButton(props) {
   );
 }
 
-// src/components/Dialog.client.tsx
+// src/components/dialog/close-icon-trigger.tsx
+var import_recipes19 = require("@cerberus/styled-system/recipes");
+var import_css25 = require("@cerberus/styled-system/css");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function DialogCloseIconTrigger(props) {
+  const styles = (0, import_recipes19.dialog)();
   const { icons } = useCerberusContext();
   const { close: CloseIcon } = icons;
-  const styles = (0, import_recipes19.dialog)();
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_react17.Dialog.CloseTrigger,
+    DialogCloseTrigger,
     {
       ...props,
-      className: (0, import_css25.cx)(props.className, styles.closeTrigger),
+      className: (0, import_css25.cx)(styles.closeTrigger, props.className),
       asChild: true,
       children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         IconButton,
@@ -1734,19 +1771,32 @@ function DialogCloseIconTrigger(props) {
   );
 }
 
+// src/components/Portal.tsx
+var import_react15 = require("@ark-ui/react");
+var Portal = import_react15.Portal;
+
+// src/components/dialog/dialog.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function Dialog2(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DialogBackdrop, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DialogContent, { ...props }) })
+  ] });
+}
+
 // src/components/cta-dialog/context.tsx
-var import_react18 = require("react");
-var CTAModalContext = (0, import_react18.createContext)(null);
+var import_react16 = require("react");
+var CTAModalContext = (0, import_react16.createContext)(null);
 
 // src/components/cta-dialog/trigger-item.tsx
 var import_css26 = require("@cerberus/styled-system/css");
 var import_factory = require("@ark-ui/react/factory");
 var import_recipes20 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function TriggerItem(props) {
   const { asChild, children, ...buttonProps } = props;
   if (asChild) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       import_factory.ark.div,
       {
         className: (0, import_css26.cx)(
@@ -1763,7 +1813,7 @@ function TriggerItem(props) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Button,
     {
       ...buttonProps,
@@ -1778,21 +1828,21 @@ function TriggerItem(props) {
 }
 
 // src/components/cta-dialog/provider.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function CTAModal(props) {
-  const [open, setOpen] = (0, import_react19.useState)(false);
-  const [content, setContent] = (0, import_react19.useState)(null);
+  const [open, setOpen] = (0, import_react17.useState)(false);
+  const [content, setContent] = (0, import_react17.useState)(null);
   const confirmIcon = content == null ? void 0 : content.icon;
   const { icons } = useCerberusContext();
   const { confirmModal: FallbackIcon } = icons;
-  const handleShow = (0, import_react19.useCallback)(
+  const handleShow = (0, import_react17.useCallback)(
     (options) => {
       setContent({ ...options });
       setOpen(true);
     },
     [setOpen]
   );
-  const handleActionClick = (0, import_react19.useCallback)(
+  const handleActionClick = (0, import_react17.useCallback)(
     (event) => {
       var _a;
       const index = Number(event.currentTarget.getAttribute("data-index"));
@@ -1803,45 +1853,45 @@ function CTAModal(props) {
     },
     [content, setOpen]
   );
-  const value = (0, import_react19.useMemo)(
+  const value = (0, import_react17.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(CTAModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(CTAModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Dialog, { size: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogCloseIconTrigger, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx4.VStack, { gap: "xl", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx4.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx4.VStack, { gap: "lg", w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Dialog2, { size: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DialogCloseIconTrigger, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx4.VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx4.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx4.VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Avatar,
             {
               ariaLabel: "",
               gradient: "charon-light",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 Show,
                 {
                   when: Boolean(confirmIcon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FallbackIcon, { size: 24 }),
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(FallbackIcon, { size: 24 }),
                   children: confirmIcon
                 }
               ),
               src: ""
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx4.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(For, { each: content == null ? void 0 : content.actions._actions, children: (action, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx4.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(For, { each: content == null ? void 0 : content.actions._actions, children: (action, index) => {
           var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Show,
             {
               when: ((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.type) === "btnAction",
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TriggerItem, { asChild: true, children: action }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action == null ? void 0 : action.text })
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TriggerItem, { asChild: true, children: action }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action == null ? void 0 : action.text })
             },
             index
           );
@@ -1851,7 +1901,7 @@ function CTAModal(props) {
   ] });
 }
 function useCTAModal() {
-  const context = (0, import_react19.useContext)(CTAModalContext);
+  const context = (0, import_react17.useContext)(CTAModalContext);
   if (context === null) {
     throw new Error("useCTAModal must be used within a CTAModal Provider");
   }
@@ -1878,20 +1928,20 @@ function createCTAModalActions(providedActions) {
 }
 
 // src/components/DatePicker.client.tsx
-var import_react21 = require("@ark-ui/react");
+var import_react19 = require("@ark-ui/react");
 var import_recipes22 = require("@cerberus/styled-system/recipes");
 var import_css28 = require("@cerberus/styled-system/css");
 
 // src/components/DatePicker.server.tsx
-var import_react20 = require("@ark-ui/react");
+var import_react18 = require("@ark-ui/react");
 var import_css27 = require("@cerberus/styled-system/css");
 var import_recipes21 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var datePickerStyles = (0, import_recipes21.datePicker)();
 function DatePickerLabel(props) {
   const { className, ...arkProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_react20.DatePicker.Label,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_react18.DatePicker.Label,
     {
       ...arkProps,
       className: (0, import_css27.cx)(
@@ -1904,8 +1954,8 @@ function DatePickerLabel(props) {
   );
 }
 function DatePickerViewControl(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_react20.DatePicker.Control,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_react18.DatePicker.Control,
     {
       ...props,
       className: (0, import_css27.cx)(props.className, datePickerStyles.viewControl)
@@ -1913,8 +1963,8 @@ function DatePickerViewControl(props) {
   );
 }
 function DatePickerTable(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_react20.DatePicker.Table,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_react18.DatePicker.Table,
     {
       ...props,
       className: (0, import_css27.cx)(props.className, datePickerStyles.table)
@@ -1922,8 +1972,8 @@ function DatePickerTable(props) {
   );
 }
 function DatePickerTableHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_react20.DatePicker.TableHeader,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_react18.DatePicker.TableHeader,
     {
       ...props,
       className: (0, import_css27.cx)(props.className, datePickerStyles.tableHeader)
@@ -1931,8 +1981,8 @@ function DatePickerTableHeader(props) {
   );
 }
 function DatePickerTableCell(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_react20.DatePicker.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_react18.DatePicker.TableCell,
     {
       ...props,
       className: (0, import_css27.cx)(props.className, datePickerStyles.tableCell)
@@ -1940,24 +1990,24 @@ function DatePickerTableCell(props) {
   );
 }
 function DatePickerTableCellTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_react20.DatePicker.TableCellTrigger,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_react18.DatePicker.TableCellTrigger,
     {
       ...props,
       className: (0, import_css27.cx)(props.className, datePickerStyles.tableCellTrigger)
     }
   );
 }
-var DatePickerView = import_react20.DatePicker.View;
-var DatePickerContext = import_react20.DatePicker.Context;
+var DatePickerView = import_react18.DatePicker.View;
+var DatePickerContext = import_react18.DatePicker.Context;
 
 // src/components/DatePicker.client.tsx
-var import_react22 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var datePickerStyles2 = (0, import_recipes22.datePicker)();
 function DatePicker(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_react21.DatePicker.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react19.DatePicker.Root,
     {
       ...props,
       positioning: {
@@ -1969,9 +2019,9 @@ function DatePicker(props) {
 function DatePickerViewControlGroup(props) {
   const { icons } = useCerberusContext();
   const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(DatePickerViewControl, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PrevIcon, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DatePickerViewControl, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PrevIcon, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Button,
       {
         className: (0, import_css28.css)({
@@ -1981,17 +2031,17 @@ function DatePickerViewControlGroup(props) {
         shape: "rounded",
         size: "sm",
         usage: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.RangeText, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.RangeText, {})
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(NextIcon, {}) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NextIcon, {}) }) })
   ] });
 }
 function DatePickerTrigger(props) {
   const { icons } = useCerberusContext();
   const { calendar: CalendarIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_react21.DatePicker.Trigger,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react19.DatePicker.Trigger,
     {
       ...props,
       className: (0, import_css28.cx)(
@@ -2002,15 +2052,15 @@ function DatePickerTrigger(props) {
         }),
         datePickerStyles2.trigger
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CalendarIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CalendarIcon, {})
     }
   );
 }
 function DatePickerInput(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react21.DatePicker.Control, { className: datePickerStyles2.control, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerTrigger, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      import_react21.DatePicker.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react19.DatePicker.Control, { className: datePickerStyles2.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerTrigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      import_react19.DatePicker.Input,
       {
         ...props,
         className: (0, import_css28.cx)(props.className, datePickerStyles2.input),
@@ -2022,12 +2072,12 @@ function DatePickerInput(props) {
 }
 function RangePickerInput(props) {
   const { defaultValue, ...nativeProps } = props;
-  const startDate = (0, import_react22.useMemo)(() => defaultValue == null ? void 0 : defaultValue[0], [defaultValue]);
-  const endDate = (0, import_react22.useMemo)(() => defaultValue == null ? void 0 : defaultValue[1], [defaultValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react21.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerTrigger, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      import_react21.DatePicker.Input,
+  const startDate = (0, import_react20.useMemo)(() => defaultValue == null ? void 0 : defaultValue[0], [defaultValue]);
+  const endDate = (0, import_react20.useMemo)(() => defaultValue == null ? void 0 : defaultValue[1], [defaultValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react19.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerTrigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      import_react19.DatePicker.Input,
       {
         ...nativeProps,
         "data-range-input": true,
@@ -2038,8 +2088,8 @@ function RangePickerInput(props) {
         index: 0
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      import_react21.DatePicker.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      import_react19.DatePicker.Input,
       {
         ...nativeProps,
         "data-range-input": true,
@@ -2055,8 +2105,8 @@ function RangePickerInput(props) {
 }
 function DatePickerContent(props) {
   const { children, withModal, ...contentProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Portal, { disabled: withModal ?? false, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.Positioner, { className: datePickerStyles2.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_react21.DatePicker.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Portal, { disabled: withModal ?? false, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.Positioner, { className: datePickerStyles2.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react19.DatePicker.Content,
     {
       ...contentProps,
       className: (0, import_css28.cx)(contentProps.className, datePickerStyles2.content),
@@ -2081,11 +2131,11 @@ function DatePickerDayView(props) {
     if (isPastDay(date)) return "past";
     return "future";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerView, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerContext, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(DatePickerTable, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.TableRow, { children: datePicker3.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerTableHeader, { children: weekDay.narrow }, id)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.TableBody, { children: datePicker3.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerTableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerView, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerContext, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DatePickerTable, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.TableRow, { children: datePicker3.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerTableHeader, { children: weekDay.narrow }, id)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.TableBody, { children: datePicker3.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerTableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         DatePickerTableCellTrigger,
         {
           "data-date": getDayValue(day),
@@ -2096,39 +2146,39 @@ function DatePickerDayView(props) {
   ] }) }) });
 }
 function DatePickerMonthView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.TableBody, { children: datePicker3.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.TableBody, { children: datePicker3.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
   ] }) }) });
 }
 function DatePickerYearView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.TableBody, { children: datePicker3.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react21.DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.TableBody, { children: datePicker3.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
   ] }) }) });
 }
 function DatePickerCalendar(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(DatePickerContent, { withModal: props.withModal, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerDayView, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerMonthView, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DatePickerYearView, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DatePickerContent, { withModal: props.withModal, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerDayView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerMonthView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerYearView, {})
   ] });
 }
 
 // src/components/Droppable.tsx
 var import_core = require("@dnd-kit/core");
-var import_react23 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Droppable(props) {
   const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } = props;
-  const uuid = (0, import_react23.useId)();
+  const uuid = (0, import_react21.useId)();
   const { isOver, setNodeRef } = (0, import_core.useDroppable)({
     data,
     disabled,
     id: id || uuid,
     resizeObserverConfig
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       ...nativeProps,
@@ -2141,14 +2191,14 @@ function Droppable(props) {
 }
 
 // src/context/feature-flags.tsx
-var import_react24 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var FeatureFlagContext = (0, import_react24.createContext)(null);
+var import_react22 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var FeatureFlagContext = (0, import_react22.createContext)(null);
 function FeatureFlags(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
 }
 function useFeatureFlags(key) {
-  const context = (0, import_react24.useContext)(FeatureFlagContext);
+  const context = (0, import_react22.useContext)(FeatureFlagContext);
   if (context === null) {
     throw new Error(
       "useFeatureFlag must be used within a FeatureFlags Provider"
@@ -2158,25 +2208,25 @@ function useFeatureFlags(key) {
 }
 
 // src/components/FeatureFlag.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function FeatureFlag(props) {
   const showContent = useFeatureFlags(props.flag);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Show, { when: showContent, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Show, { when: showContent, children: props.children });
 }
 
 // src/components/fieldset/primitives.tsx
 var import_fieldset = require("@ark-ui/react/fieldset");
 var import_css29 = require("@cerberus/styled-system/css");
 var import_recipes23 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function FieldsetRoot(props) {
   const styles = (0, import_recipes23.fieldset)();
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_fieldset.Fieldset.Root, { ...props, className: (0, import_css29.cx)(styles.root, props.className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_fieldset.Fieldset.Root, { ...props, className: (0, import_css29.cx)(styles.root, props.className) });
 }
 function FieldsetLegend(props) {
   const { usage, ...legendProps } = props;
   const styles = (0, import_recipes23.fieldset)({ usage });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     import_fieldset.Fieldset.Legend,
     {
       ...legendProps,
@@ -2187,7 +2237,7 @@ function FieldsetLegend(props) {
 function FieldsetHelperText(props) {
   const { usage, ...helperTextProps } = props;
   const styles = (0, import_recipes23.fieldset)({ usage });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     import_fieldset.Fieldset.HelperText,
     {
       ...helperTextProps,
@@ -2197,7 +2247,7 @@ function FieldsetHelperText(props) {
 }
 function FieldsetErrorText(props) {
   const styles = (0, import_recipes23.fieldset)();
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     import_fieldset.Fieldset.ErrorText,
     {
       ...props,
@@ -2215,23 +2265,23 @@ var FieldsetParts = {
 };
 
 // src/components/fieldset/fieldset.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Fieldset2(props) {
   const [fieldsetProps, { usage }, rootProps] = splitProps(
     props,
     ["legend", "helperText", "errorText", "children"],
     ["usage"]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(FieldsetParts.Root, { ...rootProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FieldsetParts.Legend, { usage, children: fieldsetProps.legend }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FieldsetParts.HelperText, { usage, children: fieldsetProps.helperText }),
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(FieldsetParts.Root, { ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FieldsetParts.Legend, { usage, children: fieldsetProps.legend }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FieldsetParts.HelperText, { usage, children: fieldsetProps.helperText }),
     fieldsetProps.children,
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FieldsetParts.ErrorText, { children: fieldsetProps.errorText })
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FieldsetParts.ErrorText, { children: fieldsetProps.errorText })
   ] });
 }
 
 // src/components/FileStatus.tsx
-var import_react25 = require("react");
+var import_react23 = require("react");
 var import_recipes25 = require("@cerberus/styled-system/recipes");
 var import_css31 = require("@cerberus/styled-system/css");
 var import_patterns6 = require("@cerberus/styled-system/patterns");
@@ -2239,7 +2289,7 @@ var import_patterns6 = require("@cerberus/styled-system/patterns");
 // src/components/ProgressBar.tsx
 var import_css30 = require("@cerberus/styled-system/css");
 var import_recipes24 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function ProgressBar(props) {
   const { indeterminate, size, usage, now, label: label5, ...nativeProps } = props;
   const styles = (0, import_recipes24.progressBar)({ size, usage });
@@ -2247,7 +2297,7 @@ function ProgressBar(props) {
   const width = {
     width: indeterminate ? "50%" : `${nowClamped}%`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       ...nativeProps,
@@ -2257,7 +2307,7 @@ function ProgressBar(props) {
       "aria-valuenow": indeterminate ? 0 : nowClamped,
       className: (0, import_css30.cx)(nativeProps.className, styles.root),
       role: "progressbar",
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "div",
         {
           ...indeterminate && { "data-indeterminate": true },
@@ -2271,7 +2321,7 @@ function ProgressBar(props) {
 }
 
 // src/components/FileStatus.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var processStatus = /* @__PURE__ */ ((processStatus2) => {
   processStatus2["TODO"] = "todo";
   processStatus2["PROCESSING"] = "processing";
@@ -2281,10 +2331,10 @@ var processStatus = /* @__PURE__ */ ((processStatus2) => {
 })(processStatus || {});
 function FileStatus(props) {
   const { file, now, status, onClick, ...nativeProps } = props;
-  const actionLabel = (0, import_react25.useMemo)(() => getStatusActionLabel(status), [status]);
-  const palette = (0, import_react25.useMemo)(() => getPalette(status), [status]);
-  const modalIconPalette = (0, import_react25.useMemo)(() => getModalIconPalette(status), [status]);
-  const styles = (0, import_react25.useMemo)(() => {
+  const actionLabel = (0, import_react23.useMemo)(() => getStatusActionLabel(status), [status]);
+  const palette = (0, import_react23.useMemo)(() => getPalette(status), [status]);
+  const modalIconPalette = (0, import_react23.useMemo)(() => getModalIconPalette(status), [status]);
+  const styles = (0, import_react23.useMemo)(() => {
     switch (status) {
       case "todo" /* TODO */:
         return (0, import_recipes25.fileStatus)({ status: "todo" });
@@ -2298,7 +2348,7 @@ function FileStatus(props) {
         return (0, import_recipes25.fileStatus)();
     }
   }, [status]);
-  const handleClick = (0, import_react25.useCallback)(
+  const handleClick = (0, import_react23.useCallback)(
     (e) => {
       const actionStatus = getStatusActionLabel(
         status
@@ -2307,22 +2357,22 @@ function FileStatus(props) {
     },
     [onClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       ...nativeProps,
       className: (0, import_css31.cx)(nativeProps.className, styles.root, (0, import_patterns6.hstack)()),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           Avatar,
           {
             ariaLabel: "",
             gradient: modalIconPalette,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(MatchFileStatusIcon, { size: 24, status }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MatchFileStatusIcon, { size: 24, status }),
             src: ""
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           "div",
           {
             className: (0, import_patterns6.vstack)({
@@ -2331,7 +2381,7 @@ function FileStatus(props) {
               w: "full"
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 "small",
                 {
                   className: (0, import_css31.css)({
@@ -2341,7 +2391,7 @@ function FileStatus(props) {
                   children: file
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 ProgressBar,
                 {
                   id: props.id,
@@ -2350,27 +2400,27 @@ function FileStatus(props) {
                   size: "sm"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Field2, { label: "", invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Field2, { label: "", invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 FieldHelperText,
                 {
                   className: (0, import_css31.css)({
                     color: "page.text.100"
                   }),
                   id: `help:${file}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(MatchFileStatusText, { status, now })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MatchFileStatusText, { status, now })
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           IconButton,
           {
             ariaLabel: actionLabel,
             onClick: handleClick,
             palette,
             size: "sm",
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(MatchStatusAction, { status })
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MatchStatusAction, { status })
           }
         )
       ]
@@ -2387,13 +2437,13 @@ function MatchFileStatusIcon(props) {
   } = icons;
   switch (props.status) {
     case "todo" /* TODO */:
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TodoIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TodoIcon, { size: props.size });
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FileUploaderIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(FileUploaderIcon, { size: props.size });
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DoneIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DoneIcon, { size: props.size });
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(InvalidIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(InvalidIcon, { size: props.size });
     default:
       throw new Error("Unknown status");
   }
@@ -2418,11 +2468,11 @@ function MatchStatusAction(props) {
   switch (props.status) {
     case "todo" /* TODO */:
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CloseIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CloseIcon, {});
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RedoIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RedoIcon, {});
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TrashIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TrashIcon, {});
     default:
       throw new Error("Invalid status");
   }
@@ -2471,13 +2521,13 @@ function getModalIconPalette(status) {
 var import_css32 = require("@cerberus/styled-system/css");
 var import_patterns7 = require("@cerberus/styled-system/patterns");
 var import_recipes26 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function FileUploader(props) {
   var _a;
   const { icons } = useCerberusContext();
   const styles = (0, import_recipes26.fileUploader)();
   const { waitingFileUploader: Icon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       ...props.disabled ? { "aria-disabled": true } : {},
@@ -2488,17 +2538,17 @@ function FileUploader(props) {
         styles.container
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           Avatar,
           {
             gradient: "charon-light",
             ariaLabel: "",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, {}),
             size: "md",
             src: ""
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           "label",
           {
             className: (0, import_css32.cx)(
@@ -2509,12 +2559,12 @@ function FileUploader(props) {
             ),
             htmlFor: props.name,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Show, { when: Boolean(props.heading), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: styles.heading, children: props.heading }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Show, { when: Boolean(props.heading), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: styles.heading, children: props.heading }) }),
               "Import ",
               (_a = props.accept) == null ? void 0 : _a.replace(",", ", "),
               " files",
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: styles.description, children: "Click to select files" }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: styles.description, children: "Click to select files" }),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 "input",
                 {
                   ...props,
@@ -2535,11 +2585,11 @@ var import_css33 = require("@cerberus/styled-system/css");
 var import_recipes27 = require("@cerberus/styled-system/recipes");
 var import_patterns8 = require("@cerberus/styled-system/patterns");
 var import_field5 = require("@ark-ui/react/field");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Legend(props) {
   const { size, ...nativeProps } = props;
   const { invalid, required } = (0, import_field5.useFieldContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "legend",
     {
       ...nativeProps,
@@ -2556,7 +2606,7 @@ function Legend(props) {
       ),
       children: [
         nativeProps.children,
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "span",
           {
             className: (0, import_css33.css)({
@@ -2572,18 +2622,18 @@ function Legend(props) {
 }
 
 // src/components/Menu.tsx
-var import_react26 = require("@ark-ui/react");
+var import_react24 = require("@ark-ui/react");
 var import_recipes28 = require("@cerberus/styled-system/recipes");
 var import_css34 = require("@cerberus/styled-system/css");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var menuStyles = (0, import_recipes28.menu)();
-var Menu = import_react26.Menu.Root;
+var Menu = import_react24.Menu.Root;
 function MenuTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react26.Menu.Trigger, { ...props, asChild: true });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react24.Menu.Trigger, { ...props, asChild: true });
 }
 function MenuContent(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react26.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-    import_react26.Menu.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react24.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_react24.Menu.Content,
     {
       ...props,
       className: (0, import_css34.cx)(props.className, menuStyles.content)
@@ -2591,12 +2641,12 @@ function MenuContent(props) {
   ) });
 }
 function MenuItem(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react26.Menu.Item, { ...props, className: (0, import_css34.cx)(props.className, menuStyles.item) });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react24.Menu.Item, { ...props, className: (0, import_css34.cx)(props.className, menuStyles.item) });
 }
-var MenuItemGroup = import_react26.Menu.ItemGroup;
+var MenuItemGroup = import_react24.Menu.ItemGroup;
 function MenuGroupLabel(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-    import_react26.Menu.ItemGroupLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_react24.Menu.ItemGroupLabel,
     {
       ...props,
       className: (0, import_css34.cx)(props.className, menuStyles.itemGroupLabel)
@@ -2604,8 +2654,8 @@ function MenuGroupLabel(props) {
   );
 }
 function MenuSeparator(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-    import_react26.Menu.Separator,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_react24.Menu.Separator,
     {
       ...props,
       className: (0, import_css34.cx)(props.className, menuStyles.separator)
@@ -2617,7 +2667,7 @@ function MenuSeparator(props) {
 var import_css35 = require("@cerberus/styled-system/css");
 var import_patterns9 = require("@cerberus/styled-system/patterns");
 var import_recipes29 = require("@cerberus/styled-system/recipes");
-var import_react27 = require("react");
+var import_react25 = require("react");
 
 // src/aria-helpers/trap-focus.aria.ts
 function trapFocus(modalRef) {
@@ -2646,22 +2696,22 @@ function trapFocus(modalRef) {
 }
 
 // src/components/Notification.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function MatchNotificationIcon(props) {
   const { icons } = useCerberusContext();
   const palette = props.palette || "info";
   const key = `${palette}Notification`;
   const Icon = icons[key];
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, {});
 }
 function Notification(props) {
   const { children, palette, onClose, ...nativeProps } = props;
-  const ref = (0, import_react27.useRef)(null);
+  const ref = (0, import_react25.useRef)(null);
   const onKeyDown = trapFocus(ref);
   const styles = (0, import_recipes29.notification)({ palette });
   const { icons } = useCerberusContext();
   const { close: CloseIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "dialog",
     {
       ...nativeProps,
@@ -2677,8 +2727,8 @@ function Notification(props) {
       onKeyDown,
       ref,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MatchNotificationIcon, { palette }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MatchNotificationIcon, { palette }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "div",
           {
             className: (0, import_patterns9.vstack)({
@@ -2689,14 +2739,14 @@ function Notification(props) {
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "button",
           {
             "aria-label": "Close",
             className: styles.close,
             onClick: onClose,
             value: props.id,
-            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CloseIcon, {})
           }
         )
       ]
@@ -2707,21 +2757,21 @@ function Notification(props) {
 // src/components/NotificationHeading.tsx
 var import_css36 = require("@cerberus/styled-system/css");
 var import_recipes30 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function NotificationHeading(props) {
   const { palette, ...nativeProps } = props;
   const styles = (0, import_recipes30.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: (0, import_css36.cx)(nativeProps.className, styles.heading), ...nativeProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: (0, import_css36.cx)(nativeProps.className, styles.heading), ...nativeProps });
 }
 
 // src/components/NotificationDescription.tsx
 var import_css37 = require("@cerberus/styled-system/css");
 var import_recipes31 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function NotificationDescription(props) {
   const { palette, ...nativeProps } = props;
   const styles = (0, import_recipes31.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "p",
     {
       className: (0, import_css37.cx)(nativeProps.className, styles.description),
@@ -2734,11 +2784,11 @@ function NotificationDescription(props) {
 var import_radio_group = require("@ark-ui/react/radio-group");
 var import_css38 = require("@cerberus/styled-system/css");
 var import_recipes32 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function RadioGroupRoot(props) {
   const { size, orientation, ...rootProps } = props;
   const styles = (0, import_recipes32.radioGroup)({ size, orientation });
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     import_radio_group.RadioGroup.Root,
     {
       ...rootProps,
@@ -2748,7 +2798,7 @@ function RadioGroupRoot(props) {
 }
 function RadioGroupLabel(props) {
   const styles = (0, import_recipes32.radioGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     import_radio_group.RadioGroup.Label,
     {
       ...props,
@@ -2758,7 +2808,7 @@ function RadioGroupLabel(props) {
 }
 function RadioGroupIndicator(props) {
   const styles = (0, import_recipes32.radioGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     import_radio_group.RadioGroup.Indicator,
     {
       ...props,
@@ -2768,7 +2818,7 @@ function RadioGroupIndicator(props) {
 }
 function RadioGroupItem(props) {
   const styles = (0, import_recipes32.radioGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     import_radio_group.RadioGroup.Item,
     {
       ...props,
@@ -2779,7 +2829,7 @@ function RadioGroupItem(props) {
 function RadioGroupItemText(props) {
   const { size, orientation, ...itemTextProps } = props;
   const styles = (0, import_recipes32.radioGroup)({ size, orientation });
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     import_radio_group.RadioGroup.ItemText,
     {
       ...itemTextProps,
@@ -2790,7 +2840,7 @@ function RadioGroupItemText(props) {
 function RadioGroupItemControl(props) {
   const { size, orientation, ...itemControlProps } = props;
   const styles = (0, import_recipes32.radioGroup)({ size, orientation });
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     import_radio_group.RadioGroup.ItemControl,
     {
       ...itemControlProps,
@@ -2799,7 +2849,7 @@ function RadioGroupItemControl(props) {
   );
 }
 function RadioGroupItemHiddenInput(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_radio_group.RadioGroup.ItemHiddenInput, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_radio_group.RadioGroup.ItemHiddenInput, { ...props });
 }
 var RadioGroup = RadioGroupRoot;
 
@@ -2815,13 +2865,13 @@ var RadioParts = {
 };
 
 // src/components/radio/radio.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function Radio(props) {
   const { size, children, ...groupProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(RadioGroupItem, { ...groupProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadioGroupItemControl, { size }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadioGroupItemText, { size, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RadioGroupItemHiddenInput, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(RadioGroupItem, { ...groupProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(RadioGroupItemControl, { size }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(RadioGroupItemText, { size, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(RadioGroupItemHiddenInput, {})
   ] });
 }
 
@@ -2829,11 +2879,11 @@ function Radio(props) {
 var import_rating_group = require("@ark-ui/react/rating-group");
 var import_css39 = require("@cerberus/styled-system/css");
 var import_recipes33 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function RatingRoot(props) {
   const { orientation, size, ...rootProps } = props;
   const styles = (0, import_recipes33.ratingGroup)({ orientation, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_rating_group.RatingGroup.Root,
     {
       ...rootProps,
@@ -2843,7 +2893,7 @@ function RatingRoot(props) {
 }
 function RatingLabel(props) {
   const styles = (0, import_recipes33.ratingGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_rating_group.RatingGroup.Label,
     {
       ...props,
@@ -2853,7 +2903,7 @@ function RatingLabel(props) {
 }
 function RatingControl(props) {
   const styles = (0, import_recipes33.ratingGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_rating_group.RatingGroup.Control,
     {
       ...props,
@@ -2862,12 +2912,12 @@ function RatingControl(props) {
   );
 }
 function RatingContext(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_rating_group.RatingGroup.Context, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_rating_group.RatingGroup.Context, { ...props });
 }
 function RatingItem(props) {
   const { palette, ...itemProps } = props;
   const styles = (0, import_recipes33.ratingGroup)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_rating_group.RatingGroup.Item,
     {
       ...itemProps,
@@ -2876,10 +2926,10 @@ function RatingItem(props) {
   );
 }
 function RatingItemContext(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_rating_group.RatingGroup.ItemContext, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_rating_group.RatingGroup.ItemContext, { ...props });
 }
 function RatingHiddenInput(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_rating_group.RatingGroup.HiddenInput, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_rating_group.RatingGroup.HiddenInput, { ...props });
 }
 
 // src/components/rating/parts.tsx
@@ -2894,21 +2944,21 @@ var RatingParts = {
 };
 
 // src/components/rating/rating.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Rating(props) {
   const [{ label: label5 }, styleProps, rootProps] = splitProps(
     props,
     ["label"],
     ["orientation", "palette", "size"]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(RatingParts.Root, { ...styleProps, ...rootProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Show, { when: Boolean(label5), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(RatingParts.Label, { children: label5 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(RatingParts.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(RatingParts.Context, { children: (context) => context.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(RatingParts.Root, { ...styleProps, ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Show, { when: Boolean(label5), children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RatingParts.Label, { children: label5 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RatingParts.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RatingParts.Context, { children: (context) => context.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       RatingParts.Item,
       {
         index: item,
         palette: styleProps.palette,
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(RatingParts.ItemContext, { children: rootProps.children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RatingParts.ItemContext, { children: rootProps.children })
       },
       item
     )) }) })
@@ -2919,11 +2969,11 @@ function Rating(props) {
 var import_select = require("@ark-ui/react/select");
 var import_recipes34 = require("@cerberus/styled-system/recipes");
 var import_css40 = require("@cerberus/styled-system/css");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function SelectRoot(props) {
   const { size, ...rootProps } = props;
   const styles = (0, import_recipes34.select)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_select.Select.Root,
     {
       ...rootProps,
@@ -2933,14 +2983,14 @@ function SelectRoot(props) {
 }
 function SelectLabel(props) {
   const styles = (0, import_recipes34.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_select.Select.Label, { ...props, className: (0, import_css40.cx)(styles.label, props.className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.Label, { ...props, className: (0, import_css40.cx)(styles.label, props.className) });
 }
 function SelectControl(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_select.Select.Control, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.Control, { ...props });
 }
 function SelectTrigger(props) {
   const styles = (0, import_recipes34.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_select.Select.Trigger,
     {
       ...props,
@@ -2949,11 +2999,11 @@ function SelectTrigger(props) {
   );
 }
 function SelectValueText(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_select.Select.ValueText, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.ValueText, { ...props });
 }
 function SelectIndicator(props) {
   const styles = (0, import_recipes34.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_select.Select.Indicator,
     {
       ...props,
@@ -2962,11 +3012,11 @@ function SelectIndicator(props) {
   );
 }
 function SelectClearTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_select.Select.ClearTrigger, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.ClearTrigger, { ...props });
 }
 function SelectPositioner(props) {
   const styles = (0, import_recipes34.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_select.Select.Positioner,
     {
       ...props,
@@ -2977,7 +3027,7 @@ function SelectPositioner(props) {
 function SelectContent(props) {
   const { size, ...contentProps } = props;
   const styles = (0, import_recipes34.select)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_select.Select.Content,
     {
       ...contentProps,
@@ -2986,11 +3036,11 @@ function SelectContent(props) {
   );
 }
 function SelectItemGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_select.Select.ItemGroup, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.ItemGroup, { ...props });
 }
 function SelectItemGroupLabel(props) {
   const styles = (0, import_recipes34.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_select.Select.ItemGroupLabel,
     {
       ...props,
@@ -3000,14 +3050,14 @@ function SelectItemGroupLabel(props) {
 }
 function SelectItem(props) {
   const styles = (0, import_recipes34.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_select.Select.Item, { ...props, className: (0, import_css40.cx)(styles.item, props.className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.Item, { ...props, className: (0, import_css40.cx)(styles.item, props.className) });
 }
 function SelectItemText(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_select.Select.ItemText, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.ItemText, { ...props });
 }
 function SelectItemIndicator(props) {
   const styles = (0, import_recipes34.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_select.Select.ItemIndicator,
     {
       ...props,
@@ -3016,7 +3066,7 @@ function SelectItemIndicator(props) {
   );
 }
 function SelectHiddenSelect(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_select.Select.HiddenSelect, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.HiddenSelect, { ...props });
 }
 function createSelectCollection(collection) {
   return (0, import_select.createListCollection)({
@@ -3045,52 +3095,52 @@ var SelectParts = {
 
 // src/components/select/select.tsx
 var import_jsx5 = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function Select2(props) {
   const { collection, placeholder, ...rootProps } = props;
   const { icons } = useCerberusContext();
   const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(SelectParts.Root, { collection, ...rootProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectParts.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(SelectParts.Trigger, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectParts.ValueText, { placeholder }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx5.HStack, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Show, { when: props.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(InvalidIcon, { "data-part": "invalid-icon" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectParts.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectArrow, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(SelectParts.Root, { collection, ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectParts.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(SelectParts.Trigger, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectParts.ValueText, { placeholder }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx5.HStack, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Show, { when: props.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(InvalidIcon, { "data-part": "invalid-icon" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectParts.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectArrow, {}) })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectParts.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectParts.Content, { size: rootProps.size, children: props.children }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectParts.HiddenSelect, {})
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectParts.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectParts.Content, { size: rootProps.size, children: props.children }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectParts.HiddenSelect, {})
   ] });
 }
 function Option(props) {
   const { item, ...itemProps } = props;
   const { icons } = useCerberusContext();
   const { selectChecked: CheckedIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(SelectParts.Item, { ...itemProps, item, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectParts.ItemText, { children: item == null ? void 0 : item.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectParts.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CheckedIcon, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(SelectParts.Item, { ...itemProps, item, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectParts.ItemText, { children: item == null ? void 0 : item.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectParts.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CheckedIcon, {}) })
   ] });
 }
 
 // src/components/select/option-group.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function OptionGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectItemGroup, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SelectItemGroup, { ...props });
 }
 function OptionGroupLabel(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectItemGroupLabel, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SelectItemGroupLabel, { ...props });
 }
 
 // src/components/switch/primitives.tsx
-var import_react28 = require("@ark-ui/react");
+var import_react26 = require("@ark-ui/react");
 var import_css41 = require("@cerberus/styled-system/css");
 var import_recipes35 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function SwitchRoot(props) {
   const { size, ...rootProps } = props;
   const styles = (0, import_recipes35.switchRecipe)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-    import_react28.Switch.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    import_react26.Switch.Root,
     {
       ...rootProps,
       className: (0, import_css41.cx)(styles.root, rootProps.className)
@@ -3099,12 +3149,12 @@ function SwitchRoot(props) {
 }
 function SwitchLabel(props) {
   const styles = (0, import_recipes35.switchRecipe)();
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react28.Switch.Label, { ...props, className: (0, import_css41.cx)(styles.label, props.className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react26.Switch.Label, { ...props, className: (0, import_css41.cx)(styles.label, props.className) });
 }
 function SwitchControl(props) {
   const styles = (0, import_recipes35.switchRecipe)();
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-    import_react28.Switch.Control,
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    import_react26.Switch.Control,
     {
       ...props,
       className: (0, import_css41.cx)(styles.control, props.className)
@@ -3113,9 +3163,9 @@ function SwitchControl(props) {
 }
 function SwitchThumb(props) {
   const styles = (0, import_recipes35.switchRecipe)();
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react28.Switch.Thumb, { ...props, className: (0, import_css41.cx)(styles.thumb, props.className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react26.Switch.Thumb, { ...props, className: (0, import_css41.cx)(styles.thumb, props.className) });
 }
-var SwitchHiddenInput = import_react28.Switch.HiddenInput;
+var SwitchHiddenInput = import_react26.Switch.HiddenInput;
 
 // src/components/switch/parts.ts
 var SwitchParts = {
@@ -3127,21 +3177,21 @@ var SwitchParts = {
 };
 
 // src/components/switch/switch-indicator.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function SwitchIndicator() {
   const { icons } = useCerberusContext();
   const { toggleChecked: CheckIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CheckIcon, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CheckIcon, {});
 }
 
 // src/components/switch/switch.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function Switch2(props) {
   const { children, ...rootProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(SwitchParts.Root, { ...rootProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SwitchParts.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SwitchParts.Thumb, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SwitchIndicator, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SwitchParts.Label, { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SwitchParts.HiddenInput, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(SwitchParts.Root, { ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SwitchParts.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SwitchParts.Thumb, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SwitchIndicator, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SwitchParts.Label, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SwitchParts.HiddenInput, {})
   ] });
 }
 
@@ -3152,20 +3202,20 @@ var import_css42 = require("@cerberus/styled-system/css");
 // src/context/tabs.tsx
 var import_tabs = require("@ark-ui/react/tabs");
 var import_recipes36 = require("@cerberus/styled-system/recipes");
-var import_react29 = require("react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
-var TabsContext = (0, import_react29.createContext)(null);
+var import_react27 = require("react");
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var TabsContext = (0, import_react27.createContext)(null);
 function Tabs(props) {
   const { cache, defaultValue, palette, uuid, ...arkProps } = props;
-  const [activeTab, setActiveTab] = (0, import_react29.useState)(
+  const [activeTab, setActiveTab] = (0, import_react27.useState)(
     () => cache ? "" : defaultValue
   );
   const styles = (0, import_recipes36.tabs)({ palette });
-  const cacheKey = (0, import_react29.useMemo)(
+  const cacheKey = (0, import_react27.useMemo)(
     () => uuid ? `cerberus-tabs-${uuid}` : "cerberus-tabs",
     [uuid]
   );
-  const handleValueChange = (0, import_react29.useCallback)(
+  const handleValueChange = (0, import_react27.useCallback)(
     (details) => {
       if (cache) {
         setLocalStorage(cacheKey, details.value);
@@ -3174,20 +3224,20 @@ function Tabs(props) {
     },
     [cache]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (cache && !activeTab) {
       const cachedTab = getLocalStorage(cacheKey, defaultValue ?? "");
       setActiveTab(cachedTab);
     }
   }, [cache, defaultValue, activeTab]);
-  const value = (0, import_react29.useMemo)(
+  const value = (0, import_react27.useMemo)(
     () => ({
       active: activeTab,
       styles
     }),
     [activeTab, palette, styles]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TabsContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TabsContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     import_tabs.Tabs.Root,
     {
       ...arkProps,
@@ -3201,7 +3251,7 @@ function Tabs(props) {
   ) });
 }
 function useTabsContext() {
-  const context = (0, import_react29.useContext)(TabsContext);
+  const context = (0, import_react27.useContext)(TabsContext);
   if (!context) {
     throw new Error("useTabsContext must be used within a Tabs Provider.");
   }
@@ -3209,18 +3259,18 @@ function useTabsContext() {
 }
 
 // src/components/Tabs.client.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function TabsList(props) {
   const { children, ...tabsProps } = props;
   const { styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     import_tabs2.Tabs.List,
     {
       ...tabsProps,
       className: (0, import_css42.cx)(tabsProps.className, styles.list),
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TabIndicator, {})
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TabIndicator, {})
       ]
     }
   );
@@ -3228,7 +3278,7 @@ function TabsList(props) {
 var TabList = TabsList;
 function Tab(props) {
   const { styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     import_tabs2.Tabs.Trigger,
     {
       ...props,
@@ -3238,7 +3288,7 @@ function Tab(props) {
 }
 function TabIndicator(props) {
   const { styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     import_tabs2.Tabs.Indicator,
     {
       ...props,
@@ -3248,7 +3298,7 @@ function TabIndicator(props) {
 }
 function TabPanel(props) {
   const { styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     import_tabs2.Tabs.Content,
     {
       ...props,
@@ -3260,52 +3310,52 @@ function TabPanel(props) {
 // src/components/Table.tsx
 var import_css43 = require("@cerberus/styled-system/css");
 var import_recipes37 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function Table(props) {
   const { caption, children, ...nativeProps } = props;
   const styles = (0, import_recipes37.table)();
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
     "table",
     {
       ...nativeProps,
       className: (0, import_css43.cx)(nativeProps.className, styles.table),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("caption", { className: styles.caption, children: caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("caption", { className: styles.caption, children: caption }),
         children
       ]
     }
   ) });
 }
 function Tr(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("tr", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tr", { ...props });
 }
 
 // src/components/Thead.tsx
 var import_css44 = require("@cerberus/styled-system/css");
 var import_recipes38 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function Thead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("thead", { ...props, className: (0, import_css44.cx)(props.className, (0, import_recipes38.thead)()) });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("thead", { ...props, className: (0, import_css44.cx)(props.className, (0, import_recipes38.thead)()) });
 }
 
 // src/components/Th.tsx
 var import_css45 = require("@cerberus/styled-system/css");
 var import_recipes39 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function Th(props) {
   const { size, onClick, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     Show,
     {
       when: Boolean(onClick),
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
         "th",
         {
           ...nativeProps,
           className: (0, import_css45.cx)(nativeProps.className, (0, import_recipes39.th)({ size }))
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
         "button",
         {
           className: (0, import_css45.cx)(
@@ -3333,10 +3383,10 @@ function Th(props) {
 // src/components/Td.tsx
 var import_css46 = require("@cerberus/styled-system/css");
 var import_recipes40 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function Td(props) {
   const { size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     "td",
     {
       ...nativeProps,
@@ -3353,10 +3403,10 @@ function Td(props) {
 // src/components/Tbody.tsx
 var import_recipes41 = require("@cerberus/styled-system/recipes");
 var import_css47 = require("@cerberus/styled-system/css");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 function Tbody(props) {
   const { decoration, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     "tbody",
     {
       ...nativeProps,
@@ -3373,7 +3423,7 @@ function Tbody(props) {
 // src/components/Tag.tsx
 var import_css48 = require("@cerberus/styled-system/css");
 var import_recipes42 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function Tag(props) {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
   const palette = (props == null ? void 0 : props.palette) ?? "page";
@@ -3382,7 +3432,7 @@ function Tag(props) {
   const closableStyles = isClosable ? closableCss : "";
   const { icons } = useCerberusContext();
   const { close: Close } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "span",
     {
       ...nativeProps,
@@ -3398,7 +3448,7 @@ function Tag(props) {
       ),
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "button",
           {
             "aria-label": "Close",
@@ -3408,7 +3458,7 @@ function Tag(props) {
               size: "sm"
             }),
             onClick,
-            children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Close, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Close, {})
           }
         ) })
       ]
@@ -3436,22 +3486,22 @@ var ToggleParts = {
 var import_tooltip = require("@ark-ui/react/tooltip");
 var import_css49 = require("@cerberus/styled-system/css");
 var import_recipes43 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function Tooltip(props) {
   const { content, children, asChild, ...nativeProps } = props;
   const styles = (0, import_recipes43.tooltip)();
   const position = {
     placement: props.position || "top"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, asChild, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, asChild, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
       import_tooltip.Tooltip.Content,
       {
         ...nativeProps,
         className: (0, import_css49.cx)(nativeProps.className, styles.content),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
           content
         ]
       }
@@ -3460,23 +3510,23 @@ function Tooltip(props) {
 }
 
 // src/context/confirm-modal.tsx
-var import_react30 = require("react");
+var import_react28 = require("react");
 var import_css50 = require("@cerberus/styled-system/css");
 var import_jsx6 = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime69 = require("react/jsx-runtime");
-var ConfirmModalContext = (0, import_react30.createContext)(null);
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var ConfirmModalContext = (0, import_react28.createContext)(null);
 function ConfirmModal(props) {
-  const [open, setOpen] = (0, import_react30.useState)(false);
-  const [content, setContent] = (0, import_react30.useState)(null);
-  const resolveRef = (0, import_react30.useRef)(null);
+  const [open, setOpen] = (0, import_react28.useState)(false);
+  const [content, setContent] = (0, import_react28.useState)(null);
+  const resolveRef = (0, import_react28.useRef)(null);
   const kind = (content == null ? void 0 : content.kind) ?? "non-destructive";
   const { icons } = useCerberusContext();
   const { confirmModal: ConfirmIcon } = icons;
-  const palette = (0, import_react30.useMemo)(
+  const palette = (0, import_react28.useMemo)(
     () => kind === "destructive" ? "danger" : "action",
     [kind]
   );
-  const handleChoice = (0, import_react30.useCallback)(
+  const handleChoice = (0, import_react28.useCallback)(
     (e) => {
       var _a, _b;
       const target = e.currentTarget;
@@ -3488,7 +3538,7 @@ function ConfirmModal(props) {
     },
     [setOpen]
   );
-  const handleShow = (0, import_react30.useCallback)(
+  const handleShow = (0, import_react28.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options });
@@ -3498,42 +3548,42 @@ function ConfirmModal(props) {
     },
     [setOpen, setContent]
   );
-  const value = (0, import_react30.useMemo)(
+  const value = (0, import_react28.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(ConfirmModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx6.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx6.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Dialog2, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx6.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx6.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           import_jsx6.HStack,
           {
             alignSelf: "center",
             justify: "center",
             paddingBlockEnd: "md",
             w: "full",
-            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -3541,11 +3591,11 @@ function ConfirmModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx6.HStack, { gap: "4", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx6.HStack, { gap: "4", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           Button,
           {
             autoFocus: true,
@@ -3559,7 +3609,7 @@ function ConfirmModal(props) {
             children: content == null ? void 0 : content.actionText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           Button,
           {
             className: (0, import_css50.css)({
@@ -3577,7 +3627,7 @@ function ConfirmModal(props) {
   ] });
 }
 function useConfirmModal() {
-  const context = (0, import_react30.useContext)(ConfirmModalContext);
+  const context = (0, import_react28.useContext)(ConfirmModalContext);
   if (context === null) {
     throw new Error(
       "useConfirmModal must be used within a ConfirmModal Provider"
@@ -3587,7 +3637,7 @@ function useConfirmModal() {
 }
 
 // src/context/notification-center.tsx
-var import_react31 = require("react");
+var import_react29 = require("react");
 var import_patterns10 = require("@cerberus/styled-system/patterns");
 var import_recipes44 = require("@cerberus/styled-system/recipes");
 var import_css51 = require("@cerberus/styled-system/css");
@@ -3623,16 +3673,16 @@ function clearNotificationState(dispatch) {
 }
 
 // src/context/notification-center.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
-var NotificationsContext = (0, import_react31.createContext)(null);
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var NotificationsContext = (0, import_react29.createContext)(null);
 function NotificationCenter(props) {
-  const [state, dispatch] = (0, import_react31.useReducer)(notificationCenterReducer, []);
+  const [state, dispatch] = (0, import_react29.useReducer)(notificationCenterReducer, []);
   const styles = (0, import_recipes44.notification)();
-  const timeout = (0, import_react31.useMemo)(
+  const timeout = (0, import_react29.useMemo)(
     () => props.duration || 6e3,
     [props.duration]
   );
-  const closeNotification = (0, import_react31.useCallback)(
+  const closeNotification = (0, import_react29.useCallback)(
     (id) => {
       updateNotificationState(dispatch, {
         id,
@@ -3644,7 +3694,7 @@ function NotificationCenter(props) {
     },
     [dispatch]
   );
-  const handleNotify = (0, import_react31.useCallback)(
+  const handleNotify = (0, import_react29.useCallback)(
     (options) => {
       const id = `${options.palette}:${state.length + 1}`;
       addNotification(dispatch, {
@@ -3658,29 +3708,29 @@ function NotificationCenter(props) {
     },
     [dispatch, state, timeout, closeNotification]
   );
-  const handleClose = (0, import_react31.useCallback)(
+  const handleClose = (0, import_react29.useCallback)(
     (e) => {
       const target = e.currentTarget;
       closeNotification(target.value);
     },
     [closeNotification]
   );
-  const handleCloseAll = (0, import_react31.useCallback)(() => {
+  const handleCloseAll = (0, import_react29.useCallback)(() => {
     state.forEach((item) => {
       if (item.onClose) item.onClose();
     });
     clearNotificationState(dispatch);
   }, [state, dispatch]);
-  const value = (0, import_react31.useMemo)(
+  const value = (0, import_react29.useMemo)(
     () => ({
       notify: handleNotify
     }),
     [handleNotify]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(NotificationsContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(NotificationsContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Show, { when: state.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: styles.center, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Show, { when: state.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Show, { when: state.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: styles.center, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Show, { when: state.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
         Button,
         {
           className: (0, import_css51.cx)(styles.closeAll, (0, import_patterns10.animateIn)()),
@@ -3692,7 +3742,7 @@ function NotificationCenter(props) {
           children: "Close all"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
         "div",
         {
           className: (0, import_patterns10.vstack)({
@@ -3702,7 +3752,7 @@ function NotificationCenter(props) {
           style: {
             alignItems: "flex-end"
           },
-          children: state.map((option) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          children: state.map((option) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
             MatchNotification,
             {
               ...option,
@@ -3718,7 +3768,7 @@ function NotificationCenter(props) {
 }
 function MatchNotification(props) {
   const { palette, id, onClose, heading, description, open } = props;
-  const sharedProps = (0, import_react31.useMemo)(
+  const sharedProps = (0, import_react29.useMemo)(
     () => ({
       id,
       open: true,
@@ -3729,30 +3779,30 @@ function MatchNotification(props) {
   );
   switch (palette) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Notification, { ...sharedProps, palette: "success", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(NotificationHeading, { palette: "success", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(NotificationDescription, { palette: "success", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Notification, { ...sharedProps, palette: "success", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(NotificationHeading, { palette: "success", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(NotificationDescription, { palette: "success", children: description })
       ] });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Notification, { ...sharedProps, palette: "warning", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(NotificationHeading, { palette: "warning", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(NotificationDescription, { palette: "warning", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Notification, { ...sharedProps, palette: "warning", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(NotificationHeading, { palette: "warning", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(NotificationDescription, { palette: "warning", children: description })
       ] });
     case "danger":
-      return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Notification, { ...sharedProps, palette: "danger", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(NotificationHeading, { palette: "danger", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(NotificationDescription, { palette: "danger", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Notification, { ...sharedProps, palette: "danger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(NotificationHeading, { palette: "danger", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(NotificationDescription, { palette: "danger", children: description })
       ] });
     case "info":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Notification, { ...sharedProps, palette: "info", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(NotificationHeading, { palette: "info", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(NotificationDescription, { palette: "info", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Notification, { ...sharedProps, palette: "info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(NotificationHeading, { palette: "info", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(NotificationDescription, { palette: "info", children: description })
       ] });
   }
 }
 function useNotificationCenter() {
-  const context = (0, import_react31.useContext)(NotificationsContext);
+  const context = (0, import_react29.useContext)(NotificationsContext);
   if (!context) {
     throw new Error(
       "useNotificationCenter must be used within a NotificationsProvider"
@@ -3762,35 +3812,35 @@ function useNotificationCenter() {
 }
 
 // src/context/prompt-modal.tsx
-var import_react32 = require("react");
-var import_react33 = require("@ark-ui/react");
+var import_react30 = require("react");
+var import_react31 = require("@ark-ui/react");
 var import_jsx7 = require("@cerberus/styled-system/jsx");
 var import_css52 = require("@cerberus/styled-system/css");
 var import_patterns11 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime71 = require("react/jsx-runtime");
-var PromptModalContext = (0, import_react32.createContext)(null);
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var PromptModalContext = (0, import_react30.createContext)(null);
 function PromptModal(props) {
-  const resolveRef = (0, import_react32.useRef)(null);
-  const [open, setOpen] = (0, import_react32.useState)(false);
-  const [content, setContent] = (0, import_react32.useState)(null);
-  const [inputValue, setInputValue] = (0, import_react32.useState)("");
+  const resolveRef = (0, import_react30.useRef)(null);
+  const [open, setOpen] = (0, import_react30.useState)(false);
+  const [content, setContent] = (0, import_react30.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react30.useState)("");
   const { icons } = useCerberusContext();
   const { promptModal: PromptIcon } = icons;
-  const isValid = (0, import_react32.useMemo)(
+  const isValid = (0, import_react30.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react32.useMemo)(
+  const palette = (0, import_react30.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react32.useCallback)(
+  const handleChange = (0, import_react30.useCallback)(
     (e) => {
       setInputValue(e.currentTarget.value);
     },
     [content]
   );
-  const handleChoice = (0, import_react32.useCallback)(
+  const handleChoice = (0, import_react30.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
@@ -3801,7 +3851,7 @@ function PromptModal(props) {
     },
     [inputValue, setOpen]
   );
-  const handleShow = (0, import_react32.useCallback)(
+  const handleShow = (0, import_react30.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
@@ -3811,42 +3861,42 @@ function PromptModal(props) {
     },
     [setOpen]
   );
-  const value = (0, import_react32.useMemo)(
+  const value = (0, import_react30.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx7.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx7.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Dialog2, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx7.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx7.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           import_jsx7.HStack,
           {
             alignSelf: "center",
             justify: "center",
             paddingBlockEnd: "md",
             w: "full",
-            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -3854,17 +3904,17 @@ function PromptModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         import_jsx7.VStack,
         {
           alignItems: "flex-start",
           marginBlockStart: "md",
           marginBlockEnd: "lg",
           w: "full",
-          children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
             FieldRoot,
             {
               ids: {
@@ -3872,7 +3922,7 @@ function PromptModal(props) {
               },
               invalid: !isValid,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
                   FieldLabel,
                   {
                     className: (0, import_patterns11.hstack)({
@@ -3883,19 +3933,19 @@ function PromptModal(props) {
                     }),
                     children: [
                       "Type",
-                      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Text, { as: "strong", textTransform: "uppercase", children: content == null ? void 0 : content.key }),
+                      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Text, { as: "strong", textTransform: "uppercase", children: content == null ? void 0 : content.key }),
                       "to confirm"
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Input, { name: "confirm", onChange: handleChange, type: "text" })
+                /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Input, { name: "confirm", onChange: handleChange, type: "text" })
               ]
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx7.HStack, { gap: "md", justify: "stretch", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx7.HStack, { gap: "md", justify: "stretch", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           Button,
           {
             autoFocus: true,
@@ -3910,7 +3960,7 @@ function PromptModal(props) {
             children: content == null ? void 0 : content.actionText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_react33.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_react31.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           Button,
           {
             className: (0, import_css52.css)({
@@ -3928,7 +3978,7 @@ function PromptModal(props) {
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react32.useContext)(PromptModalContext);
+  const context = (0, import_react30.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }
@@ -3936,50 +3986,50 @@ function usePromptModal() {
 }
 
 // src/context/theme.tsx
-var import_react35 = require("react");
+var import_react33 = require("react");
 
 // src/hooks/useTheme.ts
-var import_react34 = require("react");
+var import_react32 = 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_react34.useState)(defaultTheme);
-  const [colorMode, setColorMode] = (0, import_react34.useState)(defaultColorMode);
-  const handleThemeChange = (0, import_react34.useCallback)(
+  const [theme, setTheme] = (0, import_react32.useState)(defaultTheme);
+  const [colorMode, setColorMode] = (0, import_react32.useState)(defaultColorMode);
+  const handleThemeChange = (0, import_react32.useCallback)(
     (newTheme) => {
       setTheme(newTheme);
       updateTheme == null ? void 0 : updateTheme(newTheme);
     },
     [updateTheme]
   );
-  const handleColorModeChange = (0, import_react34.useCallback)(
+  const handleColorModeChange = (0, import_react32.useCallback)(
     (newMode) => {
       setColorMode(newMode);
       updateMode == null ? void 0 : updateMode(newMode);
     },
     [updateMode]
   );
-  (0, import_react34.useLayoutEffect)(() => {
+  (0, import_react32.useLayoutEffect)(() => {
     const theme2 = localStorage.getItem(THEME_KEY);
     if (theme2) {
       setTheme(theme2);
     }
   }, []);
-  (0, import_react34.useLayoutEffect)(() => {
+  (0, import_react32.useLayoutEffect)(() => {
     const mode = localStorage.getItem(MODE_KEY);
     if (mode) {
       setColorMode(mode);
     }
   }, []);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const root = document.documentElement;
     root.dataset.pandaTheme = theme;
     if (cache) {
       localStorage.setItem(THEME_KEY, theme);
     }
   }, [theme, cache]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const root = document.documentElement;
     if (colorMode === "system") {
       root.dataset.colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -3990,7 +4040,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
       localStorage.setItem(MODE_KEY, colorMode);
     }
   }, [colorMode, cache]);
-  return (0, import_react34.useMemo)(
+  return (0, import_react32.useMemo)(
     () => ({
       theme,
       mode: colorMode,
@@ -4002,8 +4052,8 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 }
 
 // src/context/theme.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react35.createContext)(
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react33.createContext)(
   null
 );
 function ThemeProvider(props) {
@@ -4012,10 +4062,10 @@ function ThemeProvider(props) {
     updateMode: props.updateMode,
     updateTheme: props.updateTheme
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ThemeContext.Provider, { value: state, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
-  const context = (0, import_react35.useContext)(ThemeContext);
+  const context = (0, import_react33.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useThemeContext must be used within a ThemeProvider");
   }
@@ -4023,20 +4073,20 @@ function useThemeContext() {
 }
 
 // src/hooks/useRootColors.ts
-var import_react36 = require("react");
+var import_react34 = require("react");
 function useRootColors(colors = []) {
-  const [state, dispatch] = (0, import_react36.useReducer)(rootColorsReducer, {});
-  const handleRefetch = (0, import_react36.useCallback)(() => {
+  const [state, dispatch] = (0, import_react34.useReducer)(rootColorsReducer, {});
+  const handleRefetch = (0, import_react34.useCallback)(() => {
     return new Promise((resolve) => {
       dispatch(formatColors(colors));
       resolve();
     });
   }, []);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (Object.keys(state).length === colors.length) return;
     dispatch(formatColors(colors));
   }, [colors]);
-  return (0, import_react36.useMemo)(
+  return (0, import_react34.useMemo)(
     () => ({ colors: state, refetch: handleRefetch }),
     [state, handleRefetch]
   );
@@ -4057,9 +4107,9 @@ function rootColorsReducer(state, action) {
 }
 
 // src/config/icons/checkbox.icons.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 function CheckmarkIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     "svg",
     {
       "aria-hidden": "true",
@@ -4068,7 +4118,7 @@ function CheckmarkIcon(props) {
       role: "img",
       viewBox: "0 0 24 24",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
         "path",
         {
           fill: "currentColor",
@@ -4079,7 +4129,7 @@ function CheckmarkIcon(props) {
   );
 }
 function IndeterminateIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     "svg",
     {
       "aria-hidden": "true",
@@ -4088,15 +4138,15 @@ function IndeterminateIcon(props) {
       fill: "none",
       viewBox: "0 0 24 24",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
     }
   );
 }
 
 // src/components/AnimatingUploadIcon.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 function AnimatingUploadIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     "svg",
     {
       "aria-hidden": "true",
@@ -4104,7 +4154,7 @@ function AnimatingUploadIcon(props) {
       width: props.size ?? "1em",
       height: props.size ?? "1em",
       viewBox: "0 0 24 24",
-      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
         "g",
         {
           fill: "none",
@@ -4113,14 +4163,14 @@ function AnimatingUploadIcon(props) {
           strokeLinejoin: "round",
           strokeWidth: 1.5,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               "path",
               {
                 "data-name": "animating-trail",
                 strokeDasharray: "2 4",
                 strokeDashoffset: 6,
                 d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
-                children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                   "animate",
                   {
                     attributeName: "stroke-dashoffset",
@@ -4131,14 +4181,14 @@ function AnimatingUploadIcon(props) {
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               "path",
               {
                 "data-name": "half-circle",
                 strokeDasharray: 32,
                 strokeDashoffset: 32,
                 d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
-                children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                   "animate",
                   {
                     fill: "freeze",
@@ -4150,7 +4200,7 @@ function AnimatingUploadIcon(props) {
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               "svg",
               {
                 "aria-hidden": "true",
@@ -4160,7 +4210,7 @@ function AnimatingUploadIcon(props) {
                 x: "27%",
                 y: "27%",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                   "polygon",
                   {
                     fill: "currentColor",
@@ -4168,7 +4218,7 @@ function AnimatingUploadIcon(props) {
                     strokeWidth: 0.8,
                     opacity: "1",
                     points: "3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 ",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                       "animate",
                       {
                         fill: "freeze",
@@ -4261,8 +4311,10 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   DialogContent,
   DialogDescription,
   DialogHeading,
+  DialogParts,
   DialogPositioner,
   DialogProvider,
+  DialogRoot,
   DialogTrigger,
   Droppable,
   FeatureFlag,