@cerberus-design/react 0.14.2-next-81321e7 → 0.14.2-next-2f75188

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

@@ -41,7 +41,13 @@ 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 { DialogHTMLAttributes } from 'react';
+import { DialogRootProps } from '@ark-ui/react';
+import { DialogTitleProps } from '@ark-ui/react';
+import { DialogVariantProps } from '@cerberus/styled-system/recipes';
 import type { Dispatch } from 'react';
 import { DistanceMeasurement } from '@dnd-kit/core';
 import { DndContext } from '@dnd-kit/core';
@@ -845,7 +851,9 @@ export { DatePicker as DatePicker_alias_1 }
  * </Field>
  * ```
  */
-declare function DatePickerCalendar(): JSX_2.Element;
+declare function DatePickerCalendar(props: {
+    withModal?: boolean;
+}): JSX_2.Element;
 export { DatePickerCalendar }
 export { DatePickerCalendar as DatePickerCalendar_alias_1 }
 
@@ -863,7 +871,9 @@ export { DatePickerCalendar as DatePickerCalendar_alias_1 }
  * </Field>
  * ```
  */
-declare function DatePickerContent(props: DatePickerContentProps): JSX_2.Element;
+declare function DatePickerContent(props: DatePickerContentProps & {
+    withModal?: boolean;
+}): JSX_2.Element;
 export { DatePickerContent }
 export { DatePickerContent as DatePickerContent_alias_1 }
 
@@ -1144,6 +1154,162 @@ declare interface DestructiveConfirmOptions extends BaseConfirmOptions {
 export { DestructiveConfirmOptions }
 export { DestructiveConfirmOptions as DestructiveConfirmOptions_alias_1 }
 
+/**
+ * The content of 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>
+ *  </Dialog>
+ * </DialogProvider>
+ * ```
+ */
+declare function Dialog(props: DialogProps): JSX_2.Element;
+export { Dialog }
+export { Dialog as Dialog_alias_1 }
+
+/**
+ * The backdrop of the dialog. Must be used within the `DialogProvider`
+ * component.
+ */
+declare const DialogBackdrop: ForwardRefExoticComponent<Dialog_2.BackdropProps & RefAttributes<HTMLDivElement>>;
+export { DialogBackdrop }
+export { DialogBackdrop as DialogBackdrop_alias_1 }
+
+/**
+ * This module contains client-side components for the Dialog family.
+ * @module @cerberus-design/react/dialog
+ */
+declare function DialogCloseIconTrigger(props: DialogCloseTriggerProps): JSX_2.Element;
+export { DialogCloseIconTrigger }
+export { DialogCloseIconTrigger as DialogCloseIconTrigger_alias_1 }
+
+/**
+ * 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>
+ * ```
+ */
+declare const DialogCloseTrigger: ForwardRefExoticComponent<Dialog_2.CloseTriggerProps & RefAttributes<HTMLButtonElement>>;
+export { DialogCloseTrigger }
+export { DialogCloseTrigger as DialogCloseTrigger_alias_1 }
+
+/**
+ * The content of the dialog. Must be used within the `DialogProvider`
+ * component.
+ */
+declare const DialogContent: ForwardRefExoticComponent<Dialog_2.ContentProps & RefAttributes<HTMLDivElement>>;
+export { DialogContent }
+export { DialogContent as DialogContent_alias_1 }
+
+/**
+ * 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>
+ * ```
+ */
+declare function DialogDescription(props: DialogTitleProps): JSX_2.Element;
+export { DialogDescription }
+export { DialogDescription as DialogDescription_alias_1 }
+
+/**
+ * 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>
+ * ```
+ */
+declare function DialogHeading(props: DialogTitleProps): JSX_2.Element;
+export { DialogHeading }
+export { DialogHeading as DialogHeading_alias_1 }
+
+/**
+ * The positioner of the dialog. Must be used within the `DialogProvider`
+ * component.
+ */
+declare const DialogPositioner: ForwardRefExoticComponent<Dialog_2.PositionerProps & RefAttributes<HTMLDivElement>>;
+export { DialogPositioner }
+export { DialogPositioner as DialogPositioner_alias_1 }
+
+declare interface DialogProps extends Omit<DialogContentProps, 'size'>, DialogVariantProps {
+}
+export { DialogProps }
+export { DialogProps as DialogProps_alias_1 }
+
+/**
+ * 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>
+ * ```
+ */
+declare function DialogProvider(props: DialogProviderProps): JSX_2.Element;
+export { DialogProvider }
+export { DialogProvider as DialogProvider_alias_1 }
+
+declare type DialogProviderProps = DialogRootProps;
+export { DialogProviderProps }
+export { DialogProviderProps as DialogProviderProps_alias_1 }
+
+/**
+ * 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>
+ * ```
+ */
+declare const DialogTrigger: ForwardRefExoticComponent<Dialog_2.TriggerProps & RefAttributes<HTMLButtonElement>>;
+export { DialogTrigger }
+export { DialogTrigger as DialogTrigger_alias_1 }
+
 export { DistanceMeasurement }
 
 export { DndContext }
@@ -1990,36 +2156,14 @@ export { MenuTrigger }
 export { MenuTrigger as MenuTrigger_alias_1 }
 
 /**
- * The Modal component is the root element for a customizable modal.
- * @see https://cerberus.digitalu.design/react/modal
- * @example
- * ```tsx
- * const { modalRef } = useModal()
- *
- * <Modal ref={modalRef}>
- *  <Avatar icon={SomeIcon} />
- *  <ModalHeader>
- *    <ModalHeading>Modal Heading</ModalHeading>
- *    <ModalDescription>Modal description</ModalDescription>
- *  </ModalHeader>
- *
- *  {props.children}
- * </Modal>
- * ```
+ * @deprecated use `Dialog` instead
  */
 declare const Modal: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDialogElement>>;
 export { Modal }
 export { Modal as Modal_alias_1 }
 
 /**
- * The ModalDescription component is a heading element for a customizable modal.
- * @see https://cerberus.digitalu.design/react/modal
- * @example
- * ```tsx
- * <Modal>
- *   <ModalDescription>Modal Heading</ModalDescription>
- * </Modal>
- * ```
+ * @deprecated use `DialogDescription` instead
  */
 declare function ModalDescription(props: ModalDescriptionProps): JSX_2.Element;
 export { ModalDescription }
@@ -2034,16 +2178,7 @@ export { ModalDescriptionProps }
 export { ModalDescriptionProps as ModalDescriptionProps_alias_1 }
 
 /**
- * The ModalHeader component is a header element for a customizable modal.
- * @see https://cerberus.digitalu.design/react/modal
- * @example
- * ```tsx
- * <Modal>
- *   <ModalHeader>
- *     <h2>Modal Heading</h2>
- *   </ModalHeader>
- * </Modal>
- * ```
+ * @deprecated there is no replacement for this component
  */
 declare function ModalHeader(props: ModalHeaderProps): JSX_2.Element;
 export { ModalHeader }
@@ -2058,14 +2193,7 @@ export { ModalHeaderProps }
 export { ModalHeaderProps as ModalHeaderProps_alias_1 }
 
 /**
- * The ModalHeading component is a heading element for a customizable modal.
- * @see https://cerberus.digitalu.design/react/modal
- * @example
- * ```tsx
- * <Modal>
- *   <ModalHeading>Modal Heading</ModalHeading>
- * </Modal>
- * ```
+ * @deprecated use `DialogHeading` instead
  */
 declare function ModalHeading(props: ModalHeadingProps): JSX_2.Element;
 export { ModalHeading }

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

@@ -0,0 +1,42 @@
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
+import {
+  useCerberusContext
+} from "./chunk-GITT5645.js";
+
+// src/components/Dialog.client.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 } from "react/jsx-runtime";
+function DialogCloseIconTrigger(props) {
+  const { icons } = useCerberusContext();
+  const { close: CloseIcon } = icons;
+  const styles = dialog();
+  return /* @__PURE__ */ jsx(
+    ArkDialog.CloseTrigger,
+    {
+      ...props,
+      className: cx(props.className, styles.closeTrigger),
+      asChild: true,
+      children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          ariaLabel: "Close dialog",
+          palette: "action",
+          size: "lg",
+          usage: "ghost",
+          children: /* @__PURE__ */ jsx(CloseIcon, {})
+        }
+      )
+    }
+  );
+}
+
+export {
+  DialogCloseIconTrigger
+};
+//# sourceMappingURL=chunk-6BN3XKQF.js.map

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

@@ -0,0 +1 @@
+{"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-2UXE5PDG.js → chunk-7NN3SJ7W.js}

@@ -9,4 +9,4 @@ function ModalHeading(props) {
 export {
   ModalHeading
 };
-//# sourceMappingURL=chunk-2UXE5PDG.js.map
+//# sourceMappingURL=chunk-7NN3SJ7W.js.map

package/build/modern/chunk-7NN3SJ7W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeading component for a customizable modal.\n * @module\n */\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * @deprecated use `DialogHeading` instead\n */\nexport function ModalHeading(props: ModalHeadingProps) {\n  return <p {...props} className={cx(props.className, modal().heading)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAcb;AADF,SAAS,aAAa,OAA0B;AACrD,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,OAAO,GAAG;AACxE;","names":[]}

package/build/modern/{chunk-XHM46FXT.js → chunk-JAROS4Q3.js}

@@ -1,12 +1,12 @@
+import {
+  Notification
+} from "./chunk-RDRD6ACD.js";
 import {
   NotificationDescription
 } from "./chunk-UXY3KCC3.js";
 import {
   NotificationHeading
 } from "./chunk-SLHYBPJ5.js";
-import {
-  Notification
-} from "./chunk-RDRD6ACD.js";
 import {
   Portal
 } from "./chunk-IQJDVFPP.js";
@@ -177,4 +177,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-XHM46FXT.js.map
+//# sourceMappingURL=chunk-JAROS4Q3.js.map

package/build/modern/{chunk-BE4EOU2P.js → chunk-JIRW4XOJ.js}

@@ -18,4 +18,4 @@ var Modal = forwardRef(ModalEl);
 export {
   Modal
 };
-//# sourceMappingURL=chunk-BE4EOU2P.js.map
+//# sourceMappingURL=chunk-JIRW4XOJ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/**\n * This module contains the Modal root component for a customizable modal.\n * @module\n */\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n  return (\n    <dialog\n      {...props}\n      className={cx(props.className, modal().dialog)}\n      ref={ref}\n    />\n  )\n}\n\n/**\n * @deprecated use `Dialog` instead\n */\nexport const Modal = forwardRef(ModalEl)\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,kBAA0D;AAa/D;AAFJ,SAAS,QAAQ,OAAmB,KAAsC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,MAAM;AAAA,MAC7C;AAAA;AAAA,EACF;AAEJ;AAKO,IAAM,QAAQ,WAAW,OAAO;","names":[]}

package/build/modern/{chunk-YJI4Y7BH.js → chunk-MUTAYS3P.js}

@@ -1,15 +1,15 @@
 import {
   Modal
-} from "./chunk-BE4EOU2P.js";
+} from "./chunk-JIRW4XOJ.js";
 import {
   ModalDescription
-} from "./chunk-Q7BRMIBR.js";
+} from "./chunk-ZL6ZITLA.js";
 import {
   ModalHeader
-} from "./chunk-XY6WL55R.js";
+} from "./chunk-NUMM4TNC.js";
 import {
   ModalHeading
-} from "./chunk-2UXE5PDG.js";
+} from "./chunk-7NN3SJ7W.js";
 import {
   Portal
 } from "./chunk-IQJDVFPP.js";
@@ -171,4 +171,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-YJI4Y7BH.js.map
+//# sourceMappingURL=chunk-MUTAYS3P.js.map

package/build/modern/{chunk-XY6WL55R.js → chunk-NUMM4TNC.js}

@@ -22,4 +22,4 @@ function ModalHeader(props) {
 export {
   ModalHeader
 };
-//# sourceMappingURL=chunk-XY6WL55R.js.map
+//# sourceMappingURL=chunk-NUMM4TNC.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * @deprecated there is no replacement for this component\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n  return (\n    <div\n      {...props}\n      className={cx(\n        props.className,\n        vstack({\n          alignItems: 'flex-start',\n          gap: 'md',\n          position: 'relative',\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AAenB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-USYM6XU6.js → chunk-O6LFWUHI.js}

@@ -1,15 +1,15 @@
 import {
   ProgressBar
 } from "./chunk-WZJ5UQNM.js";
-import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
 import {
   FieldMessage
 } from "./chunk-JWIJHSI6.js";
 import {
   Field
 } from "./chunk-UZDVOIW5.js";
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
 import {
   Avatar
 } from "./chunk-GCQMH4QA.js";
@@ -227,4 +227,4 @@ export {
   processStatus,
   FileStatus
 };
-//# sourceMappingURL=chunk-USYM6XU6.js.map
+//# sourceMappingURL=chunk-O6LFWUHI.js.map

package/build/modern/{chunk-XDDLXEFV.js → chunk-R4RFWDBM.js}

@@ -1,21 +1,21 @@
 import {
   Modal
-} from "./chunk-BE4EOU2P.js";
+} from "./chunk-JIRW4XOJ.js";
 import {
   ModalDescription
-} from "./chunk-Q7BRMIBR.js";
+} from "./chunk-ZL6ZITLA.js";
 import {
   ModalHeader
-} from "./chunk-XY6WL55R.js";
+} from "./chunk-NUMM4TNC.js";
 import {
   ModalHeading
-} from "./chunk-2UXE5PDG.js";
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
+} from "./chunk-7NN3SJ7W.js";
 import {
   IconButton
 } from "./chunk-APD6IX5R.js";
+import {
+  Portal
+} from "./chunk-IQJDVFPP.js";
 import {
   Avatar
 } from "./chunk-GCQMH4QA.js";
@@ -151,4 +151,4 @@ export {
   CTAModal,
   useCTAModal
 };
-//# sourceMappingURL=chunk-XDDLXEFV.js.map
+//# sourceMappingURL=chunk-R4RFWDBM.js.map

package/build/modern/chunk-TFL56AYR.js

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1 @@
+{"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/{chunk-ZHBHPMTP.js → chunk-VGEK2DQB.js}

@@ -1,27 +1,27 @@
 import {
   Modal
-} from "./chunk-BE4EOU2P.js";
+} from "./chunk-JIRW4XOJ.js";
 import {
   ModalDescription
-} from "./chunk-Q7BRMIBR.js";
+} from "./chunk-ZL6ZITLA.js";
 import {
   ModalHeader
-} from "./chunk-XY6WL55R.js";
+} from "./chunk-NUMM4TNC.js";
 import {
   ModalHeading
-} from "./chunk-2UXE5PDG.js";
+} from "./chunk-7NN3SJ7W.js";
 import {
   Input
 } from "./chunk-MZ3UCDUL.js";
 import {
   Label
 } from "./chunk-NMF2HYWO.js";
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
 import {
   Field
 } from "./chunk-UZDVOIW5.js";
+import {
+  Portal
+} from "./chunk-IQJDVFPP.js";
 import {
   Avatar
 } from "./chunk-GCQMH4QA.js";
@@ -241,4 +241,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-ZHBHPMTP.js.map
+//# sourceMappingURL=chunk-VGEK2DQB.js.map

package/build/modern/{chunk-Q4JXWPU7.js → chunk-YKKNWILF.js}

@@ -1,9 +1,6 @@
 import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
-import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
+  useFieldContext
+} from "./chunk-UZDVOIW5.js";
 import {
   DatePickerContext,
   DatePickerTable,
@@ -14,8 +11,11 @@ import {
   DatePickerViewControl
 } from "./chunk-5EWCH7AI.js";
 import {
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
+  IconButton
+} from "./chunk-APD6IX5R.js";
+import {
+  Portal
+} from "./chunk-IQJDVFPP.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
@@ -141,8 +141,8 @@ function RangePickerInput(props) {
   ] });
 }
 function DatePickerContent(props) {
-  const { children, ...contentProps } = props;
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ArkDP.Positioner, { className: datePickerStyles.positioner, children: /* @__PURE__ */ jsx(
+  const { children, withModal, ...contentProps } = props;
+  return /* @__PURE__ */ jsx(Portal, { disabled: withModal ?? false, children: /* @__PURE__ */ jsx(ArkDP.Positioner, { className: datePickerStyles.positioner, children: /* @__PURE__ */ jsx(
     ArkDP.Content,
     {
       ...contentProps,
@@ -194,8 +194,8 @@ function DatePickerYearView(props) {
     /* @__PURE__ */ jsx(DatePickerTable, { children: /* @__PURE__ */ jsx(ArkDP.TableBody, { children: datePicker2.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ jsx(ArkDP.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ jsx(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ jsx(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
   ] }) }) });
 }
-function DatePickerCalendar() {
-  return /* @__PURE__ */ jsxs(DatePickerContent, { children: [
+function DatePickerCalendar(props) {
+  return /* @__PURE__ */ jsxs(DatePickerContent, { withModal: props.withModal, children: [
     /* @__PURE__ */ jsx(DatePickerDayView, {}),
     /* @__PURE__ */ jsx(DatePickerMonthView, {}),
     /* @__PURE__ */ jsx(DatePickerYearView, {})
@@ -214,4 +214,4 @@ export {
   DatePickerYearView,
   DatePickerCalendar
 };
-//# sourceMappingURL=chunk-Q4JXWPU7.js.map
+//# sourceMappingURL=chunk-YKKNWILF.js.map