@payloadcms/ui 3.84.0 → 4.0.0-internal.38b7f1d

package/dist/fields/Array/index.scss

@@ -1,121 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .array-field {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 2);
-
-    &__header {
-      display: flex;
-      flex-direction: column;
-      gap: calc(var(--base) / 2);
-
-      &__header-content {
-        display: flex;
-        flex-direction: column;
-        gap: calc(var(--base) / 4);
-      }
-    }
-
-    &--has-no-error {
-      > .array-field__header .array-field__header-content {
-        color: var(--theme-text);
-      }
-    }
-
-    &__header-content {
-      display: flex;
-      align-items: center;
-      gap: base(0.5);
-    }
-
-    &__header-wrap {
-      display: flex;
-      align-items: flex-end;
-      width: 100%;
-      justify-content: space-between;
-    }
-
-    &__header-actions {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      display: flex;
-      color: var(--theme-elevation-800);
-    }
-
-    &__header-action {
-      @extend %btn-reset;
-      cursor: pointer;
-      margin-left: base(0.5);
-
-      &:hover,
-      &:focus-visible {
-        text-decoration: underline;
-        color: var(--theme-elevation-600);
-      }
-    }
-
-    &__row-header {
-      display: flex;
-      align-items: center;
-      gap: base(0.5);
-      pointer-events: none;
-    }
-
-    &__draggable-rows {
-      display: flex;
-      flex-direction: column;
-      gap: calc(var(--base) / 2);
-    }
-
-    &__title {
-      margin-bottom: 0;
-    }
-
-    &__add-row.btn {
-      align-self: flex-start;
-      margin: 2px 0;
-      --btn-color: var(--theme-elevation-400);
-
-      &:hover:not(:disabled) {
-        --btn-color: var(--theme-elevation-800);
-      }
-
-      &:disabled {
-        --btn-color: var(--theme-elevation-300);
-      }
-
-      .btn__label {
-        color: var(--btn-color);
-      }
-      .btn__icon {
-        border-color: var(--btn-color);
-        path {
-          stroke: var(--btn-color);
-        }
-      }
-    }
-  }
-
-  html[data-theme='light'] {
-    .array-field {
-      &--has-error {
-        > .array-field__header .array-field__header-content {
-          color: var(--theme-error-750);
-        }
-      }
-    }
-  }
-
-  html[data-theme='dark'] {
-    .array-field {
-      &--has-error {
-        > .array-field__header .array-field__header-content {
-          color: var(--theme-error-500);
-        }
-      }
-    }
-  }
-}

package/dist/fields/Blocks/BlockSelector/BlockSearch/index.scss

@@ -1,38 +0,0 @@
-@import '../../../../scss/styles.scss';
-
-$icon-width: base(2);
-$icon-margin: base(0.25);
-
-@layer payload-default {
-  .block-search {
-    position: sticky;
-    top: 0;
-    display: flex;
-    width: 100%;
-    align-items: center;
-    z-index: 1;
-
-    &__input {
-      @include formInput;
-    }
-
-    .icon--search {
-      position: absolute;
-      top: 50%;
-      transform: translate3d(0, -50%, 0);
-      right: 0;
-      width: $icon-width;
-      margin: 0 $icon-margin;
-
-      .stroke {
-        stroke: var(--theme-elevation-300);
-      }
-    }
-
-    @include mid-break {
-      &__input {
-        margin-bottom: 0;
-      }
-    }
-  }
-}

package/dist/fields/Blocks/BlockSelector/index.scss

@@ -1,102 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .blocks-drawer {
-    &__blocks-wrapper {
-      padding-top: base(1.5);
-    }
-
-    &__blocks {
-      position: relative;
-      padding: 0;
-      list-style: none;
-      display: grid;
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-      gap: base(1);
-    }
-
-    &__default-image {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      aspect-ratio: 3 / 2;
-      overflow: hidden;
-
-      img,
-      svg {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    &__block-groups {
-      padding: 0;
-      display: flex;
-      flex-direction: column;
-      gap: base(1.5);
-    }
-
-    &__block-group {
-      list-style: none;
-    }
-
-    &__block-group-label {
-      padding-bottom: base(0.5);
-    }
-
-    &__block-group-none {
-      order: 1;
-      padding-top: base(1.5);
-      border-top: 1px solid var(--theme-border-color);
-
-      &:only-child {
-        padding-top: 0;
-        border-top: 0;
-      }
-    }
-
-    @include large-break {
-      &__blocks {
-        grid-template-columns: repeat(5, minmax(0, 1fr));
-      }
-    }
-
-    @include mid-break {
-      &__blocks-wrapper {
-        padding-top: base(1.75);
-      }
-
-      &__blocks {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-      }
-
-      &__block-groups {
-        gap: base(1.75);
-      }
-
-      &__block-group-none {
-        padding-top: base(1.75);
-      }
-    }
-
-    @include small-break {
-      &__blocks-wrapper {
-        padding-top: base(0.75);
-      }
-
-      &__blocks {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-      }
-
-      &__block-groups {
-        gap: base(0.75);
-      }
-
-      &__block-group-none {
-        padding-top: base(0.75);
-      }
-    }
-  }
-}

package/dist/fields/Blocks/SectionTitle/index.scss

@@ -1,63 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .section-title {
-    position: relative;
-    min-width: base(4);
-    max-width: 100%;
-    pointer-events: all;
-    display: flex;
-    overflow: hidden;
-
-    &:after {
-      display: block;
-      content: attr(data-value) ' ';
-      visibility: hidden;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 100%;
-    }
-
-    &:after,
-    &__input {
-      font-family: var(--font-body);
-      font-weight: 600;
-      font-size: base(0.625);
-      padding: 0;
-      width: 100%;
-    }
-
-    &__input {
-      color: var(--theme-elevation-800);
-      background-color: transparent;
-      border: none;
-      min-width: min-content;
-      width: 100%;
-      max-width: 100%;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      resize: none;
-      appearance: none;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-
-      &:hover {
-        box-shadow: inset 0px -2px 0px -1px var(--theme-elevation-150);
-      }
-
-      &:hover,
-      &:focus {
-        outline: 0;
-      }
-
-      &:focus {
-        box-shadow: none;
-      }
-    }
-  }
-}

package/dist/fields/Blocks/index.scss

@@ -1,137 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .blocks-field {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 2);
-
-    &__header {
-      h3 {
-        margin: 0;
-      }
-    }
-
-    &__header-wrap {
-      display: flex;
-      align-items: flex-end;
-      width: 100%;
-      justify-content: space-between;
-    }
-
-    &__heading-with-error {
-      display: flex;
-      align-items: center;
-      gap: base(0.5);
-    }
-
-    &--has-no-error {
-      > .array-field__header .array-field__heading-with-error {
-        color: var(--theme-text);
-      }
-    }
-
-    &--has-error {
-      > .array-field__header {
-        color: var(--theme-error-500);
-      }
-    }
-
-    &__error-pill {
-      align-self: center;
-    }
-
-    &__header-actions {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      display: flex;
-    }
-
-    &__header-action {
-      @extend %btn-reset;
-      cursor: pointer;
-      margin-left: base(0.5);
-
-      &:hover,
-      &:focus-visible {
-        text-decoration: underline;
-      }
-    }
-
-    &__block-header {
-      display: inline-flex;
-      max-width: 100%;
-      width: 100%;
-      overflow: hidden;
-      gap: base(0.375);
-    }
-
-    &__block-number {
-      flex-shrink: 0;
-    }
-
-    &__block-pill {
-      flex-shrink: 0;
-      display: block;
-      line-height: unset;
-    }
-
-    &__rows {
-      display: flex;
-      flex-direction: column;
-      gap: calc(var(--base) / 2);
-    }
-
-    &__drawer-toggler {
-      background-color: transparent;
-      margin: 0;
-      padding: 0;
-      border: none;
-      align-self: flex-start;
-
-      .btn {
-        color: var(--theme-elevation-400);
-        margin: 0;
-
-        &:hover {
-          color: var(--theme-elevation-800);
-        }
-      }
-    }
-  }
-
-  html[data-theme='light'] {
-    .blocks-field--has-error {
-      .section-title__input,
-      .blocks-field__heading-with-error {
-        color: var(--theme-error-750);
-      }
-
-      .blocks-field__row--no-errors,
-      .blocks-field--has-no-error {
-        .section-title__input,
-        .blocks-field__heading-with-error {
-          color: var(--theme-text);
-        }
-      }
-    }
-  }
-
-  html[data-theme='dark'] {
-    .blocks-field--has-error {
-      .section-title__input,
-      .blocks-field__heading-with-error {
-        color: var(--theme-error-500);
-      }
-
-      .blocks-field__row--no-errors,
-      .blocks-field--has-no-error {
-        .section-title__input,
-        .blocks-field__heading-with-error {
-          color: var(--theme-text);
-        }
-      }
-    }
-  }
-}

package/dist/fields/Checkbox/index.scss

@@ -1,149 +0,0 @@
-@import '../../scss/styles.scss';
-
-@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;
-    }
-  }
-
-  .checkbox-input {
-    display: inline-flex;
-    &:hover:not(&--read-only) {
-      label,
-      input {
-        cursor: pointer;
-      }
-    }
-
-    label.field-label {
-      padding-bottom: 0;
-      padding-left: base(0.5);
-    }
-
-    [dir='rtl'] &__input {
-      margin-right: 0;
-      margin-left: base(0.5);
-    }
-
-    &__input {
-      @include formInput;
-      display: flex;
-      padding: 0;
-      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;
-
-      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);
-        }
-      }
-
-      &:hover {
-        .checkbox-input__input,
-        & input[type='checkbox'] {
-          border-color: var(--theme-elevation-250);
-        }
-      }
-    }
-
-    &:not(&--read-only):not(&--checked) {
-      &:hover {
-        cursor: pointer;
-
-        svg {
-          opacity: 0.2;
-        }
-      }
-    }
-
-    &--checked {
-      .checkbox-input__icon {
-        svg {
-          opacity: 1;
-        }
-      }
-    }
-
-    .checkbox-input__icon {
-      .icon--line {
-        width: 1.4rem;
-        height: 1.4rem;
-      }
-
-      &.partial {
-        svg {
-          opacity: 1;
-        }
-      }
-    }
-
-    &--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='dark'] {
-    .checkbox {
-      &.error {
-        .checkbox-input__input {
-          @include darkInputError;
-        }
-      }
-    }
-  }
-}

package/dist/fields/Code/index.scss

@@ -1,26 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .code-field {
-    position: relative;
-
-    &.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);
-      }
-    }
-
-    .read-only {
-      .code-editor {
-        @include readOnly;
-      }
-    }
-  }
-}

package/dist/fields/Collapsible/index.scss

@@ -1,12 +0,0 @@
-@import '../../scss/styles.scss';
-
-@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,31 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .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.scss

@@ -1,23 +0,0 @@
-@import '../../scss/styles.scss';
-
-@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;
-        }
-      }
-    }
-  }
-}