@cerberus-design/react 0.15.0-next-32cd15e → 0.15.0-next-199cf16

package/build/legacy/index.cjs

@@ -32,6 +32,8 @@ __export(src_exports, {
   AdmonitionHeading: () => AdmonitionHeading,
   Avatar: () => Avatar,
   Button: () => Button,
+  ButtonIcon: () => ButtonIcon,
+  ButtonParts: () => ButtonParts,
   CTAModal: () => CTAModal,
   CerberusProvider: () => CerberusProvider,
   Checkbox: () => Checkbox,
@@ -799,16 +801,101 @@ function AdmonitionDescription(props) {
   );
 }
 
-// src/components/Button.tsx
+// src/components/button/button.tsx
+var import_react9 = require("react");
 var import_css14 = require("@cerberus/styled-system/css");
 var import_recipes9 = require("@cerberus/styled-system/recipes");
+
+// src/components/Spinner.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-function Button(props) {
-  const { palette, usage, shape, size, ...nativeProps } = props;
+function Spinner(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "svg",
+    {
+      "aria-busy": "true",
+      role: "status",
+      xmlns: "http://www.w3.org/2000/svg",
+      height: props.size,
+      width: props.size,
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        "g",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              "path",
+              {
+                strokeDasharray: 16,
+                strokeDashoffset: 16,
+                d: "M12 3c4.97 0 9 4.03 9 9",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    "animate",
+                    {
+                      fill: "freeze",
+                      attributeName: "stroke-dashoffset",
+                      dur: "0.15s",
+                      values: "16;0"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    "animateTransform",
+                    {
+                      attributeName: "transform",
+                      dur: "0.75s",
+                      repeatCount: "indefinite",
+                      type: "rotate",
+                      values: "0 12 12;360 12 12"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "path",
+              {
+                strokeDasharray: 64,
+                strokeDashoffset: 64,
+                strokeOpacity: 0.3,
+                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z",
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  "animate",
+                  {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.6s",
+                    values: "64;0"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/button/button.tsx
+var import_jsx = require("@cerberus/styled-system/jsx");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ButtonContext = (0, import_react9.createContext)({
+  pending: false
+});
+function Button(props) {
+  const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
+  const value = (0, import_react9.useMemo)(() => ({ pending }), [pending]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "button",
     {
       ...nativeProps,
+      disabled: pending || nativeProps.disabled,
       className: (0, import_css14.cx)(
         nativeProps.className,
         (0, import_recipes9.button)({
@@ -819,8 +906,18 @@ function Button(props) {
         })
       )
     }
-  );
+  ) });
 }
+function ButtonIcon(props) {
+  const { pending } = (0, import_react9.useContext)(ButtonContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Show, { when: pending, fallback: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: props.children }), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx.Box, { w: "4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Spinner, {}) }) });
+}
+
+// src/components/button/parts.ts
+var ButtonParts = {
+  Root: Button,
+  Icon: ButtonIcon
+};
 
 // src/components/Checkbox.tsx
 var import_recipes10 = require("@cerberus/styled-system/recipes");
@@ -828,11 +925,11 @@ var import_patterns5 = require("@cerberus/styled-system/patterns");
 var import_css15 = require("@cerberus/styled-system/css");
 
 // src/context/field.tsx
-var import_react9 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var FieldContext = (0, import_react9.createContext)(null);
+var import_react10 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var FieldContext = (0, import_react10.createContext)(null);
 function Field(props) {
-  const value = (0, import_react9.useMemo)(
+  const value = (0, import_react10.useMemo)(
     () => ({
       disabled: props.disabled,
       readOnly: props.readOnly,
@@ -841,10 +938,10 @@ function Field(props) {
     }),
     [props.disabled, props.readOnly, props.required, props.invalid]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FieldContext.Provider, { value, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FieldContext.Provider, { value, children: props.children });
 }
 function useFieldContext() {
-  const context = (0, import_react9.useContext)(FieldContext);
+  const context = (0, import_react10.useContext)(FieldContext);
   if (!context) {
     throw new Error("useFieldContext must be used within a Field Provider.");
   }
@@ -852,7 +949,7 @@ function useFieldContext() {
 }
 
 // src/components/Checkbox.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Checkbox(props) {
   const { describedBy, size, checked, mixed, ...nativeProps } = props;
   const { invalid, ...fieldStates } = useFieldContext();
@@ -865,7 +962,7 @@ function Checkbox(props) {
   if (!IndeterminateIcon2) {
     throw new Error("The CerberusProvider is missing the indeterminate icon.");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       className: (0, import_css15.cx)(
@@ -876,7 +973,7 @@ function Checkbox(props) {
         })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "input",
           {
             ...nativeProps,
@@ -888,8 +985,8 @@ function Checkbox(props) {
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Show, { when: checked && !mixed, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckIcon, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Show, { when: mixed, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IndeterminateIcon2, {}) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Show, { when: checked && !mixed, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CheckIcon, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Show, { when: mixed, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IndeterminateIcon2, {}) }) })
       ]
     }
   );
@@ -898,14 +995,14 @@ function Checkbox(props) {
 // src/components/CircularProgress.tsx
 var import_patterns6 = require("@cerberus/styled-system/patterns");
 var import_css16 = require("@cerberus/styled-system/css");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function CircularProgress(props) {
   const strokeW = 14;
   const radius = `calc(50% * (1 - ${strokeW}/100))`;
   const status = props.syntax ?? "Done";
   const now = props.now >= 100 ? 100 : props.now;
   const bgStyle = props.bgStyle ?? "filled";
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       id: props.id,
@@ -920,7 +1017,7 @@ function CircularProgress(props) {
         position: "relative"
       }),
       role: "progressbar",
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "svg",
         {
           "data-complete": now === 100,
@@ -935,17 +1032,17 @@ function CircularProgress(props) {
           viewBox: "0 0 100 100",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("title", { children: props.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("desc", { children: `${now}% ${status}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("linearGradient", { id: "gradient", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("title", { children: props.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("desc", { children: `${now}% ${status}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("linearGradient", { id: "gradient", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "stop",
                 {
                   offset: "0%",
                   stopColor: "var(--cerberus-colors-data-viz-progress-start)"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "stop",
                 {
                   offset: "100%",
@@ -953,7 +1050,7 @@ function CircularProgress(props) {
                 }
               )
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "circle",
               {
                 className: (0, import_css16.css)({
@@ -965,7 +1062,7 @@ function CircularProgress(props) {
                 pathLength: "100"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "circle",
               {
                 className: (0, import_css16.css)({
@@ -977,7 +1074,7 @@ function CircularProgress(props) {
                 pathLength: "100"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "circle",
               {
                 "data-complete": now === 100,
@@ -998,8 +1095,8 @@ function CircularProgress(props) {
                 transform: "rotate(-90 50 50)"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("g", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("g", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                 "text",
                 {
                   className: (0, import_css16.css)({
@@ -1017,7 +1114,7 @@ function CircularProgress(props) {
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "text",
                 {
                   className: (0, import_css16.css)({
@@ -1041,26 +1138,26 @@ function CircularProgress(props) {
 }
 
 // src/components/DatePicker.client.tsx
-var import_react12 = require("@ark-ui/react");
+var import_react13 = require("@ark-ui/react");
 
 // src/components/Portal.tsx
-var import_react10 = require("@ark-ui/react");
-var Portal = import_react10.Portal;
+var import_react11 = require("@ark-ui/react");
+var Portal = import_react11.Portal;
 
 // src/components/DatePicker.client.tsx
 var import_recipes13 = require("@cerberus/styled-system/recipes");
 var import_css19 = require("@cerberus/styled-system/css");
 
 // src/components/DatePicker.server.tsx
-var import_react11 = require("@ark-ui/react");
+var import_react12 = require("@ark-ui/react");
 var import_css17 = require("@cerberus/styled-system/css");
 var import_recipes11 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var datePickerStyles = (0, import_recipes11.datePicker)();
 function DatePickerLabel(props) {
   const { className, ...arkProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react11.DatePicker.Label,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react12.DatePicker.Label,
     {
       ...arkProps,
       className: (0, import_css17.cx)(
@@ -1073,8 +1170,8 @@ function DatePickerLabel(props) {
   );
 }
 function DatePickerViewControl(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react11.DatePicker.Control,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react12.DatePicker.Control,
     {
       ...props,
       className: (0, import_css17.cx)(props.className, datePickerStyles.viewControl)
@@ -1082,8 +1179,8 @@ function DatePickerViewControl(props) {
   );
 }
 function DatePickerTable(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react11.DatePicker.Table,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react12.DatePicker.Table,
     {
       ...props,
       className: (0, import_css17.cx)(props.className, datePickerStyles.table)
@@ -1091,8 +1188,8 @@ function DatePickerTable(props) {
   );
 }
 function DatePickerTableHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react11.DatePicker.TableHeader,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react12.DatePicker.TableHeader,
     {
       ...props,
       className: (0, import_css17.cx)(props.className, datePickerStyles.tableHeader)
@@ -1100,8 +1197,8 @@ function DatePickerTableHeader(props) {
   );
 }
 function DatePickerTableCell(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react11.DatePicker.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react12.DatePicker.TableCell,
     {
       ...props,
       className: (0, import_css17.cx)(props.className, datePickerStyles.tableCell)
@@ -1109,24 +1206,24 @@ function DatePickerTableCell(props) {
   );
 }
 function DatePickerTableCellTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react11.DatePicker.TableCellTrigger,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react12.DatePicker.TableCellTrigger,
     {
       ...props,
       className: (0, import_css17.cx)(props.className, datePickerStyles.tableCellTrigger)
     }
   );
 }
-var DatePickerView = import_react11.DatePicker.View;
-var DatePickerContext = import_react11.DatePicker.Context;
+var DatePickerView = import_react12.DatePicker.View;
+var DatePickerContext = import_react12.DatePicker.Context;
 
 // src/components/IconButton.tsx
 var import_css18 = require("@cerberus/styled-system/css");
 var import_recipes12 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function IconButton(props) {
   const { ariaLabel, palette, usage, size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "button",
     {
       ...nativeProps,
@@ -1144,13 +1241,13 @@ function IconButton(props) {
 }
 
 // src/components/DatePicker.client.tsx
-var import_react13 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var datePickerStyles2 = (0, import_recipes13.datePicker)();
 function DatePicker(props) {
   const states = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_react12.DatePicker.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_react13.DatePicker.Root,
     {
       ...props,
       ...states,
@@ -1163,9 +1260,9 @@ function DatePicker(props) {
 function DatePickerViewControlGroup(props) {
   const { icons } = useCerberusContext();
   const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DatePickerViewControl, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PrevIcon, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DatePickerViewControl, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PrevIcon, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Button,
       {
         className: (0, import_css19.css)({
@@ -1175,17 +1272,17 @@ function DatePickerViewControlGroup(props) {
         shape: "rounded",
         size: "sm",
         usage: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.RangeText, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.RangeText, {})
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NextIcon, {}) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(NextIcon, {}) }) })
   ] });
 }
 function DatePickerTrigger(props) {
   const { icons } = useCerberusContext();
   const { calendar: CalendarIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_react12.DatePicker.Trigger,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_react13.DatePicker.Trigger,
     {
       ...props,
       className: (0, import_css19.cx)(
@@ -1196,16 +1293,16 @@ function DatePickerTrigger(props) {
         }),
         datePickerStyles2.trigger
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CalendarIcon, {})
     }
   );
 }
 function DatePickerInput(props) {
   const { invalid, ...fieldStates } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react12.DatePicker.Control, { className: datePickerStyles2.control, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTrigger, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_react12.DatePicker.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react13.DatePicker.Control, { className: datePickerStyles2.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerTrigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_react13.DatePicker.Input,
       {
         ...props,
         ...fieldStates,
@@ -1220,12 +1317,12 @@ function DatePickerInput(props) {
 function RangePickerInput(props) {
   const { invalid, ...fieldStates } = useFieldContext();
   const { defaultValue, ...nativeProps } = props;
-  const startDate = (0, import_react13.useMemo)(() => defaultValue == null ? void 0 : defaultValue[0], [defaultValue]);
-  const endDate = (0, import_react13.useMemo)(() => defaultValue == null ? void 0 : defaultValue[1], [defaultValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react12.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTrigger, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_react12.DatePicker.Input,
+  const startDate = (0, import_react14.useMemo)(() => defaultValue == null ? void 0 : defaultValue[0], [defaultValue]);
+  const endDate = (0, import_react14.useMemo)(() => defaultValue == null ? void 0 : defaultValue[1], [defaultValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react13.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerTrigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_react13.DatePicker.Input,
       {
         ...nativeProps,
         ...fieldStates,
@@ -1238,8 +1335,8 @@ function RangePickerInput(props) {
         index: 0
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_react12.DatePicker.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_react13.DatePicker.Input,
       {
         ...nativeProps,
         ...fieldStates,
@@ -1257,8 +1354,8 @@ function RangePickerInput(props) {
 }
 function DatePickerContent(props) {
   const { children, withModal, ...contentProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Portal, { disabled: withModal ?? false, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.Positioner, { className: datePickerStyles2.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_react12.DatePicker.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Portal, { disabled: withModal ?? false, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.Positioner, { className: datePickerStyles2.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_react13.DatePicker.Content,
     {
       ...contentProps,
       className: (0, import_css19.cx)(contentProps.className, datePickerStyles2.content),
@@ -1283,11 +1380,11 @@ function DatePickerDayView(props) {
     if (isPastDay(date)) return "past";
     return "future";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerView, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerContext, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DatePickerTable, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableRow, { children: datePicker3.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTableHeader, { children: weekDay.narrow }, id)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableBody, { children: datePicker3.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerView, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerContext, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DatePickerTable, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.TableRow, { children: datePicker3.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerTableHeader, { children: weekDay.narrow }, id)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.TableBody, { children: datePicker3.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerTableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         DatePickerTableCellTrigger,
         {
           "data-date": getDayValue(day),
@@ -1298,84 +1395,84 @@ function DatePickerDayView(props) {
   ] }) }) });
 }
 function DatePickerMonthView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableBody, { children: datePicker3.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.TableBody, { children: datePicker3.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
   ] }) }) });
 }
 function DatePickerYearView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableBody, { children: datePicker3.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.TableBody, { children: datePicker3.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react13.DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
   ] }) }) });
 }
 function DatePickerCalendar(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DatePickerContent, { withModal: props.withModal, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerDayView, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerMonthView, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerYearView, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DatePickerContent, { withModal: props.withModal, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerDayView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerMonthView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DatePickerYearView, {})
   ] });
 }
 
 // src/components/Dialog.tsx
-var import_react14 = require("@ark-ui/react");
+var import_react15 = require("@ark-ui/react");
 var import_recipes14 = require("@cerberus/styled-system/recipes");
 var import_css20 = require("@cerberus/styled-system/css");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function DialogProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react14.Dialog.Root, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react15.Dialog.Root, { ...props });
 }
 function Dialog(props) {
   const { size, ...contentProps } = props;
   const styles = (0, import_recipes14.dialog)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogBackdrop, { className: styles.backdrop }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogPositioner, { className: styles.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogContent, { className: styles.content, ...contentProps }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogBackdrop, { className: styles.backdrop }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogPositioner, { className: styles.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogContent, { className: styles.content, ...contentProps }) })
   ] });
 }
 function DialogHeading(props) {
   const styles = (0, import_recipes14.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react14.Dialog.Title, { ...props, className: (0, import_css20.cx)(props.className, styles.title) });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react15.Dialog.Title, { ...props, className: (0, import_css20.cx)(props.className, styles.title) });
 }
 function DialogDescription(props) {
   const styles = (0, import_recipes14.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_react14.Dialog.Description,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_react15.Dialog.Description,
     {
       ...props,
       className: (0, import_css20.cx)(props.className, styles.description)
     }
   );
 }
-var DialogTrigger = import_react14.Dialog.Trigger;
-var DialogCloseTrigger = import_react14.Dialog.CloseTrigger;
-var DialogBackdrop = import_react14.Dialog.Backdrop;
-var DialogPositioner = import_react14.Dialog.Positioner;
-var DialogContent = import_react14.Dialog.Content;
+var DialogTrigger = import_react15.Dialog.Trigger;
+var DialogCloseTrigger = import_react15.Dialog.CloseTrigger;
+var DialogBackdrop = import_react15.Dialog.Backdrop;
+var DialogPositioner = import_react15.Dialog.Positioner;
+var DialogContent = import_react15.Dialog.Content;
 
 // src/components/Dialog.client.tsx
-var import_react15 = require("@ark-ui/react");
+var import_react16 = require("@ark-ui/react");
 var import_recipes15 = require("@cerberus/styled-system/recipes");
 var import_css21 = require("@cerberus/styled-system/css");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function DialogCloseIconTrigger(props) {
   const { icons } = useCerberusContext();
   const { close: CloseIcon } = icons;
   const styles = (0, import_recipes15.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    import_react15.Dialog.CloseTrigger,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_react16.Dialog.CloseTrigger,
     {
       ...props,
       className: (0, import_css21.cx)(props.className, styles.closeTrigger),
       asChild: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         IconButton,
         {
           ariaLabel: "Close dialog",
           palette: "action",
           size: "lg",
           usage: "ghost",
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CloseIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CloseIcon, {})
         }
       )
     }
@@ -1384,18 +1481,18 @@ function DialogCloseIconTrigger(props) {
 
 // src/components/Droppable.tsx
 var import_core = require("@dnd-kit/core");
-var import_react16 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Droppable(props) {
   const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } = props;
-  const uuid = (0, import_react16.useId)();
+  const uuid = (0, import_react17.useId)();
   const { isOver, setNodeRef } = (0, import_core.useDroppable)({
     data,
     disabled,
     id: id || uuid,
     resizeObserverConfig
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       ...nativeProps,
@@ -1410,10 +1507,10 @@ function Droppable(props) {
 // src/components/FieldMessage.tsx
 var import_css22 = require("@cerberus/styled-system/css");
 var import_recipes16 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function FieldMessage(props) {
   const { invalid } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "small",
     {
       ...props,
@@ -1424,14 +1521,14 @@ function FieldMessage(props) {
 }
 
 // src/context/feature-flags.tsx
-var import_react17 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var FeatureFlagContext = (0, import_react17.createContext)(null);
+var import_react18 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var FeatureFlagContext = (0, import_react18.createContext)(null);
 function FeatureFlags(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
 }
 function useFeatureFlags(key) {
-  const context = (0, import_react17.useContext)(FeatureFlagContext);
+  const context = (0, import_react18.useContext)(FeatureFlagContext);
   if (context === null) {
     throw new Error(
       "useFeatureFlag must be used within a FeatureFlags Provider"
@@ -1441,18 +1538,18 @@ function useFeatureFlags(key) {
 }
 
 // src/components/FeatureFlag.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function FeatureFlag(props) {
   const showContent = useFeatureFlags(props.flag);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Show, { when: showContent, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Show, { when: showContent, children: props.children });
 }
 
 // src/components/Fieldset.tsx
 var import_css23 = require("@cerberus/styled-system/css");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Fieldset(props) {
   const { invalid, ...formState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "fieldset",
     {
       ...props,
@@ -1473,10 +1570,10 @@ function Fieldset(props) {
 // src/components/FieldsetLabel.tsx
 var import_css24 = require("@cerberus/styled-system/css");
 var import_recipes17 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function FieldsetLabel(props) {
   const { size, usage, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "label",
     {
       ...nativeProps,
@@ -1492,7 +1589,7 @@ function FieldsetLabel(props) {
 }
 
 // src/components/FileStatus.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_recipes19 = require("@cerberus/styled-system/recipes");
 var import_css26 = require("@cerberus/styled-system/css");
 var import_patterns7 = require("@cerberus/styled-system/patterns");
@@ -1500,7 +1597,7 @@ var import_patterns7 = require("@cerberus/styled-system/patterns");
 // src/components/ProgressBar.tsx
 var import_css25 = require("@cerberus/styled-system/css");
 var import_recipes18 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ProgressBar(props) {
   const { indeterminate, size, usage, now, label: label5, ...nativeProps } = props;
   const styles = (0, import_recipes18.progressBar)({ size, usage });
@@ -1508,7 +1605,7 @@ function ProgressBar(props) {
   const width = {
     width: indeterminate ? "50%" : `${nowClamped}%`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       ...nativeProps,
@@ -1518,7 +1615,7 @@ function ProgressBar(props) {
       "aria-valuenow": indeterminate ? 0 : nowClamped,
       className: (0, import_css25.cx)(nativeProps.className, styles.root),
       role: "progressbar",
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
         {
           ...indeterminate && { "data-indeterminate": true },
@@ -1532,7 +1629,7 @@ function ProgressBar(props) {
 }
 
 // src/components/FileStatus.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var processStatus = /* @__PURE__ */ ((processStatus2) => {
   processStatus2["TODO"] = "todo";
   processStatus2["PROCESSING"] = "processing";
@@ -1542,10 +1639,10 @@ var processStatus = /* @__PURE__ */ ((processStatus2) => {
 })(processStatus || {});
 function FileStatus(props) {
   const { file, now, status, onClick, ...nativeProps } = props;
-  const actionLabel = (0, import_react18.useMemo)(() => getStatusActionLabel(status), [status]);
-  const palette = (0, import_react18.useMemo)(() => getPalette(status), [status]);
-  const modalIconPalette = (0, import_react18.useMemo)(() => getModalIconPalette(status), [status]);
-  const styles = (0, import_react18.useMemo)(() => {
+  const actionLabel = (0, import_react19.useMemo)(() => getStatusActionLabel(status), [status]);
+  const palette = (0, import_react19.useMemo)(() => getPalette(status), [status]);
+  const modalIconPalette = (0, import_react19.useMemo)(() => getModalIconPalette(status), [status]);
+  const styles = (0, import_react19.useMemo)(() => {
     switch (status) {
       case "todo" /* TODO */:
         return (0, import_recipes19.fileStatus)({ status: "todo" });
@@ -1559,7 +1656,7 @@ function FileStatus(props) {
         return (0, import_recipes19.fileStatus)();
     }
   }, [status]);
-  const handleClick = (0, import_react18.useCallback)(
+  const handleClick = (0, import_react19.useCallback)(
     (e) => {
       const actionStatus = getStatusActionLabel(
         status
@@ -1568,22 +1665,22 @@ function FileStatus(props) {
     },
     [onClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       ...nativeProps,
       className: (0, import_css26.cx)(nativeProps.className, styles.root, (0, import_patterns7.hstack)()),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           Avatar,
           {
             ariaLabel: "",
             gradient: modalIconPalette,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MatchFileStatusIcon, { size: 24, status }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MatchFileStatusIcon, { size: 24, status }),
             src: ""
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "div",
           {
             className: (0, import_patterns7.vstack)({
@@ -1592,7 +1689,7 @@ function FileStatus(props) {
               w: "full"
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 "small",
                 {
                   className: (0, import_css26.css)({
@@ -1602,7 +1699,7 @@ function FileStatus(props) {
                   children: file
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 ProgressBar,
                 {
                   id: props.id,
@@ -1611,27 +1708,27 @@ function FileStatus(props) {
                   size: "sm"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Field, { invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Field, { invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 FieldMessage,
                 {
                   className: (0, import_css26.css)({
                     color: "page.text.100"
                   }),
                   id: `help:${file}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MatchFileStatusText, { status, now })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MatchFileStatusText, { status, now })
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           IconButton,
           {
             ariaLabel: actionLabel,
             onClick: handleClick,
             palette,
             size: "sm",
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MatchStatusAction, { status })
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MatchStatusAction, { status })
           }
         )
       ]
@@ -1648,13 +1745,13 @@ function MatchFileStatusIcon(props) {
   } = icons;
   switch (props.status) {
     case "todo" /* TODO */:
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TodoIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TodoIcon, { size: props.size });
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FileUploaderIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FileUploaderIcon, { size: props.size });
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DoneIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DoneIcon, { size: props.size });
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InvalidIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InvalidIcon, { size: props.size });
     default:
       throw new Error("Unknown status");
   }
@@ -1679,11 +1776,11 @@ function MatchStatusAction(props) {
   switch (props.status) {
     case "todo" /* TODO */:
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CloseIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CloseIcon, {});
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RedoIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RedoIcon, {});
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TrashIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TrashIcon, {});
     default:
       throw new Error("Invalid status");
   }
@@ -1732,13 +1829,13 @@ function getModalIconPalette(status) {
 var import_css27 = require("@cerberus/styled-system/css");
 var import_patterns8 = require("@cerberus/styled-system/patterns");
 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 FileUploader(props) {
   var _a;
   const { icons } = useCerberusContext();
   const styles = (0, import_recipes20.fileUploader)();
   const { waitingFileUploader: Icon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       ...props.disabled ? { "aria-disabled": true } : {},
@@ -1749,17 +1846,17 @@ function FileUploader(props) {
         styles.container
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Avatar,
           {
             gradient: "charon-light",
             ariaLabel: "",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, {}),
             size: "md",
             src: ""
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           "label",
           {
             className: (0, import_css27.cx)(
@@ -1770,12 +1867,12 @@ function FileUploader(props) {
             ),
             htmlFor: props.name,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Show, { when: Boolean(props.heading), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: styles.heading, children: props.heading }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Show, { when: Boolean(props.heading), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: styles.heading, children: props.heading }) }),
               "Import ",
               (_a = props.accept) == null ? void 0 : _a.replace(",", ", "),
               " files",
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: styles.description, children: "Click to select files" }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: styles.description, children: "Click to select files" }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 "input",
                 {
                   ...props,
@@ -1794,7 +1891,7 @@ function FileUploader(props) {
 // src/components/Input.tsx
 var import_recipes21 = require("@cerberus/styled-system/recipes");
 var import_css28 = require("@cerberus/styled-system/css");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Input(props) {
   const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
   const inputStyles = (0, import_recipes21.input)({ size });
@@ -1802,9 +1899,9 @@ function Input(props) {
   const hasEndIcon = Boolean(endIcon);
   const { icons } = useCerberusContext();
   const { invalid: InvalidIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: inputStyles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: inputStyles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "input",
       {
         ...nativeProps,
@@ -1815,8 +1912,8 @@ function Input(props) {
         className: (0, import_css28.cx)("peer", nativeProps.className, inputStyles.input)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
   ] });
 }
 
@@ -1824,12 +1921,12 @@ function Input(props) {
 var import_recipes22 = require("@cerberus/styled-system/recipes");
 var import_css29 = require("@cerberus/styled-system/css");
 var import_patterns9 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Label(props) {
   const { hidden, size, ...nativeProps } = props;
   const { required, disabled } = useFieldContext();
   const usage = hidden ? "hidden" : "visible";
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "label",
     {
       ...nativeProps,
@@ -1844,7 +1941,7 @@ function Label(props) {
       ),
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "span",
           {
             className: (0, import_css29.css)({
@@ -1863,11 +1960,11 @@ function Label(props) {
 var import_css30 = require("@cerberus/styled-system/css");
 var import_recipes23 = require("@cerberus/styled-system/recipes");
 var import_patterns10 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Legend(props) {
   const { size, ...nativeProps } = props;
   const { invalid, ...formState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "legend",
     {
       ...nativeProps,
@@ -1885,7 +1982,7 @@ function Legend(props) {
       ),
       children: [
         nativeProps.children,
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Show, { when: formState.required, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Show, { when: formState.required, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "span",
           {
             className: (0, import_css30.css)({
@@ -1901,18 +1998,18 @@ function Legend(props) {
 }
 
 // src/components/Menu.tsx
-var import_react19 = require("@ark-ui/react");
+var import_react20 = require("@ark-ui/react");
 var import_recipes24 = require("@cerberus/styled-system/recipes");
 var import_css31 = require("@cerberus/styled-system/css");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var menuStyles = (0, import_recipes24.menu)();
-var Menu = import_react19.Menu.Root;
+var Menu = import_react20.Menu.Root;
 function MenuTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.Menu.Trigger, { ...props, asChild: true });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react20.Menu.Trigger, { ...props, asChild: true });
 }
 function MenuContent(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_react19.Menu.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react20.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_react20.Menu.Content,
     {
       ...props,
       className: (0, import_css31.cx)(props.className, menuStyles.content)
@@ -1920,12 +2017,12 @@ function MenuContent(props) {
   ) });
 }
 function MenuItem(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.Menu.Item, { ...props, className: (0, import_css31.cx)(props.className, menuStyles.item) });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react20.Menu.Item, { ...props, className: (0, import_css31.cx)(props.className, menuStyles.item) });
 }
-var MenuItemGroup = import_react19.Menu.ItemGroup;
+var MenuItemGroup = import_react20.Menu.ItemGroup;
 function MenuGroupLabel(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_react19.Menu.ItemGroupLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_react20.Menu.ItemGroupLabel,
     {
       ...props,
       className: (0, import_css31.cx)(props.className, menuStyles.itemGroupLabel)
@@ -1933,8 +2030,8 @@ function MenuGroupLabel(props) {
   );
 }
 function MenuSeparator(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_react19.Menu.Separator,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_react20.Menu.Separator,
     {
       ...props,
       className: (0, import_css31.cx)(props.className, menuStyles.separator)
@@ -1946,7 +2043,7 @@ function MenuSeparator(props) {
 var import_css32 = require("@cerberus/styled-system/css");
 var import_patterns11 = require("@cerberus/styled-system/patterns");
 var import_recipes25 = require("@cerberus/styled-system/recipes");
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/aria-helpers/trap-focus.aria.ts
 function trapFocus(modalRef) {
@@ -1975,22 +2072,22 @@ function trapFocus(modalRef) {
 }
 
 // src/components/Notification.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = 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_runtime38.jsx)(Icon, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, {});
 }
 function Notification(props) {
   const { children, palette, onClose, ...nativeProps } = props;
-  const ref = (0, import_react20.useRef)(null);
+  const ref = (0, import_react21.useRef)(null);
   const onKeyDown = trapFocus(ref);
   const styles = (0, import_recipes25.notification)({ palette });
   const { icons } = useCerberusContext();
   const { close: CloseIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "dialog",
     {
       ...nativeProps,
@@ -2006,8 +2103,8 @@ function Notification(props) {
       onKeyDown,
       ref,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MatchNotificationIcon, { palette }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MatchNotificationIcon, { palette }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "div",
           {
             className: (0, import_patterns11.vstack)({
@@ -2018,14 +2115,14 @@ function Notification(props) {
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "button",
           {
             "aria-label": "Close",
             className: styles.close,
             onClick: onClose,
             value: props.id,
-            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CloseIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CloseIcon, {})
           }
         )
       ]
@@ -2036,21 +2133,21 @@ function Notification(props) {
 // src/components/NotificationHeading.tsx
 var import_css33 = require("@cerberus/styled-system/css");
 var import_recipes26 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function NotificationHeading(props) {
   const { palette, ...nativeProps } = props;
   const styles = (0, import_recipes26.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: (0, import_css33.cx)(nativeProps.className, styles.heading), ...nativeProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: (0, import_css33.cx)(nativeProps.className, styles.heading), ...nativeProps });
 }
 
 // src/components/NotificationDescription.tsx
 var import_css34 = require("@cerberus/styled-system/css");
 var import_recipes27 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function NotificationDescription(props) {
   const { palette, ...nativeProps } = props;
   const styles = (0, import_recipes27.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "p",
     {
       className: (0, import_css34.cx)(nativeProps.className, styles.description),
@@ -2063,12 +2160,12 @@ function NotificationDescription(props) {
 var import_css35 = require("@cerberus/styled-system/css");
 var import_patterns12 = require("@cerberus/styled-system/patterns");
 var import_recipes28 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Radio(props) {
   const { children, size, ...nativeProps } = props;
   const { invalid, ...state } = useFieldContext();
   const styles = (0, import_recipes28.radio)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       className: (0, import_css35.cx)(
@@ -2080,7 +2177,7 @@ function Radio(props) {
       ),
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "input",
           {
             ...nativeProps,
@@ -2097,82 +2194,6 @@ function Radio(props) {
   );
 }
 
-// src/components/Spinner.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
-function Spinner(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    "svg",
-    {
-      "aria-busy": "true",
-      role: "status",
-      xmlns: "http://www.w3.org/2000/svg",
-      height: props.size,
-      width: props.size,
-      viewBox: "0 0 24 24",
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-        "g",
-        {
-          fill: "none",
-          stroke: "currentColor",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-              "path",
-              {
-                strokeDasharray: 16,
-                strokeDashoffset: 16,
-                d: "M12 3c4.97 0 9 4.03 9 9",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                    "animate",
-                    {
-                      fill: "freeze",
-                      attributeName: "stroke-dashoffset",
-                      dur: "0.15s",
-                      values: "16;0"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                    "animateTransform",
-                    {
-                      attributeName: "transform",
-                      dur: "0.75s",
-                      repeatCount: "indefinite",
-                      type: "rotate",
-                      values: "0 12 12;360 12 12"
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-              "path",
-              {
-                strokeDasharray: 64,
-                strokeDashoffset: 64,
-                strokeOpacity: 0.3,
-                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z",
-                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                  "animate",
-                  {
-                    fill: "freeze",
-                    attributeName: "stroke-dashoffset",
-                    dur: "0.6s",
-                    values: "64;0"
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-
 // src/components/Tabs.client.tsx
 var import_tabs2 = require("@ark-ui/react/tabs");
 var import_css36 = require("@cerberus/styled-system/css");
@@ -2180,7 +2201,7 @@ var import_css36 = require("@cerberus/styled-system/css");
 // src/context/tabs.tsx
 var import_tabs = require("@ark-ui/react/tabs");
 var import_recipes29 = require("@cerberus/styled-system/recipes");
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/utils/localStorage.ts
 function getLocalStorage(key, defaultValue) {
@@ -2197,18 +2218,18 @@ function setLocalStorage(key, value) {
 
 // src/context/tabs.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var TabsContext = (0, import_react21.createContext)(null);
+var TabsContext = (0, import_react22.createContext)(null);
 function Tabs(props) {
   const { cache, defaultValue, palette, uuid, ...arkProps } = props;
-  const [activeTab, setActiveTab] = (0, import_react21.useState)(
+  const [activeTab, setActiveTab] = (0, import_react22.useState)(
     () => cache ? "" : defaultValue
   );
   const styles = (0, import_recipes29.tabs)({ palette });
-  const cacheKey = (0, import_react21.useMemo)(
+  const cacheKey = (0, import_react22.useMemo)(
     () => uuid ? `cerberus-tabs-${uuid}` : "cerberus-tabs",
     [uuid]
   );
-  const handleValueChange = (0, import_react21.useCallback)(
+  const handleValueChange = (0, import_react22.useCallback)(
     (details) => {
       if (cache) {
         setLocalStorage(cacheKey, details.value);
@@ -2217,13 +2238,13 @@ function Tabs(props) {
     },
     [cache]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (cache && !activeTab) {
       const cachedTab = getLocalStorage(cacheKey, defaultValue ?? "");
       setActiveTab(cachedTab);
     }
   }, [cache, defaultValue, activeTab]);
-  const value = (0, import_react21.useMemo)(
+  const value = (0, import_react22.useMemo)(
     () => ({
       active: activeTab,
       styles
@@ -2244,7 +2265,7 @@ function Tabs(props) {
   ) });
 }
 function useTabsContext() {
-  const context = (0, import_react21.useContext)(TabsContext);
+  const context = (0, import_react22.useContext)(TabsContext);
   if (!context) {
     throw new Error("useTabsContext must be used within a Tabs Provider.");
   }
@@ -2465,33 +2486,33 @@ var closableCss = (0, import_css42.css)({
 });
 
 // src/components/Text.tsx
-var import_jsx = require("@cerberus/styled-system/jsx");
+var import_jsx2 = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function Text(props) {
   const { as = "p", ...pandaJSXProps } = props;
   switch (as) {
     case "h1":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H1, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx2.H1, { ...pandaJSXProps });
     case "h2":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H2, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx2.H2, { ...pandaJSXProps });
     case "h3":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H3, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx2.H3, { ...pandaJSXProps });
     case "h4":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H4, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx2.H4, { ...pandaJSXProps });
     case "h5":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H5, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx2.H5, { ...pandaJSXProps });
     case "h6":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H6, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx2.H6, { ...pandaJSXProps });
     case "strong":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.Strong, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx2.Strong, { ...pandaJSXProps });
     case "em":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.Em, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx2.Em, { ...pandaJSXProps });
     case "small":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.Small, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx2.Small, { ...pandaJSXProps });
     case "span":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.Span, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx2.Span, { ...pandaJSXProps });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.P, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx2.P, { ...pandaJSXProps });
   }
 }
 
@@ -2600,7 +2621,7 @@ function Tooltip(props) {
 var import_select2 = require("@ark-ui/react/select");
 var import_recipes39 = require("@cerberus/styled-system/recipes");
 var import_css46 = require("@cerberus/styled-system/css");
-var import_jsx2 = require("@cerberus/styled-system/jsx");
+var import_jsx3 = require("@cerberus/styled-system/jsx");
 
 // src/components/Select.server.tsx
 var import_select = require("@ark-ui/react/select");
@@ -2640,7 +2661,7 @@ function Select(props) {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectControl, { className: styles.control, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(SelectTrigger, { className: styles.trigger, children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectValueText, { placeholder }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx2.HStack, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx3.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)(SelectIndicator, { className: styles.indicator, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectArrow, {}) })
       ] })
@@ -2679,23 +2700,23 @@ function createSelectCollection(collection) {
 }
 
 // src/context/confirm-modal.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_css47 = require("@cerberus/styled-system/css");
-var import_jsx3 = require("@cerberus/styled-system/jsx");
+var import_jsx4 = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var ConfirmModalContext = (0, import_react22.createContext)(null);
+var ConfirmModalContext = (0, import_react23.createContext)(null);
 function ConfirmModal(props) {
-  const [open, setOpen] = (0, import_react22.useState)(false);
-  const [content, setContent] = (0, import_react22.useState)(null);
-  const resolveRef = (0, import_react22.useRef)(null);
+  const [open, setOpen] = (0, import_react23.useState)(false);
+  const [content, setContent] = (0, import_react23.useState)(null);
+  const resolveRef = (0, import_react23.useRef)(null);
   const kind = (content == null ? void 0 : content.kind) ?? "non-destructive";
   const { icons } = useCerberusContext();
   const { confirmModal: ConfirmIcon } = icons;
-  const palette = (0, import_react22.useMemo)(
+  const palette = (0, import_react23.useMemo)(
     () => kind === "destructive" ? "danger" : "action",
     [kind]
   );
-  const handleChoice = (0, import_react22.useCallback)(
+  const handleChoice = (0, import_react23.useCallback)(
     (e) => {
       var _a, _b;
       const target = e.currentTarget;
@@ -2707,7 +2728,7 @@ function ConfirmModal(props) {
     },
     [setOpen]
   );
-  const handleShow = (0, import_react22.useCallback)(
+  const handleShow = (0, import_react23.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options });
@@ -2717,7 +2738,7 @@ function ConfirmModal(props) {
     },
     [setOpen, setContent]
   );
-  const value = (0, import_react22.useMemo)(
+  const value = (0, import_react23.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -2725,10 +2746,10 @@ function ConfirmModal(props) {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx3.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx3.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx4.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx4.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          import_jsx3.HStack,
+          import_jsx4.HStack,
           {
             alignSelf: "center",
             justify: "center",
@@ -2763,7 +2784,7 @@ function ConfirmModal(props) {
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx3.HStack, { gap: "4", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx4.HStack, { gap: "4", w: "full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           Button,
           {
@@ -2796,7 +2817,7 @@ function ConfirmModal(props) {
   ] });
 }
 function useConfirmModal() {
-  const context = (0, import_react22.useContext)(ConfirmModalContext);
+  const context = (0, import_react23.useContext)(ConfirmModalContext);
   if (context === null) {
     throw new Error(
       "useConfirmModal must be used within a ConfirmModal Provider"
@@ -2806,20 +2827,20 @@ function useConfirmModal() {
 }
 
 // src/context/cta-modal.tsx
-var import_react23 = require("react");
-var import_jsx4 = require("@cerberus/styled-system/jsx");
-var import_css48 = require("@cerberus/styled-system/css");
+var import_react24 = require("react");
 var import_jsx5 = require("@cerberus/styled-system/jsx");
+var import_css48 = require("@cerberus/styled-system/css");
+var import_jsx6 = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime58 = require("react/jsx-runtime");
-var CTAModalContext = (0, import_react23.createContext)(null);
+var CTAModalContext = (0, import_react24.createContext)(null);
 function CTAModal(props) {
   var _a, _b;
-  const [open, setOpen] = (0, import_react23.useState)(false);
-  const [content, setContent] = (0, import_react23.useState)(null);
+  const [open, setOpen] = (0, import_react24.useState)(false);
+  const [content, setContent] = (0, import_react24.useState)(null);
   const confirmIcon = content == null ? void 0 : content.icon;
   const { icons } = useCerberusContext();
   const { confirmModal: FallbackIcon } = icons;
-  const handleShow = (0, import_react23.useCallback)(
+  const handleShow = (0, import_react24.useCallback)(
     (options) => {
       const maxActions = 2;
       if (options.actions.length > maxActions) {
@@ -2832,7 +2853,7 @@ function CTAModal(props) {
     },
     [setOpen]
   );
-  const handleActionClick = (0, import_react23.useCallback)(
+  const handleActionClick = (0, import_react24.useCallback)(
     (event) => {
       const index = event.currentTarget.getAttribute("data-index");
       const action = content == null ? void 0 : content.actions[Number(index)];
@@ -2842,7 +2863,7 @@ function CTAModal(props) {
     },
     [content, setOpen]
   );
-  const value = (0, import_react23.useMemo)(
+  const value = (0, import_react24.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -2852,8 +2873,8 @@ function CTAModal(props) {
     props.children,
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Dialog, { size: "sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DialogCloseIconTrigger, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx5.VStack, { gap: "xl", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx5.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx5.VStack, { gap: "lg", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx6.VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx6.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx6.VStack, { gap: "lg", w: "full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             Avatar,
             {
@@ -2873,7 +2894,7 @@ function CTAModal(props) {
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx4.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx5.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           Button,
           {
             "data-index": index,
@@ -2892,7 +2913,7 @@ function CTAModal(props) {
   ] });
 }
 function useCTAModal() {
-  const context = (0, import_react23.useContext)(CTAModalContext);
+  const context = (0, import_react24.useContext)(CTAModalContext);
   if (context === null) {
     throw new Error("useCTAModal must be used within a CTAModal Provider");
   }
@@ -2900,7 +2921,7 @@ function useCTAModal() {
 }
 
 // src/context/notification-center.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_patterns14 = require("@cerberus/styled-system/patterns");
 var import_recipes40 = require("@cerberus/styled-system/recipes");
 var import_css49 = require("@cerberus/styled-system/css");
@@ -2937,15 +2958,15 @@ function clearNotificationState(dispatch) {
 
 // src/context/notification-center.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var NotificationsContext = (0, import_react24.createContext)(null);
+var NotificationsContext = (0, import_react25.createContext)(null);
 function NotificationCenter(props) {
-  const [state, dispatch] = (0, import_react24.useReducer)(notificationCenterReducer, []);
+  const [state, dispatch] = (0, import_react25.useReducer)(notificationCenterReducer, []);
   const styles = (0, import_recipes40.notification)();
-  const timeout = (0, import_react24.useMemo)(
+  const timeout = (0, import_react25.useMemo)(
     () => props.duration || 6e3,
     [props.duration]
   );
-  const closeNotification = (0, import_react24.useCallback)(
+  const closeNotification = (0, import_react25.useCallback)(
     (id) => {
       updateNotificationState(dispatch, {
         id,
@@ -2957,7 +2978,7 @@ function NotificationCenter(props) {
     },
     [dispatch]
   );
-  const handleNotify = (0, import_react24.useCallback)(
+  const handleNotify = (0, import_react25.useCallback)(
     (options) => {
       const id = `${options.palette}:${state.length + 1}`;
       addNotification(dispatch, {
@@ -2971,20 +2992,20 @@ function NotificationCenter(props) {
     },
     [dispatch, state, timeout, closeNotification]
   );
-  const handleClose = (0, import_react24.useCallback)(
+  const handleClose = (0, import_react25.useCallback)(
     (e) => {
       const target = e.currentTarget;
       closeNotification(target.value);
     },
     [closeNotification]
   );
-  const handleCloseAll = (0, import_react24.useCallback)(() => {
+  const handleCloseAll = (0, import_react25.useCallback)(() => {
     state.forEach((item) => {
       if (item.onClose) item.onClose();
     });
     clearNotificationState(dispatch);
   }, [state, dispatch]);
-  const value = (0, import_react24.useMemo)(
+  const value = (0, import_react25.useMemo)(
     () => ({
       notify: handleNotify
     }),
@@ -3031,7 +3052,7 @@ function NotificationCenter(props) {
 }
 function MatchNotification(props) {
   const { palette, id, onClose, heading, description, open } = props;
-  const sharedProps = (0, import_react24.useMemo)(
+  const sharedProps = (0, import_react25.useMemo)(
     () => ({
       id,
       open: true,
@@ -3065,7 +3086,7 @@ function MatchNotification(props) {
   }
 }
 function useNotificationCenter() {
-  const context = (0, import_react24.useContext)(NotificationsContext);
+  const context = (0, import_react25.useContext)(NotificationsContext);
   if (!context) {
     throw new Error(
       "useNotificationCenter must be used within a NotificationsProvider"
@@ -3075,35 +3096,35 @@ function useNotificationCenter() {
 }
 
 // src/context/prompt-modal.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_css50 = require("@cerberus/styled-system/css");
 var import_patterns15 = require("@cerberus/styled-system/patterns");
-var import_jsx6 = require("@cerberus/styled-system/jsx");
-var import_react26 = require("@ark-ui/react");
+var import_jsx7 = require("@cerberus/styled-system/jsx");
+var import_react27 = require("@ark-ui/react");
 var import_jsx_runtime60 = require("react/jsx-runtime");
-var PromptModalContext = (0, import_react25.createContext)(null);
+var PromptModalContext = (0, import_react26.createContext)(null);
 function PromptModal(props) {
-  const resolveRef = (0, import_react25.useRef)(null);
-  const [open, setOpen] = (0, import_react25.useState)(false);
-  const [content, setContent] = (0, import_react25.useState)(null);
-  const [inputValue, setInputValue] = (0, import_react25.useState)("");
+  const resolveRef = (0, import_react26.useRef)(null);
+  const [open, setOpen] = (0, import_react26.useState)(false);
+  const [content, setContent] = (0, import_react26.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react26.useState)("");
   const { icons } = useCerberusContext();
   const { promptModal: PromptIcon } = icons;
-  const isValid = (0, import_react25.useMemo)(
+  const isValid = (0, import_react26.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react25.useMemo)(
+  const palette = (0, import_react26.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react25.useCallback)(
+  const handleChange = (0, import_react26.useCallback)(
     (e) => {
       setInputValue(e.currentTarget.value);
     },
     [content]
   );
-  const handleChoice = (0, import_react25.useCallback)(
+  const handleChoice = (0, import_react26.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
@@ -3114,7 +3135,7 @@ function PromptModal(props) {
     },
     [inputValue, setOpen]
   );
-  const handleShow = (0, import_react25.useCallback)(
+  const handleShow = (0, import_react26.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
@@ -3124,7 +3145,7 @@ function PromptModal(props) {
     },
     [setOpen]
   );
-  const value = (0, import_react25.useMemo)(
+  const value = (0, import_react26.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -3132,10 +3153,10 @@ function PromptModal(props) {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx6.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx6.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx7.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx7.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-          import_jsx6.HStack,
+          import_jsx7.HStack,
           {
             alignSelf: "center",
             justify: "center",
@@ -3171,7 +3192,7 @@ function PromptModal(props) {
         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-        import_jsx6.VStack,
+        import_jsx7.VStack,
         {
           alignItems: "flex-start",
           marginBlockStart: "md",
@@ -3206,7 +3227,7 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx6.HStack, { gap: "md", justify: "stretch", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx7.HStack, { gap: "md", justify: "stretch", w: "full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           Button,
           {
@@ -3222,7 +3243,7 @@ function PromptModal(props) {
             children: content == null ? void 0 : content.actionText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react26.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react27.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           Button,
           {
             className: (0, import_css50.css)({
@@ -3240,7 +3261,7 @@ function PromptModal(props) {
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react25.useContext)(PromptModalContext);
+  const context = (0, import_react26.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }
@@ -3248,50 +3269,50 @@ function usePromptModal() {
 }
 
 // src/context/theme.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/hooks/useTheme.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 var THEME_KEY = "cerberus-theme";
 var MODE_KEY = "cerberus-mode";
 function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options = {}) {
   const { updateMode, updateTheme, cache } = options;
-  const [theme, setTheme] = (0, import_react27.useState)(defaultTheme);
-  const [colorMode, setColorMode] = (0, import_react27.useState)(defaultColorMode);
-  const handleThemeChange = (0, import_react27.useCallback)(
+  const [theme, setTheme] = (0, import_react28.useState)(defaultTheme);
+  const [colorMode, setColorMode] = (0, import_react28.useState)(defaultColorMode);
+  const handleThemeChange = (0, import_react28.useCallback)(
     (newTheme) => {
       setTheme(newTheme);
       updateTheme == null ? void 0 : updateTheme(newTheme);
     },
     [updateTheme]
   );
-  const handleColorModeChange = (0, import_react27.useCallback)(
+  const handleColorModeChange = (0, import_react28.useCallback)(
     (newMode) => {
       setColorMode(newMode);
       updateMode == null ? void 0 : updateMode(newMode);
     },
     [updateMode]
   );
-  (0, import_react27.useLayoutEffect)(() => {
+  (0, import_react28.useLayoutEffect)(() => {
     const theme2 = localStorage.getItem(THEME_KEY);
     if (theme2) {
       setTheme(theme2);
     }
   }, []);
-  (0, import_react27.useLayoutEffect)(() => {
+  (0, import_react28.useLayoutEffect)(() => {
     const mode = localStorage.getItem(MODE_KEY);
     if (mode) {
       setColorMode(mode);
     }
   }, []);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const root = document.documentElement;
     root.dataset.pandaTheme = theme;
     if (cache) {
       localStorage.setItem(THEME_KEY, theme);
     }
   }, [theme, cache]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const root = document.documentElement;
     if (colorMode === "system") {
       root.dataset.colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -3302,7 +3323,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
       localStorage.setItem(MODE_KEY, colorMode);
     }
   }, [colorMode, cache]);
-  return (0, import_react27.useMemo)(
+  return (0, import_react28.useMemo)(
     () => ({
       theme,
       mode: colorMode,
@@ -3315,7 +3336,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 
 // src/context/theme.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react28.createContext)(
+var ThemeContext = (0, import_react29.createContext)(
   null
 );
 function ThemeProvider(props) {
@@ -3327,7 +3348,7 @@ function ThemeProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
-  const context = (0, import_react28.useContext)(ThemeContext);
+  const context = (0, import_react29.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useThemeContext must be used within a ThemeProvider");
   }
@@ -3335,13 +3356,13 @@ function useThemeContext() {
 }
 
 // src/hooks/useDate.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 function useDate(options) {
   const initialValue = (options == null ? void 0 : options.initialValue) ?? "";
   const format = (options == null ? void 0 : options.format) ?? DateFormats.USMilitary;
   const onChange = options == null ? void 0 : options.onChange;
-  const [value, setValue] = (0, import_react29.useState)(initialValue);
-  const handleChange = (0, import_react29.useCallback)(
+  const [value, setValue] = (0, import_react30.useState)(initialValue);
+  const handleChange = (0, import_react30.useCallback)(
     (e) => {
       const newValue = formatMilitaryDate(e.currentTarget.value);
       if (onChange) onChange(e);
@@ -3349,7 +3370,7 @@ function useDate(options) {
     },
     [onChange]
   );
-  return (0, import_react29.useMemo)(
+  return (0, import_react30.useMemo)(
     () => ({
       format,
       value,
@@ -3428,21 +3449,21 @@ var MONTHS = [
 ];
 
 // src/hooks/useModal.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 function useModal() {
-  const modalRef = (0, import_react30.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react30.useState)(false);
-  const show = (0, import_react30.useCallback)(() => {
+  const modalRef = (0, import_react31.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react31.useState)(false);
+  const show = (0, import_react31.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.showModal();
     setIsOpen(true);
   }, []);
-  const close = (0, import_react30.useCallback)(() => {
+  const close = (0, import_react31.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.close();
     setIsOpen(false);
   }, []);
-  return (0, import_react30.useMemo)(() => {
+  return (0, import_react31.useMemo)(() => {
     return {
       modalRef,
       show,
@@ -3453,11 +3474,11 @@ function useModal() {
 }
 
 // src/hooks/useToggle.ts
-var import_react31 = require("react");
+var import_react32 = require("react");
 function useToggle(options) {
-  const [checked, setChecked] = (0, import_react31.useState)((options == null ? void 0 : options.checked) ?? "");
+  const [checked, setChecked] = (0, import_react32.useState)((options == null ? void 0 : options.checked) ?? "");
   const onChange = options == null ? void 0 : options.onChange;
-  const handleChange = (0, import_react31.useCallback)(
+  const handleChange = (0, import_react32.useCallback)(
     (e) => {
       const target = e.currentTarget;
       setChecked((prev) => {
@@ -3467,25 +3488,25 @@ function useToggle(options) {
     },
     [onChange]
   );
-  return (0, import_react31.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
+  return (0, import_react32.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
 }
 
 // src/hooks/useRootColors.ts
-var import_react32 = require("react");
+var import_react33 = require("react");
 function useRootColors(colors = []) {
-  const [state, dispatch] = (0, import_react32.useReducer)(rootColorsReducer, {});
-  const handleRefetch = (0, import_react32.useCallback)(() => {
+  const [state, dispatch] = (0, import_react33.useReducer)(rootColorsReducer, {});
+  const handleRefetch = (0, import_react33.useCallback)(() => {
     return new Promise((resolve) => {
       dispatch(formatColors(colors));
       resolve();
     });
   }, []);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (Object.keys(state).length === colors.length) return;
     dispatch(formatColors(colors));
     console.log("updating colors in root hook");
   }, [colors]);
-  return (0, import_react32.useMemo)(
+  return (0, import_react33.useMemo)(
     () => ({ colors: state, refetch: handleRefetch }),
     [state, handleRefetch]
   );
@@ -3677,6 +3698,8 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   AdmonitionHeading,
   Avatar,
   Button,
+  ButtonIcon,
+  ButtonParts,
   CTAModal,
   CerberusProvider,
   Checkbox,