@cerberus-design/react 0.10.4-next-53914c0 → 0.10.4-next-b0cf2d7

package/build/legacy/index.cjs

@@ -142,6 +142,102 @@ function IndeterminateIcon(props) {
   );
 }
 
+// src/components/AnimatingUploadIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AnimatingUploadIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.size ?? "1em",
+      height: props.size ?? "1em",
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "g",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "square",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "path",
+              {
+                "data-name": "animating-trail",
+                strokeDasharray: "2 4",
+                strokeDashoffset: 6,
+                d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "animate",
+                  {
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.45s",
+                    repeatCount: "indefinite",
+                    values: "6;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "path",
+              {
+                "data-name": "half-circle",
+                strokeDasharray: 32,
+                strokeDashoffset: 32,
+                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "animate",
+                  {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    begin: "0.075s",
+                    dur: "0.3s",
+                    values: "32;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "svg",
+              {
+                "aria-hidden": "true",
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "0.8em",
+                height: "0.8em",
+                x: "27%",
+                y: "27%",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "polygon",
+                  {
+                    fill: "currentColor",
+                    stroke: "currentColor",
+                    strokeWidth: 0.8,
+                    opacity: "1",
+                    points: "3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 ",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "animate",
+                      {
+                        fill: "freeze",
+                        attributeName: "opacity",
+                        values: "1;0;1",
+                        dur: "2s",
+                        repeatCount: "indefinite"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/config/cerbIcons.ts
 var defaultIcons = {
   avatar: import_icons.UserFilled,
@@ -150,7 +246,8 @@ var defaultIcons = {
   confirmModal: import_icons.Information,
   delete: import_icons.TrashCan,
   promptModal: import_icons.Information,
-  fileUploader: import_icons.CloudUpload,
+  waitingFileUploader: import_icons.CloudUpload,
+  fileUploader: AnimatingUploadIcon,
   indeterminate: IndeterminateIcon,
   infoNotification: import_icons.InformationFilled,
   successNotification: import_icons.CheckmarkFilled,
@@ -193,7 +290,7 @@ function Show(props) {
 }
 
 // src/components/Avatar.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Avatar(props) {
   const {
     ariaLabel,
@@ -208,7 +305,7 @@ function Avatar(props) {
   } = props;
   const { avatar: AvatarIcon } = $cerberusIcons;
   const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
       ...nativeProps,
@@ -217,19 +314,19 @@ function Avatar(props) {
         (0, import_recipes.avatar)({ gradient, size }),
         (0, import_patterns.circle)()
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         Show,
         {
           when: Boolean(src) || Boolean(as),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Show,
             {
               when: Boolean(initials),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 Show,
                 {
                   when: Boolean(icon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     AvatarIcon,
                     {
                       size: iconSizeMap[size]
@@ -241,11 +338,11 @@ function Avatar(props) {
               children: initials
             }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Show,
             {
               when: Boolean(as),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "img",
                 {
                   alt: props.ariaLabel,
@@ -283,10 +380,10 @@ var iconSizeMap = {
 // src/components/Button.tsx
 var import_css2 = require("@cerberus/styled-system/css");
 var import_recipes2 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Button(props) {
   const { palette, usage, shape, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
       ...nativeProps,
@@ -309,7 +406,7 @@ var import_css3 = require("@cerberus/styled-system/css");
 
 // src/context/field.tsx
 var import_react2 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var FieldContext = (0, import_react2.createContext)(null);
 function Field(props) {
   const value = (0, import_react2.useMemo)(
@@ -321,7 +418,7 @@ function Field(props) {
     }),
     [props.disabled, props.readOnly, props.required, props.invalid]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldContext.Provider, { value, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FieldContext.Provider, { value, children: props.children });
 }
 function useFieldContext() {
   const context = (0, import_react2.useContext)(FieldContext);
@@ -332,13 +429,13 @@ function useFieldContext() {
 }
 
 // src/components/Checkbox.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Checkbox(props) {
   const { describedBy, size, checked, mixed, ...nativeProps } = props;
   const { invalid, ...fieldStates } = useFieldContext();
   const styles = (0, import_recipes3.checkbox)({ size });
   const { checkbox: CheckIcon, indeterminate: IndeterminateIcon2 } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: (0, import_css3.cx)(
@@ -349,7 +446,7 @@ function Checkbox(props) {
         })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "input",
           {
             ...nativeProps,
@@ -361,8 +458,8 @@ function Checkbox(props) {
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Show, { when: checked && !mixed, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckIcon, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Show, { when: mixed, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IndeterminateIcon2, {}) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Show, { when: checked && !mixed, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Show, { when: mixed, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IndeterminateIcon2, {}) }) })
       ]
     }
   );
@@ -371,13 +468,13 @@ function Checkbox(props) {
 // src/components/CircularProgress.tsx
 var import_patterns3 = require("@cerberus/styled-system/patterns");
 var import_css4 = require("@cerberus/styled-system/css");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = 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;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       id: props.id,
@@ -392,7 +489,7 @@ function CircularProgress(props) {
         position: "relative"
       }),
       role: "progressbar",
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "svg",
         {
           "data-complete": now === 100,
@@ -407,17 +504,17 @@ function CircularProgress(props) {
           viewBox: "0 0 100 100",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("title", { children: props.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("desc", { children: `${now}% ${status}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("linearGradient", { id: "gradient", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("title", { children: props.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("desc", { children: `${now}% ${status}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("linearGradient", { id: "gradient", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "stop",
                 {
                   offset: "0%",
                   stopColor: "var(--cerberus-colors-action-bg-initial)"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "stop",
                 {
                   offset: "100%",
@@ -425,7 +522,7 @@ function CircularProgress(props) {
                 }
               )
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "circle",
               {
                 className: (0, import_css4.css)({
@@ -437,7 +534,7 @@ function CircularProgress(props) {
                 pathLength: "100"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "circle",
               {
                 className: (0, import_css4.css)({
@@ -449,7 +546,7 @@ function CircularProgress(props) {
                 pathLength: "100"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "circle",
               {
                 "data-complete": now === 100,
@@ -470,8 +567,8 @@ function CircularProgress(props) {
                 transform: "rotate(-90 50 50)"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 "text",
                 {
                   className: (0, import_css4.css)({
@@ -489,7 +586,7 @@ function CircularProgress(props) {
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "text",
                 {
                   className: (0, import_css4.css)({
@@ -515,7 +612,7 @@ function CircularProgress(props) {
 // src/components/Droppable.tsx
 var import_core = require("@dnd-kit/core");
 var import_react3 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Droppable(props) {
   const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } = props;
   const uuid = (0, import_react3.useId)();
@@ -525,7 +622,7 @@ function Droppable(props) {
     id: id || uuid,
     resizeObserverConfig
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       ...nativeProps,
@@ -540,10 +637,10 @@ function Droppable(props) {
 // src/components/FieldMessage.tsx
 var import_css5 = require("@cerberus/styled-system/css");
 var import_recipes4 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function FieldMessage(props) {
   const { invalid } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "small",
     {
       ...props,
@@ -555,10 +652,10 @@ function FieldMessage(props) {
 
 // src/context/feature-flags.tsx
 var import_react4 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var FeatureFlagContext = (0, import_react4.createContext)(null);
 function FeatureFlags(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
 }
 function useFeatureFlags(key) {
   const context = (0, import_react4.useContext)(FeatureFlagContext);
@@ -571,18 +668,18 @@ function useFeatureFlags(key) {
 }
 
 // src/components/FeatureFlag.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function FeatureFlag(props) {
   const showContent = useFeatureFlags(props.flag);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Show, { when: showContent, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Show, { when: showContent, children: props.children });
 }
 
 // src/components/Fieldset.tsx
 var import_css6 = require("@cerberus/styled-system/css");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function Fieldset(props) {
   const { invalid, ...formState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "fieldset",
     {
       ...props,
@@ -603,10 +700,10 @@ function Fieldset(props) {
 // src/components/FieldsetLabel.tsx
 var import_css7 = require("@cerberus/styled-system/css");
 var import_recipes5 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function FieldsetLabel(props) {
   const { size, usage, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "label",
     {
       ...nativeProps,
@@ -630,7 +727,7 @@ var import_patterns4 = require("@cerberus/styled-system/patterns");
 // src/components/ProgressBar.tsx
 var import_css8 = require("@cerberus/styled-system/css");
 var import_recipes6 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ProgressBar(props) {
   const { indeterminate, size, usage, now, label: label4, ...nativeProps } = props;
   const styles = (0, import_recipes6.progressBar)({ size, usage });
@@ -638,7 +735,7 @@ function ProgressBar(props) {
   const width = {
     width: indeterminate ? "50%" : `${nowClamped}%`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       ...nativeProps,
@@ -648,7 +745,7 @@ function ProgressBar(props) {
       "aria-valuenow": indeterminate ? 0 : nowClamped,
       className: (0, import_css8.cx)(nativeProps.className, styles.root),
       role: "progressbar",
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "div",
         {
           ...indeterminate && { "data-indeterminate": true },
@@ -664,10 +761,10 @@ function ProgressBar(props) {
 // src/components/IconButton.tsx
 var import_css9 = require("@cerberus/styled-system/css");
 var import_recipes7 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function IconButton(props) {
   const { ariaLabel, palette, usage, size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "button",
     {
       ...nativeProps,
@@ -685,7 +782,7 @@ function IconButton(props) {
 }
 
 // src/components/FileStatus.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var processStatus = /* @__PURE__ */ ((processStatus2) => {
   processStatus2["TODO"] = "todo";
   processStatus2["PROCESSING"] = "processing";
@@ -721,22 +818,22 @@ function FileStatus(props) {
     },
     [onClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       ...nativeProps,
       className: (0, import_css10.cx)(nativeProps.className, styles.root, (0, import_patterns4.hstack)()),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           Avatar,
           {
             ariaLabel: "",
             gradient: modalIconPalette,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MatchFileStatusIcon, { size: 24, status }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MatchFileStatusIcon, { size: 24, status }),
             src: ""
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "div",
           {
             className: (0, import_patterns4.vstack)({
@@ -745,7 +842,7 @@ function FileStatus(props) {
               w: "full"
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "small",
                 {
                   className: (0, import_css10.css)({
@@ -755,7 +852,7 @@ function FileStatus(props) {
                   children: file
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 ProgressBar,
                 {
                   id: props.id,
@@ -764,27 +861,27 @@ function FileStatus(props) {
                   size: "sm"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Field, { invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Field, { invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 FieldMessage,
                 {
                   className: (0, import_css10.css)({
                     color: "page.text.100"
                   }),
                   id: `help:${file}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MatchFileStatusText, { status, now })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MatchFileStatusText, { status, now })
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           IconButton,
           {
             ariaLabel: actionLabel,
             onClick: handleClick,
             palette,
             size: "sm",
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MatchStatusAction, { status })
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MatchStatusAction, { status })
           }
         )
       ]
@@ -793,18 +890,20 @@ function FileStatus(props) {
 }
 function MatchFileStatusIcon(props) {
   const {
+    waitingFileUploader: TodoIcon,
     fileUploader: FileUploaderIcon,
     invalidAlt: InvalidIcon,
     successNotification: DoneIcon
   } = $cerberusIcons;
   switch (props.status) {
     case "todo" /* TODO */:
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TodoIcon, { size: props.size });
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FileUploaderIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FileUploaderIcon, { size: props.size });
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DoneIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DoneIcon, { size: props.size });
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(InvalidIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InvalidIcon, { size: props.size });
     default:
       throw new Error("Unknown status");
   }
@@ -828,11 +927,11 @@ function MatchStatusAction(props) {
   switch (props.status) {
     case "todo" /* TODO */:
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CloseIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CloseIcon, {});
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RedoIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RedoIcon, {});
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TrashIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TrashIcon, {});
     default:
       throw new Error("Invalid status");
   }
@@ -881,12 +980,12 @@ function getModalIconPalette(status) {
 var import_css11 = require("@cerberus/styled-system/css");
 var import_patterns5 = require("@cerberus/styled-system/patterns");
 var import_recipes9 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function FileUploader(props) {
   var _a;
   const styles = (0, import_recipes9.fileUploader)();
-  const Icon = $cerberusIcons.fileUploader;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  const { waitingFileUploader: Icon } = $cerberusIcons;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       className: (0, import_css11.cx)(
@@ -896,17 +995,17 @@ function FileUploader(props) {
         styles.container
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Avatar,
           {
             gradient: "charon-light",
             ariaLabel: "",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, {}),
             size: "md",
             src: ""
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "label",
           {
             className: (0, import_css11.cx)(
@@ -917,12 +1016,12 @@ function FileUploader(props) {
             ),
             htmlFor: props.name,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Show, { when: Boolean(props.heading), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: styles.heading, children: props.heading }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Show, { when: Boolean(props.heading), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: styles.heading, children: props.heading }) }),
               "Import ",
               (_a = props.accept) == null ? void 0 : _a.replace(",", ", "),
               " files",
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: styles.description, children: "Click to select files" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: styles.description, children: "Click to select files" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "input",
                 {
                   ...props,
@@ -941,16 +1040,16 @@ function FileUploader(props) {
 // src/components/Input.tsx
 var import_recipes10 = require("@cerberus/styled-system/recipes");
 var import_css12 = require("@cerberus/styled-system/css");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Input(props) {
   const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
   const inputStyles = (0, import_recipes10.input)({ size });
   const { invalid, ...fieldStates } = useFieldContext();
   const hasEndIcon = Boolean(endIcon);
   const { invalid: InvalidIcon } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: inputStyles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: inputStyles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "input",
       {
         ...nativeProps,
@@ -961,8 +1060,8 @@ function Input(props) {
         className: (0, import_css12.cx)("peer", nativeProps.className, inputStyles.input)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
   ] });
 }
 
@@ -970,12 +1069,12 @@ function Input(props) {
 var import_recipes11 = require("@cerberus/styled-system/recipes");
 var import_css13 = require("@cerberus/styled-system/css");
 var import_patterns6 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = 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_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "label",
     {
       ...nativeProps,
@@ -990,7 +1089,7 @@ function Label(props) {
       ),
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "span",
           {
             className: (0, import_css13.css)({
@@ -1009,11 +1108,11 @@ function Label(props) {
 var import_css14 = require("@cerberus/styled-system/css");
 var import_recipes12 = require("@cerberus-design/styled-system/recipes");
 var import_patterns7 = require("@cerberus-design/styled-system/patterns");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Legend(props) {
   const { size, ...nativeProps } = props;
   const { invalid, ...formState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "legend",
     {
       ...nativeProps,
@@ -1031,7 +1130,7 @@ function Legend(props) {
       ),
       children: [
         nativeProps.children,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Show, { when: formState.required, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Show, { when: formState.required, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "span",
           {
             className: (0, import_css14.css)({
@@ -1050,9 +1149,9 @@ function Legend(props) {
 var import_css15 = require("@cerberus/styled-system/css");
 var import_recipes13 = require("@cerberus/styled-system/recipes");
 var import_react6 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function ModalEl(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "dialog",
     {
       ...props,
@@ -1066,9 +1165,9 @@ var Modal = (0, import_react6.forwardRef)(ModalEl);
 // src/components/ModalHeader.tsx
 var import_css16 = require("@cerberus/styled-system/css");
 var import_patterns8 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function ModalHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       ...props,
@@ -1087,17 +1186,17 @@ function ModalHeader(props) {
 // src/components/ModalHeading.tsx
 var import_css17 = require("@cerberus/styled-system/css");
 var import_recipes14 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function ModalHeading(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { ...props, className: (0, import_css17.cx)(props.className, (0, import_recipes14.modal)().heading) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { ...props, className: (0, import_css17.cx)(props.className, (0, import_recipes14.modal)().heading) });
 }
 
 // src/components/ModalDescription.tsx
 var import_css18 = require("@cerberus/styled-system/css");
 var import_recipes15 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function ModalDescription(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { ...props, className: (0, import_css18.cx)(props.className, (0, import_recipes15.modal)().description) });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { ...props, className: (0, import_css18.cx)(props.className, (0, import_recipes15.modal)().description) });
 }
 
 // src/components/NavMenuTrigger.tsx
@@ -1116,7 +1215,7 @@ function createNavTriggerProps(values) {
 // src/context/navMenu.tsx
 var import_css19 = require("@cerberus/styled-system/css");
 var import_react7 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var NavMenuContext = (0, import_react7.createContext)(null);
 function NavMenu(props) {
   const triggerRef = (0, import_react7.useRef)(null);
@@ -1134,7 +1233,7 @@ function NavMenu(props) {
     }),
     [expanded, handleToggle]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NavMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(NavMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "nav",
     {
       className: (0, import_css19.css)({
@@ -1153,7 +1252,7 @@ function useNavMenuContext() {
 }
 
 // src/components/NavMenuTrigger.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function NavMenuTrigger(props) {
   const {
     as,
@@ -1179,11 +1278,11 @@ function NavMenuTrigger(props) {
     },
     [onClick, onToggle]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Show,
     {
       when: hasAs,
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "button",
         {
           ...nativeProps,
@@ -1201,7 +1300,7 @@ function NavMenuTrigger(props) {
           children: props.children
         }
       ),
-      children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         AsSub,
         {
           ...nativeProps,
@@ -1218,7 +1317,7 @@ function NavMenuTrigger(props) {
 var import_react9 = require("react");
 var import_css21 = require("@cerberus/styled-system/css");
 var import_patterns9 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function getPosition(position) {
   const defaultPositions = {
     left: "auto",
@@ -1276,7 +1375,7 @@ function NavMenuList(props) {
     () => getPosition(position ?? "bottom"),
     [position]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Show, { when: expanded, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Show, { when: expanded, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "ul",
     {
       ...nativeProps,
@@ -1290,22 +1389,22 @@ function NavMenuList(props) {
 
 // src/components/NavMenuLink.tsx
 var import_css22 = require("@cerberus/styled-system/css");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function NavMenuLink(props) {
   const { as, ...nativeProps } = props;
   const hasAs = Boolean(as);
   const AsSub = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "li",
     {
       className: (0, import_css22.css)({
         w: "full"
       }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Show,
         {
           when: hasAs,
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "a",
             {
               ...nativeProps,
@@ -1321,7 +1420,7 @@ function NavMenuLink(props) {
               )
             }
           ),
-          children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AsSub, { ...nativeProps })
+          children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AsSub, { ...nativeProps })
         }
       )
     }
@@ -1362,19 +1461,19 @@ function trapFocus(modalRef) {
 }
 
 // src/components/Notification.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function MatchNotificationIcon(props) {
   const palette = props.palette || "info";
   const key = `${palette}Notification`;
   const Icon = $cerberusIcons[key];
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, {});
 }
 function Notification(props) {
   const { children, palette, onClose, ...nativeProps } = props;
   const ref = (0, import_react10.useRef)(null);
   const onKeyDown = trapFocus(ref);
   const styles = (0, import_recipes17.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "dialog",
     {
       ...nativeProps,
@@ -1389,8 +1488,8 @@ function Notification(props) {
       onKeyDown,
       ref,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MatchNotificationIcon, { palette }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MatchNotificationIcon, { palette }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "div",
           {
             className: (0, import_patterns10.vstack)({
@@ -1401,14 +1500,14 @@ function Notification(props) {
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "button",
           {
             "aria-label": "Close",
             className: styles.close,
             onClick: onClose,
             value: props.id,
-            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons2.Close, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons2.Close, {})
           }
         )
       ]
@@ -1419,21 +1518,21 @@ function Notification(props) {
 // src/components/NotificationHeading.tsx
 var import_css24 = require("@cerberus/styled-system/css");
 var import_recipes18 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function NotificationHeading(props) {
   const { palette, ...nativeProps } = props;
   const styles = (0, import_recipes18.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: (0, import_css24.cx)(nativeProps.className, styles.heading), ...nativeProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: (0, import_css24.cx)(nativeProps.className, styles.heading), ...nativeProps });
 }
 
 // src/components/NotificationDescription.tsx
 var import_css25 = require("@cerberus/styled-system/css");
 var import_recipes19 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function NotificationDescription(props) {
   const { palette, ...nativeProps } = props;
   const styles = (0, import_recipes19.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "p",
     {
       className: (0, import_css25.cx)(nativeProps.className, styles.description),
@@ -1456,13 +1555,13 @@ function Portal(props) {
 var import_css26 = require("@cerberus/styled-system/css");
 var import_patterns11 = require("@cerberus/styled-system/patterns");
 var import_recipes20 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function Radio(props) {
   const { children, size, ...nativeProps } = props;
   const { invalid, ...state } = useFieldContext();
   const styles = (0, import_recipes20.radio)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: (0, import_css26.cx)("group", (0, import_patterns11.hstack)(), styles.root), tabIndex: 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_css26.cx)("group", (0, import_patterns11.hstack)(), styles.root), tabIndex: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "input",
       {
         ...nativeProps,
@@ -1481,7 +1580,7 @@ function Radio(props) {
 var import_css27 = require("@cerberus/styled-system/css");
 var import_patterns12 = require("@cerberus/styled-system/patterns");
 var import_recipes21 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Select(props) {
   const { describedBy, size, ...nativeProps } = props;
   const { invalid, ...fieldStates } = useFieldContext();
@@ -1489,8 +1588,8 @@ function Select(props) {
   const styles = (0, import_recipes21.select)({
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: styles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "select",
       {
         ...nativeProps,
@@ -1500,7 +1599,7 @@ function Select(props) {
         className: styles.input
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "span",
       {
         className: (0, import_css27.cx)(
@@ -1510,28 +1609,28 @@ function Select(props) {
           })
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "span",
             {
               ...invalid && { "data-invalid": true },
               className: styles.stateIcon,
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InvalidIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InvalidIcon, {})
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: styles.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectArrow, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: styles.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectArrow, {}) })
         ]
       }
     )
   ] });
 }
 function Option(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("option", { ...props });
 }
 
 // src/components/Spinner.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Spinner(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "svg",
     {
       "aria-busy": "true",
@@ -1541,7 +1640,7 @@ function Spinner(props) {
       width: props.size,
       viewBox: "0 0 24 24",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "g",
         {
           fill: "none",
@@ -1550,14 +1649,14 @@ function Spinner(props) {
           strokeLinejoin: "round",
           strokeWidth: 2,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               "path",
               {
                 strokeDasharray: 16,
                 strokeDashoffset: 16,
                 d: "M12 3c4.97 0 9 4.03 9 9",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     "animate",
                     {
                       fill: "freeze",
@@ -1566,7 +1665,7 @@ function Spinner(props) {
                       values: "16;0"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     "animateTransform",
                     {
                       attributeName: "transform",
@@ -1579,14 +1678,14 @@ function Spinner(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime33.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                   "animate",
                   {
                     fill: "freeze",
@@ -1610,7 +1709,7 @@ var import_react13 = require("react");
 // src/context/tabs.tsx
 var import_recipes22 = require("@cerberus/styled-system/recipes");
 var import_react11 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var TabsContext = (0, import_react11.createContext)(null);
 function Tabs(props) {
   const { cache, active, id, palette } = props;
@@ -1642,7 +1741,7 @@ function Tabs(props) {
       window.localStorage.setItem(uuid, activeTab);
     }
   }, [activeTab, cache]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TabsContext.Provider, { value, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TabsContext.Provider, { value, children: props.children });
 }
 function useTabsContext() {
   const context = (0, import_react11.useContext)(TabsContext);
@@ -1712,7 +1811,7 @@ function useTabsKeyboardNavigation() {
 }
 
 // src/components/Tab.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Tab(props) {
   const { value, ...nativeProps } = props;
   const { active, onTabUpdate, styles } = useTabsContext();
@@ -1724,7 +1823,7 @@ function Tab(props) {
     (_a = props.onClick) == null ? void 0 : _a.call(props, e);
     startTransition(() => onTabUpdate(e.currentTarget.value));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "button",
     {
       ...nativeProps,
@@ -1745,11 +1844,11 @@ function Tab(props) {
 // src/components/TabList.tsx
 var import_css29 = require("@cerberus/styled-system/css");
 var import_patterns13 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function TabList(props) {
   const { description, ...nativeProps } = props;
   const { id, styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       ...nativeProps,
@@ -1770,12 +1869,12 @@ function TabList(props) {
 // src/components/TabPanel.tsx
 var import_css30 = require("@cerberus/styled-system/css");
 var import_react14 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function TabPanel(props) {
   const { tab, ...nativeProps } = props;
   const { active, styles } = useTabsContext();
   const isActive = (0, import_react14.useMemo)(() => active === tab, [active, tab]);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Show, { when: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Show, { when: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       ...nativeProps,
@@ -1791,52 +1890,52 @@ function TabPanel(props) {
 // src/components/Table.tsx
 var import_css31 = require("@cerberus/styled-system/css");
 var import_recipes23 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Table(props) {
   const { caption, children, ...nativeProps } = props;
   const styles = (0, import_recipes23.table)();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "table",
     {
       ...nativeProps,
       className: (0, import_css31.cx)(nativeProps.className, styles.table),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("caption", { className: styles.caption, children: caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("caption", { className: styles.caption, children: caption }),
         children
       ]
     }
   ) });
 }
 function Tr(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tr", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("tr", { ...props });
 }
 
 // src/components/Thead.tsx
 var import_css32 = require("@cerberus/styled-system/css");
 var import_recipes24 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function Thead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("thead", { ...props, className: (0, import_css32.cx)(props.className, (0, import_recipes24.thead)()) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("thead", { ...props, className: (0, import_css32.cx)(props.className, (0, import_recipes24.thead)()) });
 }
 
 // src/components/Th.tsx
 var import_css33 = require("@cerberus/styled-system/css");
 var import_recipes25 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function Th(props) {
   const { size, onClick, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     Show,
     {
       when: Boolean(onClick),
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "th",
         {
           ...nativeProps,
           className: (0, import_css33.cx)(nativeProps.className, (0, import_recipes25.th)({ size }))
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "button",
         {
           className: (0, import_css33.cx)(
@@ -1861,10 +1960,10 @@ function Th(props) {
 // src/components/Td.tsx
 var import_css34 = require("@cerberus/styled-system/css");
 var import_recipes26 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Td(props) {
   const { size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "td",
     {
       ...nativeProps,
@@ -1881,10 +1980,10 @@ function Td(props) {
 // src/components/Tbody.tsx
 var import_recipes27 = require("@cerberus/styled-system/recipes");
 var import_css35 = require("@cerberus/styled-system/css");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Tbody(props) {
   const { decoration, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "tbody",
     {
       ...nativeProps,
@@ -1901,7 +2000,7 @@ function Tbody(props) {
 // src/components/Tag.tsx
 var import_css36 = require("@cerberus/styled-system/css");
 var import_recipes28 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Tag(props) {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
   const palette = (props == null ? void 0 : props.palette) ?? "page";
@@ -1909,7 +2008,7 @@ function Tag(props) {
   const shape = isClosable ? "pill" : initShape;
   const closableStyles = isClosable ? closableCss : "";
   const { close: Close2 } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "span",
     {
       ...nativeProps,
@@ -1925,7 +2024,7 @@ function Tag(props) {
       ),
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "button",
           {
             "aria-label": "Close",
@@ -1935,7 +2034,7 @@ function Tag(props) {
               size: "sm"
             }),
             onClick,
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Close2, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Close2, {})
           }
         ) })
       ]
@@ -1951,11 +2050,11 @@ var closableCss = (0, import_css36.css)({
 // src/components/Textarea.tsx
 var import_css37 = require("@cerberus/styled-system/css");
 var import_recipes29 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function Textarea(props) {
   const { describedBy, ...nativeProps } = props;
   const { invalid, ...fieldState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "textarea",
     {
       ...nativeProps,
@@ -1980,19 +2079,19 @@ function Textarea(props) {
 var import_css38 = require("@cerberus/styled-system/css");
 var import_patterns14 = require("@cerberus/styled-system/patterns");
 var import_recipes30 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Toggle(props) {
   const { size, describedBy, ...nativeProps } = props;
   const styles = (0, import_recipes30.toggle)({ size });
   const { invalid, ...state } = useFieldContext();
   const Icon = $cerberusIcons.toggleChecked;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "span",
     {
       className: (0, import_css38.cx)("group", styles.track, (0, import_patterns14.hstack)()),
       "data-checked": props.checked || props.defaultChecked,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "input",
           {
             ...nativeProps,
@@ -2004,7 +2103,7 @@ function Toggle(props) {
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "span",
           {
             className: (0, import_css38.cx)(
@@ -2013,7 +2112,7 @@ function Toggle(props) {
                 justify: "center"
               })
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon, {})
           }
         )
       ]
@@ -2052,7 +2151,7 @@ function useModal() {
 }
 
 // src/context/confirm-modal.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var ConfirmModalContext = (0, import_react16.createContext)(null);
 function ConfirmModal(props) {
   const { modalRef, show, close } = useModal();
@@ -2092,36 +2191,36 @@ function ConfirmModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(ConfirmModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "div",
           {
             className: (0, import_patterns15.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2129,17 +2228,17 @@ function ConfirmModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
         "div",
         {
           className: (0, import_patterns15.hstack)({
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               Button,
               {
                 autoFocus: true,
@@ -2153,7 +2252,7 @@ function ConfirmModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               Button,
               {
                 className: (0, import_css39.css)({
@@ -2187,7 +2286,7 @@ var import_react17 = require("react");
 var import_patterns16 = require("@cerberus/styled-system/patterns");
 var import_recipes31 = require("@cerberus/styled-system/recipes");
 var import_css40 = require("@cerberus/styled-system/css");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var NotificationsContext = (0, import_react17.createContext)(null);
 function NotificationCenter(props) {
   const [activeNotifications, setActiveNotifications] = (0, import_react17.useState)([]);
@@ -2220,10 +2319,10 @@ function NotificationCenter(props) {
     }),
     [handleNotify]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(NotificationsContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(NotificationsContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: styles.center, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: styles.center, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         Button,
         {
           className: (0, import_css40.cx)(styles.closeAll, (0, import_patterns16.animateIn)()),
@@ -2235,7 +2334,7 @@ function NotificationCenter(props) {
           children: "Close all"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "div",
         {
           className: (0, import_patterns16.vstack)({
@@ -2245,7 +2344,7 @@ function NotificationCenter(props) {
           style: {
             alignItems: "flex-end"
           },
-          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             MatchNotification,
             {
               ...option,
@@ -2262,7 +2361,7 @@ function MatchNotification(props) {
   const { palette, id, onClose, heading, description } = props;
   switch (palette) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
         Notification,
         {
           id,
@@ -2270,14 +2369,14 @@ function MatchNotification(props) {
           open: true,
           palette: "success",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NotificationHeading, { palette: "success", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NotificationDescription, { palette: "success", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NotificationHeading, { palette: "success", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NotificationDescription, { palette: "success", children: description })
           ]
         },
         id
       );
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
         Notification,
         {
           id,
@@ -2285,22 +2384,22 @@ function MatchNotification(props) {
           open: true,
           palette: "warning",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NotificationHeading, { palette: "warning", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NotificationDescription, { palette: "warning", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NotificationHeading, { palette: "warning", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NotificationDescription, { palette: "warning", children: description })
           ]
         },
         id
       );
     case "danger":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NotificationHeading, { palette: "danger", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NotificationDescription, { palette: "danger", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NotificationHeading, { palette: "danger", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NotificationDescription, { palette: "danger", children: description })
       ] }, id);
     case "info":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NotificationHeading, { palette: "info", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NotificationDescription, { palette: "info", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NotificationHeading, { palette: "info", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NotificationDescription, { palette: "info", children: description })
       ] }, id);
   }
 }
@@ -2318,7 +2417,7 @@ function useNotificationCenter() {
 var import_react18 = require("react");
 var import_css41 = require("@cerberus/styled-system/css");
 var import_patterns17 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var PromptModalContext = (0, import_react18.createContext)(null);
 function PromptModal(props) {
   const { modalRef, show, close } = useModal();
@@ -2368,36 +2467,36 @@ function PromptModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           "div",
           {
             className: (0, import_patterns17.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2405,10 +2504,10 @@ function PromptModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "div",
         {
           className: (0, import_patterns17.vstack)({
@@ -2416,10 +2515,10 @@ function PromptModal(props) {
             mt: "4",
             mb: "8"
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Label, { htmlFor: "confirm", size: "md", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Field, { invalid: !isValid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Label, { htmlFor: "confirm", size: "md", children: [
               "Type",
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 "strong",
                 {
                   className: (0, import_css41.css)({
@@ -2430,7 +2529,7 @@ function PromptModal(props) {
               ),
               "to confirm"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Input,
               {
                 id: "confirm",
@@ -2442,7 +2541,7 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
         "div",
         {
           className: (0, import_patterns17.hstack)({
@@ -2450,7 +2549,7 @@ function PromptModal(props) {
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Button,
               {
                 autoFocus: true,
@@ -2465,7 +2564,7 @@ function PromptModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Button,
               {
                 className: (0, import_css41.css)({
@@ -2559,7 +2658,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 }
 
 // src/context/theme.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var ThemeContext = (0, import_react20.createContext)(
   null
 );
@@ -2569,7 +2668,7 @@ function ThemeProvider(props) {
     updateMode: props.updateMode,
     updateTheme: props.updateTheme
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ThemeContext.Provider, { value: state, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
   const context = (0, import_react20.useContext)(ThemeContext);