@cerberus-design/react 0.16.0-next-4f6c716 → 0.16.0-next-feeb186

package/build/modern/_tsup-dts-rollup.d.ts

@@ -103,6 +103,7 @@ import { HtmlHTMLAttributes } from 'react';
 import { IconButtonVariantProps } from '@cerberus/styled-system/recipes';
 import { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import type { JSX as JSX_3 } from 'react';
 import { KeyboardCode } from '@dnd-kit/core';
 import { KeyboardCodes } from '@dnd-kit/core';
 import { KeyboardCoordinateGetter } from '@dnd-kit/core';
@@ -119,7 +120,7 @@ import { Menu as Menu_2 } from '@ark-ui/react';
 import { Modifier } from '@dnd-kit/core';
 import { Modifiers } from '@dnd-kit/core';
 import { MouseEvent as MouseEvent_2 } from 'react';
-import { MouseEventHandler } from 'react';
+import type { MouseEventHandler } from 'react';
 import { MouseSensor } from '@dnd-kit/core';
 import { MouseSensorOptions } from '@dnd-kit/core';
 import { NotificationVariantProps } from '@cerberus/styled-system/recipes';
@@ -950,6 +951,14 @@ declare interface ConfirmModalValue {
 export { ConfirmModalValue }
 export { ConfirmModalValue as ConfirmModalValue_alias_1 }
 
+/**
+ * Creates the action data to pass to the cta modal `show` method.
+ */
+declare function createCTAModalActions(providedActions: CTAModalAction): CTAModalActionReturn;
+export { createCTAModalActions }
+export { createCTAModalActions as createCTAModalActions_alias_1 }
+export { createCTAModalActions as createCTAModalActions_alias_2 }
+
 declare function createNavTriggerProps(values: NavTriggerAriaValues): NavTriggerAriaReturn;
 export { createNavTriggerProps }
 export { createNavTriggerProps as createNavTriggerProps_alias_1 }
@@ -967,6 +976,28 @@ export { createSelectCollection }
 export { createSelectCollection as createSelectCollection_alias_1 }
 export { createSelectCollection as createSelectCollection_alias_2 }
 
+/**
+ * This module provide utility functions for the cta modal.
+ * @module 'react/cta-modal/utils'
+ */
+declare type CTAButtonAction = {
+    /**
+     * The text of the button.
+     */
+    text: string;
+    /**
+     * The onClick handler for the button.
+     */
+    handleClick: MouseEventHandler<HTMLButtonElement>;
+};
+export { CTAButtonAction }
+export { CTAButtonAction as CTAButtonAction_alias_1 }
+export { CTAButtonAction as CTAButtonAction_alias_2 }
+
+/**
+ * This module provides the provider and hook for the cta modal.
+ * @module 'react/cta-modal/provider'
+ */
 /**
  * Provides a CTA modal to the app.
  * @see https://cerberus.digitalu.design/react/cta-modal
@@ -999,19 +1030,35 @@ export { createSelectCollection as createSelectCollection_alias_2 }
  * }, [cta])
  * ```
  */
-declare function CTAModal(props: PropsWithChildren<CTAModalProviderProps>): JSX_2.Element;
+declare function CTAModal(props: PropsWithChildren<object>): JSX_2.Element;
 export { CTAModal }
 export { CTAModal as CTAModal_alias_1 }
+export { CTAModal as CTAModal_alias_2 }
+
+declare type CTAModalAction = (CTAButtonAction | ReactNode)[];
+export { CTAModalAction }
+export { CTAModalAction as CTAModalAction_alias_1 }
+export { CTAModalAction as CTAModalAction_alias_2 }
+
+declare interface CTAModalActionReturn {
+    /**
+     * The type of the action content.
+     */
+    type: 'reactNode' | 'btnAction';
+    /**
+     * The actions for the cta modal. Max of 2 actions.
+     */
+    _actions: CTAModalAction;
+}
+export { CTAModalActionReturn }
+export { CTAModalActionReturn as CTAModalActionReturn_alias_1 }
+export { CTAModalActionReturn as CTAModalActionReturn_alias_2 }
 
-declare type CTAModalProviderProps = PropsWithChildren<unknown>;
-export { CTAModalProviderProps }
-export { CTAModalProviderProps as CTAModalProviderProps_alias_1 }
+export declare const CTAModalContext: Context<CTAModalValue | null>;
 
-declare interface CTAModalValue {
+export declare interface CTAModalValue {
     show: (options: ShowCTAModalOptions) => void;
 }
-export { CTAModalValue }
-export { CTAModalValue as CTAModalValue_alias_1 }
 
 declare type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K;
 export { CustomThemes }
@@ -2225,7 +2272,7 @@ export { FileUploaderProps as FileUploaderProps_alias_1 }
  * </For>
  * ```
  */
-declare function For<T extends string | number | Record<string, unknown> | object | undefined>(props: ForProps<T>): ReactNode;
+declare function For<T extends readonly unknown[], U extends JSX_3.Element>(props: ForProps<T, U>): string | number | boolean | JSX_3.Element | Iterable<ReactNode> | null | undefined;
 export { For }
 export { For as For_alias_1 }
 
@@ -2274,19 +2321,19 @@ declare function formatNotifyCount(count: number): string;
 export { formatNotifyCount }
 export { formatNotifyCount as formatNotifyCount_alias_1 }
 
-declare interface ForProps<T> {
+declare interface ForProps<T extends readonly unknown[], U extends JSX_3.Element> {
     /**
-     * The array to iterate over
+     * The array to iterate over.
      */
-    each: T[];
+    each: T | undefined | null | false;
     /**
-     * The fallback content to render when the array is empty
+     * The fallback to render when the array is empty.
      */
-    fallback?: ReactNode;
+    fallback?: JSX_3.Element;
     /**
-     * The render function to render each item in the array
+     * The children to render for each item in the array.
      */
-    children: (item: Exclude<T, undefined>, index: number) => ReactNode;
+    children: (item: T[number], index: number) => U;
 }
 export { ForProps }
 export { ForProps as ForProps_alias_1 }
@@ -3826,10 +3873,10 @@ export { ShowConfirmModalOptions }
 export { ShowConfirmModalOptions as ShowConfirmModalOptions_alias_1 }
 
 /**
- * This module provides a context and hook for the cta modal.
+ * This module provides the context for the cta modal.
  * @module
  */
-declare interface ShowCTAModalOptions {
+export declare interface ShowCTAModalOptions {
     /**
      * The heading of the cta modal.
      */
@@ -3843,15 +3890,10 @@ declare interface ShowCTAModalOptions {
      */
     icon?: ReactNode;
     /**
-     * The actions for the cta modal. Max of 2 actions.
+     * The actions for the cta modal. Requires 2 actions.
      */
-    actions: {
-        text: string;
-        onClick: MouseEventHandler<HTMLButtonElement>;
-    }[];
+    actions: CTAModalActionReturn;
 }
-export { ShowCTAModalOptions }
-export { ShowCTAModalOptions as ShowCTAModalOptions_alias_1 }
 
 /**
  * This module provides a context and hook for the prompt modal.
@@ -4589,6 +4631,20 @@ export { trapFocus as trapFocus_alias_1 }
 
 export { TraversalOrder }
 
+/**
+ * Trigger item for the cta modal which renders content based on the actions.
+ * type.
+ */
+export declare function TriggerItem(props: TriggerItemProps): JSX_2.Element;
+
+/**
+ * This module provides the trigger item for the cta modal.
+ * @module 'react/cta-modal/trigger-item'
+ */
+export declare interface TriggerItemProps extends ButtonProps {
+    asChild?: boolean;
+}
+
 declare type TrProps = TableHTMLAttributes<HTMLTableRowElement>;
 export { TrProps }
 export { TrProps as TrProps_alias_1 }
@@ -4624,6 +4680,7 @@ export { useConfirmModal as useConfirmModal_alias_1 }
 declare function useCTAModal(): CTAModalValue;
 export { useCTAModal }
 export { useCTAModal as useCTAModal_alias_1 }
+export { useCTAModal as useCTAModal_alias_2 }
 
 /**
  * @deprecated use the DatePicker family instead

package/build/modern/chunk-4LSTU6WU.js

@@ -0,0 +1,8 @@
+// src/components/cta-dialog/context.tsx
+import { createContext } from "react";
+var CTAModalContext = createContext(null);
+
+export {
+  CTAModalContext
+};
+//# sourceMappingURL=chunk-4LSTU6WU.js.map

package/build/modern/chunk-4LSTU6WU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/cta-dialog/context.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, type ReactNode } from 'react'\nimport type { CTAModalActionReturn } from './utils'\n\n/**\n * This module provides the context 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. Requires 2 actions.\n   */\n  actions: CTAModalActionReturn\n}\n\nexport interface CTAModalValue {\n  show: (options: ShowCTAModalOptions) => void\n}\n\nexport const CTAModalContext = createContext<CTAModalValue | null>(null)\n"],"mappings":";AAEA,SAAS,qBAAqC;AA+BvC,IAAM,kBAAkB,cAAoC,IAAI;","names":[]}

package/build/modern/{chunk-P3SF56LT.js → chunk-6ICNCCPD.js}

@@ -1,9 +1,9 @@
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
 import {
   SelectParts
 } from "./chunk-XTNGF4D6.js";
+import {
+  Portal
+} from "./chunk-IQJDVFPP.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
@@ -44,4 +44,4 @@ export {
   Select,
   Option
 };
-//# sourceMappingURL=chunk-P3SF56LT.js.map
+//# sourceMappingURL=chunk-6ICNCCPD.js.map

package/build/modern/chunk-DXOKSZVQ.js

@@ -0,0 +1,12 @@
+// src/components/for.tsx
+function For(props) {
+  if (!props.each || !props.each.length) {
+    return props.fallback || null;
+  }
+  return props.each?.map(props.children);
+}
+
+export {
+  For
+};
+//# sourceMappingURL=chunk-DXOKSZVQ.js.map

package/build/modern/chunk-DXOKSZVQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/for.tsx"],"sourcesContent":["import type { ReactNode, JSX } from 'react'\n\nexport interface ForProps<T extends readonly unknown[], U extends JSX.Element> {\n  /**\n   * The array to iterate over.\n   */\n  each: T | undefined | null | false\n  /**\n   * The fallback to render when the array is empty.\n   */\n  fallback?: JSX.Element\n  /**\n   * The children to render for each item in the array.\n   */\n  children: (item: T[number], index: number) => U\n}\n\n/**\n * The For component is used to iterate over an array and render a list of\n * components or display a fallback when the array is empty.\n * Inspired by the `<For>` component from SolidJS.\n *\n * @example\n * ```tsx\n * <For each={['a', 'b', 'c']}>\n *   {(item, index) => <div key={index}>{item}</div>}\n * </For>\n * ```\n */\nexport function For<T extends readonly unknown[], U extends JSX.Element>(\n  props: ForProps<T, U>,\n) {\n  if (!props.each || !props.each.length) {\n    return props.fallback || null\n  }\n\n  return props.each?.map(props.children) as ReactNode\n}\n"],"mappings":";AA6BO,SAAS,IACd,OACA;AACA,MAAI,CAAC,MAAM,QAAQ,CAAC,MAAM,KAAK,QAAQ;AACrC,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,SAAO,MAAM,MAAM,IAAI,MAAM,QAAQ;AACvC;","names":[]}

package/build/modern/chunk-IKDXADLX.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-IKDXADLX.js.map

package/build/modern/chunk-MVO2GNUA.js

@@ -0,0 +1,47 @@
+import {
+  Button
+} from "./chunk-6KZVE4HC.js";
+
+// src/components/cta-dialog/trigger-item.tsx
+import { css, cx } from "@cerberus/styled-system/css";
+import { ark } from "@ark-ui/react/factory";
+import { button } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function TriggerItem(props) {
+  const { asChild, children, ...buttonProps } = props;
+  if (asChild) {
+    return /* @__PURE__ */ jsx(
+      ark.div,
+      {
+        className: cx(
+          button({
+            shape: "rounded",
+            usage: "ghost"
+          }),
+          css({
+            w: "1/2"
+          })
+        ),
+        asChild: true,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...buttonProps,
+      className: css({
+        w: "1/2"
+      }),
+      shape: "rounded",
+      usage: "outlined",
+      children
+    }
+  );
+}
+
+export {
+  TriggerItem
+};
+//# sourceMappingURL=chunk-MVO2GNUA.js.map

package/build/modern/chunk-MVO2GNUA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/cta-dialog/trigger-item.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { Button, type ButtonProps } from '../button/button'\nimport { ark } from '@ark-ui/react/factory'\nimport { button } from '@cerberus/styled-system/recipes'\n\n/**\n * This module provides the trigger item for the cta modal.\n * @module 'react/cta-modal/trigger-item'\n */\n\nexport interface TriggerItemProps extends ButtonProps {\n  asChild?: boolean\n}\n\n/**\n * Trigger item for the cta modal which renders content based on the actions.\n * type.\n */\nexport function TriggerItem(props: TriggerItemProps) {\n  const { asChild, children, ...buttonProps } = props\n\n  if (asChild) {\n    return (\n      <ark.div\n        className={cx(\n          button({\n            shape: 'rounded',\n            usage: 'ghost',\n          }),\n          css({\n            w: '1/2',\n          }),\n        )}\n        asChild\n      >\n        {children}\n      </ark.div>\n    )\n  }\n\n  return (\n    <Button\n      {...buttonProps}\n      className={css({\n        w: '1/2',\n      })}\n      shape=\"rounded\"\n      usage=\"outlined\"\n    >\n      {children}\n    </Button>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,KAAK,UAAU;AAExB,SAAS,WAAW;AACpB,SAAS,cAAc;AAoBjB;AALC,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;AAE9C,MAAI,SAAS;AACX,WACE;AAAA,MAAC,IAAI;AAAA,MAAJ;AAAA,QACC,WAAW;AAAA,UACT,OAAO;AAAA,YACL,OAAO;AAAA,YACP,OAAO;AAAA,UACT,CAAC;AAAA,UACD,IAAI;AAAA,YACF,GAAG;AAAA,UACL,CAAC;AAAA,QACH;AAAA,QACA,SAAO;AAAA,QAEN;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,IAAI;AAAA,QACb,GAAG;AAAA,MACL,CAAC;AAAA,MACD,OAAM;AAAA,MACN,OAAM;AAAA,MAEL;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/build/modern/{chunk-CMYD5KWA.js → chunk-O542MPR7.js}

@@ -1,3 +1,6 @@
+import {
+  Text
+} from "./chunk-RU5LOXWI.js";
 import {
   Dialog,
   DialogDescription,
@@ -7,9 +10,6 @@ import {
 import {
   Avatar
 } from "./chunk-SXLPDPOZ.js";
-import {
-  Text
-} from "./chunk-RU5LOXWI.js";
 import {
   FieldLabel,
   FieldRoot,
@@ -209,4 +209,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-CMYD5KWA.js.map
+//# sourceMappingURL=chunk-O542MPR7.js.map

package/build/modern/chunk-PLHYOCY3.js

@@ -0,0 +1,23 @@
+// src/components/cta-dialog/utils.ts
+function createCTAModalActions(providedActions) {
+  if (providedActions.length !== 2) {
+    throw new Error("CTAModal must include 2 actions");
+  }
+  if (providedActions.every(
+    (action) => action?.handleClick
+  )) {
+    return {
+      type: "btnAction",
+      _actions: providedActions
+    };
+  }
+  return {
+    type: "reactNode",
+    _actions: providedActions
+  };
+}
+
+export {
+  createCTAModalActions
+};
+//# sourceMappingURL=chunk-PLHYOCY3.js.map

package/build/modern/chunk-PLHYOCY3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/cta-dialog/utils.ts"],"sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react'\n\n/**\n * This module provide utility functions for the cta modal.\n * @module 'react/cta-modal/utils'\n */\n\nexport type CTAButtonAction = {\n  /**\n   * The text of the button.\n   */\n  text: string\n  /**\n   * The onClick handler for the button.\n   */\n  handleClick: MouseEventHandler<HTMLButtonElement>\n}\n\nexport type CTAModalAction = (CTAButtonAction | ReactNode)[]\n\nexport interface CTAModalActionReturn {\n  /**\n   * The type of the action content.\n   */\n  type: 'reactNode' | 'btnAction'\n  /**\n   * The actions for the cta modal. Max of 2 actions.\n   */\n  _actions: CTAModalAction\n}\n\n/**\n * Creates the action data to pass to the cta modal `show` method.\n */\nexport function createCTAModalActions(\n  providedActions: CTAModalAction,\n): CTAModalActionReturn {\n  if (providedActions.length !== 2) {\n    throw new Error('CTAModal must include 2 actions')\n  }\n\n  if (\n    providedActions.every(\n      (action) => (action as unknown as CTAButtonAction)?.handleClick,\n    )\n  ) {\n    return {\n      type: 'btnAction',\n      _actions: providedActions as CTAButtonAction[],\n    }\n  }\n\n  return {\n    type: 'reactNode',\n    _actions: providedActions as ReactNode[],\n  }\n}\n"],"mappings":";AAkCO,SAAS,sBACd,iBACsB;AACtB,MAAI,gBAAgB,WAAW,GAAG;AAChC,UAAM,IAAI,MAAM,iCAAiC;AAAA,EACnD;AAEA,MACE,gBAAgB;AAAA,IACd,CAAC,WAAY,QAAuC;AAAA,EACtD,GACA;AACA,WAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;","names":[]}

package/build/modern/{chunk-ZDANBCM3.js → chunk-QEM3M4N3.js}

@@ -1,3 +1,12 @@
+import {
+  CTAModalContext
+} from "./chunk-4LSTU6WU.js";
+import {
+  TriggerItem
+} from "./chunk-MVO2GNUA.js";
+import {
+  For
+} from "./chunk-DXOKSZVQ.js";
 import {
   DialogCloseIconTrigger
 } from "./chunk-6BN3XKQF.js";
@@ -13,26 +22,19 @@ import {
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
-import {
-  Button
-} from "./chunk-6KZVE4HC.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
 
-// src/context/cta-modal.tsx
+// src/components/cta-dialog/provider.tsx
 import {
-  createContext,
   useCallback,
   useContext,
   useMemo,
   useState
 } from "react";
-import { HStack } from "@cerberus/styled-system/jsx";
-import { css } from "@cerberus/styled-system/css";
-import { VStack } from "@cerberus/styled-system/jsx";
+import { HStack, VStack } from "@cerberus/styled-system/jsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-var CTAModalContext = createContext(null);
 function CTAModal(props) {
   const [open, setOpen] = useState(false);
   const [content, setContent] = useState(null);
@@ -41,12 +43,6 @@ function CTAModal(props) {
   const { confirmModal: FallbackIcon } = icons;
   const handleShow = useCallback(
     (options) => {
-      const maxActions = 2;
-      if (options.actions.length > maxActions) {
-        throw new Error(
-          `CTA Modal only supports a maximum of ${maxActions} actions.`
-        );
-      }
       setContent({ ...options });
       setOpen(true);
     },
@@ -54,10 +50,10 @@ function CTAModal(props) {
   );
   const handleActionClick = useCallback(
     (event) => {
-      const index = event.currentTarget.getAttribute("data-index");
-      const action = content?.actions[Number(index)];
-      const { onClick } = action || {};
-      onClick?.(event);
+      const index = Number(event.currentTarget.getAttribute("data-index"));
+      const contentActions = content?.actions;
+      const action = contentActions._actions[index];
+      action?.handleClick?.(event);
       setOpen(false);
     },
     [content, setOpen]
@@ -93,20 +89,15 @@ function CTAModal(props) {
           /* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
           /* @__PURE__ */ jsx(DialogDescription, { children: content?.description })
         ] }) }),
-        /* @__PURE__ */ jsx(HStack, { gap: "md", w: "full", children: /* @__PURE__ */ jsx(Show, { when: Boolean(content?.actions?.length), children: content?.actions?.map((action, index) => /* @__PURE__ */ jsx(
-          Button,
+        /* @__PURE__ */ jsx(HStack, { gap: "md", w: "full", children: /* @__PURE__ */ jsx(For, { each: content?.actions._actions, children: (action, index) => /* @__PURE__ */ jsx(
+          Show,
           {
-            "data-index": index,
-            className: css({
-              w: "1/2"
-            }),
-            onClick: handleActionClick,
-            shape: "rounded",
-            usage: "outlined",
-            children: action.text
+            when: content?.actions?.type === "btnAction",
+            fallback: /* @__PURE__ */ jsx(TriggerItem, { asChild: true, children: action }),
+            children: /* @__PURE__ */ jsx(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action?.text })
           },
           index
-        )) }) })
+        ) }) })
       ] })
     ] }) })
   ] });
@@ -123,4 +114,4 @@ export {
   CTAModal,
   useCTAModal
 };
-//# sourceMappingURL=chunk-ZDANBCM3.js.map
+//# sourceMappingURL=chunk-QEM3M4N3.js.map

package/build/modern/chunk-QEM3M4N3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/cta-dialog/provider.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { Show } from '../Show'\nimport { For } from '../for'\nimport { Avatar } from '../Avatar'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../Dialog'\nimport { DialogCloseIconTrigger } from '../Dialog.client'\nimport type { CTAButtonAction, CTAModalActionReturn } from './utils'\nimport {\n  CTAModalContext,\n  type CTAModalValue,\n  type ShowCTAModalOptions,\n} from './context'\nimport { TriggerItem } from './trigger-item'\n\n/**\n * This module provides the provider and hook for the cta modal.\n * @module 'react/cta-modal/provider'\n */\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<object>) {\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      setContent({ ...options })\n      setOpen(true)\n    },\n    [setOpen],\n  )\n\n  const handleActionClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      const index = Number(event.currentTarget.getAttribute('data-index'))\n      const contentActions = content?.actions as CTAModalActionReturn\n      const action = contentActions._actions[index] as CTAButtonAction\n      action?.handleClick?.(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              <For each={content?.actions._actions}>\n                {(action, index) => (\n                  <Show\n                    key={index}\n                    when={content?.actions?.type === 'btnAction'}\n                    fallback={\n                      <TriggerItem asChild>{action as ReactNode}</TriggerItem>\n                    }\n                  >\n                    <TriggerItem data-index={index} onClick={handleActionClick}>\n                      {(action as CTAButtonAction)?.text}\n                    </TriggerItem>\n                  </Show>\n                )}\n              </For>\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,QAAQ,cAAc;AAiGrB,cAII,YAJJ;AAxCH,SAAS,SAAS,OAAkC;AACzD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAqC,IAAI;AACvE,QAAM,cAAc,SAAS;AAE7B,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,cAAc,aAAa,IAAI;AAEvC,QAAM,aAAa;AAAA,IACjB,CAAC,YAAiC;AAChC,iBAAW,EAAE,GAAG,QAAQ,CAAC;AACzB,cAAQ,IAAI;AAAA,IACd;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,UAAyC;AACxC,YAAM,QAAQ,OAAO,MAAM,cAAc,aAAa,YAAY,CAAC;AACnE,YAAM,iBAAiB,SAAS;AAChC,YAAM,SAAS,eAAe,SAAS,KAAK;AAC5C,cAAQ,cAAc,KAAK;AAC3B,cAAQ,KAAK;AAAA,IACf;AAAA,IACA,CAAC,SAAS,OAAO;AAAA,EACnB;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OACvB;AAAA,UAAM;AAAA,IAEP,oBAAC,kBAAe,MAAY,cAAc,CAAC,MAAM,QAAQ,EAAE,IAAI,GAC7D,+BAAC,UAAO,MAAK,MACX;AAAA,0BAAC,0BAAuB;AAAA,MAExB,qBAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA,4BAAC,UAAO,YAAW,cAAa,KAAI,MAAK,GAAE,QACzC,+BAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,UAAS;AAAA,cACT,MACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,QAAQ,WAAW;AAAA,kBACzB,UAAU,oBAAC,gBAAa,MAAM,IAAI;AAAA,kBAEjC;AAAA;AAAA,cACH;AAAA,cAEF,KAAI;AAAA;AAAA,UACN;AAAA,UACA,oBAAC,iBAAe,mBAAS,SAAQ;AAAA,UACjC,oBAAC,qBAAmB,mBAAS,aAAY;AAAA,WAC3C,GACF;AAAA,QAEA,oBAAC,UAAO,KAAI,MAAK,GAAE,QACjB,8BAAC,OAAI,MAAM,SAAS,QAAQ,UACzB,WAAC,QAAQ,UACR;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM,SAAS,SAAS,SAAS;AAAA,YACjC,UACE,oBAAC,eAAY,SAAO,MAAE,kBAAoB;AAAA,YAG5C,8BAAC,eAAY,cAAY,OAAO,SAAS,mBACrC,kBAA4B,MAChC;AAAA;AAAA,UARK;AAAA,QASP,GAEJ,GACF;AAAA,SACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,cAA6B;AAC3C,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/modern/{chunk-FMRWRVUS.js → chunk-Z4342DRO.js}

@@ -7,9 +7,6 @@ import {
 import {
   NotificationHeading
 } from "./chunk-SLHYBPJ5.js";
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
 import {
   addNotification,
   clearNotificationState,
@@ -17,6 +14,9 @@ import {
   removeNotification,
   updateNotificationState
 } from "./chunk-V3M3ZOQI.js";
+import {
+  Portal
+} from "./chunk-IQJDVFPP.js";
 import {
   Button
 } from "./chunk-6KZVE4HC.js";
@@ -177,4 +177,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-FMRWRVUS.js.map
+//# sourceMappingURL=chunk-Z4342DRO.js.map

package/build/modern/components/cta-dialog/context.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  CTAModalContext
+} from "../../chunk-4LSTU6WU.js";
+export {
+  CTAModalContext
+};
+//# sourceMappingURL=context.js.map

package/build/modern/components/cta-dialog/context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/cta-dialog/index.js

@@ -0,0 +1,26 @@
+import "../../chunk-IKDXADLX.js";
+import {
+  CTAModal,
+  useCTAModal
+} from "../../chunk-QEM3M4N3.js";
+import "../../chunk-4LSTU6WU.js";
+import "../../chunk-MVO2GNUA.js";
+import "../../chunk-DXOKSZVQ.js";
+import "../../chunk-6BN3XKQF.js";
+import "../../chunk-APD6IX5R.js";
+import "../../chunk-TFL56AYR.js";
+import "../../chunk-SXLPDPOZ.js";
+import "../../chunk-IQJDVFPP.js";
+import {
+  createCTAModalActions
+} from "../../chunk-PLHYOCY3.js";
+import "../../chunk-GITT5645.js";
+import "../../chunk-6KZVE4HC.js";
+import "../../chunk-7SYJFI5E.js";
+import "../../chunk-BUVVRQLZ.js";
+export {
+  CTAModal,
+  createCTAModalActions,
+  useCTAModal
+};
+//# sourceMappingURL=index.js.map

package/build/modern/components/cta-dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/cta-dialog/provider.js

@@ -0,0 +1,22 @@
+"use client";
+import {
+  CTAModal,
+  useCTAModal
+} from "../../chunk-QEM3M4N3.js";
+import "../../chunk-4LSTU6WU.js";
+import "../../chunk-MVO2GNUA.js";
+import "../../chunk-DXOKSZVQ.js";
+import "../../chunk-6BN3XKQF.js";
+import "../../chunk-APD6IX5R.js";
+import "../../chunk-TFL56AYR.js";
+import "../../chunk-SXLPDPOZ.js";
+import "../../chunk-IQJDVFPP.js";
+import "../../chunk-GITT5645.js";
+import "../../chunk-6KZVE4HC.js";
+import "../../chunk-7SYJFI5E.js";
+import "../../chunk-BUVVRQLZ.js";
+export {
+  CTAModal,
+  useCTAModal
+};
+//# sourceMappingURL=provider.js.map

package/build/modern/components/cta-dialog/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/cta-dialog/trigger-item.js

@@ -0,0 +1,10 @@
+import {
+  TriggerItem
+} from "../../chunk-MVO2GNUA.js";
+import "../../chunk-6KZVE4HC.js";
+import "../../chunk-7SYJFI5E.js";
+import "../../chunk-BUVVRQLZ.js";
+export {
+  TriggerItem
+};
+//# sourceMappingURL=trigger-item.js.map

package/build/modern/components/cta-dialog/trigger-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/cta-dialog/utils.js

@@ -0,0 +1,7 @@
+import {
+  createCTAModalActions
+} from "../../chunk-PLHYOCY3.js";
+export {
+  createCTAModalActions
+};
+//# sourceMappingURL=utils.js.map

package/build/modern/components/cta-dialog/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/for.js

@@ -1,6 +1,6 @@
 import {
   For
-} from "../chunk-IIH363FO.js";
+} from "../chunk-DXOKSZVQ.js";
 export {
   For
 };

package/build/modern/components/select/index.js

@@ -6,8 +6,7 @@ import {
 import {
   Option,
   Select
-} from "../../chunk-P3SF56LT.js";
-import "../../chunk-IQJDVFPP.js";
+} from "../../chunk-6ICNCCPD.js";
 import {
   SelectParts
 } from "../../chunk-XTNGF4D6.js";
@@ -29,6 +28,7 @@ import {
   SelectValueText,
   createSelectCollection
 } from "../../chunk-QCBLRACK.js";
+import "../../chunk-IQJDVFPP.js";
 import "../../chunk-GITT5645.js";
 import "../../chunk-BUVVRQLZ.js";
 export {

package/build/modern/components/select/select.js

@@ -2,10 +2,10 @@
 import {
   Option,
   Select
-} from "../../chunk-P3SF56LT.js";
-import "../../chunk-IQJDVFPP.js";
+} from "../../chunk-6ICNCCPD.js";
 import "../../chunk-XTNGF4D6.js";
 import "../../chunk-QCBLRACK.js";
+import "../../chunk-IQJDVFPP.js";
 import "../../chunk-GITT5645.js";
 import "../../chunk-BUVVRQLZ.js";
 export {

package/build/modern/context/notification-center.js

@@ -2,12 +2,12 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-FMRWRVUS.js";
+} from "../chunk-Z4342DRO.js";
 import "../chunk-RDRD6ACD.js";
 import "../chunk-UXY3KCC3.js";
 import "../chunk-SLHYBPJ5.js";
-import "../chunk-IQJDVFPP.js";
 import "../chunk-V3M3ZOQI.js";
+import "../chunk-IQJDVFPP.js";
 import "../chunk-GITT5645.js";
 import "../chunk-6KZVE4HC.js";
 import "../chunk-7SYJFI5E.js";