@payloadcms/ui 4.0.0-internal.a0ef1b8 → 4.0.0-internal.bc5cf8c

package/dist/fields/Number/Input.js

@@ -16,9 +16,10 @@ import { fieldBaseClass } from '../shared/index.js';
 import './index.css';
 const baseClass = 'number';
 export const NumberInput = props => {
-  const $ = _c(32);
+  const $ = _c(35);
   const {
     AfterInput,
+    ariaLabel,
     BeforeInput,
     className,
     Description,
@@ -35,11 +36,13 @@ export const NumberInput = props => {
     onStep,
     path,
     placeholder: placeholderFromProps,
+    prefix,
     readOnly,
     required,
     showError,
     step: t3,
     style,
+    suffix,
     value,
     valueToRender
   } = props;
@@ -52,21 +55,21 @@ export const NumberInput = props => {
     t
   } = useTranslation();
   let t4;
-  if ($[0] !== AfterInput || $[1] !== BeforeInput || $[2] !== Description || $[3] !== Error || $[4] !== Label || $[5] !== className || $[6] !== description || $[7] !== hasMany || $[8] !== i18n || $[9] !== label || $[10] !== localized || $[11] !== max || $[12] !== maxRows || $[13] !== min || $[14] !== onChange || $[15] !== onStep || $[16] !== path || $[17] !== placeholderFromProps || $[18] !== readOnly || $[19] !== required || $[20] !== showError || $[21] !== step || $[22] !== style || $[23] !== t || $[24] !== value || $[25] !== valueToRender) {
+  if ($[0] !== AfterInput || $[1] !== BeforeInput || $[2] !== Description || $[3] !== Error || $[4] !== Label || $[5] !== ariaLabel || $[6] !== className || $[7] !== description || $[8] !== hasMany || $[9] !== i18n || $[10] !== label || $[11] !== localized || $[12] !== max || $[13] !== maxRows || $[14] !== min || $[15] !== onChange || $[16] !== onStep || $[17] !== path || $[18] !== placeholderFromProps || $[19] !== prefix || $[20] !== readOnly || $[21] !== required || $[22] !== showError || $[23] !== step || $[24] !== style || $[25] !== suffix || $[26] !== t || $[27] !== value || $[28] !== valueToRender) {
     const placeholder = getTranslation(placeholderFromProps, i18n) || (hasMany ? t("general:enterANumber") : undefined);
     const t5 = showError && "error";
     const t6 = readOnly && "read-only";
     const t7 = hasMany && "has-many";
     let t8;
-    if ($[27] !== className || $[28] !== t5 || $[29] !== t6 || $[30] !== t7) {
+    if ($[30] !== className || $[31] !== t5 || $[32] !== t6 || $[33] !== t7) {
       t8 = [fieldBaseClass, baseClass, className, t5, t6, t7].filter(Boolean);
-      $[27] = className;
-      $[28] = t5;
-      $[29] = t6;
-      $[30] = t7;
-      $[31] = t8;
+      $[30] = className;
+      $[31] = t5;
+      $[32] = t6;
+      $[33] = t7;
+      $[34] = t8;
     } else {
-      t8 = $[31];
+      t8 = $[34];
     }
     t4 = _jsxs("div", {
       className: t8.join(" "),
@@ -118,8 +121,11 @@ export const NumberInput = props => {
           value: valueToRender
         }) : _jsxs("div", {
           className: "form-input-group",
-          children: [_jsx("input", {
-            "aria-label": getTranslation(label, i18n) || path,
+          children: [prefix ? _jsx("span", {
+            className: `${baseClass}__prefix`,
+            children: prefix
+          }) : null, _jsx("input", {
+            "aria-label": ariaLabel || getTranslation(label, i18n) || path,
             className: "form-input",
             disabled: readOnly,
             id: `field-${path.replace(/\./g, "__")}`,
@@ -132,7 +138,10 @@ export const NumberInput = props => {
             step,
             type: "number",
             value: typeof value === "number" ? value : ""
-          }), onStep && _jsx(InputStepper, {
+          }), suffix ? _jsx("span", {
+            className: `${baseClass}__suffix`,
+            children: suffix
+          }) : null, onStep && _jsx(InputStepper, {
             disabled: readOnly,
             onDecrement: () => onStep("down"),
             onIncrement: () => onStep("up")
@@ -151,30 +160,33 @@ export const NumberInput = props => {
     $[2] = Description;
     $[3] = Error;
     $[4] = Label;
-    $[5] = className;
-    $[6] = description;
-    $[7] = hasMany;
-    $[8] = i18n;
-    $[9] = label;
-    $[10] = localized;
-    $[11] = max;
-    $[12] = maxRows;
-    $[13] = min;
-    $[14] = onChange;
-    $[15] = onStep;
-    $[16] = path;
-    $[17] = placeholderFromProps;
-    $[18] = readOnly;
-    $[19] = required;
-    $[20] = showError;
-    $[21] = step;
-    $[22] = style;
-    $[23] = t;
-    $[24] = value;
-    $[25] = valueToRender;
-    $[26] = t4;
+    $[5] = ariaLabel;
+    $[6] = className;
+    $[7] = description;
+    $[8] = hasMany;
+    $[9] = i18n;
+    $[10] = label;
+    $[11] = localized;
+    $[12] = max;
+    $[13] = maxRows;
+    $[14] = min;
+    $[15] = onChange;
+    $[16] = onStep;
+    $[17] = path;
+    $[18] = placeholderFromProps;
+    $[19] = prefix;
+    $[20] = readOnly;
+    $[21] = required;
+    $[22] = showError;
+    $[23] = step;
+    $[24] = style;
+    $[25] = suffix;
+    $[26] = t;
+    $[27] = value;
+    $[28] = valueToRender;
+    $[29] = t4;
   } else {
-    t4 = $[26];
+    t4 = $[29];
   }
   return t4;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["c","_c","getTranslation","isNumber","React","InputStepper","ReactSelect","RenderCustomComponent","useTranslation","FieldDescription","FieldError","FieldLabel","fieldBaseClass","baseClass","NumberInput","props","$","AfterInput","BeforeInput","className","Description","description","Error","hasMany","Label","label","localized","max","t0","maxRows","t1","min","t2","onChange","onStep","path","placeholder","placeholderFromProps","readOnly","required","showError","step","t3","style","value","valueToRender","undefined","Infinity","i18n","t","t4","t5","t6","t7","t8","filter","Boolean","_jsxs","join","children","_jsx","CustomComponent","Fallback","replace","components","DropdownIndicator","disabled","filterOption","_","rawInput","isOverHasMany","Array","isArray","length","isClearable","isCreatable","isMulti","isSortable","noOptionsMessage","isOverHasMany_0","options","id","name","onWheel","_temp","type","onDecrement","onIncrement","e","target","blur"],"sources":["../../../src/fields/Number/Input.tsx"],"sourcesContent":["'use client'\nimport type { ChangeEvent } from 'react'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { isNumber } from 'payload/shared'\nimport React from 'react'\n\nimport type { NumberInputProps } from './types.js'\n\nimport { InputStepper } from '../../elements/InputStepper/index.js'\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.css'\n\nconst baseClass = 'number'\n\nexport const NumberInput: React.FC<NumberInputProps> = (props) => {\n  const {\n    AfterInput,\n    BeforeInput,\n    className,\n    Description,\n    description,\n    Error,\n    hasMany,\n    Label,\n    label,\n    localized,\n    max = Infinity,\n    maxRows = Infinity,\n    min = -Infinity,\n    onChange,\n    onStep,\n    path,\n    placeholder: placeholderFromProps,\n    readOnly,\n    required,\n    showError,\n    step = 1,\n    style,\n    value,\n    valueToRender,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const placeholder =\n    getTranslation(placeholderFromProps, i18n) || (hasMany ? t('general:enterANumber') : undefined)\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n        hasMany && 'has-many',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={style}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        {hasMany ? (\n          <ReactSelect\n            className={`field-${path.replace(/\\./g, '__')}`}\n            components={{ DropdownIndicator: null }}\n            disabled={readOnly}\n            filterOption={(_, rawInput) => {\n              const isOverHasMany = Array.isArray(value) && (value as number[]).length >= maxRows\n              return isNumber(rawInput) && !isOverHasMany\n            }}\n            isClearable\n            isCreatable\n            isMulti\n            isSortable\n            noOptionsMessage={() => {\n              const isOverHasMany = Array.isArray(value) && (value as number[]).length >= maxRows\n              if (isOverHasMany) {\n                return t('validation:limitReached', {\n                  max: maxRows,\n                  value: (value as number[]).length + 1,\n                })\n              }\n              return null\n            }}\n            onChange={onChange}\n            options={[]}\n            placeholder={placeholder}\n            showError={showError}\n            value={valueToRender}\n          />\n        ) : (\n          <div className=\"form-input-group\">\n            <input\n              aria-label={getTranslation(label, i18n) || path}\n              className=\"form-input\"\n              disabled={readOnly}\n              id={`field-${path.replace(/\\./g, '__')}`}\n              max={max}\n              min={min}\n              name={path}\n              onChange={onChange as (e: ChangeEvent<HTMLInputElement>) => void}\n              onWheel={(e) => {\n                // @ts-expect-error - blur() exists on input elements but not typed on EventTarget\n                e.target.blur()\n              }}\n              placeholder={placeholder}\n              step={step}\n              type=\"number\"\n              value={typeof value === 'number' ? value : ''}\n            />\n            {onStep && (\n              <InputStepper\n                disabled={readOnly}\n                onDecrement={() => onStep('down')}\n                onIncrement={() => onStep('up')}\n              />\n            )}\n          </div>\n        )}\n        {AfterInput}\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["c","_c","getTranslation","isNumber","React","InputStepper","ReactSelect","RenderCustomComponent","useTranslation","FieldDescription","FieldError","FieldLabel","fieldBaseClass","baseClass","NumberInput","props","$","AfterInput","ariaLabel","BeforeInput","className","Description","description","Error","hasMany","Label","label","localized","max","t0","maxRows","t1","min","t2","onChange","onStep","path","placeholder","placeholderFromProps","prefix","readOnly","required","showError","step","t3","style","suffix","value","valueToRender","undefined","Infinity","i18n","t","t4","t5","t6","t7","t8","filter","Boolean","_jsxs","join","children","_jsx","CustomComponent","Fallback","replace","components","DropdownIndicator","disabled","filterOption","_","rawInput","isOverHasMany","Array","isArray","length","isClearable","isCreatable","isMulti","isSortable","noOptionsMessage","isOverHasMany_0","options","id","name","onWheel","_temp","type","onDecrement","onIncrement","e","target","blur"],"sources":["../../../src/fields/Number/Input.tsx"],"sourcesContent":["'use client'\nimport type { ChangeEvent } from 'react'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { isNumber } from 'payload/shared'\nimport React from 'react'\n\nimport type { NumberInputProps } from './types.js'\n\nimport { InputStepper } from '../../elements/InputStepper/index.js'\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.css'\n\nconst baseClass = 'number'\n\nexport const NumberInput: React.FC<NumberInputProps> = (props) => {\n  const {\n    AfterInput,\n    ariaLabel,\n    BeforeInput,\n    className,\n    Description,\n    description,\n    Error,\n    hasMany,\n    Label,\n    label,\n    localized,\n    max = Infinity,\n    maxRows = Infinity,\n    min = -Infinity,\n    onChange,\n    onStep,\n    path,\n    placeholder: placeholderFromProps,\n    prefix,\n    readOnly,\n    required,\n    showError,\n    step = 1,\n    style,\n    suffix,\n    value,\n    valueToRender,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const placeholder =\n    getTranslation(placeholderFromProps, i18n) || (hasMany ? t('general:enterANumber') : undefined)\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n        hasMany && 'has-many',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={style}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        {hasMany ? (\n          <ReactSelect\n            className={`field-${path.replace(/\\./g, '__')}`}\n            components={{ DropdownIndicator: null }}\n            disabled={readOnly}\n            filterOption={(_, rawInput) => {\n              const isOverHasMany = Array.isArray(value) && (value as number[]).length >= maxRows\n              return isNumber(rawInput) && !isOverHasMany\n            }}\n            isClearable\n            isCreatable\n            isMulti\n            isSortable\n            noOptionsMessage={() => {\n              const isOverHasMany = Array.isArray(value) && (value as number[]).length >= maxRows\n              if (isOverHasMany) {\n                return t('validation:limitReached', {\n                  max: maxRows,\n                  value: (value as number[]).length + 1,\n                })\n              }\n              return null\n            }}\n            onChange={onChange}\n            options={[]}\n            placeholder={placeholder}\n            showError={showError}\n            value={valueToRender}\n          />\n        ) : (\n          <div className=\"form-input-group\">\n            {prefix ? <span className={`${baseClass}__prefix`}>{prefix}</span> : null}\n            <input\n              aria-label={ariaLabel || getTranslation(label, i18n) || path}\n              className=\"form-input\"\n              disabled={readOnly}\n              id={`field-${path.replace(/\\./g, '__')}`}\n              max={max}\n              min={min}\n              name={path}\n              onChange={onChange as (e: ChangeEvent<HTMLInputElement>) => void}\n              onWheel={(e) => {\n                // @ts-expect-error - blur() exists on input elements but not typed on EventTarget\n                e.target.blur()\n              }}\n              placeholder={placeholder}\n              step={step}\n              type=\"number\"\n              value={typeof value === 'number' ? value : ''}\n            />\n            {suffix ? <span className={`${baseClass}__suffix`}>{suffix}</span> : null}\n            {onStep && (\n              <InputStepper\n                disabled={readOnly}\n                onDecrement={() => onStep('down')}\n                onIncrement={() => onStep('up')}\n              />\n            )}\n          </div>\n        )}\n        {AfterInput}\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Number/index.css

@@ -35,5 +35,24 @@
     &.read-only .input-stepper {
       display: none;
     }
+
+    .number__prefix,
+    .number__suffix {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--text-body-medium-font-size);
+      color: var(--color-text-secondary);
+      user-select: none;
+    }
+
+    .number__prefix {
+      padding-inline-start: var(--field-padding-inline);
+    }
+
+    .number__suffix {
+      padding-inline-end: var(--field-padding-inline);
+    }
   }
 }

package/dist/fields/Number/types.d.ts

@@ -10,6 +10,8 @@ export type SharedNumberFieldProps = {
 };
 export type NumberInputProps = {
     readonly AfterInput?: React.ReactNode;
+    /** Overrides the input's `aria-label`. Defaults to the resolved label or path. */
+    readonly ariaLabel?: string;
     readonly BeforeInput?: React.ReactNode;
     readonly className?: string;
     readonly Description?: React.ReactNode;
@@ -24,11 +26,15 @@ export type NumberInputProps = {
     readonly onStep?: (direction: 'down' | 'up') => void;
     readonly path: string;
     readonly placeholder?: Record<string, string> | string;
+    /** Short text affix rendered before the value, e.g. `W`, `H`, `X`. */
+    readonly prefix?: string;
     readonly readOnly?: boolean;
     readonly required?: boolean;
     readonly showError?: boolean;
     readonly step?: number;
     readonly style?: React.CSSProperties;
+    /** Short text affix rendered after the value, e.g. `%`. */
+    readonly suffix?: string;
     readonly value?: null | number;
     readonly valueToRender?: Option[];
 } & SharedNumberFieldProps;

package/dist/fields/Number/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/Number/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,MAAM,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAA;AAE1F,MAAM,MAAM,sBAAsB,GAC9B;IACE,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAA;IACxB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CACrE,GACD;IACE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAA;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,UAAU,CAAC,CAAA;CACxD,CAAA;AAEL,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAA;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACpD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;CAClC,GAAG,sBAAsB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/Number/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,MAAM,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAA;AAE1F,MAAM,MAAM,sBAAsB,GAC9B;IACE,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAA;IACxB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CACrE,GACD;IACE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAA;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,UAAU,CAAC,CAAA;CACxD,CAAA;AAEL,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrC,kFAAkF;IAClF,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAA;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACpD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACtD,sEAAsE;IACtE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACpC,2DAA2D;IAC3D,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;CAClC,GAAG,sBAAsB,CAAA"}

package/dist/fields/Number/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/fields/Number/types.ts"],"sourcesContent":["import type { StaticDescription, StaticLabel } from 'payload'\nimport type React from 'react'\n\nimport type { Option, ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'\n\nexport type SharedNumberFieldProps =\n  | {\n      readonly hasMany?: false\n      readonly onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n    }\n  | {\n      readonly hasMany?: true\n      readonly onChange?: ReactSelectAdapterProps['onChange']\n    }\n\nexport type NumberInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly BeforeInput?: React.ReactNode\n  readonly className?: string\n  readonly Description?: React.ReactNode\n  readonly description?: StaticDescription\n  readonly Error?: React.ReactNode\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly max?: number\n  readonly maxRows?: number\n  readonly min?: number\n  readonly onStep?: (direction: 'down' | 'up') => void\n  readonly path: string\n  readonly placeholder?: Record<string, string> | string\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly showError?: boolean\n  readonly step?: number\n  readonly style?: React.CSSProperties\n  readonly value?: null | number\n  readonly valueToRender?: Option[]\n} & SharedNumberFieldProps\n"],"mappings":"AAeA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/fields/Number/types.ts"],"sourcesContent":["import type { StaticDescription, StaticLabel } from 'payload'\nimport type React from 'react'\n\nimport type { Option, ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'\n\nexport type SharedNumberFieldProps =\n  | {\n      readonly hasMany?: false\n      readonly onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n    }\n  | {\n      readonly hasMany?: true\n      readonly onChange?: ReactSelectAdapterProps['onChange']\n    }\n\nexport type NumberInputProps = {\n  readonly AfterInput?: React.ReactNode\n  /** Overrides the input's `aria-label`. Defaults to the resolved label or path. */\n  readonly ariaLabel?: string\n  readonly BeforeInput?: React.ReactNode\n  readonly className?: string\n  readonly Description?: React.ReactNode\n  readonly description?: StaticDescription\n  readonly Error?: React.ReactNode\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly max?: number\n  readonly maxRows?: number\n  readonly min?: number\n  readonly onStep?: (direction: 'down' | 'up') => void\n  readonly path: string\n  readonly placeholder?: Record<string, string> | string\n  /** Short text affix rendered before the value, e.g. `W`, `H`, `X`. */\n  readonly prefix?: string\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly showError?: boolean\n  readonly step?: number\n  readonly style?: React.CSSProperties\n  /** Short text affix rendered after the value, e.g. `%`. */\n  readonly suffix?: string\n  readonly value?: null | number\n  readonly valueToRender?: Option[]\n} & SharedNumberFieldProps\n"],"mappings":"AAeA","ignoreList":[]}

package/dist/fields/RadioGroup/index.css

@@ -4,6 +4,12 @@
     flex-direction: column;
     gap: var(--spacer-2);
 
+    .field-type__wrap {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacer-2);
+    }
+
     .tooltip:not([aria-hidden='true']) {
       right: auto;
       position: static;

package/dist/fields/Relationship/select-components/MultiValueLabel/index.css

@@ -1,8 +1,8 @@
 @layer payload-default {
   .relationship--multi-value-label {
     display: flex;
-    padding-inline-start: 0.5rem;
-    gap: 0.25rem;
+    padding-inline-start: var(--spacer-2);
+    gap: var(--spacer-1);
   }
 
   .relationship--multi-value-label__content {
@@ -28,7 +28,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-left: 0.25rem;
+    margin-left: var(--spacer-1);
     pointer-events: all;
     border-radius: var(--radius-small);
     border: var(--stroke-width-small) solid transparent;

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

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

package/dist/fields/Tabs/Tab/index.d.ts

@@ -1,6 +1,5 @@
 import type { ClientTab } from 'payload';
 import React from 'react';
-import './index.css';
 type TabProps = {
     readonly hidden?: boolean;
     readonly isActive?: boolean;

package/dist/fields/Tabs/Tab/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIxC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,OAAO,aAAa,CAAA;AAIpB,KAAK,QAAQ,GAAG;IACd,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,IAAI,CAAA;IAChC,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAwC3C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIxC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAUvC,KAAK,QAAQ,GAAG;IACd,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,IAAI,CAAA;IAChC,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAoC3C,CAAA"}

package/dist/fields/Tabs/Tab/index.js

@@ -6,13 +6,13 @@ import { getTranslation } from '@payloadcms/translations';
 import { tabHasName } from 'payload/shared';
 import React, { useState } from 'react';
 import { ErrorPill } from '../../../elements/ErrorPill/index.js';
+import { TabButton } from '../../../elements/Tabs/index.js';
 import { useFormInitializing } from '../../../forms/Form/context.js';
 import { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
-import './index.css';
 const baseClass = 'tabs-field__tab-button';
 export const TabComponent = t0 => {
-  const $ = _c(13);
+  const $ = _c(9);
   const {
     hidden,
     isActive,
@@ -29,30 +29,19 @@ export const TabComponent = t0 => {
   if ($[0] !== errorCount || $[1] !== hidden || $[2] !== i18n || $[3] !== isActive || $[4] !== isInitializing || $[5] !== parentPath || $[6] !== setIsActive || $[7] !== tab) {
     const path = [...(parentPath ? parentPath.split(".").slice(0, -1) : []), ...(tabHasName(tab) ? [tab.name] : [])];
     const fieldHasErrors = errorCount > 0;
-    const t2 = _jsx(WatchChildErrors, {
-      fields: tab.fields,
-      path,
-      setErrorCount
-    });
-    const t3 = fieldHasErrors && `${baseClass}--has-error`;
-    const t4 = isActive && `${baseClass}--active`;
-    const t5 = hidden && `${baseClass}--hidden`;
-    let t6;
-    if ($[9] !== t3 || $[10] !== t4 || $[11] !== t5) {
-      t6 = [baseClass, t3, t4, t5].filter(Boolean);
-      $[9] = t3;
-      $[10] = t4;
-      $[11] = t5;
-      $[12] = t6;
-    } else {
-      t6 = $[12];
-    }
     t1 = _jsxs(React.Fragment, {
-      children: [t2, _jsxs("button", {
-        className: t6.join(" "),
+      children: [_jsx(WatchChildErrors, {
+        fields: tab.fields,
+        path,
+        setErrorCount
+      }), _jsxs(TabButton, {
+        className: baseClass,
         disabled: isInitializing,
+        hasError: fieldHasErrors,
+        hidden,
+        isActive,
+        modifierClassName: baseClass,
         onClick: setIsActive,
-        type: "button",
         children: [tab.label ? getTranslation(tab.label, i18n) : tabHasName(tab) ? tab.name : "", fieldHasErrors && _jsx(ErrorPill, {
           count: errorCount,
           i18n

package/dist/fields/Tabs/Tab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","tabHasName","React","useState","ErrorPill","useFormInitializing","WatchChildErrors","useTranslation","baseClass","TabComponent","t0","$","hidden","isActive","parentPath","setIsActive","tab","i18n","isInitializing","errorCount","setErrorCount","undefined","t1","path","split","slice","name","fieldHasErrors","t2","_jsx","fields","t3","t4","t5","t6","filter","Boolean","_jsxs","Fragment","children","className","join","disabled","onClick","type","label","count"],"sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientTab } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { tabHasName } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport { ErrorPill } from '../../../elements/ErrorPill/index.js'\nimport { useFormInitializing } from '../../../forms/Form/context.js'\nimport { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'tabs-field__tab-button'\n\ntype TabProps = {\n  readonly hidden?: boolean\n  readonly isActive?: boolean\n  readonly parentPath: string\n  readonly setIsActive: () => void\n  readonly tab: ClientTab\n}\n\nexport const TabComponent: React.FC<TabProps> = ({\n  hidden,\n  isActive,\n  parentPath,\n  setIsActive,\n  tab,\n}) => {\n  const { i18n } = useTranslation()\n  const isInitializing = useFormInitializing()\n  const [errorCount, setErrorCount] = useState(undefined)\n\n  const path = [\n    // removes parent 'tabs' path segment, i.e. `_index-0`\n    ...(parentPath ? parentPath.split('.').slice(0, -1) : []),\n    ...(tabHasName(tab) ? [tab.name] : []),\n  ]\n\n  const fieldHasErrors = errorCount > 0\n\n  return (\n    <React.Fragment>\n      <WatchChildErrors fields={tab.fields} path={path} setErrorCount={setErrorCount} />\n      <button\n        className={[\n          baseClass,\n          fieldHasErrors && `${baseClass}--has-error`,\n          isActive && `${baseClass}--active`,\n          hidden && `${baseClass}--hidden`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        disabled={isInitializing}\n        onClick={setIsActive}\n        type=\"button\"\n      >\n        {tab.label ? getTranslation(tab.label, i18n) : tabHasName(tab) ? tab.name : ''}\n        {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} />}\n      </button>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,cAAc,QAAQ;AAC/B,SAASC,UAAU,QAAQ;AAC3B,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,SAAS,QAAQ;AAC1B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAUlB,OAAO,MAAMC,YAAA,GAAmCC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAa,MAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAN,EAMhD;EACC;IAAAO;EAAA,IAAiBV,cAAA;EACjB,MAAAW,cAAA,GAAuBb,mBAAA;EACvB,OAAAc,UAAA,EAAAC,aAAA,IAAoCjB,QAAA,CAAAkB,SAAS;EAAA,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAC,MAAA,IAAAD,CAAA,QAAAM,IAAA,IAAAN,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAO,cAAA,IAAAP,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAI,WAAA,IAAAJ,CAAA,QAAAK,GAAA;IAE7C,MAAAO,IAAA,QAEMT,UAAA,GAAaA,UAAA,CAAAU,KAAA,CAAiB,KAAAC,KAAA,MAAe,MAAO,OACpDxB,UAAA,CAAWe,GAAA,KAAQA,GAAA,CAAAU,IAAA,MAAc;IAGvC,MAAAC,cAAA,GAAuBR,UAAA,IAAa;IAIhC,MAAAS,EAAA,GAAAC,IAAA,CAAAvB,gBAAA;MAAAwB,MAAA,EAA0Bd,GAAA,CAAAc,MAAA;MAAAP,IAAA;MAAAH;IAAA,C;IAItB,MAAAW,EAAA,GAAAJ,cAAA,IAAkB,GAAAnB,SAAA,aAAyB;IAC3C,MAAAwB,EAAA,GAAAnB,QAAA,IAAY,GAAAL,SAAA,UAAsB;IAClC,MAAAyB,EAAA,GAAArB,MAAA,IAAU,GAAAJ,SAAA,UAAsB;IAAA,IAAA0B,EAAA;IAAA,IAAAvB,CAAA,QAAAoB,EAAA,IAAApB,CAAA,SAAAqB,EAAA,IAAArB,CAAA,SAAAsB,EAAA;MAJvBC,EAAA,IAAA1B,SAAA,EAETuB,EAA2C,EAC3CC,EAAkC,EAClCC,EAAgC,EAAAE,MAAA,CAAAC,OAExB;MAAAzB,CAAA,MAAAoB,EAAA;MAAApB,CAAA,OAAAqB,EAAA;MAAArB,CAAA,OAAAsB,EAAA;MAAAtB,CAAA,OAAAuB,EAAA;IAAA;MAAAA,EAAA,GAAAvB,CAAA;IAAA;IATdW,EAAA,GAAAe,KAAA,CAAAnC,KAAA,CAAAoC,QAAA;MAAAC,QAAA,GACEX,E,EACAS,KAAA,CAAC;QAAAG,SAAA,EACYN,EAMD,CAAAO,IAAA,CACF;QAAAC,QAAA,EACExB,cAAA;QAAAyB,OAAA,EACD5B,WAAA;QAAA6B,IAAA,EACJ;QAAAL,QAAA,GAEJvB,GAAA,CAAA6B,KAAA,GAAY7C,cAAA,CAAegB,GAAA,CAAA6B,KAAA,EAAW5B,IAAA,IAAQhB,UAAA,CAAWe,GAAA,IAAOA,GAAA,CAAAU,IAAA,GAAW,IAC3EC,cAAA,IAAkBE,IAAA,CAAAzB,SAAA;UAAA0C,KAAA,EAAkB3B,UAAA;UAAAF;QAAA,C;;;;;;;;;;;;;;;SAhBzCK,E;CAoBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","tabHasName","React","useState","ErrorPill","TabButton","useFormInitializing","WatchChildErrors","useTranslation","baseClass","TabComponent","t0","$","hidden","isActive","parentPath","setIsActive","tab","i18n","isInitializing","errorCount","setErrorCount","undefined","t1","path","split","slice","name","fieldHasErrors","_jsxs","Fragment","children","_jsx","fields","className","disabled","hasError","modifierClassName","onClick","label","count"],"sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientTab } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { tabHasName } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport { ErrorPill } from '../../../elements/ErrorPill/index.js'\nimport { TabButton } from '../../../elements/Tabs/index.js'\nimport { useFormInitializing } from '../../../forms/Form/context.js'\nimport { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\n\nconst baseClass = 'tabs-field__tab-button'\n\ntype TabProps = {\n  readonly hidden?: boolean\n  readonly isActive?: boolean\n  readonly parentPath: string\n  readonly setIsActive: () => void\n  readonly tab: ClientTab\n}\n\nexport const TabComponent: React.FC<TabProps> = ({\n  hidden,\n  isActive,\n  parentPath,\n  setIsActive,\n  tab,\n}) => {\n  const { i18n } = useTranslation()\n  const isInitializing = useFormInitializing()\n  const [errorCount, setErrorCount] = useState(undefined)\n\n  const path = [\n    // removes parent 'tabs' path segment, i.e. `_index-0`\n    ...(parentPath ? parentPath.split('.').slice(0, -1) : []),\n    ...(tabHasName(tab) ? [tab.name] : []),\n  ]\n\n  const fieldHasErrors = errorCount > 0\n\n  return (\n    <React.Fragment>\n      <WatchChildErrors fields={tab.fields} path={path} setErrorCount={setErrorCount} />\n      <TabButton\n        className={baseClass}\n        disabled={isInitializing}\n        hasError={fieldHasErrors}\n        hidden={hidden}\n        isActive={isActive}\n        modifierClassName={baseClass}\n        onClick={setIsActive}\n      >\n        {tab.label ? getTranslation(tab.label, i18n) : tabHasName(tab) ? tab.name : ''}\n        {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} />}\n      </TabButton>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,cAAc,QAAQ;AAC/B,SAASC,UAAU,QAAQ;AAC3B,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAUlB,OAAO,MAAMC,YAAA,GAAmCC,EAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EAAC;IAAAc,MAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAN,EAMhD;EACC;IAAAO;EAAA,IAAiBV,cAAA;EACjB,MAAAW,cAAA,GAAuBb,mBAAA;EACvB,OAAAc,UAAA,EAAAC,aAAA,IAAoClB,QAAA,CAAAmB,SAAS;EAAA,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAC,MAAA,IAAAD,CAAA,QAAAM,IAAA,IAAAN,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAO,cAAA,IAAAP,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAI,WAAA,IAAAJ,CAAA,QAAAK,GAAA;IAE7C,MAAAO,IAAA,QAEMT,UAAA,GAAaA,UAAA,CAAAU,KAAA,CAAiB,KAAAC,KAAA,MAAe,MAAO,OACpDzB,UAAA,CAAWgB,GAAA,KAAQA,GAAA,CAAAU,IAAA,MAAc;IAGvC,MAAAC,cAAA,GAAuBR,UAAA,IAAa;IAGlCG,EAAA,GAAAM,KAAA,CAAA3B,KAAA,CAAA4B,QAAA;MAAAC,QAAA,GACEC,IAAA,CAAAzB,gBAAA;QAAA0B,MAAA,EAA0BhB,GAAA,CAAAgB,MAAA;QAAAT,IAAA;QAAAH;MAAA,C,GAC1BQ,KAAA,CAAAxB,SAAA;QAAA6B,SAAA,EAAAzB,SAAA;QAAA0B,QAAA,EAEYhB,cAAA;QAAAiB,QAAA,EACAR,cAAA;QAAAf,MAAA;QAAAC,QAAA;QAAAuB,iBAAA,EAAA5B,SAAA;QAAA6B,OAAA,EAIDtB,WAAA;QAAAe,QAAA,GAERd,GAAA,CAAAsB,KAAA,GAAYvC,cAAA,CAAeiB,GAAA,CAAAsB,KAAA,EAAWrB,IAAA,IAAQjB,UAAA,CAAWgB,GAAA,IAAOA,GAAA,CAAAU,IAAA,GAAW,IAC3EC,cAAA,IAAkBI,IAAA,CAAA5B,SAAA;UAAAoC,KAAA,EAAkBpB,UAAA;UAAAF;QAAA,C;;;;;;;;;;;;;;;SAZzCK,E;CAgBJ","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,oBAAoB,EAMrB,MAAM,SAAS,CAAA;AAIhB,OAAO,KAA2C,MAAM,OAAO,CAAA;AAa/D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,YAAY,EAAE,CAAA;AAuKvB,eAAO,MAAM,SAAS;;6DAAoC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,oBAAoB,EAMrB,MAAM,SAAS,CAAA;AAIhB,OAAO,KAA2C,MAAM,OAAO,CAAA;AAc/D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,YAAY,EAAE,CAAA;AAiLvB,eAAO,MAAM,SAAS;;6DAAoC,CAAA"}

package/dist/fields/Tabs/index.js

@@ -7,6 +7,7 @@ import { getFieldPaths, toKebabCase } from 'payload/shared';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useCollapsible } from '../../elements/Collapsible/provider.js';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { TabsList } from '../../elements/Tabs/index.js';
 import { useFormFields } from '../../forms/Form/index.js';
 import { RenderFields } from '../../forms/RenderFields/index.js';
 import { useField } from '../../forms/useField/index.js';
@@ -22,7 +23,7 @@ import './index.css';
 const baseClass = 'tabs-field';
 export { TabsProvider };
 const TabsFieldComponent = props => {
-  const $ = _c(44);
+  const $ = _c(45);
   const {
     field: t0,
     forceRender: t1,
@@ -175,22 +176,23 @@ const TabsFieldComponent = props => {
     t14 = $[19];
   }
   let t15;
-  if ($[20] !== getPreference || $[21] !== parentPath || $[22] !== parentSchemaPath || $[23] !== path || $[24] !== preferencesKey || $[25] !== tabs || $[26] !== tabsPrefKey) {
-    t15 = [path, getPreference, preferencesKey, tabsPrefKey, tabs, parentPath, parentSchemaPath];
+  if ($[20] !== getPreference || $[21] !== parentPath || $[22] !== parentSchemaPath || $[23] !== path || $[24] !== preferencesKey || $[25] !== tabStates.length || $[26] !== tabs || $[27] !== tabsPrefKey) {
+    t15 = [path, getPreference, preferencesKey, tabsPrefKey, tabs, parentPath, parentSchemaPath, tabStates.length];
     $[20] = getPreference;
     $[21] = parentPath;
     $[22] = parentSchemaPath;
     $[23] = path;
     $[24] = preferencesKey;
-    $[25] = tabs;
-    $[26] = tabsPrefKey;
-    $[27] = t15;
+    $[25] = tabStates.length;
+    $[26] = tabs;
+    $[27] = tabsPrefKey;
+    $[28] = t15;
   } else {
-    t15 = $[27];
+    t15 = $[28];
   }
   useEffect(t14, t15);
   let t16;
-  if ($[28] !== activeTabInfo?.passesCondition || $[29] !== handleTabChange || $[30] !== tabStates) {
+  if ($[29] !== activeTabInfo?.passesCondition || $[30] !== handleTabChange || $[31] !== tabStates) {
     t16 = () => {
       if (activeTabInfo?.passesCondition === false) {
         const nextTab = tabStates.find(_temp3);
@@ -199,38 +201,38 @@ const TabsFieldComponent = props => {
         }
       }
     };
-    $[28] = activeTabInfo?.passesCondition;
-    $[29] = handleTabChange;
-    $[30] = tabStates;
-    $[31] = t16;
+    $[29] = activeTabInfo?.passesCondition;
+    $[30] = handleTabChange;
+    $[31] = tabStates;
+    $[32] = t16;
   } else {
-    t16 = $[31];
+    t16 = $[32];
   }
   let t17;
-  if ($[32] !== activeTabInfo || $[33] !== handleTabChange || $[34] !== tabStates) {
+  if ($[33] !== activeTabInfo || $[34] !== handleTabChange || $[35] !== tabStates) {
     t17 = [activeTabInfo, tabStates, handleTabChange];
-    $[32] = activeTabInfo;
-    $[33] = handleTabChange;
-    $[34] = tabStates;
-    $[35] = t17;
+    $[33] = activeTabInfo;
+    $[34] = handleTabChange;
+    $[35] = tabStates;
+    $[36] = t17;
   } else {
-    t17 = $[35];
+    t17 = $[36];
   }
   useEffect(t16, t17);
   const t18 = isWithinCollapsible && `${baseClass}--within-collapsible`;
   const t19 = !hasVisibleTabs && `${baseClass}--hidden`;
   let t20;
-  if ($[36] !== className || $[37] !== t18 || $[38] !== t19) {
+  if ($[37] !== className || $[38] !== t18 || $[39] !== t19) {
     t20 = [fieldBaseClass, className, baseClass, t18, t19].filter(Boolean);
-    $[36] = className;
-    $[37] = t18;
-    $[38] = t19;
-    $[39] = t20;
+    $[37] = className;
+    $[38] = t18;
+    $[39] = t19;
+    $[40] = t20;
   } else {
-    t20 = $[39];
+    t20 = $[40];
   }
   let t21;
-  if ($[40] !== activeTabIndex || $[41] !== handleTabChange || $[42] !== path) {
+  if ($[41] !== activeTabIndex || $[42] !== handleTabChange || $[43] !== path) {
     t21 = t22 => {
       const {
         index: index_0,
@@ -247,22 +249,20 @@ const TabsFieldComponent = props => {
         tab: tab_0
       }, index_0);
     };
-    $[40] = activeTabIndex;
-    $[41] = handleTabChange;
-    $[42] = path;
-    $[43] = t21;
+    $[41] = activeTabIndex;
+    $[42] = handleTabChange;
+    $[43] = path;
+    $[44] = t21;
   } else {
-    t21 = $[43];
+    t21 = $[44];
   }
   return _jsx("div", {
     className: t20.join(" "),
     children: _jsxs(TabsProvider, {
-      children: [_jsx("div", {
-        className: `${baseClass}__tabs-wrap`,
-        children: _jsx("div", {
-          className: `${baseClass}__tabs`,
-          children: tabStates.map(t21)
-        })
+      children: [_jsx(TabsList, {
+        tabsClassName: `${baseClass}__tabs`,
+        tabsWrapClassName: `${baseClass}__tabs-wrap`,
+        children: tabStates.map(t21)
       }), _jsx("div", {
         className: `${baseClass}__content-wrap`,
         children: activeTabConfig && _jsx(TabContent, {