@payloadcms/ui 3.0.0-alpha.8 → 3.0.0-beta.0

package/dist/fields/Code/index.scss

@@ -0,0 +1,36 @@
+@import '../../scss/styles.scss';
+
+.code-field {
+  position: relative;
+
+  &.error {
+    textarea {
+      border: 1px solid var(--theme-error-500) !important;
+    }
+    .code-editor {
+      border-color: var(--theme-error-500);
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .code-field {
+    &.error {
+      .monaco-editor-background,
+      .margin {
+        background-color: var(--theme-error-50);
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .code-field {
+    &.error {
+      .monaco-editor-background,
+      .margin {
+        background-color: var(--theme-error-100);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import type { FieldBase } from 'payload/types';
+import React from 'react';
+import './index.scss';
+import type { FieldPermissions } from 'payload/auth';
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js';
+import type { FormFieldBase } from '../shared/index.js';
+export type CollapsibleFieldProps = FormFieldBase & {
+    fieldMap: FieldMap;
+    initCollapsed?: boolean;
+    label?: FieldBase['label'];
+    permissions: FieldPermissions;
+    width?: string;
+};
+export declare const Collapsible: React.FC<CollapsibleFieldProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAuB,SAAS,EAAE,MAAM,eAAe,CAAA;AAEnE,OAAO,KAAqD,MAAM,OAAO,CAAA;AAazE,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAIpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yDAAyD,CAAA;AACvF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAEvD,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD,QAAQ,EAAE,QAAQ,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,WAAW,EAAE,gBAAgB,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAkID,eAAO,MAAM,WAAW,iCAAkC,CAAA"}

package/dist/fields/Collapsible/index.js

@@ -0,0 +1,121 @@
+'use client';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import { Collapsible as CollapsibleElement } from '../../elements/Collapsible/index.js';
+import { ErrorPill } from '../../elements/ErrorPill/index.js';
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import { RenderFields } from '../../forms/RenderFields/index.js';
+import { RowLabel } from '../../forms/RowLabel/index.js';
+import { WatchChildErrors } from '../../forms/WatchChildErrors/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';
+const baseClass = 'collapsible-field';
+import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
+const CollapsibleField = (props)=>{
+    const { CustomDescription, CustomLabel, className, descriptionProps, fieldMap, initCollapsed = false, labelProps, path: pathFromProps, readOnly: readOnlyFromProps } = props;
+    const { indexPath, path: pathFromContext, readOnly: readOnlyFromContext, schemaPath, siblingPermissions } = useFieldProps();
+    const path = pathFromContext || pathFromProps;
+    const { i18n } = useTranslation();
+    const { getPreference, setPreference } = usePreferences();
+    const { preferencesKey } = useDocumentInfo();
+    const [collapsedOnMount, setCollapsedOnMount] = useState();
+    const fieldPreferencesKey = `collapsible-${indexPath.replace(/\./g, '__')}`;
+    const [errorCount, setErrorCount] = useState(0);
+    const fieldHasErrors = errorCount > 0;
+    const onToggle = useCallback(async (newCollapsedState)=>{
+        const existingPreferences = await getPreference(preferencesKey);
+        void setPreference(preferencesKey, {
+            ...existingPreferences,
+            ...path ? {
+                fields: {
+                    ...existingPreferences?.fields || {},
+                    [path]: {
+                        ...existingPreferences?.fields?.[path],
+                        collapsed: newCollapsedState
+                    }
+                }
+            } : {
+                fields: {
+                    ...existingPreferences?.fields || {},
+                    [fieldPreferencesKey]: {
+                        ...existingPreferences?.fields?.[fieldPreferencesKey],
+                        collapsed: newCollapsedState
+                    }
+                }
+            }
+        });
+    }, [
+        preferencesKey,
+        fieldPreferencesKey,
+        getPreference,
+        setPreference,
+        path
+    ]);
+    useEffect(()=>{
+        const fetchInitialState = async ()=>{
+            const preferences = await getPreference(preferencesKey);
+            if (preferences) {
+                const initCollapsedFromPref = path ? preferences?.fields?.[path]?.collapsed : preferences?.fields?.[fieldPreferencesKey]?.collapsed;
+                setCollapsedOnMount(Boolean(initCollapsedFromPref));
+            } else {
+                setCollapsedOnMount(typeof initCollapsed === 'boolean' ? initCollapsed : false);
+            }
+        };
+        void fetchInitialState();
+    }, [
+        getPreference,
+        preferencesKey,
+        fieldPreferencesKey,
+        initCollapsed,
+        path
+    ]);
+    if (typeof collapsedOnMount !== 'boolean') return null;
+    const readOnly = readOnlyFromProps || readOnlyFromContext;
+    return /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement(WatchChildErrors, {
+        fieldMap: fieldMap,
+        path: path,
+        setErrorCount: setErrorCount
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: [
+            fieldBaseClass,
+            baseClass,
+            className,
+            fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`
+        ].filter(Boolean).join(' '),
+        id: `field-${fieldPreferencesKey}${path ? `-${path.replace(/\./g, '__')}` : ''}`
+    }, /*#__PURE__*/ React.createElement(CollapsibleElement, {
+        className: `${baseClass}__collapsible`,
+        collapsibleStyle: fieldHasErrors ? 'error' : 'default',
+        header: /*#__PURE__*/ React.createElement("div", {
+            className: `${baseClass}__row-label-wrap`
+        }, /*#__PURE__*/ React.createElement(RowLabel, {
+            RowLabelComponent: CustomLabel,
+            i18n: i18n,
+            path: path,
+            rowLabel: labelProps.label
+        }), fieldHasErrors && /*#__PURE__*/ React.createElement(ErrorPill, {
+            count: errorCount,
+            i18n: i18n,
+            withMessage: true
+        })),
+        initCollapsed: collapsedOnMount,
+        onToggle: onToggle
+    }, /*#__PURE__*/ React.createElement(RenderFields, {
+        fieldMap: fieldMap,
+        forceRender: true,
+        indexPath: indexPath,
+        margins: "small",
+        path: path,
+        permissions: siblingPermissions,
+        readOnly: readOnly,
+        schemaPath: schemaPath
+    })), /*#__PURE__*/ React.createElement(FieldDescription, {
+        CustomDescription: CustomDescription,
+        ...descriptionProps || {}
+    })));
+};
+export const Collapsible = withCondition(CollapsibleField);
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport type { DocumentPreferences, FieldBase } from 'payload/types'\n\nimport React, { Fragment, useCallback, useEffect, useState } from 'react'\n\nimport { Collapsible as CollapsibleElement } from '../../elements/Collapsible/index.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { RowLabel } from '../../forms/RowLabel/index.js'\nimport { WatchChildErrors } from '../../forms/WatchChildErrors/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nconst baseClass = 'collapsible-field'\n\nimport type { FieldPermissions } from 'payload/auth'\n\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\n\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'\nimport type { FormFieldBase } from '../shared/index.js'\n\nexport type CollapsibleFieldProps = FormFieldBase & {\n  fieldMap: FieldMap\n  initCollapsed?: boolean\n  label?: FieldBase['label']\n  permissions: FieldPermissions\n  width?: string\n}\n\nconst CollapsibleField: React.FC<CollapsibleFieldProps> = (props) => {\n  const {\n    CustomDescription,\n    CustomLabel,\n    className,\n    descriptionProps,\n    fieldMap,\n    initCollapsed = false,\n    labelProps,\n    path: pathFromProps,\n    readOnly: readOnlyFromProps,\n  } = props\n\n  const {\n    indexPath,\n    path: pathFromContext,\n    readOnly: readOnlyFromContext,\n    schemaPath,\n    siblingPermissions,\n  } = useFieldProps()\n  const path = pathFromContext || pathFromProps\n\n  const { i18n } = useTranslation()\n  const { getPreference, setPreference } = usePreferences()\n  const { preferencesKey } = useDocumentInfo()\n  const [collapsedOnMount, setCollapsedOnMount] = useState<boolean>()\n  const fieldPreferencesKey = `collapsible-${indexPath.replace(/\\./g, '__')}`\n  const [errorCount, setErrorCount] = useState(0)\n  const fieldHasErrors = errorCount > 0\n\n  const onToggle = useCallback(\n    async (newCollapsedState: boolean) => {\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                  collapsed: newCollapsedState,\n                },\n              },\n            }\n          : {\n              fields: {\n                ...(existingPreferences?.fields || {}),\n                [fieldPreferencesKey]: {\n                  ...existingPreferences?.fields?.[fieldPreferencesKey],\n                  collapsed: newCollapsedState,\n                },\n              },\n            }),\n      })\n    },\n    [preferencesKey, fieldPreferencesKey, getPreference, setPreference, path],\n  )\n\n  useEffect(() => {\n    const fetchInitialState = async () => {\n      const preferences = await getPreference(preferencesKey)\n      if (preferences) {\n        const initCollapsedFromPref = path\n          ? preferences?.fields?.[path]?.collapsed\n          : preferences?.fields?.[fieldPreferencesKey]?.collapsed\n        setCollapsedOnMount(Boolean(initCollapsedFromPref))\n      } else {\n        setCollapsedOnMount(typeof initCollapsed === 'boolean' ? initCollapsed : false)\n      }\n    }\n\n    void fetchInitialState()\n  }, [getPreference, preferencesKey, fieldPreferencesKey, initCollapsed, path])\n\n  if (typeof collapsedOnMount !== 'boolean') return null\n\n  const readOnly = readOnlyFromProps || readOnlyFromContext\n\n  return (\n    <Fragment>\n      <WatchChildErrors fieldMap={fieldMap} path={path} setErrorCount={setErrorCount} />\n      <div\n        className={[\n          fieldBaseClass,\n          baseClass,\n          className,\n          fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        id={`field-${fieldPreferencesKey}${path ? `-${path.replace(/\\./g, '__')}` : ''}`}\n      >\n        <CollapsibleElement\n          className={`${baseClass}__collapsible`}\n          collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n          header={\n            <div className={`${baseClass}__row-label-wrap`}>\n              <RowLabel\n                RowLabelComponent={CustomLabel}\n                i18n={i18n}\n                path={path}\n                rowLabel={labelProps.label}\n              />\n              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n            </div>\n          }\n          initCollapsed={collapsedOnMount}\n          onToggle={onToggle}\n        >\n          <RenderFields\n            fieldMap={fieldMap}\n            forceRender\n            indexPath={indexPath}\n            margins=\"small\"\n            path={path}\n            permissions={siblingPermissions}\n            readOnly={readOnly}\n            schemaPath={schemaPath}\n          />\n        </CollapsibleElement>\n        <FieldDescription CustomDescription={CustomDescription} {...(descriptionProps || {})} />\n      </div>\n    </Fragment>\n  )\n}\n\nexport const Collapsible = withCondition(CollapsibleField)\n"],"names":["React","Fragment","useCallback","useEffect","useState","Collapsible","CollapsibleElement","ErrorPill","useFieldProps","RenderFields","RowLabel","WatchChildErrors","withCondition","useDocumentInfo","usePreferences","useTranslation","fieldBaseClass","baseClass","FieldDescription","CollapsibleField","props","CustomDescription","CustomLabel","className","descriptionProps","fieldMap","initCollapsed","labelProps","path","pathFromProps","readOnly","readOnlyFromProps","indexPath","pathFromContext","readOnlyFromContext","schemaPath","siblingPermissions","i18n","getPreference","setPreference","preferencesKey","collapsedOnMount","setCollapsedOnMount","fieldPreferencesKey","replace","errorCount","setErrorCount","fieldHasErrors","onToggle","newCollapsedState","existingPreferences","fields","collapsed","fetchInitialState","preferences","initCollapsedFromPref","Boolean","div","filter","join","id","collapsibleStyle","header","RowLabelComponent","rowLabel","label","count","withMessage","forceRender","margins","permissions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/fields/Collapsible/index.scss

@@ -0,0 +1,14 @@
+@import '../../scss/styles.scss';
+
+.collapsible-field {
+  &__row-label-wrap {
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    gap: base(0.5);
+  }
+
+  &--has-error {
+    border: 1px solid var(--theme-error-500);
+  }
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import './index.scss';
+export type ConfirmPasswordFieldProps = {
+    disabled?: boolean;
+};
+export declare const ConfirmPassword: React.FC<ConfirmPasswordFieldProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/ConfirmPassword/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAQ1C,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAoD/D,CAAA"}

package/dist/fields/ConfirmPassword/index.js

@@ -0,0 +1,54 @@
+'use client';
+import React, { useCallback } from 'react';
+import { FieldError } from '../../forms/FieldError/index.js';
+import { FieldLabel } from '../../forms/FieldLabel/index.js';
+import { useFormFields } from '../../forms/Form/context.js';
+import { useField } from '../../forms/useField/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+export const ConfirmPassword = (props)=>{
+    const { disabled } = props;
+    const password = useFormFields(([fields])=>fields.password);
+    const { t } = useTranslation();
+    const validate = useCallback((value)=>{
+        if (!value) {
+            return t('validation:required');
+        }
+        if (value === password?.value) {
+            return true;
+        }
+        return t('fields:passwordsDoNotMatch');
+    }, [
+        password,
+        t
+    ]);
+    const path = 'confirm-password';
+    const { setValue, showError, value } = useField({
+        disableFormData: true,
+        path,
+        validate
+    });
+    return /*#__PURE__*/ React.createElement("div", {
+        className: [
+            fieldBaseClass,
+            'confirm-password',
+            showError && 'error'
+        ].filter(Boolean).join(' ')
+    }, /*#__PURE__*/ React.createElement(FieldError, {
+        path: path
+    }), /*#__PURE__*/ React.createElement(FieldLabel, {
+        htmlFor: "field-confirm-password",
+        label: t('authentication:confirmPassword'),
+        required: true
+    }), /*#__PURE__*/ React.createElement("input", {
+        autoComplete: "off",
+        disabled: !!disabled,
+        id: "field-confirm-password",
+        name: "confirm-password",
+        onChange: setValue,
+        type: "password",
+        value: value || ''
+    }));
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/ConfirmPassword/index.tsx"],"sourcesContent":["'use client'\nimport type { FormField } from 'payload/types'\n\nimport React, { useCallback } from 'react'\n\nimport { FieldError } from '../../forms/FieldError/index.js'\nimport { FieldLabel } from '../../forms/FieldLabel/index.js'\nimport { useFormFields } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport type ConfirmPasswordFieldProps = {\n  disabled?: boolean\n}\n\nexport const ConfirmPassword: React.FC<ConfirmPasswordFieldProps> = (props) => {\n  const { disabled } = props\n\n  const password = useFormFields<FormField>(([fields]) => fields.password)\n  const { t } = useTranslation()\n\n  const validate = useCallback(\n    (value: string) => {\n      if (!value) {\n        return t('validation:required')\n      }\n\n      if (value === password?.value) {\n        return true\n      }\n\n      return t('fields:passwordsDoNotMatch')\n    },\n    [password, t],\n  )\n\n  const path = 'confirm-password'\n\n  const { setValue, showError, value } = useField({\n    disableFormData: true,\n    path,\n    validate,\n  })\n\n  return (\n    <div\n      className={[fieldBaseClass, 'confirm-password', showError && 'error']\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <FieldError path={path} />\n      <FieldLabel\n        htmlFor=\"field-confirm-password\"\n        label={t('authentication:confirmPassword')}\n        required\n      />\n      <input\n        autoComplete=\"off\"\n        disabled={!!disabled}\n        id=\"field-confirm-password\"\n        name=\"confirm-password\"\n        onChange={setValue}\n        type=\"password\"\n        value={(value as string) || ''}\n      />\n    </div>\n  )\n}\n"],"names":["React","useCallback","FieldError","FieldLabel","useFormFields","useField","useTranslation","fieldBaseClass","ConfirmPassword","props","disabled","password","fields","t","validate","value","path","setValue","showError","disableFormData","div","className","filter","Boolean","join","htmlFor","label","required","input","autoComplete","id","name","onChange","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,OAAOA,SAASC,WAAW,QAAQ,QAAO;AAE1C,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,aAAa,QAAQ,8BAA6B;AAC3D,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,qBAAoB;AAOnD,OAAO,MAAMC,kBAAuD,CAACC;IACnE,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAME,WAAWP,cAAyB,CAAC,CAACQ,OAAO,GAAKA,OAAOD,QAAQ;IACvE,MAAM,EAAEE,CAAC,EAAE,GAAGP;IAEd,MAAMQ,WAAWb,YACf,CAACc;QACC,IAAI,CAACA,OAAO;YACV,OAAOF,EAAE;QACX;QAEA,IAAIE,UAAUJ,UAAUI,OAAO;YAC7B,OAAO;QACT;QAEA,OAAOF,EAAE;IACX,GACA;QAACF;QAAUE;KAAE;IAGf,MAAMG,OAAO;IAEb,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEH,KAAK,EAAE,GAAGV,SAAS;QAC9Cc,iBAAiB;QACjBH;QACAF;IACF;IAEA,qBACE,oBAACM;QACCC,WAAW;YAACd;YAAgB;YAAoBW,aAAa;SAAQ,CAClEI,MAAM,CAACC,SACPC,IAAI,CAAC;qBAER,oBAACtB;QAAWc,MAAMA;sBAClB,oBAACb;QACCsB,SAAQ;QACRC,OAAOb,EAAE;QACTc,UAAAA;sBAEF,oBAACC;QACCC,cAAa;QACbnB,UAAU,CAAC,CAACA;QACZoB,IAAG;QACHC,MAAK;QACLC,UAAUf;QACVgB,MAAK;QACLlB,OAAO,AAACA,SAAoB;;AAIpC,EAAC"}

package/dist/fields/ConfirmPassword/index.scss

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.scss';
+import type { DateField, FieldBase } from 'payload/types';
+import type { FormFieldBase } from '../shared/index.js';
+export type DateFieldProps = FormFieldBase & {
+    date?: DateField['admin']['date'];
+    label?: FieldBase['label'];
+    name?: string;
+    path?: string;
+    placeholder?: DateField['admin']['placeholder'] | string;
+    width?: string;
+};
+export declare const DateTime: React.FC<DateFieldProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTime/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAMzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAIvD,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C,IAAI,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,GAAG,MAAM,CAAA;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AA4FD,eAAO,MAAM,QAAQ,0BAA+B,CAAA"}

package/dist/fields/DateTime/index.js

@@ -0,0 +1,72 @@
+/* eslint-disable react/destructuring-assignment */ 'use client';
+import { getTranslation } from '@payloadcms/translations';
+import React, { useCallback } from 'react';
+import { DatePickerField } from '../../elements/DatePicker/index.js';
+import { FieldLabel } from '../../forms/FieldLabel/index.js';
+import { useField } from '../../forms/useField/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+const baseClass = 'date-time-field';
+import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
+import { FieldError } from '@payloadcms/ui/forms/FieldError';
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
+import { withCondition } from '../../forms/withCondition/index.js';
+const DateTimeField = (props)=>{
+    const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, date: datePickerProps, descriptionProps, errorProps, label, labelProps, path: pathFromProps, placeholder, readOnly: readOnlyFromProps, required, style, validate, width } = props;
+    const { i18n } = useTranslation();
+    const memoizedValidate = useCallback((value, options)=>{
+        if (typeof validate === 'function') {
+            return validate(value, {
+                ...options,
+                required
+            });
+        }
+    }, [
+        validate,
+        required
+    ]);
+    const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
+    const { path, setValue, showError, value } = useField({
+        path: pathFromContext || pathFromProps || name,
+        validate: memoizedValidate
+    });
+    const readOnly = readOnlyFromProps || readOnlyFromContext;
+    return /*#__PURE__*/ React.createElement("div", {
+        className: [
+            fieldBaseClass,
+            baseClass,
+            className,
+            showError && `${baseClass}--has-error`,
+            readOnly && 'read-only'
+        ].filter(Boolean).join(' '),
+        style: {
+            ...style,
+            width
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__error-wrap`
+    }, /*#__PURE__*/ React.createElement(FieldError, {
+        CustomError: CustomError,
+        path: path,
+        ...errorProps || {}
+    })), /*#__PURE__*/ React.createElement(FieldLabel, {
+        CustomLabel: CustomLabel,
+        label: label,
+        required: required,
+        ...labelProps || {}
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__input-wrapper`,
+        id: `field-${path.replace(/\./g, '__')}`
+    }, BeforeInput, /*#__PURE__*/ React.createElement(DatePickerField, {
+        ...datePickerProps,
+        onChange: (incomingDate)=>{
+            if (!readOnly) setValue(incomingDate?.toISOString() || null);
+        },
+        placeholder: getTranslation(placeholder, i18n),
+        readOnly: readOnly,
+        value: value
+    }), AfterInput), CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {}));
+};
+export const DateTime = withCondition(DateTimeField);
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/DateTime/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 { DatePickerField } from '../../elements/DatePicker/index.js'\nimport { FieldLabel } from '../../forms/FieldLabel/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nconst baseClass = 'date-time-field'\n\nimport type { DateField, FieldBase } from 'payload/types'\n\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\n\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { withCondition } from '../../forms/withCondition/index.js'\n\nexport type DateFieldProps = FormFieldBase & {\n  date?: DateField['admin']['date']\n  label?: FieldBase['label']\n  name?: string\n  path?: string\n  placeholder?: DateField['admin']['placeholder'] | string\n  width?: string\n}\n\nconst DateTimeField: React.FC<DateFieldProps> = (props) => {\n  const {\n    name,\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    date: datePickerProps,\n    descriptionProps,\n    errorProps,\n    label,\n    labelProps,\n    path: pathFromProps,\n    placeholder,\n    readOnly: readOnlyFromProps,\n    required,\n    style,\n    validate,\n    width,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const memoizedValidate: ClientValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n\n  const { path, setValue, showError, value } = useField<Date>({\n    path: pathFromContext || pathFromProps || name,\n    validate: memoizedValidate,\n  })\n\n  const readOnly = readOnlyFromProps || readOnlyFromContext\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && `${baseClass}--has-error`,\n        readOnly && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <div className={`${baseClass}__error-wrap`}>\n        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n      </div>\n      <FieldLabel\n        CustomLabel={CustomLabel}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      <div className={`${baseClass}__input-wrapper`} id={`field-${path.replace(/\\./g, '__')}`}>\n        {BeforeInput}\n        <DatePickerField\n          {...datePickerProps}\n          onChange={(incomingDate) => {\n            if (!readOnly) setValue(incomingDate?.toISOString() || null)\n          }}\n          placeholder={getTranslation(placeholder, i18n)}\n          readOnly={readOnly}\n          value={value}\n        />\n        {AfterInput}\n      </div>\n      {CustomDescription !== undefined ? (\n        CustomDescription\n      ) : (\n        <FieldDescription {...(descriptionProps || {})} />\n      )}\n    </div>\n  )\n}\n\nexport const DateTime = withCondition(DateTimeField)\n"],"names":["getTranslation","React","useCallback","DatePickerField","FieldLabel","useField","useTranslation","fieldBaseClass","baseClass","FieldDescription","FieldError","useFieldProps","withCondition","DateTimeField","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","date","datePickerProps","descriptionProps","errorProps","label","labelProps","path","pathFromProps","placeholder","readOnly","readOnlyFromProps","required","style","validate","width","i18n","memoizedValidate","value","options","pathFromContext","readOnlyFromContext","setValue","showError","div","filter","Boolean","join","id","replace","onChange","incomingDate","toISOString","undefined","DateTime"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,iDAAiD,GACjD;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAE1C,SAASC,eAAe,QAAQ,qCAAoC;AACpE,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,qBAAoB;AAGnD,MAAMC,YAAY;AAIlB,SAASC,gBAAgB,QAAQ,wCAAuC;AACxE,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,aAAa,QAAQ,0CAAyC;AAIvE,SAASC,aAAa,QAAQ,qCAAoC;AAWlE,MAAMC,gBAA0C,CAACC;IAC/C,MAAM,EACJC,IAAI,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,MAAMC,eAAe,EACrBC,gBAAgB,EAChBC,UAAU,EACVC,KAAK,EACLC,UAAU,EACVC,MAAMC,aAAa,EACnBC,WAAW,EACXC,UAAUC,iBAAiB,EAC3BC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACN,GAAGtB;IAEJ,MAAM,EAAEuB,IAAI,EAAE,GAAG/B;IAEjB,MAAMgC,mBAAmCpC,YACvC,CAACqC,OAAOC;QACN,IAAI,OAAOL,aAAa,YAAY;YAClC,OAAOA,SAASI,OAAO;gBAAE,GAAGC,OAAO;gBAAEP;YAAS;QAChD;IACF,GACA;QAACE;QAAUF;KAAS;IAGtB,MAAM,EAAEL,MAAMa,eAAe,EAAEV,UAAUW,mBAAmB,EAAE,GAAG/B;IAEjE,MAAM,EAAEiB,IAAI,EAAEe,QAAQ,EAAEC,SAAS,EAAEL,KAAK,EAAE,GAAGlC,SAAe;QAC1DuB,MAAMa,mBAAmBZ,iBAAiBd;QAC1CoB,UAAUG;IACZ;IAEA,MAAMP,WAAWC,qBAAqBU;IAEtC,qBACE,oBAACG;QACCxB,WAAW;YACTd;YACAC;YACAa;YACAuB,aAAa,CAAC,EAAEpC,UAAU,WAAW,CAAC;YACtCuB,YAAY;SACb,CACEe,MAAM,CAACC,SACPC,IAAI,CAAC;QACRd,OAAO;YACL,GAAGA,KAAK;YACRE;QACF;qBAEA,oBAACS;QAAIxB,WAAW,CAAC,EAAEb,UAAU,YAAY,CAAC;qBACxC,oBAACE;QAAWS,aAAaA;QAAaS,MAAMA;QAAO,GAAIH,cAAc,CAAC,CAAC;uBAEzE,oBAACrB;QACCgB,aAAaA;QACbM,OAAOA;QACPO,UAAUA;QACT,GAAIN,cAAc,CAAC,CAAC;sBAEvB,oBAACkB;QAAIxB,WAAW,CAAC,EAAEb,UAAU,eAAe,CAAC;QAAEyC,IAAI,CAAC,MAAM,EAAErB,KAAKsB,OAAO,CAAC,OAAO,MAAM,CAAC;OACpFjC,2BACD,oBAACd;QACE,GAAGoB,eAAe;QACnB4B,UAAU,CAACC;YACT,IAAI,CAACrB,UAAUY,SAASS,cAAcC,iBAAiB;QACzD;QACAvB,aAAa9B,eAAe8B,aAAaO;QACzCN,UAAUA;QACVQ,OAAOA;QAERvB,aAEFE,sBAAsBoC,YACrBpC,kCAEA,oBAACT,kBAAsBe,oBAAoB,CAAC;AAIpD;AAEA,OAAO,MAAM+B,WAAW3C,cAAcC,eAAc"}

package/dist/fields/DateTime/index.scss

@@ -0,0 +1,27 @@
+@import '../../scss/styles.scss';
+
+.date-time-field {
+  &__error-wrap {
+    position: relative;
+  }
+}
+
+html[data-theme='light'] {
+  .date-time-field {
+    &--has-error {
+      .react-datepicker__input-container input {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .date-time-field {
+    &--has-error {
+      .react-datepicker__input-container input {
+        @include darkInputError;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import type { EmailField as EmailFieldType, FieldBase } from 'payload/types';
+import React from 'react';
+import type { FormFieldBase } from '../shared/index.js';
+import './index.scss';
+export type EmailFieldProps = FormFieldBase & {
+    autoComplete?: string;
+    label?: FieldBase['label'];
+    name?: string;
+    path?: string;
+    placeholder?: EmailFieldType['admin']['placeholder'];
+    width?: string;
+};
+export declare const Email: React.FC<EmailFieldProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Email/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAO5E,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAMvD,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAoFD,eAAO,MAAM,KAAK,2BAA4B,CAAA"}

package/dist/fields/Email/index.js

@@ -0,0 +1,66 @@
+'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 { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
+import React, { useCallback } from 'react';
+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 EmailField = (props)=>{
+    const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, autoComplete, className, descriptionProps, errorProps, label, labelProps, path: pathFromProps, placeholder, readOnly: readOnlyFromProps, required, style, validate, width } = props;
+    const { i18n } = useTranslation();
+    const memoizedValidate = useCallback((value, options)=>{
+        if (typeof validate === 'function') {
+            return validate(value, {
+                ...options,
+                required
+            });
+        }
+    }, [
+        validate,
+        required
+    ]);
+    const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
+    const readOnly = readOnlyFromProps || readOnlyFromContext;
+    const { path, setValue, showError, value } = useField({
+        path: pathFromContext || pathFromProps || name,
+        validate: memoizedValidate
+    });
+    return /*#__PURE__*/ React.createElement("div", {
+        className: [
+            fieldBaseClass,
+            'email',
+            className,
+            showError && 'error',
+            readOnly && 'read-only'
+        ].filter(Boolean).join(' '),
+        style: {
+            ...style,
+            width
+        }
+    }, /*#__PURE__*/ React.createElement(FieldError, {
+        CustomError: CustomError,
+        path: path,
+        ...errorProps || {}
+    }), /*#__PURE__*/ React.createElement(FieldLabel, {
+        CustomLabel: CustomLabel,
+        label: label,
+        required: required,
+        ...labelProps || {}
+    }), /*#__PURE__*/ React.createElement("div", null, BeforeInput, /*#__PURE__*/ React.createElement("input", {
+        autoComplete: autoComplete,
+        disabled: readOnly,
+        id: `field-${path.replace(/\./g, '__')}`,
+        name: path,
+        onChange: setValue,
+        placeholder: getTranslation(placeholder, i18n),
+        type: "email",
+        value: value || ''
+    }), AfterInput), CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {}));
+};
+export const Email = withCondition(EmailField);
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Email/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientValidate } from 'payload/types'\nimport type { EmailField as EmailFieldType, FieldBase } 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 { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport React, { useCallback } from 'react'\n\nimport type { FormFieldBase } from '../shared/index.js'\n\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 EmailFieldProps = FormFieldBase & {\n  autoComplete?: string\n  label?: FieldBase['label']\n  name?: string\n  path?: string\n  placeholder?: EmailFieldType['admin']['placeholder']\n  width?: string\n}\n\nconst EmailField: React.FC<EmailFieldProps> = (props) => {\n  const {\n    name,\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    autoComplete,\n    className,\n    descriptionProps,\n    errorProps,\n    label,\n    labelProps,\n    path: pathFromProps,\n    placeholder,\n    readOnly: readOnlyFromProps,\n    required,\n    style,\n    validate,\n    width,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const memoizedValidate: ClientValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n  const readOnly = readOnlyFromProps || readOnlyFromContext\n\n  const { path, setValue, showError, value } = useField({\n    path: pathFromContext || pathFromProps || name,\n    validate: memoizedValidate,\n  })\n\n  return (\n    <div\n      className={[fieldBaseClass, 'email', className, showError && 'error', readOnly && 'read-only']\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n      <FieldLabel\n        CustomLabel={CustomLabel}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      <div>\n        {BeforeInput}\n        <input\n          autoComplete={autoComplete}\n          disabled={readOnly}\n          id={`field-${path.replace(/\\./g, '__')}`}\n          name={path}\n          onChange={setValue}\n          placeholder={getTranslation(placeholder, i18n)}\n          type=\"email\"\n          value={(value as string) || ''}\n        />\n        {AfterInput}\n      </div>\n      {CustomDescription !== undefined ? (\n        CustomDescription\n      ) : (\n        <FieldDescription {...(descriptionProps || {})} />\n      )}\n    </div>\n  )\n}\n\nexport const Email = withCondition(EmailField)\n"],"names":["getTranslation","FieldDescription","FieldError","FieldLabel","useFieldProps","React","useCallback","useField","withCondition","useTranslation","fieldBaseClass","EmailField","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","autoComplete","className","descriptionProps","errorProps","label","labelProps","path","pathFromProps","placeholder","readOnly","readOnlyFromProps","required","style","validate","width","i18n","memoizedValidate","value","options","pathFromContext","readOnlyFromContext","setValue","showError","div","filter","Boolean","join","input","disabled","id","replace","onChange","type","undefined","Email"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,gBAAgB,QAAQ,wCAAuC;AACxE,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,aAAa,QAAQ,0CAAyC;AACvE,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAI1C,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,qBAAoB;AAYnD,MAAMC,aAAwC,CAACC;IAC7C,MAAM,EACJC,IAAI,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,KAAK,EACLC,UAAU,EACVC,MAAMC,aAAa,EACnBC,WAAW,EACXC,UAAUC,iBAAiB,EAC3BC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACN,GAAGrB;IAEJ,MAAM,EAAEsB,IAAI,EAAE,GAAGzB;IAEjB,MAAM0B,mBAAmC7B,YACvC,CAAC8B,OAAOC;QACN,IAAI,OAAOL,aAAa,YAAY;YAClC,OAAOA,SAASI,OAAO;gBAAE,GAAGC,OAAO;gBAAEP;YAAS;QAChD;IACF,GACA;QAACE;QAAUF;KAAS;IAGtB,MAAM,EAAEL,MAAMa,eAAe,EAAEV,UAAUW,mBAAmB,EAAE,GAAGnC;IACjE,MAAMwB,WAAWC,qBAAqBU;IAEtC,MAAM,EAAEd,IAAI,EAAEe,QAAQ,EAAEC,SAAS,EAAEL,KAAK,EAAE,GAAG7B,SAAS;QACpDkB,MAAMa,mBAAmBZ,iBAAiBb;QAC1CmB,UAAUG;IACZ;IAEA,qBACE,oBAACO;QACCtB,WAAW;YAACV;YAAgB;YAASU;YAAWqB,aAAa;YAASb,YAAY;SAAY,CAC3Fe,MAAM,CAACC,SACPC,IAAI,CAAC;QACRd,OAAO;YACL,GAAGA,KAAK;YACRE;QACF;qBAEA,oBAAC/B;QAAWe,aAAaA;QAAaQ,MAAMA;QAAO,GAAIH,cAAc,CAAC,CAAC;sBACvE,oBAACnB;QACCe,aAAaA;QACbK,OAAOA;QACPO,UAAUA;QACT,GAAIN,cAAc,CAAC,CAAC;sBAEvB,oBAACkB,aACE3B,2BACD,oBAAC+B;QACC3B,cAAcA;QACd4B,UAAUnB;QACVoB,IAAI,CAAC,MAAM,EAAEvB,KAAKwB,OAAO,CAAC,OAAO,MAAM,CAAC;QACxCpC,MAAMY;QACNyB,UAAUV;QACVb,aAAa3B,eAAe2B,aAAaO;QACzCiB,MAAK;QACLf,OAAO,AAACA,SAAoB;QAE7BtB,aAEFE,sBAAsBoC,YACrBpC,kCAEA,oBAACf,kBAAsBoB,oBAAoB,CAAC;AAIpD;AAEA,OAAO,MAAMgC,QAAQ7C,cAAcG,YAAW"}

package/dist/fields/Email/index.scss

@@ -0,0 +1,35 @@
+@import '../../scss/styles.scss';
+
+.field-type.email {
+  position: relative;
+
+  input {
+    @include formInput;
+  }
+
+  &.error {
+    input {
+      background-color: var(--theme-error-200);
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .field-type.email {
+    &.error {
+      input {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .field-type.email {
+    &.error {
+      input {
+        @include darkInputError;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+import type { FieldPermissions } from 'payload/auth';
+import type { FieldBase } from 'payload/types';
+import React from 'react';
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js';
+import type { FormFieldBase } from '../shared/index.js';
+import './index.scss';
+import { GroupProvider, useGroup } from './provider.js';
+export type GroupFieldProps = FormFieldBase & {
+    fieldMap: FieldMap;
+    forceRender?: boolean;
+    hideGutter?: boolean;
+    label?: FieldBase['label'];
+    name?: string;
+    permissions: FieldPermissions;
+    width?: string;
+};
+export { GroupProvider, useGroup };
+export declare const Group: React.FC<GroupFieldProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Group/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAI9C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yDAAyD,CAAA;AACvF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAavD,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIvD,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG;IAC5C,QAAQ,EAAE,QAAQ,CAAA;IAClB,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,WAAW,EAAE,gBAAgB,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAyFD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAA;AAElC,eAAO,MAAM,KAAK,2BAA4B,CAAA"}