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

package/src/components/{Dialog.client.tsx → dialog/close-icon-trigger.tsx}

@@ -1,29 +1,27 @@
 'use client'
 
-import {
-  Dialog as ArkDialog,
-  type DialogCloseTriggerProps,
-} from '@ark-ui/react'
+import { type DialogCloseTriggerProps } from '@ark-ui/react/dialog'
+import { useCerberusContext } from '../../context/cerberus'
+import { IconButton } from '../IconButton'
+import { DialogCloseTrigger } from './primitives'
 import { dialog } from '@cerberus/styled-system/recipes'
 import { cx } from '@cerberus/styled-system/css'
-import { IconButton } from './IconButton'
-import { useCerberusContext } from '../context/cerberus'
 
 /**
- * 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
  */
 
 export function DialogCloseIconTrigger(props: DialogCloseTriggerProps) {
+  const styles = dialog()
+
   const { icons } = useCerberusContext()
   const { close: CloseIcon } = icons
 
-  const styles = dialog()
-
   return (
-    <ArkDialog.CloseTrigger
+    <DialogCloseTrigger
       {...props}
-      className={cx(props.className, styles.closeTrigger)}
+      className={cx(styles.closeTrigger, props.className)}
       asChild
     >
       <IconButton
@@ -34,6 +32,6 @@ export function DialogCloseIconTrigger(props: DialogCloseTriggerProps) {
       >
         <CloseIcon />
       </IconButton>
-    </ArkDialog.CloseTrigger>
+    </DialogCloseTrigger>
   )
 }

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,41 @@
+import type { DialogContentProps } from '@ark-ui/react/dialog'
+import type { DialogVariantProps } from '@cerberus/styled-system/recipes'
+import { Portal } from '../Portal'
+import { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'
+
+/**
+ * This module contains and abstraction of the Dialog primitives.
+ * @module 'dialog'
+ */
+
+export interface DialogProps
+  extends Omit<DialogContentProps, 'size'>,
+    DialogVariantProps {}
+
+/**
+ * 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>
+ *   <DialogTrigger asChild>
+ *    <Button>Open Dialog</Button>
+ *  </DialogTrigger>
+ *  <Dialog>
+ *    <Text>Dialog Content</Text>
+ *  </Dialog>
+ * </DialogProvider>
+ * ```
+ */
+export function Dialog(props: DialogProps) {
+  return (
+    <Portal>
+      <DialogBackdrop />
+      <DialogPositioner>
+        <DialogContent {...props} />
+      </DialogPositioner>
+    </Portal>
+  )
+}

package/src/components/dialog/index.ts

@@ -0,0 +1,4 @@
+export * from './parts'
+export * from './primitives'
+export * from './close-icon-trigger'
+export * from './dialog'

package/src/components/dialog/parts.ts

@@ -0,0 +1,71 @@
+import type { ElementType } from 'react'
+import {
+  DialogBackdrop,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogDescription,
+  DialogHeading,
+  DialogPositioner,
+  DialogRoot,
+  DialogTrigger,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Dialog component.
+ * @module 'dialog/parts'
+ */
+
+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
+}
+
+/**
+ * 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.
+ */
+export const DialogParts: DialogPartsValue = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Backdrop: DialogBackdrop,
+  Positioner: DialogPositioner,
+  Content: DialogContent,
+  Heading: DialogHeading,
+  Description: DialogDescription,
+  CloseTrigger: DialogCloseTrigger,
+}

package/src/components/dialog/primitives.tsx

@@ -0,0 +1,116 @@
+import {
+  Dialog,
+  type DialogBackdropProps,
+  type DialogContentProps,
+  type DialogDescriptionProps,
+  type DialogPositionerProps,
+  type DialogRootProps,
+  type DialogTitleProps,
+  type DialogTriggerProps,
+} from '@ark-ui/react/dialog'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  dialog,
+  type DialogVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the primitives of the Dialog component.
+ * @module 'dialog/primitives'
+ */
+
+/**
+ * The provider that controls the dialog components.
+ */
+export function DialogRoot(props: DialogRootProps) {
+  return <Dialog.Root {...props} />
+}
+
+/**
+ * The trigger that opens the dialog.
+ */
+export function DialogTrigger(props: DialogTriggerProps) {
+  const styles = dialog()
+  return (
+    <Dialog.Trigger
+      {...props}
+      className={cx(styles.trigger, props.className)}
+    />
+  )
+}
+
+/**
+ * The overlay of the dialog.
+ */
+export function DialogBackdrop(props: DialogBackdropProps) {
+  const styles = dialog()
+  return (
+    <Dialog.Backdrop
+      {...props}
+      className={cx(styles.backdrop, props.className)}
+    />
+  )
+}
+
+/**
+ * The container that positions the dialog.
+ */
+export function DialogPositioner(props: DialogPositionerProps) {
+  const styles = dialog()
+  return (
+    <Dialog.Positioner
+      {...props}
+      className={cx(styles.positioner, props.className)}
+    />
+  )
+}
+
+/**
+ * The visible content of the dialog.
+ */
+export function DialogContent(props: DialogContentProps & DialogVariantProps) {
+  const { size, ...contentProps } = props
+  const styles = dialog({ size })
+  return (
+    <Dialog.Content
+      {...contentProps}
+      className={cx(styles.content, contentProps.className)}
+    />
+  )
+}
+
+/**
+ * The heading of the dialog.
+ */
+export function DialogHeading(props: DialogTitleProps) {
+  const styles = dialog()
+  return (
+    <Dialog.Title {...props} className={cx(styles.title, props.className)} />
+  )
+}
+
+/**
+ * The description of the dialog.
+ */
+export function DialogDescription(props: DialogDescriptionProps) {
+  const styles = dialog()
+  return (
+    <Dialog.Description
+      {...props}
+      className={cx(styles.description, props.className)}
+    />
+  )
+}
+
+/**
+ * The trigger that closes the dialog.
+ */
+export function DialogCloseTrigger(props: DialogTriggerProps) {
+  return <Dialog.CloseTrigger {...props} />
+}
+
+/**
+ * The provider that controls the dialog components. This is a named export of
+ * the DialogRoot primitive.
+ */
+export const DialogProvider = DialogRoot

package/src/context/confirm-modal.tsx

@@ -23,7 +23,7 @@ import {
   DialogDescription,
   DialogHeading,
   DialogProvider,
-} from '../components/Dialog'
+} from '../components/dialog'
 
 /**
  * This module provides a context and hook for the confirm modal.

package/src/context/notification-center.tsx

@@ -10,15 +10,15 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from 'react'
+import { animateIn, vstack } from '@cerberus/styled-system/patterns'
+import { notification } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
 import { Show } from '../components/Show'
 import { NotificationHeading } from '../components/NotificationHeading'
 import { NotificationDescription } from '../components/NotificationDescription'
 import { Notification } from '../components/Notification'
-import { animateIn, vstack } from '@cerberus/styled-system/patterns'
 import { Portal, type PortalProps } from '../components/Portal'
-import { notification } from '@cerberus/styled-system/recipes'
 import { Button } from '../components/button/button'
-import { cx } from '@cerberus/styled-system/css'
 import {
   addNotification,
   clearNotificationState,

package/src/context/prompt-modal.tsx

@@ -26,7 +26,7 @@ import {
   DialogDescription,
   DialogHeading,
   DialogProvider,
-} from '../components/Dialog'
+} from '../components/dialog'
 
 /**
  * This module provides a context and hook for the prompt modal.

package/src/index.ts

@@ -32,8 +32,7 @@ export * from './components/CircularProgress'
 export * from './components/cta-dialog/index'
 export * from './components/DatePicker.client'
 export * from './components/DatePicker.server'
-export * from './components/Dialog'
-export * from './components/Dialog.client'
+export * from './components/dialog/index'
 export * from './components/Droppable'
 export * from './components/FeatureFlag'
 export * from './components/field/index'

package/build/legacy/components/Dialog.cjs

@@ -1,86 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/Dialog.tsx
-var Dialog_exports = {};
-__export(Dialog_exports, {
-  Dialog: () => Dialog,
-  DialogBackdrop: () => DialogBackdrop,
-  DialogCloseTrigger: () => DialogCloseTrigger,
-  DialogContent: () => DialogContent,
-  DialogDescription: () => DialogDescription,
-  DialogHeading: () => DialogHeading,
-  DialogPositioner: () => DialogPositioner,
-  DialogProvider: () => DialogProvider,
-  DialogTrigger: () => DialogTrigger
-});
-module.exports = __toCommonJS(Dialog_exports);
-var import_react2 = require("@ark-ui/react");
-var import_recipes = require("@cerberus/styled-system/recipes");
-
-// src/components/Portal.tsx
-var import_react = require("@ark-ui/react");
-var Portal = import_react.Portal;
-
-// src/components/Dialog.tsx
-var import_css = require("@cerberus/styled-system/css");
-var import_jsx_runtime = require("react/jsx-runtime");
-function DialogProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Dialog.Root, { ...props });
-}
-function Dialog(props) {
-  const { size, ...contentProps } = props;
-  const styles = (0, import_recipes.dialog)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogBackdrop, { className: styles.backdrop }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPositioner, { className: styles.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContent, { className: styles.content, ...contentProps }) })
-  ] });
-}
-function DialogHeading(props) {
-  const styles = (0, import_recipes.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Dialog.Title, { ...props, className: (0, import_css.cx)(props.className, styles.title) });
-}
-function DialogDescription(props) {
-  const styles = (0, import_recipes.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react2.Dialog.Description,
-    {
-      ...props,
-      className: (0, import_css.cx)(props.className, styles.description)
-    }
-  );
-}
-var DialogTrigger = import_react2.Dialog.Trigger;
-var DialogCloseTrigger = import_react2.Dialog.CloseTrigger;
-var DialogBackdrop = import_react2.Dialog.Backdrop;
-var DialogPositioner = import_react2.Dialog.Positioner;
-var DialogContent = import_react2.Dialog.Content;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Dialog,
-  DialogBackdrop,
-  DialogCloseTrigger,
-  DialogContent,
-  DialogDescription,
-  DialogHeading,
-  DialogPositioner,
-  DialogProvider,
-  DialogTrigger
-});
-//# sourceMappingURL=Dialog.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Dialog.tsx","../../../src/components/Portal.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAKO;AACP,qBAGO;;;ACTP,mBAGO;AA2BA,IAAM,SAAS,aAAAC;;;ADnBtB,iBAAmB;AAqBV;AADF,SAAS,eAAe,OAA4B;AACzD,SAAO,4CAAC,cAAAC,OAAU,MAAV,EAAgB,GAAG,OAAO;AACpC;AAqBO,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,aAAS,uBAAO,EAAE,KAAK,CAAC;AAC9B,SACE,6CAAC,UACC;AAAA,gDAAC,kBAAe,WAAW,OAAO,UAAU;AAAA,IAC5C,4CAAC,oBAAiB,WAAW,OAAO,YAClC,sDAAC,iBAAc,WAAW,OAAO,SAAU,GAAG,cAAc,GAC9D;AAAA,KACF;AAEJ;AAkBO,SAAS,cAAc,OAAyB;AACrD,QAAM,aAAS,uBAAO;AACtB,SACE,4CAAC,cAAAA,OAAU,OAAV,EAAiB,GAAG,OAAO,eAAW,eAAG,MAAM,WAAW,OAAO,KAAK,GAAG;AAE9E;AAkBO,SAAS,kBAAkB,OAAyB;AACzD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,cAAAA,OAAU;AAAA,IAAV;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,MAAM,WAAW,OAAO,WAAW;AAAA;AAAA,EACnD;AAEJ;AAaO,IAAM,gBAAgB,cAAAA,OAAU;AAmBhC,IAAM,qBAAqB,cAAAA,OAAU;AAMrC,IAAM,iBAAiB,cAAAA,OAAU;AAMjC,IAAM,mBAAmB,cAAAA,OAAU;AAMnC,IAAM,gBAAgB,cAAAA,OAAU;","names":["import_react","ArkPortal","ArkDialog"]}

package/build/legacy/components/Dialog.client.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Dialog.client.tsx","../../../src/components/IconButton.tsx","../../../src/context/cerberus.tsx"],"sourcesContent":["'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","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAGO;AACP,IAAAC,kBAAuB;AACvB,IAAAC,cAAmB;;;ACNnB,iBAAmB;AACnB,qBAGO;AAuBH;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,MAAM,GAAG,YAAY,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,aAAa;AAAA,MACzB,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,2BAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;;;ACvCA,mBAAkE;AAyB9D,IAAAC,sBAAA;AAfJ,IAAM,sBAAkB,4BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,yBAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;AFTQ,IAAAC,sBAAA;AAlBD,SAAS,uBAAuB,OAAgC;AACrE,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,QAAM,aAAS,wBAAO;AAEtB,SACE;AAAA,IAAC,cAAAC,OAAU;AAAA,IAAV;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,gBAAG,MAAM,WAAW,OAAO,YAAY;AAAA,MAClD,SAAO;AAAA,MAEP;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAM;AAAA,UAEN,uDAAC,aAAU;AAAA;AAAA,MACb;AAAA;AAAA,EACF;AAEJ;","names":["import_react","import_recipes","import_css","import_jsx_runtime","import_jsx_runtime","ArkDialog"]}

package/build/modern/chunk-6BN3XKQF.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Dialog.client.tsx"],"sourcesContent":["'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"],"mappings":";;;;;;;;AAEA;AAAA,EACE,UAAU;AAAA,OAEL;AACP,SAAS,cAAc;AACvB,SAAS,UAAU;AA2BX;AAlBD,SAAS,uBAAuB,OAAgC;AACrE,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,QAAM,SAAS,OAAO;AAEtB,SACE;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,OAAO,YAAY;AAAA,MAClD,SAAO;AAAA,MAEP;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAM;AAAA,UAEN,8BAAC,aAAU;AAAA;AAAA,MACb;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"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-TFL56AYR.js

@@ -1,56 +0,0 @@
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
-
-// src/components/Dialog.tsx
-import {
-  Dialog as ArkDialog
-} from "@ark-ui/react";
-import {
-  dialog
-} from "@cerberus/styled-system/recipes";
-import { cx } from "@cerberus/styled-system/css";
-import { jsx, jsxs } from "react/jsx-runtime";
-function DialogProvider(props) {
-  return /* @__PURE__ */ jsx(ArkDialog.Root, { ...props });
-}
-function Dialog(props) {
-  const { size, ...contentProps } = props;
-  const styles = dialog({ size });
-  return /* @__PURE__ */ jsxs(Portal, { children: [
-    /* @__PURE__ */ jsx(DialogBackdrop, { className: styles.backdrop }),
-    /* @__PURE__ */ jsx(DialogPositioner, { className: styles.positioner, children: /* @__PURE__ */ jsx(DialogContent, { className: styles.content, ...contentProps }) })
-  ] });
-}
-function DialogHeading(props) {
-  const styles = dialog();
-  return /* @__PURE__ */ jsx(ArkDialog.Title, { ...props, className: cx(props.className, styles.title) });
-}
-function DialogDescription(props) {
-  const styles = dialog();
-  return /* @__PURE__ */ jsx(
-    ArkDialog.Description,
-    {
-      ...props,
-      className: cx(props.className, styles.description)
-    }
-  );
-}
-var DialogTrigger = ArkDialog.Trigger;
-var DialogCloseTrigger = ArkDialog.CloseTrigger;
-var DialogBackdrop = ArkDialog.Backdrop;
-var DialogPositioner = ArkDialog.Positioner;
-var DialogContent = ArkDialog.Content;
-
-export {
-  DialogProvider,
-  Dialog,
-  DialogHeading,
-  DialogDescription,
-  DialogTrigger,
-  DialogCloseTrigger,
-  DialogBackdrop,
-  DialogPositioner,
-  DialogContent
-};
-//# sourceMappingURL=chunk-TFL56AYR.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Dialog.tsx"],"sourcesContent":["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"],"mappings":";;;;;AAAA;AAAA,EACE,UAAU;AAAA,OAIL;AACP;AAAA,EACE;AAAA,OAEK;AAEP,SAAS,UAAU;AAqBV,cA0BL,YA1BK;AADF,SAAS,eAAe,OAA4B;AACzD,SAAO,oBAAC,UAAU,MAAV,EAAgB,GAAG,OAAO;AACpC;AAqBO,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAC9B,SACE,qBAAC,UACC;AAAA,wBAAC,kBAAe,WAAW,OAAO,UAAU;AAAA,IAC5C,oBAAC,oBAAiB,WAAW,OAAO,YAClC,8BAAC,iBAAc,WAAW,OAAO,SAAU,GAAG,cAAc,GAC9D;AAAA,KACF;AAEJ;AAkBO,SAAS,cAAc,OAAyB;AACrD,QAAM,SAAS,OAAO;AACtB,SACE,oBAAC,UAAU,OAAV,EAAiB,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,OAAO,KAAK,GAAG;AAE9E;AAkBO,SAAS,kBAAkB,OAAyB;AACzD,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,OAAO,WAAW;AAAA;AAAA,EACnD;AAEJ;AAaO,IAAM,gBAAgB,UAAU;AAmBhC,IAAM,qBAAqB,UAAU;AAMrC,IAAM,iBAAiB,UAAU;AAMjC,IAAM,mBAAmB,UAAU;AAMnC,IAAM,gBAAgB,UAAU;","names":[]}

package/build/modern/components/Dialog.client.js

@@ -1,10 +0,0 @@
-"use client";
-import {
-  DialogCloseIconTrigger
-} from "../chunk-6BN3XKQF.js";
-import "../chunk-APD6IX5R.js";
-import "../chunk-GITT5645.js";
-export {
-  DialogCloseIconTrigger
-};
-//# sourceMappingURL=Dialog.client.js.map