@payloadcms/ui 4.0.0-internal.5b1e7cd → 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/ClipboardActionLabel.js

@@ -3,8 +3,8 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
+import { ClipboardIcon } from '../../icons/Clipboard/index.js';
 import { CopyIcon } from '../../icons/Copy/index.js';
-import { EditIcon } from '../../icons/Edit/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 export const ClipboardActionLabel = t0 => {
   const $ = _c(4);
@@ -30,7 +30,7 @@ export const ClipboardActionLabel = t0 => {
       }
     }
     t1 = _jsxs(Fragment, {
-      children: [isPaste ? _jsx(EditIcon, {}) : _jsx(CopyIcon, {}), " ", label]
+      children: [isPaste ? _jsx(ClipboardIcon, {}) : _jsx(CopyIcon, {}), " ", label]
     });
     $[0] = isPaste;
     $[1] = isRow;

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

@@ -1 +1 @@
-{"version":3,"file":"ClipboardActionLabel.js","names":["c","_c","Fragment","CopyIcon","EditIcon","useTranslation","ClipboardActionLabel","t0","$","isPaste","isRow","t","t1","label","_jsxs","children","_jsx"],"sources":["../../../src/elements/ClipboardAction/ClipboardActionLabel.tsx"],"sourcesContent":["'use client'\n\nimport { Fragment } from 'react'\n\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const ClipboardActionLabel = ({\n  isPaste,\n  isRow,\n}: {\n  isPaste?: boolean\n  isRow?: boolean\n}) => {\n  const { t } = useTranslation()\n\n  let label = t('general:copyField')\n  if (!isRow && isPaste) {\n    label = t('general:pasteField')\n  } else if (isRow && !isPaste) {\n    label = t('general:copyRow')\n  } else if (isRow && isPaste) {\n    label = t('general:pasteRow')\n  }\n\n  return (\n    <Fragment>\n      {isPaste ? <EditIcon /> : <CopyIcon />} {label}\n    </Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SAASC,QAAQ,QAAQ;AAEzB,SAASC,QAAQ,QAAQ;AACzB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,oBAAA,GAAuBC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,OAAA;IAAAC;EAAA,IAAAH,EAMpC;EACC;IAAAI;EAAA,IAAcN,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAAJ,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAE,KAAA,IAAAF,CAAA,QAAAG,CAAA;IAEd,IAAAE,KAAA,GAAYF,CAAA,CAAE;IAAA,IACV,CAACD,KAAA,IAASD,OAAA;MACZI,KAAA,CAAAA,CAAA,CAAQF,CAAA,CAAE;IAAV;MAAA,IACSD,KAAA,KAAUD,OAAA;QACnBI,KAAA,CAAAA,CAAA,CAAQF,CAAA,CAAE;MAAV;QAAA,IACSD,KAAA,IAASD,OAAA;UAClBI,KAAA,CAAAA,CAAA,CAAQF,CAAA,CAAE;QAAV;MAAA;IAAA;IAIAC,EAAA,GAAAE,KAAA,CAAAZ,QAAA;MAAAa,QAAA,GACGN,OAAA,GAAUO,IAAA,CAAAZ,QAAA,IAAC,IAAcY,IAAA,CAAAb,QAAA,IAAC,GAAY,KAAEU,KAAA;IAAA,C;;;;;;;;SAD3CD,E;CAIJ","ignoreList":[]}
+{"version":3,"file":"ClipboardActionLabel.js","names":["c","_c","Fragment","ClipboardIcon","CopyIcon","useTranslation","ClipboardActionLabel","t0","$","isPaste","isRow","t","t1","label","_jsxs","children","_jsx"],"sources":["../../../src/elements/ClipboardAction/ClipboardActionLabel.tsx"],"sourcesContent":["'use client'\n\nimport { Fragment } from 'react'\n\nimport { ClipboardIcon } from '../../icons/Clipboard/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const ClipboardActionLabel = ({\n  isPaste,\n  isRow,\n}: {\n  isPaste?: boolean\n  isRow?: boolean\n}) => {\n  const { t } = useTranslation()\n\n  let label = t('general:copyField')\n  if (!isRow && isPaste) {\n    label = t('general:pasteField')\n  } else if (isRow && !isPaste) {\n    label = t('general:copyRow')\n  } else if (isRow && isPaste) {\n    label = t('general:pasteRow')\n  }\n\n  return (\n    <Fragment>\n      {isPaste ? <ClipboardIcon /> : <CopyIcon />} {label}\n    </Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SAASC,QAAQ,QAAQ;AAEzB,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,oBAAA,GAAuBC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,OAAA;IAAAC;EAAA,IAAAH,EAMpC;EACC;IAAAI;EAAA,IAAcN,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAAJ,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAE,KAAA,IAAAF,CAAA,QAAAG,CAAA;IAEd,IAAAE,KAAA,GAAYF,CAAA,CAAE;IAAA,IACV,CAACD,KAAA,IAASD,OAAA;MACZI,KAAA,CAAAA,CAAA,CAAQF,CAAA,CAAE;IAAV;MAAA,IACSD,KAAA,KAAUD,OAAA;QACnBI,KAAA,CAAAA,CAAA,CAAQF,CAAA,CAAE;MAAV;QAAA,IACSD,KAAA,IAASD,OAAA;UAClBI,KAAA,CAAAA,CAAA,CAAQF,CAAA,CAAE;QAAV;MAAA;IAAA;IAIAC,EAAA,GAAAE,KAAA,CAAAZ,QAAA;MAAAa,QAAA,GACGN,OAAA,GAAUO,IAAA,CAAAb,aAAA,IAAC,IAAmBa,IAAA,CAAAZ,QAAA,IAAC,GAAY,KAAES,KAAA;IAAA,C;;;;;;;;SADhDD,E;CAIJ","ignoreList":[]}

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,CA0FrC,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.
@@ -62,36 +64,36 @@ export const ClipboardAction = ({
   }
   return /*#__PURE__*/_jsx(Popup, {
     button: /*#__PURE__*/_jsx(MoreIcon, {}),
+    buttonClassName: `${baseClass}__button`,
+    caret: false,
     className: classes,
     disabled: disabled,
-    horizontalAlign: "center",
+    horizontalAlign: "right",
     render: ({
       close
-    }) => /*#__PURE__*/_jsxs(PopupList.ButtonGroup, {
+    }) => /*#__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')
       })]
     }),
-    size: "large",
     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","horizontalAlign","render","close","_jsxs","ButtonGroup","Button","onClick","isPaste","size","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      className={classes}\n      disabled={disabled}\n      horizontalAlign=\"center\"\n      render={({ close }) => (\n        <PopupList.ButtonGroup>\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      size=\"large\"\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;IACTW,SAAA,EAAWS,OAAA;IACXP,QAAA,EAAUA,QAAA;IACVuB,eAAA,EAAgB;IAChBC,MAAA,EAAQA,CAAC;MAAEC;IAAK,CAAE,kBAChBC,KAAA,CAACpC,SAAA,CAAUqC,WAAW;8BACpBN,IAAA,CAAC/B,SAAA,CAAUsC,MAAM;QACf9B,SAAA,EAAWC,aAAA;QACXC,QAAA,EAAU,CAACJ,SAAA;QACXiC,OAAA,EAASA,CAAA;UACP,KAAKlB,UAAA;UACLc,KAAA;QACF;kBAEA,aAAAJ,IAAA,CAAC9B,oBAAA;UAAqBU,KAAA,EAAOA;;uBAE/BoB,IAAA,CAAC/B,SAAA,CAAUsC,MAAM;QACf9B,SAAA,EAAWK,cAAA;QACXH,QAAA,EAAU,CAACH,UAAA;QACXgC,OAAA,EAASA,CAAA;UACP,KAAKd,WAAA;UACLU,KAAA;QACF;kBAEA,aAAAJ,IAAA,CAAC9B,oBAAA;UAAqBuC,OAAO;UAAC7B,KAAA,EAAOA;;;;IAI3C8B,IAAA,EAAK;IACLC,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":"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","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/CodeEditor.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Props } from './types.js';
-import './index.scss';
+import './index.css';
 declare const CodeEditor: React.FC<Props>;
 export default CodeEditor;
 //# sourceMappingURL=CodeEditor.d.ts.map

package/dist/elements/CodeEditor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAKvC,OAAO,cAAc,CAAA;AAMrB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiG/B,CAAA;AAGD,eAAe,UAAU,CAAA"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAKvC,OAAO,aAAa,CAAA;AA4CpB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsH/B,CAAA;AAGD,eAAe,UAAU,CAAA"}

package/dist/elements/CodeEditor/CodeEditor.js

@@ -7,22 +7,74 @@ import React, { useState } from 'react';
 import { useTheme } from '../../providers/Theme/index.js';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
 import { defaultGlobalEditorOptions, defaultOptions } from './constants.js';
-import './index.scss';
+import './index.css';
 const Editor = 'default' in EditorImport ? EditorImport.default : EditorImport;
 const baseClass = 'code-editor';
+function definePayloadThemes(monaco) {
+  monaco.editor.defineTheme('payload-light', {
+    base: 'vs',
+    colors: {
+      'editor.background': '#00000000',
+      'editor.lineHighlightBackground': '#00000000',
+      'editor.lineHighlightBorder': '#00000000',
+      'editorGutter.background': '#00000000',
+      'editorLineNumber.activeForeground': '#0000004d',
+      'editorLineNumber.foreground': '#0000004d'
+    },
+    inherit: true,
+    rules: [{
+      foreground: 'cb0b96',
+      token: 'keyword'
+    }, {
+      foreground: '005cc5',
+      token: 'identifier'
+    }, {
+      foreground: '093077',
+      token: 'type.identifier'
+    }, {
+      foreground: '093077',
+      token: 'delimiter'
+    }, {
+      foreground: '093077',
+      token: 'delimiter.bracket'
+    }, {
+      foreground: 'c53e0d',
+      token: 'string'
+    }, {
+      foreground: '093077',
+      token: 'number'
+    }, {
+      foreground: '6a737d',
+      token: 'comment'
+    }]
+  });
+  monaco.editor.defineTheme('payload-dark', {
+    base: 'vs-dark',
+    colors: {
+      'editor.background': '#00000000',
+      'editor.lineHighlightBackground': '#00000000',
+      'editor.lineHighlightBorder': '#00000000',
+      'editorGutter.background': '#00000000',
+      'editorLineNumber.activeForeground': '#ffffffb3',
+      'editorLineNumber.foreground': '#ffffffb3'
+    },
+    inherit: true,
+    rules: []
+  });
+}
 const CodeEditor = props => {
   const $ = _c(10);
   const {
     className,
     maxHeight,
-    minHeight,
+    minHeight: t0,
     options,
     readOnly,
     recalculatedHeightAt,
     value,
     ...rest
   } = props;
-  const MIN_HEIGHT = minHeight ?? 56;
+  const minHeight = t0 === undefined ? 48 : t0;
   const prevCalculatedHeightAt = React.useRef(recalculatedHeightAt);
   const {
     insertSpaces,
@@ -31,49 +83,50 @@ const CodeEditor = props => {
     ...globalEditorOptions
   } = options || {};
   const paddingFromProps = options?.padding ? (options.padding.top || 0) + (options.padding?.bottom || 0) : 0;
-  const [dynamicHeight, setDynamicHeight] = useState(MIN_HEIGHT);
+  const [dynamicHeight, setDynamicHeight] = useState(minHeight);
   const {
     theme
   } = useTheme();
-  const t0 = rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : "";
-  const t1 = readOnly && "read-only";
-  let t2;
-  if ($[0] !== className || $[1] !== t0 || $[2] !== t1) {
-    t2 = [baseClass, className, t0, t1].filter(Boolean);
+  const t1 = rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : "";
+  const t2 = readOnly && "read-only";
+  let t3;
+  if ($[0] !== className || $[1] !== t1 || $[2] !== t2) {
+    t3 = [baseClass, className, t1, t2].filter(Boolean);
     $[0] = className;
-    $[1] = t0;
-    $[2] = t1;
-    $[3] = t2;
+    $[1] = t1;
+    $[2] = t2;
+    $[3] = t3;
   } else {
-    t2 = $[3];
+    t3 = $[3];
   }
-  const classes = t2.join(" ");
-  let t3;
+  const classes = t3.join(" ");
   let t4;
-  if ($[4] !== MIN_HEIGHT || $[5] !== paddingFromProps || $[6] !== recalculatedHeightAt || $[7] !== value) {
-    t3 = () => {
+  let t5;
+  if ($[4] !== minHeight || $[5] !== paddingFromProps || $[6] !== recalculatedHeightAt || $[7] !== value) {
+    t4 = () => {
       if (recalculatedHeightAt && recalculatedHeightAt > prevCalculatedHeightAt.current) {
-        setDynamicHeight(value ? Math.max(MIN_HEIGHT, value.split("\n").length * 18 + 2 + paddingFromProps) : MIN_HEIGHT);
+        setDynamicHeight(value ? Math.max(minHeight, value.split("\n").length * 16 + 2 + paddingFromProps + 16) : minHeight);
         prevCalculatedHeightAt.current = recalculatedHeightAt;
       }
     };
-    t4 = [value, MIN_HEIGHT, paddingFromProps, recalculatedHeightAt];
-    $[4] = MIN_HEIGHT;
+    t5 = [value, minHeight, paddingFromProps, recalculatedHeightAt];
+    $[4] = minHeight;
     $[5] = paddingFromProps;
     $[6] = recalculatedHeightAt;
     $[7] = value;
-    $[8] = t3;
-    $[9] = t4;
+    $[8] = t4;
+    $[9] = t5;
   } else {
-    t3 = $[8];
-    t4 = $[9];
+    t4 = $[8];
+    t5 = $[9];
   }
-  React.useEffect(t3, t4);
+  React.useEffect(t4, t5);
   return _jsx(Editor, {
+    beforeMount: definePayloadThemes,
     className: classes,
     height: maxHeight ? Math.min(dynamicHeight, maxHeight) : dynamicHeight,
     loading: _jsx(ShimmerEffect, {
-      height: dynamicHeight
+      height: minHeight
     }),
     options: {
       ...defaultGlobalEditorOptions,
@@ -84,12 +137,12 @@ const CodeEditor = props => {
       tabSize: undefined,
       trimAutoWhitespace: undefined
     },
-    theme: theme === "dark" ? "vs-dark" : "vs",
+    theme: theme === "dark" ? "payload-dark" : "payload-light",
     value,
     ...rest,
     onChange: (value_0, ev) => {
       rest.onChange?.(value_0, ev);
-      setDynamicHeight(value_0 ? Math.max(MIN_HEIGHT, value_0.split("\n").length * 18 + 2 + paddingFromProps) : MIN_HEIGHT);
+      setDynamicHeight(value_0 ? Math.max(minHeight, value_0.split("\n").length * 16 + 2 + paddingFromProps + 16) : minHeight);
     },
     onMount: (editor, monaco) => {
       rest.onMount?.(editor, monaco);
@@ -101,7 +154,7 @@ const CodeEditor = props => {
           trimAutoWhitespace: trimAutoWhitespace ?? defaultOptions.trimAutoWhitespace
         });
       }
-      setDynamicHeight(Math.max(MIN_HEIGHT, editor.getValue().split("\n").length * 18 + 2 + paddingFromProps));
+      setDynamicHeight(Math.max(minHeight, editor.getValue().split("\n").length * 16 + 2 + paddingFromProps + 16));
     }
   });
 };

package/dist/elements/CodeEditor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.js","names":["c","_c","EditorImport","React","useState","useTheme","ShimmerEffect","defaultGlobalEditorOptions","defaultOptions","Editor","default","baseClass","CodeEditor","props","$","className","maxHeight","minHeight","options","readOnly","recalculatedHeightAt","value","rest","MIN_HEIGHT","prevCalculatedHeightAt","useRef","insertSpaces","tabSize","trimAutoWhitespace","globalEditorOptions","paddingFromProps","padding","top","bottom","dynamicHeight","setDynamicHeight","theme","t0","defaultLanguage","t1","t2","filter","Boolean","classes","join","t3","t4","current","Math","max","split","length","useEffect","_jsx","height","min","loading","detectIndentation","undefined","onChange","value_0","ev","onMount","editor","monaco","model","getModel","updateOptions","getValue"],"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport EditorImport from '@monaco-editor/react'\nimport React, { useState } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTheme } from '../../providers/Theme/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport { defaultGlobalEditorOptions, defaultOptions } from './constants.js'\nimport './index.scss'\n\nconst Editor = 'default' in EditorImport ? EditorImport.default : EditorImport\n\nconst baseClass = 'code-editor'\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const {\n    className,\n    maxHeight,\n    minHeight,\n    options,\n    readOnly,\n    recalculatedHeightAt,\n    value,\n    ...rest\n  } = props\n  const MIN_HEIGHT = minHeight ?? 56 // equivalent to 3 lines\n  const prevCalculatedHeightAt = React.useRef<number | undefined>(recalculatedHeightAt)\n\n  // Extract per-model settings to avoid global conflicts\n  const { insertSpaces, tabSize, trimAutoWhitespace, ...globalEditorOptions } = options || {}\n  const paddingFromProps = options?.padding\n    ? (options.padding.top || 0) + (options.padding?.bottom || 0)\n    : 0\n\n  const [dynamicHeight, setDynamicHeight] = useState(MIN_HEIGHT)\n  const { theme } = useTheme()\n\n  const classes = [\n    baseClass,\n    className,\n    rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',\n    readOnly && 'read-only',\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  React.useEffect(() => {\n    if (recalculatedHeightAt && recalculatedHeightAt > prevCalculatedHeightAt.current) {\n      setDynamicHeight(\n        value\n          ? Math.max(MIN_HEIGHT, value.split('\\n').length * 18 + 2 + paddingFromProps)\n          : MIN_HEIGHT,\n      )\n      prevCalculatedHeightAt.current = recalculatedHeightAt\n    }\n  }, [value, MIN_HEIGHT, paddingFromProps, recalculatedHeightAt])\n\n  return (\n    <Editor\n      className={classes}\n      height={maxHeight ? Math.min(dynamicHeight, maxHeight) : dynamicHeight}\n      loading={<ShimmerEffect height={dynamicHeight} />}\n      options={{\n        ...defaultGlobalEditorOptions,\n        ...globalEditorOptions,\n        readOnly: Boolean(readOnly),\n        /**\n         * onMount the model will set:\n         * - insertSpaces\n         * - tabSize\n         * - trimAutoWhitespace\n         */\n        detectIndentation: false,\n        insertSpaces: undefined,\n        tabSize: undefined,\n        trimAutoWhitespace: undefined,\n      }}\n      theme={theme === 'dark' ? 'vs-dark' : 'vs'}\n      value={value}\n      {...rest}\n      // Since we are not building an IDE and the container\n      // can already have scrolling, we want the height of the\n      // editor to fit its content.\n      // See: https://github.com/microsoft/monaco-editor/discussions/3677\n      onChange={(value, ev) => {\n        rest.onChange?.(value, ev)\n        setDynamicHeight(\n          value\n            ? Math.max(MIN_HEIGHT, value.split('\\n').length * 18 + 2 + paddingFromProps)\n            : MIN_HEIGHT,\n        )\n      }}\n      onMount={(editor, monaco) => {\n        rest.onMount?.(editor, monaco)\n\n        // Set per-model options to avoid global conflicts\n        const model = editor.getModel()\n        if (model) {\n          model.updateOptions({\n            insertSpaces: insertSpaces ?? defaultOptions.insertSpaces,\n            tabSize: tabSize ?? defaultOptions.tabSize,\n            trimAutoWhitespace: trimAutoWhitespace ?? defaultOptions.trimAutoWhitespace,\n          })\n        }\n\n        setDynamicHeight(\n          Math.max(MIN_HEIGHT, editor.getValue().split('\\n').length * 18 + 2 + paddingFromProps),\n        )\n      }}\n    />\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default CodeEditor\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CodeEditor.js","names":["c","_c","EditorImport","React","useState","useTheme","ShimmerEffect","defaultGlobalEditorOptions","defaultOptions","Editor","default","baseClass","definePayloadThemes","monaco","editor","defineTheme","base","colors","inherit","rules","foreground","token","CodeEditor","props","$","className","maxHeight","minHeight","t0","options","readOnly","recalculatedHeightAt","value","rest","undefined","prevCalculatedHeightAt","useRef","insertSpaces","tabSize","trimAutoWhitespace","globalEditorOptions","paddingFromProps","padding","top","bottom","dynamicHeight","setDynamicHeight","theme","t1","defaultLanguage","t2","t3","filter","Boolean","classes","join","t4","t5","current","Math","max","split","length","useEffect","_jsx","beforeMount","height","min","loading","detectIndentation","onChange","value_0","ev","onMount","model","getModel","updateOptions","getValue"],"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport type { Monaco } from '@monaco-editor/react'\n\nimport EditorImport from '@monaco-editor/react'\nimport React, { useState } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTheme } from '../../providers/Theme/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport { defaultGlobalEditorOptions, defaultOptions } from './constants.js'\nimport './index.css'\n\nconst Editor = 'default' in EditorImport ? EditorImport.default : EditorImport\n\nconst baseClass = 'code-editor'\n\nfunction definePayloadThemes(monaco: Monaco) {\n  monaco.editor.defineTheme('payload-light', {\n    base: 'vs',\n    colors: {\n      'editor.background': '#00000000',\n      'editor.lineHighlightBackground': '#00000000',\n      'editor.lineHighlightBorder': '#00000000',\n      'editorGutter.background': '#00000000',\n      'editorLineNumber.activeForeground': '#0000004d', // black at 30% opacity\n      'editorLineNumber.foreground': '#0000004d', // black at 30% opacity\n    },\n    inherit: true,\n    rules: [\n      { foreground: 'cb0b96', token: 'keyword' },\n      { foreground: '005cc5', token: 'identifier' },\n      { foreground: '093077', token: 'type.identifier' },\n      { foreground: '093077', token: 'delimiter' },\n      { foreground: '093077', token: 'delimiter.bracket' },\n      { foreground: 'c53e0d', token: 'string' },\n      { foreground: '093077', token: 'number' },\n      { foreground: '6a737d', token: 'comment' },\n    ],\n  })\n  monaco.editor.defineTheme('payload-dark', {\n    base: 'vs-dark',\n    colors: {\n      'editor.background': '#00000000',\n      'editor.lineHighlightBackground': '#00000000',\n      'editor.lineHighlightBorder': '#00000000',\n      'editorGutter.background': '#00000000',\n      'editorLineNumber.activeForeground': '#ffffffb3', // var(--color-text-secondary) - white at 70% opacity\n      'editorLineNumber.foreground': '#ffffffb3', // var(--color-text-secondary) - white at 70% opacity\n    },\n    inherit: true,\n    rules: [],\n  })\n}\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const {\n    className,\n    maxHeight,\n    minHeight = 48,\n    options,\n    readOnly,\n    recalculatedHeightAt,\n    value,\n    ...rest\n  } = props\n  const LINE_HEIGHT = 16 // Monaco editor line height at fontSize 11\n  const EDITOR_BORDER = 2 // 1px top + 1px bottom border\n  const CSS_CONTAINER_PADDING = 16 // 8px top + 8px bottom from CSS\n  const prevCalculatedHeightAt = React.useRef<number | undefined>(recalculatedHeightAt)\n\n  // Extract per-model settings to avoid global conflicts\n  const { insertSpaces, tabSize, trimAutoWhitespace, ...globalEditorOptions } = options || {}\n  const paddingFromProps = options?.padding\n    ? (options.padding.top || 0) + (options.padding?.bottom || 0)\n    : 0\n\n  const [dynamicHeight, setDynamicHeight] = useState(minHeight)\n  const { theme } = useTheme()\n\n  const classes = [\n    baseClass,\n    className,\n    rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',\n    readOnly && 'read-only',\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  React.useEffect(() => {\n    if (recalculatedHeightAt && recalculatedHeightAt > prevCalculatedHeightAt.current) {\n      setDynamicHeight(\n        value\n          ? Math.max(\n              minHeight,\n              value.split('\\n').length * LINE_HEIGHT +\n                EDITOR_BORDER +\n                paddingFromProps +\n                CSS_CONTAINER_PADDING,\n            )\n          : minHeight,\n      )\n      prevCalculatedHeightAt.current = recalculatedHeightAt\n    }\n  }, [value, minHeight, paddingFromProps, recalculatedHeightAt])\n\n  return (\n    <Editor\n      beforeMount={definePayloadThemes}\n      className={classes}\n      height={maxHeight ? Math.min(dynamicHeight, maxHeight) : dynamicHeight}\n      loading={<ShimmerEffect height={minHeight} />}\n      options={{\n        ...defaultGlobalEditorOptions,\n        ...globalEditorOptions,\n        readOnly: Boolean(readOnly),\n        /**\n         * onMount the model will set:\n         * - insertSpaces\n         * - tabSize\n         * - trimAutoWhitespace\n         */\n        detectIndentation: false,\n        insertSpaces: undefined,\n        tabSize: undefined,\n        trimAutoWhitespace: undefined,\n      }}\n      theme={theme === 'dark' ? 'payload-dark' : 'payload-light'}\n      value={value}\n      {...rest}\n      // Since we are not building an IDE and the container\n      // can already have scrolling, we want the height of the\n      // editor to fit its content.\n      // See: https://github.com/microsoft/monaco-editor/discussions/3677\n      onChange={(value, ev) => {\n        rest.onChange?.(value, ev)\n        setDynamicHeight(\n          value\n            ? Math.max(\n                minHeight,\n                value.split('\\n').length * LINE_HEIGHT +\n                  EDITOR_BORDER +\n                  paddingFromProps +\n                  CSS_CONTAINER_PADDING,\n              )\n            : minHeight,\n        )\n      }}\n      onMount={(editor, monaco) => {\n        rest.onMount?.(editor, monaco)\n\n        // Set per-model options to avoid global conflicts\n        const model = editor.getModel()\n        if (model) {\n          model.updateOptions({\n            insertSpaces: insertSpaces ?? defaultOptions.insertSpaces,\n            tabSize: tabSize ?? defaultOptions.tabSize,\n            trimAutoWhitespace: trimAutoWhitespace ?? defaultOptions.trimAutoWhitespace,\n          })\n        }\n\n        setDynamicHeight(\n          Math.max(\n            minHeight,\n            editor.getValue().split('\\n').length * LINE_HEIGHT +\n              EDITOR_BORDER +\n              paddingFromProps +\n              CSS_CONTAINER_PADDING,\n          ),\n        )\n      }}\n    />\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default CodeEditor\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,YAAA,MAAkB;AACzB,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAIhC,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAC9B,SAASC,0BAA0B,EAAEC,cAAc,QAAQ;AAC3D,OAAO;AAEP,MAAMC,MAAA,GAAS,aAAaP,YAAA,GAAeA,YAAA,CAAaQ,OAAO,GAAGR,YAAA;AAElE,MAAMS,SAAA,GAAY;AAElB,SAASC,oBAAoBC,MAAc;EACzCA,MAAA,CAAOC,MAAM,CAACC,WAAW,CAAC,iBAAiB;IACzCC,IAAA,EAAM;IACNC,MAAA,EAAQ;MACN,qBAAqB;MACrB,kCAAkC;MAClC,8BAA8B;MAC9B,2BAA2B;MAC3B,qCAAqC;MACrC,+BAA+B;IACjC;IACAC,OAAA,EAAS;IACTC,KAAA,EAAO,CACL;MAAEC,UAAA,EAAY;MAAUC,KAAA,EAAO;IAAU,GACzC;MAAED,UAAA,EAAY;MAAUC,KAAA,EAAO;IAAa,GAC5C;MAAED,UAAA,EAAY;MAAUC,KAAA,EAAO;IAAkB,GACjD;MAAED,UAAA,EAAY;MAAUC,KAAA,EAAO;IAAY,GAC3C;MAAED,UAAA,EAAY;MAAUC,KAAA,EAAO;IAAoB,GACnD;MAAED,UAAA,EAAY;MAAUC,KAAA,EAAO;IAAS,GACxC;MAAED,UAAA,EAAY;MAAUC,KAAA,EAAO;IAAS,GACxC;MAAED,UAAA,EAAY;MAAUC,KAAA,EAAO;IAAU;EAE7C;EACAR,MAAA,CAAOC,MAAM,CAACC,WAAW,CAAC,gBAAgB;IACxCC,IAAA,EAAM;IACNC,MAAA,EAAQ;MACN,qBAAqB;MACrB,kCAAkC;MAClC,8BAA8B;MAC9B,2BAA2B;MAC3B,qCAAqC;MACrC,+BAA+B;IACjC;IACAC,OAAA,EAAS;IACTC,KAAA,EAAO;EACT;AACF;AAEA,MAAMG,UAAA,GAA8BC,KAAA;EAAA,MAAAC,CAAA,GAAAvB,EAAA;EAClC;IAAAwB,SAAA;IAAAC,SAAA;IAAAC,SAAA,EAAAC,EAAA;IAAAC,OAAA;IAAAC,QAAA;IAAAC,oBAAA;IAAAC,KAAA;IAAA,GAAAC;EAAA,IASIV,KAAA;EANF,MAAAI,SAAA,GAAAC,EAAc,KAAAM,SAAA,QAAdN,EAAc;EAUhB,MAAAO,sBAAA,GAA+BhC,KAAA,CAAAiC,MAAA,CAAiCL,oBAAA;EAGhE;IAAAM,YAAA;IAAAC,OAAA;IAAAC,kBAAA;IAAA,GAAAC;EAAA,IAA8EX,OAAA,MAAY;EAC1F,MAAAY,gBAAA,GAAyBZ,OAAA,EAAAa,OAAA,GACrB,CAACb,OAAA,CAAAa,OAAA,CAAAC,GAAA,KAAuB,KAAMd,OAAA,CAAAa,OAAA,EAAAE,MAAA,KAA2B,KACzD;EAEJ,OAAAC,aAAA,EAAAC,gBAAA,IAA0C1C,QAAA,CAASuB,SAAA;EACnD;IAAAoB;EAAA,IAAkB1C,QAAA;EAKhB,MAAA2C,EAAA,GAAAf,IAAA,EAAAgB,eAAA,GAAwB,aAAahB,IAAA,CAAAgB,eAAA,EAAsB,GAAG;EAC9D,MAAAC,EAAA,GAAApB,QAAA,IAAY;EAAA,IAAAqB,EAAA;EAAA,IAAA3B,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAwB,EAAA,IAAAxB,CAAA,QAAA0B,EAAA;IAJEC,EAAA,IAAAxC,SAAA,EAEdc,SAAA,EACAuB,EAA8D,EAC9DE,EAAY,EAAAE,MAAA,CAAAC,OAEJ;IAAA7B,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAwB,EAAA;IAAAxB,CAAA,MAAA0B,EAAA;IAAA1B,CAAA,MAAA2B,EAAA;EAAA;IAAAA,EAAA,GAAA3B,CAAA;EAAA;EANV,MAAA8B,OAAA,GAAgBH,EAMN,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAjC,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAiB,gBAAA,IAAAjB,CAAA,QAAAO,oBAAA,IAAAP,CAAA,QAAAQ,KAAA;IAEQwB,EAAA,GAAAA,CAAA;MAAA,IACVzB,oBAAA,IAAwBA,oBAAA,GAAuBI,sBAAA,CAAAuB,OAA8B;QAC/EZ,gBAAA,CACEd,KAAA,GACI2B,IAAA,CAAAC,GAAA,CACEjC,SAAA,EACAK,KAAA,CAAA6B,KAAA,CAAY,MAAAC,MAAA,KAAe,IACzB,GACArB,gBAAA,KACA,IAEJd,SAAA;QAENQ,sBAAA,CAAAuB,OAAA,GAAiC3B,oBAAA;MAAA;IAAA;IAElC0B,EAAA,IAACzB,KAAA,EAAOL,SAAA,EAAWc,gBAAA,EAAkBV,oBAAA;IAAqBP,CAAA,MAAAG,SAAA;IAAAH,CAAA,MAAAiB,gBAAA;IAAAjB,CAAA,MAAAO,oBAAA;IAAAP,CAAA,MAAAQ,KAAA;IAAAR,CAAA,MAAAgC,EAAA;IAAAhC,CAAA,MAAAiC,EAAA;EAAA;IAAAD,EAAA,GAAAhC,CAAA;IAAAiC,EAAA,GAAAjC,CAAA;EAAA;EAf7DrB,KAAA,CAAA4D,SAAA,CAAgBP,EAehB,EAAGC,EAA0D;EAAA,OAG3DO,IAAA,CAAAvD,MAAA;IAAAwD,WAAA,EAAArD,mBAAA;IAAAa,SAAA,EAEa6B,OAAA;IAAAY,MAAA,EACHxC,SAAA,GAAYiC,IAAA,CAAAQ,GAAA,CAAStB,aAAA,EAAenB,SAAA,IAAamB,aAAA;IAAAuB,OAAA,EAChDJ,IAAA,CAAA1D,aAAA;MAAA4D,MAAA,EAAuBvC;IAAA,C;;;SAG3Ba,mBAAmB;MAAAV,QAAA,EACZuB,OAAA,CAAQvB,QAAA;MAAAuC,iBAAA;MAAAhC,YAAA,EAAAH,SAAA;MAAAI,OAAA,EAAAJ,SAAA;MAAAK,kBAAA,EAAAL;IAAA;IAAAa,KAAA,EAYbA,KAAA,KAAU,SAAS,iBAAiB;IAAAf,KAAA;IAAA,GAEvCC,IAAI;IAAAqC,QAAA,EAAAA,CAAAC,OAAA,EAAAC,EAAA;MAMNvC,IAAA,CAAAqC,QAAA,GAAgBtC,OAAA,EAAOwC,EAAA;MACvB1B,gBAAA,CACEd,OAAA,GACI2B,IAAA,CAAAC,GAAA,CACEjC,SAAA,EACAK,OAAA,CAAA6B,KAAA,CAAY,MAAAC,MAAA,KAAe,IACzB,GACArB,gBAAA,KACA,IAEJd,SAAA;IAAA;IAAA8C,OAAA,EAAAA,CAAA3D,MAAA,EAAAD,MAAA;MAINoB,IAAA,CAAAwC,OAAA,GAAe3D,MAAA,EAAQD,MAAA;MAGvB,MAAA6D,KAAA,GAAc5D,MAAA,CAAA6D,QAAA,CAAe;MAAA,IACzBD,KAAA;QACFA,KAAA,CAAAE,aAAA;UAAAvC,YAAA,EACgBA,YAAA,IAAA7B,cAAA,CAAA6B,YAA2C;UAAAC,OAAA,EAChDA,OAAA,IAAA9B,cAAA,CAAA8B,OAAiC;UAAAC,kBAAA,EACtBA,kBAAA,IAAA/B,cAAA,CAAA+B;QAAuD,CAC7E;MAAA;MAGFO,gBAAA,CACEa,IAAA,CAAAC,GAAA,CACEjC,SAAA,EACAb,MAAA,CAAA+D,QAAA,CAAe,EAAAhB,KAAA,CAAS,MAAAC,MAAA,KAAe,IACrC,GACArB,gBAAA,KACA;IAAA;EAAA,C;CAMd;AAEA;AACA,eAAenB,UAAA","ignoreList":[]}

package/dist/elements/CodeEditor/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvD,eAAO,MAAM,cAAc,EAAE,IAAI,CAC/B,WAAW,CAAC,SAAS,CAAC,EACtB,cAAc,GAAG,SAAS,GAAG,oBAAoB,CAKlD,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,IAAI,CAC3C,WAAW,CAAC,SAAS,CAAC,EACtB,mBAAmB,GAAG,cAAc,GAAG,SAAS,GAAG,oBAAoB,CAaxE,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvD,eAAO,MAAM,cAAc,EAAE,IAAI,CAC/B,WAAW,CAAC,SAAS,CAAC,EACtB,cAAc,GAAG,SAAS,GAAG,oBAAoB,CAKlD,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,IAAI,CAC3C,WAAW,CAAC,SAAS,CAAC,EACtB,mBAAmB,GAAG,cAAc,GAAG,SAAS,GAAG,oBAAoB,CAiBxE,CAAA"}

package/dist/elements/CodeEditor/constants.js

@@ -4,7 +4,11 @@ export const defaultOptions = {
   trimAutoWhitespace: false
 };
 export const defaultGlobalEditorOptions = {
+  fontSize: 11,
   hideCursorInOverviewRuler: true,
+  lineDecorationsWidth: 12,
+  lineHeight: 16,
+  lineNumbersMinChars: 3,
   minimap: {
     enabled: false
   },