@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.40de3ec

package/dist/fields/Checkbox/Input.js

@@ -4,12 +4,13 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useId, useState } from 'react';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { Tooltip } from '../../elements/Tooltip/index.js';
 import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { CheckIcon } from '../../icons/Check/index.js';
 import { LineIcon } from '../../icons/Line/index.js';
 export const inputBaseClass = 'checkbox-input';
 export const CheckboxInput = t0 => {
-  const $ = _c(25);
+  const $ = _c(35);
   const {
     id: idFromProps,
     name,
@@ -25,46 +26,70 @@ export const CheckboxInput = t0 => {
     onToggle,
     partialChecked,
     readOnly: readOnlyFromProps,
-    required
+    required,
+    tooltip,
+    variant: t1
   } = t0;
+  const variant = t1 === undefined ? "default" : t1;
   const [isHydrated, setIsHydrated] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
   const fallbackID = useId();
   const id = idFromProps || fallbackID;
-  let t1;
   let t2;
+  let t3;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
+    t2 = () => {
       setIsHydrated(true);
     };
-    t2 = [];
-    $[0] = t1;
-    $[1] = t2;
+    t3 = [];
+    $[0] = t2;
+    $[1] = t3;
   } else {
-    t1 = $[0];
-    t2 = $[1];
+    t2 = $[0];
+    t3 = $[1];
   }
-  useEffect(t1, t2);
+  useEffect(t2, t3);
   const readOnly = readOnlyFromProps || !isHydrated;
-  const t3 = checked && `${inputBaseClass}--checked`;
-  const t4 = readOnly && `${inputBaseClass}--read-only`;
-  let t5;
-  if ($[2] !== className || $[3] !== t3 || $[4] !== t4) {
-    t5 = [className, inputBaseClass, t3, t4].filter(Boolean);
+  const t4 = checked && `${inputBaseClass}--checked`;
+  const t5 = readOnly && `${inputBaseClass}--read-only`;
+  const t6 = tooltip && `${inputBaseClass}--has-tooltip`;
+  const t7 = variant !== "default" && `${inputBaseClass}--${variant}`;
+  let t8;
+  if ($[2] !== className || $[3] !== t4 || $[4] !== t5 || $[5] !== t6 || $[6] !== t7) {
+    t8 = [className, inputBaseClass, t4, t5, t6, t7].filter(Boolean);
     $[2] = className;
-    $[3] = t3;
-    $[4] = t4;
-    $[5] = t5;
+    $[3] = t4;
+    $[4] = t5;
+    $[5] = t6;
+    $[6] = t7;
+    $[7] = t8;
   } else {
-    t5 = $[5];
+    t8 = $[7];
   }
-  const t6 = t5.join(" ");
-  const t7 = Boolean(checked);
-  let t8;
-  if ($[6] !== AfterInput || $[7] !== BeforeInput || $[8] !== Error || $[9] !== Label || $[10] !== checked || $[11] !== id || $[12] !== inputRef || $[13] !== label || $[14] !== localized || $[15] !== name || $[16] !== onToggle || $[17] !== partialChecked || $[18] !== readOnly || $[19] !== required || $[20] !== t6 || $[21] !== t7) {
-    const t9 = _jsx("input", {
+  const t9 = t8.join(" ");
+  let t10;
+  if ($[8] !== tooltip) {
+    t10 = tooltip ? () => setShowTooltip(true) : undefined;
+    $[8] = tooltip;
+    $[9] = t10;
+  } else {
+    t10 = $[9];
+  }
+  let t11;
+  if ($[10] !== tooltip) {
+    t11 = tooltip ? () => setShowTooltip(false) : undefined;
+    $[10] = tooltip;
+    $[11] = t11;
+  } else {
+    t11 = $[11];
+  }
+  const t12 = Boolean(checked);
+  let t13;
+  if ($[12] !== AfterInput || $[13] !== BeforeInput || $[14] !== Error || $[15] !== Label || $[16] !== checked || $[17] !== id || $[18] !== inputRef || $[19] !== label || $[20] !== localized || $[21] !== name || $[22] !== onToggle || $[23] !== partialChecked || $[24] !== readOnly || $[25] !== required || $[26] !== showTooltip || $[27] !== t10 || $[28] !== t11 || $[29] !== t12 || $[30] !== t9 || $[31] !== tooltip) {
+    const t14 = _jsx("input", {
       "aria-label": "",
       "aria-labelledby": name,
-      checked: t7,
+      checked: t12,
       disabled: readOnly,
       id,
       name,
@@ -74,23 +99,25 @@ export const CheckboxInput = t0 => {
       title: name,
       type: "checkbox"
     });
-    const t10 = !checked && partialChecked ? "partial" : "check";
-    let t11;
-    if ($[23] !== t10) {
-      t11 = [`${inputBaseClass}__icon`, t10].filter(Boolean);
-      $[23] = t10;
-      $[24] = t11;
+    const t15 = !checked && partialChecked ? "partial" : "check";
+    let t16;
+    if ($[33] !== t15) {
+      t16 = [`${inputBaseClass}__icon`, t15].filter(Boolean);
+      $[33] = t15;
+      $[34] = t16;
     } else {
-      t11 = $[24];
+      t16 = $[34];
     }
-    t8 = _jsxs("div", {
-      className: t6,
+    t13 = _jsxs("div", {
+      className: t9,
+      onPointerEnter: t10,
+      onPointerLeave: t11,
       children: [BeforeInput, _jsxs("div", {
         className: `${inputBaseClass}__wrap`,
         children: [_jsxs("div", {
           className: `${inputBaseClass}__input`,
-          children: [t9, _jsxs("span", {
-            className: t11.join(" "),
+          children: [t14, _jsxs("span", {
+            className: t16.join(" "),
             children: [checked && _jsx(CheckIcon, {}), !checked && partialChecked && _jsx(LineIcon, {})]
           })]
         }), _jsx(RenderCustomComponent, {
@@ -102,28 +129,37 @@ export const CheckboxInput = t0 => {
             required
           })
         }), Error]
+      }), tooltip && _jsx(Tooltip, {
+        alignCaret: "left",
+        className: `${inputBaseClass}__tooltip`,
+        show: showTooltip,
+        children: tooltip
       }), AfterInput]
     });
-    $[6] = AfterInput;
-    $[7] = BeforeInput;
-    $[8] = Error;
-    $[9] = Label;
-    $[10] = checked;
-    $[11] = id;
-    $[12] = inputRef;
-    $[13] = label;
-    $[14] = localized;
-    $[15] = name;
-    $[16] = onToggle;
-    $[17] = partialChecked;
-    $[18] = readOnly;
-    $[19] = required;
-    $[20] = t6;
-    $[21] = t7;
-    $[22] = t8;
+    $[12] = AfterInput;
+    $[13] = BeforeInput;
+    $[14] = Error;
+    $[15] = Label;
+    $[16] = checked;
+    $[17] = id;
+    $[18] = inputRef;
+    $[19] = label;
+    $[20] = localized;
+    $[21] = name;
+    $[22] = onToggle;
+    $[23] = partialChecked;
+    $[24] = readOnly;
+    $[25] = required;
+    $[26] = showTooltip;
+    $[27] = t10;
+    $[28] = t11;
+    $[29] = t12;
+    $[30] = t9;
+    $[31] = tooltip;
+    $[32] = t13;
   } else {
-    t8 = $[22];
+    t13 = $[32];
   }
-  return t8;
+  return t13;
 };
 //# sourceMappingURL=Input.js.map

package/dist/fields/Checkbox/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["c","_c","React","useEffect","useId","useState","RenderCustomComponent","FieldLabel","CheckIcon","LineIcon","inputBaseClass","CheckboxInput","t0","$","id","idFromProps","name","AfterInput","BeforeInput","checked","className","Error","inputRef","Label","label","localized","onToggle","partialChecked","readOnly","readOnlyFromProps","required","isHydrated","setIsHydrated","fallbackID","t1","t2","Symbol","for","t3","t4","t5","filter","Boolean","t6","join","t7","t8","t9","_jsx","disabled","onChange","ref","title","type","t10","t11","_jsxs","children","CustomComponent","Fallback","htmlFor"],"sources":["../../../src/fields/Checkbox/Input.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from 'payload'\n\nimport React, { useEffect, useId, useState } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { LineIcon } from '../../icons/Line/index.js'\n\nexport type CheckboxInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly BeforeInput?: React.ReactNode\n  readonly checked?: boolean\n  readonly className?: string\n  readonly Error?: React.ReactNode\n  readonly id?: string\n  readonly inputRef?: React.RefObject<HTMLInputElement | null>\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly name?: string\n  readonly onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void\n  readonly partialChecked?: boolean\n  readonly readOnly?: boolean\n  readonly required?: boolean\n}\n\nexport const inputBaseClass = 'checkbox-input'\n\nexport const CheckboxInput: React.FC<CheckboxInputProps> = ({\n  id: idFromProps,\n  name,\n  AfterInput,\n  BeforeInput,\n  checked,\n  className,\n  Error,\n  inputRef,\n  Label,\n  label,\n  localized,\n  onToggle,\n  partialChecked,\n  readOnly: readOnlyFromProps,\n  required,\n}) => {\n  const [isHydrated, setIsHydrated] = useState(false)\n  const fallbackID = useId()\n  const id = idFromProps || fallbackID\n\n  useEffect(() => {\n    setIsHydrated(true)\n  }, [])\n\n  const readOnly = readOnlyFromProps || !isHydrated\n\n  return (\n    <div\n      className={[\n        className,\n        inputBaseClass,\n        checked && `${inputBaseClass}--checked`,\n        readOnly && `${inputBaseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {BeforeInput}\n      <div className={`${inputBaseClass}__wrap`}>\n        <div className={`${inputBaseClass}__input`}>\n          <input\n            aria-label=\"\"\n            aria-labelledby={name}\n            checked={Boolean(checked)}\n            disabled={readOnly}\n            id={id}\n            name={name}\n            onChange={onToggle}\n            ref={inputRef}\n            required={required}\n            title={name}\n            type=\"checkbox\"\n          />\n          <span\n            className={[`${inputBaseClass}__icon`, !checked && partialChecked ? 'partial' : 'check']\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {checked && <CheckIcon />}\n            {!checked && partialChecked && <LineIcon />}\n          </span>\n        </div>\n        <RenderCustomComponent\n          CustomComponent={Label}\n          Fallback={\n            <FieldLabel htmlFor={id} label={label} localized={localized} required={required} />\n          }\n        />\n        {Error}\n      </div>\n      {AfterInput}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["c","_c","React","useEffect","useId","useState","RenderCustomComponent","Tooltip","FieldLabel","CheckIcon","LineIcon","inputBaseClass","CheckboxInput","t0","$","id","idFromProps","name","AfterInput","BeforeInput","checked","className","Error","inputRef","Label","label","localized","onToggle","partialChecked","readOnly","readOnlyFromProps","required","tooltip","variant","t1","undefined","isHydrated","setIsHydrated","showTooltip","setShowTooltip","fallbackID","t2","t3","Symbol","for","t4","t5","t6","t7","t8","filter","Boolean","t9","join","t10","t11","t12","t13","t14","_jsx","disabled","onChange","ref","title","type","t15","t16","_jsxs","onPointerEnter","onPointerLeave","children","CustomComponent","Fallback","htmlFor","alignCaret","show"],"sources":["../../../src/fields/Checkbox/Input.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from 'payload'\n\nimport React, { useEffect, useId, useState } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { LineIcon } from '../../icons/Line/index.js'\n\nexport type CheckboxInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly BeforeInput?: React.ReactNode\n  readonly checked?: boolean\n  readonly className?: string\n  readonly Error?: React.ReactNode\n  readonly id?: string\n  readonly inputRef?: React.RefObject<HTMLInputElement | null>\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly name?: string\n  readonly onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void\n  readonly partialChecked?: boolean\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly tooltip?: string\n  /**\n   * Visual variant for the checkbox\n   * - 'default': Dark border, transparent background (for form fields)\n   * - 'muted': Light gray background and border (for tables)\n   */\n  readonly variant?: 'default' | 'muted'\n}\n\nexport const inputBaseClass = 'checkbox-input'\n\nexport const CheckboxInput: React.FC<CheckboxInputProps> = ({\n  id: idFromProps,\n  name,\n  AfterInput,\n  BeforeInput,\n  checked,\n  className,\n  Error,\n  inputRef,\n  Label,\n  label,\n  localized,\n  onToggle,\n  partialChecked,\n  readOnly: readOnlyFromProps,\n  required,\n  tooltip,\n  variant = 'default',\n}) => {\n  const [isHydrated, setIsHydrated] = useState(false)\n  const [showTooltip, setShowTooltip] = useState(false)\n  const fallbackID = useId()\n  const id = idFromProps || fallbackID\n\n  useEffect(() => {\n    setIsHydrated(true)\n  }, [])\n\n  const readOnly = readOnlyFromProps || !isHydrated\n\n  return (\n    <div\n      className={[\n        className,\n        inputBaseClass,\n        checked && `${inputBaseClass}--checked`,\n        readOnly && `${inputBaseClass}--read-only`,\n        tooltip && `${inputBaseClass}--has-tooltip`,\n        variant !== 'default' && `${inputBaseClass}--${variant}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onPointerEnter={tooltip ? () => setShowTooltip(true) : undefined}\n      onPointerLeave={tooltip ? () => setShowTooltip(false) : undefined}\n    >\n      {BeforeInput}\n      <div className={`${inputBaseClass}__wrap`}>\n        <div className={`${inputBaseClass}__input`}>\n          <input\n            aria-label=\"\"\n            aria-labelledby={name}\n            checked={Boolean(checked)}\n            disabled={readOnly}\n            id={id}\n            name={name}\n            onChange={onToggle}\n            ref={inputRef}\n            required={required}\n            title={name}\n            type=\"checkbox\"\n          />\n          <span\n            className={[`${inputBaseClass}__icon`, !checked && partialChecked ? 'partial' : 'check']\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {checked && <CheckIcon />}\n            {!checked && partialChecked && <LineIcon />}\n          </span>\n        </div>\n        <RenderCustomComponent\n          CustomComponent={Label}\n          Fallback={\n            <FieldLabel htmlFor={id} label={label} localized={localized} required={required} />\n          }\n        />\n        {Error}\n      </div>\n      {tooltip && (\n        <Tooltip alignCaret=\"left\" className={`${inputBaseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      {AfterInput}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Checkbox/index.css

@@ -15,15 +15,6 @@
   .checkbox-input {
     display: flex;
 
-    .tooltip:not([aria-hidden='true']) {
-      left: calc(-1 * var(--spacer-2));
-      right: calc(-1 * var(--spacer-2));
-      position: absolute;
-      transform: translateY(calc(var(--caret-size) * -1));
-      margin-bottom: 0.2em;
-      max-width: fit-content;
-    }
-
     &:hover:not(.checkbox-input--read-only) {
       label,
       input {
@@ -40,13 +31,13 @@
       &:focus-within,
       &:focus {
         .checkbox-input__input {
-          border-color: var(--color-border-selected-strong);
+          border-color: var(--field-color-border-focus);
         }
       }
 
       &:hover {
         .checkbox-input__input {
-          border-color: var(--color-border-selected-strong);
+          border-color: var(--field-color-toggle-border-hover);
         }
       }
     }
@@ -55,7 +46,7 @@
       &:hover {
         cursor: pointer;
 
-        svg {
+        .checkbox-input__icon svg {
           opacity: 0.2;
         }
       }
@@ -77,20 +68,16 @@
     padding: 0;
     line-height: 0;
     position: relative;
-    width: 1rem;
-    height: 1rem;
-    border: 1px solid var(--color-border-strong);
-    border-radius: var(--radius-medium);
+    width: var(--spacer-3);
+    height: var(--spacer-3);
+    border: var(--stroke-width-small) solid var(--field-color-toggle-border);
+    border-radius: var(--button-radius);
     background: transparent;
 
     & input[type='checkbox'] {
       position: absolute;
-      width: calc(100% + 0.25rem);
-      height: calc(100% + 0.25rem);
       padding: 0;
       margin: 0;
-      margin-left: -0.125rem;
-      margin-top: -0.125rem;
       opacity: 0;
       border-radius: 0;
       z-index: 1;
@@ -124,8 +111,8 @@
   /* Partial/indeterminate state - same blue background as checked */
   .checkbox-input:has(.checkbox-input__icon.partial) {
     .checkbox-input__input {
-      background-color: var(--color-bg-brand);
-      border-color: var(--color-border-selected);
+      background-color: var(--field-color-toggle-bg-checked);
+      border-color: var(--field-color-toggle-border-checked);
     }
 
     &:has(:focus-visible) .checkbox-input__input {
@@ -136,8 +123,8 @@
 
   .checkbox-input--checked {
     .checkbox-input__input {
-      background-color: var(--color-bg-brand);
-      border-color: var(--color-border-selected);
+      background-color: var(--field-color-toggle-bg-checked);
+      border-color: var(--field-color-toggle-border-checked);
     }
 
     &:has(:focus-visible) .checkbox-input__input {
@@ -148,41 +135,126 @@
     .checkbox-input__icon {
       svg {
         opacity: 1;
-        color: var(--color-icon-onbrand);
+        color: var(--field-color-toggle-icon);
       }
     }
   }
 
   .checkbox-input--read-only {
     .checkbox-input__input {
-      background: var(--color-bg-disabled);
-      border-color: var(--color-border-disabled);
+      background: var(--field-color-toggle-bg-disabled);
+      border-color: var(--field-color-toggle-border-disabled);
     }
 
     label {
-      color: var(--color-text-disabled);
+      color: var(--field-color-text-disabled);
     }
   }
 
-  .checkbox.error {
-    .checkbox-input--checked {
+  .checkbox-input--has-tooltip {
+    position: relative;
+    width: max-content;
+    max-width: 100%;
+  }
+
+  /* Allow Wrap */
+  .checkbox-input__tooltip {
+    --tooltip-x: 0;
+    left: 0;
+    width: max-content;
+    max-width: 280px;
+    white-space: normal;
+    text-align: start;
+  }
+
+  /* Center the caret on the checkbox box itself (0.5rem from the row's
+     left edge = center of the 1rem-wide checkbox input). */
+  .checkbox-input__tooltip.tooltip--caret-left .tooltip__caret {
+    left: 0.5rem;
+    transform: translateX(-50%);
+  }
+
+  .checkbox-input__tooltip.tooltip--caret-left.tooltip--position-bottom .tooltip__caret {
+    transform: translateX(-50%) rotate(180deg);
+  }
+
+  .checkbox-input--has-tooltip {
+    position: relative;
+    width: max-content;
+    max-width: 100%;
+  }
+
+  /* Allow Wrap */
+  .checkbox-input__tooltip {
+    --tooltip-x: 0;
+    left: 0;
+    width: max-content;
+    max-width: 280px;
+    white-space: normal;
+    text-align: start;
+  }
+
+  /* Center the caret on the checkbox box itself (0.5rem from the row's
+     left edge = center of the 1rem-wide checkbox input). */
+  .checkbox-input__tooltip.tooltip--caret-left .tooltip__caret {
+    left: 0.5rem;
+    transform: translateX(-50%);
+  }
+
+  .checkbox-input__tooltip.tooltip--caret-left.tooltip--position-bottom .tooltip__caret {
+    transform: translateX(-50%) rotate(180deg);
+    /* Muted variant - used in tables with lighter appearance */
+    .checkbox-input--muted {
       .checkbox-input__input {
-        background-color: var(--color-bg-danger);
-        border-color: var(--color-border-danger-strong);
+        background: var(--color-bg-secondary);
+        border-color: var(--color-border);
       }
 
-      &:hover .checkbox-input__input {
-        border-color: var(--color-border-danger-strong);
+      &:not(.checkbox-input--read-only):not(.checkbox-input--checked) {
+        &:hover {
+          .checkbox-input__input {
+            border-color: var(--field-color-toggle-border-hover);
+          }
+        }
+      }
+
+      /* Ensure checked state overrides muted base styles */
+      &.checkbox-input--checked {
+        .checkbox-input__input {
+          background-color: var(--field-color-toggle-bg-checked);
+          border-color: var(--field-color-toggle-border-checked);
+        }
+      }
+
+      /* Ensure partial state overrides muted base styles */
+      &:has(.checkbox-input__icon.partial) {
+        .checkbox-input__input {
+          background-color: var(--field-color-toggle-bg-checked);
+          border-color: var(--field-color-toggle-border-checked);
+        }
       }
     }
 
-    .checkbox-input:not(.checkbox-input--checked) {
-      .checkbox-input__input {
-        border-color: var(--color-border-danger-strong);
+    .checkbox.error {
+      .checkbox-input--checked {
+        .checkbox-input__input {
+          background-color: var(--field-color-error-bg);
+          border-color: var(--field-color-border-error);
+        }
+
+        &:hover .checkbox-input__input {
+          border-color: var(--field-color-border-error);
+        }
       }
 
-      &:hover .checkbox-input__input {
-        border-color: var(--color-border-danger-strong);
+      .checkbox-input:not(.checkbox-input--checked) {
+        .checkbox-input__input {
+          border-color: var(--field-color-border-error);
+        }
+
+        &:hover .checkbox-input__input {
+          border-color: var(--field-color-border-error);
+        }
       }
     }
   }

package/dist/fields/Checkbox/index.d.ts

@@ -14,5 +14,5 @@ export declare const CheckboxField: React.FC<{
     readonly validate?: CheckboxFieldValidation;
 } & {
     readonly field: Omit<import("payload").CheckboxFieldClient, "type"> & Partial<Pick<import("payload").CheckboxFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Code/index.css

@@ -6,33 +6,33 @@
     gap: var(--spacer-2);
 
     .code-editor {
-      background: var(--color-bg-secondary);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-medium);
+      background: var(--field-color-bg);
+      border: var(--stroke-width-small) solid var(--field-color-border);
+      border-radius: var(--field-border-radius);
       padding: var(--spacer-2) 0;
       overflow: clip;
       box-shadow: none;
 
       &:hover {
-        border-color: var(--color-border);
+        border-color: var(--field-color-border-hover);
       }
 
       &:focus-within {
-        border-color: var(--color-border-selected);
+        border-color: var(--field-color-border-focus);
       }
     }
 
     &.error .code-editor:not(:focus-within) {
-      border-color: var(--color-border-danger-strong);
+      border-color: var(--field-color-border-error);
 
       &:hover {
-        border-color: var(--color-border-danger-strong);
+        border-color: var(--field-color-border-error);
       }
     }
 
     &.read-only .code-editor {
-      background: var(--color-bg);
-      border-color: var(--color-border);
+      background: var(--field-color-bg-readonly);
+      border-color: var(--field-color-border-readonly);
     }
   }
 }

package/dist/fields/Code/index.d.ts

@@ -7,5 +7,5 @@ export declare const CodeField: React.FC<{
     readonly validate?: import("payload").CodeFieldValidation;
 } & {
     readonly field: Omit<import("payload").CodeFieldClient, "type"> & Partial<Pick<import("payload").CodeFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Collapsible/index.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import './index.css';
 export declare const CollapsibleField: React.FC<import("payload").FieldPaths & {
     readonly field: Omit<import("payload").CollapsibleFieldClient, "type"> & Partial<Pick<import("payload").CollapsibleFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Collapsible/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Collapsible/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAelF,OAAO,aAAa,CAAA;AA8IpB,eAAO,MAAM,gBAAgB;;+EAA2C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Collapsible/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAelF,OAAO,aAAa,CAAA;AA6IpB,eAAO,MAAM,gBAAgB;;+EAA2C,CAAA"}

package/dist/fields/Collapsible/index.js

@@ -137,7 +137,6 @@ const CollapsibleFieldComponent = props => {
         onToggle: onToggle,
         children: /*#__PURE__*/_jsx(RenderFields, {
           fields: fields,
-          margins: "small",
           parentIndexPath: indexPath,
           parentPath: parentPath,
           parentSchemaPath: parentSchemaPath,

package/dist/fields/Collapsible/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","React","Fragment","useCallback","useEffect","useMemo","useState","Collapsible","CollapsibleElement","ErrorPill","RenderCustomComponent","FieldDescription","RenderFields","RowLabel","useField","WatchChildErrors","withCondition","useDocumentInfo","usePreferences","useTranslation","mergeFieldStyles","fieldBaseClass","baseClass","CollapsibleFieldComponent","props","field","admin","className","description","initCollapsed","fields","label","indexPath","parentPath","parentSchemaPath","path","permissions","readOnly","i18n","getPreference","setPreference","preferencesKey","collapsedOnMount","setCollapsedOnMount","fieldPreferencesKey","replace","errorCount","setErrorCount","fieldHasErrors","customComponents","AfterInput","BeforeInput","Description","Label","disabled","onToggle","newCollapsedState","existingPreferences","collapsed","fetchInitialState","preferences","specificPreference","undefined","Boolean","styles","_jsxs","_jsx","split","slice","filter","join","id","style","collapsibleStyle","header","CustomComponent","count","withMessage","margins","parentIndexPath","Fallback","CollapsibleField"],"sources":["../../../src/fields/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport type { CollapsibleFieldClientComponent, DocumentPreferences } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { Collapsible as CollapsibleElement } from '../../elements/Collapsible/index.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { RowLabel } from '../../forms/RowLabel/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { WatchChildErrors } from '../../forms/WatchChildErrors/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport './index.css'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst baseClass = 'collapsible-field'\n\nconst CollapsibleFieldComponent: CollapsibleFieldClientComponent = (props) => {\n  const {\n    field,\n    field: { admin: { className, description, initCollapsed = false } = {}, fields, label } = {},\n    indexPath,\n    parentPath,\n    parentSchemaPath,\n    path,\n    permissions,\n    readOnly,\n  } = props\n\n  const { i18n } = useTranslation()\n  const { getPreference, setPreference } = usePreferences()\n  const { preferencesKey } = useDocumentInfo()\n  const [collapsedOnMount, setCollapsedOnMount] = useState<boolean>()\n  const fieldPreferencesKey = `collapsible-${path?.replace(/\\./g, '__')}`\n  const [errorCount, setErrorCount] = useState(0)\n  const fieldHasErrors = errorCount > 0\n\n  const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, disabled } =\n    useField({\n      path,\n    })\n\n  const onToggle = useCallback(\n    async (newCollapsedState: boolean): Promise<void> => {\n      const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n\n      if (preferencesKey) {\n        void setPreference(preferencesKey, {\n          ...existingPreferences,\n          ...(path\n            ? {\n                fields: {\n                  ...(existingPreferences?.fields || {}),\n                  [path]: {\n                    ...existingPreferences?.fields?.[path],\n                    collapsed: newCollapsedState,\n                  },\n                },\n              }\n            : {\n                fields: {\n                  ...(existingPreferences?.fields || {}),\n                  [fieldPreferencesKey]: {\n                    ...existingPreferences?.fields?.[fieldPreferencesKey],\n                    collapsed: newCollapsedState,\n                  },\n                },\n              }),\n        })\n      }\n    },\n    [preferencesKey, fieldPreferencesKey, getPreference, setPreference, path],\n  )\n\n  useEffect(() => {\n    const fetchInitialState = async () => {\n      if (preferencesKey) {\n        const preferences = await getPreference(preferencesKey)\n        const specificPreference = path\n          ? preferences?.fields?.[path]?.collapsed\n          : preferences?.fields?.[fieldPreferencesKey]?.collapsed\n\n        if (specificPreference !== undefined) {\n          setCollapsedOnMount(Boolean(specificPreference))\n        } else {\n          setCollapsedOnMount(typeof initCollapsed === 'boolean' ? initCollapsed : false)\n        }\n      } else {\n        setCollapsedOnMount(typeof initCollapsed === 'boolean' ? initCollapsed : false)\n      }\n    }\n\n    void fetchInitialState()\n  }, [getPreference, preferencesKey, fieldPreferencesKey, initCollapsed, path])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  if (typeof collapsedOnMount !== 'boolean') {\n    return null\n  }\n\n  return (\n    <Fragment>\n      <WatchChildErrors\n        fields={fields}\n        // removes the 'collapsible' path segment, i.e. `_index-0`\n        path={path.split('.').slice(0, -1)}\n        setErrorCount={setErrorCount}\n      />\n      <div\n        className={[\n          fieldBaseClass,\n          baseClass,\n          className,\n          fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        id={`field-${fieldPreferencesKey}`}\n        style={styles}\n      >\n        {BeforeInput}\n        <CollapsibleElement\n          className={`${baseClass}__collapsible`}\n          collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n          header={\n            <div className={`${baseClass}__row-label-wrap`}>\n              <RowLabel CustomComponent={Label} label={getTranslation(label, i18n)} path={path} />\n              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n            </div>\n          }\n          initCollapsed={collapsedOnMount}\n          onToggle={onToggle}\n        >\n          <RenderFields\n            fields={fields}\n            margins=\"small\"\n            parentIndexPath={indexPath}\n            parentPath={parentPath}\n            parentSchemaPath={parentSchemaPath}\n            permissions={permissions}\n            readOnly={readOnly || disabled}\n          />\n        </CollapsibleElement>\n        {AfterInput}\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </Fragment>\n  )\n}\n\nexport const CollapsibleField = withCondition(CollapsibleFieldComponent)\n"],"mappings":"AAAA;;;AAGA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,QAAQ,EAAEC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ;AAE3E,SAASC,WAAA,IAAeC,kBAAkB,QAAQ;AAClD,SAASC,SAAS,QAAQ;AAC1B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,YAAY,QAAQ;AAC7B,SAASC,QAAQ,QAAQ;AACzB,SAASC,QAAQ,QAAQ;AACzB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,aAAa,QAAQ;AAC9B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ;AACjC,OAAO;AACP,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,MAAMC,yBAAA,GAA8DC,KAAA;EAClE,MAAM;IACJC,KAAK;IACLA,KAAA,EAAO;MAAEC,KAAA,EAAO;QAAEC,SAAS;QAAEC,WAAW;QAAEC,aAAA,GAAgB;MAAK,CAAE,GAAG,CAAC,CAAC;MAAEC,MAAM;MAAEC;IAAK,CAAE,GAAG,CAAC,CAAC;IAC5FC,SAAS;IACTC,UAAU;IACVC,gBAAgB;IAChBC,IAAI;IACJC,WAAW;IACXC;EAAQ,CACT,GAAGb,KAAA;EAEJ,MAAM;IAAEc;EAAI,CAAE,GAAGnB,cAAA;EACjB,MAAM;IAAEoB,aAAa;IAAEC;EAAa,CAAE,GAAGtB,cAAA;EACzC,MAAM;IAAEuB;EAAc,CAAE,GAAGxB,eAAA;EAC3B,MAAM,CAACyB,gBAAA,EAAkBC,mBAAA,CAAoB,GAAGrC,QAAA;EAChD,MAAMsC,mBAAA,GAAsB,eAAeT,IAAA,EAAMU,OAAA,CAAQ,OAAO,OAAO;EACvE,MAAM,CAACC,UAAA,EAAYC,aAAA,CAAc,GAAGzC,QAAA,CAAS;EAC7C,MAAM0C,cAAA,GAAiBF,UAAA,GAAa;EAEpC,MAAM;IAAEG,gBAAA,EAAkB;MAAEC,UAAU;MAAEC,WAAW;MAAEC,WAAW;MAAEC;IAAK,CAAE,GAAG,CAAC,CAAC;IAAEC;EAAQ,CAAE,GACxFxC,QAAA,CAAS;IACPqB;EACF;EAEF,MAAMoB,QAAA,GAAWpD,WAAA,CACf,MAAOqD,iBAAA;IACL,MAAMC,mBAAA,GAA2C,MAAMlB,aAAA,CAAcE,cAAA;IAErE,IAAIA,cAAA,EAAgB;MAClB,KAAKD,aAAA,CAAcC,cAAA,EAAgB;QACjC,GAAGgB,mBAAmB;QACtB,IAAItB,IAAA,GACA;UACEL,MAAA,EAAQ;YACN,IAAI2B,mBAAA,EAAqB3B,MAAA,IAAU,CAAC,CAAC;YACrC,CAACK,IAAA,GAAO;cACN,GAAGsB,mBAAA,EAAqB3B,MAAA,GAASK,IAAA,CAAK;cACtCuB,SAAA,EAAWF;YACb;UACF;QACF,IACA;UACE1B,MAAA,EAAQ;YACN,IAAI2B,mBAAA,EAAqB3B,MAAA,IAAU,CAAC,CAAC;YACrC,CAACc,mBAAA,GAAsB;cACrB,GAAGa,mBAAA,EAAqB3B,MAAA,GAASc,mBAAA,CAAoB;cACrDc,SAAA,EAAWF;YACb;UACF;QACF,CAAC;MACP;IACF;EACF,GACA,CAACf,cAAA,EAAgBG,mBAAA,EAAqBL,aAAA,EAAeC,aAAA,EAAeL,IAAA,CAAK;EAG3E/B,SAAA,CAAU;IACR,MAAMuD,iBAAA,GAAoB,MAAAA,CAAA;MACxB,IAAIlB,cAAA,EAAgB;QAClB,MAAMmB,WAAA,GAAc,MAAMrB,aAAA,CAAcE,cAAA;QACxC,MAAMoB,kBAAA,GAAqB1B,IAAA,GACvByB,WAAA,EAAa9B,MAAA,GAASK,IAAA,CAAK,EAAEuB,SAAA,GAC7BE,WAAA,EAAa9B,MAAA,GAASc,mBAAA,CAAoB,EAAEc,SAAA;QAEhD,IAAIG,kBAAA,KAAuBC,SAAA,EAAW;UACpCnB,mBAAA,CAAoBoB,OAAA,CAAQF,kBAAA;QAC9B,OAAO;UACLlB,mBAAA,CAAoB,OAAOd,aAAA,KAAkB,YAAYA,aAAA,GAAgB;QAC3E;MACF,OAAO;QACLc,mBAAA,CAAoB,OAAOd,aAAA,KAAkB,YAAYA,aAAA,GAAgB;MAC3E;IACF;IAEA,KAAK8B,iBAAA;EACP,GAAG,CAACpB,aAAA,EAAeE,cAAA,EAAgBG,mBAAA,EAAqBf,aAAA,EAAeM,IAAA,CAAK;EAE5E,MAAM6B,MAAA,GAAS3D,OAAA,CAAQ,MAAMe,gBAAA,CAAiBK,KAAA,GAAQ,CAACA,KAAA,CAAM;EAE7D,IAAI,OAAOiB,gBAAA,KAAqB,WAAW;IACzC,OAAO;EACT;EAEA,oBACEuB,KAAA,CAAC/D,QAAA;4BACCgE,IAAA,CAACnD,gBAAA;MACCe,MAAA,EAAQA,MAAA;MACR;MACAK,IAAA,EAAMA,IAAA,CAAKgC,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAG,CAAC;MAChCrB,aAAA,EAAeA;qBAEjBkB,KAAA,CAAC;MACCtC,SAAA,EAAW,CACTN,cAAA,EACAC,SAAA,EACAK,SAAA,EACAqB,cAAA,GAAiB,GAAG1B,SAAA,aAAsB,GAAG,GAAGA,SAAA,gBAAyB,CAC1E,CACE+C,MAAM,CAACN,OAAA,EACPO,IAAI,CAAC;MACRC,EAAA,EAAI,SAAS3B,mBAAA,EAAqB;MAClC4B,KAAA,EAAOR,MAAA;iBAENb,WAAA,E,aACDe,IAAA,CAAC1D,kBAAA;QACCmB,SAAA,EAAW,GAAGL,SAAA,eAAwB;QACtCmD,gBAAA,EAAkBzB,cAAA,GAAiB,UAAU;QAC7C0B,MAAA,eACET,KAAA,CAAC;UAAItC,SAAA,EAAW,GAAGL,SAAA,kBAA2B;kCAC5C4C,IAAA,CAACrD,QAAA;YAAS8D,eAAA,EAAiBtB,KAAA;YAAOtB,KAAA,EAAO/B,cAAA,CAAe+B,KAAA,EAAOO,IAAA;YAAOH,IAAA,EAAMA;cAC3Ea,cAAA,iBAAkBkB,IAAA,CAACzD,SAAA;YAAUmE,KAAA,EAAO9B,UAAA;YAAYR,IAAA,EAAMA,IAAA;YAAMuC,WAAW;;;QAG5EhD,aAAA,EAAea,gBAAA;QACfa,QAAA,EAAUA,QAAA;kBAEV,aAAAW,IAAA,CAACtD,YAAA;UACCkB,MAAA,EAAQA,MAAA;UACRgD,OAAA,EAAQ;UACRC,eAAA,EAAiB/C,SAAA;UACjBC,UAAA,EAAYA,UAAA;UACZC,gBAAA,EAAkBA,gBAAA;UAClBE,WAAA,EAAaA,WAAA;UACbC,QAAA,EAAUA,QAAA,IAAYiB;;UAGzBJ,UAAA,E,aACDgB,IAAA,CAACxD,qBAAA;QACCiE,eAAA,EAAiBvB,WAAA;QACjB4B,QAAA,eAAUd,IAAA,CAACvD,gBAAA;UAAiBiB,WAAA,EAAaA,WAAA;UAAaO,IAAA,EAAMA;;;;;AAKtE;AAEA,OAAO,MAAM8C,gBAAA,GAAmBjE,aAAA,CAAcO,yBAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","Fragment","useCallback","useEffect","useMemo","useState","Collapsible","CollapsibleElement","ErrorPill","RenderCustomComponent","FieldDescription","RenderFields","RowLabel","useField","WatchChildErrors","withCondition","useDocumentInfo","usePreferences","useTranslation","mergeFieldStyles","fieldBaseClass","baseClass","CollapsibleFieldComponent","props","field","admin","className","description","initCollapsed","fields","label","indexPath","parentPath","parentSchemaPath","path","permissions","readOnly","i18n","getPreference","setPreference","preferencesKey","collapsedOnMount","setCollapsedOnMount","fieldPreferencesKey","replace","errorCount","setErrorCount","fieldHasErrors","customComponents","AfterInput","BeforeInput","Description","Label","disabled","onToggle","newCollapsedState","existingPreferences","collapsed","fetchInitialState","preferences","specificPreference","undefined","Boolean","styles","_jsxs","_jsx","split","slice","filter","join","id","style","collapsibleStyle","header","CustomComponent","count","withMessage","parentIndexPath","Fallback","CollapsibleField"],"sources":["../../../src/fields/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport type { CollapsibleFieldClientComponent, DocumentPreferences } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { Collapsible as CollapsibleElement } from '../../elements/Collapsible/index.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { RowLabel } from '../../forms/RowLabel/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { WatchChildErrors } from '../../forms/WatchChildErrors/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport './index.css'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst baseClass = 'collapsible-field'\n\nconst CollapsibleFieldComponent: CollapsibleFieldClientComponent = (props) => {\n  const {\n    field,\n    field: { admin: { className, description, initCollapsed = false } = {}, fields, label } = {},\n    indexPath,\n    parentPath,\n    parentSchemaPath,\n    path,\n    permissions,\n    readOnly,\n  } = props\n\n  const { i18n } = useTranslation()\n  const { getPreference, setPreference } = usePreferences()\n  const { preferencesKey } = useDocumentInfo()\n  const [collapsedOnMount, setCollapsedOnMount] = useState<boolean>()\n  const fieldPreferencesKey = `collapsible-${path?.replace(/\\./g, '__')}`\n  const [errorCount, setErrorCount] = useState(0)\n  const fieldHasErrors = errorCount > 0\n\n  const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, disabled } =\n    useField({\n      path,\n    })\n\n  const onToggle = useCallback(\n    async (newCollapsedState: boolean): Promise<void> => {\n      const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n\n      if (preferencesKey) {\n        void setPreference(preferencesKey, {\n          ...existingPreferences,\n          ...(path\n            ? {\n                fields: {\n                  ...(existingPreferences?.fields || {}),\n                  [path]: {\n                    ...existingPreferences?.fields?.[path],\n                    collapsed: newCollapsedState,\n                  },\n                },\n              }\n            : {\n                fields: {\n                  ...(existingPreferences?.fields || {}),\n                  [fieldPreferencesKey]: {\n                    ...existingPreferences?.fields?.[fieldPreferencesKey],\n                    collapsed: newCollapsedState,\n                  },\n                },\n              }),\n        })\n      }\n    },\n    [preferencesKey, fieldPreferencesKey, getPreference, setPreference, path],\n  )\n\n  useEffect(() => {\n    const fetchInitialState = async () => {\n      if (preferencesKey) {\n        const preferences = await getPreference(preferencesKey)\n        const specificPreference = path\n          ? preferences?.fields?.[path]?.collapsed\n          : preferences?.fields?.[fieldPreferencesKey]?.collapsed\n\n        if (specificPreference !== undefined) {\n          setCollapsedOnMount(Boolean(specificPreference))\n        } else {\n          setCollapsedOnMount(typeof initCollapsed === 'boolean' ? initCollapsed : false)\n        }\n      } else {\n        setCollapsedOnMount(typeof initCollapsed === 'boolean' ? initCollapsed : false)\n      }\n    }\n\n    void fetchInitialState()\n  }, [getPreference, preferencesKey, fieldPreferencesKey, initCollapsed, path])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  if (typeof collapsedOnMount !== 'boolean') {\n    return null\n  }\n\n  return (\n    <Fragment>\n      <WatchChildErrors\n        fields={fields}\n        // removes the 'collapsible' path segment, i.e. `_index-0`\n        path={path.split('.').slice(0, -1)}\n        setErrorCount={setErrorCount}\n      />\n      <div\n        className={[\n          fieldBaseClass,\n          baseClass,\n          className,\n          fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        id={`field-${fieldPreferencesKey}`}\n        style={styles}\n      >\n        {BeforeInput}\n        <CollapsibleElement\n          className={`${baseClass}__collapsible`}\n          collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n          header={\n            <div className={`${baseClass}__row-label-wrap`}>\n              <RowLabel CustomComponent={Label} label={getTranslation(label, i18n)} path={path} />\n              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n            </div>\n          }\n          initCollapsed={collapsedOnMount}\n          onToggle={onToggle}\n        >\n          <RenderFields\n            fields={fields}\n            parentIndexPath={indexPath}\n            parentPath={parentPath}\n            parentSchemaPath={parentSchemaPath}\n            permissions={permissions}\n            readOnly={readOnly || disabled}\n          />\n        </CollapsibleElement>\n        {AfterInput}\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </Fragment>\n  )\n}\n\nexport const CollapsibleField = withCondition(CollapsibleFieldComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/ConfirmPassword/index.css

@@ -42,10 +42,10 @@
     }
 
     &.error input:not(:focus) {
-      border-color: var(--color-border-danger-strong);
+      border-color: var(--field-color-border-error);
 
       &:hover {
-        border-color: var(--color-border-danger-strong);
+        border-color: var(--field-color-border-error);
       }
     }
   }

package/dist/fields/DateTime/index.css

@@ -1,13 +1,13 @@
 @layer payload-default {
   .date-time-field--has-error .date-time-picker .react-datepicker__input-container input {
-    border-color: var(--color-border-danger-strong);
+    border-color: var(--field-color-border-error);
 
     &:hover:not(:focus) {
-      border-color: var(--color-border-danger-strong);
+      border-color: var(--field-color-border-error);
     }
 
     &:focus {
-      border-color: var(--color-border-selected);
+      border-color: var(--field-color-border-focus);
     }
   }
 }