@cerberus-design/react 0.14.2 → 0.15.0

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

@@ -25,11 +25,7 @@ __export(cta_modal_exports, {
   useCTAModal: () => useCTAModal
 });
 module.exports = __toCommonJS(cta_modal_exports);
-var import_react5 = require("react");
-
-// src/components/Portal.tsx
-var import_react = require("@ark-ui/react");
-var Portal = import_react.Portal;
+var import_react6 = require("react");
 
 // src/components/Button.tsx
 var import_css = require("@cerberus/styled-system/css");
@@ -53,292 +49,36 @@ function Button(props) {
   );
 }
 
-// src/config/cerbIcons.ts
-var import_icons = require("@cerberus/icons");
-
-// src/config/icons/checkbox.icons.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function CheckmarkIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.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_runtime2.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_runtime2.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
-    }
-  );
-}
-
-// src/components/AnimatingUploadIcon.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function AnimatingUploadIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsxs)(
-        "g",
-        {
-          fill: "none",
-          stroke: "currentColor",
-          strokeLinecap: "square",
-          strokeLinejoin: "round",
-          strokeWidth: 1.5,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(
-                  "animate",
-                  {
-                    attributeName: "stroke-dashoffset",
-                    dur: "0.45s",
-                    repeatCount: "indefinite",
-                    values: "6;0"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(
-                  "animate",
-                  {
-                    fill: "freeze",
-                    attributeName: "stroke-dashoffset",
-                    begin: "0.075s",
-                    dur: "0.3s",
-                    values: "32;0"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_runtime3.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/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_runtime4 = require("react/jsx-runtime");
-function ModalEl(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime5 = require("react/jsx-runtime");
-function ModalHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime6 = require("react/jsx-runtime");
-function ModalHeading(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { ...props, className: (0, import_css4.cx)(props.className, (0, import_recipes3.modal)().heading) });
-}
+var import_recipes2 = require("@cerberus/styled-system/recipes");
 
-// src/components/ModalDescription.tsx
-var import_css5 = require("@cerberus/styled-system/css");
-var import_recipes4 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function ModalDescription(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { ...props, className: (0, import_css5.cx)(props.className, (0, import_recipes4.modal)().description) });
+// 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/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_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Avatar(props) {
   const {
     ariaLabel,
@@ -351,30 +91,31 @@ function Avatar(props) {
     icon,
     ...nativeProps
   } = props;
-  const { avatar: AvatarIcon } = $cerberusIcons;
+  const { icons } = useCerberusContext();
+  const { avatar: AvatarIcon } = icons;
   const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         Show,
         {
           when: Boolean(src) || Boolean(as),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Show,
             {
               when: Boolean(initials),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 Show,
                 {
                   when: Boolean(icon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     AvatarIcon,
                     {
                       size: iconSizeMap[size]
@@ -386,15 +127,15 @@ function Avatar(props) {
               children: initials
             }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Show,
             {
               when: Boolean(as),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime8.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"
@@ -427,21 +168,70 @@ var iconSizeMap = {
 
 // 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_runtime9 = 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_runtime9.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
@@ -451,20 +241,43 @@ 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_css8 = require("@cerberus/styled-system/css");
-var import_jsx2 = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var CTAModalContext = (0, import_react5.createContext)(null);
+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 [content, setContent] = (0, import_react5.useState)(null);
-  const focusTrap = trapFocus(modalRef);
-  const FallbackIcon = $cerberusIcons.confirmModal;
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [content, setContent] = (0, import_react6.useState)(null);
   const confirmIcon = content == null ? void 0 : content.icon;
-  const { close: CloseIcon } = $cerberusIcons;
-  const handleShow = (0, import_react5.useCallback)(
+  const { icons } = useCerberusContext();
+  const { confirmModal: FallbackIcon } = icons;
+  const handleShow = (0, import_react6.useCallback)(
     (options) => {
       const maxActions = 2;
       if (options.actions.length > maxActions) {
@@ -473,68 +286,56 @@ function CTAModal(props) {
         );
       }
       setContent({ ...options });
-      show();
+      setOpen(true);
     },
-    [show]
+    [setOpen]
   );
-  const handleActionClick = (0, import_react5.useCallback)(
+  const handleActionClick = (0, import_react6.useCallback)(
     (event) => {
       const index = event.currentTarget.getAttribute("data-index");
       const action = content == null ? void 0 : content.actions[Number(index)];
       const { onClick } = action || {};
       onClick == null ? void 0 : onClick(event);
-      close();
+      setOpen(false);
     },
-    [content, close]
+    [content, setOpen]
   );
-  const value = (0, import_react5.useMemo)(
+  const value = (0, import_react6.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(CTAModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CTAModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        "span",
-        {
-          className: (0, import_css8.css)({
-            padding: "md",
-            position: "absolute",
-            right: 0,
-            top: 0,
-            zIndex: "decorator"
-          }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CloseIcon, {}) })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(
+              icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 Show,
                 {
                   when: Boolean(confirmIcon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FallbackIcon, { size: 24 }),
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FallbackIcon, { size: 24 }),
                   children: confirmIcon
                 }
               ),
               src: ""
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(import_jsx.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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,
@@ -549,7 +350,7 @@ function CTAModal(props) {
   ] });
 }
 function useCTAModal() {
-  const context = (0, import_react5.useContext)(CTAModalContext);
+  const context = (0, import_react6.useContext)(CTAModalContext);
   if (context === null) {
     throw new Error("useCTAModal must be used within a CTAModal Provider");
   }