@payloadcms/ui 4.0.0-internal.1f9ae9a → 4.0.0-internal.293e026

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

@@ -0,0 +1,70 @@
+'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';
+const baseClass = 'dialog';
+export const DialogHeader = t0 => {
+  const $ = _c(10);
+  const {
+    children,
+    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] !== t1) {
+    t2 = [`${baseClass}__header`, t1].filter(Boolean);
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = t2.join(" ");
+  let t4;
+  if ($[2] !== children || $[3] !== closeModal || $[4] !== isConfirming || $[5] !== showClose || $[6] !== slug || $[7] !== t3 || $[8] !== title) {
+    t4 = _jsxs("div", {
+      className: t3,
+      children: [title ? _jsx("h4", {
+        className: `${baseClass}__title`,
+        children: title
+      }) : null, 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: () => closeModal(slug)
+      }) : null]
+    });
+    $[2] = children;
+    $[3] = closeModal;
+    $[4] = isConfirming;
+    $[5] = showClose;
+    $[6] = slug;
+    $[7] = t3;
+    $[8] = title;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  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","baseClass","DialogHeader","t0","$","children","showClose","title","slug","isConfirming","closeModal","t1","t2","filter","Boolean","t3","join","t4","_jsxs","className","_jsx","buttonStyle","disabled","icon","margin","onClick"],"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'\n\nconst baseClass = 'dialog'\n\nexport type DialogHeaderProps = {\n  readonly children?: React.ReactNode\n  readonly showClose?: boolean\n  readonly title?: React.ReactNode\n}\n\nexport const DialogHeader: React.FC<DialogHeaderProps> = ({ children, showClose, title }) => {\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`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {title ? <h4 className={`${baseClass}__title`}>{title}</h4> : null}\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={() => closeModal(slug)}\n        />\n      ) : null}\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;AAEjC,MAAMC,SAAA,GAAY;AAQlB,OAAO,MAAMC,YAAA,GAA4CC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,QAAA;IAAAC,SAAA;IAAAC;EAAA,IAAAJ,EAA8B;EACtF;IAAAK,IAAA;IAAAC;EAAA,IAA+BT,gBAAA;EAC/B;IAAAU;EAAA,IAAuBX,QAAA;EAAA,IAEnB,CAACQ,KAAA,KAAUF,QAAA,KAAaC,SAAA;IAAA;EAAA;EAMY,MAAAK,EAAA,GAAAL,SAAA,IAAa,GAAAL,SAAA,qBAAiC;EAAA,IAAAW,EAAA;EAAA,IAAAR,CAAA,QAAAO,EAAA;IAAvEC,EAAA,IAAC,GAAAX,SAAA,UAAsB,EAAEU,EAA8C,EAAAE,MAAA,CAAAC,OACxE;IAAAV,CAAA,MAAAO,EAAA;IAAAP,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EADC,MAAAW,EAAA,GAAAH,EACD,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAAb,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAK,YAAA,IAAAL,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAI,IAAA,IAAAJ,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAG,KAAA;IAHVU,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EACYJ,EAEH;MAAAV,QAAA,GAEPE,KAAA,GAAQa,IAAA,CAAC;QAAAD,SAAA,EAAc,GAAAlB,SAAA,SAAqB;QAAAI,QAAA,EAAGE;MAAA,C,QAAc,EAC7DF,QAAA,GAAWe,IAAA,CAAC;QAAAD,SAAA,EAAe,GAAAlB,SAAA,iBAA6B;QAAAI;MAAA,C,QAAqB,EAC7EC,SAAA,GACCc,IAAA,CAAAtB,MAAA;QAAA,cACa;QAAAuB,WAAA,EACC;QAAAC,QAAA,EACFb,YAAA;QAAAc,IAAA,EACJH,IAAA,CAAAvB,KAAA,IAAC;QAAA2B,MAAA;QAAAC,OAAA,EAAAA,CAAA,KAEQf,UAAA,CAAWF,IAAA;MAAA,C,QAE1B;IAAA,C;;;;;;;;;;;;SAhBNS,E;CAmBJ","ignoreList":[]}

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

@@ -0,0 +1,18 @@
+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 = '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 {};
+//# 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,KAA8B,MAAM,OAAO,CAAA;AAIlD,OAAO,cAAc,CAAA;AAErB,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAAA;AAIxE,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE3C,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,CA8ClD,CAAA"}

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

@@ -0,0 +1,99 @@
+'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, { 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(15);
+  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();
+  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] !== drawerDepth || $[7] !== focusTrapOptions || $[8] !== isConfirming || $[9] !== size || $[10] !== slug) {
+    const t7 = `${baseClass}--${size}`;
+    let t8;
+    if ($[12] !== className || $[13] !== t7) {
+      t8 = [baseClass, t7, className].filter(Boolean);
+      $[12] = className;
+      $[13] = t7;
+      $[14] = t8;
+    } else {
+      t8 = $[14];
+    }
+    t6 = _jsx(DialogContext, {
+      value: {
+        slug,
+        isConfirming,
+        setConfirming
+      },
+      children: _jsx(Modal, {
+        closeOnBlur,
+        focusTrapOptions,
+        slug,
+        style: {
+          zIndex: drawerZBase + drawerDepth + 1
+        },
+        children: _jsx("div", {
+          className: t8.join(" "),
+          role: "document",
+          children
+        })
+      })
+    });
+    $[3] = children;
+    $[4] = className;
+    $[5] = closeOnBlur;
+    $[6] = drawerDepth;
+    $[7] = focusTrapOptions;
+    $[8] = isConfirming;
+    $[9] = size;
+    $[10] = slug;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  return t6;
+};
+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","useEffect","useState","drawerZBase","useDrawerDepth","DialogContext","baseClass","DialogModal","t0","$","slug","children","className","closeOnBlur","t1","closeOnEsc","t2","focusTrapOptions","size","t3","undefined","isConfirming","setConfirming","drawerDepth","t4","t5","handler","_temp","document","addEventListener","removeEventListener","t6","t7","t8","filter","Boolean","_jsx","value","style","zIndex","join","role","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, { 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 = '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\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    <DialogContext value={{ slug, isConfirming, setConfirming }}>\n      <Modal\n        closeOnBlur={closeOnBlur}\n        focusTrapOptions={focusTrapOptions}\n        slug={slug}\n        style={{ zIndex: drawerZBase + drawerDepth + 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  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,KAAK,QAAQ;AACtB,OAAOC,KAAA,IAASC,SAAS,EAAEC,QAAQ,QAAQ;AAE3C,SAASC,WAAW,EAAEC,cAAc,QAAQ;AAC5C,SAASC,aAAa,QAAQ;AAC9B,OAAO;AAIP,MAAMC,SAAA,GAAY;AAclB,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EAAC;IAAAY,IAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAC,WAAA,EAAAC,EAAA;IAAAC,UAAA,EAAAC,EAAA;IAAAC,gBAAA;IAAAC,IAAA,EAAAC;EAAA,IAAAX,EAQvD;EAJC,MAAAK,WAAA,GAAAC,EAAmB,KAAAM,SAAA,WAAnBN,EAAmB;EACnB,MAAAC,UAAA,GAAAC,EAAiB,KAAAI,SAAA,UAAjBJ,EAAiB;EAEjB,MAAAE,IAAA,GAAAC,EAAc,KAAAC,SAAA,GAAP,OAAO,GAAdD,EAAc;EAEd,OAAAE,YAAA,EAAAC,aAAA,IAAsCpB,QAAA,MAAS;EAC/C,MAAAqB,WAAA,GAAoBnB,cAAA;EAAA,IAAAoB,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAM,UAAA;IAEVS,EAAA,GAAAA,CAAA;MAAA,IACJT,UAAA;QAAA;MAAA;MAIJ,MAAAW,OAAA,GAAAC,KAAA;MAQAC,QAAA,CAAAC,gBAAA,CAA0B,WAAWH,OAAA,MAAS;MAAA,aACjCE,QAAA,CAAAE,mBAAA,CAA6B,WAAWJ,OAAA,MAAS;IAAA;IAC7DD,EAAA,IAACV,UAAA;IAAWN,CAAA,MAAAM,UAAA;IAAAN,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAD,EAAA,GAAAf,CAAA;IAAAgB,EAAA,GAAAhB,CAAA;EAAA;EAffR,SAAA,CAAUuB,EAeV,EAAGC,EAAY;EAAA,IAAAM,EAAA;EAAA,IAAAtB,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAI,WAAA,IAAAJ,CAAA,QAAAc,WAAA,IAAAd,CAAA,QAAAQ,gBAAA,IAAAR,CAAA,QAAAY,YAAA,IAAAZ,CAAA,QAAAS,IAAA,IAAAT,CAAA,SAAAC,IAAA;IAWgB,MAAAsB,EAAA,MAAA1B,SAAA,KAAiBY,IAAA,EAAM;IAAA,IAAAe,EAAA;IAAA,IAAAxB,CAAA,SAAAG,SAAA,IAAAH,CAAA,SAAAuB,EAAA;MAAnCC,EAAA,IAAA3B,SAAA,EAAY0B,EAAuB,EAAEpB,SAAA,EAAAsB,MAAA,CAAAC,OAAkB;MAAA1B,CAAA,OAAAG,SAAA;MAAAH,CAAA,OAAAuB,EAAA;MAAAvB,CAAA,OAAAwB,EAAA;IAAA;MAAAA,EAAA,GAAAxB,CAAA;IAAA;IARxEsB,EAAA,GAAAK,IAAA,CAAA/B,aAAA;MAAAgC,KAAA;QAAA3B,IAAA;QAAAW,YAAA;QAAAC;MAAA;MAAAX,QAAA,EACEyB,IAAA,CAAArC,KAAA;QAAAc,WAAA;QAAAI,gBAAA;QAAAP,IAAA;QAAA4B,KAAA;UAAAC,MAAA,EAImBpC,WAAA,GAAcoB,WAAA;QAAc;QAAAZ,QAAA,EAE7CyB,IAAA,CAAC;UAAAxB,SAAA,EACYqB,EAAuD,CAAAO,IAAA,CAAc;UAAAC,IAAA,EAC3E;UAAA9B;QAAA,C;;;;;;;;;;;;;;;SATXoB,E;CAgBJ;AA9CuD,SAAAJ,MAAAe,CAAA;EAAA,IAkB7CA,CAAA,CAAAC,GAAA,KAAU;IACZD,CAAA,CAAAE,wBAAA,CAA0B;IAC1BF,CAAA,CAAAG,cAAA,CAAgB;EAAA;AAAA","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/{Modal → Dialog}/index.css

@@ -1,7 +1,5 @@
 @layer payload-default {
-  dialog.alert-modal {
-    --alert-modal-width: 480px;
-
+  dialog:has(> .dialog) {
     position: fixed;
     inset: 0;
     display: flex;
@@ -10,16 +8,14 @@
     background: var(--color-modalbackdrop);
   }
 
-  dialog.alert-modal--compact {
-    --alert-modal-width: 320px;
-  }
+  .dialog {
+    --dialog-max-height: calc(100dvh - var(--spacer-5));
 
-  .alert-modal__wrapper {
-    z-index: 1;
     position: relative;
     display: flex;
     flex-direction: column;
-    width: var(--alert-modal-width);
+    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);
@@ -30,27 +26,32 @@
     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);
   }
 
-  .alert-modal__header {
+  .dialog--small {
+    --dialog-width: 280px;
+  }
+
+  .dialog--medium {
+    --dialog-width: 480px;
+  }
+
+  .dialog__header {
     display: flex;
     align-items: center;
     gap: var(--spacer-2);
     min-height: var(--spacer-6);
-    border-bottom: var(--stroke-width-small) solid var(--color-border);
     padding: var(--spacer-2) var(--spacer-3);
-
-    .btn {
-      padding: 0;
-      border: 0;
-    }
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    flex-shrink: 0;
   }
 
-  .alert-modal__header--with-actions {
-    padding-right: var(--spacer-2);
+  .dialog__header--has-close {
+    padding-inline-end: var(--spacer-2);
   }
 
-  .alert-modal__title {
+  .dialog__title {
     flex: 1 0 0;
     min-width: 0;
     margin: 0;
@@ -58,25 +59,34 @@
     letter-spacing: var(--text-body-medium-letter-spacing);
   }
 
-  .alert-modal__content {
+  .dialog__header-extras {
     display: flex;
-    flex-direction: column;
-    gap: var(--spacer-2-5);
-    padding: var(--spacer-2) var(--spacer-3);
+    align-items: center;
+    gap: var(--spacer-1);
+  }
 
-    > * {
-      margin: 0;
-    }
+  .dialog__body {
+    flex: 1 1 auto;
+    padding: var(--spacer-3);
+    min-height: 0;
+    overflow-y: auto;
   }
 
-  .alert-modal__controls {
+  .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: var(--spacer-2);
-
-    .btn {
-      margin: 0;
-    }
+    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":[]}

package/dist/elements/DocumentLocked/index.css

@@ -0,0 +1,5 @@
+@layer payload-default {
+  .document-locked__updated-at {
+    margin-top: var(--spacer-2);
+  }
+}

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

@@ -1,5 +1,6 @@
 import type { ClientUser } from 'payload';
 import React from 'react';
+import './index.css';
 export declare const DocumentLocked: React.FC<{
     handleGoBack: () => void;
     isActive: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentLocked/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAoB,MAAM,OAAO,CAAA;AAyBxC,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;CACpC,CAoEA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentLocked/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC,OAAO,KAAoB,MAAM,OAAO,CAAA;AAexC,OAAO,aAAa,CAAA;AAkBpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;CACpC,CAkDA,CAAA"}

package/dist/elements/DocumentLocked/index.js

@@ -1,14 +1,16 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
 import React, { useEffect } from 'react';
 import { useRouteCache } from '../../providers/RouteCache/index.js';
 import { useRouteTransition } from '../../providers/RouteTransition/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { isClientUserObject } from '../../utilities/isClientUserObject.js';
 import { Button } from '../Button/index.js';
-import { AlertModal, useModal } from '../Modal/index.js';
+import { DialogBody, DialogCancel, DialogConfirm, DialogFooter, DialogHeader, DialogModal } from '../Dialog/index.js';
+import './index.css';
 const modalSlug = 'document-locked';
 const formatDate = date => {
   if (!date) {
@@ -24,7 +26,7 @@ const formatDate = date => {
   }).format(new Date(date));
 };
 export const DocumentLocked = t0 => {
-  const $ = _c(33);
+  const $ = _c(25);
   const {
     handleGoBack,
     isActive,
@@ -68,112 +70,86 @@ export const DocumentLocked = t0 => {
   }
   useEffect(t1, t2);
   let t3;
-  if ($[5] !== closeModal || $[6] !== handleGoBack || $[7] !== startRouteTransition) {
-    t3 = () => {
-      closeModal(modalSlug);
-      startRouteTransition(() => handleGoBack());
-    };
-    $[5] = closeModal;
-    $[6] = handleGoBack;
-    $[7] = startRouteTransition;
-    $[8] = t3;
-  } else {
-    t3 = $[8];
-  }
-  let t4;
-  if ($[9] !== clearRouteCache || $[10] !== closeModal || $[11] !== handleGoBack || $[12] !== onReadOnly || $[13] !== onTakeOver || $[14] !== startRouteTransition || $[15] !== t || $[16] !== t3 || $[17] !== updatedAt || $[18] !== user) {
+  if ($[5] !== clearRouteCache || $[6] !== closeModal || $[7] !== handleGoBack || $[8] !== onReadOnly || $[9] !== onTakeOver || $[10] !== startRouteTransition || $[11] !== t || $[12] !== updatedAt || $[13] !== user) {
+    let t4;
+    if ($[15] !== t || $[16] !== user) {
+      t4 = isClientUserObject(user) ? user.email ?? user.id : `${t("general:user")}: ${user}`;
+      $[15] = t;
+      $[16] = user;
+      $[17] = t4;
+    } else {
+      t4 = $[17];
+    }
     let t5;
-    if ($[20] !== clearRouteCache || $[21] !== closeModal || $[22] !== onReadOnly) {
-      t5 = () => {
-        onReadOnly();
-        closeModal(modalSlug);
-        clearRouteCache();
-      };
-      $[20] = clearRouteCache;
-      $[21] = closeModal;
-      $[22] = onReadOnly;
-      $[23] = t5;
+    if ($[18] !== handleGoBack || $[19] !== startRouteTransition) {
+      t5 = () => startRouteTransition(() => handleGoBack());
+      $[18] = handleGoBack;
+      $[19] = startRouteTransition;
+      $[20] = t5;
     } else {
-      t5 = $[23];
+      t5 = $[20];
     }
     let t6;
-    if ($[24] !== closeModal || $[25] !== onTakeOver) {
+    if ($[21] !== clearRouteCache || $[22] !== closeModal || $[23] !== onReadOnly) {
       t6 = () => {
-        onTakeOver();
+        onReadOnly();
         closeModal(modalSlug);
+        clearRouteCache();
       };
-      $[24] = closeModal;
-      $[25] = onTakeOver;
-      $[26] = t6;
-    } else {
-      t6 = $[26];
-    }
-    let t7;
-    if ($[27] !== handleGoBack || $[28] !== startRouteTransition) {
-      t7 = () => {
-        startRouteTransition(() => handleGoBack());
-      };
-      $[27] = handleGoBack;
-      $[28] = startRouteTransition;
-      $[29] = t7;
-    } else {
-      t7 = $[29];
-    }
-    let t8;
-    if ($[30] !== t || $[31] !== user) {
-      t8 = isClientUserObject(user) ? user.email ?? user.id : `${t("general:user")}: ${user}`;
-      $[30] = t;
-      $[31] = user;
-      $[32] = t8;
+      $[21] = clearRouteCache;
+      $[22] = closeModal;
+      $[23] = onReadOnly;
+      $[24] = t6;
     } else {
-      t8 = $[32];
+      t6 = $[24];
     }
-    t4 = _jsxs(AlertModal, {
-      actions: _jsxs(_Fragment, {
-        children: [_jsx(Button, {
-          buttonStyle: "secondary",
-          id: `${modalSlug}-go-back`,
-          onClick: t3,
-          children: t("general:goBack")
+    t3 = _jsxs(DialogModal, {
+      closeOnEsc: false,
+      size: "small",
+      slug: modalSlug,
+      children: [_jsx(DialogHeader, {
+        title: t("general:documentLocked")
+      }), _jsxs(DialogBody, {
+        children: [_jsxs("p", {
+          children: [_jsx("strong", {
+            children: t4
+          }), " ", t("general:currentlyEditing")]
+        }), _jsxs("p", {
+          className: "document-locked__updated-at",
+          children: [t("general:editedSince"), " ", _jsx("strong", {
+            children: formatDate(updatedAt)
+          })]
+        })]
+      }), _jsxs(DialogFooter, {
+        children: [_jsx(DialogCancel, {
+          label: t("general:goBack"),
+          onClick: t5
         }), _jsx(Button, {
           buttonStyle: "secondary",
           id: `${modalSlug}-view-read-only`,
-          onClick: t5,
-          children: t("general:viewReadOnly")
-        }), _jsx(Button, {
-          buttonStyle: "primary",
-          id: `${modalSlug}-take-over`,
+          margin: false,
           onClick: t6,
-          children: t("general:takeOver")
-        })]
-      }),
-      onClose: t7,
-      slug: modalSlug,
-      title: t("general:documentLocked"),
-      children: [_jsxs("p", {
-        children: [_jsx("strong", {
-          children: t8
-        }), " ", t("general:currentlyEditing")]
-      }), _jsxs("p", {
-        children: [t("general:editedSince"), " ", _jsx("strong", {
-          children: formatDate(updatedAt)
+          size: "medium",
+          children: t("general:viewReadOnly")
+        }), _jsx(DialogConfirm, {
+          label: t("general:takeOver"),
+          onClick: onTakeOver
         })]
       })]
     });
-    $[9] = clearRouteCache;
-    $[10] = closeModal;
-    $[11] = handleGoBack;
-    $[12] = onReadOnly;
-    $[13] = onTakeOver;
-    $[14] = startRouteTransition;
-    $[15] = t;
-    $[16] = t3;
-    $[17] = updatedAt;
-    $[18] = user;
-    $[19] = t4;
+    $[5] = clearRouteCache;
+    $[6] = closeModal;
+    $[7] = handleGoBack;
+    $[8] = onReadOnly;
+    $[9] = onTakeOver;
+    $[10] = startRouteTransition;
+    $[11] = t;
+    $[12] = updatedAt;
+    $[13] = user;
+    $[14] = t3;
   } else {
-    t4 = $[19];
+    t3 = $[14];
   }
-  return t4;
+  return t3;
 };
 //# sourceMappingURL=index.js.map