@cerberus-design/react 0.14.2-next-58af9c8 → 0.14.2-next-9116729

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 }
@@ -2649,10 +2777,23 @@ export { RadioRecipe as RadioRecipe_alias_1 }
  * </Field>
  * ```
  */
-declare function RangePickerInput(props: DatePickerInputProps): JSX_2.Element;
+declare function RangePickerInput(props: RangePickerInputProps): JSX_2.Element;
 export { RangePickerInput }
 export { RangePickerInput as RangePickerInput_alias_1 }
 
+declare interface RangePickerInputProps extends Omit<DatePickerInputProps, 'defaultValue'> {
+    /**
+     * The defaultValue to add for the inputs. The first item is the start date
+     * and the second item is the end date.
+     */
+    defaultValue?: [
+    InputHTMLAttributes<HTMLInputElement>['defaultValue'],
+    InputHTMLAttributes<HTMLInputElement>['defaultValue']
+    ];
+}
+export { RangePickerInputProps }
+export { RangePickerInputProps as RangePickerInputProps_alias_1 }
+
 export { rectIntersection }
 
 /**

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-YLMGZAKU.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";
@@ -50,7 +50,7 @@ function NotificationCenter(props) {
         id,
         state: "closed"
       });
-      setTimeout(() => {
+      window.setTimeout(() => {
         removeNotification(dispatch, id);
       }, 150);
     },
@@ -64,7 +64,7 @@ function NotificationCenter(props) {
         id,
         state: "open"
       });
-      setTimeout(() => {
+      window.setTimeout(() => {
         closeNotification(id);
       }, timeout);
     },
@@ -177,4 +177,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-YLMGZAKU.js.map
+//# sourceMappingURL=chunk-JAROS4Q3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useReducer,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  addNotification,\n  clearNotificationState,\n  notificationCenterReducer,\n  removeNotification,\n  updateNotificationState,\n} from './notification-center/store'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n  /**\n   * The palette of the notification.\n   * @default 'info'\n   */\n  palette: 'info' | 'success' | 'warning' | 'danger'\n  /**\n   * The heading of the notification.\n   */\n  heading: string\n  /**\n   * The unique id of the notification.\n   */\n  id?: string\n  /**\n   * The description of the notification.\n   */\n  description?: ReactNode\n  /**\n   * The action to take when the notification is closed\n   */\n  onClose?: () => void\n}\n\nexport interface NotificationsValue {\n  notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport type NotificationsProviderProps = PortalProps & {\n  /**\n   * The duration in milliseconds to show the notification.\n   * @default 6000\n   */\n  duration?: number\n}\n\n/**\n * Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n *   <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n *  notify({\n *   palette: 'info',\n *   heading: 'New feature!',\n *   description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n  props: PropsWithChildren<NotificationsProviderProps>,\n) {\n  const [state, dispatch] = useReducer(notificationCenterReducer, [])\n  const styles = notification()\n\n  const timeout = useMemo<number>(\n    () => props.duration || 6000,\n    [props.duration],\n  )\n\n  const closeNotification = useCallback(\n    (id: string) => {\n      updateNotificationState(dispatch, {\n        id,\n        state: 'closed',\n      })\n      window.setTimeout(() => {\n        removeNotification(dispatch, id)\n      }, 150)\n    },\n    [dispatch],\n  )\n\n  const handleNotify = useCallback(\n    (options: NotifyOptions) => {\n      const id = `${options.palette}:${state.length + 1}`\n      addNotification(dispatch, {\n        ...options,\n        id,\n        state: 'open',\n      })\n\n      window.setTimeout(() => {\n        closeNotification(id)\n      }, timeout)\n    },\n    [dispatch, state, timeout, closeNotification],\n  )\n\n  const handleClose = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      closeNotification(target.value)\n    },\n    [closeNotification],\n  )\n\n  const handleCloseAll = useCallback(() => {\n    state.forEach((item) => {\n      if (item.onClose) item.onClose()\n    })\n    // we don't want to animate out for this one\n    clearNotificationState(dispatch)\n  }, [state, dispatch])\n\n  const value = useMemo(\n    () => ({\n      notify: handleNotify,\n    }),\n    [handleNotify],\n  )\n\n  // For some reason, the vstack pattern alignItems is not registering here.\n  // So we are forcing it with the style prop.\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      {props.children}\n\n      <Show when={state.length > 0}>\n        <Portal container={props.container}>\n          <div className={styles.center}>\n            <Show when={state.length >= 4}>\n              <Button\n                className={cx(styles.closeAll, animateIn())}\n                onClick={handleCloseAll}\n                palette=\"action\"\n                shape=\"rounded\"\n                size=\"sm\"\n                usage=\"ghost\"\n              >\n                Close all\n              </Button>\n            </Show>\n\n            <div\n              className={vstack({\n                alignItems: 'flex-end',\n                gap: '4',\n              })}\n              style={{\n                alignItems: 'flex-end',\n              }}\n            >\n              {state.map((option) => (\n                <MatchNotification\n                  key={option.id}\n                  {...option}\n                  onClose={handleClose}\n                  open={option.state}\n                />\n              ))}\n            </div>\n          </div>\n        </Portal>\n      </Show>\n    </NotificationsContext.Provider>\n  )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n  open: 'open' | 'closed'\n  onClose: (e: MouseEvent<HTMLButtonElement>) => void\n  key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n  const { palette, id, onClose, heading, description, open } = props\n  const sharedProps = useMemo(\n    () => ({\n      id: id!,\n      open: true,\n      onClose,\n      'data-state': open,\n    }),\n    [id, open, onClose],\n  )\n\n  switch (palette) {\n    case 'success':\n      return (\n        <Notification {...sharedProps} palette=\"success\">\n          <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"success\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'warning':\n      return (\n        <Notification {...sharedProps} palette=\"warning\">\n          <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"warning\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'danger':\n      return (\n        <Notification {...sharedProps} palette=\"danger\">\n          <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"danger\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'info':\n    default:\n      return (\n        <Notification {...sharedProps} palette=\"info\">\n          <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"info\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n  }\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n *  palette: 'info',\n *  heading: 'New feature',\n *  description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n  const context = useContext(NotificationsContext)\n  if (!context) {\n    throw new Error(\n      'useNotificationCenter must be used within a NotificationsProvider',\n    )\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

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