@cerberus-design/react 0.16.0-next-22894bb → 0.16.0-next-1e5283a

package/build/legacy/_tsup-dts-rollup.d.cts

@@ -46,12 +46,15 @@ import { defaultCoordinates } from '@dnd-kit/core';
 import { defaultDropAnimation } from '@dnd-kit/core';
 import { defaultDropAnimationSideEffects } from '@dnd-kit/core';
 import { defaultScreenReaderInstructions } from '@dnd-kit/core';
-import { Dialog as Dialog_2 } from '@ark-ui/react';
-import { DialogCloseTriggerProps } from '@ark-ui/react';
-import { DialogContentProps } from '@ark-ui/react';
+import { DialogBackdropProps } from '@ark-ui/react/dialog';
+import { DialogCloseTriggerProps } from '@ark-ui/react/dialog';
+import { DialogContentProps } from '@ark-ui/react/dialog';
+import { DialogDescriptionProps } from '@ark-ui/react/dialog';
 import { DialogHTMLAttributes } from 'react';
-import { DialogRootProps } from '@ark-ui/react';
-import { DialogTitleProps } from '@ark-ui/react';
+import { DialogPositionerProps } from '@ark-ui/react/dialog';
+import { DialogRootProps } from '@ark-ui/react/dialog';
+import { DialogTitleProps } from '@ark-ui/react/dialog';
+import { DialogTriggerProps } from '@ark-ui/react/dialog';
 import { DialogVariantProps } from '@cerberus/styled-system/recipes';
 import type { Dispatch } from 'react';
 import { DistanceMeasurement } from '@dnd-kit/core';
@@ -1431,8 +1434,10 @@ export { DestructiveConfirmOptions }
 export { DestructiveConfirmOptions as DestructiveConfirmOptions_alias_1 }
 
 /**
- * The content of the dialog. Must be used within the `DialogProvider` component.
+ * An abstraction of the Dialog primitives that controls the content of the
+ * dialog. Must be used within the `DialogProvider` component.
  * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
+ * @definition [Ark Dialog docs](https://ark-ui.com/react/docs/components/dialog)
  * @example
  * ```tsx
  * <DialogProvider>
@@ -1448,143 +1453,156 @@ export { DestructiveConfirmOptions as DestructiveConfirmOptions_alias_1 }
 declare function Dialog(props: DialogProps): JSX_2.Element;
 export { Dialog }
 export { Dialog as Dialog_alias_1 }
+export { Dialog as Dialog_alias_2 }
 
 /**
- * The backdrop of the dialog. Must be used within the `DialogProvider`
- * component.
+ * The overlay of the dialog.
  */
-declare const DialogBackdrop: ForwardRefExoticComponent<Dialog_2.BackdropProps & RefAttributes<HTMLDivElement>>;
+declare function DialogBackdrop(props: DialogBackdropProps): JSX_2.Element;
 export { DialogBackdrop }
 export { DialogBackdrop as DialogBackdrop_alias_1 }
+export { DialogBackdrop as DialogBackdrop_alias_2 }
 
 /**
- * This module contains client-side components for the Dialog family.
- * @module @cerberus-design/react/dialog
+ * This module contains the close trigger for the dialog.
+ * @module react/dialog
  */
 declare function DialogCloseIconTrigger(props: DialogCloseTriggerProps): JSX_2.Element;
 export { DialogCloseIconTrigger }
 export { DialogCloseIconTrigger as DialogCloseIconTrigger_alias_1 }
+export { DialogCloseIconTrigger as DialogCloseIconTrigger_alias_2 }
 
 /**
- * The trigger that closes the dialog. Must be used within the `DialogProvider`
- * component.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogProvider>
- *   <DialogTrigger asChild>
- *    <Button>Open Dialog</Button>
- *  </DialogTrigger>
- *  <Dialog>
- *    <Text>Dialog Content</Text>
- *    <DialogCloseTrigger>Close</DialogCloseTrigger>
- *  </Dialog>
- * </DialogProvider>
- * ```
+ * The trigger that closes the dialog.
  */
-declare const DialogCloseTrigger: ForwardRefExoticComponent<Dialog_2.CloseTriggerProps & RefAttributes<HTMLButtonElement>>;
+declare function DialogCloseTrigger(props: DialogTriggerProps): JSX_2.Element;
 export { DialogCloseTrigger }
 export { DialogCloseTrigger as DialogCloseTrigger_alias_1 }
+export { DialogCloseTrigger as DialogCloseTrigger_alias_2 }
 
 /**
- * The content of the dialog. Must be used within the `DialogProvider`
- * component.
+ * The visible content of the dialog.
  */
-declare const DialogContent: ForwardRefExoticComponent<Dialog_2.ContentProps & RefAttributes<HTMLDivElement>>;
+declare function DialogContent(props: DialogContentProps & DialogVariantProps): JSX_2.Element;
 export { DialogContent }
 export { DialogContent as DialogContent_alias_1 }
+export { DialogContent as DialogContent_alias_2 }
 
 /**
- * The description of the dialog. Must be used within the `DialogContent` component.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogProvider>
- *   <DialogTrigger asChild>
- *    <Button>Open Dialog</Button>
- *  </DialogTrigger>
- *  <Dialog>
- *    <DialogHeading>Dialog Title</DialogHeading>
- *    <DialogDescription>Dialog Description</DialogDescription>
- *  </Dialog>
- * </DialogProvider>
- * ```
+ * The description of the dialog.
  */
-declare function DialogDescription(props: DialogTitleProps): JSX_2.Element;
+declare function DialogDescription(props: DialogDescriptionProps): JSX_2.Element;
 export { DialogDescription }
 export { DialogDescription as DialogDescription_alias_1 }
+export { DialogDescription as DialogDescription_alias_2 }
 
 /**
- * The heading of the dialog. Must be used within the `DialogContent` component.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogProvider>
- *   <DialogTrigger asChild>
- *    <Button>Open Dialog</Button>
- *  </DialogTrigger>
- *  <Dialog>
- *    <DialogHeading>Dialog Title</DialogHeading>
- *    <Text>Dialog Content</Text>
- *  </Dialog>
- * </DialogProvider>
- * ```
+ * The heading of the dialog.
  */
 declare function DialogHeading(props: DialogTitleProps): JSX_2.Element;
 export { DialogHeading }
 export { DialogHeading as DialogHeading_alias_1 }
+export { DialogHeading as DialogHeading_alias_2 }
+
+/**
+ * An Object containing the parts of the dialog component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the DialogParts object and
+ * the entire family of components vs. only what you use.
+ */
+declare const DialogParts: DialogPartsValue;
+export { DialogParts }
+export { DialogParts as DialogParts_alias_1 }
+export { DialogParts as DialogParts_alias_2 }
+
+/**
+ * This module contains the parts of the Dialog component.
+ * @module 'dialog/parts'
+ */
+declare interface DialogPartsValue {
+    /**
+     * The context provider of the dialog.
+     */
+    Root: ElementType;
+    /**
+     * The trigger that opens the dialog.
+     */
+    Trigger: ElementType;
+    /**
+     * The overlay of the dialog.
+     */
+    Backdrop: ElementType;
+    /**
+     * The container that positions the dialog.
+     */
+    Positioner: ElementType;
+    /**
+     * The visible content of the dialog.
+     */
+    Content: ElementType;
+    /**
+     * The heading of the dialog.
+     */
+    Heading: ElementType;
+    /**
+     * The description of the dialog.
+     */
+    Description: ElementType;
+    /**
+     * The trigger that closes the dialog.
+     */
+    CloseTrigger: ElementType;
+}
 
 /**
- * The positioner of the dialog. Must be used within the `DialogProvider`
- * component.
+ * The container that positions the dialog.
  */
-declare const DialogPositioner: ForwardRefExoticComponent<Dialog_2.PositionerProps & RefAttributes<HTMLDivElement>>;
+declare function DialogPositioner(props: DialogPositionerProps): JSX_2.Element;
 export { DialogPositioner }
 export { DialogPositioner as DialogPositioner_alias_1 }
+export { DialogPositioner as DialogPositioner_alias_2 }
 
+/**
+ * This module contains and abstraction of the Dialog primitives.
+ * @module 'dialog'
+ */
 declare interface DialogProps extends Omit<DialogContentProps, 'size'>, DialogVariantProps {
 }
 export { DialogProps }
 export { DialogProps as DialogProps_alias_1 }
+export { DialogProps as DialogProps_alias_2 }
 
 /**
- * The provider that controls the dialog components.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogProvider>
- *  <DialogTrigger asChild>
- *    <Button>Open Dialog</Button>
- *  </DialogTrigger>
- *  <Dialog>
- *    <Text>Dialog Content</Text>
- *    <DialogCloseTrigger>Close</DialogCloseTrigger>
- *  </Dialog>
- * </DialogProvider>
- * ```
+ * The provider that controls the dialog components. This is a named export of
+ * the DialogRoot primitive.
  */
-declare function DialogProvider(props: DialogProviderProps): JSX_2.Element;
+declare const DialogProvider: typeof DialogRoot;
 export { DialogProvider }
 export { DialogProvider as DialogProvider_alias_1 }
+export { DialogProvider as DialogProvider_alias_2 }
 
-declare type DialogProviderProps = DialogRootProps;
-export { DialogProviderProps }
-export { DialogProviderProps as DialogProviderProps_alias_1 }
+/**
+ * This module contains the primitives of the Dialog component.
+ * @module 'dialog/primitives'
+ */
+/**
+ * The provider that controls the dialog components.
+ */
+declare function DialogRoot(props: DialogRootProps): JSX_2.Element;
+export { DialogRoot }
+export { DialogRoot as DialogRoot_alias_1 }
+export { DialogRoot as DialogRoot_alias_2 }
 
 /**
- * The trigger that opens the dialog. Must be used within the `DialogProvider`
- * component.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogTrigger asChild>
- *  <Button>Open Dialog</Button>
- * </DialogTrigger>
- * ```
+ * The trigger that opens the dialog.
  */
-declare const DialogTrigger: ForwardRefExoticComponent<Dialog_2.TriggerProps & RefAttributes<HTMLButtonElement>>;
+declare function DialogTrigger(props: DialogTriggerProps): JSX_2.Element;
 export { DialogTrigger }
 export { DialogTrigger as DialogTrigger_alias_1 }
+export { DialogTrigger as DialogTrigger_alias_2 }
 
 export { DistanceMeasurement }
 

package/build/legacy/components/cta-dialog/index.cjs

@@ -27,7 +27,7 @@ __export(cta_dialog_exports, {
 module.exports = __toCommonJS(cta_dialog_exports);
 
 // src/components/cta-dialog/provider.tsx
-var import_react8 = require("react");
+var import_react6 = require("react");
 var import_jsx2 = require("@cerberus/styled-system/jsx");
 
 // src/context/cerberus.tsx
@@ -154,52 +154,63 @@ var iconSizeMap = {
   "4xl": 32
 };
 
-// src/components/Dialog.tsx
-var import_react4 = require("@ark-ui/react");
-var import_recipes2 = 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
+// src/components/dialog/primitives.tsx
+var import_dialog = require("@ark-ui/react/dialog");
 var import_css2 = require("@cerberus/styled-system/css");
+var import_recipes2 = require("@cerberus/styled-system/recipes");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function DialogProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Dialog.Root, { ...props });
+function DialogRoot(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.Dialog.Root, { ...props });
 }
-function Dialog(props) {
+function DialogBackdrop(props) {
+  const styles = (0, import_recipes2.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_dialog.Dialog.Backdrop,
+    {
+      ...props,
+      className: (0, import_css2.cx)(styles.backdrop, props.className)
+    }
+  );
+}
+function DialogPositioner(props) {
+  const styles = (0, import_recipes2.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_dialog.Dialog.Positioner,
+    {
+      ...props,
+      className: (0, import_css2.cx)(styles.positioner, props.className)
+    }
+  );
+}
+function DialogContent(props) {
   const { size, ...contentProps } = props;
   const styles = (0, import_recipes2.dialog)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DialogBackdrop, { className: styles.backdrop }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DialogPositioner, { className: styles.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DialogContent, { className: styles.content, ...contentProps }) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_dialog.Dialog.Content,
+    {
+      ...contentProps,
+      className: (0, import_css2.cx)(styles.content, contentProps.className)
+    }
+  );
 }
 function DialogHeading(props) {
   const styles = (0, import_recipes2.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Dialog.Title, { ...props, className: (0, import_css2.cx)(props.className, styles.title) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.Dialog.Title, { ...props, className: (0, import_css2.cx)(styles.title, props.className) });
 }
 function DialogDescription(props) {
   const styles = (0, import_recipes2.dialog)();
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react4.Dialog.Description,
+    import_dialog.Dialog.Description,
     {
       ...props,
-      className: (0, import_css2.cx)(props.className, styles.description)
+      className: (0, import_css2.cx)(styles.description, props.className)
     }
   );
 }
-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_recipes4 = require("@cerberus/styled-system/recipes");
-var import_css4 = require("@cerberus/styled-system/css");
+function DialogCloseTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.Dialog.CloseTrigger, { ...props });
+}
+var DialogProvider = DialogRoot;
 
 // src/components/IconButton.tsx
 var import_css3 = require("@cerberus/styled-system/css");
@@ -224,17 +235,19 @@ function IconButton(props) {
   );
 }
 
-// src/components/Dialog.client.tsx
+// src/components/dialog/close-icon-trigger.tsx
+var import_recipes4 = require("@cerberus/styled-system/recipes");
+var import_css4 = require("@cerberus/styled-system/css");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function DialogCloseIconTrigger(props) {
+  const styles = (0, import_recipes4.dialog)();
   const { icons } = useCerberusContext();
   const { close: CloseIcon } = icons;
-  const styles = (0, import_recipes4.dialog)();
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_react5.Dialog.CloseTrigger,
+    DialogCloseTrigger,
     {
       ...props,
-      className: (0, import_css4.cx)(props.className, styles.closeTrigger),
+      className: (0, import_css4.cx)(styles.closeTrigger, props.className),
       asChild: true,
       children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         IconButton,
@@ -250,26 +263,39 @@ function DialogCloseIconTrigger(props) {
   );
 }
 
+// src/components/Portal.tsx
+var import_react3 = require("@ark-ui/react");
+var Portal = import_react3.Portal;
+
+// src/components/dialog/dialog.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Dialog2(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogBackdrop, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogContent, { ...props }) })
+  ] });
+}
+
 // src/components/cta-dialog/context.tsx
-var import_react6 = require("react");
-var CTAModalContext = (0, import_react6.createContext)(null);
+var import_react4 = require("react");
+var CTAModalContext = (0, import_react4.createContext)(null);
 
 // src/components/cta-dialog/trigger-item.tsx
 var import_css6 = require("@cerberus/styled-system/css");
 
 // src/components/button/button.tsx
-var import_react7 = require("react");
+var import_react5 = require("react");
 var import_css5 = require("@cerberus/styled-system/css");
 var import_recipes5 = require("@cerberus/styled-system/recipes");
 var import_jsx = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ButtonContext = (0, import_react7.createContext)({
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ButtonContext = (0, import_react5.createContext)({
   pending: false
 });
 function Button(props) {
   const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
-  const value = (0, import_react7.useMemo)(() => ({ pending }), [pending]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const value = (0, import_react5.useMemo)(() => ({ pending }), [pending]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       ...nativeProps,
@@ -290,11 +316,11 @@ function Button(props) {
 // src/components/cta-dialog/trigger-item.tsx
 var import_factory = require("@ark-ui/react/factory");
 var import_recipes6 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function TriggerItem(props) {
   const { asChild, children, ...buttonProps } = props;
   if (asChild) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_factory.ark.div,
       {
         className: (0, import_css6.cx)(
@@ -311,7 +337,7 @@ function TriggerItem(props) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Button,
     {
       ...buttonProps,
@@ -326,21 +352,21 @@ function TriggerItem(props) {
 }
 
 // src/components/cta-dialog/provider.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function CTAModal(props) {
-  const [open, setOpen] = (0, import_react8.useState)(false);
-  const [content, setContent] = (0, import_react8.useState)(null);
+  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 { icons } = useCerberusContext();
   const { confirmModal: FallbackIcon } = icons;
-  const handleShow = (0, import_react8.useCallback)(
+  const handleShow = (0, import_react6.useCallback)(
     (options) => {
       setContent({ ...options });
       setOpen(true);
     },
     [setOpen]
   );
-  const handleActionClick = (0, import_react8.useCallback)(
+  const handleActionClick = (0, import_react6.useCallback)(
     (event) => {
       var _a;
       const index = Number(event.currentTarget.getAttribute("data-index"));
@@ -351,45 +377,45 @@ function CTAModal(props) {
     },
     [content, setOpen]
   );
-  const value = (0, import_react8.useMemo)(
+  const value = (0, import_react6.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CTAModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(CTAModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Dialog, { size: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogCloseIconTrigger, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Dialog2, { size: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogCloseIconTrigger, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             Avatar,
             {
               ariaLabel: "",
               gradient: "charon-light",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 Show,
                 {
                   when: Boolean(confirmIcon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FallbackIcon, { size: 24 }),
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FallbackIcon, { size: 24 }),
                   children: confirmIcon
                 }
               ),
               src: ""
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx2.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(For, { each: content == null ? void 0 : content.actions._actions, children: (action, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(For, { each: content == null ? void 0 : content.actions._actions, children: (action, index) => {
           var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             Show,
             {
               when: ((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.type) === "btnAction",
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TriggerItem, { asChild: true, children: action }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action == null ? void 0 : action.text })
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TriggerItem, { asChild: true, children: action }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action == null ? void 0 : action.text })
             },
             index
           );
@@ -399,7 +425,7 @@ function CTAModal(props) {
   ] });
 }
 function useCTAModal() {
-  const context = (0, import_react8.useContext)(CTAModalContext);
+  const context = (0, import_react6.useContext)(CTAModalContext);
   if (context === null) {
     throw new Error("useCTAModal must be used within a CTAModal Provider");
   }