@payloadcms/ui 3.0.0-alpha.47 → 3.0.0-alpha.49

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAkB,SAAS,EAAE,MAAM,EAAgB,MAAM,eAAe,CAAA;AAMpF,OAAO,KAAgC,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAOvD,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAcD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiIlD,CAAA;AAED,eAAO,MAAM,MAAM,4BAA6B,CAAA"}

package/dist/fields/Select/index.js

@@ -0,0 +1,118 @@
+/* eslint-disable react/destructuring-assignment */ 'use client';
+import { getTranslation } from '@payloadcms/translations';
+import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
+import { FieldError } from '@payloadcms/ui/forms/FieldError';
+import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
+import React, { useCallback, useState } from 'react';
+import { ReactSelect } from '../../elements/ReactSelect/index.js';
+import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+const formatOptions = (options)=>options.map((option)=>{
+        if (typeof option === 'object' && (option.value || option.value === '')) {
+            return option;
+        }
+        return {
+            label: option,
+            value: option
+        };
+    });
+export const SelectField = (props)=>{
+    const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, hasMany = false, isClearable = true, isSortable = true, labelProps, onChange: onChangeFromProps, options: optionsFromProps = [], path: pathFromProps, readOnly, required, style, validate, width } = props;
+    const { i18n } = useTranslation();
+    const [options] = useState(formatOptions(optionsFromProps));
+    const memoizedValidate = useCallback((value, validationOptions)=>{
+        if (typeof validate === 'function') return validate(value, {
+            ...validationOptions,
+            hasMany,
+            options,
+            required
+        });
+    }, [
+        validate,
+        required,
+        hasMany,
+        options
+    ]);
+    const { path, setValue, showError, value } = useField({
+        path: pathFromProps || name,
+        validate: memoizedValidate
+    });
+    let valueToRender;
+    if (hasMany && Array.isArray(value)) {
+        valueToRender = value.map((val)=>{
+            const matchingOption = options.find((option)=>option.value === val);
+            return {
+                label: matchingOption ? getTranslation(matchingOption.label, i18n) : val,
+                value: matchingOption?.value ?? val
+            };
+        });
+    } else if (value) {
+        const matchingOption = options.find((option)=>option.value === value);
+        valueToRender = {
+            label: matchingOption ? getTranslation(matchingOption.label, i18n) : value,
+            value: matchingOption?.value ?? value
+        };
+    }
+    const onChange = useCallback((selectedOption)=>{
+        if (!readOnly) {
+            let newValue;
+            if (!selectedOption) {
+                newValue = null;
+            } else if (hasMany) {
+                if (Array.isArray(selectedOption)) {
+                    newValue = selectedOption.map((option)=>option.value);
+                } else {
+                    newValue = [];
+                }
+            } else {
+                newValue = selectedOption.value;
+            }
+            if (typeof onChangeFromProps === 'function') {
+                onChangeFromProps(newValue);
+            }
+            setValue(newValue);
+        }
+    }, [
+        readOnly,
+        hasMany,
+        setValue,
+        onChangeFromProps
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: [
+            fieldBaseClass,
+            'select',
+            className,
+            showError && 'error',
+            readOnly && 'read-only'
+        ].filter(Boolean).join(' '),
+        id: `field-${path.replace(/\./g, '__')}`,
+        style: {
+            ...style,
+            width
+        }
+    }, /*#__PURE__*/ React.createElement(FieldError, {
+        CustomError: CustomError,
+        ...errorProps || {}
+    }), /*#__PURE__*/ React.createElement(FieldLabel, {
+        CustomLabel: CustomLabel,
+        ...labelProps || {}
+    }), /*#__PURE__*/ React.createElement("div", null, BeforeInput, /*#__PURE__*/ React.createElement(ReactSelect, {
+        disabled: readOnly,
+        isClearable: isClearable,
+        isMulti: hasMany,
+        isSortable: isSortable,
+        onChange: onChange,
+        options: options.map((option)=>({
+                ...option,
+                label: getTranslation(option.label, i18n)
+            })),
+        showError: showError,
+        value: valueToRender
+    }), AfterInput), CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {}));
+};
+export const Select = withCondition(SelectField);
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Select/index.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n'use client'\nimport type { ClientValidate, FieldBase, Option, OptionObject } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport React, { useCallback, useState } from 'react'\n\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport type SelectFieldProps = FormFieldBase & {\n  hasMany?: boolean\n  isClearable?: boolean\n  isSortable?: boolean\n  label?: FieldBase['label']\n  name?: string\n  onChange?: (e: string) => void\n  options?: Option[]\n  path?: string\n  value?: string\n  width?: string\n}\n\nconst formatOptions = (options: Option[]): OptionObject[] =>\n  options.map((option) => {\n    if (typeof option === 'object' && (option.value || option.value === '')) {\n      return option\n    }\n\n    return {\n      label: option,\n      value: option,\n    } as OptionObject\n  })\n\nexport const SelectField: React.FC<SelectFieldProps> = (props) => {\n  const {\n    name,\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    hasMany = false,\n    isClearable = true,\n    isSortable = true,\n    labelProps,\n    onChange: onChangeFromProps,\n    options: optionsFromProps = [],\n    path: pathFromProps,\n    readOnly,\n    required,\n    style,\n    validate,\n    width,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const [options] = useState(formatOptions(optionsFromProps))\n\n  const memoizedValidate: ClientValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function')\n        return validate(value, { ...validationOptions, hasMany, options, required })\n    },\n    [validate, required, hasMany, options],\n  )\n\n  const { path, setValue, showError, value } = useField({\n    path: pathFromProps || name,\n    validate: memoizedValidate,\n  })\n\n  let valueToRender\n\n  if (hasMany && Array.isArray(value)) {\n    valueToRender = value.map((val) => {\n      const matchingOption = options.find((option) => option.value === val)\n      return {\n        label: matchingOption ? getTranslation(matchingOption.label, i18n) : val,\n        value: matchingOption?.value ?? val,\n      }\n    })\n  } else if (value) {\n    const matchingOption = options.find((option) => option.value === value)\n    valueToRender = {\n      label: matchingOption ? getTranslation(matchingOption.label, i18n) : value,\n      value: matchingOption?.value ?? value,\n    }\n  }\n\n  const onChange = useCallback(\n    (selectedOption) => {\n      if (!readOnly) {\n        let newValue\n        if (!selectedOption) {\n          newValue = null\n        } else if (hasMany) {\n          if (Array.isArray(selectedOption)) {\n            newValue = selectedOption.map((option) => option.value)\n          } else {\n            newValue = []\n          }\n        } else {\n          newValue = selectedOption.value\n        }\n\n        if (typeof onChangeFromProps === 'function') {\n          onChangeFromProps(newValue)\n        }\n\n        setValue(newValue)\n      }\n    },\n    [readOnly, hasMany, setValue, onChangeFromProps],\n  )\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'select',\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={`field-${path.replace(/\\./g, '__')}`}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldError CustomError={CustomError} {...(errorProps || {})} />\n      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />\n      <div>\n        {BeforeInput}\n        <ReactSelect\n          disabled={readOnly}\n          isClearable={isClearable}\n          isMulti={hasMany}\n          isSortable={isSortable}\n          onChange={onChange}\n          options={options.map((option) => ({\n            ...option,\n            label: getTranslation(option.label, i18n),\n          }))}\n          showError={showError}\n          value={valueToRender as OptionObject}\n        />\n        {AfterInput}\n      </div>\n      {CustomDescription !== undefined ? (\n        CustomDescription\n      ) : (\n        <FieldDescription {...(descriptionProps || {})} />\n      )}\n    </div>\n  )\n}\n\nexport const Select = withCondition(SelectField)\n"],"names":["getTranslation","FieldDescription","FieldError","FieldLabel","React","useCallback","useState","ReactSelect","useField","withCondition","useTranslation","fieldBaseClass","formatOptions","options","map","option","value","label","SelectField","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","hasMany","isClearable","isSortable","labelProps","onChange","onChangeFromProps","optionsFromProps","path","pathFromProps","readOnly","required","style","validate","width","i18n","memoizedValidate","validationOptions","setValue","showError","valueToRender","Array","isArray","val","matchingOption","find","selectedOption","newValue","div","filter","Boolean","join","id","replace","disabled","isMulti","undefined","Select"],"mappings":"AAAA,iDAAiD,GACjD;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,gBAAgB,QAAQ,wCAAuC;AACxE,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,OAAOC,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAO;AAIpD,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,qBAAoB;AAgBnD,MAAMC,gBAAgB,CAACC,UACrBA,QAAQC,GAAG,CAAC,CAACC;QACX,IAAI,OAAOA,WAAW,YAAaA,CAAAA,OAAOC,KAAK,IAAID,OAAOC,KAAK,KAAK,EAAC,GAAI;YACvE,OAAOD;QACT;QAEA,OAAO;YACLE,OAAOF;YACPC,OAAOD;QACT;IACF;AAEF,OAAO,MAAMG,cAA0C,CAACC;IACtD,MAAM,EACJC,IAAI,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,KAAK,EACfC,cAAc,IAAI,EAClBC,aAAa,IAAI,EACjBC,UAAU,EACVC,UAAUC,iBAAiB,EAC3BrB,SAASsB,mBAAmB,EAAE,EAC9BC,MAAMC,aAAa,EACnBC,QAAQ,EACRC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACN,GAAGvB;IAEJ,MAAM,EAAEwB,IAAI,EAAE,GAAGjC;IAEjB,MAAM,CAACG,QAAQ,GAAGP,SAASM,cAAcuB;IAEzC,MAAMS,mBAAmCvC,YACvC,CAACW,OAAO6B;QACN,IAAI,OAAOJ,aAAa,YACtB,OAAOA,SAASzB,OAAO;YAAE,GAAG6B,iBAAiB;YAAEhB;YAAShB;YAAS0B;QAAS;IAC9E,GACA;QAACE;QAAUF;QAAUV;QAAShB;KAAQ;IAGxC,MAAM,EAAEuB,IAAI,EAAEU,QAAQ,EAAEC,SAAS,EAAE/B,KAAK,EAAE,GAAGR,SAAS;QACpD4B,MAAMC,iBAAiBjB;QACvBqB,UAAUG;IACZ;IAEA,IAAII;IAEJ,IAAInB,WAAWoB,MAAMC,OAAO,CAAClC,QAAQ;QACnCgC,gBAAgBhC,MAAMF,GAAG,CAAC,CAACqC;YACzB,MAAMC,iBAAiBvC,QAAQwC,IAAI,CAAC,CAACtC,SAAWA,OAAOC,KAAK,KAAKmC;YACjE,OAAO;gBACLlC,OAAOmC,iBAAiBpD,eAAeoD,eAAenC,KAAK,EAAE0B,QAAQQ;gBACrEnC,OAAOoC,gBAAgBpC,SAASmC;YAClC;QACF;IACF,OAAO,IAAInC,OAAO;QAChB,MAAMoC,iBAAiBvC,QAAQwC,IAAI,CAAC,CAACtC,SAAWA,OAAOC,KAAK,KAAKA;QACjEgC,gBAAgB;YACd/B,OAAOmC,iBAAiBpD,eAAeoD,eAAenC,KAAK,EAAE0B,QAAQ3B;YACrEA,OAAOoC,gBAAgBpC,SAASA;QAClC;IACF;IAEA,MAAMiB,WAAW5B,YACf,CAACiD;QACC,IAAI,CAAChB,UAAU;YACb,IAAIiB;YACJ,IAAI,CAACD,gBAAgB;gBACnBC,WAAW;YACb,OAAO,IAAI1B,SAAS;gBAClB,IAAIoB,MAAMC,OAAO,CAACI,iBAAiB;oBACjCC,WAAWD,eAAexC,GAAG,CAAC,CAACC,SAAWA,OAAOC,KAAK;gBACxD,OAAO;oBACLuC,WAAW,EAAE;gBACf;YACF,OAAO;gBACLA,WAAWD,eAAetC,KAAK;YACjC;YAEA,IAAI,OAAOkB,sBAAsB,YAAY;gBAC3CA,kBAAkBqB;YACpB;YAEAT,SAASS;QACX;IACF,GACA;QAACjB;QAAUT;QAASiB;QAAUZ;KAAkB;IAGlD,qBACE,oBAACsB;QACC9B,WAAW;YACTf;YACA;YACAe;YACAqB,aAAa;YACbT,YAAY;SACb,CACEmB,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,IAAI,CAAC,MAAM,EAAExB,KAAKyB,OAAO,CAAC,OAAO,MAAM,CAAC;QACxCrB,OAAO;YACL,GAAGA,KAAK;YACRE;QACF;qBAEA,oBAACxC;QAAWsB,aAAaA;QAAc,GAAII,cAAc,CAAC,CAAC;sBAC3D,oBAACzB;QAAWsB,aAAaA;QAAc,GAAIO,cAAc,CAAC,CAAC;sBAC3D,oBAACwB,aACElC,2BACD,oBAACf;QACCuD,UAAUxB;QACVR,aAAaA;QACbiC,SAASlC;QACTE,YAAYA;QACZE,UAAUA;QACVpB,SAASA,QAAQC,GAAG,CAAC,CAACC,SAAY,CAAA;gBAChC,GAAGA,MAAM;gBACTE,OAAOjB,eAAee,OAAOE,KAAK,EAAE0B;YACtC,CAAA;QACAI,WAAWA;QACX/B,OAAOgC;QAER3B,aAEFE,sBAAsByC,YACrBzC,kCAEA,oBAACtB,kBAAsB0B,oBAAoB,CAAC;AAIpD,EAAC;AAED,OAAO,MAAMsC,SAASxD,cAAcS,aAAY"}

package/dist/fields/Select/index.scss

@@ -0,0 +1,25 @@
+@import '../../scss/styles.scss';
+
+.field-type.select {
+  position: relative;
+}
+
+html[data-theme='light'] {
+  .field-type.select {
+    &.error {
+      .rs__control {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .field-type.select {
+    &.error {
+      .rs__control {
+        @include darkInputError;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { MappedTab } from '../../../providers/ComponentMap/buildComponentMap/types.js';
+import './index.scss';
+type TabProps = {
+    isActive?: boolean;
+    parentPath: string;
+    setIsActive: () => void;
+    tab: MappedTab;
+};
+export declare const TabComponent: React.FC<TabProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4DAA4D,CAAA;AAK3F,OAAO,cAAc,CAAA;AAIrB,KAAK,QAAQ,GAAG;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,GAAG,EAAE,SAAS,CAAA;CACf,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA6B3C,CAAA"}

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

@@ -0,0 +1,33 @@
+'use client';
+import { getTranslation } from '@payloadcms/translations';
+import React, { useState } from 'react';
+import { ErrorPill } from '../../../elements/ErrorPill/index.js';
+import { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+const baseClass = 'tabs-field__tab-button';
+export const TabComponent = ({ isActive, parentPath, setIsActive, tab })=>{
+    const { name, label } = tab;
+    const { i18n } = useTranslation();
+    const [errorCount, setErrorCount] = useState(undefined);
+    const hasName = 'name' in tab;
+    const path = `${parentPath ? `${parentPath}.` : ''}${'name' in tab ? name : ''}`;
+    const fieldHasErrors = errorCount > 0;
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(WatchChildErrors, {
+        fieldMap: tab.fieldMap,
+        path: path,
+        setErrorCount: setErrorCount
+    }), /*#__PURE__*/ React.createElement("button", {
+        className: [
+            baseClass,
+            fieldHasErrors && `${baseClass}--has-error`,
+            isActive && `${baseClass}--active`
+        ].filter(Boolean).join(' '),
+        onClick: setIsActive,
+        type: "button"
+    }, label ? getTranslation(label, i18n) : hasName && name, fieldHasErrors && /*#__PURE__*/ React.createElement(ErrorPill, {
+        count: errorCount,
+        i18n: i18n
+    })));
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useState } from 'react'\n\nimport type { MappedTab } from '../../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { ErrorPill } from '../../../elements/ErrorPill/index.js'\nimport { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'tabs-field__tab-button'\n\ntype TabProps = {\n  isActive?: boolean\n  parentPath: string\n  setIsActive: () => void\n  tab: MappedTab\n}\n\nexport const TabComponent: React.FC<TabProps> = ({ isActive, parentPath, setIsActive, tab }) => {\n  const { name, label } = tab\n\n  const { i18n } = useTranslation()\n  const [errorCount, setErrorCount] = useState(undefined)\n  const hasName = 'name' in tab\n\n  const path = `${parentPath ? `${parentPath}.` : ''}${'name' in tab ? name : ''}`\n  const fieldHasErrors = errorCount > 0\n\n  return (\n    <React.Fragment>\n      <WatchChildErrors fieldMap={tab.fieldMap} path={path} setErrorCount={setErrorCount} />\n      <button\n        className={[\n          baseClass,\n          fieldHasErrors && `${baseClass}--has-error`,\n          isActive && `${baseClass}--active`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onClick={setIsActive}\n        type=\"button\"\n      >\n        {label ? getTranslation(label, i18n) : hasName && name}\n        {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} />}\n      </button>\n    </React.Fragment>\n  )\n}\n"],"names":["getTranslation","React","useState","ErrorPill","WatchChildErrors","useTranslation","baseClass","TabComponent","isActive","parentPath","setIsActive","tab","name","label","i18n","errorCount","setErrorCount","undefined","hasName","path","fieldHasErrors","Fragment","fieldMap","button","className","filter","Boolean","join","onClick","type","count"],"mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAIvC,SAASC,SAAS,QAAQ,uCAAsC;AAChE,SAASC,gBAAgB,QAAQ,2CAA0C;AAC3E,SAASC,cAAc,QAAQ,0CAAyC;AAGxE,MAAMC,YAAY;AASlB,OAAO,MAAMC,eAAmC,CAAC,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,WAAW,EAAEC,GAAG,EAAE;IACzF,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IAExB,MAAM,EAAEG,IAAI,EAAE,GAAGT;IACjB,MAAM,CAACU,YAAYC,cAAc,GAAGd,SAASe;IAC7C,MAAMC,UAAU,UAAUP;IAE1B,MAAMQ,OAAO,CAAC,EAAEV,aAAa,CAAC,EAAEA,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,UAAUE,MAAMC,OAAO,GAAG,CAAC;IAChF,MAAMQ,iBAAiBL,aAAa;IAEpC,qBACE,oBAACd,MAAMoB,QAAQ,sBACb,oBAACjB;QAAiBkB,UAAUX,IAAIW,QAAQ;QAAEH,MAAMA;QAAMH,eAAeA;sBACrE,oBAACO;QACCC,WAAW;YACTlB;YACAc,kBAAkB,CAAC,EAAEd,UAAU,WAAW,CAAC;YAC3CE,YAAY,CAAC,EAAEF,UAAU,QAAQ,CAAC;SACnC,CACEmB,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,SAASlB;QACTmB,MAAK;OAEJhB,QAAQb,eAAea,OAAOC,QAAQI,WAAWN,MACjDQ,gCAAkB,oBAACjB;QAAU2B,OAAOf;QAAYD,MAAMA;;AAI/D,EAAC"}

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

@@ -0,0 +1,78 @@
+@import '../../../scss/styles.scss';
+
+.tabs-field__tab-button {
+  @extend %btn-reset;
+  @extend %h4;
+  display: flex;
+  padding-bottom: base(1);
+  margin: 0 $baseline 0 0;
+  cursor: pointer;
+  opacity: 0.5;
+  position: relative;
+  white-space: nowrap;
+  flex-shrink: 0;
+  gap: base(0.5);
+
+  &:last-child {
+    margin: 0;
+  }
+
+  &:after {
+    content: ' ';
+    position: absolute;
+    right: 0;
+    bottom: -1px;
+    left: 0;
+    height: 1px;
+    background: var(--theme-elevation-800);
+    opacity: 0;
+  }
+
+  &:hover {
+    opacity: 0.75;
+
+    &:after {
+      opacity: 0.2;
+    }
+  }
+
+  &--active {
+    opacity: 1 !important;
+
+    &:after {
+      opacity: 1 !important;
+      height: 2px;
+    }
+  }
+
+  &__description {
+    margin-bottom: calc(var(--base) / 2);
+  }
+
+  @include small-break {
+    margin: 0 base(0.75) 0 0;
+    padding-bottom: base(0.5);
+
+    &:last-child {
+      margin: 0;
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .tabs-field__tab-button--has-error {
+    color: var(--theme-error-750);
+    &:after {
+      background: var(--theme-error-500);
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .tabs-field__tab-button--has-error {
+    color: var(--theme-error-500);
+    &:after {
+      background: var(--theme-error-500);
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import type { FieldPermissions } from 'payload/auth';
+import React from 'react';
+import type { MappedTab } from '../../providers/ComponentMap/buildComponentMap/types.js';
+import type { FormFieldBase } from '../shared/index.js';
+import './index.scss';
+import { TabsProvider } from './provider.js';
+export { TabsProvider };
+export type TabsFieldProps = FormFieldBase & {
+    forceRender?: boolean;
+    indexPath: string;
+    name?: string;
+    path?: string;
+    permissions: FieldPermissions;
+    tabs?: MappedTab[];
+    width?: string;
+};
+export declare const Tabs: React.FC<TabsFieldProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAMpD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yDAAyD,CAAA;AACxF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAWvD,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAI5C,OAAO,EAAE,YAAY,EAAE,CAAA;AAEvB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,gBAAgB,CAAA;IAC7B,IAAI,CAAC,EAAE,SAAS,EAAE,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AA8ID,eAAO,MAAM,IAAI,0BAA2B,CAAA"}

package/dist/fields/Tabs/index.js

@@ -0,0 +1,111 @@
+'use client';
+import { getTranslation } from '@payloadcms/translations';
+import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
+import { toKebabCase } from 'payload/utilities';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useCollapsible } from '../../elements/Collapsible/provider.js';
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import { RenderFields } from '../../forms/RenderFields/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { usePreferences } from '../../providers/Preferences/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+import { TabComponent } from './Tab/index.js';
+import { TabsProvider } from './provider.js';
+const baseClass = 'tabs-field';
+export { TabsProvider };
+const TabsField = (props)=>{
+    const { name, CustomDescription, className, descriptionProps, forceRender = false, indexPath, path: pathFromProps, readOnly, tabs = [] } = props;
+    const { path: pathFromContext, permissions, schemaPath } = useFieldProps();
+    const path = pathFromContext || pathFromProps || name;
+    const { getPreference, setPreference } = usePreferences();
+    const { preferencesKey } = useDocumentInfo();
+    const { i18n } = useTranslation();
+    const isWithinCollapsible = useCollapsible();
+    const [activeTabIndex, setActiveTabIndex] = useState(0);
+    const tabsPrefKey = `tabs-${indexPath}`;
+    useEffect(()=>{
+        const getInitialPref = async ()=>{
+            const existingPreferences = await getPreference(preferencesKey);
+            const initialIndex = path ? existingPreferences?.fields?.[path]?.tabIndex : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex;
+            setActiveTabIndex(initialIndex || 0);
+        };
+        void getInitialPref();
+    }, [
+        path,
+        getPreference,
+        preferencesKey,
+        tabsPrefKey
+    ]);
+    const handleTabChange = useCallback(async (incomingTabIndex)=>{
+        setActiveTabIndex(incomingTabIndex);
+        const existingPreferences = await getPreference(preferencesKey);
+        void setPreference(preferencesKey, {
+            ...existingPreferences,
+            ...path ? {
+                fields: {
+                    ...existingPreferences?.fields || {},
+                    [path]: {
+                        ...existingPreferences?.fields?.[path],
+                        tabIndex: incomingTabIndex
+                    }
+                }
+            } : {
+                fields: {
+                    ...existingPreferences?.fields,
+                    [tabsPrefKey]: {
+                        ...existingPreferences?.fields?.[tabsPrefKey],
+                        tabIndex: incomingTabIndex
+                    }
+                }
+            }
+        });
+    }, [
+        preferencesKey,
+        getPreference,
+        setPreference,
+        path,
+        tabsPrefKey
+    ]);
+    const activeTabConfig = tabs[activeTabIndex];
+    return /*#__PURE__*/ React.createElement("div", {
+        className: [
+            fieldBaseClass,
+            className,
+            baseClass,
+            isWithinCollapsible && `${baseClass}--within-collapsible`
+        ].filter(Boolean).join(' ')
+    }, /*#__PURE__*/ React.createElement(TabsProvider, null, /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__tabs-wrap`
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__tabs`
+    }, tabs.map((tab, tabIndex)=>{
+        return /*#__PURE__*/ React.createElement(TabComponent, {
+            isActive: activeTabIndex === tabIndex,
+            key: tabIndex,
+            parentPath: path,
+            setIsActive: ()=>handleTabChange(tabIndex),
+            tab: tab
+        });
+    }))), /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__content-wrap`
+    }, activeTabConfig && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+        className: [
+            `${baseClass}__tab`,
+            activeTabConfig.label && `${baseClass}__tabConfigLabel-${toKebabCase(getTranslation(activeTabConfig.label, i18n))}`
+        ].filter(Boolean).join(' ')
+    }, CustomDescription ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {}), /*#__PURE__*/ React.createElement(RenderFields, {
+        fieldMap: activeTabConfig.fieldMap,
+        forceRender: forceRender,
+        key: activeTabConfig.label ? getTranslation(activeTabConfig.label, i18n) : activeTabConfig['name'],
+        margins: "small",
+        path: `${path ? `${path}.` : ''}${activeTabConfig.name ? `${activeTabConfig.name}` : ''}`,
+        permissions: 'name' in activeTabConfig && permissions?.fields?.[activeTabConfig.name]?.fields ? permissions?.fields?.[activeTabConfig.name]?.fields : permissions?.fields,
+        readOnly: readOnly,
+        schemaPath: `${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`
+    }))))));
+};
+export const Tabs = withCondition(TabsField);
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Tabs/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldPermissions } from 'payload/auth'\nimport type { DocumentPreferences } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { toKebabCase } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { MappedTab } from '../../providers/ComponentMap/buildComponentMap/types.js'\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { RenderFields } from '../../forms/RenderFields/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 { fieldBaseClass } from '../shared/index.js'\nimport { TabComponent } from './Tab/index.js'\nimport './index.scss'\nimport { TabsProvider } from './provider.js'\n\nconst baseClass = 'tabs-field'\n\nexport { TabsProvider }\n\nexport type TabsFieldProps = FormFieldBase & {\n  forceRender?: boolean\n  indexPath: string\n  name?: string\n  path?: string\n  permissions: FieldPermissions\n  tabs?: MappedTab[]\n  width?: string\n}\n\nconst TabsField: React.FC<TabsFieldProps> = (props) => {\n  const {\n    name,\n    CustomDescription,\n    className,\n    descriptionProps,\n    forceRender = false,\n    indexPath,\n    path: pathFromProps,\n    readOnly,\n    tabs = [],\n  } = props\n\n  const { path: pathFromContext, permissions, schemaPath } = useFieldProps()\n  const path = pathFromContext || pathFromProps || name\n  const { getPreference, setPreference } = usePreferences()\n  const { preferencesKey } = useDocumentInfo()\n  const { i18n } = useTranslation()\n  const isWithinCollapsible = useCollapsible()\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0)\n  const tabsPrefKey = `tabs-${indexPath}`\n\n  useEffect(() => {\n    const getInitialPref = async () => {\n      const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n      const initialIndex = path\n        ? existingPreferences?.fields?.[path]?.tabIndex\n        : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex\n      setActiveTabIndex(initialIndex || 0)\n    }\n    void getInitialPref()\n  }, [path, getPreference, preferencesKey, tabsPrefKey])\n\n  const handleTabChange = useCallback(\n    async (incomingTabIndex: number) => {\n      setActiveTabIndex(incomingTabIndex)\n\n      const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n\n      void setPreference(preferencesKey, {\n        ...existingPreferences,\n        ...(path\n          ? {\n              fields: {\n                ...(existingPreferences?.fields || {}),\n                [path]: {\n                  ...existingPreferences?.fields?.[path],\n                  tabIndex: incomingTabIndex,\n                },\n              },\n            }\n          : {\n              fields: {\n                ...existingPreferences?.fields,\n                [tabsPrefKey]: {\n                  ...existingPreferences?.fields?.[tabsPrefKey],\n                  tabIndex: incomingTabIndex,\n                },\n              },\n            }),\n      })\n    },\n    [preferencesKey, getPreference, setPreference, path, tabsPrefKey],\n  )\n\n  const activeTabConfig = tabs[activeTabIndex]\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        className,\n        baseClass,\n        isWithinCollapsible && `${baseClass}--within-collapsible`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <TabsProvider>\n        <div className={`${baseClass}__tabs-wrap`}>\n          <div className={`${baseClass}__tabs`}>\n            {tabs.map((tab, tabIndex) => {\n              return (\n                <TabComponent\n                  isActive={activeTabIndex === tabIndex}\n                  key={tabIndex}\n                  parentPath={path}\n                  setIsActive={() => handleTabChange(tabIndex)}\n                  tab={tab}\n                />\n              )\n            })}\n          </div>\n        </div>\n        <div className={`${baseClass}__content-wrap`}>\n          {activeTabConfig && (\n            <React.Fragment>\n              <div\n                className={[\n                  `${baseClass}__tab`,\n                  activeTabConfig.label &&\n                    `${baseClass}__tabConfigLabel-${toKebabCase(\n                      getTranslation(activeTabConfig.label, i18n),\n                    )}`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n              >\n                {CustomDescription ? (\n                  CustomDescription\n                ) : (\n                  <FieldDescription {...(descriptionProps || {})} />\n                )}\n                <RenderFields\n                  fieldMap={activeTabConfig.fieldMap}\n                  forceRender={forceRender}\n                  key={\n                    activeTabConfig.label\n                      ? getTranslation(activeTabConfig.label, i18n)\n                      : activeTabConfig['name']\n                  }\n                  margins=\"small\"\n                  path={`${path ? `${path}.` : ''}${activeTabConfig.name ? `${activeTabConfig.name}` : ''}`}\n                  permissions={\n                    'name' in activeTabConfig && permissions?.fields?.[activeTabConfig.name]?.fields\n                      ? permissions?.fields?.[activeTabConfig.name]?.fields\n                      : permissions?.fields\n                  }\n                  readOnly={readOnly}\n                  schemaPath={`${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`}\n                />\n              </div>\n            </React.Fragment>\n          )}\n        </div>\n      </TabsProvider>\n    </div>\n  )\n}\n\nexport const Tabs = withCondition(TabsField)\n"],"names":["getTranslation","FieldDescription","toKebabCase","React","useCallback","useEffect","useState","useCollapsible","useFieldProps","RenderFields","withCondition","useDocumentInfo","usePreferences","useTranslation","fieldBaseClass","TabComponent","TabsProvider","baseClass","TabsField","props","name","CustomDescription","className","descriptionProps","forceRender","indexPath","path","pathFromProps","readOnly","tabs","pathFromContext","permissions","schemaPath","getPreference","setPreference","preferencesKey","i18n","isWithinCollapsible","activeTabIndex","setActiveTabIndex","tabsPrefKey","getInitialPref","existingPreferences","initialIndex","fields","tabIndex","handleTabChange","incomingTabIndex","activeTabConfig","div","filter","Boolean","join","map","tab","isActive","key","parentPath","setIsActive","Fragment","label","fieldMap","margins","Tabs"],"mappings":"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"}

package/dist/fields/Tabs/index.scss

@@ -0,0 +1,61 @@
+@import '../../scss/styles.scss';
+
+.tabs-field {
+  margin-top: base(2);
+  margin-left: calc(var(--gutter-h) * -1);
+  margin-right: calc(var(--gutter-h) * -1);
+
+  &__content-wrap {
+    padding-left: var(--gutter-h);
+    padding-right: var(--gutter-h);
+  }
+
+  &--within-collapsible {
+    margin: 0 calc(#{$baseline} * -1);
+
+    .tabs-field__content-wrap {
+      padding-left: $baseline;
+      padding-right: $baseline;
+    }
+
+    .tabs-field__tabs {
+      &:before,
+      &:after {
+        content: ' ';
+        display: block;
+        width: $baseline;
+      }
+    }
+  }
+
+  &__tabs-wrap {
+    overflow: auto;
+    margin-bottom: $baseline;
+  }
+
+  &__tabs {
+    border-bottom: 1px solid var(--theme-elevation-100);
+    display: inline-flex;
+    min-width: 100%;
+    vertical-align: bottom;
+
+    &:before,
+    &:after {
+      content: ' ';
+      display: block;
+      width: var(--gutter-h);
+      flex-shrink: 0;
+    }
+  }
+
+  &__description {
+    margin-bottom: calc(var(--base) / 2);
+  }
+
+  @include small-break {
+    &--within-collapsible {
+      margin-left: calc(var(--gutter-h) * -1);
+      margin-right: calc(var(--gutter-h) * -1);
+    }
+  }
+}

package/dist/fields/Tabs/provider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const TabsProvider: React.FC<{
+    children?: React.ReactNode;
+    withinTab?: boolean;
+}>;
+export declare const useTabs: () => boolean;
+//# sourceMappingURL=provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAIxD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAKtF,CAAA;AAED,eAAO,MAAM,OAAO,QAAO,OAA8B,CAAA"}

package/dist/fields/Tabs/provider.js

@@ -0,0 +1,11 @@
+'use client';
+import React, { createContext, useContext } from 'react';
+const Context = /*#__PURE__*/ createContext(false);
+export const TabsProvider = ({ children, withinTab = true })=>{
+    return /*#__PURE__*/ React.createElement(Context.Provider, {
+        value: withinTab
+    }, children);
+};
+export const useTabs = ()=>useContext(Context);
+
+//# sourceMappingURL=provider.js.map

package/dist/fields/Tabs/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Tabs/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useContext } from 'react'\n\nconst Context = createContext(false)\n\nexport const TabsProvider: React.FC<{ children?: React.ReactNode; withinTab?: boolean }> = ({\n  children,\n  withinTab = true,\n}) => {\n  return <Context.Provider value={withinTab}>{children}</Context.Provider>\n}\n\nexport const useTabs = (): boolean => useContext(Context)\n"],"names":["React","createContext","useContext","Context","TabsProvider","children","withinTab","Provider","value","useTabs"],"mappings":"AAAA;AACA,OAAOA,SAASC,aAAa,EAAEC,UAAU,QAAQ,QAAO;AAExD,MAAMC,wBAAUF,cAAc;AAE9B,OAAO,MAAMG,eAA8E,CAAC,EAC1FC,QAAQ,EACRC,YAAY,IAAI,EACjB;IACC,qBAAO,oBAACH,QAAQI,QAAQ;QAACC,OAAOF;OAAYD;AAC9C,EAAC;AAED,OAAO,MAAMI,UAAU,IAAeP,WAAWC,SAAQ"}

package/dist/fields/Text/Input.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TextInputProps } from './types.js';
+import './index.scss';
+export declare const TextInput: React.FC<TextInputProps>;
+//# sourceMappingURL=Input.d.ts.map

package/dist/fields/Text/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/Input.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAKhD,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkG9C,CAAA"}

package/dist/fields/Text/Input.js

@@ -0,0 +1,70 @@
+'use client';
+import { getTranslation } from '@payloadcms/translations';
+import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
+import { FieldError } from '@payloadcms/ui/forms/FieldError';
+import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
+import React from 'react';
+import { ReactSelect } from '../../elements/ReactSelect/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+export const TextInput = (props)=>{
+    const { AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, hasMany, inputRef, labelProps, maxRows, onChange, onKeyDown, path, placeholder, readOnly, rtl, showError, style, value, valueToRender, width } = props;
+    const { i18n, t } = useTranslation();
+    return /*#__PURE__*/ React.createElement("div", {
+        className: [
+            fieldBaseClass,
+            'text',
+            className,
+            showError && 'error',
+            readOnly && 'read-only',
+            hasMany && 'has-many'
+        ].filter(Boolean).join(' '),
+        style: {
+            ...style,
+            width
+        }
+    }, /*#__PURE__*/ React.createElement(FieldError, {
+        CustomError: CustomError,
+        ...errorProps || {}
+    }), /*#__PURE__*/ React.createElement(FieldLabel, {
+        CustomLabel: CustomLabel,
+        ...labelProps || {}
+    }), hasMany ? /*#__PURE__*/ React.createElement(ReactSelect, {
+        className: `field-${path.replace(/\./g, '__')}`,
+        disabled: readOnly,
+        // prevent adding additional options if maxRows is reached
+        filterOption: ()=>!maxRows ? true : !(Array.isArray(value) && maxRows && value.length >= maxRows),
+        isClearable: true,
+        isCreatable: true,
+        isMulti: true,
+        isSortable: true,
+        noOptionsMessage: ()=>{
+            const isOverHasMany = Array.isArray(value) && value.length >= maxRows;
+            if (isOverHasMany) {
+                return t('validation:limitReached', {
+                    max: maxRows,
+                    value: value.length + 1
+                });
+            }
+            return null;
+        },
+        onChange: onChange,
+        options: [],
+        placeholder: t('general:enterAValue'),
+        showError: showError,
+        value: valueToRender
+    }) : /*#__PURE__*/ React.createElement("div", null, BeforeInput, /*#__PURE__*/ React.createElement("input", {
+        "data-rtl": rtl,
+        disabled: readOnly,
+        id: `field-${path?.replace(/\./g, '__')}`,
+        name: path,
+        onChange: onChange,
+        onKeyDown: onKeyDown,
+        placeholder: getTranslation(placeholder, i18n),
+        ref: inputRef,
+        type: "text",
+        value: value || ''
+    }), AfterInput), CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {}));
+};
+
+//# sourceMappingURL=Input.js.map