@cerberus-design/react 0.14.2-next-2f75188 → 0.14.2-next-f58c1be

package/build/legacy/context/cta-modal.cjs

@@ -27,10 +27,6 @@ __export(cta_modal_exports, {
 module.exports = __toCommonJS(cta_modal_exports);
 var import_react6 = require("react");
 
-// src/components/Portal.tsx
-var import_react = require("@ark-ui/react");
-var Portal = import_react.Portal;
-
 // src/components/Button.tsx
 var import_css = require("@cerberus/styled-system/css");
 var import_recipes = require("@cerberus/styled-system/recipes");
@@ -53,133 +49,28 @@ function Button(props) {
   );
 }
 
-// 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/Show.tsx
-var import_react2 = require("react");
+var import_react = 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_react.useMemo)(() => when ?? false, [when]);
+  return (0, import_react.useMemo)(() => {
     if (condition) return children;
     return fallback ?? null;
   }, [condition, children, fallback]);
 }
 
-// src/components/Modal.tsx
+// src/components/Avatar.tsx
 var import_css2 = require("@cerberus/styled-system/css");
-var import_recipes2 = require("@cerberus/styled-system/recipes");
-var import_react3 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function ModalEl(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "dialog",
-    {
-      ...props,
-      className: (0, import_css2.cx)(props.className, (0, import_recipes2.modal)().dialog),
-      ref
-    }
-  );
-}
-var Modal = (0, import_react3.forwardRef)(ModalEl);
-
-// src/hooks/useModal.ts
-var import_react4 = require("react");
-function useModal() {
-  const modalRef = (0, import_react4.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
-  const show = (0, import_react4.useCallback)(() => {
-    var _a;
-    (_a = modalRef.current) == null ? void 0 : _a.showModal();
-    setIsOpen(true);
-  }, []);
-  const close = (0, import_react4.useCallback)(() => {
-    var _a;
-    (_a = modalRef.current) == null ? void 0 : _a.close();
-    setIsOpen(false);
-  }, []);
-  return (0, import_react4.useMemo)(() => {
-    return {
-      modalRef,
-      show,
-      close,
-      isOpen
-    };
-  }, [modalRef, show, close, isOpen]);
-}
-
-// src/components/ModalHeader.tsx
-var import_css3 = require("@cerberus/styled-system/css");
 var import_patterns = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function ModalHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "div",
-    {
-      ...props,
-      className: (0, import_css3.cx)(
-        props.className,
-        (0, import_patterns.vstack)({
-          alignItems: "flex-start",
-          gap: "md",
-          position: "relative"
-        })
-      )
-    }
-  );
-}
-
-// src/components/ModalHeading.tsx
-var import_css4 = require("@cerberus/styled-system/css");
-var import_recipes3 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function ModalHeading(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { ...props, className: (0, import_css4.cx)(props.className, (0, import_recipes3.modal)().heading) });
-}
-
-// src/components/ModalDescription.tsx
-var import_css5 = require("@cerberus/styled-system/css");
-var import_recipes4 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function ModalDescription(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { ...props, className: (0, import_css5.cx)(props.className, (0, import_recipes4.modal)().description) });
-}
-
-// src/components/Avatar.tsx
-var import_css6 = require("@cerberus/styled-system/css");
-var import_patterns2 = require("@cerberus/styled-system/patterns");
-var import_recipes5 = require("@cerberus/styled-system/recipes");
+var import_recipes2 = require("@cerberus/styled-system/recipes");
 
 // src/context/cerberus.tsx
-var import_react5 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var CerberusContext = (0, import_react5.createContext)(null);
+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_react5.useContext)(CerberusContext);
+  const context = (0, import_react2.useContext)(CerberusContext);
   if (!context) {
     throw new Error("useCerberus must be used within a CerberusProvider");
   }
@@ -187,7 +78,7 @@ function useCerberusContext() {
 }
 
 // src/components/Avatar.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Avatar(props) {
   const {
     ariaLabel,
@@ -203,28 +94,28 @@ function Avatar(props) {
   const { icons } = useCerberusContext();
   const { avatar: AvatarIcon } = icons;
   const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
       ...nativeProps,
-      className: (0, import_css6.cx)(
+      className: (0, import_css2.cx)(
         nativeProps.className,
-        (0, import_recipes5.avatar)({ gradient, size }),
-        (0, import_patterns2.circle)()
+        (0, import_recipes2.avatar)({ gradient, size }),
+        (0, import_patterns.circle)()
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         Show,
         {
           when: Boolean(src) || Boolean(as),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Show,
             {
               when: Boolean(initials),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 Show,
                 {
                   when: Boolean(icon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     AvatarIcon,
                     {
                       size: iconSizeMap[size]
@@ -236,15 +127,15 @@ function Avatar(props) {
               children: initials
             }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Show,
             {
               when: Boolean(as),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "img",
                 {
                   alt: props.ariaLabel,
-                  className: (0, import_css6.css)({
+                  className: (0, import_css2.css)({
                     h: "full",
                     objectFit: "cover",
                     w: "full"
@@ -275,20 +166,72 @@ var iconSizeMap = {
   "4xl": 32
 };
 
+// src/context/cta-modal.tsx
+var import_jsx = require("@cerberus/styled-system/jsx");
+var import_css6 = require("@cerberus/styled-system/css");
+var import_jsx2 = require("@cerberus/styled-system/jsx");
+
+// src/components/Dialog.tsx
+var import_react4 = require("@ark-ui/react");
+var import_recipes3 = require("@cerberus/styled-system/recipes");
+
+// src/components/Portal.tsx
+var import_react3 = require("@ark-ui/react");
+var Portal = import_react3.Portal;
+
+// src/components/Dialog.tsx
+var import_css3 = require("@cerberus/styled-system/css");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function DialogProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.Dialog.Root, { ...props });
+}
+function Dialog(props) {
+  const { size, ...contentProps } = props;
+  const styles = (0, import_recipes3.dialog)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogBackdrop, { className: styles.backdrop }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogPositioner, { className: styles.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogContent, { className: styles.content, ...contentProps }) })
+  ] });
+}
+function DialogHeading(props) {
+  const styles = (0, import_recipes3.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.Dialog.Title, { ...props, className: (0, import_css3.cx)(props.className, styles.title) });
+}
+function DialogDescription(props) {
+  const styles = (0, import_recipes3.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react4.Dialog.Description,
+    {
+      ...props,
+      className: (0, import_css3.cx)(props.className, styles.description)
+    }
+  );
+}
+var DialogTrigger = import_react4.Dialog.Trigger;
+var DialogCloseTrigger = import_react4.Dialog.CloseTrigger;
+var DialogBackdrop = import_react4.Dialog.Backdrop;
+var DialogPositioner = import_react4.Dialog.Positioner;
+var DialogContent = import_react4.Dialog.Content;
+
+// src/components/Dialog.client.tsx
+var import_react5 = require("@ark-ui/react");
+var import_recipes5 = require("@cerberus/styled-system/recipes");
+var import_css5 = require("@cerberus/styled-system/css");
+
 // src/components/IconButton.tsx
-var import_css7 = require("@cerberus/styled-system/css");
-var import_recipes6 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_css4 = require("@cerberus/styled-system/css");
+var import_recipes4 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function IconButton(props) {
   const { ariaLabel, palette, usage, size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "button",
     {
       ...nativeProps,
       "aria-label": ariaLabel ?? "Icon Button",
-      className: (0, import_css7.cx)(
+      className: (0, import_css4.cx)(
         nativeProps.className,
-        (0, import_recipes6.iconButton)({
+        (0, import_recipes4.iconButton)({
           palette,
           usage,
           size
@@ -298,20 +241,42 @@ function IconButton(props) {
   );
 }
 
+// src/components/Dialog.client.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function DialogCloseIconTrigger(props) {
+  const { icons } = useCerberusContext();
+  const { close: CloseIcon } = icons;
+  const styles = (0, import_recipes5.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react5.Dialog.CloseTrigger,
+    {
+      ...props,
+      className: (0, import_css5.cx)(props.className, styles.closeTrigger),
+      asChild: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        IconButton,
+        {
+          ariaLabel: "Close dialog",
+          palette: "action",
+          size: "lg",
+          usage: "ghost",
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, {})
+        }
+      )
+    }
+  );
+}
+
 // src/context/cta-modal.tsx
-var import_jsx = require("@cerberus/styled-system/jsx");
-var import_css8 = require("@cerberus/styled-system/css");
-var import_jsx2 = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var CTAModalContext = (0, import_react6.createContext)(null);
 function CTAModal(props) {
   var _a, _b;
-  const { modalRef, show, close } = useModal();
+  const [open, setOpen] = (0, import_react6.useState)(false);
   const [content, setContent] = (0, import_react6.useState)(null);
-  const focusTrap = trapFocus(modalRef);
   const confirmIcon = content == null ? void 0 : content.icon;
   const { icons } = useCerberusContext();
-  const { close: CloseIcon, confirmModal: FallbackIcon } = icons;
+  const { confirmModal: FallbackIcon } = icons;
   const handleShow = (0, import_react6.useCallback)(
     (options) => {
       const maxActions = 2;
@@ -321,9 +286,9 @@ function CTAModal(props) {
         );
       }
       setContent({ ...options });
-      show();
+      setOpen(true);
     },
-    [show]
+    [setOpen]
   );
   const handleActionClick = (0, import_react6.useCallback)(
     (event) => {
@@ -331,9 +296,9 @@ function CTAModal(props) {
       const action = content == null ? void 0 : content.actions[Number(index)];
       const { onClick } = action || {};
       onClick == null ? void 0 : onClick(event);
-      close();
+      setOpen(false);
     },
-    [content, close]
+    [content, setOpen]
   );
   const value = (0, import_react6.useMemo)(
     () => ({
@@ -341,48 +306,36 @@ function CTAModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(CTAModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CTAModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "span",
-        {
-          className: (0, import_css8.css)({
-            padding: "md",
-            position: "absolute",
-            right: 0,
-            top: 0,
-            zIndex: "decorator"
-          }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon, {}) })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Dialog, { size: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogCloseIconTrigger, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             Avatar,
             {
               ariaLabel: "",
               gradient: "charon-light",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 Show,
                 {
                   when: Boolean(confirmIcon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FallbackIcon, { size: 24 }),
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FallbackIcon, { size: 24 }),
                   children: confirmIcon
                 }
               ),
               src: ""
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Button,
           {
             "data-index": index,
-            className: (0, import_css8.css)({
+            className: (0, import_css6.css)({
               w: "1/2"
             }),
             onClick: handleActionClick,

package/build/legacy/context/cta-modal.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/cta-modal.tsx","../../../src/components/Portal.tsx","../../../src/components/Button.tsx","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/components/Show.tsx","../../../src/components/Modal.tsx","../../../src/hooks/useModal.ts","../../../src/components/ModalHeader.tsx","../../../src/components/ModalHeading.tsx","../../../src/components/ModalDescription.tsx","../../../src/components/Avatar.tsx","../../../src/context/cerberus.tsx","../../../src/components/IconButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type MouseEvent,\n  type MouseEventHandler,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\nimport { IconButton } from '../components/IconButton'\nimport { useCerberusContext } from './cerberus'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { css } from '@cerberus/styled-system/css'\nimport { VStack } from '@cerberus/styled-system/jsx'\n\n/**\n * This module provides a context and hook for the cta modal.\n * @module\n */\n\nexport interface ShowCTAModalOptions {\n  /**\n   * The heading of the cta modal.\n   */\n  heading: string\n  /**\n   * The description of the cta modal.\n   */\n  description?: string\n  /**\n   * The icon used for the modal Avatar.\n   */\n  icon?: ReactNode\n  /**\n   * The actions for the cta modal. Max of 2 actions.\n   */\n  actions: {\n    text: string\n    onClick: MouseEventHandler<HTMLButtonElement>\n  }[]\n}\n\nexport interface CTAModalValue {\n  show: (options: ShowCTAModalOptions) => void\n}\n\nconst CTAModalContext = createContext<CTAModalValue | null>(null)\n\nexport type CTAModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a CTA modal to the app.\n * @see https://cerberus.digitalu.design/react/cta-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <CTAModal>\n *   <SomeFeatureSection />\n * </CTAModal>\n *\n * // Use the hook to show the cta modal.\n * const cta = useCTAModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await cta.show({\n *   heading: 'Create or copy a Cohort',\n *  description:\n *   'Create a new cohort or copy and existing one.',\n *  icon: <Copy size={24} />,\n *  actions: [\n *  {\n *   text: 'Create Cohort',\n *   onClick: () => {},\n *  {\n *   text: 'Copy Cohort',\n *   onClick: () => {}\n *  }\n * })\n * setConsent(userConsent)\n * }, [cta])\n * ```\n */\nexport function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {\n  const { modalRef, show, close } = useModal()\n  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n  const focusTrap = trapFocus(modalRef)\n  const confirmIcon = content?.icon\n\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon, confirmModal: FallbackIcon } = icons\n\n  const handleShow = useCallback(\n    (options: ShowCTAModalOptions) => {\n      const maxActions = 2\n      if (options.actions.length > maxActions) {\n        throw new Error(\n          `CTA Modal only supports a maximum of ${maxActions} actions.`,\n        )\n      }\n      setContent({ ...options })\n      show()\n    },\n    [show],\n  )\n\n  const handleActionClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      const index = event.currentTarget.getAttribute('data-index')\n      const action = content?.actions[Number(index)]\n      const { onClick } = action || {}\n      onClick?.(event)\n      close()\n    },\n    [content, close],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <CTAModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <span\n            className={css({\n              padding: 'md',\n              position: 'absolute',\n              right: 0,\n              top: 0,\n              zIndex: 'decorator',\n            })}\n          >\n            <IconButton ariaLabel=\"Close modal\" onClick={close}>\n              <CloseIcon />\n            </IconButton>\n          </span>\n\n          <VStack gap=\"xl\" w=\"full\">\n            <ModalHeader>\n              <VStack gap=\"lg\" w=\"full\">\n                <Avatar\n                  ariaLabel=\"\"\n                  gradient=\"charon-light\"\n                  icon={\n                    <Show\n                      when={Boolean(confirmIcon)}\n                      fallback={<FallbackIcon size={24} />}\n                    >\n                      {confirmIcon}\n                    </Show>\n                  }\n                  src=\"\"\n                />\n                <ModalHeading>{content?.heading}</ModalHeading>\n                <ModalDescription>{content?.description}</ModalDescription>\n              </VStack>\n            </ModalHeader>\n\n            <HStack gap=\"md\" w=\"full\">\n              <Show when={Boolean(content?.actions?.length)}>\n                {content?.actions?.map((action, index) => (\n                  <Button\n                    data-index={index}\n                    className={css({\n                      w: '1/2',\n                    })}\n                    key={index}\n                    onClick={handleActionClick}\n                    shape=\"rounded\"\n                    usage=\"outlined\"\n                  >\n                    {action.text}\n                  </Button>\n                ))}\n              </Show>\n            </HStack>\n          </VStack>\n        </Modal>\n      </Portal>\n    </CTAModalContext.Provider>\n  )\n}\n\nexport function useCTAModal(): CTAModalValue {\n  const context = useContext(CTAModalContext)\n  if (context === null) {\n    throw new Error('useCTAModal must be used within a CTAModal Provider')\n  }\n  return context\n}\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\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 { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","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","'use client'\n\nimport { useCallback, useMemo, useRef, useState, type RefObject } from 'react'\n\n/**\n * This module provides a hook for using a custom modal.\n * @module\n */\n\nexport interface UseModalReturnValue {\n  /**\n   * The ref for the modal.\n   */\n  modalRef: RefObject<HTMLDialogElement>\n  /**\n   * Shows the modal.\n   */\n  show: () => void\n  /**\n   * Closes the modal.\n   */\n  close: () => void\n  /**\n   * Whether the modal is open based on the show and close methods.\n   */\n  isOpen: boolean\n}\n\n/**\n * Provides a hook for using a custom modal via the native dialog element\n * methods.\n *\n * Cerberus modals use the native dialog element. This hook\n * does not control the modal via React state but rather by calling the\n * native dialog element's `showModal` and `close` methods.\n *\n * @memberof module:Modal\n * @see https://cerberus.digitalu.design/react/modal\n * @description [Moz Dev Dialog Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n */\nexport function useModal(): UseModalReturnValue {\n  const modalRef = useRef<HTMLDialogElement | null>(null)\n  const [isOpen, setIsOpen] = useState<boolean>(false)\n\n  const show = useCallback(() => {\n    modalRef.current?.showModal()\n    setIsOpen(true)\n  }, [])\n\n  const close = useCallback(() => {\n    modalRef.current?.close()\n    setIsOpen(false)\n  }, [])\n\n  return useMemo(() => {\n    return {\n      modalRef,\n      show,\n      close,\n      isOpen,\n    }\n  }, [modalRef, show, close, isOpen])\n}\n","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","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","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","'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type SharedAvatarProps = {\n  /**\n   * An optional icon to show when no src or ariaLabel is provided.\n   */\n  icon?: ReactNode\n  /**\n   * The size of the avatar.\n   */\n  width?: number\n  /**\n   * The size of the avatar.\n   */\n  height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n  SharedAvatarProps & {\n    /**\n     * The aria-label for the avatar needed for accessibility.\n     */\n    ariaLabel: string\n    /**\n     * An optional element to replace the image. Recommended for Next.js Image component.\n     */\n    as?: never\n    /**\n     * The source of the image.\n     */\n    src: string\n  }\nexport type AvatarAsProps = SharedAvatarProps & {\n  /**\n   * An optional element to replace the image. Recommended for Next.js Image component.\n   */\n  as: ReactNode\n  /**\n   * The aria-label for the avatar needed for accessibility.\n   */\n  ariaLabel?: never\n  /**\n   * The source of the image.\n   */\n  src?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n  AvatarVariantProps) &\n  (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @see https://cerberus.digitalu.design/react/avatar\n * @example\n * ```tsx\n * <Avatar\n *   ariaLabel=\"Protector Cerberus\"\n *   src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n  const {\n    ariaLabel,\n    as,\n    gradient,\n    size,\n    src,\n    width,\n    height,\n    icon,\n    ...nativeProps\n  } = props\n  const { icons } = useCerberusContext()\n  const { avatar: AvatarIcon } = icons\n  const initials = (ariaLabel || '')\n    .split(' ')\n    .map((word) => word[0])\n    .join('')\n    .slice(0, 2)\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        avatar({ gradient, size }),\n        circle(),\n      )}\n    >\n      <Show\n        when={Boolean(src) || Boolean(as)}\n        fallback={\n          <Show\n            when={Boolean(initials)}\n            fallback={\n              <Show\n                when={Boolean(icon)}\n                fallback={\n                  <AvatarIcon\n                    size={iconSizeMap[size as keyof typeof iconSizeMap]}\n                  />\n                }\n              >\n                {icon}\n              </Show>\n            }\n          >\n            {initials}\n          </Show>\n        }\n      >\n        <Show\n          when={Boolean(as)}\n          fallback={\n            <img\n              alt={props.ariaLabel}\n              className={css({\n                h: 'full',\n                objectFit: 'cover',\n                w: 'full',\n              })}\n              decoding=\"async\"\n              loading=\"lazy\"\n              src={src}\n              height={height}\n              width={width}\n            />\n          }\n        >\n          {as}\n        </Show>\n      </Show>\n    </div>\n  )\n}\n\nconst iconSizeMap = {\n  xs: 16,\n  sm: 16,\n  md: 20,\n  lg: 34,\n  xl: 32,\n  '2xl': 32,\n  '3xl': 32,\n  '4xl': 32,\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","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  iconButton,\n  type IconButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The aria-label attribute for the icon button.\n   */\n  ariaLabel: string\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":"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","names":["import_react","ArkPortal","import_react","import_css","import_recipes","import_react","import_jsx_runtime","import_react","import_css","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_css","import_patterns","import_recipes","import_react","import_jsx_runtime","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_css","import_jsx","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/context/cta-modal.tsx","../../../src/components/Button.tsx","../../../src/components/Show.tsx","../../../src/components/Avatar.tsx","../../../src/context/cerberus.tsx","../../../src/components/Dialog.tsx","../../../src/components/Portal.tsx","../../../src/components/Dialog.client.tsx","../../../src/components/IconButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type MouseEvent,\n  type MouseEventHandler,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Button } from '../components/Button'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/Avatar'\nimport { useCerberusContext } from './cerberus'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { css } from '@cerberus/styled-system/css'\nimport { VStack } from '@cerberus/styled-system/jsx'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../components/Dialog'\nimport { DialogCloseIconTrigger } from '../components/Dialog.client'\n\n/**\n * This module provides a context and hook for the cta modal.\n * @module\n */\n\nexport interface ShowCTAModalOptions {\n  /**\n   * The heading of the cta modal.\n   */\n  heading: string\n  /**\n   * The description of the cta modal.\n   */\n  description?: string\n  /**\n   * The icon used for the modal Avatar.\n   */\n  icon?: ReactNode\n  /**\n   * The actions for the cta modal. Max of 2 actions.\n   */\n  actions: {\n    text: string\n    onClick: MouseEventHandler<HTMLButtonElement>\n  }[]\n}\n\nexport interface CTAModalValue {\n  show: (options: ShowCTAModalOptions) => void\n}\n\nconst CTAModalContext = createContext<CTAModalValue | null>(null)\n\nexport type CTAModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a CTA modal to the app.\n * @see https://cerberus.digitalu.design/react/cta-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <CTAModal>\n *   <SomeFeatureSection />\n * </CTAModal>\n *\n * // Use the hook to show the cta modal.\n * const cta = useCTAModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await cta.show({\n *   heading: 'Create or copy a Cohort',\n *  description:\n *   'Create a new cohort or copy and existing one.',\n *  icon: <Copy size={24} />,\n *  actions: [\n *  {\n *   text: 'Create Cohort',\n *   onClick: () => {},\n *  {\n *   text: 'Copy Cohort',\n *   onClick: () => {}\n *  }\n * })\n * setConsent(userConsent)\n * }, [cta])\n * ```\n */\nexport function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n  const confirmIcon = content?.icon\n\n  const { icons } = useCerberusContext()\n  const { confirmModal: FallbackIcon } = icons\n\n  const handleShow = useCallback(\n    (options: ShowCTAModalOptions) => {\n      const maxActions = 2\n      if (options.actions.length > maxActions) {\n        throw new Error(\n          `CTA Modal only supports a maximum of ${maxActions} actions.`,\n        )\n      }\n      setContent({ ...options })\n      setOpen(true)\n    },\n    [setOpen],\n  )\n\n  const handleActionClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      const index = event.currentTarget.getAttribute('data-index')\n      const action = content?.actions[Number(index)]\n      const { onClick } = action || {}\n      onClick?.(event)\n      setOpen(false)\n    },\n    [content, setOpen],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <CTAModalContext.Provider value={value}>\n      {props.children}\n\n      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n        <Dialog size=\"sm\">\n          <DialogCloseIconTrigger />\n\n          <VStack gap=\"xl\" w=\"full\">\n            <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n              <VStack gap=\"lg\" w=\"full\">\n                <Avatar\n                  ariaLabel=\"\"\n                  gradient=\"charon-light\"\n                  icon={\n                    <Show\n                      when={Boolean(confirmIcon)}\n                      fallback={<FallbackIcon size={24} />}\n                    >\n                      {confirmIcon}\n                    </Show>\n                  }\n                  src=\"\"\n                />\n                <DialogHeading>{content?.heading}</DialogHeading>\n                <DialogDescription>{content?.description}</DialogDescription>\n              </VStack>\n            </VStack>\n\n            <HStack gap=\"md\" w=\"full\">\n              <Show when={Boolean(content?.actions?.length)}>\n                {content?.actions?.map((action, index) => (\n                  <Button\n                    data-index={index}\n                    className={css({\n                      w: '1/2',\n                    })}\n                    key={index}\n                    onClick={handleActionClick}\n                    shape=\"rounded\"\n                    usage=\"outlined\"\n                  >\n                    {action.text}\n                  </Button>\n                ))}\n              </Show>\n            </HStack>\n          </VStack>\n        </Dialog>\n      </DialogProvider>\n    </CTAModalContext.Provider>\n  )\n}\n\nexport function useCTAModal(): CTAModalValue {\n  const context = useContext(CTAModalContext)\n  if (context === null) {\n    throw new Error('useCTAModal must be used within a CTAModal Provider')\n  }\n  return context\n}\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type SharedAvatarProps = {\n  /**\n   * An optional icon to show when no src or ariaLabel is provided.\n   */\n  icon?: ReactNode\n  /**\n   * The size of the avatar.\n   */\n  width?: number\n  /**\n   * The size of the avatar.\n   */\n  height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n  SharedAvatarProps & {\n    /**\n     * The aria-label for the avatar needed for accessibility.\n     */\n    ariaLabel: string\n    /**\n     * An optional element to replace the image. Recommended for Next.js Image component.\n     */\n    as?: never\n    /**\n     * The source of the image.\n     */\n    src: string\n  }\nexport type AvatarAsProps = SharedAvatarProps & {\n  /**\n   * An optional element to replace the image. Recommended for Next.js Image component.\n   */\n  as: ReactNode\n  /**\n   * The aria-label for the avatar needed for accessibility.\n   */\n  ariaLabel?: never\n  /**\n   * The source of the image.\n   */\n  src?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n  AvatarVariantProps) &\n  (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @see https://cerberus.digitalu.design/react/avatar\n * @example\n * ```tsx\n * <Avatar\n *   ariaLabel=\"Protector Cerberus\"\n *   src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n  const {\n    ariaLabel,\n    as,\n    gradient,\n    size,\n    src,\n    width,\n    height,\n    icon,\n    ...nativeProps\n  } = props\n  const { icons } = useCerberusContext()\n  const { avatar: AvatarIcon } = icons\n  const initials = (ariaLabel || '')\n    .split(' ')\n    .map((word) => word[0])\n    .join('')\n    .slice(0, 2)\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        avatar({ gradient, size }),\n        circle(),\n      )}\n    >\n      <Show\n        when={Boolean(src) || Boolean(as)}\n        fallback={\n          <Show\n            when={Boolean(initials)}\n            fallback={\n              <Show\n                when={Boolean(icon)}\n                fallback={\n                  <AvatarIcon\n                    size={iconSizeMap[size as keyof typeof iconSizeMap]}\n                  />\n                }\n              >\n                {icon}\n              </Show>\n            }\n          >\n            {initials}\n          </Show>\n        }\n      >\n        <Show\n          when={Boolean(as)}\n          fallback={\n            <img\n              alt={props.ariaLabel}\n              className={css({\n                h: 'full',\n                objectFit: 'cover',\n                w: 'full',\n              })}\n              decoding=\"async\"\n              loading=\"lazy\"\n              src={src}\n              height={height}\n              width={width}\n            />\n          }\n        >\n          {as}\n        </Show>\n      </Show>\n    </div>\n  )\n}\n\nconst iconSizeMap = {\n  xs: 16,\n  sm: 16,\n  md: 20,\n  lg: 34,\n  xl: 32,\n  '2xl': 32,\n  '3xl': 32,\n  '4xl': 32,\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","import {\n  Dialog as ArkDialog,\n  type DialogContentProps as ArkDialogContentProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n} from '@ark-ui/react'\nimport {\n  dialog,\n  type DialogVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Portal } from './Portal'\nimport { cx } from '@cerberus/styled-system/css'\n\nexport type DialogProviderProps = DialogRootProps\n\n/**\n * The provider that controls the dialog components.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *  <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *    <DialogCloseTrigger>Close</DialogCloseTrigger>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogProvider(props: DialogProviderProps) {\n  return <ArkDialog.Root {...props} />\n}\n\nexport interface DialogProps\n  extends Omit<ArkDialogContentProps, 'size'>,\n    DialogVariantProps {}\n\n/**\n * The content of the dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function Dialog(props: DialogProps) {\n  const { size, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Portal>\n      <DialogBackdrop className={styles.backdrop} />\n      <DialogPositioner className={styles.positioner}>\n        <DialogContent className={styles.content} {...contentProps} />\n      </DialogPositioner>\n    </Portal>\n  )\n}\n\n/**\n * The heading of the dialog. Must be used within the `DialogContent` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <DialogHeading>Dialog Title</DialogHeading>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <ArkDialog.Title {...props} className={cx(props.className, styles.title)} />\n  )\n}\n\n/**\n * The description of the dialog. Must be used within the `DialogContent` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <DialogHeading>Dialog Title</DialogHeading>\n *    <DialogDescription>Dialog Description</DialogDescription>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogDescription(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <ArkDialog.Description\n      {...props}\n      className={cx(props.className, styles.description)}\n    />\n  )\n}\n\n/**\n * The trigger that opens the dialog. Must be used within the `DialogProvider`\n * component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogTrigger asChild>\n *  <Button>Open Dialog</Button>\n * </DialogTrigger>\n * ```\n */\nexport const DialogTrigger = ArkDialog.Trigger\n\n/**\n * The trigger that closes the dialog. Must be used within the `DialogProvider`\n * component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *    <DialogCloseTrigger>Close</DialogCloseTrigger>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport const DialogCloseTrigger = ArkDialog.CloseTrigger\n\n/**\n * The backdrop of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogBackdrop = ArkDialog.Backdrop\n\n/**\n * The positioner of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogPositioner = ArkDialog.Positioner\n\n/**\n * The content of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogContent = ArkDialog.Content\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n","'use client'\n\nimport {\n  Dialog as ArkDialog,\n  type DialogCloseTriggerProps,\n} from '@ark-ui/react'\nimport { dialog } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { IconButton } from './IconButton'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module contains client-side components for the Dialog family.\n * @module @cerberus-design/react/dialog\n */\n\nexport function DialogCloseIconTrigger(props: DialogCloseTriggerProps) {\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon } = icons\n\n  const styles = dialog()\n\n  return (\n    <ArkDialog.CloseTrigger\n      {...props}\n      className={cx(props.className, styles.closeTrigger)}\n      asChild\n    >\n      <IconButton\n        ariaLabel=\"Close dialog\"\n        palette=\"action\"\n        size=\"lg\"\n        usage=\"ghost\"\n      >\n        <CloseIcon />\n      </IconButton>\n    </ArkDialog.CloseTrigger>\n  )\n}\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  iconButton,\n  type IconButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The aria-label attribute for the icon button.\n   */\n  ariaLabel: string\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":"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","names":["import_react","import_css","import_recipes","import_react","import_jsx_runtime","import_jsx_runtime","import_css","import_jsx","import_react","import_recipes","import_react","ArkPortal","import_css","import_jsx_runtime","ArkDialog","import_react","import_recipes","import_css","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime","ArkDialog","import_jsx_runtime"]}