@cerberus-design/react 0.14.2 → 0.15.0

package/build/legacy/components/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/**\n * This module contains the Modal root component for a customizable modal.\n * @module\n */\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n  return (\n    <dialog\n      {...props}\n      className={cx(props.className, modal().dialog)}\n      ref={ref}\n    />\n  )\n}\n\n/**\n * The Modal component is the root element for a customizable modal.\n * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * const { modalRef } = useModal()\n *\n * <Modal ref={modalRef}>\n *  <Avatar icon={SomeIcon} />\n *  <ModalHeader>\n *    <ModalHeading>Modal Heading</ModalHeading>\n *    <ModalDescription>Modal description</ModalDescription>\n *  </ModalHeader>\n *\n *  {props.children}\n * </Modal>\n * ```\n */\nexport const Modal = forwardRef(ModalEl)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AACtB,mBAAmE;AAa/D;AAFJ,SAAS,QAAQ,OAAmB,KAAsC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,MAAM,eAAW,sBAAM,EAAE,MAAM;AAAA,MAC7C;AAAA;AAAA,EACF;AAEJ;AAoBO,IAAM,YAAQ,yBAAW,OAAO;","names":[]}
+{"version":3,"sources":["../../../src/components/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/**\n * This module contains the Modal root component for a customizable modal.\n * @module\n */\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n  return (\n    <dialog\n      {...props}\n      className={cx(props.className, modal().dialog)}\n      ref={ref}\n    />\n  )\n}\n\n/**\n * @deprecated use `Dialog` instead\n */\nexport const Modal = forwardRef(ModalEl)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AACtB,mBAAmE;AAa/D;AAFJ,SAAS,QAAQ,OAAmB,KAAsC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,MAAM,eAAW,sBAAM,EAAE,MAAM;AAAA,MAC7C;AAAA;AAAA,EACF;AAEJ;AAKO,IAAM,YAAQ,yBAAW,OAAO;","names":[]}

package/build/legacy/components/ModalDescription.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalDescription component for a customizable modal.\n * @module\n */\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalDescription component is a heading element for a customizable modal.\n * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * <Modal>\n *   <ModalDescription>Modal Heading</ModalDescription>\n * </Modal>\n * ```\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n  return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AAqBb;AADF,SAAS,iBAAiB,OAA8B;AAC7D,SAAO,4CAAC,OAAG,GAAG,OAAO,eAAW,eAAG,MAAM,eAAW,sBAAM,EAAE,WAAW,GAAG;AAC5E;","names":[]}
+{"version":3,"sources":["../../../src/components/ModalDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalDescription component for a customizable modal.\n * @module\n */\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * @deprecated use `DialogDescription` instead\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n  return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AAcb;AADF,SAAS,iBAAiB,OAA8B;AAC7D,SAAO,4CAAC,OAAG,GAAG,OAAO,eAAW,eAAG,MAAM,eAAW,sBAAM,EAAE,WAAW,GAAG;AAC5E;","names":[]}

package/build/legacy/components/ModalHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * The ModalHeader component is a header element for a customizable modal.\n * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * <Modal>\n *   <ModalHeader>\n *     <h2>Modal Heading</h2>\n *   </ModalHeader>\n * </Modal>\n * ```\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n  return (\n    <div\n      {...props}\n      className={cx(\n        props.className,\n        vstack({\n          alignItems: 'flex-start',\n          gap: 'md',\n          position: 'relative',\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,sBAAuB;AAwBnB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,MAAM;AAAA,YACN,wBAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * @deprecated there is no replacement for this component\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n  return (\n    <div\n      {...props}\n      className={cx(\n        props.className,\n        vstack({\n          alignItems: 'flex-start',\n          gap: 'md',\n          position: 'relative',\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,sBAAuB;AAenB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,MAAM;AAAA,YACN,wBAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/ModalHeading.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeading component for a customizable modal.\n * @module\n */\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalHeading component is a heading element for a customizable modal.\n * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * <Modal>\n *   <ModalHeading>Modal Heading</ModalHeading>\n * </Modal>\n * ```\n */\nexport function ModalHeading(props: ModalHeadingProps) {\n  return <p {...props} className={cx(props.className, modal().heading)} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AAqBb;AADF,SAAS,aAAa,OAA0B;AACrD,SAAO,4CAAC,OAAG,GAAG,OAAO,eAAW,eAAG,MAAM,eAAW,sBAAM,EAAE,OAAO,GAAG;AACxE;","names":[]}
+{"version":3,"sources":["../../../src/components/ModalHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeading component for a customizable modal.\n * @module\n */\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * @deprecated use `DialogHeading` instead\n */\nexport function ModalHeading(props: ModalHeadingProps) {\n  return <p {...props} className={cx(props.className, modal().heading)} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AAcb;AADF,SAAS,aAAa,OAA0B;AACrD,SAAO,4CAAC,OAAG,GAAG,OAAO,eAAW,eAAG,MAAM,eAAW,sBAAM,EAAE,OAAO,GAAG;AACxE;","names":[]}

package/build/legacy/components/Notification.cjs

@@ -27,172 +27,7 @@ module.exports = __toCommonJS(Notification_exports);
 var import_css = require("@cerberus/styled-system/css");
 var import_patterns = require("@cerberus/styled-system/patterns");
 var import_recipes = require("@cerberus/styled-system/recipes");
-var import_react = require("react");
-
-// src/config/cerbIcons.ts
-var import_icons = require("@cerberus/icons");
-
-// src/config/icons/checkbox.icons.tsx
-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) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
-    }
-  );
-}
-
-// src/components/AnimatingUploadIcon.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function AnimatingUploadIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "svg",
-    {
-      "aria-hidden": "true",
-      xmlns: "http://www.w3.org/2000/svg",
-      width: props.size ?? "1em",
-      height: props.size ?? "1em",
-      viewBox: "0 0 24 24",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "g",
-        {
-          fill: "none",
-          stroke: "currentColor",
-          strokeLinecap: "square",
-          strokeLinejoin: "round",
-          strokeWidth: 1.5,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "path",
-              {
-                "data-name": "animating-trail",
-                strokeDasharray: "2 4",
-                strokeDashoffset: 6,
-                d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "animate",
-                  {
-                    attributeName: "stroke-dashoffset",
-                    dur: "0.45s",
-                    repeatCount: "indefinite",
-                    values: "6;0"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "path",
-              {
-                "data-name": "half-circle",
-                strokeDasharray: 32,
-                strokeDashoffset: 32,
-                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "animate",
-                  {
-                    fill: "freeze",
-                    attributeName: "stroke-dashoffset",
-                    begin: "0.075s",
-                    dur: "0.3s",
-                    values: "32;0"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "svg",
-              {
-                "aria-hidden": "true",
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "0.8em",
-                height: "0.8em",
-                x: "27%",
-                y: "27%",
-                viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "polygon",
-                  {
-                    fill: "currentColor",
-                    stroke: "currentColor",
-                    strokeWidth: 0.8,
-                    opacity: "1",
-                    points: "3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 ",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      "animate",
-                      {
-                        fill: "freeze",
-                        attributeName: "opacity",
-                        values: "1;0;1",
-                        dur: "2s",
-                        repeatCount: "indefinite"
-                      }
-                    )
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-
-// src/config/cerbIcons.ts
-var defaultIcons = {
-  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/config/defineIcons.ts
-var $cerberusIcons = defaultIcons;
+var import_react2 = require("react");
 
 // src/aria-helpers/trap-focus.aria.ts
 function trapFocus(modalRef) {
@@ -220,24 +55,39 @@ function trapFocus(modalRef) {
   };
 }
 
+// src/context/cerberus.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CerberusContext = (0, import_react.createContext)(null);
+function useCerberusContext() {
+  const context = (0, import_react.useContext)(CerberusContext);
+  if (!context) {
+    throw new Error("useCerberus must be used within a CerberusProvider");
+  }
+  return context;
+}
+
 // src/components/Notification.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = 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_runtime3.jsx)(Icon, {});
+  const Icon = icons[key];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, {});
 }
 function Notification(props) {
   const { children, palette, onClose, ...nativeProps } = props;
-  const ref = (0, import_react.useRef)(null);
+  const ref = (0, import_react2.useRef)(null);
   const onKeyDown = trapFocus(ref);
   const styles = (0, import_recipes.notification)({ palette });
-  const { close: CloseIcon } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  const { icons } = useCerberusContext();
+  const { close: CloseIcon } = icons;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "dialog",
     {
       ...nativeProps,
+      "data-placement": "left",
       className: (0, import_css.cx)(
         nativeProps.className,
         (0, import_patterns.hstack)({
@@ -249,8 +99,8 @@ function Notification(props) {
       onKeyDown,
       ref,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MatchNotificationIcon, { palette }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MatchNotificationIcon, { palette }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "div",
           {
             className: (0, import_patterns.vstack)({
@@ -261,14 +111,14 @@ function Notification(props) {
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "button",
           {
             "aria-label": "Close",
             className: styles.close,
             onClick: onClose,
             value: props.id,
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CloseIcon, {})
           }
         )
       ]

package/build/legacy/components/Notification.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Notification.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts","../../../src/aria-helpers/trap-focus.aria.ts"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n  useRef,\n  type DialogHTMLAttributes,\n  type PropsWithChildren,\n  type MouseEvent,\n} from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n  const palette = (props.palette || 'info') as\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n  const key = `${palette}Notification` as keyof typeof $cerberusIcons\n  const Icon = $cerberusIcons[key]\n  return <Icon />\n}\n\nexport interface NotificationBaseProps\n  extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n  /**\n   * The unique id of the notification. Required for the onClose callback.\n   */\n  id: string\n  /**\n   * Called when the close button is clicked.\n   */\n  onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n *  <NotificationHeading>Info Notification</NotificationHeading>\n *  <NotificationDescription>\n *   This is a description with a <a href=\"#\">link</a> in the message.\n *  </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n  const { children, palette, onClose, ...nativeProps } = props\n  const ref = useRef<HTMLDialogElement>(null)\n  const onKeyDown = trapFocus(ref)\n  const styles = notification({ palette })\n  const { close: CloseIcon } = $cerberusIcons\n\n  return (\n    <dialog\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          position: 'relative',\n          gap: '4',\n        }),\n        styles.dialog,\n      )}\n      onKeyDown={onKeyDown}\n      ref={ref}\n    >\n      <span className={styles.icon}>\n        <MatchNotificationIcon palette={palette} />\n      </span>\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0',\n          py: '2',\n        })}\n      >\n        {children}\n      </div>\n\n      <button\n        aria-label=\"Close\"\n        className={styles.close}\n        onClick={onClose}\n        value={props.id}\n      >\n        <CloseIcon />\n      </button>\n    </dialog>\n  )\n}\n","import {\n  Calendar,\n  Checkmark,\n  CheckmarkOutline,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  Close,\n  CloudUpload,\n  Information,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningAlt,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  accordionIndicator?: IconType\n  avatar?: IconType\n  calendar?: IconType\n  calendarPrev?: IconType\n  calendarNext?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  waitingFileUploader?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  accordionIndicator: ChevronDown,\n  avatar: UserFilled,\n  calendar: Calendar,\n  calendarPrev: ChevronLeft,\n  calendarNext: ChevronRight,\n  checkbox: CheckmarkIcon,\n  close: Close,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  waitingFileUploader: CloudUpload,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n  infoNotification: Information,\n  successNotification: CheckmarkOutline,\n  warningNotification: WarningAlt,\n  dangerNotification: WarningFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\nexport type CheckboxIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\nexport type IndeterminateIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={props.size ?? '1em'}\n      height={props.size ?? '1em'}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"square\"\n        strokeLinejoin=\"round\"\n        strokeWidth={1.5}\n      >\n        <path\n          data-name=\"animating-trail\"\n          strokeDasharray=\"2 4\"\n          strokeDashoffset={6}\n          d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n        >\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.45s\"\n            repeatCount=\"indefinite\"\n            values=\"6;0\"\n          ></animate>\n        </path>\n\n        <path\n          data-name=\"half-circle\"\n          strokeDasharray={32}\n          strokeDashoffset={32}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            begin=\"0.075s\"\n            dur=\"0.3s\"\n            values=\"32;0\"\n          ></animate>\n        </path>\n\n        <svg\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"0.8em\"\n          height=\"0.8em\"\n          x=\"27%\"\n          y=\"27%\"\n          viewBox=\"0 0 24 24\"\n        >\n          <polygon\n            fill=\"currentColor\"\n            stroke=\"currentColor\"\n            strokeWidth={0.8}\n            opacity=\"1\"\n            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 \"\n          >\n            <animate\n              fill=\"freeze\"\n              attributeName=\"opacity\"\n              values=\"1;0;1\"\n              dur=\"2s\"\n              repeatCount=\"indefinite\"\n            ></animate>\n          </polygon>\n        </svg>\n      </g>\n    </svg>\n  )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n  _validateIconsProperties(icons)\n  $cerberusIcons = {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons>\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n  modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n  const focusableElements =\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  const focusable = Array.from(\n    modalRef.current?.querySelectorAll(focusableElements) ?? [],\n  )\n  const firstFocusable = focusable[0] as HTMLElement\n  const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          lastFocusable.focus()\n          event.preventDefault()\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          firstFocusable.focus()\n          event.preventDefault()\n        }\n      }\n    }\n  }\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/Notification.tsx","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/context/cerberus.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n  useRef,\n  type DialogHTMLAttributes,\n  type PropsWithChildren,\n  type MouseEvent,\n} from 'react'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n  const { icons } = useCerberusContext()\n  const palette = (props.palette || 'info') as\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n  const key = `${palette}Notification` as keyof typeof icons\n  const Icon = icons[key]\n  return <Icon />\n}\n\nexport interface NotificationBaseProps\n  extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n  /**\n   * The unique id of the notification. Required for the onClose callback.\n   */\n  id: string\n  /**\n   * Called when the close button is clicked.\n   */\n  onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n *  <NotificationHeading>Info Notification</NotificationHeading>\n *  <NotificationDescription>\n *   This is a description with a <a href=\"#\">link</a> in the message.\n *  </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n  const { children, palette, onClose, ...nativeProps } = props\n  const ref = useRef<HTMLDialogElement>(null)\n\n  const onKeyDown = trapFocus(ref)\n  const styles = notification({ palette })\n\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon } = icons\n\n  return (\n    <dialog\n      {...nativeProps}\n      data-placement=\"left\"\n      className={cx(\n        nativeProps.className,\n        hstack({\n          position: 'relative',\n          gap: '4',\n        }),\n        styles.dialog,\n      )}\n      onKeyDown={onKeyDown}\n      ref={ref}\n    >\n      <span className={styles.icon}>\n        <MatchNotificationIcon palette={palette} />\n      </span>\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0',\n          py: '2',\n        })}\n      >\n        {children}\n      </div>\n\n      <button\n        aria-label=\"Close\"\n        className={styles.close}\n        onClick={onClose}\n        value={props.id}\n      >\n        <CloseIcon />\n      </button>\n    </dialog>\n  )\n}\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n  modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n  const focusableElements =\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  const focusable = Array.from(\n    modalRef.current?.querySelectorAll(focusableElements) ?? [],\n  )\n  const firstFocusable = focusable[0] as HTMLElement\n  const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          lastFocusable.focus()\n          event.preventDefault()\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          firstFocusable.focus()\n          event.preventDefault()\n        }\n      }\n    }\n  }\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAmB;AACnB,sBAA+B;AAC/B,qBAGO;AACP,IAAAA,gBAKO;;;ACXA,SAAS,UACd,UACyC;AAJ3C;AAKE,QAAM,oBACJ;AACF,QAAM,YAAY,MAAM;AAAA,MACtB,cAAS,YAAT,mBAAkB,iBAAiB,uBAAsB,CAAC;AAAA,EAC5D;AACA,QAAM,iBAAiB,UAAU,CAAC;AAClC,QAAM,gBAAgB,UAAU,UAAU,SAAS,CAAC;AAEpD,SAAO,SAAS,cAAc,OAAyC;AACrE,QAAI,MAAM,QAAQ,OAAO;AACvB,UAAI,MAAM,UAAU;AAClB,YAAI,SAAS,kBAAkB,gBAAgB;AAC7C,wBAAc,MAAM;AACpB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF,OAAO;AACL,YAAI,SAAS,kBAAkB,eAAe;AAC5C,yBAAe,MAAM;AACrB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;;;AC1BA,mBAAkE;AAyB9D;AAfJ,IAAM,sBAAkB,4BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,yBAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;AFZS,IAAAC,sBAAA;AATT,SAAS,sBAAsB,OAAiC;AAC9D,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,UAAW,MAAM,WAAW;AAKlC,QAAM,MAAM,GAAG,OAAO;AACtB,QAAM,OAAO,MAAM,GAAG;AACtB,SAAO,6CAAC,QAAK;AACf;AA8BO,SAAS,aAAa,OAA6C;AACxE,QAAM,EAAE,UAAU,SAAS,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,UAAM,sBAA0B,IAAI;AAE1C,QAAM,YAAY,UAAU,GAAG;AAC/B,QAAM,aAAS,6BAAa,EAAE,QAAQ,CAAC;AAEvC,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,kBAAe;AAAA,MACf,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,wBAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,qDAAC,UAAK,WAAW,OAAO,MACtB,uDAAC,yBAAsB,SAAkB,GAC3C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,wBAAO;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,IAAI;AAAA,YACN,CAAC;AAAA,YAEA;AAAA;AAAA,QACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,OAAO,MAAM;AAAA,YAEb,uDAAC,aAAU;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["import_react","import_jsx_runtime"]}

package/build/legacy/components/Select.cjs

@@ -29,174 +29,9 @@ var import_css = require("@cerberus/styled-system/css");
 var import_patterns = require("@cerberus/styled-system/patterns");
 var import_recipes = require("@cerberus/styled-system/recipes");
 
-// src/config/cerbIcons.ts
-var import_icons = require("@cerberus/icons");
-
-// src/config/icons/checkbox.icons.tsx
-var import_jsx_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) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
-    }
-  );
-}
-
-// src/components/AnimatingUploadIcon.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function AnimatingUploadIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "svg",
-    {
-      "aria-hidden": "true",
-      xmlns: "http://www.w3.org/2000/svg",
-      width: props.size ?? "1em",
-      height: props.size ?? "1em",
-      viewBox: "0 0 24 24",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "g",
-        {
-          fill: "none",
-          stroke: "currentColor",
-          strokeLinecap: "square",
-          strokeLinejoin: "round",
-          strokeWidth: 1.5,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "path",
-              {
-                "data-name": "animating-trail",
-                strokeDasharray: "2 4",
-                strokeDashoffset: 6,
-                d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "animate",
-                  {
-                    attributeName: "stroke-dashoffset",
-                    dur: "0.45s",
-                    repeatCount: "indefinite",
-                    values: "6;0"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "path",
-              {
-                "data-name": "half-circle",
-                strokeDasharray: 32,
-                strokeDashoffset: 32,
-                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "animate",
-                  {
-                    fill: "freeze",
-                    attributeName: "stroke-dashoffset",
-                    begin: "0.075s",
-                    dur: "0.3s",
-                    values: "32;0"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "svg",
-              {
-                "aria-hidden": "true",
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "0.8em",
-                height: "0.8em",
-                x: "27%",
-                y: "27%",
-                viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "polygon",
-                  {
-                    fill: "currentColor",
-                    stroke: "currentColor",
-                    strokeWidth: 0.8,
-                    opacity: "1",
-                    points: "3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 ",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      "animate",
-                      {
-                        fill: "freeze",
-                        attributeName: "opacity",
-                        values: "1;0;1",
-                        dur: "2s",
-                        repeatCount: "indefinite"
-                      }
-                    )
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-
-// src/config/cerbIcons.ts
-var defaultIcons = {
-  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/config/defineIcons.ts
-var $cerberusIcons = defaultIcons;
-
 // src/context/field.tsx
 var import_react = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var FieldContext = (0, import_react.createContext)(null);
 function useFieldContext() {
   const context = (0, import_react.useContext)(FieldContext);
@@ -206,28 +41,41 @@ function useFieldContext() {
   return context;
 }
 
-// src/components/Show.tsx
+// src/context/cerberus.tsx
 var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CerberusContext = (0, import_react2.createContext)(null);
+function useCerberusContext() {
+  const context = (0, import_react2.useContext)(CerberusContext);
+  if (!context) {
+    throw new Error("useCerberus must be used within a CerberusProvider");
+  }
+  return context;
+}
+
+// src/components/Show.tsx
+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/Select.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Select(props) {
   const { describedBy, size, ...nativeProps } = props;
   const { invalid, ...fieldStates } = useFieldContext();
-  const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons;
+  const { icons } = useCerberusContext();
+  const { invalid: InvalidIcon, selectArrow: SelectArrow } = icons;
   const styles = (0, import_recipes.select)({
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "select",
       {
         ...nativeProps,
@@ -237,7 +85,7 @@ function Select(props) {
         className: styles.input
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "span",
       {
         className: (0, import_css.cx)(
@@ -247,22 +95,22 @@ function Select(props) {
           })
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "span",
             {
               ...invalid && { "data-invalid": true },
               className: styles.stateIcon,
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InvalidIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InvalidIcon, {})
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectArrow, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectArrow, {}) })
         ]
       }
     )
   ] });
 }
 function Option(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { ...props });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {