@payloadcms/ui 4.0.0-internal.c2b57ce → 4.0.0-internal.c7d5de4

package/dist/elements/Dialog/DialogConfirm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","Button","useModal","useDialogContext","DialogConfirm","t0","$","label","loadingLabel","onClick","slug","isConfirming","setConfirming","closeModal","t","t1","handleClick","t2","resolvedLabel","_jsx","disabled","extraButtonProps","id","margin","size","children"],"sources":["../../../../src/elements/Dialog/DialogConfirm/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { useModal } from '../../Modal/index.js'\nimport { useDialogContext } from '../context.js'\n\nexport type DialogConfirmProps = {\n  readonly label?: string\n  readonly loadingLabel?: string\n  readonly onClick: () => Promise<void> | void\n}\n\nexport const DialogConfirm: React.FC<DialogConfirmProps> = ({ label, loadingLabel, onClick }) => {\n  const { slug, isConfirming, setConfirming } = useDialogContext()\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const handleClick = async () => {\n    if (isConfirming) {\n      return\n    }\n    setConfirming(true)\n    await onClick()\n    setConfirming(false)\n    closeModal(slug)\n  }\n\n  const resolvedLabel = label ?? t('general:confirm')\n\n  return (\n    <Button\n      disabled={isConfirming}\n      extraButtonProps={{ 'data-dialog-action': 'confirm' }}\n      id={`${slug}-confirm`}\n      margin={false}\n      onClick={handleClick}\n      size=\"medium\"\n    >\n      {isConfirming && loadingLabel ? loadingLabel : resolvedLabel}\n    </Button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,gBAAgB,QAAQ;AAQjC,OAAO,MAAMC,aAAA,GAA8CC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAC;IAAAS,KAAA;IAAAC,YAAA;IAAAC;EAAA,IAAAJ,EAAgC;EAC1F;IAAAK,IAAA;IAAAC,YAAA;IAAAC;EAAA,IAA8CT,gBAAA;EAC9C;IAAAU;EAAA,IAAuBX,QAAA;EACvB;IAAAY;EAAA,IAAcd,cAAA;EAAA,IAAAe,EAAA;EAAA,IAAAT,CAAA,QAAAO,UAAA,IAAAP,CAAA,QAAAK,YAAA,IAAAL,CAAA,QAAAG,OAAA,IAAAH,CAAA,QAAAM,aAAA,IAAAN,CAAA,QAAAI,IAAA;IAEMK,EAAA,SAAAA,CAAA;MAAA,IACdJ,YAAA;QAAA;MAAA;MAGJC,aAAA,KAAc;MAAA,MACRH,OAAA;MACNG,aAAA,MAAc;MACdC,UAAA,CAAWH,IAAA;IAAA;IACbJ,CAAA,MAAAO,UAAA;IAAAP,CAAA,MAAAK,YAAA;IAAAL,CAAA,MAAAG,OAAA;IAAAH,CAAA,MAAAM,aAAA;IAAAN,CAAA,MAAAI,IAAA;IAAAJ,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EARA,MAAAU,WAAA,GAAoBD,EAQpB;EAAA,IAAAE,EAAA;EAAA,IAAAX,CAAA,QAAAU,WAAA,IAAAV,CAAA,QAAAK,YAAA,IAAAL,CAAA,QAAAC,KAAA,IAAAD,CAAA,QAAAE,YAAA,IAAAF,CAAA,SAAAI,IAAA,IAAAJ,CAAA,SAAAQ,CAAA;IAEA,MAAAI,aAAA,GAAsBX,KAAA,IAASO,CAAA,CAAE;IAG/BG,EAAA,GAAAE,IAAA,CAAAlB,MAAA;MAAAmB,QAAA,EACYT,YAAA;MAAAU,gBAAA;QAAA,sBACgC;MAAA;MAAAC,EAAA,EACtC,GAAGZ,IAAA,UAAc;MAAAa,MAAA;MAAAd,OAAA,EAEZO,WAAA;MAAAQ,IAAA,EACJ;MAAAC,QAAA,EAEJd,YAAA,IAAgBH,YAAA,GAAeA,YAAA,GAAeU;IAAA,C;;;;;;;;;;;SARjDD,E;CAWJ","ignoreList":[]}

package/dist/elements/Dialog/DialogFooter/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type DialogFooterProps = {
+    readonly children?: React.ReactNode;
+};
+export declare const DialogFooter: React.FC<DialogFooterProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Dialog/DialogFooter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Dialog/DialogFooter/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACpC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAMpD,CAAA"}

package/dist/elements/Dialog/DialogFooter/index.js

@@ -0,0 +1,17 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+const baseClass = 'dialog';
+export const DialogFooter = ({
+  children
+}) => {
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: `${baseClass}__footer`,
+    children: children
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Dialog/DialogFooter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","DialogFooter","children","_jsx","className"],"sources":["../../../../src/elements/Dialog/DialogFooter/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nconst baseClass = 'dialog'\n\nexport type DialogFooterProps = {\n  readonly children?: React.ReactNode\n}\n\nexport const DialogFooter: React.FC<DialogFooterProps> = ({ children }) => {\n  if (!children) {\n    return null\n  }\n\n  return <div className={`${baseClass}__footer`}>{children}</div>\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,MAAMC,SAAA,GAAY;AAMlB,OAAO,MAAMC,YAAA,GAA4CA,CAAC;EAAEC;AAAQ,CAAE;EACpE,IAAI,CAACA,QAAA,EAAU;IACb,OAAO;EACT;EAEA,oBAAOC,IAAA,CAAC;IAAIC,SAAA,EAAW,GAAGJ,SAAA,UAAmB;cAAGE;;AAClD","ignoreList":[]}

package/dist/elements/Dialog/DialogHeader/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type DialogHeaderProps = {
+    readonly children?: React.ReactNode;
+    readonly className?: string;
+    readonly onClose?: ({ modalSlug }: {
+        modalSlug: string;
+    }) => void;
+    readonly showClose?: boolean;
+    readonly title?: React.ReactNode;
+};
+export declare const DialogHeader: React.FC<DialogHeaderProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Dialog/DialogHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Dialog/DialogHeader/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0CpD,CAAA"}

package/dist/elements/Dialog/DialogHeader/index.js

@@ -0,0 +1,85 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { XIcon } from '../../../icons/X/index.js';
+import { Button } from '../../Button/index.js';
+import { useModal } from '../../Modal/index.js';
+import { useDialogContext } from '../context.js';
+import { DialogTitle } from '../DialogTitle/index.js';
+const baseClass = 'dialog';
+export const DialogHeader = t0 => {
+  const $ = _c(12);
+  const {
+    children,
+    className,
+    onClose,
+    showClose,
+    title
+  } = t0;
+  const {
+    slug,
+    isConfirming
+  } = useDialogContext();
+  const {
+    closeModal
+  } = useModal();
+  if (!title && !children && !showClose) {
+    return null;
+  }
+  const t1 = showClose && `${baseClass}__header--has-close`;
+  let t2;
+  if ($[0] !== className || $[1] !== t1) {
+    t2 = [`${baseClass}__header`, t1, className].filter(Boolean);
+    $[0] = className;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const t3 = t2.join(" ");
+  let t4;
+  if ($[3] !== children || $[4] !== closeModal || $[5] !== isConfirming || $[6] !== onClose || $[7] !== showClose || $[8] !== slug || $[9] !== t3 || $[10] !== title) {
+    t4 = _jsxs("div", {
+      className: t3,
+      children: [title ? typeof title === "string" ? _jsx(DialogTitle, {
+        title
+      }) : title : null, _jsxs("div", {
+        className: `${baseClass}__header-end`,
+        children: [children ? _jsx("div", {
+          className: `${baseClass}__header-extras`,
+          children
+        }) : null, showClose ? _jsx(Button, {
+          "aria-label": "Close",
+          buttonStyle: "ghost",
+          disabled: isConfirming,
+          icon: _jsx(XIcon, {}),
+          margin: false,
+          onClick: () => {
+            if (onClose) {
+              onClose({
+                modalSlug: slug
+              });
+            } else {
+              closeModal(slug);
+            }
+          }
+        }) : null]
+      })]
+    });
+    $[3] = children;
+    $[4] = closeModal;
+    $[5] = isConfirming;
+    $[6] = onClose;
+    $[7] = showClose;
+    $[8] = slug;
+    $[9] = t3;
+    $[10] = title;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Dialog/DialogHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","XIcon","Button","useModal","useDialogContext","DialogTitle","baseClass","DialogHeader","t0","$","children","className","onClose","showClose","title","slug","isConfirming","closeModal","t1","t2","filter","Boolean","t3","join","t4","_jsxs","_jsx","buttonStyle","disabled","icon","margin","onClick","modalSlug"],"sources":["../../../../src/elements/Dialog/DialogHeader/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { XIcon } from '../../../icons/X/index.js'\nimport { Button } from '../../Button/index.js'\nimport { useModal } from '../../Modal/index.js'\nimport { useDialogContext } from '../context.js'\nimport { DialogTitle } from '../DialogTitle/index.js'\n\nconst baseClass = 'dialog'\n\nexport type DialogHeaderProps = {\n  readonly children?: React.ReactNode\n  readonly className?: string\n  readonly onClose?: ({ modalSlug }: { modalSlug: string }) => void\n  readonly showClose?: boolean\n  readonly title?: React.ReactNode\n}\n\nexport const DialogHeader: React.FC<DialogHeaderProps> = ({\n  children,\n  className,\n  onClose,\n  showClose,\n  title,\n}) => {\n  const { slug, isConfirming } = useDialogContext()\n  const { closeModal } = useModal()\n\n  if (!title && !children && !showClose) {\n    return null\n  }\n\n  return (\n    <div\n      className={[`${baseClass}__header`, showClose && `${baseClass}__header--has-close`, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {title ? typeof title === 'string' ? <DialogTitle title={title} /> : title : null}\n      <div className={`${baseClass}__header-end`}>\n        {children ? <div className={`${baseClass}__header-extras`}>{children}</div> : null}\n        {showClose ? (\n          <Button\n            aria-label=\"Close\"\n            buttonStyle=\"ghost\"\n            disabled={isConfirming}\n            icon={<XIcon />}\n            margin={false}\n            onClick={() => {\n              if (onClose) {\n                onClose({ modalSlug: slug })\n              } else {\n                closeModal(slug)\n              }\n            }}\n          />\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,KAAK,QAAQ;AACtB,SAASC,MAAM,QAAQ;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,WAAW,QAAQ;AAE5B,MAAMC,SAAA,GAAY;AAUlB,OAAO,MAAMC,YAAA,GAA4CC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW,QAAA;IAAAC,SAAA;IAAAC,OAAA;IAAAC,SAAA;IAAAC;EAAA,IAAAN,EAMzD;EACC;IAAAO,IAAA;IAAAC;EAAA,IAA+BZ,gBAAA;EAC/B;IAAAa;EAAA,IAAuBd,QAAA;EAAA,IAEnB,CAACW,KAAA,KAAUJ,QAAA,KAAaG,SAAA;IAAA;EAAA;EAMY,MAAAK,EAAA,GAAAL,SAAA,IAAa,GAAAP,SAAA,qBAAiC;EAAA,IAAAa,EAAA;EAAA,IAAAV,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAS,EAAA;IAAvEC,EAAA,IAAC,GAAAb,SAAA,UAAsB,EAAEY,EAA8C,EAAEP,SAAA,EAAAS,MAAA,CAAAC,OAC1E;IAAAZ,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EADC,MAAAa,EAAA,GAAAH,EACD,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAO,YAAA,IAAAP,CAAA,QAAAG,OAAA,IAAAH,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAAM,IAAA,IAAAN,CAAA,QAAAa,EAAA,IAAAb,CAAA,SAAAK,KAAA;IAHVU,EAAA,GAAAC,KAAA,CAAC;MAAAd,SAAA,EACYW,EAEH;MAAAZ,QAAA,GAEPI,KAAA,GAAQ,OAAOA,KAAA,KAAU,WAAWY,IAAA,CAAArB,WAAA;QAAAS;MAAA,C,IAAgCA,KAAA,OAAQ,EAC7EW,KAAA,CAAC;QAAAd,SAAA,EAAe,GAAAL,SAAA,cAA0B;QAAAI,QAAA,GACvCA,QAAA,GAAWgB,IAAA,CAAC;UAAAf,SAAA,EAAe,GAAAL,SAAA,iBAA6B;UAAAI;QAAA,C,QAAqB,EAC7EG,SAAA,GACCa,IAAA,CAAAxB,MAAA;UAAA,cACa;UAAAyB,WAAA,EACC;UAAAC,QAAA,EACFZ,YAAA;UAAAa,IAAA,EACJH,IAAA,CAAAzB,KAAA,IAAC;UAAA6B,MAAA;UAAAC,OAAA,EAAAA,CAAA;YAAA,IAGDnB,OAAA;cACFA,OAAA;gBAAAoB,SAAA,EAAqBjB;cAAA,CAAK;YAAA;cAE1BE,UAAA,CAAWF,IAAA;YAAA;UAAA;QAAA,C,QAIf;MAAA,C;;;;;;;;;;;;;;SAvBRS,E;CA2BJ","ignoreList":[]}

package/dist/elements/Dialog/DialogModal/index.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+import { Modal } from '@faceless-ui/modal';
+import React from 'react';
+import '../index.css';
+type FocusTrapOptions = ComponentProps<typeof Modal>['focusTrapOptions'];
+export type DialogSize = 'large' | 'medium' | 'small';
+export type DialogModalProps = {
+    readonly children?: React.ReactNode;
+    readonly className?: string;
+    readonly closeOnBlur?: boolean;
+    readonly closeOnEsc?: boolean;
+    readonly focusTrapOptions?: FocusTrapOptions;
+    readonly size?: DialogSize;
+    readonly slug: string;
+};
+export declare const DialogModal: React.FC<DialogModalProps>;
+export declare const DialogDepthContext: React.Context<number>;
+export declare const useDialogDepth: () => number;
+export declare const DialogDepthProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Dialog/DialogModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Dialog/DialogModal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,KAAkD,MAAM,OAAO,CAAA;AAItE,OAAO,cAAc,CAAA;AAErB,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAAA;AAIxE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAErD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IAC5C,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAA;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiDlD,CAAA;AAED,eAAO,MAAM,kBAAkB,uBAAmB,CAAA;AAElD,eAAO,MAAM,cAAc,QAAO,MAAiC,CAAA;AAEnE,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAKvE,CAAA"}

package/dist/elements/Dialog/DialogModal/index.js

@@ -0,0 +1,126 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from '@faceless-ui/modal';
+import React, { createContext, use, useEffect, useState } from 'react';
+import { drawerZBase, useDrawerDepth } from '../../Drawer/index.js';
+import { DialogContext } from '../context.js';
+import '../index.css';
+const baseClass = 'dialog';
+export const DialogModal = t0 => {
+  const $ = _c(16);
+  const {
+    slug,
+    children,
+    className,
+    closeOnBlur: t1,
+    closeOnEsc: t2,
+    focusTrapOptions,
+    size: t3
+  } = t0;
+  const closeOnBlur = t1 === undefined ? false : t1;
+  const closeOnEsc = t2 === undefined ? true : t2;
+  const size = t3 === undefined ? "small" : t3;
+  const [isConfirming, setConfirming] = useState(false);
+  const drawerDepth = useDrawerDepth();
+  const dialogDepth = useDialogDepth();
+  let t4;
+  let t5;
+  if ($[0] !== closeOnEsc) {
+    t4 = () => {
+      if (closeOnEsc) {
+        return;
+      }
+      const handler = _temp;
+      document.addEventListener("keydown", handler, true);
+      return () => document.removeEventListener("keydown", handler, true);
+    };
+    t5 = [closeOnEsc];
+    $[0] = closeOnEsc;
+    $[1] = t4;
+    $[2] = t5;
+  } else {
+    t4 = $[1];
+    t5 = $[2];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[3] !== children || $[4] !== className || $[5] !== closeOnBlur || $[6] !== dialogDepth || $[7] !== drawerDepth || $[8] !== focusTrapOptions || $[9] !== isConfirming || $[10] !== size || $[11] !== slug) {
+    const t7 = `${baseClass}--${size}`;
+    let t8;
+    if ($[13] !== className || $[14] !== t7) {
+      t8 = [baseClass, t7, className].filter(Boolean);
+      $[13] = className;
+      $[14] = t7;
+      $[15] = t8;
+    } else {
+      t8 = $[15];
+    }
+    t6 = _jsx(DialogDepthProvider, {
+      children: _jsx(DialogContext, {
+        value: {
+          slug,
+          isConfirming,
+          setConfirming
+        },
+        children: _jsx(Modal, {
+          closeOnBlur,
+          focusTrapOptions,
+          slug,
+          style: {
+            zIndex: drawerZBase + drawerDepth + dialogDepth + 1
+          },
+          children: _jsx("div", {
+            className: t8.join(" "),
+            role: "document",
+            children
+          })
+        })
+      })
+    });
+    $[3] = children;
+    $[4] = className;
+    $[5] = closeOnBlur;
+    $[6] = dialogDepth;
+    $[7] = drawerDepth;
+    $[8] = focusTrapOptions;
+    $[9] = isConfirming;
+    $[10] = size;
+    $[11] = slug;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  return t6;
+};
+export const DialogDepthContext = /*#__PURE__*/createContext(0);
+export const useDialogDepth = () => use(DialogDepthContext);
+export const DialogDepthProvider = t0 => {
+  const $ = _c(3);
+  const {
+    children
+  } = t0;
+  const parentDepth = useDialogDepth();
+  const depth = parentDepth + 1;
+  let t1;
+  if ($[0] !== children || $[1] !== depth) {
+    t1 = _jsx(DialogDepthContext, {
+      value: depth,
+      children
+    });
+    $[0] = children;
+    $[1] = depth;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+};
+function _temp(e) {
+  if (e.key === "Escape") {
+    e.stopImmediatePropagation();
+    e.preventDefault();
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/elements/Dialog/DialogModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","Modal","React","createContext","use","useEffect","useState","drawerZBase","useDrawerDepth","DialogContext","baseClass","DialogModal","t0","$","slug","children","className","closeOnBlur","t1","closeOnEsc","t2","focusTrapOptions","size","t3","undefined","isConfirming","setConfirming","drawerDepth","dialogDepth","useDialogDepth","t4","t5","handler","_temp","document","addEventListener","removeEventListener","t6","t7","t8","filter","Boolean","_jsx","DialogDepthProvider","value","style","zIndex","join","role","DialogDepthContext","parentDepth","depth","e","key","stopImmediatePropagation","preventDefault"],"sources":["../../../../src/elements/Dialog/DialogModal/index.tsx"],"sourcesContent":["'use client'\nimport type { ComponentProps } from 'react'\n\nimport { Modal } from '@faceless-ui/modal'\nimport React, { createContext, use, useEffect, useState } from 'react'\n\nimport { drawerZBase, useDrawerDepth } from '../../Drawer/index.js'\nimport { DialogContext } from '../context.js'\nimport '../index.css'\n\ntype FocusTrapOptions = ComponentProps<typeof Modal>['focusTrapOptions']\n\nconst baseClass = 'dialog'\n\nexport type DialogSize = 'large' | 'medium' | 'small'\n\nexport type DialogModalProps = {\n  readonly children?: React.ReactNode\n  readonly className?: string\n  readonly closeOnBlur?: boolean\n  readonly closeOnEsc?: boolean\n  readonly focusTrapOptions?: FocusTrapOptions\n  readonly size?: DialogSize\n  readonly slug: string\n}\n\nexport const DialogModal: React.FC<DialogModalProps> = ({\n  slug,\n  children,\n  className,\n  closeOnBlur = false,\n  closeOnEsc = true,\n  focusTrapOptions,\n  size = 'small',\n}) => {\n  const [isConfirming, setConfirming] = useState(false)\n  const drawerDepth = useDrawerDepth()\n  const dialogDepth = useDialogDepth()\n\n  useEffect(() => {\n    if (closeOnEsc) {\n      return\n    }\n\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.stopImmediatePropagation()\n        e.preventDefault()\n      }\n    }\n\n    // Capture phase fires before ModalProvider's bubble-phase listener\n    document.addEventListener('keydown', handler, true)\n    return () => document.removeEventListener('keydown', handler, true)\n  }, [closeOnEsc])\n\n  return (\n    <DialogDepthProvider>\n      <DialogContext value={{ slug, isConfirming, setConfirming }}>\n        <Modal\n          closeOnBlur={closeOnBlur}\n          focusTrapOptions={focusTrapOptions}\n          slug={slug}\n          style={{ zIndex: drawerZBase + drawerDepth + dialogDepth + 1 }}\n        >\n          <div\n            className={[baseClass, `${baseClass}--${size}`, className].filter(Boolean).join(' ')}\n            role=\"document\"\n          >\n            {children}\n          </div>\n        </Modal>\n      </DialogContext>\n    </DialogDepthProvider>\n  )\n}\n\nexport const DialogDepthContext = createContext(0)\n\nexport const useDialogDepth = (): number => use(DialogDepthContext)\n\nexport const DialogDepthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const parentDepth = useDialogDepth()\n  const depth = parentDepth + 1\n\n  return <DialogDepthContext value={depth}>{children}</DialogDepthContext>\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Dialog/DialogTitle/index.css

@@ -0,0 +1,9 @@
+@layer payload-default {
+  .dialog-title {
+    flex: 1 0 0;
+    min-width: 0;
+    margin: 0;
+    font-weight: var(--text-body-medium-strong-font-weight);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+}

package/dist/elements/Dialog/DialogTitle/index.d.ts

@@ -0,0 +1,5 @@
+import './index.css';
+export declare const DialogTitle: ({ title }: {
+    title: React.ReactNode;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Dialog/DialogTitle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Dialog/DialogTitle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,cAAe;IAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,gCAEhE,CAAA"}

package/dist/elements/Dialog/DialogTitle/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './index.css';
+const baseClass = 'dialog-title';
+export const DialogTitle = ({
+  title
+}) => /*#__PURE__*/_jsx("h4", {
+  className: baseClass,
+  children: title
+});
+//# sourceMappingURL=index.js.map

package/dist/elements/Dialog/DialogTitle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["baseClass","DialogTitle","title","_jsx","className"],"sources":["../../../../src/elements/Dialog/DialogTitle/index.tsx"],"sourcesContent":["import './index.css'\n\nconst baseClass = 'dialog-title'\n\nexport const DialogTitle = ({ title }: { title: React.ReactNode }) => (\n  <h4 className={baseClass}>{title}</h4>\n)\n"],"mappings":";AAAA,OAAO;AAEP,MAAMA,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAAcA,CAAC;EAAEC;AAAK,CAA8B,kBAC/DC,IAAA,CAAC;EAAGC,SAAA,EAAWJ,SAAA;YAAYE","ignoreList":[]}

package/dist/elements/Dialog/context.d.ts

@@ -0,0 +1,8 @@
+export type DialogContextValue = {
+    isConfirming: boolean;
+    setConfirming: (val: boolean) => void;
+    slug: string;
+};
+export declare const DialogContext: import("react").Context<DialogContextValue>;
+export declare const useDialogContext: () => DialogContextValue;
+//# sourceMappingURL=context.d.ts.map

package/dist/elements/Dialog/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/elements/Dialog/context.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,aAAa,6CAAiD,CAAA;AAE3E,eAAO,MAAM,gBAAgB,0BAM5B,CAAA"}

package/dist/elements/Dialog/context.js

@@ -0,0 +1,10 @@
+import { createContext, use } from 'react';
+export const DialogContext = createContext(null);
+export const useDialogContext = () => {
+  const ctx = use(DialogContext);
+  if (!ctx) {
+    throw new Error('Dialog sub-components must be rendered inside <DialogModal>');
+  }
+  return ctx;
+};
+//# sourceMappingURL=context.js.map

package/dist/elements/Dialog/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":["createContext","use","DialogContext","useDialogContext","ctx","Error"],"sources":["../../../src/elements/Dialog/context.ts"],"sourcesContent":["import { createContext, use } from 'react'\n\nexport type DialogContextValue = {\n  isConfirming: boolean\n  setConfirming: (val: boolean) => void\n  slug: string\n}\n\nexport const DialogContext = createContext<DialogContextValue | null>(null)\n\nexport const useDialogContext = () => {\n  const ctx = use(DialogContext)\n  if (!ctx) {\n    throw new Error('Dialog sub-components must be rendered inside <DialogModal>')\n  }\n  return ctx\n}\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,GAAG,QAAQ;AAQnC,OAAO,MAAMC,aAAA,GAAgBF,aAAA,CAAyC;AAEtE,OAAO,MAAMG,gBAAA,GAAmBA,CAAA;EAC9B,MAAMC,GAAA,GAAMH,GAAA,CAAIC,aAAA;EAChB,IAAI,CAACE,GAAA,EAAK;IACR,MAAM,IAAIC,KAAA,CAAM;EAClB;EACA,OAAOD,GAAA;AACT","ignoreList":[]}

package/dist/elements/Dialog/index.css

@@ -0,0 +1,102 @@
+@layer payload-default {
+  dialog:has(> .dialog) {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-modalbackdrop);
+  }
+
+  .dialog {
+    --dialog-max-height: calc(100dvh - var(--spacer-5));
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    max-height: var(--dialog-max-height);
+    width: var(--dialog-width);
+    max-width: calc(100vw - var(--spacer-5));
+    background: var(--color-bg);
+    border-radius: var(--radius-large);
+    overflow: clip;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    color: var(--color-text);
+    box-shadow: var(--elevation-500-modal-window);
+  }
+
+  .dialog--small {
+    --dialog-width: 280px;
+  }
+
+  .dialog--medium {
+    --dialog-width: 480px;
+  }
+
+  .dialog--large {
+    --dialog-width: 970px;
+  }
+
+  .dialog__header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    min-height: var(--spacer-6);
+    padding: var(--spacer-2) var(--spacer-3);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    flex-shrink: 0;
+  }
+
+  .dialog__header-end {
+    margin-inline-start: auto;
+    display: flex;
+    gap: var(--spacer-2);
+  }
+
+  .dialog__header--has-close {
+    padding-inline-end: var(--spacer-2);
+  }
+
+  .dialog__title {
+    flex: 1 0 0;
+    min-width: 0;
+    margin: 0;
+    font-weight: var(--text-body-medium-strong-font-weight);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .dialog__header-extras {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+
+  .dialog__body {
+    flex: 1 1 auto;
+    padding: var(--spacer-3);
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  .dialog:has(.dialog__header) .dialog__body {
+    padding-top: var(--spacer-2);
+  }
+
+  .dialog:has(.dialog__footer) .dialog__body {
+    padding-bottom: var(--spacer-2);
+  }
+
+  .dialog__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacer-2);
+    padding-block: var(--spacer-2);
+    padding-inline-start: var(--spacer-3);
+    padding-inline-end: var(--spacer-2);
+    flex-shrink: 0;
+  }
+}

package/dist/elements/Dialog/index.d.ts

@@ -0,0 +1,13 @@
+export { DialogBody } from './DialogBody/index.js';
+export type { DialogBodyProps } from './DialogBody/index.js';
+export { DialogCancel } from './DialogCancel/index.js';
+export type { DialogCancelProps } from './DialogCancel/index.js';
+export { DialogConfirm } from './DialogConfirm/index.js';
+export type { DialogConfirmProps } from './DialogConfirm/index.js';
+export { DialogFooter } from './DialogFooter/index.js';
+export type { DialogFooterProps } from './DialogFooter/index.js';
+export { DialogHeader } from './DialogHeader/index.js';
+export type { DialogHeaderProps } from './DialogHeader/index.js';
+export { DialogModal } from './DialogModal/index.js';
+export type { DialogModalProps, DialogSize } from './DialogModal/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Dialog/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA"}

package/dist/elements/Dialog/index.js

@@ -0,0 +1,7 @@
+export { DialogBody } from './DialogBody/index.js';
+export { DialogCancel } from './DialogCancel/index.js';
+export { DialogConfirm } from './DialogConfirm/index.js';
+export { DialogFooter } from './DialogFooter/index.js';
+export { DialogHeader } from './DialogHeader/index.js';
+export { DialogModal } from './DialogModal/index.js';
+//# sourceMappingURL=index.js.map

package/dist/elements/Dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DialogBody","DialogCancel","DialogConfirm","DialogFooter","DialogHeader","DialogModal"],"sources":["../../../src/elements/Dialog/index.tsx"],"sourcesContent":["export { DialogBody } from './DialogBody/index.js'\nexport type { DialogBodyProps } from './DialogBody/index.js'\nexport { DialogCancel } from './DialogCancel/index.js'\nexport type { DialogCancelProps } from './DialogCancel/index.js'\nexport { DialogConfirm } from './DialogConfirm/index.js'\nexport type { DialogConfirmProps } from './DialogConfirm/index.js'\nexport { DialogFooter } from './DialogFooter/index.js'\nexport type { DialogFooterProps } from './DialogFooter/index.js'\nexport { DialogHeader } from './DialogHeader/index.js'\nexport type { DialogHeaderProps } from './DialogHeader/index.js'\nexport { DialogModal } from './DialogModal/index.js'\nexport type { DialogModalProps, DialogSize } from './DialogModal/index.js'\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ;AAE3B,SAASC,YAAY,QAAQ;AAE7B,SAASC,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAE7B,SAASC,YAAY,QAAQ;AAE7B,SAASC,WAAW,QAAQ","ignoreList":[]}