@cerberus-design/react 0.14.2 → 0.15.0

package/build/legacy/index.cjs

@@ -21,7 +21,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  $cerberusIcons: () => $cerberusIcons,
   Accordion: () => Accordion,
   AccordionItem: () => AccordionItem,
   AccordionItemContent: () => AccordionItemContent,
@@ -34,6 +33,7 @@ __export(src_exports, {
   Avatar: () => Avatar,
   Button: () => Button,
   CTAModal: () => CTAModal,
+  CerberusProvider: () => CerberusProvider,
   Checkbox: () => Checkbox,
   CircularProgress: () => CircularProgress,
   ConfirmModal: () => ConfirmModal,
@@ -55,6 +55,16 @@ __export(src_exports, {
   DatePickerViewControl: () => DatePickerViewControl,
   DatePickerViewControlGroup: () => DatePickerViewControlGroup,
   DatePickerYearView: () => DatePickerYearView,
+  Dialog: () => Dialog,
+  DialogBackdrop: () => DialogBackdrop,
+  DialogCloseIconTrigger: () => DialogCloseIconTrigger,
+  DialogCloseTrigger: () => DialogCloseTrigger,
+  DialogContent: () => DialogContent,
+  DialogDescription: () => DialogDescription,
+  DialogHeading: () => DialogHeading,
+  DialogPositioner: () => DialogPositioner,
+  DialogProvider: () => DialogProvider,
+  DialogTrigger: () => DialogTrigger,
   Droppable: () => Droppable,
   FeatureFlag: () => FeatureFlag,
   FeatureFlags: () => FeatureFlags,
@@ -125,10 +135,12 @@ __export(src_exports, {
   formatNotifyCount: () => formatNotifyCount,
   getLocalStorage: () => getLocalStorage,
   getPosition: () => getPosition,
+  makeSystemConfig: () => makeSystemConfig,
   processStatus: () => processStatus,
   setLocalStorage: () => setLocalStorage,
   trapFocus: () => trapFocus,
   useCTAModal: () => useCTAModal,
+  useCerberusContext: () => useCerberusContext,
   useConfirmModal: () => useConfirmModal,
   useDate: () => useDate,
   useFeatureFlags: () => useFeatureFlags,
@@ -145,335 +157,460 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/Accordion.tsx
-var import_react = require("@ark-ui/react");
+// src/components/Modal.tsx
 var import_css = require("@cerberus/styled-system/css");
 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_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-function CheckmarkIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "svg",
-    {
-      "aria-hidden": "true",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      role: "img",
-      viewBox: "0 0 24 24",
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "path",
-        {
-          fill: "currentColor",
-          d: "M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
-        }
-      )
-    }
-  );
-}
-function IndeterminateIcon(props) {
+function ModalEl(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "svg",
+    "dialog",
     {
-      "aria-hidden": "true",
-      xmlns: "http://www.w3.org/2000/svg",
-      role: "img",
-      fill: "none",
-      viewBox: "0 0 24 24",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
+      className: (0, import_css.cx)(props.className, (0, import_recipes.modal)().dialog),
+      ref
     }
   );
 }
+var Modal = (0, import_react.forwardRef)(ModalEl);
 
-// src/components/AnimatingUploadIcon.tsx
+// src/components/ModalHeader.tsx
+var import_css2 = require("@cerberus/styled-system/css");
+var import_patterns = require("@cerberus/styled-system/patterns");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function AnimatingUploadIcon(props) {
+function ModalHeader(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "svg",
+    "div",
     {
-      "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"
-                      }
-                    )
-                  }
-                )
-              }
-            )
-          ]
-        }
+      ...props,
+      className: (0, import_css2.cx)(
+        props.className,
+        (0, import_patterns.vstack)({
+          alignItems: "flex-start",
+          gap: "md",
+          position: "relative"
+        })
       )
     }
   );
 }
 
-// src/config/cerbIcons.ts
-var defaultIcons = {
-  accordionIndicator: import_icons.ChevronDown,
-  avatar: import_icons.UserFilled,
-  calendar: import_icons.Calendar,
-  calendarPrev: import_icons.ChevronLeft,
-  calendarNext: import_icons.ChevronRight,
-  checkbox: CheckmarkIcon,
-  close: import_icons.Close,
-  confirmModal: import_icons.Information,
-  delete: import_icons.TrashCan,
-  promptModal: import_icons.Information,
-  waitingFileUploader: import_icons.CloudUpload,
-  fileUploader: AnimatingUploadIcon,
-  indeterminate: IndeterminateIcon,
-  infoNotification: import_icons.Information,
-  successNotification: import_icons.CheckmarkOutline,
-  warningNotification: import_icons.WarningAlt,
-  dangerNotification: import_icons.WarningFilled,
-  invalid: import_icons.WarningFilled,
-  invalidAlt: import_icons.Warning,
-  redo: import_icons.Restart,
-  selectArrow: import_icons.ChevronDown,
-  toggleChecked: import_icons.Checkmark
-};
+// src/components/ModalHeading.tsx
+var import_css3 = require("@cerberus/styled-system/css");
+var import_recipes2 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ModalHeading(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { ...props, className: (0, import_css3.cx)(props.className, (0, import_recipes2.modal)().heading) });
+}
 
-// src/config/defineIcons.ts
-function _validateIconsProperties(icons) {
-  if (!icons.invalid) {
-    throw new Error(
-      "The an invalid property must be defined in your custom icons library."
-    );
-  }
+// src/components/ModalDescription.tsx
+var import_css4 = require("@cerberus/styled-system/css");
+var import_recipes3 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ModalDescription(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { ...props, className: (0, import_css4.cx)(props.className, (0, import_recipes3.modal)().description) });
 }
-function defineIcons(icons) {
-  _validateIconsProperties(icons);
-  $cerberusIcons = {
-    ...defaultIcons,
-    ...icons
+
+// src/components/NavMenuTrigger.tsx
+var import_react4 = require("react");
+var import_css6 = require("@cerberus/styled-system/css");
+var import_recipes4 = require("@cerberus/styled-system/recipes");
+
+// src/aria-helpers/nav-menu.aria.ts
+function createNavTriggerProps(values) {
+  return {
+    ["aria-controls"]: values.controls,
+    ["aria-expanded"]: values.expanded ?? false
   };
-  return $cerberusIcons;
 }
-var $cerberusIcons = defaultIcons;
 
-// src/components/Accordion.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function Accordion(props) {
-  const { size, className, ...rootProps } = props;
-  const styles = (0, import_recipes.accordion)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react.Accordion.Root,
-    {
-      collapsible: true,
-      className: (0, import_css.cx)(className, styles.root),
-      ...rootProps
-    }
-  );
-}
-function AccordionItem(props) {
-  const { size, ...itemProps } = props;
-  const styles = (0, import_recipes.accordion)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react.Accordion.Item,
-    {
-      ...itemProps,
-      className: (0, import_css.cx)(itemProps.className, styles.item)
-    }
-  );
-}
-function AccordionItemTrigger(props) {
-  const { size, ...triggerProps } = props;
-  const styles = (0, import_recipes.accordion)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react.Accordion.ItemTrigger,
-    {
-      ...triggerProps,
-      className: (0, import_css.cx)(triggerProps.className, styles.itemTrigger)
-    }
+// src/context/navMenu.tsx
+var import_css5 = require("@cerberus/styled-system/css");
+var import_react2 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var NavMenuContext = (0, import_react2.createContext)(null);
+function NavMenu(props) {
+  const triggerRef = (0, import_react2.useRef)(null);
+  const menuRef = (0, import_react2.useRef)(null);
+  const [expanded, setExpanded] = (0, import_react2.useState)(false);
+  const handleToggle = (0, import_react2.useCallback)(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+  const value = (0, import_react2.useMemo)(
+    () => ({
+      triggerRef,
+      menuRef,
+      expanded,
+      onToggle: handleToggle
+    }),
+    [expanded, handleToggle]
   );
-}
-function AccordionItemIndicator(props) {
-  const { size, ...indicatorProps } = props;
-  const styles = (0, import_recipes.accordion)({ size });
-  const iconSize = size === "sm" ? 16 : "24";
-  const { accordionIndicator: ChevronDown2 } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react.Accordion.ItemIndicator,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NavMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "nav",
     {
-      ...indicatorProps,
-      className: (0, import_css.cx)(indicatorProps.className, styles.itemIndicator),
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronDown2, { size: iconSize })
+      className: (0, import_css5.css)({
+        position: "relative"
+      }),
+      children: props.children
     }
-  );
+  ) });
 }
-function AccordionItemContent(props) {
-  const { size, ...contentProps } = props;
-  const styles = (0, import_recipes.accordion)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react.Accordion.ItemContent,
-    {
-      ...contentProps,
-      className: (0, import_css.cx)(contentProps.className, styles.itemContent)
-    }
-  );
+function useNavMenuContext() {
+  const context = (0, import_react2.useContext)(NavMenuContext);
+  if (!context) {
+    throw new Error("useNavMenuContext must be used within a NavMenu.");
+  }
+  return context;
 }
 
 // src/components/Show.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 function Show(props) {
   const { when, children, fallback } = props;
-  const condition = (0, import_react2.useMemo)(() => when ?? false, [when]);
-  return (0, import_react2.useMemo)(() => {
+  const condition = (0, import_react3.useMemo)(() => when ?? false, [when]);
+  return (0, import_react3.useMemo)(() => {
     if (condition) return children;
     return fallback ?? null;
   }, [condition, children, fallback]);
 }
 
-// src/components/AccordionItemGroup.tsx
-var import_css2 = require("@cerberus/styled-system/css");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function AccordionItemGroup(props) {
-  const {
-    size,
-    heading,
-    children,
-    indicatorPosition = "end",
-    ...itemProps
-  } = props;
-  const triggerStyles = indicatorPosition === "start" ? {
-    gap: "md",
-    justifyContent: "flex-start"
-  } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(AccordionItem, { ...itemProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(AccordionItemTrigger, { className: (0, import_css2.css)(triggerStyles), size, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: indicatorPosition === "start", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AccordionItemIndicator, { size }) }),
-      heading,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: indicatorPosition === "end", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AccordionItemIndicator, { size }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AccordionItemContent, { size, children })
-  ] });
-}
-
-// src/components/Admonition.tsx
-var import_recipes3 = require("@cerberus/styled-system/recipes");
-var import_css4 = require("@cerberus/styled-system/css");
-var import_patterns2 = require("@cerberus/styled-system/patterns");
-
-// src/components/Avatar.tsx
-var import_css3 = require("@cerberus/styled-system/css");
-var import_patterns = require("@cerberus/styled-system/patterns");
-var import_recipes2 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function Avatar(props) {
+// src/components/NavMenuTrigger.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function NavMenuTrigger(props) {
   const {
-    ariaLabel,
     as,
-    gradient,
-    size,
-    src,
-    width,
+    palette,
+    usage,
+    shape,
+    controls,
+    expanded: propsExpanded,
+    onClick,
+    ...nativeProps
+  } = props;
+  const { triggerRef, onToggle, expanded } = useNavMenuContext();
+  const ariaProps = createNavTriggerProps({
+    controls,
+    expanded: propsExpanded ?? expanded
+  });
+  const hasAs = Boolean(as);
+  const AsSub = as;
+  const handleClick = (0, import_react4.useCallback)(
+    (e) => {
+      if (onClick) return onClick(e);
+      onToggle();
+    },
+    [onClick, onToggle]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Show,
+    {
+      when: hasAs,
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          ...nativeProps,
+          ...ariaProps,
+          className: (0, import_css6.cx)(
+            nativeProps.className,
+            (0, import_recipes4.button)({
+              palette,
+              usage,
+              shape
+            })
+          ),
+          onClick: handleClick,
+          ref: triggerRef,
+          children: props.children
+        }
+      ),
+      children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        AsSub,
+        {
+          ...nativeProps,
+          ...ariaProps,
+          onClick: handleClick,
+          ref: triggerRef
+        }
+      )
+    }
+  );
+}
+
+// src/components/NavMenuList.tsx
+var import_react5 = require("react");
+var import_css7 = require("@cerberus/styled-system/css");
+var import_patterns2 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function getPosition(position) {
+  const defaultPositions = {
+    left: "auto",
+    right: "auto",
+    top: "auto",
+    bottom: "auto"
+  };
+  switch (position) {
+    case "right":
+      return { ...defaultPositions, top: "0%", left: "105%" };
+    case "left":
+      return { ...defaultPositions, top: "0%", right: "105%" };
+    case "bottom":
+      return { ...defaultPositions, top: "110%" };
+    case "top":
+      return { ...defaultPositions, bottom: "110%" };
+    default:
+      return defaultPositions;
+  }
+}
+var navListStyles = (0, import_patterns2.vstack)({
+  alignItems: "flex-start",
+  bgColor: "page.surface.100",
+  boxShadow: "lg",
+  gap: "2",
+  opacity: "0",
+  p: "4",
+  position: "absolute",
+  rounded: "md",
+  zIndex: "dropdown",
+  _motionSafe: {
+    animationName: "zoomIn",
+    animationDelay: "100ms",
+    animationDuration: "150ms",
+    animationFillMode: "both",
+    animationTimingFunction: "ease-in-out"
+  },
+  _positionBottom: {
+    transformOrigin: "top left"
+  },
+  _positionTop: {
+    transformOrigin: "bottom left"
+  },
+  _positionLeft: {
+    transformOrigin: "top right"
+  },
+  _positionRight: {
+    transformOrigin: "top left"
+  }
+});
+function NavMenuList(props) {
+  const { position, ...nativeProps } = props;
+  const { menuRef, expanded } = useNavMenuContext();
+  const locationStyles = (0, import_react5.useMemo)(
+    () => getPosition(position ?? "bottom"),
+    [position]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Show, { when: expanded, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "ul",
+    {
+      ...nativeProps,
+      "data-position": position ?? "bottom",
+      className: (0, import_css7.cx)(nativeProps.className, navListStyles),
+      ref: menuRef,
+      style: locationStyles
+    }
+  ) });
+}
+
+// src/components/NavMenuLink.tsx
+var import_css8 = require("@cerberus/styled-system/css");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function NavMenuLink(props) {
+  const { as, ...nativeProps } = props;
+  const hasAs = Boolean(as);
+  const AsSub = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "li",
+    {
+      className: (0, import_css8.css)({
+        w: "full"
+      }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Show,
+        {
+          when: hasAs,
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "a",
+            {
+              ...nativeProps,
+              className: (0, import_css8.cx)(
+                nativeProps.className,
+                (0, import_css8.css)({
+                  color: "action.navigation.initial",
+                  textStyle: "link",
+                  _hover: {
+                    color: "action.navigation.hover"
+                  }
+                })
+              )
+            }
+          ),
+          children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AsSub, { ...nativeProps })
+        }
+      )
+    }
+  );
+}
+
+// src/components/Accordion.tsx
+var import_react6 = require("@ark-ui/react");
+var import_css9 = require("@cerberus/styled-system/css");
+var import_recipes5 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Accordion(props) {
+  const { size, className, ...rootProps } = props;
+  const styles = (0, import_recipes5.accordion)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_react6.Accordion.Root,
+    {
+      collapsible: true,
+      className: (0, import_css9.cx)(className, styles.root),
+      ...rootProps
+    }
+  );
+}
+function AccordionItem(props) {
+  const { size, ...itemProps } = props;
+  const styles = (0, import_recipes5.accordion)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_react6.Accordion.Item,
+    {
+      ...itemProps,
+      className: (0, import_css9.cx)(itemProps.className, styles.item)
+    }
+  );
+}
+function AccordionItemTrigger(props) {
+  const { size, ...triggerProps } = props;
+  const styles = (0, import_recipes5.accordion)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_react6.Accordion.ItemTrigger,
+    {
+      ...triggerProps,
+      className: (0, import_css9.cx)(triggerProps.className, styles.itemTrigger)
+    }
+  );
+}
+function AccordionItemContent(props) {
+  const { size, ...contentProps } = props;
+  const styles = (0, import_recipes5.accordion)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_react6.Accordion.ItemContent,
+    {
+      ...contentProps,
+      className: (0, import_css9.cx)(contentProps.className, styles.itemContent)
+    }
+  );
+}
+
+// src/components/Accordion.client.tsx
+var import_react8 = require("@ark-ui/react");
+var import_css10 = require("@cerberus/styled-system/css");
+var import_recipes6 = require("@cerberus/styled-system/recipes");
+
+// src/context/cerberus.tsx
+var import_react7 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var CerberusContext = (0, import_react7.createContext)(null);
+function CerberusProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CerberusContext.Provider, { value: props.config, children: props.children });
+}
+function useCerberusContext() {
+  const context = (0, import_react7.useContext)(CerberusContext);
+  if (!context) {
+    throw new Error("useCerberus must be used within a CerberusProvider");
+  }
+  return context;
+}
+
+// src/components/Accordion.client.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function AccordionItemIndicator(props) {
+  const { size, ...indicatorProps } = props;
+  const styles = (0, import_recipes6.accordion)({ size });
+  const iconSize = size === "sm" ? 16 : "24";
+  const { icons } = useCerberusContext();
+  const ChevronDown = icons.accordionIndicator;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react8.Accordion.ItemIndicator,
+    {
+      ...indicatorProps,
+      className: (0, import_css10.cx)(indicatorProps.className, styles.itemIndicator),
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronDown, { size: iconSize })
+    }
+  );
+}
+
+// src/components/AccordionItemGroup.tsx
+var import_css11 = require("@cerberus/styled-system/css");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function AccordionItemGroup(props) {
+  const {
+    size,
+    heading,
+    children,
+    indicatorPosition = "end",
+    ...itemProps
+  } = props;
+  const triggerStyles = indicatorPosition === "start" ? {
+    gap: "md",
+    justifyContent: "flex-start"
+  } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AccordionItem, { ...itemProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AccordionItemTrigger, { className: (0, import_css11.css)(triggerStyles), size, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Show, { when: indicatorPosition === "start", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AccordionItemIndicator, { size }) }),
+      heading,
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Show, { when: indicatorPosition === "end", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AccordionItemIndicator, { size }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AccordionItemContent, { size, children })
+  ] });
+}
+
+// src/components/Admonition.tsx
+var import_recipes8 = require("@cerberus/styled-system/recipes");
+var import_css13 = require("@cerberus/styled-system/css");
+var import_patterns4 = require("@cerberus/styled-system/patterns");
+
+// src/components/Avatar.tsx
+var import_css12 = require("@cerberus/styled-system/css");
+var import_patterns3 = require("@cerberus/styled-system/patterns");
+var import_recipes7 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Avatar(props) {
+  const {
+    ariaLabel,
+    as,
+    gradient,
+    size,
+    src,
+    width,
     height,
     icon,
     ...nativeProps
   } = props;
-  const { avatar: AvatarIcon } = $cerberusIcons;
+  const { icons } = useCerberusContext();
+  const { avatar: AvatarIcon } = icons;
   const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       ...nativeProps,
-      className: (0, import_css3.cx)(
+      className: (0, import_css12.cx)(
         nativeProps.className,
-        (0, import_recipes2.avatar)({ gradient, size }),
-        (0, import_patterns.circle)()
+        (0, import_recipes7.avatar)({ gradient, size }),
+        (0, import_patterns3.circle)()
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         Show,
         {
           when: Boolean(src) || Boolean(as),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Show,
             {
               when: Boolean(initials),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 Show,
                 {
                   when: Boolean(icon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     AvatarIcon,
                     {
                       size: iconSizeMap[size]
@@ -485,15 +622,15 @@ function Avatar(props) {
               children: initials
             }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Show,
             {
               when: Boolean(as),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "img",
                 {
                   alt: props.ariaLabel,
-                  className: (0, import_css3.css)({
+                  className: (0, import_css12.css)({
                     h: "full",
                     objectFit: "cover",
                     w: "full"
@@ -524,114 +661,68 @@ var iconSizeMap = {
   "4xl": 32
 };
 
-// src/components/Admonition.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function Admonition(props) {
-  const { children, palette = "page", usage, icon, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    "aside",
-    {
-      ...nativeProps,
-      className: (0, import_css4.cx)(
-        nativeProps.className,
-        (0, import_patterns2.hstack)({
-          gap: "md",
-          w: "full"
-        }),
-        (0, import_recipes3.admonition)({ palette, usage }).root
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Show, { when: Boolean(icon), fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MatchAvatar, { palette }), children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children })
-      ]
-    }
-  );
-}
-function AdmonitionHeading(props) {
-  const { palette, usage, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "p",
-    {
-      ...nativeProps,
-      className: (0, import_css4.cx)(
-        nativeProps.className,
-        (0, import_recipes3.admonition)({ palette, usage }).heading
-      )
-    }
-  );
-}
-function AdmonitionDescription(props) {
-  const { palette, usage, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "p",
-    {
-      ...nativeProps,
-      className: (0, import_css4.cx)(
-        nativeProps.className,
-        (0, import_recipes3.admonition)({ palette, usage }).description
-      )
-    }
-  );
-}
+// src/components/Admonition.client.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function MatchAvatar(props) {
+  const { icons } = useCerberusContext();
   const {
     infoNotification: InfoIcon,
     successNotification: SuccessIcon,
     warningNotification: WarningIcon,
     dangerNotification: DangerIcon
-  } = $cerberusIcons;
+  } = icons;
   switch (props.palette) {
     case "page":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Avatar,
         {
           gradient: "charon-light",
           ariaLabel: "",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InfoIcon, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InfoIcon, {}),
           size: "sm",
           src: ""
         }
       );
     case "info":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Avatar,
         {
           gradient: "amphiaraus-dark",
           ariaLabel: "",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InfoIcon, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InfoIcon, {}),
           size: "sm",
           src: ""
         }
       );
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Avatar,
         {
           gradient: "thanatos-dark",
           ariaLabel: "",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SuccessIcon, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SuccessIcon, {}),
           size: "sm",
           src: ""
         }
       );
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Avatar,
         {
           gradient: "asphodel-light",
           ariaLabel: "",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(WarningIcon, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(WarningIcon, {}),
           size: "sm",
           src: ""
         }
       );
     case "danger":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Avatar,
         {
           gradient: "hades-light",
           ariaLabel: "",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DangerIcon, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DangerIcon, {}),
           size: "sm",
           src: ""
         }
@@ -641,19 +732,69 @@ function MatchAvatar(props) {
   }
 }
 
+// src/components/Admonition.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Admonition(props) {
+  const { children, palette = "page", usage, icon, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "aside",
+    {
+      ...nativeProps,
+      className: (0, import_css13.cx)(
+        nativeProps.className,
+        (0, import_patterns4.hstack)({
+          gap: "md",
+          w: "full"
+        }),
+        (0, import_recipes8.admonition)({ palette, usage }).root
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Show, { when: Boolean(icon), fallback: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MatchAvatar, { palette }), children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children })
+      ]
+    }
+  );
+}
+function AdmonitionHeading(props) {
+  const { palette, usage, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "p",
+    {
+      ...nativeProps,
+      className: (0, import_css13.cx)(
+        nativeProps.className,
+        (0, import_recipes8.admonition)({ palette, usage }).heading
+      )
+    }
+  );
+}
+function AdmonitionDescription(props) {
+  const { palette, usage, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "p",
+    {
+      ...nativeProps,
+      className: (0, import_css13.cx)(
+        nativeProps.className,
+        (0, import_recipes8.admonition)({ palette, usage }).description
+      )
+    }
+  );
+}
+
 // src/components/Button.tsx
-var import_css5 = require("@cerberus/styled-system/css");
-var import_recipes4 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_css14 = require("@cerberus/styled-system/css");
+var import_recipes9 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Button(props) {
   const { palette, usage, shape, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "button",
     {
       ...nativeProps,
-      className: (0, import_css5.cx)(
+      className: (0, import_css14.cx)(
         nativeProps.className,
-        (0, import_recipes4.button)({
+        (0, import_recipes9.button)({
           palette,
           usage,
           shape
@@ -664,16 +805,16 @@ function Button(props) {
 }
 
 // src/components/Checkbox.tsx
-var import_recipes5 = require("@cerberus/styled-system/recipes");
-var import_patterns3 = require("@cerberus/styled-system/patterns");
-var import_css6 = require("@cerberus/styled-system/css");
+var import_recipes10 = require("@cerberus/styled-system/recipes");
+var import_patterns5 = require("@cerberus/styled-system/patterns");
+var import_css15 = require("@cerberus/styled-system/css");
 
 // src/context/field.tsx
-var import_react3 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var FieldContext = (0, import_react3.createContext)(null);
+var import_react9 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var FieldContext = (0, import_react9.createContext)(null);
 function Field(props) {
-  const value = (0, import_react3.useMemo)(
+  const value = (0, import_react9.useMemo)(
     () => ({
       disabled: props.disabled,
       readOnly: props.readOnly,
@@ -682,10 +823,10 @@ function Field(props) {
     }),
     [props.disabled, props.readOnly, props.required, props.invalid]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FieldContext.Provider, { value, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FieldContext.Provider, { value, children: props.children });
 }
 function useFieldContext() {
-  const context = (0, import_react3.useContext)(FieldContext);
+  const context = (0, import_react9.useContext)(FieldContext);
   if (!context) {
     throw new Error("useFieldContext must be used within a Field Provider.");
   }
@@ -693,24 +834,31 @@ function useFieldContext() {
 }
 
 // src/components/Checkbox.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Checkbox(props) {
   const { describedBy, size, checked, mixed, ...nativeProps } = props;
   const { invalid, ...fieldStates } = useFieldContext();
-  const styles = (0, import_recipes5.checkbox)({ size });
-  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon2 } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  const styles = (0, import_recipes10.checkbox)({ size });
+  const { icons } = useCerberusContext();
+  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon2 } = icons;
+  if (!CheckIcon) {
+    throw new Error("The CerberusProvider is missing the checkbox icon.");
+  }
+  if (!IndeterminateIcon2) {
+    throw new Error("The CerberusProvider is missing the indeterminate icon.");
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
-      className: (0, import_css6.cx)(
+      className: (0, import_css15.cx)(
         styles.root,
-        (0, import_patterns3.vstack)({
+        (0, import_patterns5.vstack)({
           gap: "0",
           justify: "center"
         })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "input",
           {
             ...nativeProps,
@@ -718,28 +866,28 @@ function Checkbox(props) {
             ...describedBy && { "aria-describedby": describedBy },
             ...invalid && { "aria-invalid": true },
             ...mixed && { "aria-checked": "mixed" },
-            className: (0, import_css6.cx)("peer", nativeProps.className, styles.input),
+            className: (0, import_css15.cx)("peer", nativeProps.className, styles.input),
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Show, { when: checked && !mixed, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckIcon, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Show, { when: mixed, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IndeterminateIcon2, {}) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Show, { when: checked && !mixed, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckIcon, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Show, { when: mixed, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IndeterminateIcon2, {}) }) })
       ]
     }
   );
 }
 
 // src/components/CircularProgress.tsx
-var import_patterns4 = require("@cerberus/styled-system/patterns");
-var import_css7 = require("@cerberus/styled-system/css");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_patterns6 = require("@cerberus/styled-system/patterns");
+var import_css16 = require("@cerberus/styled-system/css");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function CircularProgress(props) {
   const strokeW = 14;
   const radius = `calc(50% * (1 - ${strokeW}/100))`;
   const status = props.syntax ?? "Done";
   const now = props.now >= 100 ? 100 : props.now;
   const bgStyle = props.bgStyle ?? "filled";
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       id: props.id,
@@ -747,18 +895,18 @@ function CircularProgress(props) {
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": now,
-      className: (0, import_patterns4.cq)({
+      className: (0, import_patterns6.cq)({
         alignSelf: "stretch",
         flex: 1,
         m: "4px",
         position: "relative"
       }),
       role: "progressbar",
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         "svg",
         {
           "data-complete": now === 100,
-          className: (0, import_css7.css)({
+          className: (0, import_css16.css)({
             display: "block",
             rounded: "full",
             transition: "all 0.5s ease"
@@ -769,17 +917,17 @@ function CircularProgress(props) {
           viewBox: "0 0 100 100",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("title", { children: props.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("desc", { children: `${now}% ${status}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("linearGradient", { id: "gradient", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("title", { children: props.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("desc", { children: `${now}% ${status}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("linearGradient", { id: "gradient", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "stop",
                 {
                   offset: "0%",
                   stopColor: "var(--cerberus-colors-data-viz-progress-start)"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "stop",
                 {
                   offset: "100%",
@@ -787,10 +935,10 @@ function CircularProgress(props) {
                 }
               )
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "circle",
               {
-                className: (0, import_css7.css)({
+                className: (0, import_css16.css)({
                   fill: "page.surface.initial"
                 }),
                 cx: "50%",
@@ -799,10 +947,10 @@ function CircularProgress(props) {
                 pathLength: "100"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "circle",
               {
-                className: (0, import_css7.css)({
+                className: (0, import_css16.css)({
                   stroke: "page.bg.100"
                 }),
                 cx: "50%",
@@ -811,11 +959,11 @@ function CircularProgress(props) {
                 pathLength: "100"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "circle",
               {
                 "data-complete": now === 100,
-                className: (0, import_css7.css)({
+                className: (0, import_css16.css)({
                   stroke: "url(#gradient)",
                   transition: "stroke-dashoffset, stroke 0.5s ease",
                   _isComplete: {
@@ -832,11 +980,11 @@ function CircularProgress(props) {
                 transform: "rotate(-90 50 50)"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("g", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                 "text",
                 {
-                  className: (0, import_css7.css)({
+                  className: (0, import_css16.css)({
                     fill: "page.text.initial",
                     fontFamily: "mono",
                     textStyle: "1.25rem"
@@ -851,10 +999,10 @@ function CircularProgress(props) {
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "text",
                 {
-                  className: (0, import_css7.css)({
+                  className: (0, import_css16.css)({
                     fill: "page.text.100",
                     fontSize: "0.5rem",
                     fontWeight: 600
@@ -875,155 +1023,116 @@ function CircularProgress(props) {
 }
 
 // src/components/DatePicker.client.tsx
-var import_react6 = require("@ark-ui/react");
+var import_react12 = require("@ark-ui/react");
 
 // src/components/Portal.tsx
-var import_react4 = require("@ark-ui/react");
-var Portal = import_react4.Portal;
+var import_react10 = require("@ark-ui/react");
+var Portal = import_react10.Portal;
 
 // src/components/DatePicker.client.tsx
-var import_recipes8 = require("@cerberus/styled-system/recipes");
-var import_css10 = require("@cerberus/styled-system/css");
-
-// src/components/DatePicker.server.tsx
-var import_react5 = require("@ark-ui/react");
-var import_css9 = require("@cerberus/styled-system/css");
-var import_recipes7 = require("@cerberus/styled-system/recipes");
-
-// src/components/IconButton.tsx
-var import_css8 = 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_runtime11.jsx)(
-    "button",
-    {
-      ...nativeProps,
-      "aria-label": ariaLabel ?? "Icon Button",
-      className: (0, import_css8.cx)(
-        nativeProps.className,
-        (0, import_recipes6.iconButton)({
-          palette,
-          usage,
-          size
-        })
-      )
-    }
-  );
-}
+var import_recipes13 = require("@cerberus/styled-system/recipes");
+var import_css19 = require("@cerberus/styled-system/css");
 
 // src/components/DatePicker.server.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var datePickerStyles = (0, import_recipes7.datePicker)();
+var import_react11 = require("@ark-ui/react");
+var import_css17 = require("@cerberus/styled-system/css");
+var import_recipes11 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var datePickerStyles = (0, import_recipes11.datePicker)();
 function DatePickerLabel(props) {
   const { className, ...arkProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react5.DatePicker.Label,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_react11.DatePicker.Label,
     {
       ...arkProps,
-      className: (0, import_css9.cx)(
+      className: (0, import_css17.cx)(
         className,
-        (0, import_recipes7.label)({
+        (0, import_recipes11.label)({
           size: "sm"
         })
       )
     }
   );
 }
-function DatePickerTrigger(props) {
-  const { calendar: CalendarIcon } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react5.DatePicker.Trigger,
-    {
-      ...props,
-      className: (0, import_css9.cx)(
-        props.className,
-        (0, import_recipes7.iconButton)({
-          size: "sm",
-          usage: "ghost"
-        }),
-        datePickerStyles.trigger
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CalendarIcon, {})
-    }
-  );
-}
 function DatePickerViewControl(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react5.DatePicker.Control,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_react11.DatePicker.Control,
     {
       ...props,
-      className: (0, import_css9.cx)(props.className, datePickerStyles.viewControl)
+      className: (0, import_css17.cx)(props.className, datePickerStyles.viewControl)
     }
   );
 }
-function DatePickerViewControlGroup(props) {
-  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DatePickerViewControl, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react5.DatePicker.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PrevIcon, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react5.DatePicker.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      Button,
-      {
-        className: (0, import_css9.css)({
-          h: "2rem",
-          paddingInline: "md"
-        }),
-        shape: "rounded",
-        size: "sm",
-        usage: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react5.DatePicker.RangeText, {})
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react5.DatePicker.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NextIcon, {}) }) })
-  ] });
-}
 function DatePickerTable(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react5.DatePicker.Table,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_react11.DatePicker.Table,
     {
       ...props,
-      className: (0, import_css9.cx)(props.className, datePickerStyles.table)
+      className: (0, import_css17.cx)(props.className, datePickerStyles.table)
     }
   );
 }
 function DatePickerTableHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react5.DatePicker.TableHeader,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_react11.DatePicker.TableHeader,
     {
       ...props,
-      className: (0, import_css9.cx)(props.className, datePickerStyles.tableHeader)
+      className: (0, import_css17.cx)(props.className, datePickerStyles.tableHeader)
     }
   );
 }
 function DatePickerTableCell(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react5.DatePicker.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_react11.DatePicker.TableCell,
     {
       ...props,
-      className: (0, import_css9.cx)(props.className, datePickerStyles.tableCell)
+      className: (0, import_css17.cx)(props.className, datePickerStyles.tableCell)
     }
   );
 }
 function DatePickerTableCellTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react5.DatePicker.TableCellTrigger,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_react11.DatePicker.TableCellTrigger,
     {
       ...props,
-      className: (0, import_css9.cx)(props.className, datePickerStyles.tableCellTrigger)
+      className: (0, import_css17.cx)(props.className, datePickerStyles.tableCellTrigger)
+    }
+  );
+}
+var DatePickerView = import_react11.DatePicker.View;
+var DatePickerContext = import_react11.DatePicker.Context;
+
+// src/components/IconButton.tsx
+var import_css18 = require("@cerberus/styled-system/css");
+var import_recipes12 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function IconButton(props) {
+  const { ariaLabel, palette, usage, size, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "button",
+    {
+      ...nativeProps,
+      "aria-label": ariaLabel ?? "Icon Button",
+      className: (0, import_css18.cx)(
+        nativeProps.className,
+        (0, import_recipes12.iconButton)({
+          palette,
+          usage,
+          size
+        })
+      )
     }
   );
 }
-var DatePickerView = import_react5.DatePicker.View;
-var DatePickerContext = import_react5.DatePicker.Context;
 
 // src/components/DatePicker.client.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var datePickerStyles2 = (0, import_recipes8.datePicker)();
+var import_react13 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var datePickerStyles2 = (0, import_recipes13.datePicker)();
 function DatePicker(props) {
   const states = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react6.DatePicker.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_react12.DatePicker.Root,
     {
       ...props,
       ...states,
@@ -1033,17 +1142,57 @@ function DatePicker(props) {
     }
   );
 }
+function DatePickerViewControlGroup(props) {
+  const { icons } = useCerberusContext();
+  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DatePickerViewControl, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PrevIcon, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      Button,
+      {
+        className: (0, import_css19.css)({
+          h: "2rem",
+          paddingInline: "md"
+        }),
+        shape: "rounded",
+        size: "sm",
+        usage: "ghost",
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.RangeText, {})
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NextIcon, {}) }) })
+  ] });
+}
+function DatePickerTrigger(props) {
+  const { icons } = useCerberusContext();
+  const { calendar: CalendarIcon } = icons;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_react12.DatePicker.Trigger,
+    {
+      ...props,
+      className: (0, import_css19.cx)(
+        props.className,
+        (0, import_recipes13.iconButton)({
+          size: "sm",
+          usage: "ghost"
+        }),
+        datePickerStyles2.trigger
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarIcon, {})
+    }
+  );
+}
 function DatePickerInput(props) {
   const { invalid, ...fieldStates } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react6.DatePicker.Control, { className: datePickerStyles2.control, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTrigger, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react6.DatePicker.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react12.DatePicker.Control, { className: datePickerStyles2.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTrigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_react12.DatePicker.Input,
       {
         ...props,
         ...fieldStates,
         ...invalid && { "aria-invalid": true },
-        className: (0, import_css10.cx)(props.className, datePickerStyles2.input),
+        className: (0, import_css19.cx)(props.className, datePickerStyles2.input),
         placeholder: props.placeholder ?? "DD MMM YYYY",
         maxLength: 11
       }
@@ -1052,30 +1201,35 @@ function DatePickerInput(props) {
 }
 function RangePickerInput(props) {
   const { invalid, ...fieldStates } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react6.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTrigger, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react6.DatePicker.Input,
+  const { defaultValue, ...nativeProps } = props;
+  const startDate = (0, import_react13.useMemo)(() => defaultValue == null ? void 0 : defaultValue[0], [defaultValue]);
+  const endDate = (0, import_react13.useMemo)(() => defaultValue == null ? void 0 : defaultValue[1], [defaultValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react12.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTrigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_react12.DatePicker.Input,
       {
-        ...props,
+        ...nativeProps,
         ...fieldStates,
         ...invalid && { "aria-invalid": true },
         "data-range-input": true,
-        className: (0, import_css10.cx)(props.className, datePickerStyles2.input),
+        defaultValue: startDate,
+        className: (0, import_css19.cx)(props.className, datePickerStyles2.input),
         placeholder: props.placeholder ?? "DD MMM YYYY",
         maxLength: 11,
         index: 0
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react6.DatePicker.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_react12.DatePicker.Input,
       {
-        ...props,
+        ...nativeProps,
         ...fieldStates,
         ...invalid && { "aria-invalid": true },
         "data-range-input": true,
+        defaultValue: endDate,
         "data-range-end-input": true,
-        className: (0, import_css10.cx)(props.className, datePickerStyles2.input),
+        className: (0, import_css19.cx)(props.className, datePickerStyles2.input),
         placeholder: props.placeholder ?? "DD MMM YYYY",
         maxLength: 11,
         index: 1
@@ -1084,12 +1238,12 @@ function RangePickerInput(props) {
   ] });
 }
 function DatePickerContent(props) {
-  const { children, ...contentProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.Positioner, { className: datePickerStyles2.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react6.DatePicker.Content,
+  const { children, withModal, ...contentProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Portal, { disabled: withModal ?? false, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.Positioner, { className: datePickerStyles2.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_react12.DatePicker.Content,
     {
       ...contentProps,
-      className: (0, import_css10.cx)(contentProps.className, datePickerStyles2.content),
+      className: (0, import_css19.cx)(contentProps.className, datePickerStyles2.content),
       children
     }
   ) }) });
@@ -1111,11 +1265,11 @@ function DatePickerDayView(props) {
     if (isPastDay(date)) return "past";
     return "future";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerView, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerContext, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DatePickerTable, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableRow, { children: datePicker3.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableHeader, { children: weekDay.narrow }, id)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableBody, { children: datePicker3.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerView, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerContext, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DatePickerTable, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableRow, { children: datePicker3.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTableHeader, { children: weekDay.narrow }, id)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableBody, { children: datePicker3.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         DatePickerTableCellTrigger,
         {
           "data-date": getDayValue(day),
@@ -1126,39 +1280,104 @@ function DatePickerDayView(props) {
   ] }) }) });
 }
 function DatePickerMonthView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableBody, { children: datePicker3.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableBody, { children: datePicker3.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
   ] }) }) });
 }
 function DatePickerYearView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerViewControlGroup, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableBody, { children: datePicker3.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableBody, { children: datePicker3.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react12.DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
   ] }) }) });
 }
-function DatePickerCalendar() {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DatePickerContent, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerDayView, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerMonthView, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerYearView, {})
+function DatePickerCalendar(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DatePickerContent, { withModal: props.withModal, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerDayView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerMonthView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DatePickerYearView, {})
   ] });
 }
 
+// src/components/Dialog.tsx
+var import_react14 = require("@ark-ui/react");
+var import_recipes14 = require("@cerberus/styled-system/recipes");
+var import_css20 = require("@cerberus/styled-system/css");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function DialogProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react14.Dialog.Root, { ...props });
+}
+function Dialog(props) {
+  const { size, ...contentProps } = props;
+  const styles = (0, import_recipes14.dialog)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogBackdrop, { className: styles.backdrop }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogPositioner, { className: styles.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogContent, { className: styles.content, ...contentProps }) })
+  ] });
+}
+function DialogHeading(props) {
+  const styles = (0, import_recipes14.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react14.Dialog.Title, { ...props, className: (0, import_css20.cx)(props.className, styles.title) });
+}
+function DialogDescription(props) {
+  const styles = (0, import_recipes14.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_react14.Dialog.Description,
+    {
+      ...props,
+      className: (0, import_css20.cx)(props.className, styles.description)
+    }
+  );
+}
+var DialogTrigger = import_react14.Dialog.Trigger;
+var DialogCloseTrigger = import_react14.Dialog.CloseTrigger;
+var DialogBackdrop = import_react14.Dialog.Backdrop;
+var DialogPositioner = import_react14.Dialog.Positioner;
+var DialogContent = import_react14.Dialog.Content;
+
+// src/components/Dialog.client.tsx
+var import_react15 = require("@ark-ui/react");
+var import_recipes15 = require("@cerberus/styled-system/recipes");
+var import_css21 = require("@cerberus/styled-system/css");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function DialogCloseIconTrigger(props) {
+  const { icons } = useCerberusContext();
+  const { close: CloseIcon } = icons;
+  const styles = (0, import_recipes15.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_react15.Dialog.CloseTrigger,
+    {
+      ...props,
+      className: (0, import_css21.cx)(props.className, styles.closeTrigger),
+      asChild: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        IconButton,
+        {
+          ariaLabel: "Close dialog",
+          palette: "action",
+          size: "lg",
+          usage: "ghost",
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CloseIcon, {})
+        }
+      )
+    }
+  );
+}
+
 // src/components/Droppable.tsx
 var import_core = require("@dnd-kit/core");
-var import_react7 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Droppable(props) {
   const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } = props;
-  const uuid = (0, import_react7.useId)();
+  const uuid = (0, import_react16.useId)();
   const { isOver, setNodeRef } = (0, import_core.useDroppable)({
     data,
     disabled,
     id: id || uuid,
     resizeObserverConfig
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       ...nativeProps,
@@ -1171,30 +1390,30 @@ function Droppable(props) {
 }
 
 // src/components/FieldMessage.tsx
-var import_css11 = require("@cerberus/styled-system/css");
-var import_recipes9 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_css22 = require("@cerberus/styled-system/css");
+var import_recipes16 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function FieldMessage(props) {
   const { invalid } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "small",
     {
       ...props,
       ...invalid && { "aria-invalid": true },
-      className: (0, import_css11.cx)(props.className, (0, import_recipes9.fieldMessage)())
+      className: (0, import_css22.cx)(props.className, (0, import_recipes16.fieldMessage)())
     }
   );
 }
 
 // src/context/feature-flags.tsx
-var import_react8 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var FeatureFlagContext = (0, import_react8.createContext)(null);
+var import_react17 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var FeatureFlagContext = (0, import_react17.createContext)(null);
 function FeatureFlags(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
 }
 function useFeatureFlags(key) {
-  const context = (0, import_react8.useContext)(FeatureFlagContext);
+  const context = (0, import_react17.useContext)(FeatureFlagContext);
   if (context === null) {
     throw new Error(
       "useFeatureFlag must be used within a FeatureFlags Provider"
@@ -1204,26 +1423,26 @@ function useFeatureFlags(key) {
 }
 
 // src/components/FeatureFlag.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function FeatureFlag(props) {
   const showContent = useFeatureFlags(props.flag);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Show, { when: showContent, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Show, { when: showContent, children: props.children });
 }
 
 // src/components/Fieldset.tsx
-var import_css12 = require("@cerberus/styled-system/css");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_css23 = require("@cerberus/styled-system/css");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Fieldset(props) {
   const { invalid, ...formState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "fieldset",
     {
       ...props,
       ...formState,
       ...invalid && { "aria-invalid": true },
-      className: (0, import_css12.cx)(
+      className: (0, import_css23.cx)(
         props.className,
-        (0, import_css12.css)({
+        (0, import_css23.css)({
           border: "none",
           pt: 2,
           margin: 0
@@ -1234,18 +1453,18 @@ function Fieldset(props) {
 }
 
 // src/components/FieldsetLabel.tsx
-var import_css13 = require("@cerberus/styled-system/css");
-var import_recipes10 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_css24 = require("@cerberus/styled-system/css");
+var import_recipes17 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function FieldsetLabel(props) {
   const { size, usage, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "label",
     {
       ...nativeProps,
-      className: (0, import_css13.cx)(
+      className: (0, import_css24.cx)(
         nativeProps.className,
-        (0, import_recipes10.label)({
+        (0, import_recipes17.label)({
           size,
           usage
         })
@@ -1255,23 +1474,23 @@ function FieldsetLabel(props) {
 }
 
 // src/components/FileStatus.tsx
-var import_react9 = require("react");
-var import_recipes12 = require("@cerberus/styled-system/recipes");
-var import_css15 = require("@cerberus/styled-system/css");
-var import_patterns5 = require("@cerberus/styled-system/patterns");
+var import_react18 = require("react");
+var import_recipes19 = require("@cerberus/styled-system/recipes");
+var import_css26 = require("@cerberus/styled-system/css");
+var import_patterns7 = require("@cerberus/styled-system/patterns");
 
 // src/components/ProgressBar.tsx
-var import_css14 = require("@cerberus/styled-system/css");
-var import_recipes11 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_css25 = require("@cerberus/styled-system/css");
+var import_recipes18 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ProgressBar(props) {
   const { indeterminate, size, usage, now, label: label5, ...nativeProps } = props;
-  const styles = (0, import_recipes11.progressBar)({ size, usage });
+  const styles = (0, import_recipes18.progressBar)({ size, usage });
   const nowClamped = Math.min(100, Math.max(0, now || 0));
   const width = {
     width: indeterminate ? "50%" : `${nowClamped}%`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       ...nativeProps,
@@ -1279,9 +1498,9 @@ function ProgressBar(props) {
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": indeterminate ? 0 : nowClamped,
-      className: (0, import_css14.cx)(nativeProps.className, styles.root),
+      className: (0, import_css25.cx)(nativeProps.className, styles.root),
       role: "progressbar",
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
           ...indeterminate && { "data-indeterminate": true },
@@ -1295,7 +1514,7 @@ function ProgressBar(props) {
 }
 
 // src/components/FileStatus.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var processStatus = /* @__PURE__ */ ((processStatus2) => {
   processStatus2["TODO"] = "todo";
   processStatus2["PROCESSING"] = "processing";
@@ -1305,24 +1524,24 @@ var processStatus = /* @__PURE__ */ ((processStatus2) => {
 })(processStatus || {});
 function FileStatus(props) {
   const { file, now, status, onClick, ...nativeProps } = props;
-  const actionLabel = (0, import_react9.useMemo)(() => getStatusActionLabel(status), [status]);
-  const palette = (0, import_react9.useMemo)(() => getPalette(status), [status]);
-  const modalIconPalette = (0, import_react9.useMemo)(() => getModalIconPalette(status), [status]);
-  const styles = (0, import_react9.useMemo)(() => {
+  const actionLabel = (0, import_react18.useMemo)(() => getStatusActionLabel(status), [status]);
+  const palette = (0, import_react18.useMemo)(() => getPalette(status), [status]);
+  const modalIconPalette = (0, import_react18.useMemo)(() => getModalIconPalette(status), [status]);
+  const styles = (0, import_react18.useMemo)(() => {
     switch (status) {
       case "todo" /* TODO */:
-        return (0, import_recipes12.fileStatus)({ status: "todo" });
+        return (0, import_recipes19.fileStatus)({ status: "todo" });
       case "processing" /* PROCESSING */:
-        return (0, import_recipes12.fileStatus)({ status: "processing" });
+        return (0, import_recipes19.fileStatus)({ status: "processing" });
       case "done" /* DONE */:
-        return (0, import_recipes12.fileStatus)({ status: "done" });
+        return (0, import_recipes19.fileStatus)({ status: "done" });
       case "error" /* ERROR */:
-        return (0, import_recipes12.fileStatus)({ status: "error" });
+        return (0, import_recipes19.fileStatus)({ status: "error" });
       default:
-        return (0, import_recipes12.fileStatus)();
+        return (0, import_recipes19.fileStatus)();
     }
   }, [status]);
-  const handleClick = (0, import_react9.useCallback)(
+  const handleClick = (0, import_react18.useCallback)(
     (e) => {
       const actionStatus = getStatusActionLabel(
         status
@@ -1331,41 +1550,41 @@ function FileStatus(props) {
     },
     [onClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       ...nativeProps,
-      className: (0, import_css15.cx)(nativeProps.className, styles.root, (0, import_patterns5.hstack)()),
+      className: (0, import_css26.cx)(nativeProps.className, styles.root, (0, import_patterns7.hstack)()),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Avatar,
           {
             ariaLabel: "",
             gradient: modalIconPalette,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MatchFileStatusIcon, { size: 24, status }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MatchFileStatusIcon, { size: 24, status }),
             src: ""
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           "div",
           {
-            className: (0, import_patterns5.vstack)({
+            className: (0, import_patterns7.vstack)({
               alignItems: "flex-start",
               gap: "0.12rem",
               w: "full"
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 "small",
                 {
-                  className: (0, import_css15.css)({
+                  className: (0, import_css26.css)({
                     color: "page.text.initial",
                     textStyle: "label-sm"
                   }),
                   children: file
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 ProgressBar,
                 {
                   id: props.id,
@@ -1374,27 +1593,27 @@ function FileStatus(props) {
                   size: "sm"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Field, { invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Field, { invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 FieldMessage,
                 {
-                  className: (0, import_css15.css)({
+                  className: (0, import_css26.css)({
                     color: "page.text.100"
                   }),
                   id: `help:${file}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MatchFileStatusText, { status, now })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MatchFileStatusText, { status, now })
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           IconButton,
           {
             ariaLabel: actionLabel,
             onClick: handleClick,
             palette,
             size: "sm",
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MatchStatusAction, { status })
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MatchStatusAction, { status })
           }
         )
       ]
@@ -1402,21 +1621,22 @@ function FileStatus(props) {
   );
 }
 function MatchFileStatusIcon(props) {
+  const { icons } = useCerberusContext();
   const {
     waitingFileUploader: TodoIcon,
     fileUploader: FileUploaderIcon,
     invalidAlt: InvalidIcon,
     successNotification: DoneIcon
-  } = $cerberusIcons;
+  } = icons;
   switch (props.status) {
     case "todo" /* TODO */:
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TodoIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TodoIcon, { size: props.size });
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FileUploaderIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FileUploaderIcon, { size: props.size });
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DoneIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DoneIcon, { size: props.size });
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InvalidIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InvalidIcon, { size: props.size });
     default:
       throw new Error("Unknown status");
   }
@@ -1436,15 +1656,16 @@ function MatchFileStatusText(props) {
   }
 }
 function MatchStatusAction(props) {
-  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = $cerberusIcons;
+  const { icons } = useCerberusContext();
+  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = icons;
   switch (props.status) {
     case "todo" /* TODO */:
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CloseIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CloseIcon, {});
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RedoIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RedoIcon, {});
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TrashIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TrashIcon, {});
     default:
       throw new Error("Invalid status");
   }
@@ -1490,56 +1711,57 @@ function getModalIconPalette(status) {
 }
 
 // src/components/FileUploader.tsx
-var import_css16 = require("@cerberus/styled-system/css");
-var import_patterns6 = require("@cerberus/styled-system/patterns");
-var import_recipes13 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_css27 = require("@cerberus/styled-system/css");
+var import_patterns8 = require("@cerberus/styled-system/patterns");
+var import_recipes20 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function FileUploader(props) {
   var _a;
-  const styles = (0, import_recipes13.fileUploader)();
-  const { waitingFileUploader: Icon } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  const { icons } = useCerberusContext();
+  const styles = (0, import_recipes20.fileUploader)();
+  const { waitingFileUploader: Icon } = icons;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       ...props.disabled ? { "aria-disabled": true } : {},
-      className: (0, import_css16.cx)(
-        (0, import_patterns6.vstack)({
+      className: (0, import_css27.cx)(
+        (0, import_patterns8.vstack)({
           justify: "center"
         }),
         styles.container
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           Avatar,
           {
             gradient: "charon-light",
             ariaLabel: "",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, {}),
             size: "md",
             src: ""
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "label",
           {
-            className: (0, import_css16.cx)(
-              (0, import_patterns6.vstack)({
+            className: (0, import_css27.cx)(
+              (0, import_patterns8.vstack)({
                 justify: "center"
               }),
               styles.label
             ),
             htmlFor: props.name,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Show, { when: Boolean(props.heading), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: styles.heading, children: props.heading }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Show, { when: Boolean(props.heading), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: styles.heading, children: props.heading }) }),
               "Import ",
               (_a = props.accept) == null ? void 0 : _a.replace(",", ", "),
               " files",
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: styles.description, children: "Click to select files" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: styles.description, children: "Click to select files" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 "input",
                 {
                   ...props,
-                  className: (0, import_css16.cx)(props.className, styles.input),
+                  className: (0, import_css27.cx)(props.className, styles.input),
                   type: "file"
                 }
               )
@@ -1552,18 +1774,19 @@ function FileUploader(props) {
 }
 
 // src/components/Input.tsx
-var import_recipes14 = require("@cerberus/styled-system/recipes");
-var import_css17 = require("@cerberus/styled-system/css");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_recipes21 = require("@cerberus/styled-system/recipes");
+var import_css28 = require("@cerberus/styled-system/css");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Input(props) {
   const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
-  const inputStyles = (0, import_recipes14.input)({ size });
+  const inputStyles = (0, import_recipes21.input)({ size });
   const { invalid, ...fieldStates } = useFieldContext();
   const hasEndIcon = Boolean(endIcon);
-  const { invalid: InvalidIcon } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: inputStyles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const { icons } = useCerberusContext();
+  const { invalid: InvalidIcon } = icons;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: inputStyles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "input",
       {
         ...nativeProps,
@@ -1571,42 +1794,42 @@ function Input(props) {
         ...describedBy && { "aria-describedby": describedBy },
         ...invalid && { "aria-invalid": true },
         "data-start-icon": Boolean(startIcon),
-        className: (0, import_css17.cx)("peer", nativeProps.className, inputStyles.input)
+        className: (0, import_css28.cx)("peer", nativeProps.className, inputStyles.input)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
   ] });
 }
 
 // src/components/Label.tsx
-var import_recipes15 = require("@cerberus/styled-system/recipes");
-var import_css18 = require("@cerberus/styled-system/css");
-var import_patterns7 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_recipes22 = require("@cerberus/styled-system/recipes");
+var import_css29 = require("@cerberus/styled-system/css");
+var import_patterns9 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Label(props) {
   const { hidden, size, ...nativeProps } = props;
   const { required, disabled } = useFieldContext();
   const usage = hidden ? "hidden" : "visible";
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "label",
     {
       ...nativeProps,
       ...disabled && { "data-disabled": true },
-      className: (0, import_css18.cx)(
+      className: (0, import_css29.cx)(
         nativeProps.className,
-        (0, import_recipes15.label)({ size, usage }),
-        (0, import_patterns7.hstack)({
+        (0, import_recipes22.label)({ size, usage }),
+        (0, import_patterns9.hstack)({
           justify: "space-between",
           w: "full"
         })
       ),
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "span",
           {
-            className: (0, import_css18.css)({
+            className: (0, import_css29.css)({
               color: "page.text.100",
               fontSize: "inherit"
             }),
@@ -1619,375 +1842,93 @@ function Label(props) {
 }
 
 // src/components/Legend.tsx
-var import_css19 = require("@cerberus/styled-system/css");
-var import_recipes16 = require("@cerberus/styled-system/recipes");
-var import_patterns8 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-function Legend(props) {
-  const { size, ...nativeProps } = props;
-  const { invalid, ...formState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-    "legend",
-    {
-      ...nativeProps,
-      ...formState,
-      ...invalid && { "aria-invalid": true },
-      className: (0, import_css19.cx)(
-        nativeProps.className,
-        (0, import_patterns8.hstack)({
-          justify: "space-between",
-          w: "full"
-        }),
-        (0, import_recipes16.label)({
-          size
-        })
-      ),
-      children: [
-        nativeProps.children,
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Show, { when: formState.required, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          "span",
-          {
-            className: (0, import_css19.css)({
-              color: "page.text.100",
-              fontSize: "inherit"
-            }),
-            children: "(required)"
-          }
-        ) })
-      ]
-    }
-  );
-}
-
-// src/components/Menu.tsx
-var import_react10 = require("@ark-ui/react");
-var import_recipes17 = require("@cerberus/styled-system/recipes");
-var import_css20 = require("@cerberus/styled-system/css");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var menuStyles = (0, import_recipes17.menu)();
-var Menu = import_react10.Menu.Root;
-function MenuTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react10.Menu.Trigger, { ...props, asChild: true });
-}
-function MenuContent(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react10.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_react10.Menu.Content,
-    {
-      ...props,
-      className: (0, import_css20.cx)(props.className, menuStyles.content)
-    }
-  ) });
-}
-function MenuItem(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react10.Menu.Item, { ...props, className: (0, import_css20.cx)(props.className, menuStyles.item) });
-}
-var MenuItemGroup = import_react10.Menu.ItemGroup;
-function MenuGroupLabel(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_react10.Menu.ItemGroupLabel,
-    {
-      ...props,
-      className: (0, import_css20.cx)(props.className, menuStyles.itemGroupLabel)
-    }
-  );
-}
-function MenuSeparator(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_react10.Menu.Separator,
-    {
-      ...props,
-      className: (0, import_css20.cx)(props.className, menuStyles.separator)
-    }
-  );
-}
-
-// src/components/Modal.tsx
-var import_css21 = require("@cerberus/styled-system/css");
-var import_recipes18 = require("@cerberus/styled-system/recipes");
-var import_react11 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-function ModalEl(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    "dialog",
-    {
-      ...props,
-      className: (0, import_css21.cx)(props.className, (0, import_recipes18.modal)().dialog),
-      ref
-    }
-  );
-}
-var Modal = (0, import_react11.forwardRef)(ModalEl);
-
-// src/components/ModalHeader.tsx
-var import_css22 = require("@cerberus/styled-system/css");
-var import_patterns9 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-function ModalHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    "div",
-    {
-      ...props,
-      className: (0, import_css22.cx)(
-        props.className,
-        (0, import_patterns9.vstack)({
-          alignItems: "flex-start",
-          gap: "md",
-          position: "relative"
-        })
-      )
-    }
-  );
-}
-
-// src/components/ModalHeading.tsx
-var import_css23 = require("@cerberus/styled-system/css");
-var import_recipes19 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-function ModalHeading(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { ...props, className: (0, import_css23.cx)(props.className, (0, import_recipes19.modal)().heading) });
-}
-
-// src/components/ModalDescription.tsx
-var import_css24 = require("@cerberus/styled-system/css");
-var import_recipes20 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-function ModalDescription(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { ...props, className: (0, import_css24.cx)(props.className, (0, import_recipes20.modal)().description) });
-}
-
-// src/components/NavMenuTrigger.tsx
-var import_react13 = require("react");
-var import_css26 = require("@cerberus/styled-system/css");
-var import_recipes21 = require("@cerberus/styled-system/recipes");
-
-// src/aria-helpers/nav-menu.aria.ts
-function createNavTriggerProps(values) {
-  return {
-    ["aria-controls"]: values.controls,
-    ["aria-expanded"]: values.expanded ?? false
-  };
-}
-
-// src/context/navMenu.tsx
-var import_css25 = require("@cerberus/styled-system/css");
-var import_react12 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var NavMenuContext = (0, import_react12.createContext)(null);
-function NavMenu(props) {
-  const triggerRef = (0, import_react12.useRef)(null);
-  const menuRef = (0, import_react12.useRef)(null);
-  const [expanded, setExpanded] = (0, import_react12.useState)(false);
-  const handleToggle = (0, import_react12.useCallback)(() => {
-    setExpanded((prev) => !prev);
-  }, []);
-  const value = (0, import_react12.useMemo)(
-    () => ({
-      triggerRef,
-      menuRef,
-      expanded,
-      onToggle: handleToggle
-    }),
-    [expanded, handleToggle]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(NavMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    "nav",
-    {
-      className: (0, import_css25.css)({
-        position: "relative"
-      }),
-      children: props.children
-    }
-  ) });
-}
-function useNavMenuContext() {
-  const context = (0, import_react12.useContext)(NavMenuContext);
-  if (!context) {
-    throw new Error("useNavMenuContext must be used within a NavMenu.");
-  }
-  return context;
-}
-
-// src/components/NavMenuTrigger.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-function NavMenuTrigger(props) {
-  const {
-    as,
-    palette,
-    usage,
-    shape,
-    controls,
-    expanded: propsExpanded,
-    onClick,
-    ...nativeProps
-  } = props;
-  const { triggerRef, onToggle, expanded } = useNavMenuContext();
-  const ariaProps = createNavTriggerProps({
-    controls,
-    expanded: propsExpanded ?? expanded
-  });
-  const hasAs = Boolean(as);
-  const AsSub = as;
-  const handleClick = (0, import_react13.useCallback)(
-    (e) => {
-      if (onClick) return onClick(e);
-      onToggle();
-    },
-    [onClick, onToggle]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    Show,
-    {
-      when: hasAs,
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-        "button",
-        {
-          ...nativeProps,
-          ...ariaProps,
-          className: (0, import_css26.cx)(
-            nativeProps.className,
-            (0, import_recipes21.button)({
-              palette,
-              usage,
-              shape
-            })
-          ),
-          onClick: handleClick,
-          ref: triggerRef,
-          children: props.children
-        }
-      ),
-      children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-        AsSub,
-        {
-          ...nativeProps,
-          ...ariaProps,
-          onClick: handleClick,
-          ref: triggerRef
-        }
-      )
-    }
-  );
-}
-
-// src/components/NavMenuList.tsx
-var import_react14 = require("react");
-var import_css27 = require("@cerberus/styled-system/css");
+var import_css30 = require("@cerberus/styled-system/css");
+var import_recipes23 = require("@cerberus/styled-system/recipes");
 var import_patterns10 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-function getPosition(position) {
-  const defaultPositions = {
-    left: "auto",
-    right: "auto",
-    top: "auto",
-    bottom: "auto"
-  };
-  switch (position) {
-    case "right":
-      return { ...defaultPositions, top: "0%", left: "105%" };
-    case "left":
-      return { ...defaultPositions, top: "0%", right: "105%" };
-    case "bottom":
-      return { ...defaultPositions, top: "110%" };
-    case "top":
-      return { ...defaultPositions, bottom: "110%" };
-    default:
-      return defaultPositions;
-  }
-}
-var navListStyles = (0, import_patterns10.vstack)({
-  alignItems: "flex-start",
-  bgColor: "page.surface.100",
-  boxShadow: "lg",
-  gap: "2",
-  opacity: "0",
-  p: "4",
-  position: "absolute",
-  rounded: "md",
-  zIndex: "dropdown",
-  _motionSafe: {
-    animationName: "zoomIn",
-    animationDelay: "100ms",
-    animationDuration: "150ms",
-    animationFillMode: "both",
-    animationTimingFunction: "ease-in-out"
-  },
-  _positionBottom: {
-    transformOrigin: "top left"
-  },
-  _positionTop: {
-    transformOrigin: "bottom left"
-  },
-  _positionLeft: {
-    transformOrigin: "top right"
-  },
-  _positionRight: {
-    transformOrigin: "top left"
-  }
-});
-function NavMenuList(props) {
-  const { position, ...nativeProps } = props;
-  const { menuRef, expanded } = useNavMenuContext();
-  const locationStyles = (0, import_react14.useMemo)(
-    () => getPosition(position ?? "bottom"),
-    [position]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Show, { when: expanded, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    "ul",
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function Legend(props) {
+  const { size, ...nativeProps } = props;
+  const { invalid, ...formState } = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    "legend",
     {
       ...nativeProps,
-      "data-position": position ?? "bottom",
-      className: (0, import_css27.cx)(nativeProps.className, navListStyles),
-      ref: menuRef,
-      style: locationStyles
+      ...formState,
+      ...invalid && { "aria-invalid": true },
+      className: (0, import_css30.cx)(
+        nativeProps.className,
+        (0, import_patterns10.hstack)({
+          justify: "space-between",
+          w: "full"
+        }),
+        (0, import_recipes23.label)({
+          size
+        })
+      ),
+      children: [
+        nativeProps.children,
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Show, { when: formState.required, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "span",
+          {
+            className: (0, import_css30.css)({
+              color: "page.text.100",
+              fontSize: "inherit"
+            }),
+            children: "(required)"
+          }
+        ) })
+      ]
     }
-  ) });
+  );
 }
 
-// src/components/NavMenuLink.tsx
-var import_css28 = require("@cerberus/styled-system/css");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-function NavMenuLink(props) {
-  const { as, ...nativeProps } = props;
-  const hasAs = Boolean(as);
-  const AsSub = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    "li",
+// src/components/Menu.tsx
+var import_react19 = require("@ark-ui/react");
+var import_recipes24 = require("@cerberus/styled-system/recipes");
+var import_css31 = require("@cerberus/styled-system/css");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var menuStyles = (0, import_recipes24.menu)();
+var Menu = import_react19.Menu.Root;
+function MenuTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.Menu.Trigger, { ...props, asChild: true });
+}
+function MenuContent(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react19.Menu.Content,
     {
-      className: (0, import_css28.css)({
-        w: "full"
-      }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        Show,
-        {
-          when: hasAs,
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            "a",
-            {
-              ...nativeProps,
-              className: (0, import_css28.cx)(
-                nativeProps.className,
-                (0, import_css28.css)({
-                  color: "action.navigation.initial",
-                  textStyle: "link",
-                  _hover: {
-                    color: "action.navigation.hover"
-                  }
-                })
-              )
-            }
-          ),
-          children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AsSub, { ...nativeProps })
-        }
-      )
+      ...props,
+      className: (0, import_css31.cx)(props.className, menuStyles.content)
+    }
+  ) });
+}
+function MenuItem(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react19.Menu.Item, { ...props, className: (0, import_css31.cx)(props.className, menuStyles.item) });
+}
+var MenuItemGroup = import_react19.Menu.ItemGroup;
+function MenuGroupLabel(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react19.Menu.ItemGroupLabel,
+    {
+      ...props,
+      className: (0, import_css31.cx)(props.className, menuStyles.itemGroupLabel)
+    }
+  );
+}
+function MenuSeparator(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react19.Menu.Separator,
+    {
+      ...props,
+      className: (0, import_css31.cx)(props.className, menuStyles.separator)
     }
   );
 }
 
 // src/components/Notification.tsx
-var import_css29 = require("@cerberus/styled-system/css");
+var import_css32 = require("@cerberus/styled-system/css");
 var import_patterns11 = require("@cerberus/styled-system/patterns");
-var import_recipes22 = require("@cerberus/styled-system/recipes");
-var import_react15 = require("react");
+var import_recipes25 = require("@cerberus/styled-system/recipes");
+var import_react20 = require("react");
 
 // src/aria-helpers/trap-focus.aria.ts
 function trapFocus(modalRef) {
@@ -2016,24 +1957,27 @@ function trapFocus(modalRef) {
 }
 
 // src/components/Notification.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function MatchNotificationIcon(props) {
+  const { icons } = useCerberusContext();
   const palette = props.palette || "info";
   const key = `${palette}Notification`;
-  const Icon = $cerberusIcons[key];
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, {});
+  const Icon = icons[key];
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, {});
 }
 function Notification(props) {
   const { children, palette, onClose, ...nativeProps } = props;
-  const ref = (0, import_react15.useRef)(null);
+  const ref = (0, import_react20.useRef)(null);
   const onKeyDown = trapFocus(ref);
-  const styles = (0, import_recipes22.notification)({ palette });
-  const { close: CloseIcon } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  const styles = (0, import_recipes25.notification)({ palette });
+  const { icons } = useCerberusContext();
+  const { close: CloseIcon } = icons;
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "dialog",
     {
       ...nativeProps,
-      className: (0, import_css29.cx)(
+      "data-placement": "left",
+      className: (0, import_css32.cx)(
         nativeProps.className,
         (0, import_patterns11.hstack)({
           position: "relative",
@@ -2044,8 +1988,8 @@ function Notification(props) {
       onKeyDown,
       ref,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MatchNotificationIcon, { palette }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MatchNotificationIcon, { palette }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "div",
           {
             className: (0, import_patterns11.vstack)({
@@ -2056,14 +2000,14 @@ function Notification(props) {
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "button",
           {
             "aria-label": "Close",
             className: styles.close,
             onClick: onClose,
             value: props.id,
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CloseIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CloseIcon, {})
           }
         )
       ]
@@ -2072,44 +2016,44 @@ function Notification(props) {
 }
 
 // src/components/NotificationHeading.tsx
-var import_css30 = require("@cerberus/styled-system/css");
-var import_recipes23 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_css33 = require("@cerberus/styled-system/css");
+var import_recipes26 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function NotificationHeading(props) {
   const { palette, ...nativeProps } = props;
-  const styles = (0, import_recipes23.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: (0, import_css30.cx)(nativeProps.className, styles.heading), ...nativeProps });
+  const styles = (0, import_recipes26.notification)({ palette });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: (0, import_css33.cx)(nativeProps.className, styles.heading), ...nativeProps });
 }
 
 // src/components/NotificationDescription.tsx
-var import_css31 = require("@cerberus/styled-system/css");
-var import_recipes24 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_css34 = require("@cerberus/styled-system/css");
+var import_recipes27 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function NotificationDescription(props) {
   const { palette, ...nativeProps } = props;
-  const styles = (0, import_recipes24.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  const styles = (0, import_recipes27.notification)({ palette });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "p",
     {
-      className: (0, import_css31.cx)(nativeProps.className, styles.description),
+      className: (0, import_css34.cx)(nativeProps.className, styles.description),
       ...nativeProps
     }
   );
 }
 
 // src/components/Radio.tsx
-var import_css32 = require("@cerberus/styled-system/css");
+var import_css35 = require("@cerberus/styled-system/css");
 var import_patterns12 = require("@cerberus/styled-system/patterns");
-var import_recipes25 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_recipes28 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function Radio(props) {
   const { children, size, ...nativeProps } = props;
   const { invalid, ...state } = useFieldContext();
-  const styles = (0, import_recipes25.radio)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  const styles = (0, import_recipes28.radio)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "div",
     {
-      className: (0, import_css32.cx)(
+      className: (0, import_css35.cx)(
         "group",
         (0, import_patterns12.hstack)({
           gap: "sm"
@@ -2118,13 +2062,13 @@ function Radio(props) {
       ),
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "input",
           {
             ...nativeProps,
             ...state,
             ...invalid && { "aria-invalid": true },
-            className: (0, import_css32.cx)(nativeProps.className, styles.input),
+            className: (0, import_css35.cx)(nativeProps.className, styles.input),
             tabIndex: -1,
             type: "radio"
           }
@@ -2136,19 +2080,20 @@ function Radio(props) {
 }
 
 // src/components/Select.tsx
-var import_css33 = require("@cerberus/styled-system/css");
+var import_css36 = require("@cerberus/styled-system/css");
 var import_patterns13 = require("@cerberus/styled-system/patterns");
-var import_recipes26 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_recipes29 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime42 = 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_recipes26.select)({
+  const { icons } = useCerberusContext();
+  const { invalid: InvalidIcon, selectArrow: SelectArrow } = icons;
+  const styles = (0, import_recipes29.select)({
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: styles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "select",
       {
         ...nativeProps,
@@ -2158,38 +2103,38 @@ function Select(props) {
         className: styles.input
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       "span",
       {
-        className: (0, import_css33.cx)(
+        className: (0, import_css36.cx)(
           styles.iconStack,
           (0, import_patterns13.hstack)({
             gap: "2"
           })
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "span",
             {
               ...invalid && { "data-invalid": true },
               className: styles.stateIcon,
-              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(InvalidIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(InvalidIcon, {})
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: styles.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SelectArrow, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: styles.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectArrow, {}) })
         ]
       }
     )
   ] });
 }
 function Option(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { ...props });
 }
 
 // src/components/Spinner.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Spinner(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "svg",
     {
       "aria-busy": "true",
@@ -2199,7 +2144,7 @@ function Spinner(props) {
       width: props.size,
       viewBox: "0 0 24 24",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
         "g",
         {
           fill: "none",
@@ -2208,14 +2153,14 @@ function Spinner(props) {
           strokeLinejoin: "round",
           strokeWidth: 2,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
               "path",
               {
                 strokeDasharray: 16,
                 strokeDashoffset: 16,
                 d: "M12 3c4.97 0 9 4.03 9 9",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     "animate",
                     {
                       fill: "freeze",
@@ -2224,7 +2169,7 @@ function Spinner(props) {
                       values: "16;0"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     "animateTransform",
                     {
                       attributeName: "transform",
@@ -2237,14 +2182,14 @@ function Spinner(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime40.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                   "animate",
                   {
                     fill: "freeze",
@@ -2264,12 +2209,12 @@ function Spinner(props) {
 
 // src/components/Tabs.client.tsx
 var import_tabs2 = require("@ark-ui/react/tabs");
-var import_css34 = require("@cerberus/styled-system/css");
+var import_css37 = require("@cerberus/styled-system/css");
 
 // src/context/tabs.tsx
 var import_tabs = require("@ark-ui/react/tabs");
-var import_recipes27 = require("@cerberus/styled-system/recipes");
-var import_react16 = require("react");
+var import_recipes30 = require("@cerberus/styled-system/recipes");
+var import_react21 = require("react");
 
 // src/utils/localStorage.ts
 function getLocalStorage(key, defaultValue) {
@@ -2285,19 +2230,19 @@ function setLocalStorage(key, value) {
 }
 
 // src/context/tabs.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var TabsContext = (0, import_react16.createContext)(null);
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var TabsContext = (0, import_react21.createContext)(null);
 function Tabs(props) {
   const { cache, defaultValue, palette, uuid, ...arkProps } = props;
-  const [activeTab, setActiveTab] = (0, import_react16.useState)(
+  const [activeTab, setActiveTab] = (0, import_react21.useState)(
     () => cache ? "" : defaultValue
   );
-  const styles = (0, import_recipes27.tabs)({ palette });
-  const cacheKey = (0, import_react16.useMemo)(
+  const styles = (0, import_recipes30.tabs)({ palette });
+  const cacheKey = (0, import_react21.useMemo)(
     () => uuid ? `cerberus-tabs-${uuid}` : "cerberus-tabs",
     [uuid]
   );
-  const handleValueChange = (0, import_react16.useCallback)(
+  const handleValueChange = (0, import_react21.useCallback)(
     (details) => {
       if (cache) {
         setLocalStorage(cacheKey, details.value);
@@ -2306,20 +2251,20 @@ function Tabs(props) {
     },
     [cache]
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (cache && !activeTab) {
       const cachedTab = getLocalStorage(cacheKey, defaultValue ?? "");
       setActiveTab(cachedTab);
     }
   }, [cache, defaultValue, activeTab]);
-  const value = (0, import_react16.useMemo)(
+  const value = (0, import_react21.useMemo)(
     () => ({
       active: activeTab,
       styles
     }),
     [activeTab, palette, styles]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabsContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TabsContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_tabs.Tabs.Root,
     {
       ...arkProps,
@@ -2333,7 +2278,7 @@ function Tabs(props) {
   ) });
 }
 function useTabsContext() {
-  const context = (0, import_react16.useContext)(TabsContext);
+  const context = (0, import_react21.useContext)(TabsContext);
   if (!context) {
     throw new Error("useTabsContext must be used within a Tabs Provider.");
   }
@@ -2341,18 +2286,18 @@ function useTabsContext() {
 }
 
 // src/components/Tabs.client.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function TabsList(props) {
   const { children, ...tabsProps } = props;
   const { styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     import_tabs2.Tabs.List,
     {
       ...tabsProps,
-      className: (0, import_css34.cx)(tabsProps.className, styles.list),
+      className: (0, import_css37.cx)(tabsProps.className, styles.list),
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TabIndicator, {})
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabIndicator, {})
       ]
     }
   );
@@ -2360,90 +2305,90 @@ function TabsList(props) {
 var TabList = TabsList;
 function Tab(props) {
   const { styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     import_tabs2.Tabs.Trigger,
     {
       ...props,
-      className: (0, import_css34.cx)(props.className, styles.trigger)
+      className: (0, import_css37.cx)(props.className, styles.trigger)
     }
   );
 }
 function TabIndicator(props) {
   const { styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     import_tabs2.Tabs.Indicator,
     {
       ...props,
-      className: (0, import_css34.cx)(props.className, styles.indicator)
+      className: (0, import_css37.cx)(props.className, styles.indicator)
     }
   );
 }
 function TabPanel(props) {
   const { styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     import_tabs2.Tabs.Content,
     {
       ...props,
-      className: (0, import_css34.cx)(props.className, styles.content)
+      className: (0, import_css37.cx)(props.className, styles.content)
     }
   );
 }
 
 // src/components/Table.tsx
-var import_css35 = require("@cerberus/styled-system/css");
-var import_recipes28 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_css38 = require("@cerberus/styled-system/css");
+var import_recipes31 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Table(props) {
   const { caption, children, ...nativeProps } = props;
-  const styles = (0, import_recipes28.table)();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  const styles = (0, import_recipes31.table)();
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "table",
     {
       ...nativeProps,
-      className: (0, import_css35.cx)(nativeProps.className, styles.table),
+      className: (0, import_css38.cx)(nativeProps.className, styles.table),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("caption", { className: styles.caption, children: caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("caption", { className: styles.caption, children: caption }),
         children
       ]
     }
   ) });
 }
 function Tr(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tr", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("tr", { ...props });
 }
 
 // src/components/Thead.tsx
-var import_css36 = require("@cerberus/styled-system/css");
-var import_recipes29 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_css39 = require("@cerberus/styled-system/css");
+var import_recipes32 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function Thead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("thead", { ...props, className: (0, import_css36.cx)(props.className, (0, import_recipes29.thead)()) });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("thead", { ...props, className: (0, import_css39.cx)(props.className, (0, import_recipes32.thead)()) });
 }
 
 // src/components/Th.tsx
-var import_css37 = require("@cerberus/styled-system/css");
-var import_recipes30 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_css40 = require("@cerberus/styled-system/css");
+var import_recipes33 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function Th(props) {
   const { size, onClick, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     Show,
     {
       when: Boolean(onClick),
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "th",
         {
           ...nativeProps,
-          className: (0, import_css37.cx)(nativeProps.className, (0, import_recipes30.th)({ size }))
+          className: (0, import_css40.cx)(nativeProps.className, (0, import_recipes33.th)({ size }))
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "button",
         {
-          className: (0, import_css37.cx)(
+          className: (0, import_css40.cx)(
             nativeProps.className,
-            (0, import_recipes30.th)({ size }),
-            (0, import_css37.css)({
+            (0, import_recipes33.th)({ size }),
+            (0, import_css40.css)({
               alignItems: "center",
               display: "inline-flex",
               justifyContent: "space-between",
@@ -2463,18 +2408,18 @@ function Th(props) {
 }
 
 // src/components/Td.tsx
-var import_css38 = require("@cerberus/styled-system/css");
-var import_recipes31 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_css41 = require("@cerberus/styled-system/css");
+var import_recipes34 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Td(props) {
   const { size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "td",
     {
       ...nativeProps,
-      className: (0, import_css38.cx)(
+      className: (0, import_css41.cx)(
         nativeProps.className,
-        (0, import_recipes31.td)({
+        (0, import_recipes34.td)({
           size
         })
       )
@@ -2483,18 +2428,18 @@ function Td(props) {
 }
 
 // src/components/Tbody.tsx
-var import_recipes32 = require("@cerberus/styled-system/recipes");
-var import_css39 = require("@cerberus/styled-system/css");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_recipes35 = require("@cerberus/styled-system/recipes");
+var import_css42 = require("@cerberus/styled-system/css");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Tbody(props) {
   const { decoration, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "tbody",
     {
       ...nativeProps,
-      className: (0, import_css39.cx)(
+      className: (0, import_css42.cx)(
         nativeProps.className,
-        (0, import_recipes32.tbody)({
+        (0, import_recipes35.tbody)({
           decoration
         })
       )
@@ -2503,23 +2448,24 @@ function Tbody(props) {
 }
 
 // src/components/Tag.tsx
-var import_css40 = require("@cerberus/styled-system/css");
-var import_recipes33 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_css43 = require("@cerberus/styled-system/css");
+var import_recipes36 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime51 = 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 : "";
-  const { close: Close2 } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  const { icons } = useCerberusContext();
+  const { close: Close } = icons;
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "span",
     {
       ...nativeProps,
-      className: (0, import_css40.cx)(
+      className: (0, import_css43.cx)(
         nativeProps.className,
-        (0, import_recipes33.tag)({
+        (0, import_recipes36.tag)({
           gradient,
           palette,
           shape,
@@ -2529,24 +2475,24 @@ function Tag(props) {
       ),
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "button",
           {
             "aria-label": "Close",
-            className: (0, import_recipes33.iconButton)({
+            className: (0, import_recipes36.iconButton)({
               palette: "action",
               usage: "filled",
               size: "sm"
             }),
             onClick,
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Close2, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Close, {})
           }
         ) })
       ]
     }
   );
 }
-var closableCss = (0, import_css40.css)({
+var closableCss = (0, import_css43.css)({
   bgColor: "action.bg.active",
   color: "action.text.initial",
   paddingInlineEnd: "0"
@@ -2554,53 +2500,53 @@ var closableCss = (0, import_css40.css)({
 
 // src/components/Text.tsx
 var import_jsx = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function Text(props) {
   const { as = "p", ...pandaJSXProps } = props;
   switch (as) {
     case "h1":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H1, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.H1, { ...pandaJSXProps });
     case "h2":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H2, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.H2, { ...pandaJSXProps });
     case "h3":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H3, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.H3, { ...pandaJSXProps });
     case "h4":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H4, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.H4, { ...pandaJSXProps });
     case "h5":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H5, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.H5, { ...pandaJSXProps });
     case "h6":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H6, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.H6, { ...pandaJSXProps });
     case "strong":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.Strong, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.Strong, { ...pandaJSXProps });
     case "em":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.Em, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.Em, { ...pandaJSXProps });
     case "small":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.Small, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.Small, { ...pandaJSXProps });
     case "span":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.Span, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.Span, { ...pandaJSXProps });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.P, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.P, { ...pandaJSXProps });
   }
 }
 
 // src/components/Textarea.tsx
-var import_css41 = require("@cerberus/styled-system/css");
-var import_recipes34 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_css44 = require("@cerberus/styled-system/css");
+var import_recipes37 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function Textarea(props) {
   const { describedBy, ...nativeProps } = props;
   const { invalid, ...fieldState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "textarea",
     {
       ...nativeProps,
       ...fieldState,
       ...describedBy && { "aria-describedby": describedBy },
       ...invalid && { "aria-invalid": true },
-      className: (0, import_css41.cx)(
+      className: (0, import_css44.cx)(
         props.className,
-        (0, import_recipes34.input)().input,
-        (0, import_css41.css)({
+        (0, import_recipes37.input)().input,
+        (0, import_css44.css)({
           pxi: "2",
           py: "2",
           resize: "vertical"
@@ -2612,43 +2558,44 @@ function Textarea(props) {
 }
 
 // src/components/Toggle.tsx
-var import_css42 = require("@cerberus/styled-system/css");
+var import_css45 = require("@cerberus/styled-system/css");
 var import_patterns14 = require("@cerberus/styled-system/patterns");
-var import_recipes35 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_recipes38 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Toggle(props) {
   const { size, describedBy, ...nativeProps } = props;
-  const styles = (0, import_recipes35.toggle)({ size });
+  const styles = (0, import_recipes38.toggle)({ size });
   const { invalid, ...state } = useFieldContext();
-  const Icon = $cerberusIcons.toggleChecked;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  const { icons } = useCerberusContext();
+  const CheckedIcon = icons.toggleChecked;
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     "span",
     {
-      className: (0, import_css42.cx)("group", styles.track, (0, import_patterns14.hstack)()),
+      className: (0, import_css45.cx)("group", styles.track, (0, import_patterns14.hstack)()),
       "data-checked": props.checked || props.defaultChecked,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "input",
           {
             ...nativeProps,
             ...state,
             ...describedBy && { "aria-describedby": describedBy },
             ...invalid && { "aria-invalid": true },
-            className: (0, import_css42.cx)("peer", styles.input),
+            className: (0, import_css45.cx)("peer", styles.input),
             role: "switch",
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "span",
           {
-            className: (0, import_css42.cx)(
+            className: (0, import_css45.cx)(
               styles.thumb,
               (0, import_patterns14.vstack)({
                 justify: "center"
               })
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CheckedIcon, {})
           }
         )
       ]
@@ -2658,24 +2605,24 @@ function Toggle(props) {
 
 // src/components/Tooltip.tsx
 var import_tooltip = require("@ark-ui/react/tooltip");
-var import_css43 = require("@cerberus/styled-system/css");
-var import_recipes36 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_css46 = require("@cerberus/styled-system/css");
+var import_recipes39 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function Tooltip(props) {
   const { content, children, asChild, ...nativeProps } = props;
-  const styles = (0, import_recipes36.tooltip)();
+  const styles = (0, import_recipes39.tooltip)();
   const position = {
     placement: props.position || "top"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, asChild, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, asChild, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       import_tooltip.Tooltip.Content,
       {
         ...nativeProps,
-        className: (0, import_css43.cx)(nativeProps.className, styles.content),
+        className: (0, import_css46.cx)(nativeProps.className, styles.content),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
           content
         ]
       }
@@ -2684,51 +2631,23 @@ function Tooltip(props) {
 }
 
 // src/context/confirm-modal.tsx
-var import_react18 = require("react");
-var import_css44 = require("@cerberus/styled-system/css");
-var import_patterns15 = require("@cerberus/styled-system/patterns");
-
-// src/hooks/useModal.ts
-var import_react17 = require("react");
-function useModal() {
-  const modalRef = (0, import_react17.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
-  const show = (0, import_react17.useCallback)(() => {
-    var _a;
-    (_a = modalRef.current) == null ? void 0 : _a.showModal();
-    setIsOpen(true);
-  }, []);
-  const close = (0, import_react17.useCallback)(() => {
-    var _a;
-    (_a = modalRef.current) == null ? void 0 : _a.close();
-    setIsOpen(false);
-  }, []);
-  return (0, import_react17.useMemo)(() => {
-    return {
-      modalRef,
-      show,
-      close,
-      isOpen
-    };
-  }, [modalRef, show, close, isOpen]);
-}
-
-// src/context/confirm-modal.tsx
+var import_react22 = require("react");
+var import_css47 = require("@cerberus/styled-system/css");
 var import_jsx2 = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var ConfirmModalContext = (0, import_react18.createContext)(null);
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var ConfirmModalContext = (0, import_react22.createContext)(null);
 function ConfirmModal(props) {
-  const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react18.useRef)(null);
-  const [content, setContent] = (0, import_react18.useState)(null);
-  const focusTrap = trapFocus(modalRef);
-  const ConfirmIcon = $cerberusIcons.confirmModal;
+  const [open, setOpen] = (0, import_react22.useState)(false);
+  const [content, setContent] = (0, import_react22.useState)(null);
+  const resolveRef = (0, import_react22.useRef)(null);
   const kind = (content == null ? void 0 : content.kind) ?? "non-destructive";
-  const palette = (0, import_react18.useMemo)(
+  const { icons } = useCerberusContext();
+  const { confirmModal: ConfirmIcon } = icons;
+  const palette = (0, import_react22.useMemo)(
     () => kind === "destructive" ? "danger" : "action",
     [kind]
   );
-  const handleChoice = (0, import_react18.useCallback)(
+  const handleChoice = (0, import_react22.useCallback)(
     (e) => {
       var _a, _b;
       const target = e.currentTarget;
@@ -2736,56 +2655,56 @@ function ConfirmModal(props) {
         (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, true);
       }
       (_b = resolveRef.current) == null ? void 0 : _b.call(resolveRef, false);
-      close();
+      setOpen(false);
     },
-    [close]
+    [setOpen]
   );
-  const handleShow = (0, import_react18.useCallback)(
+  const handleShow = (0, import_react22.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options });
-        show();
+        setOpen(true);
         resolveRef.current = resolve;
       });
     },
-    [show]
+    [setOpen, setContent]
   );
-  const value = (0, import_react18.useMemo)(
+  const value = (0, import_react22.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(ConfirmModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          "div",
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          import_jsx2.HStack,
           {
-            className: (0, import_patterns15.hstack)({
-              justify: "center",
-              w: "full"
-            }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            alignSelf: "center",
+            justify: "center",
+            paddingBlockEnd: "md",
+            w: "full",
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2793,15 +2712,15 @@ function ConfirmModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx2.HStack, { gap: "4", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx2.HStack, { gap: "4", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           Button,
           {
             autoFocus: true,
-            className: (0, import_css44.css)({
+            className: (0, import_css47.css)({
               w: "1/2"
             }),
             name: "confirm",
@@ -2811,10 +2730,10 @@ function ConfirmModal(props) {
             children: content == null ? void 0 : content.actionText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           Button,
           {
-            className: (0, import_css44.css)({
+            className: (0, import_css47.css)({
               w: "1/2"
             }),
             name: "cancel",
@@ -2823,13 +2742,13 @@ function ConfirmModal(props) {
             value: "false",
             children: content == null ? void 0 : content.cancelText
           }
-        )
+        ) })
       ] })
     ] }) }) })
   ] });
 }
 function useConfirmModal() {
-  const context = (0, import_react18.useContext)(ConfirmModalContext);
+  const context = (0, import_react22.useContext)(ConfirmModalContext);
   if (context === null) {
     throw new Error(
       "useConfirmModal must be used within a ConfirmModal Provider"
@@ -2839,21 +2758,20 @@ function useConfirmModal() {
 }
 
 // src/context/cta-modal.tsx
-var import_react19 = require("react");
+var import_react23 = require("react");
 var import_jsx3 = require("@cerberus/styled-system/jsx");
-var import_css45 = require("@cerberus/styled-system/css");
+var import_css48 = require("@cerberus/styled-system/css");
 var import_jsx4 = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var CTAModalContext = (0, import_react19.createContext)(null);
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var CTAModalContext = (0, import_react23.createContext)(null);
 function CTAModal(props) {
   var _a, _b;
-  const { modalRef, show, close } = useModal();
-  const [content, setContent] = (0, import_react19.useState)(null);
-  const focusTrap = trapFocus(modalRef);
-  const FallbackIcon = $cerberusIcons.confirmModal;
+  const [open, setOpen] = (0, import_react23.useState)(false);
+  const [content, setContent] = (0, import_react23.useState)(null);
   const confirmIcon = content == null ? void 0 : content.icon;
-  const { close: CloseIcon } = $cerberusIcons;
-  const handleShow = (0, import_react19.useCallback)(
+  const { icons } = useCerberusContext();
+  const { confirmModal: FallbackIcon } = icons;
+  const handleShow = (0, import_react23.useCallback)(
     (options) => {
       const maxActions = 2;
       if (options.actions.length > maxActions) {
@@ -2862,68 +2780,56 @@ function CTAModal(props) {
         );
       }
       setContent({ ...options });
-      show();
+      setOpen(true);
     },
-    [show]
+    [setOpen]
   );
-  const handleActionClick = (0, import_react19.useCallback)(
+  const handleActionClick = (0, import_react23.useCallback)(
     (event) => {
       const index = event.currentTarget.getAttribute("data-index");
       const action = content == null ? void 0 : content.actions[Number(index)];
       const { onClick } = action || {};
       onClick == null ? void 0 : onClick(event);
-      close();
+      setOpen(false);
     },
-    [content, close]
+    [content, setOpen]
   );
-  const value = (0, import_react19.useMemo)(
+  const value = (0, import_react23.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(CTAModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(CTAModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-        "span",
-        {
-          className: (0, import_css45.css)({
-            padding: "md",
-            position: "absolute",
-            right: 0,
-            top: 0,
-            zIndex: "decorator"
-          }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CloseIcon, {}) })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx4.VStack, { gap: "xl", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx4.VStack, { gap: "lg", w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Dialog, { size: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DialogCloseIconTrigger, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx4.VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx4.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx4.VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Avatar,
             {
               ariaLabel: "",
               gradient: "charon-light",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              icon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 Show,
                 {
                   when: Boolean(confirmIcon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FallbackIcon, { size: 24 }),
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FallbackIcon, { size: 24 }),
                   children: confirmIcon
                 }
               ),
               src: ""
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx3.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx3.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           Button,
           {
             "data-index": index,
-            className: (0, import_css45.css)({
+            className: (0, import_css48.css)({
               w: "1/2"
             }),
             onClick: handleActionClick,
@@ -2938,7 +2844,7 @@ function CTAModal(props) {
   ] });
 }
 function useCTAModal() {
-  const context = (0, import_react19.useContext)(CTAModalContext);
+  const context = (0, import_react23.useContext)(CTAModalContext);
   if (context === null) {
     throw new Error("useCTAModal must be used within a CTAModal Provider");
   }
@@ -2946,50 +2852,103 @@ function useCTAModal() {
 }
 
 // src/context/notification-center.tsx
-var import_react20 = require("react");
-var import_patterns16 = require("@cerberus/styled-system/patterns");
-var import_recipes37 = require("@cerberus/styled-system/recipes");
-var import_css46 = require("@cerberus/styled-system/css");
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var NotificationsContext = (0, import_react20.createContext)(null);
+var import_react24 = require("react");
+var import_patterns15 = require("@cerberus/styled-system/patterns");
+var import_recipes40 = require("@cerberus/styled-system/recipes");
+var import_css49 = require("@cerberus/styled-system/css");
+
+// src/context/notification-center/store.ts
+function notificationCenterReducer(state, action) {
+  switch (action.type) {
+    case "ADD_NOTIFICATION":
+      return [...state, action.payload];
+    case "REMOVE_NOTIFICATION":
+      return state.filter((n) => n.id !== action.payload.id);
+    case "UPDATE_NOTIFICATION":
+      return state.map(
+        (n) => n.id === action.payload.id ? { ...n, ...action.payload } : n
+      );
+    case "CLEAR_NOTIFICATIONS":
+      return [];
+    default:
+      return state;
+  }
+}
+function addNotification(dispatch, options) {
+  dispatch({ type: "ADD_NOTIFICATION", payload: { ...options } });
+}
+function removeNotification(dispatch, id) {
+  dispatch({ type: "REMOVE_NOTIFICATION", payload: { id } });
+}
+function updateNotificationState(dispatch, options) {
+  dispatch({ type: "UPDATE_NOTIFICATION", payload: { ...options } });
+}
+function clearNotificationState(dispatch) {
+  dispatch({ type: "CLEAR_NOTIFICATIONS" });
+}
+
+// src/context/notification-center.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var NotificationsContext = (0, import_react24.createContext)(null);
 function NotificationCenter(props) {
-  const [activeNotifications, setActiveNotifications] = (0, import_react20.useState)([]);
-  const styles = (0, import_recipes37.notification)();
-  const handleNotify = (0, import_react20.useCallback)((options) => {
-    setActiveNotifications((prev) => {
-      const id = `${options.palette}:${prev.length + 1}`;
-      return [...prev, { ...options, id }];
-    });
-  }, []);
-  const handleClose = (0, import_react20.useCallback)((e) => {
-    const target = e.currentTarget;
-    setActiveNotifications((prev) => {
-      const item = prev.find((option) => option.id === target.value);
-      if (item == null ? void 0 : item.onClose) item.onClose();
-      return prev.filter((option) => option.id !== target.value);
-    });
-  }, []);
-  const handleCloseAll = (0, import_react20.useCallback)(() => {
-    setActiveNotifications((prev) => {
-      prev.forEach((item) => {
-        if (item.onClose) item.onClose();
+  const [state, dispatch] = (0, import_react24.useReducer)(notificationCenterReducer, []);
+  const styles = (0, import_recipes40.notification)();
+  const timeout = (0, import_react24.useMemo)(
+    () => props.duration || 6e3,
+    [props.duration]
+  );
+  const closeNotification = (0, import_react24.useCallback)(
+    (id) => {
+      updateNotificationState(dispatch, {
+        id,
+        state: "closed"
       });
-      return [];
+      window.setTimeout(() => {
+        removeNotification(dispatch, id);
+      }, 150);
+    },
+    [dispatch]
+  );
+  const handleNotify = (0, import_react24.useCallback)(
+    (options) => {
+      const id = `${options.palette}:${state.length + 1}`;
+      addNotification(dispatch, {
+        ...options,
+        id,
+        state: "open"
+      });
+      window.setTimeout(() => {
+        closeNotification(id);
+      }, timeout);
+    },
+    [dispatch, state, timeout, closeNotification]
+  );
+  const handleClose = (0, import_react24.useCallback)(
+    (e) => {
+      const target = e.currentTarget;
+      closeNotification(target.value);
+    },
+    [closeNotification]
+  );
+  const handleCloseAll = (0, import_react24.useCallback)(() => {
+    state.forEach((item) => {
+      if (item.onClose) item.onClose();
     });
-  }, []);
-  const value = (0, import_react20.useMemo)(
+    clearNotificationState(dispatch);
+  }, [state, dispatch]);
+  const value = (0, import_react24.useMemo)(
     () => ({
       notify: handleNotify
     }),
     [handleNotify]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(NotificationsContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(NotificationsContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: styles.center, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Show, { when: state.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: styles.center, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Show, { when: state.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         Button,
         {
-          className: (0, import_css46.cx)(styles.closeAll, (0, import_patterns16.animateIn)()),
+          className: (0, import_css49.cx)(styles.closeAll, (0, import_patterns15.animateIn)()),
           onClick: handleCloseAll,
           palette: "action",
           shape: "rounded",
@@ -2998,21 +2957,22 @@ function NotificationCenter(props) {
           children: "Close all"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         "div",
         {
-          className: (0, import_patterns16.vstack)({
+          className: (0, import_patterns15.vstack)({
             alignItems: "flex-end",
             gap: "4"
           }),
           style: {
             alignItems: "flex-end"
           },
-          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          children: state.map((option) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             MatchNotification,
             {
               ...option,
-              onClose: handleClose
+              onClose: handleClose,
+              open: option.state
             },
             option.id
           ))
@@ -3022,53 +2982,42 @@ function NotificationCenter(props) {
   ] });
 }
 function MatchNotification(props) {
-  const { palette, id, onClose, heading, description } = props;
+  const { palette, id, onClose, heading, description, open } = props;
+  const sharedProps = (0, import_react24.useMemo)(
+    () => ({
+      id,
+      open: true,
+      onClose,
+      "data-state": open
+    }),
+    [id, open, onClose]
+  );
   switch (palette) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-        Notification,
-        {
-          id,
-          onClose,
-          open: true,
-          palette: "success",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationHeading, { palette: "success", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationDescription, { palette: "success", children: description })
-          ]
-        },
-        id
-      );
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Notification, { ...sharedProps, palette: "success", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(NotificationHeading, { palette: "success", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(NotificationDescription, { palette: "success", children: description })
+      ] });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-        Notification,
-        {
-          id,
-          onClose,
-          open: true,
-          palette: "warning",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationHeading, { palette: "warning", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationDescription, { palette: "warning", children: description })
-          ]
-        },
-        id
-      );
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Notification, { ...sharedProps, palette: "warning", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(NotificationHeading, { palette: "warning", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(NotificationDescription, { palette: "warning", children: description })
+      ] });
     case "danger":
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationHeading, { palette: "danger", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationDescription, { palette: "danger", children: description })
-      ] }, id);
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Notification, { ...sharedProps, palette: "danger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(NotificationHeading, { palette: "danger", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(NotificationDescription, { palette: "danger", children: description })
+      ] });
     case "info":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationHeading, { palette: "info", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationDescription, { palette: "info", children: description })
-      ] }, id);
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Notification, { ...sharedProps, palette: "info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(NotificationHeading, { palette: "info", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(NotificationDescription, { palette: "info", children: description })
+      ] });
   }
 }
 function useNotificationCenter() {
-  const context = (0, import_react20.useContext)(NotificationsContext);
+  const context = (0, import_react24.useContext)(NotificationsContext);
   if (!context) {
     throw new Error(
       "useNotificationCenter must be used within a NotificationsProvider"
@@ -3078,89 +3027,91 @@ function useNotificationCenter() {
 }
 
 // src/context/prompt-modal.tsx
-var import_react21 = require("react");
-var import_css47 = require("@cerberus/styled-system/css");
-var import_patterns17 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var PromptModalContext = (0, import_react21.createContext)(null);
+var import_react25 = require("react");
+var import_css50 = require("@cerberus/styled-system/css");
+var import_patterns16 = require("@cerberus/styled-system/patterns");
+var import_jsx5 = require("@cerberus/styled-system/jsx");
+var import_react26 = require("@ark-ui/react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var PromptModalContext = (0, import_react25.createContext)(null);
 function PromptModal(props) {
-  const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react21.useRef)(null);
-  const [content, setContent] = (0, import_react21.useState)(null);
-  const [inputValue, setInputValue] = (0, import_react21.useState)("");
-  const focusTrap = trapFocus(modalRef);
-  const PromptIcon = $cerberusIcons.promptModal;
-  const isValid = (0, import_react21.useMemo)(
+  const resolveRef = (0, import_react25.useRef)(null);
+  const [open, setOpen] = (0, import_react25.useState)(false);
+  const [content, setContent] = (0, import_react25.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react25.useState)("");
+  const { icons } = useCerberusContext();
+  const { promptModal: PromptIcon } = icons;
+  const isValid = (0, import_react25.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react21.useMemo)(
+  const palette = (0, import_react25.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react21.useCallback)(
+  const handleChange = (0, import_react25.useCallback)(
     (e) => {
       setInputValue(e.currentTarget.value);
     },
     [content]
   );
-  const handleChoice = (0, import_react21.useCallback)(
+  const handleChoice = (0, import_react25.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
       if (target.value === "true") {
         (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, inputValue);
       }
-      close();
+      setOpen(false);
     },
-    [inputValue, close]
+    [inputValue, setOpen]
   );
-  const handleShow = (0, import_react21.useCallback)(
+  const handleShow = (0, import_react25.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
-        show();
+        setOpen(true);
         resolveRef.current = resolve;
       });
     },
-    [show]
+    [setOpen]
   );
-  const value = (0, import_react21.useMemo)(
+  const value = (0, import_react25.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-          "div",
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx5.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx5.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          import_jsx5.HStack,
           {
-            className: (0, import_patterns17.hstack)({
-              justify: "center",
-              w: "full"
-            }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            alignSelf: "center",
+            justify: "center",
+            paddingBlockEnd: "md",
+            w: "full",
+            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -3168,43 +3119,34 @@ function PromptModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-        "div",
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        import_jsx5.VStack,
         {
-          className: (0, import_patterns17.vstack)({
-            alignItems: "flex-start",
-            mt: "4",
-            mb: "8"
-          }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+          alignItems: "flex-start",
+          marginBlockStart: "md",
+          marginBlockEnd: "lg",
+          w: "full",
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Field, { invalid: !isValid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
               Label,
               {
-                className: (0, import_css47.css)({
-                  gap: 1,
-                  justifyContent: "flex-start"
+                className: (0, import_patterns16.hstack)({
+                  gap: "xs",
+                  justify: "flex-start !important"
                 }),
                 htmlFor: "confirm",
                 size: "md",
                 children: [
                   "Type",
-                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                    "strong",
-                    {
-                      className: (0, import_css47.css)({
-                        textTransform: "uppercase"
-                      }),
-                      children: content == null ? void 0 : content.key
-                    }
-                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { as: "strong", textTransform: "uppercase", children: content == null ? void 0 : content.key }),
                   "to confirm"
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               Input,
               {
                 id: "confirm",
@@ -3216,50 +3158,41 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-        "div",
-        {
-          className: (0, import_patterns17.hstack)({
-            justifyContent: "stretch",
-            gap: "4"
-          }),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              Button,
-              {
-                autoFocus: true,
-                className: (0, import_css47.css)({
-                  w: "1/2"
-                }),
-                disabled: !isValid,
-                name: "confirm",
-                onClick: handleChoice,
-                palette,
-                value: "true",
-                children: content == null ? void 0 : content.actionText
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              Button,
-              {
-                className: (0, import_css47.css)({
-                  w: "1/2"
-                }),
-                name: "cancel",
-                onClick: handleChoice,
-                usage: "outlined",
-                value: "false",
-                children: content == null ? void 0 : content.cancelText
-              }
-            )
-          ]
-        }
-      )
-    ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx5.HStack, { gap: "md", justify: "stretch", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          Button,
+          {
+            autoFocus: true,
+            className: (0, import_css50.css)({
+              w: "1/2"
+            }),
+            disabled: !isValid,
+            name: "confirm",
+            onClick: handleChoice,
+            palette,
+            value: "true",
+            children: content == null ? void 0 : content.actionText
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react26.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          Button,
+          {
+            className: (0, import_css50.css)({
+              w: "1/2"
+            }),
+            name: "cancel",
+            onClick: handleChoice,
+            usage: "outlined",
+            value: "false",
+            children: content == null ? void 0 : content.cancelText
+          }
+        ) })
+      ] })
+    ] }) }) })
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react21.useContext)(PromptModalContext);
+  const context = (0, import_react25.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }
@@ -3267,50 +3200,50 @@ function usePromptModal() {
 }
 
 // src/context/theme.tsx
-var import_react23 = require("react");
+var import_react28 = require("react");
 
 // src/hooks/useTheme.ts
-var import_react22 = require("react");
+var import_react27 = require("react");
 var THEME_KEY = "cerberus-theme";
 var MODE_KEY = "cerberus-mode";
 function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options = {}) {
   const { updateMode, updateTheme, cache } = options;
-  const [theme, setTheme] = (0, import_react22.useState)(defaultTheme);
-  const [colorMode, setColorMode] = (0, import_react22.useState)(defaultColorMode);
-  const handleThemeChange = (0, import_react22.useCallback)(
+  const [theme, setTheme] = (0, import_react27.useState)(defaultTheme);
+  const [colorMode, setColorMode] = (0, import_react27.useState)(defaultColorMode);
+  const handleThemeChange = (0, import_react27.useCallback)(
     (newTheme) => {
       setTheme(newTheme);
       updateTheme == null ? void 0 : updateTheme(newTheme);
     },
     [updateTheme]
   );
-  const handleColorModeChange = (0, import_react22.useCallback)(
+  const handleColorModeChange = (0, import_react27.useCallback)(
     (newMode) => {
       setColorMode(newMode);
       updateMode == null ? void 0 : updateMode(newMode);
     },
     [updateMode]
   );
-  (0, import_react22.useLayoutEffect)(() => {
+  (0, import_react27.useLayoutEffect)(() => {
     const theme2 = localStorage.getItem(THEME_KEY);
     if (theme2) {
       setTheme(theme2);
     }
   }, []);
-  (0, import_react22.useLayoutEffect)(() => {
+  (0, import_react27.useLayoutEffect)(() => {
     const mode = localStorage.getItem(MODE_KEY);
     if (mode) {
       setColorMode(mode);
     }
   }, []);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const root = document.documentElement;
     root.dataset.pandaTheme = theme;
     if (cache) {
       localStorage.setItem(THEME_KEY, theme);
     }
   }, [theme, cache]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const root = document.documentElement;
     if (colorMode === "system") {
       root.dataset.colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -3321,7 +3254,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
       localStorage.setItem(MODE_KEY, colorMode);
     }
   }, [colorMode, cache]);
-  return (0, import_react22.useMemo)(
+  return (0, import_react27.useMemo)(
     () => ({
       theme,
       mode: colorMode,
@@ -3333,8 +3266,8 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 }
 
 // src/context/theme.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react23.createContext)(
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react28.createContext)(
   null
 );
 function ThemeProvider(props) {
@@ -3343,10 +3276,10 @@ function ThemeProvider(props) {
     updateMode: props.updateMode,
     updateTheme: props.updateTheme
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ThemeContext.Provider, { value: state, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
-  const context = (0, import_react23.useContext)(ThemeContext);
+  const context = (0, import_react28.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useThemeContext must be used within a ThemeProvider");
   }
@@ -3354,13 +3287,13 @@ function useThemeContext() {
 }
 
 // src/hooks/useDate.ts
-var import_react24 = require("react");
+var import_react29 = require("react");
 function useDate(options) {
   const initialValue = (options == null ? void 0 : options.initialValue) ?? "";
   const format = (options == null ? void 0 : options.format) ?? DateFormats.USMilitary;
   const onChange = options == null ? void 0 : options.onChange;
-  const [value, setValue] = (0, import_react24.useState)(initialValue);
-  const handleChange = (0, import_react24.useCallback)(
+  const [value, setValue] = (0, import_react29.useState)(initialValue);
+  const handleChange = (0, import_react29.useCallback)(
     (e) => {
       const newValue = formatMilitaryDate(e.currentTarget.value);
       if (onChange) onChange(e);
@@ -3368,7 +3301,7 @@ function useDate(options) {
     },
     [onChange]
   );
-  return (0, import_react24.useMemo)(
+  return (0, import_react29.useMemo)(
     () => ({
       format,
       value,
@@ -3446,12 +3379,37 @@ var MONTHS = [
   "DEC"
 ];
 
+// src/hooks/useModal.ts
+var import_react30 = require("react");
+function useModal() {
+  const modalRef = (0, import_react30.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react30.useState)(false);
+  const show = (0, import_react30.useCallback)(() => {
+    var _a;
+    (_a = modalRef.current) == null ? void 0 : _a.showModal();
+    setIsOpen(true);
+  }, []);
+  const close = (0, import_react30.useCallback)(() => {
+    var _a;
+    (_a = modalRef.current) == null ? void 0 : _a.close();
+    setIsOpen(false);
+  }, []);
+  return (0, import_react30.useMemo)(() => {
+    return {
+      modalRef,
+      show,
+      close,
+      isOpen
+    };
+  }, [modalRef, show, close, isOpen]);
+}
+
 // src/hooks/useToggle.ts
-var import_react25 = require("react");
+var import_react31 = require("react");
 function useToggle(options) {
-  const [checked, setChecked] = (0, import_react25.useState)((options == null ? void 0 : options.checked) ?? "");
+  const [checked, setChecked] = (0, import_react31.useState)((options == null ? void 0 : options.checked) ?? "");
   const onChange = options == null ? void 0 : options.onChange;
-  const handleChange = (0, import_react25.useCallback)(
+  const handleChange = (0, import_react31.useCallback)(
     (e) => {
       const target = e.currentTarget;
       setChecked((prev) => {
@@ -3461,25 +3419,25 @@ function useToggle(options) {
     },
     [onChange]
   );
-  return (0, import_react25.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
+  return (0, import_react31.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
 }
 
 // src/hooks/useRootColors.ts
-var import_react26 = require("react");
+var import_react32 = require("react");
 function useRootColors(colors = []) {
-  const [state, dispatch] = (0, import_react26.useReducer)(rootColorsReducer, {});
-  const handleRefetch = (0, import_react26.useCallback)(() => {
+  const [state, dispatch] = (0, import_react32.useReducer)(rootColorsReducer, {});
+  const handleRefetch = (0, import_react32.useCallback)(() => {
     return new Promise((resolve) => {
       dispatch(formatColors(colors));
       resolve();
     });
   }, []);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (Object.keys(state).length === colors.length) return;
     dispatch(formatColors(colors));
     console.log("updating colors in root hook");
   }, [colors]);
-  return (0, import_react26.useMemo)(
+  return (0, import_react32.useMemo)(
     () => ({ colors: state, refetch: handleRefetch }),
     [state, handleRefetch]
   );
@@ -3499,6 +3457,157 @@ function rootColorsReducer(state, action) {
   return { ...state, ...action };
 }
 
+// src/config/icons/checkbox.icons.tsx
+var import_jsx_runtime61 = require("react/jsx-runtime");
+function CheckmarkIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      role: "img",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
+        }
+      )
+    }
+  );
+}
+function IndeterminateIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
+    }
+  );
+}
+
+// src/components/AnimatingUploadIcon.tsx
+var import_jsx_runtime62 = require("react/jsx-runtime");
+function AnimatingUploadIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.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_runtime62.jsxs)(
+        "g",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "square",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime62.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_runtime62.jsx)(
+                  "animate",
+                  {
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.45s",
+                    repeatCount: "indefinite",
+                    values: "6;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime62.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_runtime62.jsx)(
+                  "animate",
+                  {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    begin: "0.075s",
+                    dur: "0.3s",
+                    values: "32;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime62.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_runtime62.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_runtime62.jsx)(
+                      "animate",
+                      {
+                        fill: "freeze",
+                        attributeName: "opacity",
+                        values: "1;0;1",
+                        dur: "2s",
+                        repeatCount: "indefinite"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/config/defineIcons.ts
+var defaultIcons = {
+  checkbox: CheckmarkIcon,
+  fileUploader: AnimatingUploadIcon,
+  indeterminate: IndeterminateIcon
+};
+function defineIcons(icons) {
+  return {
+    ...defaultIcons,
+    ...icons
+  };
+}
+
+// src/config/index.ts
+function makeSystemConfig(options) {
+  return options;
+}
+
 // src/utils/index.ts
 function formatNotifyCount(count) {
   if (count > 99) return "99+";
@@ -3509,7 +3618,6 @@ function formatNotifyCount(count) {
 __reExport(src_exports, require("@dnd-kit/core"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  $cerberusIcons,
   Accordion,
   AccordionItem,
   AccordionItemContent,
@@ -3522,6 +3630,7 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   Avatar,
   Button,
   CTAModal,
+  CerberusProvider,
   Checkbox,
   CircularProgress,
   ConfirmModal,
@@ -3543,6 +3652,16 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   DatePickerViewControl,
   DatePickerViewControlGroup,
   DatePickerYearView,
+  Dialog,
+  DialogBackdrop,
+  DialogCloseIconTrigger,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogDescription,
+  DialogHeading,
+  DialogPositioner,
+  DialogProvider,
+  DialogTrigger,
   Droppable,
   FeatureFlag,
   FeatureFlags,
@@ -3613,10 +3732,12 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   formatNotifyCount,
   getLocalStorage,
   getPosition,
+  makeSystemConfig,
   processStatus,
   setLocalStorage,
   trapFocus,
   useCTAModal,
+  useCerberusContext,
   useConfirmModal,
   useDate,
   useFeatureFlags,