@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.c2b57ce

package/dist/elements/Chip/index.js

@@ -0,0 +1,94 @@
+'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 { useTranslation } from '../../providers/Translation/index.js';
+import './index.css';
+const baseClass = 'chip';
+export const Chip = t0 => {
+  const $ = _c(17);
+  const {
+    id,
+    "aria-label": ariaLabel,
+    children,
+    className,
+    disabled,
+    elementProps,
+    icon,
+    onClick,
+    onRemove,
+    selected,
+    size: t1,
+    variant: t2
+  } = t0;
+  const size = t1 === undefined ? "medium" : t1;
+  const variant = t2 === undefined ? "default" : t2;
+  const {
+    t
+  } = useTranslation();
+  const t3 = `${baseClass}--size-${size}`;
+  const t4 = `${baseClass}--variant-${variant}`;
+  const t5 = selected && `${baseClass}--selected`;
+  let t6;
+  if ($[0] !== className || $[1] !== t3 || $[2] !== t4 || $[3] !== t5) {
+    t6 = [baseClass, t3, t4, t5, className].filter(Boolean);
+    $[0] = className;
+    $[1] = t3;
+    $[2] = t4;
+    $[3] = t5;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  const classes = t6.join(" ");
+  const t7 = elementProps?.ref;
+  let t8;
+  if ($[5] !== ariaLabel || $[6] !== children || $[7] !== classes || $[8] !== disabled || $[9] !== elementProps || $[10] !== icon || $[11] !== id || $[12] !== onClick || $[13] !== onRemove || $[14] !== t || $[15] !== t7) {
+    t8 = _jsxs("div", {
+      ...elementProps,
+      className: classes,
+      id,
+      ref: t7,
+      children: [onClick ? _jsx("button", {
+        "aria-label": ariaLabel,
+        className: `${baseClass}__action`,
+        disabled,
+        onClick,
+        type: "button"
+      }) : null, icon ? _jsx("span", {
+        className: `${baseClass}__icon`,
+        children: icon
+      }) : null, _jsx("span", {
+        className: `${baseClass}__label`,
+        children
+      }), onRemove ? _jsx("button", {
+        "aria-label": t("general:remove"),
+        className: `${baseClass}__remove`,
+        disabled,
+        onClick: onRemove,
+        type: "button",
+        children: _jsx(XIcon, {
+          size: 24
+        })
+      }) : null]
+    });
+    $[5] = ariaLabel;
+    $[6] = children;
+    $[7] = classes;
+    $[8] = disabled;
+    $[9] = elementProps;
+    $[10] = icon;
+    $[11] = id;
+    $[12] = onClick;
+    $[13] = onRemove;
+    $[14] = t;
+    $[15] = t7;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  return t8;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","XIcon","useTranslation","baseClass","Chip","t0","$","id","ariaLabel","children","className","disabled","elementProps","icon","onClick","onRemove","selected","size","t1","variant","t2","undefined","t","t3","t4","t5","t6","filter","Boolean","classes","join","t7","ref","t8","_jsxs","_jsx","type"],"sources":["../../../src/elements/Chip/index.tsx"],"sourcesContent":["'use client'\nimport type { HTMLAttributes } from 'react'\n\nimport React from 'react'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'chip'\n\nexport type ChipVariant = 'danger' | 'default' | 'success' | 'warning'\n\nexport type ChipProps = {\n  'aria-label'?: string\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  elementProps?: {\n    ref?: React.RefCallback<HTMLElement>\n  } & HTMLAttributes<HTMLElement>\n  icon?: React.ReactNode\n  id?: string\n  onClick?: () => void\n  onRemove?: () => void\n  selected?: boolean\n  size?: 'large' | 'medium'\n  variant?: ChipVariant\n}\n\nexport const Chip: React.FC<ChipProps> = ({\n  id,\n  'aria-label': ariaLabel,\n  children,\n  className,\n  disabled,\n  elementProps,\n  icon,\n  onClick,\n  onRemove,\n  selected,\n  size = 'medium',\n  variant = 'default',\n}) => {\n  const { t } = useTranslation()\n\n  const classes = [\n    baseClass,\n    `${baseClass}--size-${size}`,\n    `${baseClass}--variant-${variant}`,\n    selected && `${baseClass}--selected`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div {...elementProps} className={classes} id={id} ref={elementProps?.ref}>\n      {onClick ? (\n        <button\n          aria-label={ariaLabel}\n          className={`${baseClass}__action`}\n          disabled={disabled}\n          onClick={onClick}\n          type=\"button\"\n        />\n      ) : null}\n      {icon ? <span className={`${baseClass}__icon`}>{icon}</span> : null}\n      <span className={`${baseClass}__label`}>{children}</span>\n      {onRemove ? (\n        <button\n          aria-label={t('general:remove')}\n          className={`${baseClass}__remove`}\n          disabled={disabled}\n          onClick={onRemove}\n          type=\"button\"\n        >\n          <XIcon size={24} />\n        </button>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ClipboardAction/ClipboardActionLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClipboardActionLabel.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/ClipboardActionLabel.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB,wBAG9B;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,gCAiBA,CAAA"}
+{"version":3,"file":"ClipboardActionLabel.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/ClipboardActionLabel.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB,GAAI,qBAGlC;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,gCAiBA,CAAA"}

package/dist/elements/ClipboardAction/index.css

@@ -0,0 +1,8 @@
+@layer payload-default {
+  .clipboard-action__button.popup-button--active,
+  .clipboard-action__button.popup-button--active:hover,
+  .clipboard-action__button.popup-button--active:active {
+    background: var(--color-bg-selected);
+    color: var(--color-icon-selected);
+  }
+}

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

@@ -1,6 +1,7 @@
 import type { FormStateWithoutComponents } from 'payload';
 import { type FC } from 'react';
 import type { ClipboardCopyData, OnPasteFn } from './types.js';
+import './index.css';
 type Props = {
     allowCopy?: boolean;
     allowPaste?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,EAAE,KAAK,EAAE,EAAe,MAAM,OAAO,CAAA;AAG5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAU9D,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,0BAA0B,CAAA;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,SAAS,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,iBAAiB,CAAA;AAErB;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CA2FrC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,EAAE,KAAK,EAAE,EAAe,MAAM,OAAO,CAAA;AAG5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAQ9D,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,0BAA0B,CAAA;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,SAAS,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,iBAAiB,CAAA;AAErB;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CA6FrC,CAAA"}

package/dist/elements/ClipboardAction/index.js

@@ -3,11 +3,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { toast } from 'sonner';
+import { ClipboardIcon } from '../../icons/Clipboard/index.js';
+import { CopyIcon } from '../../icons/Copy/index.js';
 import { MoreIcon } from '../../icons/More/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Popup, PopupList } from '../Popup/index.js';
-import { ClipboardActionLabel } from './ClipboardActionLabel.js';
 import { clipboardCopy, clipboardPaste } from './clipboardUtilities.js';
+import './index.css';
 const baseClass = 'clipboard-action';
 /**
  * Menu actions for copying and pasting fields. Currently, this is only used in Arrays and Blocks.
@@ -69,29 +71,27 @@ export const ClipboardAction = ({
     horizontalAlign: "right",
     render: ({
       close
-    }) => /*#__PURE__*/_jsxs(PopupList.ButtonGroup, {
-      buttonSize: "medium",
+    }) => /*#__PURE__*/_jsxs(PopupList.MenuItem, {
       children: [/*#__PURE__*/_jsx(PopupList.Button, {
         className: copyClassName,
         disabled: !allowCopy,
+        icon: /*#__PURE__*/_jsx(CopyIcon, {
+          size: 24
+        }),
         onClick: () => {
           void handleCopy();
           close();
         },
-        children: /*#__PURE__*/_jsx(ClipboardActionLabel, {
-          isRow: isRow
-        })
+        children: isRow ? t('general:copyRow') : t('general:copyField')
       }), /*#__PURE__*/_jsx(PopupList.Button, {
         className: pasteClassName,
         disabled: !allowPaste,
+        icon: /*#__PURE__*/_jsx(ClipboardIcon, {}),
         onClick: () => {
           void handlePaste();
           close();
         },
-        children: /*#__PURE__*/_jsx(ClipboardActionLabel, {
-          isPaste: true,
-          isRow: isRow
-        })
+        children: isRow ? t('general:pasteRow') : t('general:pasteField')
       })]
     }),
     verticalAlign: "bottom"

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useCallback","toast","MoreIcon","useTranslation","Popup","PopupList","ClipboardActionLabel","clipboardCopy","clipboardPaste","baseClass","ClipboardAction","allowCopy","allowPaste","className","copyClassName","disabled","isRow","onPaste","pasteClassName","path","rest","t","classes","filter","Boolean","join","handleCopy","clipboardResult","error","success","handlePaste","type","schemaFields","fields","schemaBlocks","blocks","_jsx","button","buttonClassName","caret","horizontalAlign","render","close","_jsxs","ButtonGroup","buttonSize","Button","onClick","isPaste","verticalAlign"],"sources":["../../../src/elements/ClipboardAction/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormStateWithoutComponents } from 'payload'\n\nimport { type FC, useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport type { ClipboardCopyData, OnPasteFn } from './types.js'\n\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { ClipboardActionLabel } from './ClipboardActionLabel.js'\nimport { clipboardCopy, clipboardPaste } from './clipboardUtilities.js'\n\nconst baseClass = 'clipboard-action'\n\ntype Props = {\n  allowCopy?: boolean\n  allowPaste?: boolean\n  className?: string\n  copyClassName?: string\n  disabled?: boolean\n  getDataToCopy: () => FormStateWithoutComponents\n  isRow?: boolean\n  onPaste: OnPasteFn\n  pasteClassName?: string\n} & ClipboardCopyData\n\n/**\n * Menu actions for copying and pasting fields. Currently, this is only used in Arrays and Blocks.\n * @note This component doesn't use the Clipboard API, but localStorage. See rationale in #11513\n */\nexport const ClipboardAction: FC<Props> = ({\n  allowCopy,\n  allowPaste,\n  className,\n  copyClassName,\n  disabled,\n  isRow,\n  onPaste,\n  pasteClassName,\n  path,\n  ...rest\n}) => {\n  const { t } = useTranslation()\n\n  const classes = [`${baseClass}__popup`, className].filter(Boolean).join(' ')\n\n  const handleCopy = useCallback(() => {\n    const clipboardResult = clipboardCopy({\n      path,\n      t,\n      ...rest,\n    })\n\n    if (typeof clipboardResult === 'string') {\n      toast.error(clipboardResult)\n    } else {\n      toast.success(t('general:copied'))\n    }\n  }, [t, rest, path])\n\n  const handlePaste = useCallback(() => {\n    const clipboardResult = clipboardPaste(\n      rest.type === 'array'\n        ? {\n            onPaste,\n            path,\n            schemaFields: rest.fields,\n            t,\n          }\n        : {\n            onPaste,\n            path,\n            schemaBlocks: rest.blocks,\n            t,\n          },\n    )\n\n    if (typeof clipboardResult === 'string') {\n      toast.error(clipboardResult)\n    }\n  }, [onPaste, rest, path, t])\n\n  if (!allowPaste && !allowCopy) {\n    return null\n  }\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonClassName={`${baseClass}__button`}\n      caret={false}\n      className={classes}\n      disabled={disabled}\n      horizontalAlign=\"right\"\n      render={({ close }) => (\n        <PopupList.ButtonGroup buttonSize=\"medium\">\n          <PopupList.Button\n            className={copyClassName}\n            disabled={!allowCopy}\n            onClick={() => {\n              void handleCopy()\n              close()\n            }}\n          >\n            <ClipboardActionLabel isRow={isRow} />\n          </PopupList.Button>\n          <PopupList.Button\n            className={pasteClassName}\n            disabled={!allowPaste}\n            onClick={() => {\n              void handlePaste()\n              close()\n            }}\n          >\n            <ClipboardActionLabel isPaste isRow={isRow} />\n          </PopupList.Button>\n        </PopupList.ButtonGroup>\n      )}\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAAkBA,WAAW,QAAQ;AACrC,SAASC,KAAK,QAAQ;AAItB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,aAAa,EAAEC,cAAc,QAAQ;AAE9C,MAAMC,SAAA,GAAY;AAclB;;;;AAIA,OAAO,MAAMC,eAAA,GAA6BA,CAAC;EACzCC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,aAAa;EACbC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC,cAAc;EACdC,IAAI;EACJ,GAAGC;AAAA,CACJ;EACC,MAAM;IAAEC;EAAC,CAAE,GAAGlB,cAAA;EAEd,MAAMmB,OAAA,GAAU,CAAC,GAAGb,SAAA,SAAkB,EAAEI,SAAA,CAAU,CAACU,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;EAExE,MAAMC,UAAA,GAAa1B,WAAA,CAAY;IAC7B,MAAM2B,eAAA,GAAkBpB,aAAA,CAAc;MACpCY,IAAA;MACAE,CAAA;MACA,GAAGD;IACL;IAEA,IAAI,OAAOO,eAAA,KAAoB,UAAU;MACvC1B,KAAA,CAAM2B,KAAK,CAACD,eAAA;IACd,OAAO;MACL1B,KAAA,CAAM4B,OAAO,CAACR,CAAA,CAAE;IAClB;EACF,GAAG,CAACA,CAAA,EAAGD,IAAA,EAAMD,IAAA,CAAK;EAElB,MAAMW,WAAA,GAAc9B,WAAA,CAAY;IAC9B,MAAM2B,iBAAA,GAAkBnB,cAAA,CACtBY,IAAA,CAAKW,IAAI,KAAK,UACV;MACEd,OAAA;MACAE,IAAA;MACAa,YAAA,EAAcZ,IAAA,CAAKa,MAAM;MACzBZ;IACF,IACA;MACEJ,OAAA;MACAE,IAAA;MACAe,YAAA,EAAcd,IAAA,CAAKe,MAAM;MACzBd;IACF;IAGN,IAAI,OAAOM,iBAAA,KAAoB,UAAU;MACvC1B,KAAA,CAAM2B,KAAK,CAACD,iBAAA;IACd;EACF,GAAG,CAACV,OAAA,EAASG,IAAA,EAAMD,IAAA,EAAME,CAAA,CAAE;EAE3B,IAAI,CAACT,UAAA,IAAc,CAACD,SAAA,EAAW;IAC7B,OAAO;EACT;EAEA,oBACEyB,IAAA,CAAChC,KAAA;IACCiC,MAAA,eAAQD,IAAA,CAAClC,QAAA;IACToC,eAAA,EAAiB,GAAG7B,SAAA,UAAmB;IACvC8B,KAAA,EAAO;IACP1B,SAAA,EAAWS,OAAA;IACXP,QAAA,EAAUA,QAAA;IACVyB,eAAA,EAAgB;IAChBC,MAAA,EAAQA,CAAC;MAAEC;IAAK,CAAE,kBAChBC,KAAA,CAACtC,SAAA,CAAUuC,WAAW;MAACC,UAAA,EAAW;8BAChCT,IAAA,CAAC/B,SAAA,CAAUyC,MAAM;QACfjC,SAAA,EAAWC,aAAA;QACXC,QAAA,EAAU,CAACJ,SAAA;QACXoC,OAAA,EAASA,CAAA;UACP,KAAKrB,UAAA;UACLgB,KAAA;QACF;kBAEA,aAAAN,IAAA,CAAC9B,oBAAA;UAAqBU,KAAA,EAAOA;;uBAE/BoB,IAAA,CAAC/B,SAAA,CAAUyC,MAAM;QACfjC,SAAA,EAAWK,cAAA;QACXH,QAAA,EAAU,CAACH,UAAA;QACXmC,OAAA,EAASA,CAAA;UACP,KAAKjB,WAAA;UACLY,KAAA;QACF;kBAEA,aAAAN,IAAA,CAAC9B,oBAAA;UAAqB0C,OAAO;UAAChC,KAAA,EAAOA;;;;IAI3CiC,aAAA,EAAc;;AAGpB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useCallback","toast","ClipboardIcon","CopyIcon","MoreIcon","useTranslation","Popup","PopupList","clipboardCopy","clipboardPaste","baseClass","ClipboardAction","allowCopy","allowPaste","className","copyClassName","disabled","isRow","onPaste","pasteClassName","path","rest","t","classes","filter","Boolean","join","handleCopy","clipboardResult","error","success","handlePaste","type","schemaFields","fields","schemaBlocks","blocks","_jsx","button","buttonClassName","caret","horizontalAlign","render","close","_jsxs","MenuItem","Button","icon","size","onClick","verticalAlign"],"sources":["../../../src/elements/ClipboardAction/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormStateWithoutComponents } from 'payload'\n\nimport { type FC, useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport type { ClipboardCopyData, OnPasteFn } from './types.js'\n\nimport { ClipboardIcon } from '../../icons/Clipboard/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { clipboardCopy, clipboardPaste } from './clipboardUtilities.js'\nimport './index.css'\n\nconst baseClass = 'clipboard-action'\n\ntype Props = {\n  allowCopy?: boolean\n  allowPaste?: boolean\n  className?: string\n  copyClassName?: string\n  disabled?: boolean\n  getDataToCopy: () => FormStateWithoutComponents\n  isRow?: boolean\n  onPaste: OnPasteFn\n  pasteClassName?: string\n} & ClipboardCopyData\n\n/**\n * Menu actions for copying and pasting fields. Currently, this is only used in Arrays and Blocks.\n * @note This component doesn't use the Clipboard API, but localStorage. See rationale in #11513\n */\nexport const ClipboardAction: FC<Props> = ({\n  allowCopy,\n  allowPaste,\n  className,\n  copyClassName,\n  disabled,\n  isRow,\n  onPaste,\n  pasteClassName,\n  path,\n  ...rest\n}) => {\n  const { t } = useTranslation()\n\n  const classes = [`${baseClass}__popup`, className].filter(Boolean).join(' ')\n\n  const handleCopy = useCallback(() => {\n    const clipboardResult = clipboardCopy({\n      path,\n      t,\n      ...rest,\n    })\n\n    if (typeof clipboardResult === 'string') {\n      toast.error(clipboardResult)\n    } else {\n      toast.success(t('general:copied'))\n    }\n  }, [t, rest, path])\n\n  const handlePaste = useCallback(() => {\n    const clipboardResult = clipboardPaste(\n      rest.type === 'array'\n        ? {\n            onPaste,\n            path,\n            schemaFields: rest.fields,\n            t,\n          }\n        : {\n            onPaste,\n            path,\n            schemaBlocks: rest.blocks,\n            t,\n          },\n    )\n\n    if (typeof clipboardResult === 'string') {\n      toast.error(clipboardResult)\n    }\n  }, [onPaste, rest, path, t])\n\n  if (!allowPaste && !allowCopy) {\n    return null\n  }\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonClassName={`${baseClass}__button`}\n      caret={false}\n      className={classes}\n      disabled={disabled}\n      horizontalAlign=\"right\"\n      render={({ close }) => (\n        <PopupList.MenuItem>\n          <PopupList.Button\n            className={copyClassName}\n            disabled={!allowCopy}\n            icon={<CopyIcon size={24} />}\n            onClick={() => {\n              void handleCopy()\n              close()\n            }}\n          >\n            {isRow ? t('general:copyRow') : t('general:copyField')}\n          </PopupList.Button>\n          <PopupList.Button\n            className={pasteClassName}\n            disabled={!allowPaste}\n            icon={<ClipboardIcon />}\n            onClick={() => {\n              void handlePaste()\n              close()\n            }}\n          >\n            {isRow ? t('general:pasteRow') : t('general:pasteField')}\n          </PopupList.Button>\n        </PopupList.MenuItem>\n      )}\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAAkBA,WAAW,QAAQ;AACrC,SAASC,KAAK,QAAQ;AAItB,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,SAASC,aAAa,EAAEC,cAAc,QAAQ;AAC9C,OAAO;AAEP,MAAMC,SAAA,GAAY;AAclB;;;;AAIA,OAAO,MAAMC,eAAA,GAA6BA,CAAC;EACzCC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,aAAa;EACbC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC,cAAc;EACdC,IAAI;EACJ,GAAGC;AAAA,CACJ;EACC,MAAM;IAAEC;EAAC,CAAE,GAAGjB,cAAA;EAEd,MAAMkB,OAAA,GAAU,CAAC,GAAGb,SAAA,SAAkB,EAAEI,SAAA,CAAU,CAACU,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;EAExE,MAAMC,UAAA,GAAa3B,WAAA,CAAY;IAC7B,MAAM4B,eAAA,GAAkBpB,aAAA,CAAc;MACpCY,IAAA;MACAE,CAAA;MACA,GAAGD;IACL;IAEA,IAAI,OAAOO,eAAA,KAAoB,UAAU;MACvC3B,KAAA,CAAM4B,KAAK,CAACD,eAAA;IACd,OAAO;MACL3B,KAAA,CAAM6B,OAAO,CAACR,CAAA,CAAE;IAClB;EACF,GAAG,CAACA,CAAA,EAAGD,IAAA,EAAMD,IAAA,CAAK;EAElB,MAAMW,WAAA,GAAc/B,WAAA,CAAY;IAC9B,MAAM4B,iBAAA,GAAkBnB,cAAA,CACtBY,IAAA,CAAKW,IAAI,KAAK,UACV;MACEd,OAAA;MACAE,IAAA;MACAa,YAAA,EAAcZ,IAAA,CAAKa,MAAM;MACzBZ;IACF,IACA;MACEJ,OAAA;MACAE,IAAA;MACAe,YAAA,EAAcd,IAAA,CAAKe,MAAM;MACzBd;IACF;IAGN,IAAI,OAAOM,iBAAA,KAAoB,UAAU;MACvC3B,KAAA,CAAM4B,KAAK,CAACD,iBAAA;IACd;EACF,GAAG,CAACV,OAAA,EAASG,IAAA,EAAMD,IAAA,EAAME,CAAA,CAAE;EAE3B,IAAI,CAACT,UAAA,IAAc,CAACD,SAAA,EAAW;IAC7B,OAAO;EACT;EAEA,oBACEyB,IAAA,CAAC/B,KAAA;IACCgC,MAAA,eAAQD,IAAA,CAACjC,QAAA;IACTmC,eAAA,EAAiB,GAAG7B,SAAA,UAAmB;IACvC8B,KAAA,EAAO;IACP1B,SAAA,EAAWS,OAAA;IACXP,QAAA,EAAUA,QAAA;IACVyB,eAAA,EAAgB;IAChBC,MAAA,EAAQA,CAAC;MAAEC;IAAK,CAAE,kBAChBC,KAAA,CAACrC,SAAA,CAAUsC,QAAQ;8BACjBR,IAAA,CAAC9B,SAAA,CAAUuC,MAAM;QACfhC,SAAA,EAAWC,aAAA;QACXC,QAAA,EAAU,CAACJ,SAAA;QACXmC,IAAA,eAAMV,IAAA,CAAClC,QAAA;UAAS6C,IAAA,EAAM;;QACtBC,OAAA,EAASA,CAAA;UACP,KAAKtB,UAAA;UACLgB,KAAA;QACF;kBAEC1B,KAAA,GAAQK,CAAA,CAAE,qBAAqBA,CAAA,CAAE;uBAEpCe,IAAA,CAAC9B,SAAA,CAAUuC,MAAM;QACfhC,SAAA,EAAWK,cAAA;QACXH,QAAA,EAAU,CAACH,UAAA;QACXkC,IAAA,eAAMV,IAAA,CAACnC,aAAA;QACP+C,OAAA,EAASA,CAAA;UACP,KAAKlB,WAAA;UACLY,KAAA;QACF;kBAEC1B,KAAA,GAAQK,CAAA,CAAE,sBAAsBA,CAAA,CAAE;;;IAIzC4B,aAAA,EAAc;;AAGpB","ignoreList":[]}

package/dist/elements/CloseModalButton/index.css

@@ -0,0 +1,3 @@
+.close-modal-button {
+  padding: 0;
+}

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

@@ -1,4 +1,4 @@
-import './index.scss';
+import './index.css';
 export declare function CloseModalButton({ slug, className }: {
     className?: string;
     slug: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CloseModalButton/index.tsx"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAA;AAIrB,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,+BAiBzF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CloseModalButton/index.tsx"],"names":[],"mappings":"AAKA,OAAO,aAAa,CAAA;AAIpB,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,+BAgBzF"}

package/dist/elements/CloseModalButton/index.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
-import { XIcon } from '../../icons/X/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import './index.scss';
+import { Button } from '../Button/index.js';
+import './index.css';
 const baseClass = 'close-modal-button';
 export function CloseModalButton({
   slug,
@@ -14,14 +15,17 @@ export function CloseModalButton({
   const {
     t
   } = useTranslation();
-  return /*#__PURE__*/_jsx("button", {
+  return /*#__PURE__*/_jsx(Button, {
     "aria-label": t('general:close'),
+    buttonStyle: "ghost",
     className: [baseClass, className].filter(Boolean).join(' '),
+    icon: /*#__PURE__*/_jsx(ChevronIcon, {
+      direction: "left",
+      size: 24
+    }),
     onClick: () => {
       closeModal(slug);
-    },
-    type: "button",
-    children: /*#__PURE__*/_jsx(XIcon, {})
+    }
   }, "close-button");
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useModal","XIcon","useTranslation","baseClass","CloseModalButton","slug","className","closeModal","t","_jsx","filter","Boolean","join","onClick","type"],"sources":["../../../src/elements/CloseModalButton/index.tsx"],"sourcesContent":["import { useModal } from '@faceless-ui/modal'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'close-modal-button'\n\nexport function CloseModalButton({ slug, className }: { className?: string; slug: string }) {\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  return (\n    <button\n      aria-label={t('general:close')}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      key=\"close-button\"\n      onClick={() => {\n        closeModal(slug)\n      }}\n      type=\"button\"\n    >\n      <XIcon />\n    </button>\n  )\n}\n"],"mappings":";AAAA,SAASA,QAAQ,QAAQ;AAEzB,SAASC,KAAK,QAAQ;AACtB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,SAASC,iBAAiB;EAAEC,IAAI;EAAEC;AAAS,CAAwC;EACxF,MAAM;IAAEC;EAAU,CAAE,GAAGP,QAAA;EACvB,MAAM;IAAEQ;EAAC,CAAE,GAAGN,cAAA;EAEd,oBACEO,IAAA,CAAC;IACC,cAAYD,CAAA,CAAE;IACdF,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACI,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;IAEvDC,OAAA,EAASA,CAAA;MACPN,UAAA,CAAWF,IAAA;IACb;IACAS,IAAA,EAAK;cAEL,aAAAL,IAAA,CAACR,KAAA;KANG;AASV","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useModal","ChevronIcon","useTranslation","Button","baseClass","CloseModalButton","slug","className","closeModal","t","_jsx","buttonStyle","filter","Boolean","join","icon","direction","size","onClick"],"sources":["../../../src/elements/CloseModalButton/index.tsx"],"sourcesContent":["import { useModal } from '@faceless-ui/modal'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'close-modal-button'\n\nexport function CloseModalButton({ slug, className }: { className?: string; slug: string }) {\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  return (\n    <Button\n      aria-label={t('general:close')}\n      buttonStyle=\"ghost\"\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      icon={<ChevronIcon direction=\"left\" size={24} />}\n      key=\"close-button\"\n      onClick={() => {\n        closeModal(slug)\n      }}\n    />\n  )\n}\n"],"mappings":";AAAA,SAASA,QAAQ,QAAQ;AAEzB,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,SAASC,iBAAiB;EAAEC,IAAI;EAAEC;AAAS,CAAwC;EACxF,MAAM;IAAEC;EAAU,CAAE,GAAGR,QAAA;EACvB,MAAM;IAAES;EAAC,CAAE,GAAGP,cAAA;EAEd,oBACEQ,IAAA,CAACP,MAAA;IACC,cAAYM,CAAA,CAAE;IACdE,WAAA,EAAY;IACZJ,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACK,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;IACvDC,IAAA,eAAML,IAAA,CAACT,WAAA;MAAYe,SAAA,EAAU;MAAOC,IAAA,EAAM;;IAE1CC,OAAA,EAASA,CAAA;MACPV,UAAA,CAAWF,IAAA;IACb;KAHI;AAMV","ignoreList":[]}

package/dist/elements/CloseModalOnRouteChange/index.js

@@ -2,9 +2,9 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { useModal } from '@faceless-ui/modal';
-import { usePathname } from 'next/navigation.js';
 import { useEffect, useRef } from 'react';
 import { useEffectEvent } from '../../hooks/useEffectEvent.js';
+import { usePathname } from '../../providers/RouterAdapter/index.js';
 export function CloseModalOnRouteChange() {
   const $ = _c(6);
   const {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useModal","usePathname","useEffect","useRef","useEffectEvent","CloseModalOnRouteChange","$","closeAllModals","pathname","t0","closeAllModalsEffectEvent","initialRenderRef","t1","current","t2"],"sources":["../../../src/elements/CloseModalOnRouteChange/index.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { usePathname } from 'next/navigation.js'\nimport { useEffect, useRef } from 'react'\n\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\n\nexport function CloseModalOnRouteChange() {\n  const { closeAllModals } = useModal()\n  const pathname = usePathname()\n\n  const closeAllModalsEffectEvent = useEffectEvent(() => {\n    closeAllModals()\n  })\n\n  const initialRenderRef = useRef(true)\n\n  useEffect(() => {\n    if (initialRenderRef.current) {\n      initialRenderRef.current = false\n      return\n    }\n\n    closeAllModalsEffectEvent()\n  }, [pathname])\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAEA,SAASC,QAAQ,QAAQ;AACzB,SAASC,WAAW,QAAQ;AAC5B,SAASC,SAAS,EAAEC,MAAM,QAAQ;AAElC,SAASC,cAAc,QAAQ;AAE/B,OAAO,SAAAC,wBAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACL;IAAAQ;EAAA,IAA2BP,QAAA;EAC3B,MAAAQ,QAAA,GAAiBP,WAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAH,CAAA,QAAAC,cAAA;IAEgCE,EAAA,GAAAA,CAAA;MAC/CF,cAAA;IAAA;IACFD,CAAA,MAAAC,cAAA;IAAAD,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAFA,MAAAI,yBAAA,GAAkCN,cAAA,CAAeK,EAEjD;EAEA,MAAAE,gBAAA,GAAyBR,MAAA,KAAO;EAAA,IAAAS,EAAA;EAAA,IAAAN,CAAA,QAAAI,yBAAA;IAEtBE,EAAA,GAAAA,CAAA;MAAA,IACJD,gBAAA,CAAAE,OAAA;QACFF,gBAAA,CAAAE,OAAA;QAAA;MAAA;MAIFH,yBAAA;IAAA;IACFJ,CAAA,MAAAI,yBAAA;IAAAJ,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAR,CAAA,QAAAE,QAAA;IAAGM,EAAA,IAACN,QAAA;IAASF,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAPbJ,SAAA,CAAUU,EAOV,EAAGE,EAAU;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useModal","useEffect","useRef","useEffectEvent","usePathname","CloseModalOnRouteChange","$","closeAllModals","pathname","t0","closeAllModalsEffectEvent","initialRenderRef","t1","current","t2"],"sources":["../../../src/elements/CloseModalOnRouteChange/index.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { useEffect, useRef } from 'react'\n\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { usePathname } from '../../providers/RouterAdapter/index.js'\n\nexport function CloseModalOnRouteChange() {\n  const { closeAllModals } = useModal()\n  const pathname = usePathname()\n\n  const closeAllModalsEffectEvent = useEffectEvent(() => {\n    closeAllModals()\n  })\n\n  const initialRenderRef = useRef(true)\n\n  useEffect(() => {\n    if (initialRenderRef.current) {\n      initialRenderRef.current = false\n      return\n    }\n\n    closeAllModalsEffectEvent()\n  }, [pathname])\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAEA,SAASC,QAAQ,QAAQ;AACzB,SAASC,SAAS,EAAEC,MAAM,QAAQ;AAElC,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAE5B,OAAO,SAAAC,wBAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACL;IAAAQ;EAAA,IAA2BP,QAAA;EAC3B,MAAAQ,QAAA,GAAiBJ,WAAA;EAAA,IAAAK,EAAA;EAAA,IAAAH,CAAA,QAAAC,cAAA;IAEgCE,EAAA,GAAAA,CAAA;MAC/CF,cAAA;IAAA;IACFD,CAAA,MAAAC,cAAA;IAAAD,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAFA,MAAAI,yBAAA,GAAkCP,cAAA,CAAeM,EAEjD;EAEA,MAAAE,gBAAA,GAAyBT,MAAA,KAAO;EAAA,IAAAU,EAAA;EAAA,IAAAN,CAAA,QAAAI,yBAAA;IAEtBE,EAAA,GAAAA,CAAA;MAAA,IACJD,gBAAA,CAAAE,OAAA;QACFF,gBAAA,CAAAE,OAAA;QAAA;MAAA;MAIFH,yBAAA;IAAA;IACFJ,CAAA,MAAAI,yBAAA;IAAAJ,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAR,CAAA,QAAAE,QAAA;IAAGM,EAAA,IAACN,QAAA;IAASF,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAPbL,SAAA,CAAUW,EAOV,EAAGE,EAAU;EAAA;AAAA","ignoreList":[]}

package/dist/elements/CodeEditor/index.css

@@ -3,13 +3,14 @@
     /* Base styles */
     direction: ltr;
     width: 100%;
+    contain: inline-size; /* Width doesn't depend on children - helps Monaco calculate correctly */
     height: auto;
     padding: var(--spacer-2) 0;
     -webkit-appearance: none;
 
     /* Theme */
     background: var(--color-bg-secondary);
-    border: 1px solid var(--color-border);
+    border: var(--stroke-width-small) solid var(--color-border);
     border-radius: var(--radius-medium);
     box-shadow: none;
 
@@ -24,7 +25,7 @@
     transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
     &:focus-within {
-      border-color: var(--color-border-selected-strong);
+      border-color: var(--accessibility-focus-color);
     }
 
     &.read-only {

package/dist/elements/CollapseAllToggle/index.js

@@ -34,13 +34,13 @@ export const CollapseAllToggle = t0 => {
     t2 = _jsxs(Fragment, {
       children: [_jsx("li", {
         children: _jsx(Button, {
-          buttonStyle: "icon-label",
+          buttonStyle: "ghost",
           onClick: t1,
           children: t("fields:collapseAll")
         })
       }), _jsx("li", {
         children: _jsx(Button, {
-          buttonStyle: "icon-label",
+          buttonStyle: "ghost",
           onClick: t3,
           children: t("fields:showAll")
         })

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Fragment","useTranslation","Button","CollapseAllToggle","t0","$","onClick","t","t1","t2","t3","_jsxs","children","_jsx","buttonStyle"],"sources":["../../../src/elements/CollapseAllToggle/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\n\nexport type CollapseAllToggleProps = {\n  onClick: (collapsed: boolean) => void\n}\n\nexport const CollapseAllToggle: React.FC<CollapseAllToggleProps> = ({ onClick }) => {\n  const { t } = useTranslation()\n\n  return (\n    <Fragment>\n      <li>\n        <Button buttonStyle=\"icon-label\" onClick={() => onClick(true)}>\n          {t('fields:collapseAll')}\n        </Button>\n      </li>\n      <li>\n        <Button buttonStyle=\"icon-label\" onClick={() => onClick(false)}>\n          {t('fields:showAll')}\n        </Button>\n      </li>\n    </Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AAMvB,OAAO,MAAMC,iBAAA,GAAsDC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ;EAAA,IAAAF,EAAW;EAC7E;IAAAG;EAAA,IAAcN,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAAH,CAAA,QAAAC,OAAA;IAKkCE,EAAA,GAAAA,CAAA,KAAMF,OAAA,KAAQ;IAAAD,CAAA,MAAAC,OAAA;IAAAD,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAAA,IAAAI,EAAA;EAAA,IAAAJ,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAE,CAAA,IAAAF,CAAA,QAAAG,EAAA;IAAA,IAAAE,EAAA;IAAA,IAAAL,CAAA,QAAAC,OAAA;MAKdI,EAAA,GAAAA,CAAA,KAAMJ,OAAA,MAAQ;MAAAD,CAAA,MAAAC,OAAA;MAAAD,CAAA,MAAAK,EAAA;IAAA;MAAAA,EAAA,GAAAL,CAAA;IAAA;IAP5DI,EAAA,GAAAE,KAAA,CAAAX,QAAA;MAAAY,QAAA,GACEC,IAAA,CAAC;QAAAD,QAAA,EACCC,IAAA,CAAAX,MAAA;UAAAY,WAAA,EAAoB;UAAAR,OAAA,EAAsBE,EAAc;UAAAI,QAAA,EACrDL,CAAA,CAAE;QAAA,C;UAGPM,IAAA,CAAC;QAAAD,QAAA,EACCC,IAAA,CAAAX,MAAA;UAAAY,WAAA,EAAoB;UAAAR,OAAA,EAAsBI,EAAc;UAAAE,QAAA,EACrDL,CAAA,CAAE;QAAA,C;;;;;;;;;;SARTE,E;CAaJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Fragment","useTranslation","Button","CollapseAllToggle","t0","$","onClick","t","t1","t2","t3","_jsxs","children","_jsx","buttonStyle"],"sources":["../../../src/elements/CollapseAllToggle/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\n\nexport type CollapseAllToggleProps = {\n  onClick: (collapsed: boolean) => void\n}\n\nexport const CollapseAllToggle: React.FC<CollapseAllToggleProps> = ({ onClick }) => {\n  const { t } = useTranslation()\n\n  return (\n    <Fragment>\n      <li>\n        <Button buttonStyle=\"ghost\" onClick={() => onClick(true)}>\n          {t('fields:collapseAll')}\n        </Button>\n      </li>\n      <li>\n        <Button buttonStyle=\"ghost\" onClick={() => onClick(false)}>\n          {t('fields:showAll')}\n        </Button>\n      </li>\n    </Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AAMvB,OAAO,MAAMC,iBAAA,GAAsDC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ;EAAA,IAAAF,EAAW;EAC7E;IAAAG;EAAA,IAAcN,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAAH,CAAA,QAAAC,OAAA;IAK6BE,EAAA,GAAAA,CAAA,KAAMF,OAAA,KAAQ;IAAAD,CAAA,MAAAC,OAAA;IAAAD,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAAA,IAAAI,EAAA;EAAA,IAAAJ,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAE,CAAA,IAAAF,CAAA,QAAAG,EAAA;IAAA,IAAAE,EAAA;IAAA,IAAAL,CAAA,QAAAC,OAAA;MAKdI,EAAA,GAAAA,CAAA,KAAMJ,OAAA,MAAQ;MAAAD,CAAA,MAAAC,OAAA;MAAAD,CAAA,MAAAK,EAAA;IAAA;MAAAA,EAAA,GAAAL,CAAA;IAAA;IAPvDI,EAAA,GAAAE,KAAA,CAAAX,QAAA;MAAAY,QAAA,GACEC,IAAA,CAAC;QAAAD,QAAA,EACCC,IAAA,CAAAX,MAAA;UAAAY,WAAA,EAAoB;UAAAR,OAAA,EAAiBE,EAAc;UAAAI,QAAA,EAChDL,CAAA,CAAE;QAAA,C;UAGPM,IAAA,CAAC;QAAAD,QAAA,EACCC,IAAA,CAAAX,MAAA;UAAAY,WAAA,EAAoB;UAAAR,OAAA,EAAiBI,EAAc;UAAAE,QAAA,EAChDL,CAAA,CAAE;QAAA,C;;;;;;;;;;SARTE,E;CAaJ","ignoreList":[]}

package/dist/elements/Collapsible/index.css

@@ -12,7 +12,7 @@
     display: flex;
     align-items: center;
     background: var(--color-bg-secondary);
-    border: 1px solid var(--color-border);
+    border: var(--stroke-width-small) solid var(--color-border);
     border-radius: var(--radius-medium);
     height: var(--spacer-5);
     z-index: 2;
@@ -180,7 +180,7 @@
   }
 
   .collapsible__indicator:focus-visible {
-    border: 1px solid var(--color-border-selected-strong);
+    border: var(--stroke-width-small) solid var(--accessibility-focus-color);
     border-radius: var(--radius-medium, 0.3125rem);
     background: var(--color-bg-secondary);
   }
@@ -191,7 +191,7 @@
 
   .collapsible__content {
     background-color: var(--color-bg);
-    border: 1px solid var(--color-border);
+    border: var(--stroke-width-small) solid var(--color-border);
     border-top: none;
     border-radius: 0 0 var(--radius-medium) var(--radius-medium);
     padding: var(--spacer-3);

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.scss';
 export type OnCancel = () => void;
 export type ConfirmationModalProps = {
     body: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ConfirmationModal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAK1C,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAA;AAEjC,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACtC,CAAA;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAkF9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ConfirmationModal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAQ1C,MAAM,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAA;AAEjC,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACtC,CAAA;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAsF9D"}

package/dist/elements/ConfirmationModal/index.js

@@ -1,16 +1,15 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, useModal } from '@faceless-ui/modal';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback } from 'react';
+import { XIcon } from '../../icons/X/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
 import { drawerZBase, useDrawerDepth } from '../Drawer/index.js';
-import './index.scss';
-const baseClass = 'confirmation-modal';
+import { AlertModal, useModal } from '../Modal/index.js';
 export function ConfirmationModal(props) {
-  const $ = _c(25);
+  const $ = _c(23);
   const {
     body,
     cancelLabel,
@@ -75,68 +74,58 @@ export function ConfirmationModal(props) {
     return null;
   }
   let t2;
-  if ($[10] !== className) {
-    t2 = [baseClass, className].filter(Boolean);
-    $[10] = className;
-    $[11] = t2;
-  } else {
-    t2 = $[11];
-  }
-  const t3 = t2.join(" ");
-  const t4 = drawerZBase + editDepth;
-  let t5;
-  if ($[12] !== body || $[13] !== cancelLabel || $[14] !== confirmLabel || $[15] !== confirming || $[16] !== confirmingLabel || $[17] !== heading || $[18] !== modalSlug || $[19] !== onCancel || $[20] !== onConfirm || $[21] !== t || $[22] !== t3 || $[23] !== t4) {
-    t5 = _jsx(Modal, {
-      className: t3,
-      closeOnBlur: false,
-      slug: modalSlug,
-      style: {
-        zIndex: t4
-      },
-      children: _jsxs("div", {
-        className: `${baseClass}__wrapper`,
-        children: [_jsxs("div", {
-          className: `${baseClass}__content`,
-          children: [typeof heading === "string" ? _jsx("h1", {
-            children: heading
-          }) : heading, typeof body === "string" ? _jsx("p", {
-            children: body
-          }) : body]
-        }), _jsxs("div", {
-          className: `${baseClass}__controls`,
-          children: [_jsx(Button, {
-            buttonStyle: "secondary",
-            disabled: confirming,
-            id: "confirm-cancel",
-            onClick: onCancel,
-            size: "large",
-            type: "button",
-            children: cancelLabel || t("general:cancel")
-          }), _jsx(Button, {
-            id: "confirm-action",
-            onClick: onConfirm,
-            size: "large",
-            children: confirming ? confirmingLabel || `${t("general:loading")}...` : confirmLabel || t("general:confirm")
-          })]
+  if ($[10] !== body || $[11] !== cancelLabel || $[12] !== className || $[13] !== confirmLabel || $[14] !== confirming || $[15] !== confirmingLabel || $[16] !== editDepth || $[17] !== heading || $[18] !== modalSlug || $[19] !== onCancel || $[20] !== onConfirm || $[21] !== t) {
+    t2 = _jsx(AlertModal, {
+      actions: _jsxs(_Fragment, {
+        children: [_jsx(Button, {
+          buttonStyle: "secondary",
+          disabled: confirming,
+          id: "confirm-cancel",
+          onClick: onCancel,
+          size: "medium",
+          type: "button",
+          children: cancelLabel || t("general:cancel")
+        }), _jsx(Button, {
+          id: "confirm-action",
+          onClick: onConfirm,
+          size: "medium",
+          children: confirming ? confirmingLabel || `${t("general:loading")}...` : confirmLabel || t("general:confirm")
         })]
-      })
+      }),
+      className,
+      compact: true,
+      headerActions: _jsx(Button, {
+        "aria-label": t("general:close"),
+        buttonStyle: "ghost",
+        disabled: confirming,
+        icon: _jsx(XIcon, {
+          size: 24
+        }),
+        onClick: onCancel
+      }),
+      slug: modalSlug,
+      title: heading,
+      zIndex: drawerZBase + editDepth + 1,
+      children: typeof body === "string" ? _jsx("p", {
+        children: body
+      }) : body
     });
-    $[12] = body;
-    $[13] = cancelLabel;
-    $[14] = confirmLabel;
-    $[15] = confirming;
-    $[16] = confirmingLabel;
+    $[10] = body;
+    $[11] = cancelLabel;
+    $[12] = className;
+    $[13] = confirmLabel;
+    $[14] = confirming;
+    $[15] = confirmingLabel;
+    $[16] = editDepth;
     $[17] = heading;
     $[18] = modalSlug;
     $[19] = onCancel;
     $[20] = onConfirm;
     $[21] = t;
-    $[22] = t3;
-    $[23] = t4;
-    $[24] = t5;
+    $[22] = t2;
   } else {
-    t5 = $[24];
+    t2 = $[22];
   }
-  return t5;
+  return t2;
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","useCallback","useTranslation","Button","drawerZBase","useDrawerDepth","baseClass","ConfirmationModal","props","$","body","cancelLabel","className","confirmingLabel","confirmLabel","heading","modalSlug","onCancel","onCancelFromProps","onConfirm","onConfirmFromProps","editDepth","confirming","setConfirming","useState","closeModal","isModalOpen","t","t0","t1","t2","filter","Boolean","t3","join","t4","t5","_jsx","closeOnBlur","slug","style","zIndex","children","_jsxs","buttonStyle","disabled","id","onClick","size","type"],"sources":["../../../src/elements/ConfirmationModal/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { useCallback } from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { drawerZBase, useDrawerDepth } from '../Drawer/index.js'\nimport './index.scss'\n\nconst baseClass = 'confirmation-modal'\n\nexport type OnCancel = () => void\n\nexport type ConfirmationModalProps = {\n  body: React.ReactNode\n  cancelLabel?: string\n  className?: string\n  confirmingLabel?: string\n  confirmLabel?: string\n  heading: React.ReactNode\n  modalSlug: string\n  onCancel?: OnCancel\n  onConfirm: () => Promise<void> | void\n}\n\nexport function ConfirmationModal(props: ConfirmationModalProps) {\n  const {\n    body,\n    cancelLabel,\n    className,\n    confirmingLabel,\n    confirmLabel,\n    heading,\n    modalSlug,\n    onCancel: onCancelFromProps,\n    onConfirm: onConfirmFromProps,\n  } = props\n\n  const editDepth = useDrawerDepth()\n\n  const [confirming, setConfirming] = React.useState(false)\n\n  const { closeModal, isModalOpen } = useModal()\n  const { t } = useTranslation()\n\n  const onConfirm = useCallback(async () => {\n    if (!confirming) {\n      setConfirming(true)\n\n      if (typeof onConfirmFromProps === 'function') {\n        await onConfirmFromProps()\n      }\n\n      setConfirming(false)\n      closeModal(modalSlug)\n    }\n  }, [confirming, onConfirmFromProps, closeModal, modalSlug])\n\n  const onCancel = useCallback(() => {\n    if (!confirming) {\n      closeModal(modalSlug)\n\n      if (typeof onCancelFromProps === 'function') {\n        onCancelFromProps()\n      }\n    }\n  }, [confirming, onCancelFromProps, closeModal, modalSlug])\n\n  if (!isModalOpen(modalSlug)) {\n    return null\n  }\n\n  return (\n    <Modal\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      // Fixes https://github.com/payloadcms/payload/issues/13778\n      closeOnBlur={false}\n      slug={modalSlug}\n      style={{\n        zIndex: drawerZBase + editDepth,\n      }}\n    >\n      <div className={`${baseClass}__wrapper`}>\n        <div className={`${baseClass}__content`}>\n          {typeof heading === 'string' ? <h1>{heading}</h1> : heading}\n          {typeof body === 'string' ? <p>{body}</p> : body}\n        </div>\n        <div className={`${baseClass}__controls`}>\n          <Button\n            buttonStyle=\"secondary\"\n            disabled={confirming}\n            id=\"confirm-cancel\"\n            onClick={onCancel}\n            size=\"large\"\n            type=\"button\"\n          >\n            {cancelLabel || t('general:cancel')}\n          </Button>\n          <Button id=\"confirm-action\" onClick={onConfirm} size=\"large\">\n            {confirming\n              ? confirmingLabel || `${t('general:loading')}...`\n              : confirmLabel || t('general:confirm')}\n          </Button>\n        </div>\n      </div>\n    </Modal>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","XIcon","useTranslation","Button","drawerZBase","useDrawerDepth","AlertModal","useModal","ConfirmationModal","props","$","body","cancelLabel","className","confirmingLabel","confirmLabel","heading","modalSlug","onCancel","onCancelFromProps","onConfirm","onConfirmFromProps","editDepth","confirming","setConfirming","useState","closeModal","isModalOpen","t","t0","t1","t2","_jsx","actions","_jsxs","_Fragment","children","buttonStyle","disabled","id","onClick","size","type","icon","title","zIndex"],"sources":["../../../src/elements/ConfirmationModal/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { drawerZBase, useDrawerDepth } from '../Drawer/index.js'\nimport { AlertModal, useModal } from '../Modal/index.js'\n\nexport type OnCancel = () => void\n\nexport type ConfirmationModalProps = {\n  body: React.ReactNode\n  cancelLabel?: string\n  className?: string\n  confirmingLabel?: string\n  confirmLabel?: string\n  heading: React.ReactNode\n  modalSlug: string\n  onCancel?: OnCancel\n  onConfirm: () => Promise<void> | void\n}\n\nexport function ConfirmationModal(props: ConfirmationModalProps) {\n  const {\n    body,\n    cancelLabel,\n    className,\n    confirmingLabel,\n    confirmLabel,\n    heading,\n    modalSlug,\n    onCancel: onCancelFromProps,\n    onConfirm: onConfirmFromProps,\n  } = props\n\n  const editDepth = useDrawerDepth()\n\n  const [confirming, setConfirming] = React.useState(false)\n\n  const { closeModal, isModalOpen } = useModal()\n  const { t } = useTranslation()\n\n  const onConfirm = useCallback(async () => {\n    if (!confirming) {\n      setConfirming(true)\n\n      if (typeof onConfirmFromProps === 'function') {\n        await onConfirmFromProps()\n      }\n\n      setConfirming(false)\n      closeModal(modalSlug)\n    }\n  }, [confirming, onConfirmFromProps, closeModal, modalSlug])\n\n  const onCancel = useCallback(() => {\n    if (!confirming) {\n      closeModal(modalSlug)\n\n      if (typeof onCancelFromProps === 'function') {\n        onCancelFromProps()\n      }\n    }\n  }, [confirming, onCancelFromProps, closeModal, modalSlug])\n\n  if (!isModalOpen(modalSlug)) {\n    return null\n  }\n\n  return (\n    <AlertModal\n      actions={\n        <>\n          <Button\n            buttonStyle=\"secondary\"\n            disabled={confirming}\n            id=\"confirm-cancel\"\n            onClick={onCancel}\n            size=\"medium\"\n            type=\"button\"\n          >\n            {cancelLabel || t('general:cancel')}\n          </Button>\n          <Button id=\"confirm-action\" onClick={onConfirm} size=\"medium\">\n            {confirming\n              ? confirmingLabel || `${t('general:loading')}...`\n              : confirmLabel || t('general:confirm')}\n          </Button>\n        </>\n      }\n      className={className}\n      compact\n      headerActions={\n        <Button\n          aria-label={t('general:close')}\n          buttonStyle=\"ghost\"\n          disabled={confirming}\n          icon={<XIcon size={24} />}\n          onClick={onCancel}\n        />\n      }\n      slug={modalSlug}\n      title={heading}\n      zIndex={drawerZBase + editDepth + 1}\n    >\n      {typeof body === 'string' ? <p>{body}</p> : body}\n    </AlertModal>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/CopyLocaleData/index.css

@@ -0,0 +1,22 @@
+@layer payload-default {
+  .copy-locale-data__sub-header {
+    padding: var(--spacer-2-5);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .copy-locale-data__content {
+    padding: var(--spacer-2-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2-5);
+
+    > * {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacer-1);
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const CopyLocaleData: React.FC;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CopyLocaleData/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAgB1C,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAiMlC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CopyLocaleData/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAiB1C,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAgMlC,CAAA"}