@cerberus-design/react 0.8.1 → 0.9.0

package/build/legacy/index.cjs

@@ -22,6 +22,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   $cerberusIcons: () => $cerberusIcons,
+  Avatar: () => Avatar,
   Button: () => Button,
   Checkbox: () => Checkbox,
   ConfirmModal: () => ConfirmModal,
@@ -92,75 +93,18 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/Button.tsx
+// src/components/Avatar.tsx
 var import_css = require("@cerberus/styled-system/css");
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime = require("react/jsx-runtime");
-function Button(props) {
-  const { palette, usage, shape, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    {
-      ...nativeProps,
-      className: (0, import_css.cx)(
-        nativeProps.className,
-        (0, import_recipes.button)({
-          palette,
-          usage,
-          shape
-        })
-      )
-    }
-  );
-}
-
-// src/components/Checkbox.tsx
-var import_recipes2 = require("@cerberus/styled-system/recipes");
 var import_patterns = require("@cerberus/styled-system/patterns");
-var import_css2 = require("@cerberus/styled-system/css");
-
-// src/components/Show.tsx
-var import_react = require("react");
-function Show(props) {
-  const { when, children, fallback } = props;
-  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
-  return (0, import_react.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
-}
-
-// src/context/field.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var FieldContext = (0, import_react2.createContext)(null);
-function Field(props) {
-  const value = (0, import_react2.useMemo)(
-    () => ({
-      disabled: props.disabled,
-      readOnly: props.readOnly,
-      required: props.required,
-      invalid: props.invalid
-    }),
-    [props.disabled, props.readOnly, props.required, props.invalid]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldContext.Provider, { value, children: props.children });
-}
-function useFieldContext() {
-  const context = (0, import_react2.useContext)(FieldContext);
-  if (!context) {
-    throw new Error("useFieldContext must be used within a Field Provider.");
-  }
-  return context;
-}
+var import_recipes = require("@cerberus/styled-system/recipes");
 
 // src/config/cerbIcons.ts
 var import_icons = require("@cerberus/icons");
 
 // src/config/icons/checkbox.icons.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 function CheckmarkIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
     {
       "aria-hidden": "true",
@@ -169,7 +113,7 @@ function CheckmarkIcon(props) {
       role: "img",
       viewBox: "0 0 24 24",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "path",
         {
           fill: "currentColor",
@@ -180,7 +124,7 @@ function CheckmarkIcon(props) {
   );
 }
 function IndeterminateIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
     {
       "aria-hidden": "true",
@@ -189,13 +133,14 @@ function IndeterminateIcon(props) {
       fill: "none",
       viewBox: "0 0 24 24",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
     }
   );
 }
 
 // src/config/cerbIcons.ts
 var defaultIcons = {
+  avatar: import_icons.UserFilled,
   checkbox: CheckmarkIcon,
   close: import_icons.CloseFilled,
   confirmModal: import_icons.Information,
@@ -232,25 +177,175 @@ function defineIcons(icons) {
 }
 var $cerberusIcons = defaultIcons;
 
+// src/components/Show.tsx
+var import_react = require("react");
+function Show(props) {
+  const { when, children, fallback } = props;
+  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
+  return (0, import_react.useMemo)(() => {
+    if (condition) return children;
+    return fallback ?? null;
+  }, [condition, children, fallback]);
+}
+
+// src/components/Avatar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Avatar(props) {
+  const {
+    ariaLabel,
+    as,
+    gradient,
+    size,
+    src,
+    width,
+    height,
+    icon,
+    ...nativeProps
+  } = props;
+  const { avatar: AvatarIcon } = $cerberusIcons;
+  const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ...nativeProps,
+      className: (0, import_css.cx)(
+        nativeProps.className,
+        (0, import_recipes.avatar)({ gradient, size }),
+        (0, import_patterns.circle)()
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Show,
+        {
+          when: Boolean(src) || Boolean(as),
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Show,
+            {
+              when: Boolean(initials),
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                Show,
+                {
+                  when: Boolean(icon),
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    AvatarIcon,
+                    {
+                      size: iconSizeMap[size]
+                    }
+                  ),
+                  children: icon
+                }
+              ),
+              children: initials
+            }
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Show,
+            {
+              when: Boolean(as),
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "img",
+                {
+                  alt: props.ariaLabel,
+                  className: (0, import_css.css)({
+                    h: "full",
+                    objectFit: "cover",
+                    w: "full"
+                  }),
+                  decoding: "async",
+                  loading: "lazy",
+                  src,
+                  height,
+                  width
+                }
+              ),
+              children: as
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var iconSizeMap = {
+  xs: 16,
+  sm: 16,
+  md: 20,
+  lg: 34,
+  xl: 32,
+  "2xl": 32,
+  "3xl": 32,
+  "4xl": 32
+};
+
+// 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");
+function Button(props) {
+  const { palette, usage, shape, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      ...nativeProps,
+      className: (0, import_css2.cx)(
+        nativeProps.className,
+        (0, import_recipes2.button)({
+          palette,
+          usage,
+          shape
+        })
+      )
+    }
+  );
+}
+
 // src/components/Checkbox.tsx
+var import_recipes3 = require("@cerberus/styled-system/recipes");
+var import_patterns2 = require("@cerberus/styled-system/patterns");
+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 FieldContext = (0, import_react2.createContext)(null);
+function Field(props) {
+  const value = (0, import_react2.useMemo)(
+    () => ({
+      disabled: props.disabled,
+      readOnly: props.readOnly,
+      required: props.required,
+      invalid: props.invalid
+    }),
+    [props.disabled, props.readOnly, props.required, props.invalid]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldContext.Provider, { value, children: props.children });
+}
+function useFieldContext() {
+  const context = (0, import_react2.useContext)(FieldContext);
+  if (!context) {
+    throw new Error("useFieldContext must be used within a Field Provider.");
+  }
+  return context;
+}
+
+// src/components/Checkbox.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function Checkbox(props) {
   const { describedBy, size, checked, mixed, ...nativeProps } = props;
   const { invalid, ...fieldStates } = useFieldContext();
-  const styles = (0, import_recipes2.checkbox)({ size });
+  const styles = (0, import_recipes3.checkbox)({ size });
   const { checkbox: CheckIcon, indeterminate: IndeterminateIcon2 } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
-      className: (0, import_css2.cx)(
+      className: (0, import_css3.cx)(
         styles.root,
-        (0, import_patterns.vstack)({
+        (0, import_patterns2.vstack)({
           gap: "0",
           justify: "center"
         })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "input",
           {
             ...nativeProps,
@@ -258,12 +353,12 @@ function Checkbox(props) {
             ...describedBy && { "aria-describedby": describedBy },
             ...invalid && { "aria-invalid": true },
             ...mixed && { "aria-checked": "mixed" },
-            className: (0, import_css2.cx)("peer", nativeProps.className, styles.input),
+            className: (0, import_css3.cx)("peer", nativeProps.className, styles.input),
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: checked && !mixed, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckIcon, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: mixed, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IndeterminateIcon2, {}) }) })
+        /* @__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, {}) }) })
       ]
     }
   );
@@ -272,7 +367,7 @@ function Checkbox(props) {
 // src/components/Droppable.tsx
 var import_core = require("@dnd-kit/core");
 var import_react3 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Droppable(props) {
   const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } = props;
   const uuid = (0, import_react3.useId)();
@@ -282,7 +377,7 @@ function Droppable(props) {
     id: id || uuid,
     resizeObserverConfig
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       ...nativeProps,
@@ -295,27 +390,27 @@ function Droppable(props) {
 }
 
 // src/components/FieldMessage.tsx
-var import_css3 = require("@cerberus/styled-system/css");
-var import_recipes3 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_css4 = require("@cerberus/styled-system/css");
+var import_recipes4 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function FieldMessage(props) {
   const { invalid } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "small",
     {
       ...props,
       ...invalid && { "aria-invalid": true },
-      className: (0, import_css3.cx)(props.className, (0, import_recipes3.fieldMessage)())
+      className: (0, import_css4.cx)(props.className, (0, import_recipes4.fieldMessage)())
     }
   );
 }
 
 // src/context/feature-flags.tsx
 var import_react4 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var FeatureFlagContext = (0, import_react4.createContext)(null);
 function FeatureFlags(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
 }
 function useFeatureFlags(key) {
   const context = (0, import_react4.useContext)(FeatureFlagContext);
@@ -328,36 +423,36 @@ function useFeatureFlags(key) {
 }
 
 // src/components/FeatureFlag.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function FeatureFlag(props) {
   const showContent = useFeatureFlags(props.flag);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Show, { when: showContent, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Show, { when: showContent, children: props.children });
 }
 
 // src/components/FileStatus.tsx
 var import_react5 = require("react");
 
 // src/components/ProgressBar.tsx
-var import_css4 = require("@cerberus/styled-system/css");
-var import_recipes4 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_css5 = require("@cerberus/styled-system/css");
+var import_recipes5 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function ProgressBar(props) {
   const { indeterminate, size, usage, now, ...nativeProps } = props;
-  const styles = (0, import_recipes4.progressBar)({ size, usage });
+  const styles = (0, import_recipes5.progressBar)({ size, usage });
   const nowClamped = Math.min(100, Math.max(0, now || 0));
   const width = {
     width: indeterminate ? "50%" : `${nowClamped}%`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       ...nativeProps,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": indeterminate ? 0 : nowClamped,
-      className: (0, import_css4.cx)(nativeProps.className, styles.root),
+      className: (0, import_css5.cx)(nativeProps.className, styles.root),
       role: "meter",
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "div",
         {
           ...indeterminate && { "data-indeterminate": true },
@@ -371,21 +466,21 @@ function ProgressBar(props) {
 }
 
 // src/components/IconButton.tsx
-var import_css5 = require("@cerberus/styled-system/css");
-var import_recipes5 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_css6 = require("@cerberus/styled-system/css");
+var import_recipes6 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function IconButton(props) {
   const { ariaLabel, palette, usage, size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "button",
     {
       ...nativeProps,
       "data-tooltip": true,
       "data-position": props.tooltipPosition ?? "top",
       "aria-label": ariaLabel ?? "Icon Button",
-      className: (0, import_css5.cx)(
+      className: (0, import_css6.cx)(
         nativeProps.className,
-        (0, import_recipes5.iconButton)({
+        (0, import_recipes6.iconButton)({
           palette,
           usage,
           size
@@ -396,10 +491,10 @@ function IconButton(props) {
 }
 
 // src/components/FileStatus.tsx
-var import_recipes6 = require("@cerberus/styled-system/recipes");
-var import_css6 = require("@cerberus/styled-system/css");
-var import_patterns2 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_recipes7 = require("@cerberus/styled-system/recipes");
+var import_css7 = require("@cerberus/styled-system/css");
+var import_patterns3 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var processStatus = /* @__PURE__ */ ((processStatus2) => {
   processStatus2["TODO"] = "todo";
   processStatus2["PROCESSING"] = "processing";
@@ -415,15 +510,15 @@ function FileStatus(props) {
   const styles = (0, import_react5.useMemo)(() => {
     switch (status) {
       case "todo" /* TODO */:
-        return (0, import_recipes6.fileStatus)({ status: "todo" });
+        return (0, import_recipes7.fileStatus)({ status: "todo" });
       case "processing" /* PROCESSING */:
-        return (0, import_recipes6.fileStatus)({ status: "processing" });
+        return (0, import_recipes7.fileStatus)({ status: "processing" });
       case "done" /* DONE */:
-        return (0, import_recipes6.fileStatus)({ status: "done" });
+        return (0, import_recipes7.fileStatus)({ status: "done" });
       case "error" /* ERROR */:
-        return (0, import_recipes6.fileStatus)({ status: "error" });
+        return (0, import_recipes7.fileStatus)({ status: "error" });
       default:
-        return (0, import_recipes6.fileStatus)();
+        return (0, import_recipes7.fileStatus)();
     }
   }, [status]);
   const handleClick = (0, import_react5.useCallback)(
@@ -435,65 +530,65 @@ function FileStatus(props) {
     },
     [onClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       ...nativeProps,
-      className: (0, import_css6.cx)(nativeProps.className, styles.root, (0, import_patterns2.hstack)()),
+      className: (0, import_css7.cx)(nativeProps.className, styles.root, (0, import_patterns3.hstack)()),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
-            className: (0, import_css6.cx)(
+            className: (0, import_css7.cx)(
               styles.icon,
-              (0, import_patterns2.circle)({
+              (0, import_patterns3.circle)({
                 size: "2rem"
               })
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MatchFileStatusIcon, { status })
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MatchFileStatusIcon, { status })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "div",
           {
-            className: (0, import_patterns2.vstack)({
+            className: (0, import_patterns3.vstack)({
               alignItems: "flex-start",
               gap: "0.12rem",
               w: "full"
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "small",
                 {
-                  className: (0, import_css6.css)({
+                  className: (0, import_css7.css)({
                     color: "page.text.initial",
                     textStyle: "label-sm"
                   }),
                   children: file
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ProgressBar, { now, size: "sm" }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Field, { invalid: modalIconPalette === "danger", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBar, { now, size: "sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Field, { invalid: modalIconPalette === "danger", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 FieldMessage,
                 {
-                  className: (0, import_css6.css)({
+                  className: (0, import_css7.css)({
                     color: "page.text.100"
                   }),
                   id: `help:${file}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MatchFileStatusText, { status, now })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MatchFileStatusText, { status, now })
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           IconButton,
           {
             ariaLabel: actionLabel,
             onClick: handleClick,
             palette,
             size: "sm",
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MatchStatusAction, { status })
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MatchStatusAction, { status })
           }
         )
       ]
@@ -509,11 +604,11 @@ function MatchFileStatusIcon(props) {
   switch (props.status) {
     case "todo" /* TODO */:
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FileUploaderIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FileUploaderIcon, {});
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DoneIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DoneIcon, {});
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(InvalidIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InvalidIcon, {});
     default:
       throw new Error("Unknown status");
   }
@@ -537,11 +632,11 @@ function MatchStatusAction(props) {
   switch (props.status) {
     case "todo" /* TODO */:
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CloseIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon, {});
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RedoIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RedoIcon, {});
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TrashIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TrashIcon, {});
     default:
       throw new Error("Invalid status");
   }
@@ -587,46 +682,46 @@ function getModalIconPalette(status) {
 }
 
 // src/components/FileUploader.tsx
-var import_css7 = require("@cerberus/styled-system/css");
-var import_patterns3 = require("@cerberus/styled-system/patterns");
-var import_recipes7 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_css8 = require("@cerberus/styled-system/css");
+var import_patterns4 = require("@cerberus/styled-system/patterns");
+var import_recipes8 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function FileUploader(props) {
   var _a;
-  const styles = (0, import_recipes7.fileUploader)();
+  const styles = (0, import_recipes8.fileUploader)();
   const Icon = $cerberusIcons.fileUploader;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
-      className: (0, import_css7.cx)(
-        (0, import_patterns3.vstack)({
+      className: (0, import_css8.cx)(
+        (0, import_patterns4.vstack)({
           justify: "center"
         }),
         styles.container
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: (0, import_css7.cx)(styles.icon, (0, import_recipes7.modalIcon)(), (0, import_patterns3.circle)()), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: (0, import_css8.cx)(styles.icon, (0, import_recipes8.modalIcon)(), (0, import_patterns4.circle)()), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "label",
           {
-            className: (0, import_css7.cx)(
-              (0, import_patterns3.vstack)({
+            className: (0, import_css8.cx)(
+              (0, import_patterns4.vstack)({
                 justify: "center"
               }),
               styles.label
             ),
             htmlFor: props.name,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Show, { when: Boolean(props.heading), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: styles.heading, children: props.heading }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Show, { when: Boolean(props.heading), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: styles.heading, children: props.heading }) }),
               "Import ",
               (_a = props.accept) == null ? void 0 : _a.replace(",", ", "),
               " files",
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: styles.description, children: "Click to select files" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: styles.description, children: "Click to select files" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "input",
                 {
                   ...props,
-                  className: (0, import_css7.cx)(props.className, styles.input),
+                  className: (0, import_css8.cx)(props.className, styles.input),
                   type: "file"
                 }
               )
@@ -639,18 +734,18 @@ function FileUploader(props) {
 }
 
 // src/components/Input.tsx
-var import_recipes8 = require("@cerberus/styled-system/recipes");
-var import_css8 = require("@cerberus/styled-system/css");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_recipes9 = require("@cerberus/styled-system/recipes");
+var import_css9 = require("@cerberus/styled-system/css");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Input(props) {
   const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
-  const inputStyles = (0, import_recipes8.input)({ size });
+  const inputStyles = (0, import_recipes9.input)({ size });
   const { invalid, ...fieldStates } = useFieldContext();
   const hasEndIcon = Boolean(endIcon);
   const { invalid: InvalidIcon } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: inputStyles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: inputStyles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "input",
       {
         ...nativeProps,
@@ -658,42 +753,42 @@ function Input(props) {
         ...describedBy && { "aria-describedby": describedBy },
         ...invalid && { "aria-invalid": true },
         "data-start-icon": Boolean(startIcon),
-        className: (0, import_css8.cx)("peer", nativeProps.className, inputStyles.input)
+        className: (0, import_css9.cx)("peer", nativeProps.className, inputStyles.input)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
   ] });
 }
 
 // src/components/Label.tsx
-var import_recipes9 = require("@cerberus/styled-system/recipes");
-var import_css9 = require("@cerberus/styled-system/css");
-var import_patterns4 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_recipes10 = require("@cerberus/styled-system/recipes");
+var import_css10 = require("@cerberus/styled-system/css");
+var import_patterns5 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime15 = 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_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "label",
     {
       ...nativeProps,
       ...disabled && { "data-disabled": true },
-      className: (0, import_css9.cx)(
+      className: (0, import_css10.cx)(
         nativeProps.className,
-        (0, import_recipes9.label)({ size, usage }),
-        (0, import_patterns4.hstack)({
+        (0, import_recipes10.label)({ size, usage }),
+        (0, import_patterns5.hstack)({
           justify: "space-between",
           w: "full"
         })
       ),
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "span",
           {
-            className: (0, import_css9.css)({
+            className: (0, import_css10.css)({
               color: "inherit",
               fontSize: "inherit"
             }),
@@ -706,16 +801,16 @@ function Label(props) {
 }
 
 // src/components/Modal.tsx
-var import_css10 = require("@cerberus/styled-system/css");
-var import_recipes10 = require("@cerberus/styled-system/recipes");
+var import_css11 = require("@cerberus/styled-system/css");
+var import_recipes11 = require("@cerberus/styled-system/recipes");
 var import_react6 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function ModalEl(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "dialog",
     {
       ...props,
-      className: (0, import_css10.cx)(props.className, (0, import_recipes10.modal)().dialog),
+      className: (0, import_css11.cx)(props.className, (0, import_recipes11.modal)().dialog),
       ref
     }
   );
@@ -723,17 +818,17 @@ function ModalEl(props, ref) {
 var Modal = (0, import_react6.forwardRef)(ModalEl);
 
 // src/components/ModalHeader.tsx
-var import_css11 = require("@cerberus/styled-system/css");
-var import_patterns5 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_css12 = require("@cerberus/styled-system/css");
+var import_patterns6 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function ModalHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_css11.cx)(
+      className: (0, import_css12.cx)(
         props.className,
-        (0, import_patterns5.vstack)({
+        (0, import_patterns6.vstack)({
           alignItems: "flex-start",
           gap: "4",
           mb: "8"
@@ -744,38 +839,38 @@ function ModalHeader(props) {
 }
 
 // src/components/ModalHeading.tsx
-var import_css12 = require("@cerberus/styled-system/css");
-var import_recipes11 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-function ModalHeading(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { ...props, className: (0, import_css12.cx)(props.className, (0, import_recipes11.modal)().heading) });
-}
-
-// src/components/ModalDescription.tsx
 var import_css13 = require("@cerberus/styled-system/css");
 var import_recipes12 = require("@cerberus/styled-system/recipes");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function ModalDescription(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { ...props, className: (0, import_css13.cx)(props.className, (0, import_recipes12.modal)().description) });
+function ModalHeading(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { ...props, className: (0, import_css13.cx)(props.className, (0, import_recipes12.modal)().heading) });
 }
 
-// src/components/ModalIcon.tsx
+// src/components/ModalDescription.tsx
 var import_css14 = require("@cerberus/styled-system/css");
-var import_patterns6 = require("@cerberus/styled-system/patterns");
 var import_recipes13 = require("@cerberus/styled-system/recipes");
 var import_jsx_runtime19 = require("react/jsx-runtime");
+function ModalDescription(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { ...props, className: (0, import_css14.cx)(props.className, (0, import_recipes13.modal)().description) });
+}
+
+// src/components/ModalIcon.tsx
+var import_css15 = require("@cerberus/styled-system/css");
+var import_patterns7 = require("@cerberus/styled-system/patterns");
+var import_recipes14 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function ModalIcon(props) {
   const { palette, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       ...nativeProps,
-      className: (0, import_css14.cx)(
+      className: (0, import_css15.cx)(
         nativeProps.className,
-        (0, import_recipes13.modalIcon)({
+        (0, import_recipes14.modalIcon)({
           palette
         }),
-        (0, import_patterns6.circle)()
+        (0, import_patterns7.circle)()
       ),
       children: props.children
     }
@@ -784,8 +879,8 @@ function ModalIcon(props) {
 
 // src/components/NavMenuTrigger.tsx
 var import_react8 = require("react");
-var import_css16 = require("@cerberus/styled-system/css");
-var import_recipes14 = require("@cerberus/styled-system/recipes");
+var import_css17 = require("@cerberus/styled-system/css");
+var import_recipes15 = require("@cerberus/styled-system/recipes");
 
 // src/aria-helpers/nav-menu.aria.ts
 function createNavTriggerProps(values) {
@@ -796,9 +891,9 @@ function createNavTriggerProps(values) {
 }
 
 // src/context/navMenu.tsx
-var import_css15 = require("@cerberus/styled-system/css");
+var import_css16 = require("@cerberus/styled-system/css");
 var import_react7 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var NavMenuContext = (0, import_react7.createContext)(null);
 function NavMenu(props) {
   const triggerRef = (0, import_react7.useRef)(null);
@@ -816,10 +911,10 @@ function NavMenu(props) {
     }),
     [expanded, handleToggle]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NavMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(NavMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "nav",
     {
-      className: (0, import_css15.css)({
+      className: (0, import_css16.css)({
         position: "relative"
       }),
       children: props.children
@@ -835,7 +930,7 @@ function useNavMenuContext() {
 }
 
 // src/components/NavMenuTrigger.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function NavMenuTrigger(props) {
   const {
     as,
@@ -861,18 +956,18 @@ function NavMenuTrigger(props) {
     },
     [onClick, onToggle]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Show,
     {
       when: hasAs,
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           ...nativeProps,
           ...ariaProps,
-          className: (0, import_css16.cx)(
+          className: (0, import_css17.cx)(
             nativeProps.className,
-            (0, import_recipes14.button)({
+            (0, import_recipes15.button)({
               palette,
               usage,
               shape
@@ -883,7 +978,7 @@ function NavMenuTrigger(props) {
           children: props.children
         }
       ),
-      children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         AsSub,
         {
           ...nativeProps,
@@ -898,9 +993,9 @@ function NavMenuTrigger(props) {
 
 // src/components/NavMenuList.tsx
 var import_react9 = require("react");
-var import_css17 = require("@cerberus/styled-system/css");
-var import_patterns7 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_css18 = require("@cerberus/styled-system/css");
+var import_patterns8 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function getPosition(position) {
   const defaultPositions = {
     left: "auto",
@@ -921,7 +1016,7 @@ function getPosition(position) {
       return defaultPositions;
   }
 }
-var navListStyles = (0, import_patterns7.vstack)({
+var navListStyles = (0, import_patterns8.vstack)({
   alignItems: "flex-start",
   bgColor: "page.surface.100",
   boxShadow: "lg",
@@ -958,12 +1053,12 @@ function NavMenuList(props) {
     () => getPosition(position ?? "bottom"),
     [position]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Show, { when: expanded, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Show, { when: expanded, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "ul",
     {
       ...nativeProps,
       "data-position": position ?? "bottom",
-      className: (0, import_css17.cx)(nativeProps.className, navListStyles),
+      className: (0, import_css18.cx)(nativeProps.className, navListStyles),
       ref: menuRef,
       style: locationStyles
     }
@@ -971,29 +1066,29 @@ function NavMenuList(props) {
 }
 
 // src/components/NavMenuLink.tsx
-var import_css18 = require("@cerberus/styled-system/css");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_css19 = require("@cerberus/styled-system/css");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function NavMenuLink(props) {
   const { as, ...nativeProps } = props;
   const hasAs = Boolean(as);
   const AsSub = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "li",
     {
-      className: (0, import_css18.css)({
+      className: (0, import_css19.css)({
         w: "full"
       }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         Show,
         {
           when: hasAs,
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "a",
             {
               ...nativeProps,
-              className: (0, import_css18.cx)(
+              className: (0, import_css19.cx)(
                 nativeProps.className,
-                (0, import_css18.css)({
+                (0, import_css19.css)({
                   color: "action.navigation.initial",
                   textStyle: "link",
                   _hover: {
@@ -1003,7 +1098,7 @@ function NavMenuLink(props) {
               )
             }
           ),
-          children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AsSub, { ...nativeProps })
+          children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AsSub, { ...nativeProps })
         }
       )
     }
@@ -1011,9 +1106,9 @@ function NavMenuLink(props) {
 }
 
 // src/components/Notification.tsx
-var import_css19 = require("@cerberus/styled-system/css");
-var import_patterns8 = require("@cerberus/styled-system/patterns");
-var import_recipes15 = require("@cerberus/styled-system/recipes");
+var import_css20 = require("@cerberus/styled-system/css");
+var import_patterns9 = require("@cerberus/styled-system/patterns");
+var import_recipes16 = require("@cerberus/styled-system/recipes");
 var import_react10 = require("react");
 var import_icons2 = require("@cerberus/icons");
 
@@ -1044,25 +1139,25 @@ function trapFocus(modalRef) {
 }
 
 // src/components/Notification.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = 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_runtime24.jsx)(Icon, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime25.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_recipes15.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  const styles = (0, import_recipes16.notification)({ palette });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "dialog",
     {
       ...nativeProps,
-      className: (0, import_css19.cx)(
+      className: (0, import_css20.cx)(
         nativeProps.className,
-        (0, import_patterns8.hstack)({
+        (0, import_patterns9.hstack)({
           position: "relative",
           gap: "4"
         }),
@@ -1072,11 +1167,11 @@ function Notification(props) {
       ref,
       role: "alert",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MatchNotificationIcon, { palette }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MatchNotificationIcon, { palette }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "div",
           {
-            className: (0, import_patterns8.vstack)({
+            className: (0, import_patterns9.vstack)({
               alignItems: "flex-start",
               gap: "0",
               py: "2"
@@ -1084,14 +1179,14 @@ function Notification(props) {
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "button",
           {
             "aria-label": "Close",
             className: styles.close,
             onClick: onClose,
             value: props.id,
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.Close, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons2.Close, {})
           }
         )
       ]
@@ -1100,26 +1195,26 @@ function Notification(props) {
 }
 
 // src/components/NotificationHeading.tsx
-var import_css20 = require("@cerberus/styled-system/css");
-var import_recipes16 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_css21 = require("@cerberus/styled-system/css");
+var import_recipes17 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function NotificationHeading(props) {
   const { palette, ...nativeProps } = props;
-  const styles = (0, import_recipes16.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: (0, import_css20.cx)(nativeProps.className, styles.heading), ...nativeProps });
+  const styles = (0, import_recipes17.notification)({ palette });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: (0, import_css21.cx)(nativeProps.className, styles.heading), ...nativeProps });
 }
 
 // src/components/NotificationDescription.tsx
-var import_css21 = require("@cerberus/styled-system/css");
-var import_recipes17 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_css22 = require("@cerberus/styled-system/css");
+var import_recipes18 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function NotificationDescription(props) {
   const { palette, ...nativeProps } = props;
-  const styles = (0, import_recipes17.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  const styles = (0, import_recipes18.notification)({ palette });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "p",
     {
-      className: (0, import_css21.cx)(nativeProps.className, styles.description),
+      className: (0, import_css22.cx)(nativeProps.className, styles.description),
       ...nativeProps
     }
   );
@@ -1133,22 +1228,22 @@ function Portal(props) {
 }
 
 // src/components/Radio.tsx
-var import_css22 = require("@cerberus/styled-system/css");
-var import_patterns9 = require("@cerberus/styled-system/patterns");
-var import_recipes18 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_css23 = require("@cerberus/styled-system/css");
+var import_patterns10 = require("@cerberus/styled-system/patterns");
+var import_recipes19 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Radio(props) {
   const { children, size, ...nativeProps } = props;
   const { invalid, ...state } = useFieldContext();
-  const styles = (0, import_recipes18.radio)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: (0, import_css22.cx)("group", (0, import_patterns9.hstack)(), styles.root), tabIndex: 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const styles = (0, import_recipes19.radio)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: (0, import_css23.cx)("group", (0, import_patterns10.hstack)(), styles.root), tabIndex: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "input",
       {
         ...nativeProps,
         ...state,
         ...invalid && { "aria-invalid": true },
-        className: (0, import_css22.cx)(nativeProps.className, styles.input),
+        className: (0, import_css23.cx)(nativeProps.className, styles.input),
         tabIndex: -1,
         type: "radio"
       }
@@ -1158,19 +1253,19 @@ function Radio(props) {
 }
 
 // src/components/Select.tsx
-var import_css23 = require("@cerberus/styled-system/css");
-var import_patterns10 = require("@cerberus/styled-system/patterns");
-var import_recipes19 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_css24 = require("@cerberus/styled-system/css");
+var import_patterns11 = require("@cerberus/styled-system/patterns");
+var import_recipes20 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Select(props) {
   const { describedBy, size, ...nativeProps } = props;
   const { invalid, ...fieldStates } = useFieldContext();
   const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons;
-  const styles = (0, import_recipes19.select)({
+  const styles = (0, import_recipes20.select)({
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "select",
       {
         ...nativeProps,
@@ -1180,41 +1275,41 @@ function Select(props) {
         className: styles.input
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "span",
       {
-        className: (0, import_css23.cx)(
+        className: (0, import_css24.cx)(
           styles.iconStack,
-          (0, import_patterns10.hstack)({
+          (0, import_patterns11.hstack)({
             gap: "2"
           })
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "span",
             {
               ...invalid && { "data-invalid": true },
               className: styles.stateIcon,
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InvalidIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(InvalidIcon, {})
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: styles.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectArrow, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: styles.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectArrow, {}) })
         ]
       }
     )
   ] });
 }
 function Option(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("option", { ...props });
 }
 
 // src/components/Tab.tsx
 var import_react13 = require("react");
 
 // src/context/tabs.tsx
-var import_recipes20 = require("@cerberus/styled-system/recipes");
+var import_recipes21 = require("@cerberus/styled-system/recipes");
 var import_react11 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var TabsContext = (0, import_react11.createContext)(null);
 function Tabs(props) {
   const { cache, active, id, palette } = props;
@@ -1228,7 +1323,7 @@ function Tabs(props) {
       tabs: tabsList,
       id: uuid,
       active: activeTab,
-      styles: (0, import_recipes20.tabs)({ palette }),
+      styles: (0, import_recipes21.tabs)({ palette }),
       onTabUpdate: setActiveTab
     }),
     [activeTab, setActiveTab, palette, uuid, tabsList]
@@ -1246,7 +1341,7 @@ function Tabs(props) {
       window.localStorage.setItem(uuid, activeTab);
     }
   }, [activeTab, cache]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TabsContext.Provider, { value, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TabsContext.Provider, { value, children: props.children });
 }
 function useTabsContext() {
   const context = (0, import_react11.useContext)(TabsContext);
@@ -1257,7 +1352,7 @@ function useTabsContext() {
 }
 
 // src/components/Tab.tsx
-var import_css24 = require("@cerberus/styled-system/css");
+var import_css25 = require("@cerberus/styled-system/css");
 
 // src/aria-helpers/tabs.aria.ts
 var import_react12 = require("react");
@@ -1316,7 +1411,7 @@ function useTabsKeyboardNavigation() {
 }
 
 // src/components/Tab.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Tab(props) {
   const { value, ...nativeProps } = props;
   const { active, onTabUpdate, styles } = useTabsContext();
@@ -1328,7 +1423,7 @@ function Tab(props) {
     (_a = props.onClick) == null ? void 0 : _a.call(props, e);
     startTransition(() => onTabUpdate(e.currentTarget.value));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "button",
     {
       ...nativeProps,
@@ -1337,7 +1432,7 @@ function Tab(props) {
       "aria-busy": isPending,
       "aria-selected": isActive,
       id: value,
-      className: (0, import_css24.cx)(nativeProps.className, styles.tab),
+      className: (0, import_css25.cx)(nativeProps.className, styles.tab),
       onClick: handleClick,
       role: "tab",
       ref,
@@ -1347,20 +1442,20 @@ function Tab(props) {
 }
 
 // src/components/TabList.tsx
-var import_css25 = require("@cerberus/styled-system/css");
-var import_patterns11 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_css26 = require("@cerberus/styled-system/css");
+var import_patterns12 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function TabList(props) {
   const { description, ...nativeProps } = props;
   const { id, styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       ...nativeProps,
       "aria-describedby": description,
-      className: (0, import_css25.cx)(
+      className: (0, import_css26.cx)(
         nativeProps.className,
-        (0, import_patterns11.hstack)({
+        (0, import_patterns12.hstack)({
           gap: "0"
         }),
         styles.tabList
@@ -1371,20 +1466,20 @@ function TabList(props) {
 }
 
 // src/components/TabPanel.tsx
-var import_css26 = require("@cerberus/styled-system/css");
+var import_css27 = require("@cerberus/styled-system/css");
 var import_react14 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = 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_runtime32.jsx)(Show, { when: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Show, { when: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
       ...nativeProps,
       ...isActive && { tabIndex: 0 },
       "aria-labelledby": tab,
-      className: (0, import_css26.cx)(nativeProps.className, styles.tabPanel),
+      className: (0, import_css27.cx)(nativeProps.className, styles.tabPanel),
       id: `panel:${tab}`,
       role: "tabpanel"
     }
@@ -1392,60 +1487,60 @@ function TabPanel(props) {
 }
 
 // src/components/Table.tsx
-var import_css27 = require("@cerberus/styled-system/css");
-var import_recipes21 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_css28 = require("@cerberus/styled-system/css");
+var import_recipes22 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Table(props) {
   const { caption, children, ...nativeProps } = props;
-  const styles = (0, import_recipes21.table)();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  const styles = (0, import_recipes22.table)();
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "table",
     {
       ...nativeProps,
-      className: (0, import_css27.cx)(nativeProps.className, styles.table),
+      className: (0, import_css28.cx)(nativeProps.className, styles.table),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("caption", { className: styles.caption, children: caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("caption", { className: styles.caption, children: caption }),
         children
       ]
     }
   ) });
 }
 function Tr(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tr", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { ...props });
 }
 
 // src/components/Thead.tsx
-var import_css28 = require("@cerberus/styled-system/css");
-var import_recipes22 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_css29 = require("@cerberus/styled-system/css");
+var import_recipes23 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Thead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("thead", { ...props, className: (0, import_css28.cx)(props.className, (0, import_recipes22.thead)()) });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("thead", { ...props, className: (0, import_css29.cx)(props.className, (0, import_recipes23.thead)()) });
 }
 
 // src/components/Th.tsx
-var import_css29 = require("@cerberus/styled-system/css");
-var import_recipes23 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_css30 = require("@cerberus/styled-system/css");
+var import_recipes24 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Th(props) {
   const { size, onClick, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     Show,
     {
       when: Boolean(onClick),
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "th",
         {
           ...nativeProps,
-          className: (0, import_css29.cx)(nativeProps.className, (0, import_recipes23.th)({ size }))
+          className: (0, import_css30.cx)(nativeProps.className, (0, import_recipes24.th)({ size }))
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         {
-          className: (0, import_css29.cx)(
+          className: (0, import_css30.cx)(
             nativeProps.className,
-            (0, import_recipes23.th)({ size }),
-            (0, import_css29.css)({
+            (0, import_recipes24.th)({ size }),
+            (0, import_css30.css)({
               alignItems: "center",
               display: "inline-flex",
               justifyContent: "space-between",
@@ -1462,18 +1557,18 @@ function Th(props) {
 }
 
 // src/components/Td.tsx
-var import_css30 = require("@cerberus/styled-system/css");
-var import_recipes24 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_css31 = require("@cerberus/styled-system/css");
+var import_recipes25 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Td(props) {
   const { size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "td",
     {
       ...nativeProps,
-      className: (0, import_css30.cx)(
+      className: (0, import_css31.cx)(
         nativeProps.className,
-        (0, import_recipes24.td)({
+        (0, import_recipes25.td)({
           size
         })
       )
@@ -1482,18 +1577,18 @@ function Td(props) {
 }
 
 // src/components/Tbody.tsx
-var import_recipes25 = require("@cerberus/styled-system/recipes");
-var import_css31 = require("@cerberus/styled-system/css");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_recipes26 = require("@cerberus/styled-system/recipes");
+var import_css32 = require("@cerberus/styled-system/css");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Tbody(props) {
   const { decoration, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "tbody",
     {
       ...nativeProps,
-      className: (0, import_css31.cx)(
+      className: (0, import_css32.cx)(
         nativeProps.className,
-        (0, import_recipes25.tbody)({
+        (0, import_recipes26.tbody)({
           decoration
         })
       )
@@ -1503,22 +1598,22 @@ function Tbody(props) {
 
 // src/components/Tag.tsx
 var import_icons3 = require("@cerberus/icons");
-var import_css32 = require("@cerberus/styled-system/css");
-var import_recipes26 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_css33 = require("@cerberus/styled-system/css");
+var import_recipes27 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Tag(props) {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
   const palette = (props == null ? void 0 : props.palette) ?? "page";
   const isClosable = Boolean(onClick);
   const shape = isClosable ? "pill" : initShape;
   const closableStyles = isClosable ? closableCss : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "span",
     {
       ...nativeProps,
-      className: (0, import_css32.cx)(
+      className: (0, import_css33.cx)(
         nativeProps.className,
-        (0, import_recipes26.tag)({
+        (0, import_recipes27.tag)({
           gradient,
           palette,
           shape,
@@ -1528,47 +1623,47 @@ function Tag(props) {
       ),
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "button",
           {
             "aria-label": "Close",
-            className: (0, import_recipes26.iconButton)({
+            className: (0, import_recipes27.iconButton)({
               palette: "action",
               usage: "filled",
               size: "sm"
             }),
             onClick,
-            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons3.Close, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons3.Close, {})
           }
         ) })
       ]
     }
   );
 }
-var closableCss = (0, import_css32.css)({
+var closableCss = (0, import_css33.css)({
   bgColor: "action.bg.active",
   color: "action.text.initial",
   paddingInlineEnd: "0"
 });
 
 // src/components/Textarea.tsx
-var import_css33 = require("@cerberus/styled-system/css");
-var import_recipes27 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_css34 = require("@cerberus/styled-system/css");
+var import_recipes28 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function Textarea(props) {
   const { describedBy, ...nativeProps } = props;
   const { invalid, ...fieldState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "textarea",
     {
       ...nativeProps,
       ...fieldState,
       ...describedBy && { "aria-describedby": describedBy },
       ...invalid && { "aria-invalid": true },
-      className: (0, import_css33.cx)(
+      className: (0, import_css34.cx)(
         props.className,
-        (0, import_recipes27.input)().input,
-        (0, import_css33.css)({
+        (0, import_recipes28.input)().input,
+        (0, import_css34.css)({
           pxi: "2",
           py: "2",
           resize: "vertical"
@@ -1580,43 +1675,43 @@ function Textarea(props) {
 }
 
 // src/components/Toggle.tsx
-var import_css34 = require("@cerberus/styled-system/css");
-var import_patterns12 = require("@cerberus/styled-system/patterns");
-var import_recipes28 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_css35 = require("@cerberus/styled-system/css");
+var import_patterns13 = require("@cerberus/styled-system/patterns");
+var import_recipes29 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function Toggle(props) {
   const { size, describedBy, ...nativeProps } = props;
-  const styles = (0, import_recipes28.toggle)({ size });
+  const styles = (0, import_recipes29.toggle)({ size });
   const { invalid, ...state } = useFieldContext();
   const Icon = $cerberusIcons.toggleChecked;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "span",
     {
-      className: (0, import_css34.cx)("group", styles.track, (0, import_patterns12.hstack)()),
+      className: (0, import_css35.cx)("group", styles.track, (0, import_patterns13.hstack)()),
       "data-checked": props.checked || props.defaultChecked,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "input",
           {
             ...nativeProps,
             ...state,
             ...describedBy && { "aria-describedby": describedBy },
             ...invalid && { "aria-invalid": true },
-            className: (0, import_css34.cx)("peer", styles.input),
+            className: (0, import_css35.cx)("peer", styles.input),
             role: "switch",
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "span",
           {
-            className: (0, import_css34.cx)(
+            className: (0, import_css35.cx)(
               styles.thumb,
-              (0, import_patterns12.vstack)({
+              (0, import_patterns13.vstack)({
                 justify: "center"
               })
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, {})
           }
         )
       ]
@@ -1626,8 +1721,8 @@ function Toggle(props) {
 
 // src/context/confirm-modal.tsx
 var import_react16 = require("react");
-var import_css35 = require("@cerberus/styled-system/css");
-var import_patterns13 = require("@cerberus/styled-system/patterns");
+var import_css36 = require("@cerberus/styled-system/css");
+var import_patterns14 = require("@cerberus/styled-system/patterns");
 
 // src/hooks/useModal.ts
 var import_react15 = require("react");
@@ -1651,7 +1746,7 @@ function useModal() {
 }
 
 // src/context/confirm-modal.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var ConfirmModalContext = (0, import_react16.createContext)(null);
 function ConfirmModal(props) {
   const { modalRef, show, close } = useModal();
@@ -1691,33 +1786,33 @@ function ConfirmModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(ConfirmModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           Show,
           {
             when: palette === "danger",
-            fallback: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ModalIcon, { palette: "action", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ConfirmIcon, { size: 24 }) }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ModalIcon, { palette: "danger", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ConfirmIcon, { size: 24 }) })
+            fallback: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ModalIcon, { palette: "action", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ConfirmIcon, { size: 24 }) }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ModalIcon, { palette: "danger", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ConfirmIcon, { size: 24 }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
         "div",
         {
-          className: (0, import_patterns13.hstack)({
+          className: (0, import_patterns14.hstack)({
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               Button,
               {
                 autoFocus: true,
-                className: (0, import_css35.css)({
+                className: (0, import_css36.css)({
                   w: "1/2"
                 }),
                 name: "confirm",
@@ -1727,10 +1822,10 @@ function ConfirmModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               Button,
               {
-                className: (0, import_css35.css)({
+                className: (0, import_css36.css)({
                   w: "1/2"
                 }),
                 name: "cancel",
@@ -1758,14 +1853,14 @@ function useConfirmModal() {
 
 // src/context/notification-center.tsx
 var import_react17 = require("react");
-var import_patterns14 = require("@cerberus/styled-system/patterns");
-var import_recipes29 = require("@cerberus/styled-system/recipes");
-var import_css36 = require("@cerberus/styled-system/css");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_patterns15 = require("@cerberus/styled-system/patterns");
+var import_recipes30 = require("@cerberus/styled-system/recipes");
+var import_css37 = require("@cerberus/styled-system/css");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var NotificationsContext = (0, import_react17.createContext)(null);
 function NotificationCenter(props) {
   const [activeNotifications, setActiveNotifications] = (0, import_react17.useState)([]);
-  const styles = (0, import_recipes29.notification)();
+  const styles = (0, import_recipes30.notification)();
   const handleNotify = (0, import_react17.useCallback)((options) => {
     setActiveNotifications((prev) => {
       const id = `${options.palette}:${prev.length + 1}`;
@@ -1794,13 +1889,13 @@ function NotificationCenter(props) {
     }),
     [handleNotify]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(NotificationsContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(NotificationsContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: styles.center, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: styles.center, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         Button,
         {
-          className: (0, import_css36.cx)(styles.closeAll, (0, import_patterns14.animateIn)()),
+          className: (0, import_css37.cx)(styles.closeAll, (0, import_patterns15.animateIn)()),
           onClick: handleCloseAll,
           palette: "action",
           shape: "rounded",
@@ -1809,17 +1904,17 @@ function NotificationCenter(props) {
           children: "Close all"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "div",
         {
-          className: (0, import_patterns14.vstack)({
+          className: (0, import_patterns15.vstack)({
             alignItems: "flex-end",
             gap: "4"
           }),
           style: {
             alignItems: "flex-end"
           },
-          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
             Notification,
             {
               id: option.id,
@@ -1827,8 +1922,8 @@ function NotificationCenter(props) {
               open: true,
               palette: option.palette,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(NotificationHeading, { palette: option.palette, children: option.heading }),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(NotificationDescription, { palette: option.palette, children: option.description })
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NotificationHeading, { palette: option.palette, children: option.heading }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NotificationDescription, { palette: option.palette, children: option.description })
               ]
             },
             option.id
@@ -1850,9 +1945,9 @@ function useNotificationCenter() {
 
 // src/context/prompt-modal.tsx
 var import_react18 = require("react");
-var import_css37 = require("@cerberus/styled-system/css");
-var import_patterns15 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_css38 = require("@cerberus/styled-system/css");
+var import_patterns16 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var PromptModalContext = (0, import_react18.createContext)(null);
 function PromptModal(props) {
   const { modalRef, show, close } = useModal();
@@ -1902,36 +1997,36 @@ function PromptModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           Show,
           {
             when: palette === "danger",
-            fallback: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalIcon, { palette: "action", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PromptIcon, { size: 24 }) }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalIcon, { palette: "danger", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PromptIcon, { size: 24 }) })
+            fallback: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ModalIcon, { palette: "action", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PromptIcon, { size: 24 }) }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ModalIcon, { palette: "danger", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PromptIcon, { size: 24 }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "div",
         {
-          className: (0, import_patterns15.vstack)({
+          className: (0, import_patterns16.vstack)({
             alignItems: "flex-start",
             mt: "4",
             mb: "8"
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Label, { htmlFor: "confirm", size: "md", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Field, { invalid: !isValid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Label, { htmlFor: "confirm", size: "md", children: [
               "Type",
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 "strong",
                 {
-                  className: (0, import_css37.css)({
+                  className: (0, import_css38.css)({
                     textTransform: "uppercase"
                   }),
                   children: content == null ? void 0 : content.key
@@ -1939,7 +2034,7 @@ function PromptModal(props) {
               ),
               "to confirm"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               Input,
               {
                 id: "confirm",
@@ -1951,19 +2046,19 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         "div",
         {
-          className: (0, import_patterns15.hstack)({
+          className: (0, import_patterns16.hstack)({
             justifyContent: "stretch",
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               Button,
               {
                 autoFocus: true,
-                className: (0, import_css37.css)({
+                className: (0, import_css38.css)({
                   w: "1/2"
                 }),
                 disabled: !isValid,
@@ -1974,10 +2069,10 @@ function PromptModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               Button,
               {
-                className: (0, import_css37.css)({
+                className: (0, import_css38.css)({
                   w: "1/2"
                 }),
                 name: "cancel",
@@ -2052,7 +2147,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light") {
 }
 
 // src/context/theme.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var THEME_KEY = "cerberus-theme";
 var MODE_KEY = "cerberus-mode";
 var ThemeContext = (0, import_react20.createContext)(
@@ -2060,7 +2155,7 @@ var ThemeContext = (0, import_react20.createContext)(
 );
 function ThemeProvider(props) {
   const state = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ThemeContext.Provider, { value: state, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
   const context = (0, import_react20.useContext)(ThemeContext);
@@ -2093,6 +2188,7 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   $cerberusIcons,
+  Avatar,
   Button,
   Checkbox,
   ConfirmModal,