@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.5d5a2b2

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

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

package/dist/fields/Email/index.css

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

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

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

package/dist/fields/FieldDescription/index.css

@@ -1,7 +1,7 @@
 @layer payload-default {
   .field-description {
     display: flex;
-    color: var(--color-text-secondary);
+    color: var(--field-color-description);
   }
 
   .field-description--margin-bottom {

package/dist/fields/FieldError/index.css

@@ -1,15 +1,15 @@
 @layer payload-default {
   .field-error.tooltip {
+    --tooltip-x: 0%;
     left: auto;
     max-width: 75%;
     right: 0;
-    transform: translate3d(0%, calc(-1 * (100% + var(--caret-size))), 0);
-    color: var(--color-text-ondanger);
-    background-color: var(--color-bg-danger);
+    color: var(--field-color-error-text);
+    background-color: var(--field-color-error-bg);
 
     &::after {
-      border-top-color: var(--color-bg-danger);
-      border-bottom-color: var(--color-bg-danger);
+      border-top-color: var(--field-color-error-bg);
+      border-bottom-color: var(--field-color-error-bg);
     }
   }
 }

package/dist/fields/FieldLabel/index.css

@@ -1,4 +1,8 @@
 @layer payload-default {
+  :root {
+    --field-label-letter-spacing: -0.032px;
+  }
+
   label.field-label {
     display: flex;
     align-items: center;
@@ -6,9 +10,10 @@
 
   label.field-label:not(.unstyled) {
     display: flex;
-    color: var(--color-text);
+    color: var(--field-color-label);
     font-family: var(--text-body-medium-strong-font-family);
     font-weight: var(--text-body-medium-strong-font-weight);
+    letter-spacing: var(--field-label-letter-spacing);
 
     html:not([dir='RTL']) & {
       margin-right: auto;
@@ -20,7 +25,7 @@
   }
 
   .field-label:not(.unstyled) .required {
-    color: var(--color-text-danger);
+    color: var(--field-color-label-required);
 
     html:not([dir='RTL']) & {
       margin-left: var(--spacer-1);

package/dist/fields/Group/index.css

@@ -4,8 +4,6 @@
   }
 
   .group-field--top-level {
-    padding-top: var(--spacer-5);
-
     &::before {
       content: '';
       position: absolute;

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

@@ -6,5 +6,5 @@ export declare const GroupFieldComponent: GroupFieldClientComponent;
 export { GroupProvider, useGroup };
 export declare const GroupField: React.FC<import("payload").FieldPaths & {
     readonly field: (Omit<import("payload").UnnamedGroupFieldClient, "type"> & Partial<Pick<import("payload").UnnamedGroupFieldClient, "type">>) | (Omit<import("payload").NamedGroupFieldClient, "type"> & Partial<Pick<import("payload").NamedGroupFieldClient, "type">>);
-} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Group/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAIxD,OAAO,KAAkB,MAAM,OAAO,CAAA;AAatC,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIvD,eAAO,MAAM,mBAAmB,EAAE,yBA6GjC,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAA;AAElC,eAAO,MAAM,UAAU;;+EAAqC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Group/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAIxD,OAAO,KAAkB,MAAM,OAAO,CAAA;AAatC,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIvD,eAAO,MAAM,mBAAmB,EAAE,yBA2GjC,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAA;AAElC,eAAO,MAAM,UAAU;;+EAAqC,CAAA"}

package/dist/fields/Group/index.js

@@ -104,7 +104,6 @@ export const GroupFieldComponent = props => {
           })]
         }), BeforeInput, groupHasName(field) ? /*#__PURE__*/_jsx(RenderFields, {
           fields: fields,
-          margins: "small",
           parentIndexPath: "",
           parentPath: path,
           parentSchemaPath: schemaPath,
@@ -112,7 +111,6 @@ export const GroupFieldComponent = props => {
           readOnly: readOnly
         }) : /*#__PURE__*/_jsx(RenderFields, {
           fields: fields,
-          margins: "small",
           parentIndexPath: indexPath,
           parentPath: parentPath,
           parentSchemaPath: parentSchemaPath,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","groupHasName","React","useMemo","useCollapsible","ErrorPill","RenderCustomComponent","FieldDescription","FieldLabel","useFormSubmitted","RenderFields","useField","withCondition","useTranslation","mergeFieldStyles","useRow","fieldBaseClass","useTabs","GroupProvider","useGroup","baseClass","GroupFieldComponent","props","field","admin","className","description","hideGutter","fields","label","indexPath","parentPath","parentSchemaPath","path","permissions","readOnly","schemaPath","schemaPathFromProps","type","name","i18n","isWithinCollapsible","isWithinGroup","isWithinRow","isWithinTab","customComponents","AfterInput","BeforeInput","Description","Label","errorPaths","submitted","errorCount","length","fieldHasErrors","isTopLevel","styles","_jsxs","filter","Boolean","join","id","replace","style","_jsx","CustomComponent","Fallback","as","localized","required","count","withMessage","margins","parentIndexPath","GroupField"],"sources":["../../../src/fields/Group/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GroupFieldClientComponent } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { groupHasName } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport './index.css'\nimport { useRow } from '../Row/provider.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { useTabs } from '../Tabs/provider.js'\nimport { GroupProvider, useGroup } from './provider.js'\n\nconst baseClass = 'group-field'\n\nexport const GroupFieldComponent: GroupFieldClientComponent = (props) => {\n  const {\n    field,\n    field: { admin: { className, description, hideGutter } = {}, fields, label },\n    indexPath,\n    parentPath,\n    parentSchemaPath,\n    path,\n    permissions,\n    readOnly,\n    schemaPath: schemaPathFromProps,\n  } = props\n\n  const schemaPath =\n    schemaPathFromProps ?? (field.type === 'group' && groupHasName(field) ? field.name : path)\n\n  const { i18n } = useTranslation()\n  const { isWithinCollapsible } = useCollapsible()\n  const isWithinGroup = useGroup()\n  const isWithinRow = useRow()\n  const isWithinTab = useTabs()\n\n  const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, errorPaths } =\n    useField({ path })\n\n  const submitted = useFormSubmitted()\n  const errorCount = errorPaths.length\n  const fieldHasErrors = submitted && errorCount > 0\n\n  const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow)\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        isTopLevel && `${baseClass}--top-level`,\n        isWithinCollapsible && `${baseClass}--within-collapsible`,\n        isWithinGroup && `${baseClass}--within-group`,\n        isWithinRow && `${baseClass}--within-row`,\n        isWithinTab && `${baseClass}--within-tab`,\n        !hideGutter && isWithinGroup && `${baseClass}--gutter`,\n        fieldHasErrors && `${baseClass}--has-error`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={`field-${path?.replace(/\\./g, '__')}`}\n      style={styles}\n    >\n      <GroupProvider>\n        <div className={`${baseClass}__wrap`}>\n          {Boolean(Label || Description || label || fieldHasErrors) && (\n            <div className={`${baseClass}__header`}>\n              <div className={`${baseClass}__title-row`}>\n                {Boolean(Label || Description || label) && (\n                  <RenderCustomComponent\n                    CustomComponent={Label}\n                    Fallback={\n                      <h3 className={`${baseClass}__title`}>\n                        <FieldLabel\n                          as=\"span\"\n                          label={getTranslation(label, i18n)}\n                          localized={false}\n                          path={path}\n                          required={false}\n                        />\n                      </h3>\n                    }\n                  />\n                )}\n                {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n              </div>\n              <RenderCustomComponent\n                CustomComponent={Description}\n                Fallback={<FieldDescription description={description} path={path} />}\n              />\n            </div>\n          )}\n          {BeforeInput}\n          {/* Render an unnamed group differently */}\n          {groupHasName(field) ? (\n            <RenderFields\n              fields={fields}\n              margins=\"small\"\n              parentIndexPath=\"\"\n              parentPath={path}\n              parentSchemaPath={schemaPath}\n              permissions={permissions === true ? permissions : permissions?.fields}\n              readOnly={readOnly}\n            />\n          ) : (\n            <RenderFields\n              fields={fields}\n              margins=\"small\"\n              parentIndexPath={indexPath}\n              parentPath={parentPath}\n              parentSchemaPath={parentSchemaPath}\n              permissions={permissions}\n              readOnly={readOnly}\n            />\n          )}\n        </div>\n      </GroupProvider>\n      {AfterInput}\n    </div>\n  )\n}\n\nexport { GroupProvider, useGroup }\n\nexport const GroupField = withCondition(GroupFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","groupHasName","React","useMemo","useCollapsible","ErrorPill","RenderCustomComponent","FieldDescription","FieldLabel","useFormSubmitted","RenderFields","useField","withCondition","useTranslation","mergeFieldStyles","useRow","fieldBaseClass","useTabs","GroupProvider","useGroup","baseClass","GroupFieldComponent","props","field","admin","className","description","hideGutter","fields","label","indexPath","parentPath","parentSchemaPath","path","permissions","readOnly","schemaPath","schemaPathFromProps","type","name","i18n","isWithinCollapsible","isWithinGroup","isWithinRow","isWithinTab","customComponents","AfterInput","BeforeInput","Description","Label","errorPaths","submitted","errorCount","length","fieldHasErrors","isTopLevel","styles","_jsxs","filter","Boolean","join","id","replace","style","_jsx","CustomComponent","Fallback","as","localized","required","count","withMessage","parentIndexPath","GroupField"],"sources":["../../../src/fields/Group/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GroupFieldClientComponent } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { groupHasName } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport './index.css'\nimport { useRow } from '../Row/provider.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { useTabs } from '../Tabs/provider.js'\nimport { GroupProvider, useGroup } from './provider.js'\n\nconst baseClass = 'group-field'\n\nexport const GroupFieldComponent: GroupFieldClientComponent = (props) => {\n  const {\n    field,\n    field: { admin: { className, description, hideGutter } = {}, fields, label },\n    indexPath,\n    parentPath,\n    parentSchemaPath,\n    path,\n    permissions,\n    readOnly,\n    schemaPath: schemaPathFromProps,\n  } = props\n\n  const schemaPath =\n    schemaPathFromProps ?? (field.type === 'group' && groupHasName(field) ? field.name : path)\n\n  const { i18n } = useTranslation()\n  const { isWithinCollapsible } = useCollapsible()\n  const isWithinGroup = useGroup()\n  const isWithinRow = useRow()\n  const isWithinTab = useTabs()\n\n  const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, errorPaths } =\n    useField({ path })\n\n  const submitted = useFormSubmitted()\n  const errorCount = errorPaths.length\n  const fieldHasErrors = submitted && errorCount > 0\n\n  const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow)\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        isTopLevel && `${baseClass}--top-level`,\n        isWithinCollapsible && `${baseClass}--within-collapsible`,\n        isWithinGroup && `${baseClass}--within-group`,\n        isWithinRow && `${baseClass}--within-row`,\n        isWithinTab && `${baseClass}--within-tab`,\n        !hideGutter && isWithinGroup && `${baseClass}--gutter`,\n        fieldHasErrors && `${baseClass}--has-error`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={`field-${path?.replace(/\\./g, '__')}`}\n      style={styles}\n    >\n      <GroupProvider>\n        <div className={`${baseClass}__wrap`}>\n          {Boolean(Label || Description || label || fieldHasErrors) && (\n            <div className={`${baseClass}__header`}>\n              <div className={`${baseClass}__title-row`}>\n                {Boolean(Label || Description || label) && (\n                  <RenderCustomComponent\n                    CustomComponent={Label}\n                    Fallback={\n                      <h3 className={`${baseClass}__title`}>\n                        <FieldLabel\n                          as=\"span\"\n                          label={getTranslation(label, i18n)}\n                          localized={false}\n                          path={path}\n                          required={false}\n                        />\n                      </h3>\n                    }\n                  />\n                )}\n                {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n              </div>\n              <RenderCustomComponent\n                CustomComponent={Description}\n                Fallback={<FieldDescription description={description} path={path} />}\n              />\n            </div>\n          )}\n          {BeforeInput}\n          {/* Render an unnamed group differently */}\n          {groupHasName(field) ? (\n            <RenderFields\n              fields={fields}\n              parentIndexPath=\"\"\n              parentPath={path}\n              parentSchemaPath={schemaPath}\n              permissions={permissions === true ? permissions : permissions?.fields}\n              readOnly={readOnly}\n            />\n          ) : (\n            <RenderFields\n              fields={fields}\n              parentIndexPath={indexPath}\n              parentPath={parentPath}\n              parentSchemaPath={parentSchemaPath}\n              permissions={permissions}\n              readOnly={readOnly}\n            />\n          )}\n        </div>\n      </GroupProvider>\n      {AfterInput}\n    </div>\n  )\n}\n\nexport { GroupProvider, useGroup }\n\nexport const GroupField = withCondition(GroupFieldComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/JSON/index.css

@@ -7,14 +7,14 @@
 
     &.error {
       .code-editor {
-        border-color: var(--color-border-danger-strong);
+        border-color: var(--field-color-border-error);
 
         &:hover {
-          border-color: var(--border-danger-strong);
+          border-color: var(--field-color-border-error);
         }
 
         &:focus-within {
-          border-color: var(--color-border-selected-strong);
+          border-color: var(--field-color-border-focus);
         }
       }
 

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

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

package/dist/fields/Join/index.css

@@ -0,0 +1,25 @@
+@layer payload-default {
+  .field-type.join {
+    --join-header-letter-spacing: -0.032px;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .field-type.join .join__header-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .field-type.join .relationship-table__header h4 {
+    margin: 0;
+    font-family: var(--text-body-large-strong-font-family);
+    font-size: var(--text-body-large-strong-font-size);
+    font-weight: var(--text-body-large-strong-font-weight);
+    line-height: var(--text-body-large-strong-line-height);
+    letter-spacing: var(--join-header-letter-spacing);
+    color: var(--color-text);
+  }
+}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Join/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,eAAe,EAIhB,MAAM,SAAS,CAAA;AAIhB,OAAO,KAAkB,MAAM,OAAO,CAAA;AAgOtC,eAAO,MAAM,SAAS;;;;+EAAoC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Join/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,eAAe,EAIhB,MAAM,SAAS,CAAA;AAIhB,OAAO,KAAkB,MAAM,OAAO,CAAA;AAatC,OAAO,aAAa,CAAA;AA0NpB,eAAO,MAAM,SAAS;;;;+EAAoC,CAAA"}

package/dist/fields/Join/index.js

@@ -4,16 +4,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ObjectIdImport from 'bson-objectid';
 import { fieldAffectsData, flattenTopLevelFields } from 'payload/shared';
 import React, { useMemo } from 'react';
+import { ErrorPill } from '../../elements/ErrorPill/index.js';
 import { RelationshipTable } from '../../elements/RelationshipTable/index.js';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
 import { FieldDescription } from '../FieldDescription/index.js';
-import { FieldError } from '../FieldError/index.js';
 import { FieldLabel } from '../FieldLabel/index.js';
 import { fieldBaseClass } from '../index.js';
+import './index.css';
 const ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport;
 /**
  * Recursively builds the default data for joined collection
@@ -114,20 +116,25 @@ const JoinFieldComponent = props => {
     config,
     getEntityConfig
   } = useConfig();
+  const {
+    i18n
+  } = useTranslation();
   const {
     customComponents: {
       AfterInput,
       BeforeInput,
       Description,
-      Error,
       Label
     } = {},
+    errorPaths,
     path,
     showError,
     value
   } = useField({
     potentiallyStalePath: pathFromProps
   });
+  const fieldErrorCount = errorPaths?.length || (showError ? 1 : 0);
+  const fieldHasErrors = fieldErrorCount > 0;
   const filterOptions = useMemo(() => {
     if (!docID) {
       return null;
@@ -167,15 +174,9 @@ const JoinFieldComponent = props => {
     return null;
   }
   return /*#__PURE__*/_jsxs("div", {
-    className: [fieldBaseClass, showError && 'error', 'join'].filter(Boolean).join(' '),
+    className: [fieldBaseClass, fieldHasErrors && 'error', 'join'].filter(Boolean).join(' '),
     id: `field-${path?.replace(/\./g, '__')}`,
-    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
-      CustomComponent: Error,
-      Fallback: /*#__PURE__*/_jsx(FieldError, {
-        path: path,
-        showError: showError
-      })
-    }), /*#__PURE__*/_jsx(RelationshipTable, {
+    children: [/*#__PURE__*/_jsx(RelationshipTable, {
       AfterInput: AfterInput,
       allowCreate: typeof docID !== 'undefined' && allowCreate,
       BeforeInput: BeforeInput,
@@ -187,16 +188,20 @@ const JoinFieldComponent = props => {
         docs: []
       },
       initialDrawerData: initialDrawerData,
-      Label: /*#__PURE__*/_jsx("h4", {
-        style: {
-          margin: 0
-        },
-        children: Label || /*#__PURE__*/_jsx(FieldLabel, {
-          label: label,
-          localized: localized,
-          path: path,
-          required: required
-        })
+      Label: /*#__PURE__*/_jsxs("div", {
+        className: "join__header-wrapper",
+        children: [/*#__PURE__*/_jsx("h4", {
+          children: Label || /*#__PURE__*/_jsx(FieldLabel, {
+            label: label,
+            localized: localized,
+            path: path,
+            required: required
+          })
+        }), fieldHasErrors && /*#__PURE__*/_jsx(ErrorPill, {
+          count: fieldErrorCount,
+          i18n: i18n,
+          withMessage: true
+        })]
       }),
       parent: typeof docID !== 'undefined' ? {
         id: docID,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ObjectIdImport","fieldAffectsData","flattenTopLevelFields","React","useMemo","RelationshipTable","RenderCustomComponent","useField","withCondition","useConfig","useDocumentInfo","FieldDescription","FieldError","FieldLabel","fieldBaseClass","ObjectId","default","getInitialDrawerData","collectionSlug","config","docID","fields","segments","flattenedFields","keepPresentationalFields","path","field","find","name","type","value","Array","isArray","relationTo","hasMany","nextSegments","slice","length","initialData","id","toHexString","_block","blockReferences","blocks","block","blocksMap","blockInitialData","blockType","slug","JoinFieldComponent","props","admin","allowCreate","description","collection","label","localized","on","required","pathFromProps","docConfig","getEntityConfig","customComponents","AfterInput","BeforeInput","Description","Error","Label","showError","potentiallyStalePath","filterOptions","targetField","where","equals","and","initialDrawerData","relatedCollection","split","_jsxs","className","filter","Boolean","join","replace","_jsx","CustomComponent","Fallback","disableTable","fieldPath","docs","style","margin","parent","joinPath","undefined","JoinField"],"sources":["../../../src/fields/Join/index.tsx"],"sourcesContent":["'use client'\n\nimport type {\n  ClientConfig,\n  ClientField,\n  JoinFieldClient,\n  JoinFieldClientComponent,\n  PaginatedDocs,\n  Where,\n} from 'payload'\n\nimport ObjectIdImport from 'bson-objectid'\nimport { fieldAffectsData, flattenTopLevelFields } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { RelationshipTable } from '../../elements/RelationshipTable/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../index.js'\n\nconst ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport\n\n/**\n * Recursively builds the default data for joined collection\n */\nconst getInitialDrawerData = ({\n  collectionSlug,\n  config,\n  docID,\n  fields,\n  segments,\n}: {\n  collectionSlug: string\n  config: ClientConfig\n  docID: number | string\n  fields: ClientField[]\n  segments: string[]\n}) => {\n  const flattenedFields = flattenTopLevelFields(fields, {\n    keepPresentationalFields: true,\n  })\n\n  const path = segments[0]\n\n  const field = flattenedFields.find((field) => field.name === path)\n\n  if (!field) {\n    return null\n  }\n\n  if (field.type === 'relationship' || field.type === 'upload') {\n    let value: { relationTo: string; value: number | string } | number | string = docID\n    if (Array.isArray(field.relationTo)) {\n      value = {\n        relationTo: collectionSlug,\n        value: docID,\n      }\n    }\n    return {\n      [field.name]: field.hasMany ? [value] : value,\n    }\n  }\n\n  const nextSegments = segments.slice(1, segments.length)\n\n  if (field.type === 'tab' || (field.type === 'group' && fieldAffectsData(field))) {\n    return {\n      [field.name]: getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: field.fields,\n        segments: nextSegments,\n      }),\n    }\n  }\n\n  if (field.type === 'array') {\n    const initialData = getInitialDrawerData({\n      collectionSlug,\n      config,\n      docID,\n      fields: field.fields,\n      segments: nextSegments,\n    })\n\n    initialData.id = ObjectId().toHexString()\n\n    return {\n      [field.name]: [initialData],\n    }\n  }\n\n  if (field.type === 'blocks') {\n    for (const _block of field.blockReferences ?? field.blocks) {\n      const block = typeof _block === 'string' ? config.blocksMap[_block] : _block\n\n      const blockInitialData = getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: block.fields,\n        segments: nextSegments,\n      })\n\n      if (blockInitialData) {\n        blockInitialData.id = ObjectId().toHexString()\n        blockInitialData.blockType = block.slug\n\n        return {\n          [field.name]: [blockInitialData],\n        }\n      }\n    }\n  }\n}\n\nconst JoinFieldComponent: JoinFieldClientComponent = (props) => {\n  const {\n    field,\n    field: { admin: { allowCreate, description } = {}, collection, label, localized, on, required },\n    path: pathFromProps,\n  } = props\n\n  const { id: docID, docConfig } = useDocumentInfo()\n\n  const { config, getEntityConfig } = useConfig()\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    path,\n    showError,\n    value,\n  } = useField<PaginatedDocs>({\n    potentiallyStalePath: pathFromProps,\n  })\n\n  const filterOptions: null | Where = useMemo(() => {\n    if (!docID) {\n      return null\n    }\n\n    let value: { relationTo: string; value: number | string } | number | string = docID\n\n    if (Array.isArray(field.targetField.relationTo)) {\n      value = {\n        relationTo: docConfig.slug,\n        value,\n      }\n    }\n\n    const where = Array.isArray(collection)\n      ? {}\n      : {\n          [on]: {\n            equals: value,\n          },\n        }\n\n    if (field.where) {\n      return {\n        and: [where, field.where],\n      }\n    }\n\n    return where\n  }, [docID, collection, field.targetField.relationTo, field.where, on, docConfig?.slug])\n\n  const initialDrawerData = useMemo(() => {\n    const relatedCollection = getEntityConfig({\n      collectionSlug: Array.isArray(field.collection) ? field.collection[0] : field.collection,\n    })\n\n    return getInitialDrawerData({\n      collectionSlug: docConfig?.slug,\n      config,\n      docID,\n      fields: relatedCollection?.fields,\n      segments: field.on.split('.'),\n    })\n  }, [getEntityConfig, field.collection, field.on, docConfig?.slug, docID, config])\n\n  if (!docConfig) {\n    return null\n  }\n\n  return (\n    <div\n      className={[fieldBaseClass, showError && 'error', 'join'].filter(Boolean).join(' ')}\n      id={`field-${path?.replace(/\\./g, '__')}`}\n    >\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      <RelationshipTable\n        AfterInput={AfterInput}\n        allowCreate={typeof docID !== 'undefined' && allowCreate}\n        BeforeInput={BeforeInput}\n        disableTable={filterOptions === null}\n        field={field as JoinFieldClient}\n        fieldPath={path}\n        filterOptions={filterOptions}\n        initialData={docID && value ? value : ({ docs: [] } as PaginatedDocs)}\n        initialDrawerData={initialDrawerData}\n        Label={\n          <h4 style={{ margin: 0 }}>\n            {Label || (\n              <FieldLabel label={label} localized={localized} path={path} required={required} />\n            )}\n          </h4>\n        }\n        parent={\n          typeof docID !== 'undefined'\n            ? {\n                id: docID,\n                collectionSlug: docConfig.slug,\n                joinPath: path,\n              }\n            : undefined\n        }\n        relationTo={collection}\n      />\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const JoinField = withCondition(JoinFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["ObjectIdImport","fieldAffectsData","flattenTopLevelFields","React","useMemo","ErrorPill","RelationshipTable","RenderCustomComponent","useField","withCondition","useConfig","useDocumentInfo","useTranslation","FieldDescription","FieldLabel","fieldBaseClass","ObjectId","default","getInitialDrawerData","collectionSlug","config","docID","fields","segments","flattenedFields","keepPresentationalFields","path","field","find","name","type","value","Array","isArray","relationTo","hasMany","nextSegments","slice","length","initialData","id","toHexString","_block","blockReferences","blocks","block","blocksMap","blockInitialData","blockType","slug","JoinFieldComponent","props","admin","allowCreate","description","collection","label","localized","on","required","pathFromProps","docConfig","getEntityConfig","i18n","customComponents","AfterInput","BeforeInput","Description","Label","errorPaths","showError","potentiallyStalePath","fieldErrorCount","fieldHasErrors","filterOptions","targetField","where","equals","and","initialDrawerData","relatedCollection","split","_jsxs","className","filter","Boolean","join","replace","_jsx","disableTable","fieldPath","docs","count","withMessage","parent","joinPath","undefined","CustomComponent","Fallback","JoinField"],"sources":["../../../src/fields/Join/index.tsx"],"sourcesContent":["'use client'\n\nimport type {\n  ClientConfig,\n  ClientField,\n  JoinFieldClient,\n  JoinFieldClientComponent,\n  PaginatedDocs,\n  Where,\n} from 'payload'\n\nimport ObjectIdImport from 'bson-objectid'\nimport { fieldAffectsData, flattenTopLevelFields } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { RelationshipTable } from '../../elements/RelationshipTable/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../index.js'\nimport './index.css'\n\nconst ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport\n\n/**\n * Recursively builds the default data for joined collection\n */\nconst getInitialDrawerData = ({\n  collectionSlug,\n  config,\n  docID,\n  fields,\n  segments,\n}: {\n  collectionSlug: string\n  config: ClientConfig\n  docID: number | string\n  fields: ClientField[]\n  segments: string[]\n}) => {\n  const flattenedFields = flattenTopLevelFields(fields, {\n    keepPresentationalFields: true,\n  })\n\n  const path = segments[0]\n\n  const field = flattenedFields.find((field) => field.name === path)\n\n  if (!field) {\n    return null\n  }\n\n  if (field.type === 'relationship' || field.type === 'upload') {\n    let value: { relationTo: string; value: number | string } | number | string = docID\n    if (Array.isArray(field.relationTo)) {\n      value = {\n        relationTo: collectionSlug,\n        value: docID,\n      }\n    }\n    return {\n      [field.name]: field.hasMany ? [value] : value,\n    }\n  }\n\n  const nextSegments = segments.slice(1, segments.length)\n\n  if (field.type === 'tab' || (field.type === 'group' && fieldAffectsData(field))) {\n    return {\n      [field.name]: getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: field.fields,\n        segments: nextSegments,\n      }),\n    }\n  }\n\n  if (field.type === 'array') {\n    const initialData = getInitialDrawerData({\n      collectionSlug,\n      config,\n      docID,\n      fields: field.fields,\n      segments: nextSegments,\n    })\n\n    initialData.id = ObjectId().toHexString()\n\n    return {\n      [field.name]: [initialData],\n    }\n  }\n\n  if (field.type === 'blocks') {\n    for (const _block of field.blockReferences ?? field.blocks) {\n      const block = typeof _block === 'string' ? config.blocksMap[_block] : _block\n\n      const blockInitialData = getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: block.fields,\n        segments: nextSegments,\n      })\n\n      if (blockInitialData) {\n        blockInitialData.id = ObjectId().toHexString()\n        blockInitialData.blockType = block.slug\n\n        return {\n          [field.name]: [blockInitialData],\n        }\n      }\n    }\n  }\n}\n\nconst JoinFieldComponent: JoinFieldClientComponent = (props) => {\n  const {\n    field,\n    field: { admin: { allowCreate, description } = {}, collection, label, localized, on, required },\n    path: pathFromProps,\n  } = props\n\n  const { id: docID, docConfig } = useDocumentInfo()\n\n  const { config, getEntityConfig } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Label } = {},\n    errorPaths,\n    path,\n    showError,\n    value,\n  } = useField<PaginatedDocs>({\n    potentiallyStalePath: pathFromProps,\n  })\n\n  const fieldErrorCount = errorPaths?.length || (showError ? 1 : 0)\n  const fieldHasErrors = fieldErrorCount > 0\n\n  const filterOptions: null | Where = useMemo(() => {\n    if (!docID) {\n      return null\n    }\n\n    let value: { relationTo: string; value: number | string } | number | string = docID\n\n    if (Array.isArray(field.targetField.relationTo)) {\n      value = {\n        relationTo: docConfig.slug,\n        value,\n      }\n    }\n\n    const where = Array.isArray(collection)\n      ? {}\n      : {\n          [on]: {\n            equals: value,\n          },\n        }\n\n    if (field.where) {\n      return {\n        and: [where, field.where],\n      }\n    }\n\n    return where\n  }, [docID, collection, field.targetField.relationTo, field.where, on, docConfig?.slug])\n\n  const initialDrawerData = useMemo(() => {\n    const relatedCollection = getEntityConfig({\n      collectionSlug: Array.isArray(field.collection) ? field.collection[0] : field.collection,\n    })\n\n    return getInitialDrawerData({\n      collectionSlug: docConfig?.slug,\n      config,\n      docID,\n      fields: relatedCollection?.fields,\n      segments: field.on.split('.'),\n    })\n  }, [getEntityConfig, field.collection, field.on, docConfig?.slug, docID, config])\n\n  if (!docConfig) {\n    return null\n  }\n\n  return (\n    <div\n      className={[fieldBaseClass, fieldHasErrors && 'error', 'join'].filter(Boolean).join(' ')}\n      id={`field-${path?.replace(/\\./g, '__')}`}\n    >\n      <RelationshipTable\n        AfterInput={AfterInput}\n        allowCreate={typeof docID !== 'undefined' && allowCreate}\n        BeforeInput={BeforeInput}\n        disableTable={filterOptions === null}\n        field={field as JoinFieldClient}\n        fieldPath={path}\n        filterOptions={filterOptions}\n        initialData={docID && value ? value : ({ docs: [] } as PaginatedDocs)}\n        initialDrawerData={initialDrawerData}\n        Label={\n          <div className=\"join__header-wrapper\">\n            <h4>\n              {Label || (\n                <FieldLabel label={label} localized={localized} path={path} required={required} />\n              )}\n            </h4>\n            {fieldHasErrors && <ErrorPill count={fieldErrorCount} i18n={i18n} withMessage />}\n          </div>\n        }\n        parent={\n          typeof docID !== 'undefined'\n            ? {\n                id: docID,\n                collectionSlug: docConfig.slug,\n                joinPath: path,\n              }\n            : undefined\n        }\n        relationTo={collection}\n      />\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const JoinField = withCondition(JoinFieldComponent)\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Number/Input.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAUlD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6HlD,CAAA"}

package/dist/fields/Number/Input.js

@@ -0,0 +1,184 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { isNumber } from 'payload/shared';
+import React from 'react';
+import { InputStepper } from '../../elements/InputStepper/index.js';
+import { ReactSelect } from '../../elements/ReactSelect/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { FieldDescription } from '../FieldDescription/index.js';
+import { FieldError } from '../FieldError/index.js';
+import { FieldLabel } from '../FieldLabel/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+import './index.css';
+const baseClass = 'number';
+export const NumberInput = props => {
+  const $ = _c(32);
+  const {
+    AfterInput,
+    BeforeInput,
+    className,
+    Description,
+    description,
+    Error,
+    hasMany,
+    Label,
+    label,
+    localized,
+    max: t0,
+    maxRows: t1,
+    min: t2,
+    onChange,
+    onStep,
+    path,
+    placeholder: placeholderFromProps,
+    readOnly,
+    required,
+    showError,
+    step: t3,
+    style,
+    value,
+    valueToRender
+  } = props;
+  const max = t0 === undefined ? Infinity : t0;
+  const maxRows = t1 === undefined ? Infinity : t1;
+  const min = t2 === undefined ? -Infinity : t2;
+  const step = t3 === undefined ? 1 : t3;
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  let t4;
+  if ($[0] !== AfterInput || $[1] !== BeforeInput || $[2] !== Description || $[3] !== Error || $[4] !== Label || $[5] !== className || $[6] !== description || $[7] !== hasMany || $[8] !== i18n || $[9] !== label || $[10] !== localized || $[11] !== max || $[12] !== maxRows || $[13] !== min || $[14] !== onChange || $[15] !== onStep || $[16] !== path || $[17] !== placeholderFromProps || $[18] !== readOnly || $[19] !== required || $[20] !== showError || $[21] !== step || $[22] !== style || $[23] !== t || $[24] !== value || $[25] !== valueToRender) {
+    const placeholder = getTranslation(placeholderFromProps, i18n) || (hasMany ? t("general:enterANumber") : undefined);
+    const t5 = showError && "error";
+    const t6 = readOnly && "read-only";
+    const t7 = hasMany && "has-many";
+    let t8;
+    if ($[27] !== className || $[28] !== t5 || $[29] !== t6 || $[30] !== t7) {
+      t8 = [fieldBaseClass, baseClass, className, t5, t6, t7].filter(Boolean);
+      $[27] = className;
+      $[28] = t5;
+      $[29] = t6;
+      $[30] = t7;
+      $[31] = t8;
+    } else {
+      t8 = $[31];
+    }
+    t4 = _jsxs("div", {
+      className: t8.join(" "),
+      style,
+      children: [_jsx(RenderCustomComponent, {
+        CustomComponent: Label,
+        Fallback: _jsx(FieldLabel, {
+          label,
+          localized,
+          path,
+          required
+        })
+      }), _jsxs("div", {
+        className: `${fieldBaseClass}__wrap`,
+        children: [_jsx(RenderCustomComponent, {
+          CustomComponent: Error,
+          Fallback: _jsx(FieldError, {
+            path,
+            showError
+          })
+        }), BeforeInput, hasMany ? _jsx(ReactSelect, {
+          className: `field-${path.replace(/\./g, "__")}`,
+          components: {
+            DropdownIndicator: null
+          },
+          disabled: readOnly,
+          filterOption: (_, rawInput) => {
+            const isOverHasMany = Array.isArray(value) && value.length >= maxRows;
+            return isNumber(rawInput) && !isOverHasMany;
+          },
+          isClearable: true,
+          isCreatable: true,
+          isMulti: true,
+          isSortable: true,
+          noOptionsMessage: () => {
+            const isOverHasMany_0 = Array.isArray(value) && value.length >= maxRows;
+            if (isOverHasMany_0) {
+              return t("validation:limitReached", {
+                max: maxRows,
+                value: value.length + 1
+              });
+            }
+            return null;
+          },
+          onChange,
+          options: [],
+          placeholder,
+          showError,
+          value: valueToRender
+        }) : _jsxs("div", {
+          className: "form-input-group",
+          children: [_jsx("input", {
+            "aria-label": getTranslation(label, i18n) || path,
+            className: "form-input",
+            disabled: readOnly,
+            id: `field-${path.replace(/\./g, "__")}`,
+            max,
+            min,
+            name: path,
+            onChange,
+            onWheel: _temp,
+            placeholder,
+            step,
+            type: "number",
+            value: typeof value === "number" ? value : ""
+          }), onStep && _jsx(InputStepper, {
+            disabled: readOnly,
+            onDecrement: () => onStep("down"),
+            onIncrement: () => onStep("up")
+          })]
+        }), AfterInput, _jsx(RenderCustomComponent, {
+          CustomComponent: Description,
+          Fallback: _jsx(FieldDescription, {
+            description,
+            path
+          })
+        })]
+      })]
+    });
+    $[0] = AfterInput;
+    $[1] = BeforeInput;
+    $[2] = Description;
+    $[3] = Error;
+    $[4] = Label;
+    $[5] = className;
+    $[6] = description;
+    $[7] = hasMany;
+    $[8] = i18n;
+    $[9] = label;
+    $[10] = localized;
+    $[11] = max;
+    $[12] = maxRows;
+    $[13] = min;
+    $[14] = onChange;
+    $[15] = onStep;
+    $[16] = path;
+    $[17] = placeholderFromProps;
+    $[18] = readOnly;
+    $[19] = required;
+    $[20] = showError;
+    $[21] = step;
+    $[22] = style;
+    $[23] = t;
+    $[24] = value;
+    $[25] = valueToRender;
+    $[26] = t4;
+  } else {
+    t4 = $[26];
+  }
+  return t4;
+};
+function _temp(e) {
+  e.target.blur();
+}
+//# sourceMappingURL=Input.js.map