@payloadcms/ui 3.0.0-canary.518fabe → 3.0.0-canary.51be7be

package/dist/fields/Checkbox/index.scss

@@ -1,133 +1,148 @@
 @import '../../scss/styles.scss';
 
-.checkbox {
-  position: relative;
-  margin-bottom: $baseline;
-
-  .tooltip:not([aria-hidden='true']) {
-    right: auto;
-    position: static;
-    transform: translateY(calc(var(--caret-size) * -1));
-    margin-bottom: 0.2em;
-    max-width: fit-content;
-  }
-}
-
-.checkbox-input {
-  display: inline-flex;
-  &:hover:not(&--read-only) {
-    label,
-    input {
-      cursor: pointer;
+@layer payload-default {
+  .checkbox {
+    position: relative;
+    margin-bottom: $baseline;
+
+    .tooltip:not([aria-hidden='true']) {
+      right: auto;
+      position: static;
+      transform: translateY(calc(var(--caret-size) * -1));
+      margin-bottom: 0.2em;
+      max-width: fit-content;
     }
   }
 
-  label {
-    padding-bottom: 0;
-    padding-left: base(0.5);
-  }
+  .checkbox-input {
+    display: inline-flex;
+    &:hover:not(&--read-only) {
+      label,
+      input {
+        cursor: pointer;
+      }
+    }
 
-  [dir='rtl'] &__input {
-    margin-right: 0;
-    margin-left: base(0.5);
-  }
+    label {
+      padding-bottom: 0;
+      padding-left: base(0.5);
+    }
 
-  &__input {
-    @include formInput;
-    display: flex;
-    padding: 0;
-    line-height: 0;
-    position: relative;
-    width: $baseline;
-    height: $baseline;
+    [dir='rtl'] &__input {
+      margin-right: 0;
+      margin-left: base(0.5);
+    }
 
-    & input[type='checkbox'] {
-      position: absolute;
-      // Without the extra 4px, there is an uncheckable area due to the border of the parent element
-      width: calc(100% + 4px);
-      height: calc(100% + 4px);
+    &__input {
+      @include formInput;
+      display: flex;
       padding: 0;
-      margin: 0;
-      margin-left: -2px;
-      margin-top: -2px;
-      opacity: 0;
-      border-radius: 0;
-      z-index: 1;
+      line-height: 0;
+      position: relative;
+      width: $baseline;
+      height: $baseline;
+
+      & input[type='checkbox'] {
+        position: absolute;
+        // Without the extra 4px, there is an uncheckable area due to the border of the parent element
+        width: calc(100% + 4px);
+        height: calc(100% + 4px);
+        padding: 0;
+        margin: 0;
+        margin-left: -2px;
+        margin-top: -2px;
+        opacity: 0;
+        border-radius: 0;
+        z-index: 1;
+      }
     }
-  }
 
-  &__icon {
-    position: absolute;
+    &__icon {
+      position: absolute;
 
-    svg {
-      opacity: 0;
+      svg {
+        opacity: 0;
+      }
     }
-  }
 
-  &:not(&--read-only) {
-    &:active,
-    &:focus-within,
-    &:focus {
-      .checkbox-input__input,
-      & input[type='checkbox'] {
-        outline: 0;
-        box-shadow: 0 0 3px 3px var(--theme-success-400) !important;
-        border: 1px solid var(--theme-elevation-150);
+    &:not(&--read-only) {
+      &:active,
+      &:focus-within,
+      &:focus {
+        .checkbox-input__input,
+        & input[type='checkbox'] {
+          outline: 0;
+          box-shadow: 0 0 3px 3px var(--theme-success-400) !important;
+          border: 1px solid var(--theme-elevation-150);
+        }
       }
-    }
 
-    &:hover {
-      .checkbox-input__input,
-      & input[type='checkbox'] {
-        border-color: var(--theme-elevation-250);
+      &:hover {
+        .checkbox-input__input,
+        & input[type='checkbox'] {
+          border-color: var(--theme-elevation-250);
+        }
       }
     }
-  }
 
-  &:not(&--read-only):not(&--checked) {
-    &:hover {
-      cursor: pointer;
+    &:not(&--read-only):not(&--checked) {
+      &:hover {
+        cursor: pointer;
 
-      svg {
-        opacity: 0.2;
+        svg {
+          opacity: 0.2;
+        }
       }
     }
-  }
 
-  &--checked {
-    .checkbox-input__icon {
-      svg {
-        opacity: 1;
+    &--checked {
+      .checkbox-input__icon {
+        svg {
+          opacity: 1;
+        }
       }
     }
-  }
 
-  &--read-only {
-    .checkbox-input__input {
-      @include readOnly;
+    .checkbox-input__icon {
+      .icon--line {
+        width: 1.4rem;
+        height: 1.4rem;
+      }
+
+      &.partial {
+        svg {
+          opacity: 1;
+        }
+      }
     }
 
-    label {
-      color: var(--theme-elevation-400);
+    &--read-only {
+      .checkbox-input__input {
+        @include readOnly;
+      }
+
+      label {
+        color: var(--theme-elevation-400);
+      }
     }
   }
-}
 
-html[data-theme='light'] {
-  .checkbox {
-    &.error {
-      .checkbox-input__input {
-        @include lightInputError;
+  html[data-theme='light'] {
+    .checkbox {
+      &.error {
+        .checkbox-input__input {
+          @include lightInputError;
+        }
       }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .checkbox {
-    &.error {
-      .checkbox-input__input {
-        @include darkInputError;
+  html[data-theme='dark'] {
+    .checkbox {
+      &.error {
+        .checkbox-input__input {
+          @include darkInputError;
+        }
       }
     }
   }

package/dist/fields/Code/index.scss

@@ -1,24 +1,26 @@
 @import '../../scss/styles.scss';
 
-.code-field {
-  position: relative;
+@layer payload-default {
+  .code-field {
+    position: relative;
 
-  &.error {
-    textarea {
-      border: 1px solid var(--theme-error-500) !important;
+    &.error {
+      textarea {
+        border: 1px solid var(--theme-error-500) !important;
+      }
+      .code-editor {
+        border-color: var(--theme-error-500);
+      }
+      .monaco-editor-background,
+      .margin {
+        background-color: var(--theme-error-50);
+      }
     }
-    .code-editor {
-      border-color: var(--theme-error-500);
-    }
-    .monaco-editor-background,
-    .margin {
-      background-color: var(--theme-error-50);
-    }
-  }
 
-  .read-only {
-    .code-editor {
-      @include readOnly;
+    .read-only {
+      .code-editor {
+        @include readOnly;
+      }
     }
   }
 }

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

@@ -1,9 +1,146 @@
+import type { AdminClient } from 'payload';
 import React from 'react';
 import './index.scss';
 export declare const CollapsibleField: React.FC<Record<string, unknown> & {
-    readonly descriptionProps?: import("payload").FieldDescriptionClientProps<Omit<import("payload").CollapsibleFieldClient, "type"> & Partial<Pick<import("payload").CollapsibleFieldClient, "type">>>;
-    readonly errorProps?: import("payload").FieldErrorClientProps<Omit<import("payload").CollapsibleFieldClient, "type"> & Partial<Pick<import("payload").CollapsibleFieldClient, "type">>>;
-    readonly field: Omit<import("payload").CollapsibleFieldClient, "type"> & Partial<Pick<import("payload").CollapsibleFieldClient, "type">>;
-    readonly labelProps?: import("payload").FieldLabelClientProps<Omit<import("payload").CollapsibleFieldClient, "type"> & Partial<Pick<import("payload").CollapsibleFieldClient, "type">>>;
+    readonly descriptionProps?: import("payload").FieldDescriptionClientProps<(Omit<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin: {
+            components: {
+                RowLabel: import("payload").MappedComponent;
+            } & AdminClient["components"];
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label?: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type"> & Partial<Pick<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin: {
+            components: {
+                RowLabel: import("payload").MappedComponent;
+            } & AdminClient["components"];
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label?: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type">>) | (Omit<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin?: {
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type"> & Partial<Pick<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin?: {
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type">>)>;
+    readonly errorProps?: import("payload").FieldErrorClientProps<(Omit<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin: {
+            components: {
+                RowLabel: import("payload").MappedComponent;
+            } & AdminClient["components"];
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label?: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type"> & Partial<Pick<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin: {
+            components: {
+                RowLabel: import("payload").MappedComponent;
+            } & AdminClient["components"];
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label?: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type">>) | (Omit<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin?: {
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type"> & Partial<Pick<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin?: {
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type">>)>;
+    readonly field: (Omit<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin: {
+            components: {
+                RowLabel: import("payload").MappedComponent;
+            } & AdminClient["components"];
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label?: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type"> & Partial<Pick<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin: {
+            components: {
+                RowLabel: import("payload").MappedComponent;
+            } & AdminClient["components"];
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label?: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type">>) | (Omit<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin?: {
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type"> & Partial<Pick<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin?: {
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type">>);
+    readonly labelProps?: import("payload").FieldLabelClientProps<(Omit<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin: {
+            components: {
+                RowLabel: import("payload").MappedComponent;
+            } & AdminClient["components"];
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label?: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type"> & Partial<Pick<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin: {
+            components: {
+                RowLabel: import("payload").MappedComponent;
+            } & AdminClient["components"];
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label?: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type">>) | (Omit<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin?: {
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type"> & Partial<Pick<{
+        fields: import("payload").ClientField[];
+    } & {
+        admin?: {
+            initCollapsed?: boolean;
+        } & AdminClient;
+        label: Required<import("payload").FieldBaseClient["label"]>;
+    } & Omit<import("payload").FieldBaseClient, "label" | "validate" | "name"> & Pick<import("payload").CollapsibleField, "type">, "type">>)>;
 } & import("payload").FormFieldBase>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Collapsible/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAazE,OAAO,cAAc,CAAA;AAqKrB,eAAO,MAAM,gBAAgB;;;;;oCAA2C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAwD,MAAM,SAAS,CAAA;AAEhG,OAAO,KAAqD,MAAM,OAAO,CAAA;AAazE,OAAO,cAAc,CAAA;AAqKrB,eAAO,MAAM,gBAAgB;;;;;;;;yBACu6mB,CAAC;;;;;;;;;;yBAAD,CAAC;;;;;;;yBAAyH,CAAC;;;;;;;yBAAD,CAAC;;;;;;;;;;;yBAA3H,CAAC;;;;;;;;;;yBAAD,CAAC;;;;;;;yBAAyH,CAAC;;;;;;;yBAAD,CAAC;;;;;;;;;;;yBAA3H,CAAC;;;;;;;;;;yBAAD,CAAC;;;;;;;yBAAyH,CAAC;;;;;;;yBAAD,CAAC;;;;;;;;;;;yBAA3H,CAAC;;;;;;;;;;yBAAD,CAAC;;;;;;;yBAAyH,CAAC;;;;;;;yBAAD,CAAC;;;;oCADv/mB,CAAA"}

package/dist/fields/Collapsible/index.scss

@@ -1,10 +1,12 @@
 @import '../../scss/styles.scss';
 
-.collapsible-field {
-  &__row-label-wrap {
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-    gap: base(0.5);
+@layer payload-default {
+  .collapsible-field {
+    &__row-label-wrap {
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      gap: base(0.5);
+    }
   }
 }

package/dist/fields/ConfirmPassword/index.scss

@@ -1,28 +1,30 @@
 @import '../../scss/styles.scss';
 
-.field-type.confirm-password {
-  position: relative;
+@layer payload-default {
+  .field-type.confirm-password {
+    position: relative;
 
-  input {
-    @include formInput;
+    input {
+      @include formInput;
+    }
   }
-}
 
-html[data-theme='light'] {
-  .field-type.field-type.confirm-password {
-    &.error {
-      input {
-        @include lightInputError;
+  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;
+  html[data-theme='dark'] {
+    .field-type.field-type.confirm-password {
+      &.error {
+        input {
+          @include darkInputError;
+        }
       }
     }
   }

package/dist/fields/DateTime/index.scss

@@ -1,20 +1,22 @@
 @import '../../scss/styles.scss';
 
-html[data-theme='light'] {
-  .date-time-field {
-    &--has-error {
-      .react-datepicker__input-container input {
-        @include lightInputError;
+@layer payload-default {
+  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;
+  html[data-theme='dark'] {
+    .date-time-field {
+      &--has-error {
+        .react-datepicker__input-container input {
+          @include darkInputError;
+        }
       }
     }
   }

package/dist/fields/Email/index.scss

@@ -1,34 +1,36 @@
 @import '../../scss/styles.scss';
 
-.field-type.email {
-  position: relative;
-
-  input {
-    @include formInput;
-  }
+@layer payload-default {
+  .field-type.email {
+    position: relative;
 
-  &.error {
     input {
-      background-color: var(--theme-error-200);
+      @include formInput;
     }
-  }
-}
 
-html[data-theme='light'] {
-  .field-type.email {
     &.error {
       input {
-        @include lightInputError;
+        background-color: var(--theme-error-200);
       }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .field-type.email {
-    &.error {
-      input {
-        @include darkInputError;
+  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/FieldDescription/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles.scss';
 
-.field-description {
-  display: flex;
-  color: var(--theme-elevation-400);
-  margin-top: calc(var(--base) / 4);
+@layer payload-default {
+  .field-description {
+    display: flex;
+    color: var(--theme-elevation-400);
+    margin-top: calc(var(--base) / 4);
 
-  &--margin-bottom {
-    margin-top: 0;
-    margin-bottom: calc(var(--base) / 2);
+    &--margin-bottom {
+      margin-top: 0;
+      margin-bottom: calc(var(--base) / 2);
+    }
   }
 }

package/dist/fields/FieldError/index.scss

@@ -1,16 +1,18 @@
 @import '../../scss/styles';
 
-.field-error.tooltip {
-  font-family: var(--font-body);
-  left: auto;
-  max-width: 75%;
-  right: 0;
-  transform: translateY(calc(var(--caret-size) * -1));
-  color: var(--theme-error-950);
-  background-color: var(--theme-error-300);
+@layer payload-default {
+  .field-error.tooltip {
+    font-family: var(--font-body);
+    left: auto;
+    max-width: 75%;
+    right: 0;
+    transform: translateY(calc(var(--caret-size) * -1));
+    color: var(--theme-error-950);
+    background-color: var(--theme-error-300);
 
-  &::after {
-    border-top-color: var(--theme-error-300);
-    border-bottom-color: var(--theme-error-300);
+    &::after {
+      border-top-color: var(--theme-error-300);
+      border-bottom-color: var(--theme-error-300);
+    }
   }
 }