@payloadcms/ui 3.0.0-canary.c696728 → 3.0.0-canary.c96fa61

package/dist/elements/EditUpload/index.scss

@@ -2,225 +2,227 @@
 
 $header-height: base(5);
 
-.edit-upload {
-  --edit-upload-cell-spacing: calc(var(--base) * 1.5);
-  --edit-upload-sidebar-width: calc(350px + var(--gutter-h));
-  height: 100%;
-  margin-right: calc(var(--gutter-h) * -1);
-  margin-left: calc(var(--gutter-h) * -1);
-
-  &__header {
-    height: $header-height;
-    border-bottom: 1px solid var(--theme-elevation-150);
-    padding: 0 var(--gutter-h);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    & h2 {
-      margin: 0;
-      text-wrap: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+@layer payload-default {
+  .edit-upload {
+    --edit-upload-cell-spacing: calc(var(--base) * 1.5);
+    --edit-upload-sidebar-width: calc(350px + var(--gutter-h));
+    height: 100%;
+    margin-right: calc(var(--gutter-h) * -1);
+    margin-left: calc(var(--gutter-h) * -1);
+
+    &__header {
+      height: $header-height;
+      border-bottom: 1px solid var(--theme-elevation-150);
+      padding: 0 var(--gutter-h);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      & h2 {
+        margin: 0;
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
-  }
 
-  [dir='rtl'] &__actions {
-    margin-right: auto;
-    margin-left: unset;
-  }
+    [dir='rtl'] &__actions {
+      margin-right: auto;
+      margin-left: unset;
+    }
 
-  &__actions {
-    min-width: 350px;
-    margin-left: auto;
-    padding: base(0.5) 0 base(0.5) base(1.5);
-    justify-content: flex-end;
-    display: flex;
-    gap: base(1);
-    text-wrap: nowrap;
-  }
+    &__actions {
+      min-width: 350px;
+      margin-left: auto;
+      padding: base(0.5) 0 base(0.5) base(1.5);
+      justify-content: flex-end;
+      display: flex;
+      gap: base(1);
+      text-wrap: nowrap;
+    }
 
-  &__toolWrap {
-    display: flex;
-    justify-content: flex-end;
-    height: (calc(100% - #{$header-height}));
-  }
+    &__toolWrap {
+      display: flex;
+      justify-content: flex-end;
+      height: (calc(100% - #{$header-height}));
+    }
 
-  .ReactCrop__selection-addon,
-  &__crop-window {
-    height: 100%;
-    width: 100%;
-  }
+    .ReactCrop__selection-addon,
+    &__crop-window {
+      height: 100%;
+      width: 100%;
+    }
 
-  &__focal-wrapper {
-    position: relative;
-    display: inline-flex;
-    max-height: 100%;
-  }
+    &__focal-wrapper {
+      position: relative;
+      display: inline-flex;
+      max-height: 100%;
+    }
 
-  &__draggable-container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    pointer-events: none;
+    &__draggable-container {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      pointer-events: none;
 
-    &--dragging {
-      pointer-events: all;
+      &--dragging {
+        pointer-events: all;
 
-      .edit-upload__focalPoint {
-        cursor: grabbing;
+        .edit-upload__focalPoint {
+          cursor: grabbing;
+        }
       }
     }
-  }
-
-  &__draggable {
-    @include btn-reset;
-    position: absolute;
-  }
 
-  &__focalPoint {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: grab;
-    width: 50px;
-    height: 50px;
-    transform: translate3d(-50%, -50%, 0);
-    pointer-events: all;
-
-    svg {
+    &__draggable {
+      @include btn-reset;
       position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.5);
-      border-radius: 100%;
-      width: base(2);
-      height: base(2);
-      color: white;
     }
-  }
 
-  &__crop,
-  &__focalOnly {
-    padding: base(1.5) base(1.5) base(1.5) 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
+    &__focalPoint {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: grab;
+      width: 50px;
+      height: 50px;
+      transform: translate3d(-50%, -50%, 0);
+      pointer-events: all;
 
-  &__crop {
-    padding: var(--edit-upload-cell-spacing);
-    padding-left: var(--gutter-h);
-    display: flex;
-    align-items: flex-start;
-    height: 100%;
-  }
+      svg {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 100%;
+        width: base(2);
+        height: base(2);
+        color: white;
+      }
+    }
 
-  &__imageWrap {
-    position: relative;
-  }
+    &__crop,
+    &__focalOnly {
+      padding: base(1.5) base(1.5) base(1.5) 0;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
 
-  &__point {
-    cursor: move;
-    position: absolute;
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 100%;
+    &__crop {
+      padding: var(--edit-upload-cell-spacing);
+      padding-left: var(--gutter-h);
+      display: flex;
+      align-items: flex-start;
+      height: 100%;
+    }
 
-    & svg {
-      width: base(2);
-      height: base(2);
+    &__imageWrap {
+      position: relative;
     }
-  }
 
-  &__sidebar {
-    border-left: 1px solid var(--theme-elevation-150);
-    padding-top: var(--edit-upload-cell-spacing);
-    min-width: var(--edit-upload-sidebar-width);
+    &__point {
+      cursor: move;
+      position: absolute;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 100%;
 
-    & > div:first-child {
-      margin-bottom: base(1);
+      & svg {
+        width: base(2);
+        height: base(2);
+      }
     }
-  }
-
-  &__groupWrap {
-    display: flex;
-    flex-direction: column;
-    gap: base(0.5);
-    padding-right: var(--gutter-h);
-    padding-left: var(--edit-upload-cell-spacing);
-    width: 100%;
 
-    + .edit-upload__groupWrap {
+    &__sidebar {
+      border-left: 1px solid var(--theme-elevation-150);
       padding-top: var(--edit-upload-cell-spacing);
-      margin-top: var(--edit-upload-cell-spacing);
-      border-top: 1px solid var(--theme-elevation-150);
+      min-width: var(--edit-upload-sidebar-width);
+
+      & > div:first-child {
+        margin-bottom: base(1);
+      }
     }
-  }
 
-  &__inputsWrap,
-  &__titleWrap {
-    display: flex;
-    gap: base(1);
-  }
+    &__groupWrap {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.5);
+      padding-right: var(--gutter-h);
+      padding-left: var(--edit-upload-cell-spacing);
+      width: 100%;
 
-  &__titleWrap {
-    justify-content: space-between;
-    align-items: center;
+      + .edit-upload__groupWrap {
+        padding-top: var(--edit-upload-cell-spacing);
+        margin-top: var(--edit-upload-cell-spacing);
+        border-top: 1px solid var(--theme-elevation-150);
+      }
+    }
 
-    & h3 {
-      margin: 0;
+    &__inputsWrap,
+    &__titleWrap {
+      display: flex;
+      gap: base(1);
     }
-  }
 
-  &__reset {
-    height: fit-content;
-    border-radius: var(--style-radius-s);
-    background-color: var(--theme-elevation-150);
-    padding: 0 base(0.4);
-  }
+    &__titleWrap {
+      justify-content: space-between;
+      align-items: center;
 
-  &__input {
-    flex: 1;
-    & input {
-      @include formInput;
+      & h3 {
+        margin: 0;
+      }
     }
-  }
 
-  @include mid-break {
-    --edit-upload-cell-spacing: var(--gutter-h);
-    &__sidebar {
-      padding-left: 0;
-      border-left: 0;
-      width: 100%;
+    &__reset {
+      height: fit-content;
+      border-radius: var(--style-radius-s);
+      background-color: var(--theme-elevation-150);
+      padding: 0 base(0.4);
     }
-    &__toolWrap {
-      flex-direction: column-reverse;
-    }
-  }
 
-  @include small-break {
-    flex-direction: column;
+    &__input {
+      flex: 1;
+      & input {
+        @include formInput;
+      }
+    }
 
-    &__focalPoint {
-      border-right: none;
-      padding: base(1) 0;
+    @include mid-break {
+      --edit-upload-cell-spacing: var(--gutter-h);
+      &__sidebar {
+        padding-left: 0;
+        border-left: 0;
+        width: 100%;
+      }
+      &__toolWrap {
+        flex-direction: column-reverse;
+      }
     }
 
-    &__inputsWrap {
+    @include small-break {
       flex-direction: column;
-      gap: base(1);
-    }
 
-    &__sidebar {
-      min-width: 0;
+      &__focalPoint {
+        border-right: none;
+        padding: base(1) 0;
+      }
+
+      &__inputsWrap {
+        flex-direction: column;
+        gap: base(1);
+      }
+
+      &__sidebar {
+        min-width: 0;
+      }
     }
   }
 }

package/dist/elements/EmailAndUsername/index.d.ts

@@ -0,0 +1,16 @@
+import type { TFunction } from '@payloadcms/translations';
+import type { FieldPermissions, LoginWithUsernameOptions } from 'payload';
+import React from 'react';
+type RenderEmailAndUsernameFieldsProps = {
+    className?: string;
+    loginWithUsername?: false | LoginWithUsernameOptions;
+    operation?: 'create' | 'update';
+    permissions?: {
+        [fieldName: string]: FieldPermissions;
+    };
+    readOnly: boolean;
+    t: TFunction;
+};
+export declare function EmailAndUsernameFields(props: RenderEmailAndUsernameFieldsProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/EmailAndUsername/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EmailAndUsername/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAGzE,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,KAAK,iCAAiC,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,KAAK,GAAG,wBAAwB,CAAA;IACpD,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC/B,WAAW,CAAC,EAAE;QACZ,CAAC,SAAS,EAAE,MAAM,GAAG,gBAAgB,CAAA;KACtC,CAAA;IACD,QAAQ,EAAE,OAAO,CAAA;IACjB,CAAC,EAAE,SAAS,CAAA;CACb,CAAA;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,iCAAiC,qBA6C9E"}

package/dist/elements/EmailAndUsername/index.js

@@ -0,0 +1,47 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { email, username } from 'payload/shared';
+import React, { Fragment } from 'react';
+import { EmailField } from '../../fields/Email/index.js';
+import { TextField } from '../../fields/Text/index.js';
+export function EmailAndUsernameFields(props) {
+  const {
+    className,
+    loginWithUsername,
+    t
+  } = props;
+  const showEmailField = !loginWithUsername || loginWithUsername?.requireEmail || loginWithUsername?.allowEmailLogin;
+  const showUsernameField = Boolean(loginWithUsername);
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [showEmailField ? /*#__PURE__*/_jsx(EmailField, {
+      field: {
+        name: 'email',
+        admin: {
+          autoComplete: 'off'
+        },
+        label: t('general:email'),
+        required: !loginWithUsername || loginWithUsername && loginWithUsername.requireEmail
+      },
+      indexPath: "",
+      parentPath: "",
+      parentSchemaPath: "",
+      path: "email",
+      schemaPath: "email",
+      validate: email
+    }) : null, showUsernameField && /*#__PURE__*/_jsx(TextField, {
+      field: {
+        name: 'username',
+        label: t('authentication:username'),
+        required: loginWithUsername && loginWithUsername.requireUsername
+      },
+      indexPath: "",
+      parentPath: "",
+      parentSchemaPath: "",
+      path: "username",
+      schemaPath: "username",
+      validate: username
+    })]
+  });
+}
+//# sourceMappingURL=index.js.map

package/dist/elements/EmailAndUsername/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["email","username","React","Fragment","EmailField","TextField","EmailAndUsernameFields","props","className","loginWithUsername","t","showEmailField","requireEmail","allowEmailLogin","showUsernameField","Boolean","_jsxs","_jsx","field","name","admin","autoComplete","label","required","indexPath","parentPath","parentSchemaPath","path","schemaPath","validate","requireUsername"],"sources":["../../../src/elements/EmailAndUsername/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TFunction } from '@payloadcms/translations'\nimport type { FieldPermissions, LoginWithUsernameOptions } from 'payload'\n\nimport { email, username } from 'payload/shared'\nimport React, { Fragment } from 'react'\n\nimport { EmailField } from '../../fields/Email/index.js'\nimport { TextField } from '../../fields/Text/index.js'\n\ntype RenderEmailAndUsernameFieldsProps = {\n  className?: string\n  loginWithUsername?: false | LoginWithUsernameOptions\n  operation?: 'create' | 'update'\n  permissions?: {\n    [fieldName: string]: FieldPermissions\n  }\n  readOnly: boolean\n  t: TFunction\n}\n\nexport function EmailAndUsernameFields(props: RenderEmailAndUsernameFieldsProps) {\n  const { className, loginWithUsername, t } = props\n\n  const showEmailField =\n    !loginWithUsername || loginWithUsername?.requireEmail || loginWithUsername?.allowEmailLogin\n\n  const showUsernameField = Boolean(loginWithUsername)\n\n  return (\n    <Fragment>\n      {showEmailField ? (\n        <EmailField\n          field={{\n            name: 'email',\n            admin: {\n              autoComplete: 'off',\n            },\n            label: t('general:email'),\n            required: !loginWithUsername || (loginWithUsername && loginWithUsername.requireEmail),\n          }}\n          indexPath=\"\"\n          parentPath=\"\"\n          parentSchemaPath=\"\"\n          path=\"email\"\n          schemaPath=\"email\"\n          validate={email}\n        />\n      ) : null}\n      {showUsernameField && (\n        <TextField\n          field={{\n            name: 'username',\n            label: t('authentication:username'),\n            required: loginWithUsername && loginWithUsername.requireUsername,\n          }}\n          indexPath=\"\"\n          parentPath=\"\"\n          parentSchemaPath=\"\"\n          path=\"username\"\n          schemaPath=\"username\"\n          validate={username}\n        />\n      )}\n    </Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AAKA,SAASA,KAAK,EAAEC,QAAQ,QAAQ;AAChC,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,UAAU,QAAQ;AAC3B,SAASC,SAAS,QAAQ;AAa1B,OAAO,SAASC,uBAAuBC,KAAwC;EAC7E,MAAM;IAAEC,SAAS;IAAEC,iBAAiB;IAAEC;EAAC,CAAE,GAAGH,KAAA;EAE5C,MAAMI,cAAA,GACJ,CAACF,iBAAA,IAAqBA,iBAAA,EAAmBG,YAAA,IAAgBH,iBAAA,EAAmBI,eAAA;EAE9E,MAAMC,iBAAA,GAAoBC,OAAA,CAAQN,iBAAA;EAElC,oBACEO,KAAA,CAACb,QAAA;eACEQ,cAAA,gBACCM,IAAA,CAACb,UAAA;MACCc,KAAA,EAAO;QACLC,IAAA,EAAM;QACNC,KAAA,EAAO;UACLC,YAAA,EAAc;QAChB;QACAC,KAAA,EAAOZ,CAAA,CAAE;QACTa,QAAA,EAAU,CAACd,iBAAA,IAAsBA,iBAAA,IAAqBA,iBAAA,CAAkBG;MAC1E;MACAY,SAAA,EAAU;MACVC,UAAA,EAAW;MACXC,gBAAA,EAAiB;MACjBC,IAAA,EAAK;MACLC,UAAA,EAAW;MACXC,QAAA,EAAU7B;SAEV,MACHc,iBAAA,iBACCG,IAAA,CAACZ,SAAA;MACCa,KAAA,EAAO;QACLC,IAAA,EAAM;QACNG,KAAA,EAAOZ,CAAA,CAAE;QACTa,QAAA,EAAUd,iBAAA,IAAqBA,iBAAA,CAAkBqB;MACnD;MACAN,SAAA,EAAU;MACVC,UAAA,EAAW;MACXC,gBAAA,EAAiB;MACjBC,IAAA,EAAK;MACLC,UAAA,EAAW;MACXC,QAAA,EAAU5B;;;AAKpB","ignoreList":[]}

package/dist/elements/ErrorPill/index.scss

@@ -1,31 +1,33 @@
 @import '../../scss/styles.scss';
 
-.error-pill {
-  align-self: center;
-  align-items: center;
-  border: 0;
-  padding: 0 base(0.25);
-  flex-shrink: 0;
-  border-radius: var(--style-radius-l);
-  line-height: 18px;
-  font-size: 11px;
-  text-align: center;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--theme-error-300);
-  color: var(--theme-error-950);
+@layer payload-default {
+  .error-pill {
+    align-self: center;
+    align-items: center;
+    border: 0;
+    padding: 0 base(0.25);
+    flex-shrink: 0;
+    border-radius: var(--style-radius-l);
+    line-height: 18px;
+    font-size: 11px;
+    text-align: center;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--theme-error-300);
+    color: var(--theme-error-950);
 
-  &--fixed-width {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    position: relative;
-  }
+    &--fixed-width {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      position: relative;
+    }
 
-  &__count {
-    letter-spacing: 0.5px;
-    margin-left: 0.5px;
+    &__count {
+      letter-spacing: 0.5px;
+      margin-left: 0.5px;
+    }
   }
 }

package/dist/elements/FieldSelect/index.d.ts

@@ -1,14 +1,14 @@
 import type { ClientField, FieldWithPath } from 'payload';
-import React, { type JSX } from 'react';
+import React from 'react';
 import './index.scss';
 export type FieldSelectProps = {
     readonly fields: ClientField[];
     readonly setSelected: (fields: FieldWithPath[]) => void;
 };
-export declare const combineLabel: ({ customLabel, field, prefix, }: {
-    customLabel?: string;
+export declare const combineLabel: ({ CustomLabel, field, prefix, }: {
+    CustomLabel?: React.ReactNode;
     field?: ClientField;
-    prefix?: JSX.Element | string;
-}) => JSX.Element;
+    prefix?: React.ReactNode;
+}) => React.ReactNode;
 export declare const FieldSelect: React.FC<FieldSelectProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/FieldSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAmB,MAAM,SAAS,CAAA;AAG1E,OAAO,KAAK,EAAE,EAAY,KAAK,GAAG,EAAY,MAAM,OAAO,CAAA;AAQ3D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,YAAY,oCAItB;IACD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;CAC9B,KAAG,GAAG,CAAC,OA+CP,CAAA;AAqED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAa,MAAM,SAAS,CAAA;AAGpE,OAAO,KAA6B,MAAM,OAAO,CAAA;AAQjD,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,YAAY,oCAItB;IACD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,KAAG,KAAK,CAAC,SAiBT,CAAA;AAyED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiDlD,CAAA"}