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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Text/Input.tsx"],"sourcesContent":["'use client'\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 from 'react'\n\nimport type { TextInputProps } from './types.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport const TextInput: React.FC<TextInputProps> = (props) => {\n  const {\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    hasMany,\n    inputRef,\n    labelProps,\n    maxRows,\n    onChange,\n    onKeyDown,\n    path,\n    placeholder,\n    readOnly,\n    rtl,\n    showError,\n    style,\n    value,\n    valueToRender,\n    width,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'text',\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n        hasMany && 'has-many',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldError CustomError={CustomError} {...(errorProps || {})} />\n      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />\n      {hasMany ? (\n        <ReactSelect\n          className={`field-${path.replace(/\\./g, '__')}`}\n          disabled={readOnly}\n          // prevent adding additional options if maxRows is reached\n          filterOption={() =>\n            !maxRows ? true : !(Array.isArray(value) && maxRows && value.length >= maxRows)\n          }\n          isClearable\n          isCreatable\n          isMulti\n          isSortable\n          noOptionsMessage={() => {\n            const isOverHasMany = Array.isArray(value) && value.length >= maxRows\n            if (isOverHasMany) {\n              return t('validation:limitReached', { max: maxRows, value: value.length + 1 })\n            }\n            return null\n          }}\n          onChange={onChange}\n          options={[]}\n          placeholder={t('general:enterAValue')}\n          showError={showError}\n          value={valueToRender}\n        />\n      ) : (\n        <div>\n          {BeforeInput}\n          <input\n            data-rtl={rtl}\n            disabled={readOnly}\n            id={`field-${path?.replace(/\\./g, '__')}`}\n            name={path}\n            onChange={onChange}\n            onKeyDown={onKeyDown}\n            placeholder={getTranslation(placeholder, i18n)}\n            ref={inputRef}\n            type=\"text\"\n            value={value || ''}\n          />\n          {AfterInput}\n        </div>\n      )}\n      {CustomDescription !== undefined ? (\n        CustomDescription\n      ) : (\n        <FieldDescription {...(descriptionProps || {})} />\n      )}\n    </div>\n  )\n}\n"],"names":["getTranslation","FieldDescription","FieldError","FieldLabel","React","ReactSelect","useTranslation","fieldBaseClass","TextInput","props","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","hasMany","inputRef","labelProps","maxRows","onChange","onKeyDown","path","placeholder","readOnly","rtl","showError","style","value","valueToRender","width","i18n","t","div","filter","Boolean","join","replace","disabled","filterOption","Array","isArray","length","isClearable","isCreatable","isMulti","isSortable","noOptionsMessage","isOverHasMany","max","options","input","data-rtl","id","name","ref","type","undefined"],"mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,gBAAgB,QAAQ,wCAAuC;AACxE,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,OAAOC,WAAW,QAAO;AAIzB,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,qBAAoB;AAGnD,OAAO,MAAMC,YAAsC,CAACC;IAClD,MAAM,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,GAAG,EACHC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,aAAa,EACbC,KAAK,EACN,GAAGvB;IAEJ,MAAM,EAAEwB,IAAI,EAAEC,CAAC,EAAE,GAAG5B;IAEpB,qBACE,oBAAC6B;QACCpB,WAAW;YACTR;YACA;YACAQ;YACAa,aAAa;YACbF,YAAY;YACZR,WAAW;SACZ,CACEkB,MAAM,CAACC,SACPC,IAAI,CAAC;QACRT,OAAO;YACL,GAAGA,KAAK;YACRG;QACF;qBAEA,oBAAC9B;QAAWW,aAAaA;QAAc,GAAII,cAAc,CAAC,CAAC;sBAC3D,oBAACd;QAAWW,aAAaA;QAAc,GAAIM,cAAc,CAAC,CAAC;QAC1DF,wBACC,oBAACb;QACCU,WAAW,CAAC,MAAM,EAAES,KAAKe,OAAO,CAAC,OAAO,MAAM,CAAC;QAC/CC,UAAUd;QACV,0DAA0D;QAC1De,cAAc,IACZ,CAACpB,UAAU,OAAO,CAAEqB,CAAAA,MAAMC,OAAO,CAACb,UAAUT,WAAWS,MAAMc,MAAM,IAAIvB,OAAM;QAE/EwB,aAAAA;QACAC,aAAAA;QACAC,SAAAA;QACAC,YAAAA;QACAC,kBAAkB;YAChB,MAAMC,gBAAgBR,MAAMC,OAAO,CAACb,UAAUA,MAAMc,MAAM,IAAIvB;YAC9D,IAAI6B,eAAe;gBACjB,OAAOhB,EAAE,2BAA2B;oBAAEiB,KAAK9B;oBAASS,OAAOA,MAAMc,MAAM,GAAG;gBAAE;YAC9E;YACA,OAAO;QACT;QACAtB,UAAUA;QACV8B,SAAS,EAAE;QACX3B,aAAaS,EAAE;QACfN,WAAWA;QACXE,OAAOC;uBAGT,oBAACI,aACExB,2BACD,oBAAC0C;QACCC,YAAU3B;QACVa,UAAUd;QACV6B,IAAI,CAAC,MAAM,EAAE/B,MAAMe,QAAQ,OAAO,MAAM,CAAC;QACzCiB,MAAMhC;QACNF,UAAUA;QACVC,WAAWA;QACXE,aAAazB,eAAeyB,aAAaQ;QACzCwB,KAAKtC;QACLuC,MAAK;QACL5B,OAAOA,SAAS;QAEjBpB,aAGJE,sBAAsB+C,YACrB/C,kCAEA,oBAACX,kBAAsBe,oBAAoB,CAAC;AAIpD,EAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAOhE,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AACtC,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,CAAA;AAmIpD,eAAO,MAAM,IAAI,0BAA2B,CAAA"}

package/dist/fields/Text/index.js

@@ -0,0 +1,107 @@
+'use client';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useLocale } from '../../providers/Locale/index.js';
+import { isFieldRTL } from '../shared/index.js';
+import { TextInput } from './Input.js';
+export { TextInput };
+const TextField = (props)=>{
+    const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, hasMany, inputRef, labelProps, localized, maxLength, maxRows, minLength, minRows, path: pathFromProps, placeholder, required, rtl, style, validate, width } = props;
+    const locale = useLocale();
+    const { localization: localizationConfig } = useConfig();
+    const memoizedValidate = useCallback((value, options)=>{
+        if (typeof validate === 'function') return validate(value, {
+            ...options,
+            maxLength,
+            minLength,
+            required
+        });
+    }, [
+        validate,
+        minLength,
+        maxLength,
+        required
+    ]);
+    const { path, readOnly, setValue, showError, value } = useField({
+        path: pathFromProps || name,
+        validate: memoizedValidate
+    });
+    const renderRTL = isFieldRTL({
+        fieldLocalized: localized,
+        fieldRTL: rtl,
+        locale,
+        localizationConfig: localizationConfig || undefined
+    });
+    const [valueToRender, setValueToRender] = useState([]) // Only for hasMany
+    ;
+    const handleHasManyChange = useCallback((selectedOption)=>{
+        if (!readOnly) {
+            let newValue;
+            if (!selectedOption) {
+                newValue = [];
+            } else if (Array.isArray(selectedOption)) {
+                newValue = selectedOption.map((option)=>option.value?.value || option.value);
+            } else {
+                newValue = [
+                    selectedOption.value?.value || selectedOption.value
+                ];
+            }
+            setValue(newValue);
+        }
+    }, [
+        readOnly,
+        setValue
+    ]);
+    // useEffect update valueToRender:
+    useEffect(()=>{
+        if (hasMany && Array.isArray(value)) {
+            setValueToRender(value.map((val, index)=>{
+                return {
+                    id: `${val}${index}`,
+                    label: `${val}`,
+                    value: {
+                        // React-select automatically uses "label-value" as a key, so we will get that react duplicate key warning if we just pass in the value as multiple values can be the same. So we need to append the index to the toString() of the value to avoid that warning, as it uses that as the key.
+                        toString: ()=>`${val}${index}`,
+                        value: val?.value || val
+                    }
+                };
+            }));
+        }
+    }, [
+        value,
+        hasMany
+    ]);
+    return /*#__PURE__*/ React.createElement(TextInput, {
+        AfterInput: AfterInput,
+        BeforeInput: BeforeInput,
+        CustomDescription: CustomDescription,
+        CustomError: CustomError,
+        CustomLabel: CustomLabel,
+        className: className,
+        descriptionProps: descriptionProps,
+        errorProps: errorProps,
+        hasMany: hasMany,
+        inputRef: inputRef,
+        labelProps: labelProps,
+        maxRows: maxRows,
+        minRows: minRows,
+        onChange: hasMany ? handleHasManyChange : (e)=>{
+            setValue(e.target.value);
+        },
+        path: path,
+        placeholder: placeholder,
+        readOnly: readOnly,
+        required: required,
+        rtl: renderRTL,
+        showError: showError,
+        style: style,
+        value: value || '',
+        valueToRender: valueToRender,
+        width: width
+    });
+};
+export const Text = withCondition(TextField);
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Text/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientValidate } from 'payload/types'\nimport type {} from 'payload/types'\n\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { Option } from '../../elements/ReactSelect/types.js'\nimport type { TextFieldProps, TextInputProps } from './types.js'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { isFieldRTL } from '../shared/index.js'\nimport { TextInput } from './Input.js'\nimport './index.scss'\n\nexport { TextFieldProps, TextInput, TextInputProps }\n\nconst TextField: React.FC<TextFieldProps> = (props) => {\n  const {\n    name,\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    hasMany,\n    inputRef,\n    labelProps,\n    localized,\n    maxLength,\n    maxRows,\n    minLength,\n    minRows,\n    path: pathFromProps,\n    placeholder,\n    required,\n    rtl,\n    style,\n    validate,\n    width,\n  } = props\n\n  const locale = useLocale()\n\n  const { localization: localizationConfig } = useConfig()\n\n  const memoizedValidate: ClientValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function')\n        return validate(value, { ...options, maxLength, minLength, required })\n    },\n    [validate, minLength, maxLength, required],\n  )\n\n  const { path, readOnly, setValue, showError, value } = useField({\n    path: pathFromProps || name,\n    validate: memoizedValidate,\n  })\n\n  const renderRTL = isFieldRTL({\n    fieldLocalized: localized,\n    fieldRTL: rtl,\n    locale,\n    localizationConfig: localizationConfig || undefined,\n  })\n\n  const [valueToRender, setValueToRender] = useState<\n    { id: string; label: string; value: { value: number } }[]\n  >([]) // Only for hasMany\n\n  const handleHasManyChange = useCallback(\n    (selectedOption) => {\n      if (!readOnly) {\n        let newValue\n        if (!selectedOption) {\n          newValue = []\n        } else if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => option.value?.value || option.value)\n        } else {\n          newValue = [selectedOption.value?.value || selectedOption.value]\n        }\n\n        setValue(newValue)\n      }\n    },\n    [readOnly, setValue],\n  )\n\n  // useEffect update valueToRender:\n  useEffect(() => {\n    if (hasMany && Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              // React-select automatically uses \"label-value\" as a key, so we will get that react duplicate key warning if we just pass in the value as multiple values can be the same. So we need to append the index to the toString() of the value to avoid that warning, as it uses that as the key.\n              toString: () => `${val}${index}`,\n              value: val?.value || val,\n            },\n          }\n        }),\n      )\n    }\n  }, [value, hasMany])\n\n  return (\n    <TextInput\n      AfterInput={AfterInput}\n      BeforeInput={BeforeInput}\n      CustomDescription={CustomDescription}\n      CustomError={CustomError}\n      CustomLabel={CustomLabel}\n      className={className}\n      descriptionProps={descriptionProps}\n      errorProps={errorProps}\n      hasMany={hasMany}\n      inputRef={inputRef}\n      labelProps={labelProps}\n      maxRows={maxRows}\n      minRows={minRows}\n      onChange={\n        hasMany\n          ? handleHasManyChange\n          : (e) => {\n              setValue(e.target.value)\n            }\n      }\n      path={path}\n      placeholder={placeholder}\n      readOnly={readOnly}\n      required={required}\n      rtl={renderRTL}\n      showError={showError}\n      style={style}\n      value={(value as string) || ''}\n      valueToRender={valueToRender as Option[]}\n      width={width}\n    />\n  )\n}\n\nexport const Text = withCondition(TextField)\n"],"names":["React","useCallback","useEffect","useState","useField","withCondition","useConfig","useLocale","isFieldRTL","TextInput","TextField","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","hasMany","inputRef","labelProps","localized","maxLength","maxRows","minLength","minRows","path","pathFromProps","placeholder","required","rtl","style","validate","width","locale","localization","localizationConfig","memoizedValidate","value","options","readOnly","setValue","showError","renderRTL","fieldLocalized","fieldRTL","undefined","valueToRender","setValueToRender","handleHasManyChange","selectedOption","newValue","Array","isArray","map","option","val","index","id","label","toString","onChange","e","target","Text"],"mappings":"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"}

package/dist/fields/Text/index.scss

@@ -0,0 +1,31 @@
+@import '../../scss/styles.scss';
+
+.field-type.text {
+  position: relative;
+
+  &:not(.has-many) {
+    input {
+      @include formInput;
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .field-type.text {
+    &.error {
+      input {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .field-type.text {
+    &.error {
+      input {
+        @include darkInputError;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+import type { FieldBase, TextField } from 'payload/types';
+import type { ChangeEvent } from 'react';
+import type { Option } from '../../elements/ReactSelect/types.js';
+import type { FormFieldBase } from '../shared/index.js';
+export type TextFieldProps = FormFieldBase & {
+    hasMany?: boolean;
+    inputRef?: React.MutableRefObject<HTMLInputElement>;
+    label?: FieldBase['label'];
+    maxLength?: number;
+    maxRows?: number;
+    minLength?: number;
+    minRows?: number;
+    name?: string;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    path?: string;
+    placeholder?: TextField['admin']['placeholder'];
+    width?: string;
+};
+export type TextInputProps = Omit<TextFieldProps, 'type'> & {
+    hasMany?: boolean;
+    inputRef?: React.MutableRefObject<HTMLInputElement>;
+    maxRows?: number;
+    minRows?: number;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    showError?: boolean;
+    value?: string;
+    valueToRender?: Option[];
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAEvD,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAA;IACxD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAA;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;IACnD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAA;IACxD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;CACzB,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Text/types.ts"],"sourcesContent":["import type { FieldBase, TextField } from 'payload/types'\nimport type { ChangeEvent } from 'react'\n\nimport type { Option } from '../../elements/ReactSelect/types.js'\nimport type { FormFieldBase } from '../shared/index.js'\n\nexport type TextFieldProps = FormFieldBase & {\n  hasMany?: boolean\n  inputRef?: React.MutableRefObject<HTMLInputElement>\n  label?: FieldBase['label']\n  maxLength?: number\n  maxRows?: number\n  minLength?: number\n  minRows?: number\n  name?: string\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>\n  path?: string\n  placeholder?: TextField['admin']['placeholder']\n  width?: string\n}\n\nexport type TextInputProps = Omit<TextFieldProps, 'type'> & {\n  hasMany?: boolean\n  inputRef?: React.MutableRefObject<HTMLInputElement>\n  maxRows?: number\n  minRows?: number\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>\n  showError?: boolean\n  value?: string\n  valueToRender?: Option[]\n}\n"],"names":[],"mappings":"AAqBA,WAUC"}

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

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

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

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

package/dist/fields/Textarea/Input.js

@@ -0,0 +1,51 @@
+'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 { useTranslation } from '../../providers/Translation/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+export const TextareaInput = (props)=>{
+    const { AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, labelProps, onChange, path, placeholder, readOnly, rows, rtl, showError, style, value, width } = props;
+    const { i18n } = useTranslation();
+    return /*#__PURE__*/ React.createElement("div", {
+        className: [
+            fieldBaseClass,
+            'textarea',
+            className,
+            showError && 'error',
+            readOnly && 'read-only'
+        ].filter(Boolean).join(' '),
+        style: {
+            ...style,
+            width
+        }
+    }, /*#__PURE__*/ React.createElement(FieldError, {
+        CustomError: CustomError,
+        ...errorProps || {}
+    }), /*#__PURE__*/ React.createElement(FieldLabel, {
+        CustomLabel: CustomLabel,
+        ...labelProps || {}
+    }), BeforeInput, /*#__PURE__*/ React.createElement("label", {
+        className: "textarea-outer",
+        htmlFor: `field-${path.replace(/\./g, '__')}`
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "textarea-inner"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "textarea-clone",
+        "data-value": value || placeholder || ''
+    }), /*#__PURE__*/ React.createElement("textarea", {
+        className: "textarea-element",
+        "data-rtl": rtl,
+        disabled: readOnly,
+        id: `field-${path.replace(/\./g, '__')}`,
+        name: path,
+        onChange: onChange,
+        placeholder: getTranslation(placeholder, i18n),
+        rows: rows,
+        value: value || ''
+    }))), AfterInput, CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {}));
+};
+
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Textarea/Input.tsx"],"sourcesContent":["'use client'\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 from 'react'\n\nimport type { TextAreaInputProps } from './types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport const TextareaInput: React.FC<TextAreaInputProps> = (props) => {\n  const {\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    labelProps,\n    onChange,\n    path,\n    placeholder,\n    readOnly,\n    rows,\n    rtl,\n    showError,\n    style,\n    value,\n    width,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'textarea',\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldError CustomError={CustomError} {...(errorProps || {})} />\n      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />\n      {BeforeInput}\n      <label className=\"textarea-outer\" htmlFor={`field-${path.replace(/\\./g, '__')}`}>\n        <div className=\"textarea-inner\">\n          <div className=\"textarea-clone\" data-value={value || placeholder || ''} />\n          <textarea\n            className=\"textarea-element\"\n            data-rtl={rtl}\n            disabled={readOnly}\n            id={`field-${path.replace(/\\./g, '__')}`}\n            name={path}\n            onChange={onChange}\n            placeholder={getTranslation(placeholder, i18n)}\n            rows={rows}\n            value={value || ''}\n          />\n        </div>\n      </label>\n      {AfterInput}\n      {CustomDescription !== undefined ? (\n        CustomDescription\n      ) : (\n        <FieldDescription {...(descriptionProps || {})} />\n      )}\n    </div>\n  )\n}\n"],"names":["getTranslation","FieldDescription","FieldError","FieldLabel","React","useTranslation","fieldBaseClass","TextareaInput","props","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","labelProps","onChange","path","placeholder","readOnly","rows","rtl","showError","style","value","width","i18n","div","filter","Boolean","join","label","htmlFor","replace","data-value","textarea","data-rtl","disabled","id","name","undefined"],"mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,gBAAgB,QAAQ,wCAAuC;AACxE,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,OAAOC,WAAW,QAAO;AAIzB,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,qBAAoB;AAGnD,OAAO,MAAMC,gBAA8C,CAACC;IAC1D,MAAM,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,EACVC,QAAQ,EACRC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,GAAG,EACHC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,KAAK,EACN,GAAGnB;IAEJ,MAAM,EAAEoB,IAAI,EAAE,GAAGvB;IAEjB,qBACE,oBAACwB;QACCf,WAAW;YACTR;YACA;YACAQ;YACAU,aAAa;YACbH,YAAY;SACb,CACES,MAAM,CAACC,SACPC,IAAI,CAAC;QACRP,OAAO;YACL,GAAGA,KAAK;YACRE;QACF;qBAEA,oBAACzB;QAAWU,aAAaA;QAAc,GAAII,cAAc,CAAC,CAAC;sBAC3D,oBAACb;QAAWU,aAAaA;QAAc,GAAII,cAAc,CAAC,CAAC;QAC1DP,2BACD,oBAACuB;QAAMnB,WAAU;QAAiBoB,SAAS,CAAC,MAAM,EAAEf,KAAKgB,OAAO,CAAC,OAAO,MAAM,CAAC;qBAC7E,oBAACN;QAAIf,WAAU;qBACb,oBAACe;QAAIf,WAAU;QAAiBsB,cAAYV,SAASN,eAAe;sBACpE,oBAACiB;QACCvB,WAAU;QACVwB,YAAUf;QACVgB,UAAUlB;QACVmB,IAAI,CAAC,MAAM,EAAErB,KAAKgB,OAAO,CAAC,OAAO,MAAM,CAAC;QACxCM,MAAMtB;QACND,UAAUA;QACVE,aAAapB,eAAeoB,aAAaQ;QACzCN,MAAMA;QACNI,OAAOA,SAAS;UAIrBjB,YACAE,sBAAsB+B,YACrB/B,kCAEA,oBAACV,kBAAsBc,oBAAoB,CAAC;AAIpD,EAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Textarea/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAOxE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA;AAgFhE,eAAO,MAAM,QAAQ,8BAA+B,CAAA"}

package/dist/fields/Textarea/index.js

@@ -0,0 +1,65 @@
+/* eslint-disable react/destructuring-assignment */ 'use client';
+import { getTranslation } from '@payloadcms/translations';
+import React, { useCallback } from 'react';
+import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { isFieldRTL } from '../shared/index.js';
+import { TextareaInput } from './Input.js';
+export { TextareaInput };
+const TextareaField = (props)=>{
+    const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, labelProps, locale, localized, maxLength, minLength, path: pathFromProps, placeholder, required, rows, rtl, style, validate, width } = props;
+    const { i18n } = useTranslation();
+    const { localization } = useConfig();
+    const isRTL = isFieldRTL({
+        fieldLocalized: localized,
+        fieldRTL: rtl,
+        locale,
+        localizationConfig: localization || undefined
+    });
+    const memoizedValidate = useCallback((value, options)=>{
+        if (typeof validate === 'function') return validate(value, {
+            ...options,
+            maxLength,
+            minLength,
+            required
+        });
+    }, [
+        validate,
+        required,
+        maxLength,
+        minLength
+    ]);
+    const { path, readOnly, setValue, showError, value } = useField({
+        path: pathFromProps || name,
+        validate: memoizedValidate
+    });
+    return /*#__PURE__*/ React.createElement(TextareaInput, {
+        AfterInput: AfterInput,
+        BeforeInput: BeforeInput,
+        CustomDescription: CustomDescription,
+        CustomError: CustomError,
+        CustomLabel: CustomLabel,
+        className: className,
+        descriptionProps: descriptionProps,
+        errorProps: errorProps,
+        labelProps: labelProps,
+        onChange: (e)=>{
+            setValue(e.target.value);
+        },
+        path: path,
+        placeholder: getTranslation(placeholder, i18n),
+        readOnly: readOnly,
+        required: required,
+        rows: rows,
+        rtl: isRTL,
+        showError: showError,
+        style: style,
+        value: value,
+        width: width
+    });
+};
+export const Textarea = withCondition(TextareaField);
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Textarea/index.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n'use client'\nimport type { ClientValidate } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback } from 'react'\n\nimport type { TextAreaInputProps, TextareaFieldProps } from './types.js'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { isFieldRTL } from '../shared/index.js'\nimport { TextareaInput } from './Input.js'\nimport './index.scss'\n\nexport { TextAreaInputProps, TextareaFieldProps, TextareaInput }\n\nconst TextareaField: React.FC<TextareaFieldProps> = (props) => {\n  const {\n    name,\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    labelProps,\n    locale,\n    localized,\n    maxLength,\n    minLength,\n    path: pathFromProps,\n    placeholder,\n    required,\n    rows,\n    rtl,\n    style,\n    validate,\n    width,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const { localization } = useConfig()\n\n  const isRTL = isFieldRTL({\n    fieldLocalized: localized,\n    fieldRTL: rtl,\n    locale,\n    localizationConfig: localization || undefined,\n  })\n\n  const memoizedValidate: ClientValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function')\n        return validate(value, { ...options, maxLength, minLength, required })\n    },\n    [validate, required, maxLength, minLength],\n  )\n\n  const { path, readOnly, setValue, showError, value } = useField<string>({\n    path: pathFromProps || name,\n    validate: memoizedValidate,\n  })\n\n  return (\n    <TextareaInput\n      AfterInput={AfterInput}\n      BeforeInput={BeforeInput}\n      CustomDescription={CustomDescription}\n      CustomError={CustomError}\n      CustomLabel={CustomLabel}\n      className={className}\n      descriptionProps={descriptionProps}\n      errorProps={errorProps}\n      labelProps={labelProps}\n      onChange={(e) => {\n        setValue(e.target.value)\n      }}\n      path={path}\n      placeholder={getTranslation(placeholder, i18n)}\n      readOnly={readOnly}\n      required={required}\n      rows={rows}\n      rtl={isRTL}\n      showError={showError}\n      style={style}\n      value={value}\n      width={width}\n    />\n  )\n}\n\nexport const Textarea = withCondition(TextareaField)\n"],"names":["getTranslation","React","useCallback","useField","withCondition","useConfig","useTranslation","isFieldRTL","TextareaInput","TextareaField","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","labelProps","locale","localized","maxLength","minLength","path","pathFromProps","placeholder","required","rows","rtl","style","validate","width","i18n","localization","isRTL","fieldLocalized","fieldRTL","localizationConfig","undefined","memoizedValidate","value","options","readOnly","setValue","showError","onChange","e","target","Textarea"],"mappings":"AAAA,iDAAiD,GACjD;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAI1C,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,UAAU,QAAQ,qBAAoB;AAC/C,SAASC,aAAa,QAAQ,aAAY;AAG1C,SAAiDA,aAAa,GAAE;AAEhE,MAAMC,gBAA8C,CAACC;IACnD,MAAM,EACJC,IAAI,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,MAAMC,aAAa,EACnBC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,GAAG,EACHC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACN,GAAGvB;IAEJ,MAAM,EAAEwB,IAAI,EAAE,GAAG5B;IAEjB,MAAM,EAAE6B,YAAY,EAAE,GAAG9B;IAEzB,MAAM+B,QAAQ7B,WAAW;QACvB8B,gBAAgBf;QAChBgB,UAAUR;QACVT;QACAkB,oBAAoBJ,gBAAgBK;IACtC;IAEA,MAAMC,mBAAmCvC,YACvC,CAACwC,OAAOC;QACN,IAAI,OAAOX,aAAa,YACtB,OAAOA,SAASU,OAAO;YAAE,GAAGC,OAAO;YAAEpB;YAAWC;YAAWI;QAAS;IACxE,GACA;QAACI;QAAUJ;QAAUL;QAAWC;KAAU;IAG5C,MAAM,EAAEC,IAAI,EAAEmB,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,EAAEJ,KAAK,EAAE,GAAGvC,SAAiB;QACtEsB,MAAMC,iBAAiBf;QACvBqB,UAAUS;IACZ;IAEA,qBACE,oBAACjC;QACCI,YAAYA;QACZC,aAAaA;QACbC,mBAAmBA;QACnBC,aAAaA;QACbC,aAAaA;QACbC,WAAWA;QACXC,kBAAkBA;QAClBC,YAAYA;QACZC,YAAYA;QACZ2B,UAAU,CAACC;YACTH,SAASG,EAAEC,MAAM,CAACP,KAAK;QACzB;QACAjB,MAAMA;QACNE,aAAa3B,eAAe2B,aAAaO;QACzCU,UAAUA;QACVhB,UAAUA;QACVC,MAAMA;QACNC,KAAKM;QACLU,WAAWA;QACXf,OAAOA;QACPW,OAAOA;QACPT,OAAOA;;AAGb;AAEA,OAAO,MAAMiB,WAAW9C,cAAcK,eAAc"}

package/dist/fields/Textarea/index.scss

@@ -0,0 +1,118 @@
+@import '../../scss/styles.scss';
+
+.field-type.textarea {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  .textarea-outer {
+    @include formInput();
+    display: flex;
+    resize: vertical;
+    min-height: base(3);
+    height: 100%;
+
+    // Scrollbar for giant content
+    max-height: calc(100vh - $top-header-offset - calc(#{base(5)}));
+    overflow: hidden;
+
+    @include mid-break {
+      max-height: 60vh;
+    }
+  }
+
+  &.read-only {
+    .textarea-outer {
+      background: var(--theme-elevation-200);
+      color: var(--theme-elevation-450);
+      &:hover {
+        border-color: var(--theme-elevation-150);
+        @include shadow-sm;
+      }
+    }
+  }
+
+  // This element takes exactly the same dimensions as the clone
+  .textarea-inner {
+    display: block;
+    position: relative;
+    line-height: inherit;
+    flex-grow: 1;
+    background: none;
+    outline: none;
+  }
+
+  // Unstyle the textarea, the border is rendered on .textarea-outer
+  .textarea-element {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: inherit;
+    padding: inherit;
+    font: inherit;
+    line-height: inherit;
+    color: inherit;
+    background: none;
+    overflow: auto;
+    resize: none;
+    outline: none;
+    text-transform: inherit;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    &[data-rtl='true'] {
+      direction: rtl;
+    }
+  }
+
+  // Clone of textarea with same height
+  .textarea-clone {
+    vertical-align: top;
+    display: inline-block;
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre-wrap;
+    pointer-events: none;
+  }
+
+  .textarea-clone::before {
+    content: attr(data-value) ' ';
+    visibility: hidden;
+    opacity: 0;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+
+  .textarea-clone::after {
+    content: attr(data-after);
+    opacity: 0.5;
+  }
+
+  @include mid-break {
+    padding: 0;
+  }
+}
+
+html[data-theme='light'] {
+  .field-type.textarea {
+    &.error {
+      .textarea-outer {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .field-type.textarea {
+    &.error {
+      .textarea-outer {
+        @include darkInputError;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+import type { FieldBase, TextareaField as TextareaFieldType } from 'payload/types';
+import { type ChangeEvent } from 'react';
+import type { FormFieldBase } from '../shared/index.js';
+export type TextareaFieldProps = FormFieldBase & {
+    label?: FieldBase['label'];
+    maxLength?: number;
+    minLength?: number;
+    name?: string;
+    path?: string;
+    placeholder?: TextareaFieldType['admin']['placeholder'];
+    rows?: number;
+    width?: string;
+};
+export type TextAreaInputProps = TextareaFieldProps & {
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    rows?: number;
+    showError?: boolean;
+    value?: string;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/Textarea/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAElF,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAEvD,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAA;IACvD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,GAAG;IACpD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IACxD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Textarea/types.ts"],"sourcesContent":["import type { FieldBase, TextareaField as TextareaFieldType } from 'payload/types'\n\nimport { type ChangeEvent } from 'react'\n\nimport type { FormFieldBase } from '../shared/index.js'\n\nexport type TextareaFieldProps = FormFieldBase & {\n  label?: FieldBase['label']\n  maxLength?: number\n  minLength?: number\n  name?: string\n  path?: string\n  placeholder?: TextareaFieldType['admin']['placeholder']\n  rows?: number\n  width?: string\n}\n\nexport type TextAreaInputProps = TextareaFieldProps & {\n  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void\n  rows?: number\n  showError?: boolean\n  value?: string\n}\n"],"names":[],"mappings":"AAiBA,WAKC"}

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

@@ -0,0 +1,3 @@
+import type React from 'react';
+export declare const UI: React.FC;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/UI/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,eAAO,MAAM,EAAE,EAAE,KAAK,CAAC,EAEtB,CAAA"}

package/dist/fields/UI/index.js

@@ -0,0 +1,5 @@
+export const UI = ()=>{
+    return null;
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/UI/index.tsx"],"sourcesContent":["import type React from 'react'\n\nexport const UI: React.FC = () => {\n  return null\n}\n"],"names":["UI"],"mappings":"AAEA,OAAO,MAAMA,KAAe;IAC1B,OAAO;AACT,EAAC"}

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

@@ -0,0 +1,16 @@
+import type { ClientCollectionConfig, FilterOptionsResult, UploadField } from 'payload/types';
+import React from 'react';
+import type { UploadFieldProps } from './types.js';
+import './index.scss';
+export type UploadInputProps = Omit<UploadFieldProps, 'filterOptions'> & {
+    api?: string;
+    collection?: ClientCollectionConfig;
+    filterOptions?: FilterOptionsResult;
+    onChange?: (e: any) => void;
+    relationTo?: UploadField['relationTo'];
+    serverURL?: string;
+    showError?: boolean;
+    value?: string;
+};
+export declare const UploadInput: React.FC<UploadInputProps>;
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Upload/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAM7F,OAAO,KAA2C,MAAM,OAAO,CAAA;AAI/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAQlD,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,GAAG;IACvE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAA;IACtB,UAAU,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoJlD,CAAA"}