@cerberus-design/react 0.8.0 → 0.8.1

package/build/legacy/index.cjs

@@ -0,0 +1,2165 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  $cerberusIcons: () => $cerberusIcons,
+  Button: () => Button,
+  Checkbox: () => Checkbox,
+  ConfirmModal: () => ConfirmModal,
+  Droppable: () => Droppable,
+  FeatureFlag: () => FeatureFlag,
+  FeatureFlags: () => FeatureFlags,
+  Field: () => Field,
+  FieldMessage: () => FieldMessage,
+  FileStatus: () => FileStatus,
+  FileUploader: () => FileUploader,
+  IconButton: () => IconButton,
+  Input: () => Input,
+  Label: () => Label,
+  MODE_KEY: () => MODE_KEY,
+  Modal: () => Modal,
+  ModalDescription: () => ModalDescription,
+  ModalHeader: () => ModalHeader,
+  ModalHeading: () => ModalHeading,
+  ModalIcon: () => ModalIcon,
+  NavMenu: () => NavMenu,
+  NavMenuLink: () => NavMenuLink,
+  NavMenuList: () => NavMenuList,
+  NavMenuTrigger: () => NavMenuTrigger,
+  Notification: () => Notification,
+  NotificationCenter: () => NotificationCenter,
+  NotificationDescription: () => NotificationDescription,
+  NotificationHeading: () => NotificationHeading,
+  Option: () => Option,
+  Portal: () => Portal,
+  ProgressBar: () => ProgressBar,
+  PromptModal: () => PromptModal,
+  Radio: () => Radio,
+  Select: () => Select,
+  Show: () => Show,
+  THEME_KEY: () => THEME_KEY,
+  Tab: () => Tab,
+  TabList: () => TabList,
+  TabPanel: () => TabPanel,
+  Table: () => Table,
+  Tabs: () => Tabs,
+  TabsContext: () => TabsContext,
+  Tag: () => Tag,
+  Tbody: () => Tbody,
+  Td: () => Td,
+  Textarea: () => Textarea,
+  Th: () => Th,
+  Thead: () => Thead,
+  ThemeProvider: () => ThemeProvider,
+  Toggle: () => Toggle,
+  Tr: () => Tr,
+  createNavTriggerProps: () => createNavTriggerProps,
+  defineIcons: () => defineIcons,
+  getPosition: () => getPosition,
+  processStatus: () => processStatus,
+  trapFocus: () => trapFocus,
+  useConfirmModal: () => useConfirmModal,
+  useFeatureFlags: () => useFeatureFlags,
+  useFieldContext: () => useFieldContext,
+  useModal: () => useModal,
+  useNavMenuContext: () => useNavMenuContext,
+  useNotificationCenter: () => useNotificationCenter,
+  usePromptModal: () => usePromptModal,
+  useTabsContext: () => useTabsContext,
+  useTabsKeyboardNavigation: () => useTabsKeyboardNavigation,
+  useTheme: () => useTheme,
+  useThemeContext: () => useThemeContext,
+  useToggle: () => useToggle
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Button.tsx
+var import_css = require("@cerberus/styled-system/css");
+var import_recipes = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button(props) {
+  const { palette, usage, shape, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      ...nativeProps,
+      className: (0, import_css.cx)(
+        nativeProps.className,
+        (0, import_recipes.button)({
+          palette,
+          usage,
+          shape
+        })
+      )
+    }
+  );
+}
+
+// src/components/Checkbox.tsx
+var import_recipes2 = require("@cerberus/styled-system/recipes");
+var import_patterns = require("@cerberus/styled-system/patterns");
+var import_css2 = require("@cerberus/styled-system/css");
+
+// src/components/Show.tsx
+var import_react = require("react");
+function Show(props) {
+  const { when, children, fallback } = props;
+  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
+  return (0, import_react.useMemo)(() => {
+    if (condition) return children;
+    return fallback ?? null;
+  }, [condition, children, fallback]);
+}
+
+// src/context/field.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FieldContext = (0, import_react2.createContext)(null);
+function Field(props) {
+  const value = (0, import_react2.useMemo)(
+    () => ({
+      disabled: props.disabled,
+      readOnly: props.readOnly,
+      required: props.required,
+      invalid: props.invalid
+    }),
+    [props.disabled, props.readOnly, props.required, props.invalid]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldContext.Provider, { value, children: props.children });
+}
+function useFieldContext() {
+  const context = (0, import_react2.useContext)(FieldContext);
+  if (!context) {
+    throw new Error("useFieldContext must be used within a Field Provider.");
+  }
+  return context;
+}
+
+// src/config/cerbIcons.ts
+var import_icons = require("@cerberus/icons");
+
+// src/config/icons/checkbox.icons.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function CheckmarkIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_runtime3.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_runtime3.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
+    }
+  );
+}
+
+// src/config/cerbIcons.ts
+var defaultIcons = {
+  checkbox: CheckmarkIcon,
+  close: import_icons.CloseFilled,
+  confirmModal: import_icons.Information,
+  delete: import_icons.TrashCan,
+  promptModal: import_icons.Information,
+  fileUploader: import_icons.CloudUpload,
+  indeterminate: IndeterminateIcon,
+  infoNotification: import_icons.InformationFilled,
+  successNotification: import_icons.CheckmarkFilled,
+  warningNotification: import_icons.WarningFilled,
+  dangerNotification: import_icons.ErrorFilled,
+  invalid: import_icons.WarningFilled,
+  invalidAlt: import_icons.Warning,
+  redo: import_icons.Restart,
+  selectArrow: import_icons.ChevronDown,
+  toggleChecked: import_icons.Checkmark
+};
+
+// 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."
+    );
+  }
+}
+function defineIcons(icons) {
+  _validateIconsProperties(icons);
+  $cerberusIcons = {
+    ...defaultIcons,
+    ...icons
+  };
+  return $cerberusIcons;
+}
+var $cerberusIcons = defaultIcons;
+
+// src/components/Checkbox.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Checkbox(props) {
+  const { describedBy, size, checked, mixed, ...nativeProps } = props;
+  const { invalid, ...fieldStates } = useFieldContext();
+  const styles = (0, import_recipes2.checkbox)({ size });
+  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon2 } = $cerberusIcons;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: (0, import_css2.cx)(
+        styles.root,
+        (0, import_patterns.vstack)({
+          gap: "0",
+          justify: "center"
+        })
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            ...nativeProps,
+            ...fieldStates,
+            ...describedBy && { "aria-describedby": describedBy },
+            ...invalid && { "aria-invalid": true },
+            ...mixed && { "aria-checked": "mixed" },
+            className: (0, import_css2.cx)("peer", nativeProps.className, styles.input),
+            type: "checkbox"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: checked && !mixed, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckIcon, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: mixed, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IndeterminateIcon2, {}) }) })
+      ]
+    }
+  );
+}
+
+// src/components/Droppable.tsx
+var import_core = require("@dnd-kit/core");
+var import_react3 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Droppable(props) {
+  const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } = props;
+  const uuid = (0, import_react3.useId)();
+  const { isOver, setNodeRef } = (0, import_core.useDroppable)({
+    data,
+    disabled,
+    id: id || uuid,
+    resizeObserverConfig
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      ...nativeProps,
+      "data-over": isOver,
+      "data-dropped": dropped,
+      ref: setNodeRef,
+      children: props.children
+    }
+  );
+}
+
+// src/components/FieldMessage.tsx
+var import_css3 = require("@cerberus/styled-system/css");
+var import_recipes3 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function FieldMessage(props) {
+  const { invalid } = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "small",
+    {
+      ...props,
+      ...invalid && { "aria-invalid": true },
+      className: (0, import_css3.cx)(props.className, (0, import_recipes3.fieldMessage)())
+    }
+  );
+}
+
+// src/context/feature-flags.tsx
+var import_react4 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FeatureFlagContext = (0, import_react4.createContext)(null);
+function FeatureFlags(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
+}
+function useFeatureFlags(key) {
+  const context = (0, import_react4.useContext)(FeatureFlagContext);
+  if (context === null) {
+    throw new Error(
+      "useFeatureFlag must be used within a FeatureFlags Provider"
+    );
+  }
+  return context[key] ?? false;
+}
+
+// src/components/FeatureFlag.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function FeatureFlag(props) {
+  const showContent = useFeatureFlags(props.flag);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Show, { when: showContent, children: props.children });
+}
+
+// src/components/FileStatus.tsx
+var import_react5 = require("react");
+
+// src/components/ProgressBar.tsx
+var import_css4 = require("@cerberus/styled-system/css");
+var import_recipes4 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ProgressBar(props) {
+  const { indeterminate, size, usage, now, ...nativeProps } = props;
+  const styles = (0, import_recipes4.progressBar)({ size, usage });
+  const nowClamped = Math.min(100, Math.max(0, now || 0));
+  const width = {
+    width: indeterminate ? "50%" : `${nowClamped}%`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      ...nativeProps,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": indeterminate ? 0 : nowClamped,
+      className: (0, import_css4.cx)(nativeProps.className, styles.root),
+      role: "meter",
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "div",
+        {
+          ...indeterminate && { "data-indeterminate": true },
+          "data-complete": nowClamped === 100,
+          className: styles.bar,
+          style: width
+        }
+      )
+    }
+  );
+}
+
+// src/components/IconButton.tsx
+var import_css5 = require("@cerberus/styled-system/css");
+var import_recipes5 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function IconButton(props) {
+  const { ariaLabel, palette, usage, size, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "button",
+    {
+      ...nativeProps,
+      "data-tooltip": true,
+      "data-position": props.tooltipPosition ?? "top",
+      "aria-label": ariaLabel ?? "Icon Button",
+      className: (0, import_css5.cx)(
+        nativeProps.className,
+        (0, import_recipes5.iconButton)({
+          palette,
+          usage,
+          size
+        })
+      )
+    }
+  );
+}
+
+// src/components/FileStatus.tsx
+var import_recipes6 = require("@cerberus/styled-system/recipes");
+var import_css6 = require("@cerberus/styled-system/css");
+var import_patterns2 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var processStatus = /* @__PURE__ */ ((processStatus2) => {
+  processStatus2["TODO"] = "todo";
+  processStatus2["PROCESSING"] = "processing";
+  processStatus2["DONE"] = "done";
+  processStatus2["ERROR"] = "error";
+  return processStatus2;
+})(processStatus || {});
+function FileStatus(props) {
+  const { file, now, status, onClick, ...nativeProps } = props;
+  const actionLabel = (0, import_react5.useMemo)(() => getStatusActionLabel(status), [status]);
+  const palette = (0, import_react5.useMemo)(() => getPalette(status), [status]);
+  const modalIconPalette = (0, import_react5.useMemo)(() => getModalIconPalette(status), [status]);
+  const styles = (0, import_react5.useMemo)(() => {
+    switch (status) {
+      case "todo" /* TODO */:
+        return (0, import_recipes6.fileStatus)({ status: "todo" });
+      case "processing" /* PROCESSING */:
+        return (0, import_recipes6.fileStatus)({ status: "processing" });
+      case "done" /* DONE */:
+        return (0, import_recipes6.fileStatus)({ status: "done" });
+      case "error" /* ERROR */:
+        return (0, import_recipes6.fileStatus)({ status: "error" });
+      default:
+        return (0, import_recipes6.fileStatus)();
+    }
+  }, [status]);
+  const handleClick = (0, import_react5.useCallback)(
+    (e) => {
+      const actionStatus = getStatusActionLabel(
+        status
+      ).toLocaleLowerCase();
+      onClick(actionStatus, e);
+    },
+    [onClick]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      ...nativeProps,
+      className: (0, import_css6.cx)(nativeProps.className, styles.root, (0, import_patterns2.hstack)()),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            className: (0, import_css6.cx)(
+              styles.icon,
+              (0, import_patterns2.circle)({
+                size: "2rem"
+              })
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MatchFileStatusIcon, { status })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "div",
+          {
+            className: (0, import_patterns2.vstack)({
+              alignItems: "flex-start",
+              gap: "0.12rem",
+              w: "full"
+            }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "small",
+                {
+                  className: (0, import_css6.css)({
+                    color: "page.text.initial",
+                    textStyle: "label-sm"
+                  }),
+                  children: file
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ProgressBar, { now, size: "sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Field, { invalid: modalIconPalette === "danger", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                FieldMessage,
+                {
+                  className: (0, import_css6.css)({
+                    color: "page.text.100"
+                  }),
+                  id: `help:${file}`,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MatchFileStatusText, { status, now })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          IconButton,
+          {
+            ariaLabel: actionLabel,
+            onClick: handleClick,
+            palette,
+            size: "sm",
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MatchStatusAction, { status })
+          }
+        )
+      ]
+    }
+  );
+}
+function MatchFileStatusIcon(props) {
+  const {
+    fileUploader: FileUploaderIcon,
+    invalidAlt: InvalidIcon,
+    successNotification: DoneIcon
+  } = $cerberusIcons;
+  switch (props.status) {
+    case "todo" /* TODO */:
+    case "processing" /* PROCESSING */:
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FileUploaderIcon, {});
+    case "done" /* DONE */:
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DoneIcon, {});
+    case "error" /* ERROR */:
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(InvalidIcon, {});
+    default:
+      throw new Error("Unknown status");
+  }
+}
+function MatchFileStatusText(props) {
+  switch (props.status) {
+    case "todo" /* TODO */:
+      return "Waiting to upload";
+    case "processing" /* PROCESSING */:
+      return `${props.now}% Complete`;
+    case "done" /* DONE */:
+      return "File uploaded successfully";
+    case "error" /* ERROR */:
+      return "There was an error uploading the file";
+    default:
+      throw new Error("Invalid status");
+  }
+}
+function MatchStatusAction(props) {
+  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = $cerberusIcons;
+  switch (props.status) {
+    case "todo" /* TODO */:
+    case "processing" /* PROCESSING */:
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CloseIcon, {});
+    case "error" /* ERROR */:
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RedoIcon, {});
+    case "done" /* DONE */:
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TrashIcon, {});
+    default:
+      throw new Error("Invalid status");
+  }
+}
+function getStatusActionLabel(status) {
+  switch (status) {
+    case "todo" /* TODO */:
+    case "processing" /* PROCESSING */:
+      return "Cancel";
+    case "error" /* ERROR */:
+      return "Retry";
+    case "done" /* DONE */:
+      return "Delete";
+    default:
+      return "";
+  }
+}
+function getPalette(status) {
+  switch (status) {
+    case "todo" /* TODO */:
+    case "processing" /* PROCESSING */:
+      return "danger";
+    case "error" /* ERROR */:
+      return "action";
+    case "done" /* DONE */:
+      return "danger";
+    default:
+      return "action";
+  }
+}
+function getModalIconPalette(status) {
+  switch (status) {
+    case "todo" /* TODO */:
+    case "processing" /* PROCESSING */:
+      return "action";
+    case "error" /* ERROR */:
+      return "danger";
+    case "done" /* DONE */:
+      return "success";
+    default:
+      return "action";
+  }
+}
+
+// src/components/FileUploader.tsx
+var import_css7 = require("@cerberus/styled-system/css");
+var import_patterns3 = require("@cerberus/styled-system/patterns");
+var import_recipes7 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function FileUploader(props) {
+  var _a;
+  const styles = (0, import_recipes7.fileUploader)();
+  const Icon = $cerberusIcons.fileUploader;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      className: (0, import_css7.cx)(
+        (0, import_patterns3.vstack)({
+          justify: "center"
+        }),
+        styles.container
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: (0, import_css7.cx)(styles.icon, (0, import_recipes7.modalIcon)(), (0, import_patterns3.circle)()), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "label",
+          {
+            className: (0, import_css7.cx)(
+              (0, import_patterns3.vstack)({
+                justify: "center"
+              }),
+              styles.label
+            ),
+            htmlFor: props.name,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Show, { when: Boolean(props.heading), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: styles.heading, children: props.heading }) }),
+              "Import ",
+              (_a = props.accept) == null ? void 0 : _a.replace(",", ", "),
+              " files",
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: styles.description, children: "Click to select files" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "input",
+                {
+                  ...props,
+                  className: (0, import_css7.cx)(props.className, styles.input),
+                  type: "file"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Input.tsx
+var import_recipes8 = require("@cerberus/styled-system/recipes");
+var import_css8 = require("@cerberus/styled-system/css");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Input(props) {
+  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
+  const inputStyles = (0, import_recipes8.input)({ size });
+  const { invalid, ...fieldStates } = useFieldContext();
+  const hasEndIcon = Boolean(endIcon);
+  const { invalid: InvalidIcon } = $cerberusIcons;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: inputStyles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "input",
+      {
+        ...nativeProps,
+        ...fieldStates,
+        ...describedBy && { "aria-describedby": describedBy },
+        ...invalid && { "aria-invalid": true },
+        "data-start-icon": Boolean(startIcon),
+        className: (0, import_css8.cx)("peer", nativeProps.className, inputStyles.input)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
+  ] });
+}
+
+// src/components/Label.tsx
+var import_recipes9 = require("@cerberus/styled-system/recipes");
+var import_css9 = require("@cerberus/styled-system/css");
+var import_patterns4 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Label(props) {
+  const { hidden, size, ...nativeProps } = props;
+  const { required, disabled } = useFieldContext();
+  const usage = hidden ? "hidden" : "visible";
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "label",
+    {
+      ...nativeProps,
+      ...disabled && { "data-disabled": true },
+      className: (0, import_css9.cx)(
+        nativeProps.className,
+        (0, import_recipes9.label)({ size, usage }),
+        (0, import_patterns4.hstack)({
+          justify: "space-between",
+          w: "full"
+        })
+      ),
+      children: [
+        props.children,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "span",
+          {
+            className: (0, import_css9.css)({
+              color: "inherit",
+              fontSize: "inherit"
+            }),
+            children: "(required)"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/Modal.tsx
+var import_css10 = require("@cerberus/styled-system/css");
+var import_recipes10 = require("@cerberus/styled-system/recipes");
+var import_react6 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function ModalEl(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "dialog",
+    {
+      ...props,
+      className: (0, import_css10.cx)(props.className, (0, import_recipes10.modal)().dialog),
+      ref
+    }
+  );
+}
+var Modal = (0, import_react6.forwardRef)(ModalEl);
+
+// src/components/ModalHeader.tsx
+var import_css11 = require("@cerberus/styled-system/css");
+var import_patterns5 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function ModalHeader(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      ...props,
+      className: (0, import_css11.cx)(
+        props.className,
+        (0, import_patterns5.vstack)({
+          alignItems: "flex-start",
+          gap: "4",
+          mb: "8"
+        })
+      )
+    }
+  );
+}
+
+// src/components/ModalHeading.tsx
+var import_css12 = require("@cerberus/styled-system/css");
+var import_recipes11 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function ModalHeading(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { ...props, className: (0, import_css12.cx)(props.className, (0, import_recipes11.modal)().heading) });
+}
+
+// src/components/ModalDescription.tsx
+var import_css13 = require("@cerberus/styled-system/css");
+var import_recipes12 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function ModalDescription(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { ...props, className: (0, import_css13.cx)(props.className, (0, import_recipes12.modal)().description) });
+}
+
+// src/components/ModalIcon.tsx
+var import_css14 = require("@cerberus/styled-system/css");
+var import_patterns6 = require("@cerberus/styled-system/patterns");
+var import_recipes13 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function ModalIcon(props) {
+  const { palette, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
+    {
+      ...nativeProps,
+      className: (0, import_css14.cx)(
+        nativeProps.className,
+        (0, import_recipes13.modalIcon)({
+          palette
+        }),
+        (0, import_patterns6.circle)()
+      ),
+      children: props.children
+    }
+  );
+}
+
+// src/components/NavMenuTrigger.tsx
+var import_react8 = require("react");
+var import_css16 = require("@cerberus/styled-system/css");
+var import_recipes14 = require("@cerberus/styled-system/recipes");
+
+// 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_css15 = require("@cerberus/styled-system/css");
+var import_react7 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var NavMenuContext = (0, import_react7.createContext)(null);
+function NavMenu(props) {
+  const triggerRef = (0, import_react7.useRef)(null);
+  const menuRef = (0, import_react7.useRef)(null);
+  const [expanded, setExpanded] = (0, import_react7.useState)(false);
+  const handleToggle = (0, import_react7.useCallback)(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+  const value = (0, import_react7.useMemo)(
+    () => ({
+      triggerRef,
+      menuRef,
+      expanded,
+      onToggle: handleToggle
+    }),
+    [expanded, handleToggle]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NavMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "nav",
+    {
+      className: (0, import_css15.css)({
+        position: "relative"
+      }),
+      children: props.children
+    }
+  ) });
+}
+function useNavMenuContext() {
+  const context = (0, import_react7.useContext)(NavMenuContext);
+  if (!context) {
+    throw new Error("useNavMenuContext must be used within a NavMenu.");
+  }
+  return context;
+}
+
+// src/components/NavMenuTrigger.tsx
+var import_jsx_runtime21 = 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_react8.useCallback)(
+    (e) => {
+      if (onClick) return onClick(e);
+      onToggle();
+    },
+    [onClick, onToggle]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Show,
+    {
+      when: hasAs,
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "button",
+        {
+          ...nativeProps,
+          ...ariaProps,
+          className: (0, import_css16.cx)(
+            nativeProps.className,
+            (0, import_recipes14.button)({
+              palette,
+              usage,
+              shape
+            })
+          ),
+          onClick: handleClick,
+          ref: triggerRef,
+          children: props.children
+        }
+      ),
+      children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        AsSub,
+        {
+          ...nativeProps,
+          ...ariaProps,
+          onClick: handleClick,
+          ref: triggerRef
+        }
+      )
+    }
+  );
+}
+
+// src/components/NavMenuList.tsx
+var import_react9 = require("react");
+var import_css17 = require("@cerberus/styled-system/css");
+var import_patterns7 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+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_patterns7.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_react9.useMemo)(
+    () => getPosition(position ?? "bottom"),
+    [position]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Show, { when: expanded, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "ul",
+    {
+      ...nativeProps,
+      "data-position": position ?? "bottom",
+      className: (0, import_css17.cx)(nativeProps.className, navListStyles),
+      ref: menuRef,
+      style: locationStyles
+    }
+  ) });
+}
+
+// src/components/NavMenuLink.tsx
+var import_css18 = require("@cerberus/styled-system/css");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function NavMenuLink(props) {
+  const { as, ...nativeProps } = props;
+  const hasAs = Boolean(as);
+  const AsSub = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "li",
+    {
+      className: (0, import_css18.css)({
+        w: "full"
+      }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        Show,
+        {
+          when: hasAs,
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "a",
+            {
+              ...nativeProps,
+              className: (0, import_css18.cx)(
+                nativeProps.className,
+                (0, import_css18.css)({
+                  color: "action.navigation.initial",
+                  textStyle: "link",
+                  _hover: {
+                    color: "action.navigation.hover"
+                  }
+                })
+              )
+            }
+          ),
+          children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AsSub, { ...nativeProps })
+        }
+      )
+    }
+  );
+}
+
+// src/components/Notification.tsx
+var import_css19 = require("@cerberus/styled-system/css");
+var import_patterns8 = require("@cerberus/styled-system/patterns");
+var import_recipes15 = require("@cerberus/styled-system/recipes");
+var import_react10 = require("react");
+var import_icons2 = require("@cerberus/icons");
+
+// src/aria-helpers/trap-focus.aria.ts
+function trapFocus(modalRef) {
+  var _a;
+  const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+  const focusable = Array.from(
+    ((_a = modalRef.current) == null ? void 0 : _a.querySelectorAll(focusableElements)) ?? []
+  );
+  const firstFocusable = focusable[0];
+  const lastFocusable = focusable[focusable.length - 1];
+  return function handleKeyDown(event) {
+    if (event.key === "Tab") {
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusable) {
+          lastFocusable.focus();
+          event.preventDefault();
+        }
+      } else {
+        if (document.activeElement === lastFocusable) {
+          firstFocusable.focus();
+          event.preventDefault();
+        }
+      }
+    }
+  };
+}
+
+// src/components/Notification.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function MatchNotificationIcon(props) {
+  const palette = props.palette || "info";
+  const key = `${palette}Notification`;
+  const Icon = $cerberusIcons[key];
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, {});
+}
+function Notification(props) {
+  const { children, palette, onClose, ...nativeProps } = props;
+  const ref = (0, import_react10.useRef)(null);
+  const onKeyDown = trapFocus(ref);
+  const styles = (0, import_recipes15.notification)({ palette });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "dialog",
+    {
+      ...nativeProps,
+      className: (0, import_css19.cx)(
+        nativeProps.className,
+        (0, import_patterns8.hstack)({
+          position: "relative",
+          gap: "4"
+        }),
+        styles.dialog
+      ),
+      onKeyDown,
+      ref,
+      role: "alert",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MatchNotificationIcon, { palette }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "div",
+          {
+            className: (0, import_patterns8.vstack)({
+              alignItems: "flex-start",
+              gap: "0",
+              py: "2"
+            }),
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "button",
+          {
+            "aria-label": "Close",
+            className: styles.close,
+            onClick: onClose,
+            value: props.id,
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.Close, {})
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/NotificationHeading.tsx
+var import_css20 = require("@cerberus/styled-system/css");
+var import_recipes16 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function NotificationHeading(props) {
+  const { palette, ...nativeProps } = props;
+  const styles = (0, import_recipes16.notification)({ palette });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: (0, import_css20.cx)(nativeProps.className, styles.heading), ...nativeProps });
+}
+
+// src/components/NotificationDescription.tsx
+var import_css21 = require("@cerberus/styled-system/css");
+var import_recipes17 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function NotificationDescription(props) {
+  const { palette, ...nativeProps } = props;
+  const styles = (0, import_recipes17.notification)({ palette });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "p",
+    {
+      className: (0, import_css21.cx)(nativeProps.className, styles.description),
+      ...nativeProps
+    }
+  );
+}
+
+// src/components/Portal.tsx
+var import_react_dom = require("react-dom");
+function Portal(props) {
+  const container = props.container || document.body;
+  return (0, import_react_dom.createPortal)(props.children, container, props.key);
+}
+
+// src/components/Radio.tsx
+var import_css22 = require("@cerberus/styled-system/css");
+var import_patterns9 = require("@cerberus/styled-system/patterns");
+var import_recipes18 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Radio(props) {
+  const { children, size, ...nativeProps } = props;
+  const { invalid, ...state } = useFieldContext();
+  const styles = (0, import_recipes18.radio)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: (0, import_css22.cx)("group", (0, import_patterns9.hstack)(), styles.root), tabIndex: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "input",
+      {
+        ...nativeProps,
+        ...state,
+        ...invalid && { "aria-invalid": true },
+        className: (0, import_css22.cx)(nativeProps.className, styles.input),
+        tabIndex: -1,
+        type: "radio"
+      }
+    ),
+    children
+  ] });
+}
+
+// src/components/Select.tsx
+var import_css23 = require("@cerberus/styled-system/css");
+var import_patterns10 = require("@cerberus/styled-system/patterns");
+var import_recipes19 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function Select(props) {
+  const { describedBy, size, ...nativeProps } = props;
+  const { invalid, ...fieldStates } = useFieldContext();
+  const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons;
+  const styles = (0, import_recipes19.select)({
+    size
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "select",
+      {
+        ...nativeProps,
+        ...fieldStates,
+        ...describedBy && { "aria-describedby": describedBy },
+        ...invalid && { "aria-invalid": true },
+        className: styles.input
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      "span",
+      {
+        className: (0, import_css23.cx)(
+          styles.iconStack,
+          (0, import_patterns10.hstack)({
+            gap: "2"
+          })
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "span",
+            {
+              ...invalid && { "data-invalid": true },
+              className: styles.stateIcon,
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InvalidIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: styles.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectArrow, {}) })
+        ]
+      }
+    )
+  ] });
+}
+function Option(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { ...props });
+}
+
+// src/components/Tab.tsx
+var import_react13 = require("react");
+
+// src/context/tabs.tsx
+var import_recipes20 = require("@cerberus/styled-system/recipes");
+var import_react11 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var TabsContext = (0, import_react11.createContext)(null);
+function Tabs(props) {
+  const { cache, active, id, palette } = props;
+  const [activeTab, setActiveTab] = (0, import_react11.useState)(() => cache ? "" : active ?? "");
+  const tabsList = (0, import_react11.useRef)([]);
+  const uuid = (0, import_react11.useMemo)(() => {
+    return id ? `cerberus-tabs-${id}` : "cerberus-tabs";
+  }, [id]);
+  const value = (0, import_react11.useMemo)(
+    () => ({
+      tabs: tabsList,
+      id: uuid,
+      active: activeTab,
+      styles: (0, import_recipes20.tabs)({ palette }),
+      onTabUpdate: setActiveTab
+    }),
+    [activeTab, setActiveTab, palette, uuid, tabsList]
+  );
+  (0, import_react11.useEffect)(() => {
+    if (cache) {
+      const cachedTab = window.localStorage.getItem(uuid);
+      setActiveTab(
+        cache ? cachedTab || (props.active ?? "") : props.active ?? ""
+      );
+    }
+  }, [cache, active, uuid]);
+  (0, import_react11.useEffect)(() => {
+    if (cache && activeTab) {
+      window.localStorage.setItem(uuid, activeTab);
+    }
+  }, [activeTab, cache]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TabsContext.Provider, { value, children: props.children });
+}
+function useTabsContext() {
+  const context = (0, import_react11.useContext)(TabsContext);
+  if (!context) {
+    throw new Error("useTabsContext must be used within a Tabs Provider.");
+  }
+  return context;
+}
+
+// src/components/Tab.tsx
+var import_css24 = require("@cerberus/styled-system/css");
+
+// src/aria-helpers/tabs.aria.ts
+var import_react12 = require("react");
+function getNextIndex(index, length) {
+  return index === length - 1 ? 0 : index + 1;
+}
+function getPrevIndex(index, length) {
+  return index === 0 ? length - 1 : index - 1;
+}
+function useTabsKeyboardNavigation() {
+  const { tabs: tabs2 } = useTabsContext();
+  const [activeTab, setActiveTab] = (0, import_react12.useState)(-1);
+  (0, import_react12.useEffect)(() => {
+    const handleKeyDown = (event) => {
+      const index = activeTab === -1 ? tabs2.current.findIndex((tab) => tab.ariaSelected === "true") : activeTab;
+      const nextIndex = getNextIndex(index, tabs2.current.length);
+      const prevIndex = getPrevIndex(index, tabs2.current.length);
+      if (index === -1) return;
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          setActiveTab(prevIndex);
+          tabs2.current[prevIndex].focus();
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          setActiveTab(nextIndex);
+          tabs2.current[nextIndex].focus();
+          break;
+        case "Home":
+          event.preventDefault();
+          setActiveTab(0);
+          tabs2.current[0].focus();
+          break;
+        case "End":
+          event.preventDefault();
+          setActiveTab(tabs2.current.length - 1);
+          tabs2.current[tabs2.current.length - 1].focus();
+          break;
+        default:
+          break;
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [activeTab, tabs2.current]);
+  return {
+    ref: (tab) => {
+      if (tab && !tabs2.current.includes(tab)) {
+        tabs2.current.push(tab);
+      }
+    }
+  };
+}
+
+// src/components/Tab.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function Tab(props) {
+  const { value, ...nativeProps } = props;
+  const { active, onTabUpdate, styles } = useTabsContext();
+  const [isPending, startTransition] = (0, import_react13.useTransition)();
+  const { ref } = useTabsKeyboardNavigation();
+  const isActive = (0, import_react13.useMemo)(() => active === value, [active, value]);
+  function handleClick(e) {
+    var _a;
+    (_a = props.onClick) == null ? void 0 : _a.call(props, e);
+    startTransition(() => onTabUpdate(e.currentTarget.value));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "button",
+    {
+      ...nativeProps,
+      ...!isActive && { tabIndex: -1 },
+      "aria-controls": `panel:${value}`,
+      "aria-busy": isPending,
+      "aria-selected": isActive,
+      id: value,
+      className: (0, import_css24.cx)(nativeProps.className, styles.tab),
+      onClick: handleClick,
+      role: "tab",
+      ref,
+      value
+    }
+  );
+}
+
+// src/components/TabList.tsx
+var import_css25 = require("@cerberus/styled-system/css");
+var import_patterns11 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function TabList(props) {
+  const { description, ...nativeProps } = props;
+  const { id, styles } = useTabsContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "div",
+    {
+      ...nativeProps,
+      "aria-describedby": description,
+      className: (0, import_css25.cx)(
+        nativeProps.className,
+        (0, import_patterns11.hstack)({
+          gap: "0"
+        }),
+        styles.tabList
+      ),
+      id: id ?? nativeProps.id
+    }
+  );
+}
+
+// src/components/TabPanel.tsx
+var import_css26 = require("@cerberus/styled-system/css");
+var import_react14 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function TabPanel(props) {
+  const { tab, ...nativeProps } = props;
+  const { active, styles } = useTabsContext();
+  const isActive = (0, import_react14.useMemo)(() => active === tab, [active, tab]);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Show, { when: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "div",
+    {
+      ...nativeProps,
+      ...isActive && { tabIndex: 0 },
+      "aria-labelledby": tab,
+      className: (0, import_css26.cx)(nativeProps.className, styles.tabPanel),
+      id: `panel:${tab}`,
+      role: "tabpanel"
+    }
+  ) });
+}
+
+// src/components/Table.tsx
+var import_css27 = require("@cerberus/styled-system/css");
+var import_recipes21 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function Table(props) {
+  const { caption, children, ...nativeProps } = props;
+  const styles = (0, import_recipes21.table)();
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "table",
+    {
+      ...nativeProps,
+      className: (0, import_css27.cx)(nativeProps.className, styles.table),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("caption", { className: styles.caption, children: caption }),
+        children
+      ]
+    }
+  ) });
+}
+function Tr(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tr", { ...props });
+}
+
+// src/components/Thead.tsx
+var import_css28 = require("@cerberus/styled-system/css");
+var import_recipes22 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function Thead(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("thead", { ...props, className: (0, import_css28.cx)(props.className, (0, import_recipes22.thead)()) });
+}
+
+// src/components/Th.tsx
+var import_css29 = require("@cerberus/styled-system/css");
+var import_recipes23 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function Th(props) {
+  const { size, onClick, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    Show,
+    {
+      when: Boolean(onClick),
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        "th",
+        {
+          ...nativeProps,
+          className: (0, import_css29.cx)(nativeProps.className, (0, import_recipes23.th)({ size }))
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        "button",
+        {
+          className: (0, import_css29.cx)(
+            nativeProps.className,
+            (0, import_recipes23.th)({ size }),
+            (0, import_css29.css)({
+              alignItems: "center",
+              display: "inline-flex",
+              justifyContent: "space-between",
+              userSelect: "none",
+              w: "full"
+            })
+          ),
+          onClick,
+          children: props.children
+        }
+      ) })
+    }
+  );
+}
+
+// src/components/Td.tsx
+var import_css30 = require("@cerberus/styled-system/css");
+var import_recipes24 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function Td(props) {
+  const { size, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "td",
+    {
+      ...nativeProps,
+      className: (0, import_css30.cx)(
+        nativeProps.className,
+        (0, import_recipes24.td)({
+          size
+        })
+      )
+    }
+  );
+}
+
+// src/components/Tbody.tsx
+var import_recipes25 = require("@cerberus/styled-system/recipes");
+var import_css31 = require("@cerberus/styled-system/css");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function Tbody(props) {
+  const { decoration, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "tbody",
+    {
+      ...nativeProps,
+      className: (0, import_css31.cx)(
+        nativeProps.className,
+        (0, import_recipes25.tbody)({
+          decoration
+        })
+      )
+    }
+  );
+}
+
+// src/components/Tag.tsx
+var import_icons3 = require("@cerberus/icons");
+var import_css32 = require("@cerberus/styled-system/css");
+var import_recipes26 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function Tag(props) {
+  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
+  const palette = (props == null ? void 0 : props.palette) ?? "page";
+  const isClosable = Boolean(onClick);
+  const shape = isClosable ? "pill" : initShape;
+  const closableStyles = isClosable ? closableCss : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    "span",
+    {
+      ...nativeProps,
+      className: (0, import_css32.cx)(
+        nativeProps.className,
+        (0, import_recipes26.tag)({
+          gradient,
+          palette,
+          shape,
+          usage
+        }),
+        closableStyles
+      ),
+      children: [
+        props.children,
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          "button",
+          {
+            "aria-label": "Close",
+            className: (0, import_recipes26.iconButton)({
+              palette: "action",
+              usage: "filled",
+              size: "sm"
+            }),
+            onClick,
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons3.Close, {})
+          }
+        ) })
+      ]
+    }
+  );
+}
+var closableCss = (0, import_css32.css)({
+  bgColor: "action.bg.active",
+  color: "action.text.initial",
+  paddingInlineEnd: "0"
+});
+
+// src/components/Textarea.tsx
+var import_css33 = require("@cerberus/styled-system/css");
+var import_recipes27 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function Textarea(props) {
+  const { describedBy, ...nativeProps } = props;
+  const { invalid, ...fieldState } = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "textarea",
+    {
+      ...nativeProps,
+      ...fieldState,
+      ...describedBy && { "aria-describedby": describedBy },
+      ...invalid && { "aria-invalid": true },
+      className: (0, import_css33.cx)(
+        props.className,
+        (0, import_recipes27.input)().input,
+        (0, import_css33.css)({
+          pxi: "2",
+          py: "2",
+          resize: "vertical"
+        })
+      ),
+      rows: 4
+    }
+  );
+}
+
+// src/components/Toggle.tsx
+var import_css34 = require("@cerberus/styled-system/css");
+var import_patterns12 = require("@cerberus/styled-system/patterns");
+var import_recipes28 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function Toggle(props) {
+  const { size, describedBy, ...nativeProps } = props;
+  const styles = (0, import_recipes28.toggle)({ size });
+  const { invalid, ...state } = useFieldContext();
+  const Icon = $cerberusIcons.toggleChecked;
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    "span",
+    {
+      className: (0, import_css34.cx)("group", styles.track, (0, import_patterns12.hstack)()),
+      "data-checked": props.checked || props.defaultChecked,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          "input",
+          {
+            ...nativeProps,
+            ...state,
+            ...describedBy && { "aria-describedby": describedBy },
+            ...invalid && { "aria-invalid": true },
+            className: (0, import_css34.cx)("peer", styles.input),
+            role: "switch",
+            type: "checkbox"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          "span",
+          {
+            className: (0, import_css34.cx)(
+              styles.thumb,
+              (0, import_patterns12.vstack)({
+                justify: "center"
+              })
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/context/confirm-modal.tsx
+var import_react16 = require("react");
+var import_css35 = require("@cerberus/styled-system/css");
+var import_patterns13 = require("@cerberus/styled-system/patterns");
+
+// src/hooks/useModal.ts
+var import_react15 = require("react");
+function useModal() {
+  const modalRef = (0, import_react15.useRef)(null);
+  const show = (0, import_react15.useCallback)(() => {
+    var _a;
+    (_a = modalRef.current) == null ? void 0 : _a.showModal();
+  }, []);
+  const close = (0, import_react15.useCallback)(() => {
+    var _a;
+    (_a = modalRef.current) == null ? void 0 : _a.close();
+  }, []);
+  return (0, import_react15.useMemo)(() => {
+    return {
+      modalRef,
+      show,
+      close
+    };
+  }, [modalRef, show, close]);
+}
+
+// src/context/confirm-modal.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var ConfirmModalContext = (0, import_react16.createContext)(null);
+function ConfirmModal(props) {
+  const { modalRef, show, close } = useModal();
+  const resolveRef = (0, import_react16.useRef)(null);
+  const [content, setContent] = (0, import_react16.useState)(null);
+  const focusTrap = trapFocus(modalRef);
+  const ConfirmIcon = $cerberusIcons.confirmModal;
+  const palette = (0, import_react16.useMemo)(
+    () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
+    [content]
+  );
+  const handleChoice = (0, import_react16.useCallback)(
+    (e) => {
+      var _a, _b;
+      const target = e.currentTarget;
+      if (target.value === "true") {
+        (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, true);
+      }
+      (_b = resolveRef.current) == null ? void 0 : _b.call(resolveRef, false);
+      close();
+    },
+    [close]
+  );
+  const handleShow = (0, import_react16.useCallback)(
+    (options) => {
+      return new Promise((resolve) => {
+        setContent({ ...options, kind: options.kind || "non-destructive" });
+        show();
+        resolveRef.current = resolve;
+      });
+    },
+    [show]
+  );
+  const value = (0, import_react16.useMemo)(
+    () => ({
+      show: handleShow
+    }),
+    [handleShow]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(ConfirmModalContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          Show,
+          {
+            when: palette === "danger",
+            fallback: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ModalIcon, { palette: "action", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ConfirmIcon, { size: 24 }) }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ModalIcon, { palette: "danger", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ConfirmIcon, { size: 24 }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+        "div",
+        {
+          className: (0, import_patterns13.hstack)({
+            gap: "4"
+          }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              Button,
+              {
+                autoFocus: true,
+                className: (0, import_css35.css)({
+                  w: "1/2"
+                }),
+                name: "confirm",
+                onClick: handleChoice,
+                palette,
+                value: "true",
+                children: content == null ? void 0 : content.actionText
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              Button,
+              {
+                className: (0, import_css35.css)({
+                  w: "1/2"
+                }),
+                name: "cancel",
+                onClick: handleChoice,
+                usage: "outlined",
+                value: "false",
+                children: content == null ? void 0 : content.cancelText
+              }
+            )
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+function useConfirmModal() {
+  const context = (0, import_react16.useContext)(ConfirmModalContext);
+  if (context === null) {
+    throw new Error(
+      "useConfirmModal must be used within a ConfirmModal Provider"
+    );
+  }
+  return context;
+}
+
+// src/context/notification-center.tsx
+var import_react17 = require("react");
+var import_patterns14 = require("@cerberus/styled-system/patterns");
+var import_recipes29 = require("@cerberus/styled-system/recipes");
+var import_css36 = require("@cerberus/styled-system/css");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var NotificationsContext = (0, import_react17.createContext)(null);
+function NotificationCenter(props) {
+  const [activeNotifications, setActiveNotifications] = (0, import_react17.useState)([]);
+  const styles = (0, import_recipes29.notification)();
+  const handleNotify = (0, import_react17.useCallback)((options) => {
+    setActiveNotifications((prev) => {
+      const id = `${options.palette}:${prev.length + 1}`;
+      return [...prev, { ...options, id }];
+    });
+  }, []);
+  const handleClose = (0, import_react17.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_react17.useCallback)(() => {
+    setActiveNotifications((prev) => {
+      prev.forEach((item) => {
+        if (item.onClose) item.onClose();
+      });
+      return [];
+    });
+  }, []);
+  const value = (0, import_react17.useMemo)(
+    () => ({
+      notify: handleNotify
+    }),
+    [handleNotify]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(NotificationsContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: styles.center, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        Button,
+        {
+          className: (0, import_css36.cx)(styles.closeAll, (0, import_patterns14.animateIn)()),
+          onClick: handleCloseAll,
+          palette: "action",
+          shape: "rounded",
+          size: "sm",
+          usage: "text",
+          children: "Close all"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "div",
+        {
+          className: (0, import_patterns14.vstack)({
+            alignItems: "flex-end",
+            gap: "4"
+          }),
+          style: {
+            alignItems: "flex-end"
+          },
+          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+            Notification,
+            {
+              id: option.id,
+              onClose: handleClose,
+              open: true,
+              palette: option.palette,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(NotificationHeading, { palette: option.palette, children: option.heading }),
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(NotificationDescription, { palette: option.palette, children: option.description })
+              ]
+            },
+            option.id
+          ))
+        }
+      )
+    ] }) }) })
+  ] });
+}
+function useNotificationCenter() {
+  const context = (0, import_react17.useContext)(NotificationsContext);
+  if (!context) {
+    throw new Error(
+      "useNotificationCenter must be used within a NotificationsProvider"
+    );
+  }
+  return context;
+}
+
+// src/context/prompt-modal.tsx
+var import_react18 = require("react");
+var import_css37 = require("@cerberus/styled-system/css");
+var import_patterns15 = require("@cerberus/styled-system/patterns");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var PromptModalContext = (0, import_react18.createContext)(null);
+function PromptModal(props) {
+  const { modalRef, show, close } = useModal();
+  const resolveRef = (0, import_react18.useRef)(null);
+  const [content, setContent] = (0, import_react18.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react18.useState)("");
+  const focusTrap = trapFocus(modalRef);
+  const PromptIcon = $cerberusIcons.promptModal;
+  const isValid = (0, import_react18.useMemo)(
+    () => inputValue === (content == null ? void 0 : content.key),
+    [inputValue, content]
+  );
+  const palette = (0, import_react18.useMemo)(
+    () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
+    [content]
+  );
+  const handleChange = (0, import_react18.useCallback)(
+    (e) => {
+      setInputValue(e.currentTarget.value);
+    },
+    [content]
+  );
+  const handleChoice = (0, import_react18.useCallback)(
+    (e) => {
+      var _a;
+      const target = e.currentTarget;
+      if (target.value === "true") {
+        (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, inputValue);
+      }
+      close();
+    },
+    [inputValue, close]
+  );
+  const handleShow = (0, import_react18.useCallback)(
+    (options) => {
+      return new Promise((resolve) => {
+        setContent({ ...options, kind: options.kind || "non-destructive" });
+        show();
+        resolveRef.current = resolve;
+      });
+    },
+    [show]
+  );
+  const value = (0, import_react18.useMemo)(
+    () => ({
+      show: handleShow
+    }),
+    [handleShow]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(PromptModalContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          Show,
+          {
+            when: palette === "danger",
+            fallback: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalIcon, { palette: "action", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PromptIcon, { size: 24 }) }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalIcon, { palette: "danger", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PromptIcon, { size: 24 }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        "div",
+        {
+          className: (0, import_patterns15.vstack)({
+            alignItems: "flex-start",
+            mt: "4",
+            mb: "8"
+          }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Field, { invalid: !isValid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Label, { htmlFor: "confirm", size: "md", children: [
+              "Type",
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                "strong",
+                {
+                  className: (0, import_css37.css)({
+                    textTransform: "uppercase"
+                  }),
+                  children: content == null ? void 0 : content.key
+                }
+              ),
+              "to confirm"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              Input,
+              {
+                id: "confirm",
+                name: "confirm",
+                onChange: handleChange,
+                type: "text"
+              }
+            )
+          ] })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        "div",
+        {
+          className: (0, import_patterns15.hstack)({
+            justifyContent: "stretch",
+            gap: "4"
+          }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              Button,
+              {
+                autoFocus: true,
+                className: (0, import_css37.css)({
+                  w: "1/2"
+                }),
+                disabled: !isValid,
+                name: "confirm",
+                onClick: handleChoice,
+                palette,
+                value: "true",
+                children: content == null ? void 0 : content.actionText
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              Button,
+              {
+                className: (0, import_css37.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_react18.useContext)(PromptModalContext);
+  if (context === null) {
+    throw new Error("usePromptModal must be used within a PromptModal Provider");
+  }
+  return context;
+}
+
+// src/context/theme.tsx
+var import_react20 = require("react");
+
+// src/hooks/useTheme.ts
+var import_react19 = require("react");
+function useTheme(defaultTheme = "cerberus", defaultColorMode = "light") {
+  const [theme, setTheme] = (0, import_react19.useState)(defaultTheme);
+  const [colorMode, setColorMode] = (0, import_react19.useState)(defaultColorMode);
+  const handleThemeChange = (0, import_react19.useCallback)((newTheme) => {
+    setTheme(newTheme);
+    localStorage.setItem(THEME_KEY, newTheme);
+  }, []);
+  const handleColorModeChange = (0, import_react19.useCallback)(() => {
+    setColorMode((prev) => {
+      const newMode = prev === "light" ? "dark" : "light";
+      localStorage.setItem(MODE_KEY, newMode);
+      return newMode;
+    });
+  }, []);
+  (0, import_react19.useLayoutEffect)(() => {
+    const theme2 = localStorage.getItem(THEME_KEY);
+    if (theme2) {
+      setTheme(theme2);
+    }
+  }, []);
+  (0, import_react19.useLayoutEffect)(() => {
+    const mode = localStorage.getItem(MODE_KEY);
+    if (mode) {
+      setColorMode(mode);
+    }
+  }, []);
+  (0, import_react19.useEffect)(() => {
+    const root = document.documentElement;
+    root.dataset.theme = theme;
+  }, [theme]);
+  (0, import_react19.useEffect)(() => {
+    const root = document.documentElement;
+    root.dataset.colorMode = colorMode;
+  }, [colorMode]);
+  return (0, import_react19.useMemo)(
+    () => ({
+      theme,
+      mode: colorMode,
+      updateTheme: handleThemeChange,
+      updateMode: handleColorModeChange
+    }),
+    [theme, colorMode, handleThemeChange, handleColorModeChange]
+  );
+}
+
+// src/context/theme.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var THEME_KEY = "cerberus-theme";
+var MODE_KEY = "cerberus-mode";
+var ThemeContext = (0, import_react20.createContext)(
+  null
+);
+function ThemeProvider(props) {
+  const state = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ThemeContext.Provider, { value: state, children: props.children });
+}
+function useThemeContext() {
+  const context = (0, import_react20.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useThemeContext must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+// src/hooks/useToggle.ts
+var import_react21 = require("react");
+function useToggle(options) {
+  const [checked, setChecked] = (0, import_react21.useState)((options == null ? void 0 : options.checked) ?? "");
+  const onChange = options == null ? void 0 : options.onChange;
+  const handleChange = (0, import_react21.useCallback)(
+    (e) => {
+      const target = e.currentTarget;
+      setChecked((prev) => {
+        return prev === target.value ? "" : target.value;
+      });
+      onChange == null ? void 0 : onChange(e);
+    },
+    [onChange]
+  );
+  return (0, import_react21.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
+}
+
+// src/index.ts
+__reExport(src_exports, require("@dnd-kit/core"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  $cerberusIcons,
+  Button,
+  Checkbox,
+  ConfirmModal,
+  Droppable,
+  FeatureFlag,
+  FeatureFlags,
+  Field,
+  FieldMessage,
+  FileStatus,
+  FileUploader,
+  IconButton,
+  Input,
+  Label,
+  MODE_KEY,
+  Modal,
+  ModalDescription,
+  ModalHeader,
+  ModalHeading,
+  ModalIcon,
+  NavMenu,
+  NavMenuLink,
+  NavMenuList,
+  NavMenuTrigger,
+  Notification,
+  NotificationCenter,
+  NotificationDescription,
+  NotificationHeading,
+  Option,
+  Portal,
+  ProgressBar,
+  PromptModal,
+  Radio,
+  Select,
+  Show,
+  THEME_KEY,
+  Tab,
+  TabList,
+  TabPanel,
+  Table,
+  Tabs,
+  TabsContext,
+  Tag,
+  Tbody,
+  Td,
+  Textarea,
+  Th,
+  Thead,
+  ThemeProvider,
+  Toggle,
+  Tr,
+  createNavTriggerProps,
+  defineIcons,
+  getPosition,
+  processStatus,
+  trapFocus,
+  useConfirmModal,
+  useFeatureFlags,
+  useFieldContext,
+  useModal,
+  useNavMenuContext,
+  useNotificationCenter,
+  usePromptModal,
+  useTabsContext,
+  useTabsKeyboardNavigation,
+  useTheme,
+  useThemeContext,
+  useToggle,
+  ...require("@dnd-kit/core")
+});
+//# sourceMappingURL=index.cjs.map