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

package/dist/elements/NavGroup/index.scss

@@ -1,58 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .nav-group {
-    width: 100%;
-    margin-bottom: base(0.5);
-
-    &__toggle {
-      cursor: pointer;
-      color: var(--theme-elevation-400);
-      background: transparent;
-      padding-left: 0;
-      border: 0;
-      margin-bottom: base(0.25);
-      width: 100%;
-      text-align: left;
-      display: flex;
-      align-items: flex-start;
-      padding: 0;
-      gap: base(0.5);
-      justify-content: space-between;
-
-      svg {
-        flex-shrink: 0;
-        margin-top: base(-0.2);
-      }
-
-      &:hover,
-      &:focus-visible {
-        color: var(--theme-elevation-1000);
-
-        .stroke {
-          stroke: var(--theme-elevation-1000);
-        }
-      }
-
-      &:focus-visible {
-        outline: none;
-      }
-    }
-
-    &__indicator {
-      position: relative;
-      flex-shrink: 0;
-
-      svg .stroke {
-        stroke: var(--theme-elevation-200);
-      }
-    }
-
-    &--collapsed {
-      .collapsible__toggle {
-        border-bottom-right-radius: $style-radius-m;
-        border-bottom-left-radius: $style-radius-m;
-      }
-    }
-  }
-}

package/dist/elements/Pill/index.scss

@@ -1,182 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .pill {
-    --pill-padding-block-start: 0px;
-    --pill-padding-inline-start: 0px;
-    --pill-padding-block-end: 0px;
-    --pill-padding-inline-end: 0px;
-    font-size: 1rem;
-    line-height: calc(var(--base) * 1.2);
-    display: inline-flex;
-    background: var(--theme-elevation-150);
-    color: var(--theme-elevation-800);
-    border-radius: $style-radius-s;
-    cursor: inherit;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    border: 0;
-    align-items: center;
-    flex-shrink: 0;
-    gap: base(0.2);
-    padding: var(--pill-padding-block-start) var(--pill-padding-inline-end)
-      var(--pill-padding-block-end) var(--pill-padding-inline-start);
-    --pill-icon-size: calc(var(--base) * 1.2);
-
-    &--rounded {
-      border-radius: var(--style-radius-l);
-      font-size: 12px;
-    }
-
-    &:active,
-    &:focus:not(:focus-visible) {
-      outline: none;
-    }
-
-    &:focus-visible {
-      outline: var(--accessibility-outline);
-      outline-offset: var(--accessibility-outline-offset);
-    }
-
-    &__icon .icon {
-      flex-shrink: 0;
-      width: var(--pill-icon-size);
-      height: var(--pill-icon-size);
-    }
-
-    &__label {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &--has-action {
-      cursor: pointer;
-      text-decoration: none;
-    }
-
-    &--is-dragging {
-      cursor: grabbing;
-    }
-
-    &--has-icon {
-      gap: 0;
-      --pill-padding-inline-start: base(0.4);
-      --pill-padding-inline-end: base(0.1);
-
-      svg {
-        display: block;
-      }
-    }
-
-    &--align-icon-left {
-      flex-direction: row-reverse;
-      padding-inline-start: base(0.1);
-      padding-inline-end: base(0.4);
-    }
-
-    &--style-white {
-      background: var(--theme-elevation-0);
-
-      &.pill--has-action {
-        &:hover,
-        &:active {
-          background: var(--theme-elevation-100);
-        }
-      }
-    }
-
-    &--style-always-white {
-      background: var(--theme-elevation-850);
-      color: var(--theme-elevation-0);
-
-      &.pill--has-action {
-        &:hover,
-        &:active {
-          background: var(--theme-elevation-750);
-        }
-      }
-    }
-
-    &--style-light {
-      &.pill--has-action {
-        &:hover,
-        &:active {
-          background: var(--theme-elevation-100);
-        }
-      }
-    }
-
-    &--style-light-gray {
-      background: var(--theme-elevation-100);
-      color: var(--theme-elevation-800);
-    }
-
-    &--style-warning {
-      background: var(--theme-warning-150);
-      color: var(--theme-warning-800);
-    }
-
-    &--style-success {
-      background: var(--theme-success-150);
-      color: var(--theme-success-800);
-    }
-
-    &--style-error {
-      background: var(--theme-error-150);
-      color: var(--theme-error-800);
-    }
-
-    &--style-dark {
-      background: var(--theme-elevation-800);
-      color: var(--theme-elevation-0);
-
-      svg {
-        @include color-svg(var(--theme-elevation-0));
-      }
-
-      &.pill--has-action {
-        &:hover {
-          background: var(--theme-elevation-750);
-        }
-
-        &:active {
-          background: var(--theme-elevation-700);
-        }
-      }
-    }
-
-    &--size-medium {
-      --pill-padding-block-start: calc(var(--base) * 0.2);
-      --pill-padding-inline-end: calc(var(--base) * 0.6);
-      --pill-padding-block-end: calc(var(--base) * 0.2);
-      --pill-padding-inline-start: calc(var(--base) * 0.6);
-    }
-
-    &--size-small {
-      --pill-icon-size: calc(var(--base) * 0.9);
-      --pill-padding-block-start: 0;
-      --pill-padding-inline-end: calc(var(--base) * 0.4);
-      --pill-padding-inline-start: calc(var(--base) * 0.4);
-      --pill-padding-block-end: 0;
-    }
-  }
-
-  html[data-theme='light'] {
-    .pill {
-      &--style-always-white {
-        background: var(--theme-elevation-0);
-        color: var(--theme-elevation-800);
-        border: 1px solid var(--theme-elevation-100);
-
-        &.pill--has-action {
-          &:hover,
-          &:active {
-            background: var(--theme-elevation-100);
-          }
-        }
-      }
-    }
-  }
-}

package/dist/elements/Popup/PopupButtonList/index.scss

@@ -1,69 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .popup-button-list {
-    --list-button-padding: calc(var(--base) * 0.5);
-    --popup-button-list-gap: 3px;
-    display: flex;
-    flex-direction: column;
-    text-align: left;
-    [dir='rtl'] &__text-align--left {
-      text-align: right;
-    }
-    &__text-align--left {
-      text-align: left;
-    }
-
-    &__text-align--center {
-      text-align: center;
-    }
-    [dir='rtl'] &__text-align--right {
-      text-align: left;
-    }
-    &__text-align--right {
-      text-align: right;
-    }
-
-    &__button {
-      @extend %btn-reset;
-      padding-left: var(--list-button-padding);
-      padding-right: var(--list-button-padding);
-      padding-top: calc(2px + var(--popup-button-list-gap) / 2);
-      padding-bottom: calc(2px + var(--popup-button-list-gap) / 2);
-      cursor: pointer;
-      text-align: inherit;
-      line-height: var(--base);
-      text-decoration: none;
-      border-radius: 3px;
-      width: 100%;
-      button {
-        @extend %btn-reset;
-
-        &:focus-visible {
-          outline: none;
-        }
-      }
-
-      &:hover,
-      &:focus-visible,
-      &:focus-within {
-        outline: none;
-        background-color: var(--popup-button-highlight);
-      }
-    }
-
-    &__button--selected {
-      background-color: var(--theme-elevation-150);
-    }
-
-    &__disabled {
-      cursor: not-allowed;
-      --popup-button-highlight: transparent;
-      background-color: var(--popup-button-highlight);
-      color: var(--theme-elevation-350);
-      &:hover {
-        --popup-button-highlight: var(--theme-elevation-50);
-      }
-    }
-  }
-}

package/dist/elements/Popup/PopupTrigger/index.scss

@@ -1,39 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .popup-button {
-    height: 100%;
-    color: currentColor;
-    padding: 0;
-    font-size: inherit;
-    line-height: inherit;
-    font-family: inherit;
-    border: 0;
-    cursor: pointer;
-    display: inline-flex;
-
-    &--background {
-      background: transparent;
-    }
-
-    &--size-xsmall {
-      padding: base(0.1);
-    }
-
-    &--size-small {
-      padding: base(0.2);
-    }
-
-    &--size-medium {
-      padding: base(0.3);
-    }
-
-    &--size-large {
-      padding: base(0.4);
-    }
-
-    &--disabled {
-      cursor: not-allowed;
-    }
-  }
-}

package/dist/elements/Popup/index.scss

@@ -1,83 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .popup {
-    position: relative;
-
-    &__trigger-wrap {
-      display: flex;
-      align-items: stretch;
-      height: 100%;
-      cursor: pointer;
-    }
-
-    &__on-hover-watch {
-      display: contents;
-    }
-  }
-
-  .popup__hidden-content {
-    display: none;
-  }
-
-  .popup__content {
-    --popup-caret-size: 8px;
-    --popup-button-highlight: var(--theme-elevation-150);
-
-    position: absolute;
-    z-index: var(--z-popup);
-    background: var(--theme-input-bg);
-    color: var(--theme-text);
-    border-radius: 4px;
-    padding: calc(var(--base) * 0.5);
-    min-width: 150px;
-    max-width: calc(100vw - var(--base));
-    @include shadow-lg;
-
-    &.popup--size-xsmall {
-      min-width: 80px;
-    }
-    &.popup--size-small {
-      min-width: 100px;
-    }
-    &.popup--size-large {
-      min-width: 200px;
-    }
-    &.popup--size-fit-content {
-      min-width: fit-content;
-    }
-  }
-
-  .popup__scroll-container {
-    overflow-y: auto;
-    max-height: calc(var(--base) * 10);
-
-    &:not(.popup__scroll-container--show-scrollbar) {
-      scrollbar-width: none; // Firefox
-      -ms-overflow-style: none; // IE/Edge
-
-      &::-webkit-scrollbar {
-        display: none; // Chrome/Safari/Opera
-      }
-    }
-  }
-
-  .popup__caret {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: var(--popup-caret-size) solid transparent;
-    left: var(--caret-left, 16px);
-    transform: translateX(-50%);
-
-    .popup--v-bottom & {
-      top: calc(var(--popup-caret-size) * -2);
-      border-bottom-color: var(--theme-input-bg);
-    }
-
-    .popup--v-top & {
-      bottom: calc(var(--popup-caret-size) * -2);
-      border-top-color: var(--theme-input-bg);
-    }
-  }
-}

package/dist/elements/ReactSelect/ClearIndicator/index.scss

@@ -1,12 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .clear-indicator {
-    cursor: pointer;
-    display: flex;
-
-    &:focus-visible {
-      outline: var(--accessibility-outline);
-    }
-  }
-}

package/dist/elements/ReactSelect/DropdownIndicator/index.scss

@@ -1,19 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .dropdown-indicator {
-    cursor: pointer;
-    display: flex;
-    @include btn-reset;
-
-    &:focus-visible {
-      outline: var(--accessibility-outline);
-    }
-
-    &__icon {
-      .stroke {
-        stroke-width: 1px;
-      }
-    }
-  }
-}

package/dist/elements/ReactSelect/MultiValue/index.scss

@@ -1,39 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .multi-value {
-    &.rs__multi-value {
-      display: flex;
-      padding: 0;
-      border: 1px solid var(--theme-border-color);
-      border-radius: var(--style-radius-s);
-      line-height: calc(#{$baseline} - 2px);
-      margin: base(0.25) base(0.5) base(0.25) 0;
-      transition: border 0.2s cubic-bezier(0.2, 0, 0, 1);
-
-      &:hover {
-        border: 1px solid var(--theme-elevation-250);
-      }
-    }
-
-    &--is-dragging {
-      z-index: 2;
-    }
-  }
-
-  html[data-theme='light'] {
-    .multi-value {
-      &.rs__multi-value {
-        background: var(--theme-elevation-50);
-      }
-    }
-  }
-
-  html[data-theme='dark'] {
-    .multi-value {
-      &.rs__multi-value {
-        background: var(--theme-elevation-50);
-      }
-    }
-  }
-}

package/dist/elements/ReactSelect/MultiValueLabel/index.scss

@@ -1,27 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .multi-value-label {
-    @extend %small;
-    display: flex;
-    align-items: center;
-    max-width: 150px;
-    color: currentColor;
-    padding: 0 base(0.4);
-
-    &__text {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-
-      &--editable {
-        cursor: text;
-        outline: var(--accessibility-outline);
-      }
-    }
-
-    &:focus-visible {
-      outline: var(--accessibility-outline);
-    }
-  }
-}

package/dist/elements/ReactSelect/MultiValueRemove/index.scss

@@ -1,26 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .multi-value-remove {
-    cursor: pointer;
-    width: base(1);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    background-color: transparent;
-    border: none;
-    padding: 0;
-    color: inherit;
-
-    &:hover {
-      color: var(--theme-elevation-800);
-      background: var(--theme-elevation-150);
-    }
-
-    &__icon {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}

package/dist/elements/ReactSelect/index.scss

@@ -1,84 +0,0 @@
-@import '../../scss/styles';
-
-@layer payload-default {
-  .react-select-container {
-    width: 100%;
-  }
-
-  .react-select {
-    .rs__control {
-      @include formInput;
-      height: auto;
-      padding: base(0.35) base(0.6);
-      flex-wrap: nowrap;
-    }
-
-    .rs__menu-notice {
-      padding: base(0.5) base(0.6);
-    }
-
-    .rs__indicator {
-      padding: 0px 4px;
-      cursor: pointer;
-    }
-
-    .rs__indicator-separator {
-      display: none;
-    }
-
-    .rs__input-container {
-      color: var(--theme-elevation-1000);
-    }
-
-    .rs__input {
-      font-family: var(--font-body);
-      width: 10px;
-    }
-
-    .rs__menu {
-      z-index: 4;
-      border-radius: 0;
-      @include shadow-lg;
-      background: var(--theme-input-bg);
-    }
-
-    .rs__group-heading {
-      color: var(--theme-elevation-800);
-      padding-left: base(0.5);
-      margin-top: base(0.25);
-      margin-bottom: base(0.25);
-    }
-
-    .rs__option {
-      font-family: var(--font-body);
-      font-size: $baseline-body-size;
-      padding: base(0.375) base(0.75);
-      color: var(--theme-elevation-800);
-
-      &--is-focused {
-        background-color: var(--theme-elevation-100);
-      }
-
-      &--is-selected {
-        background-color: var(--theme-elevation-300);
-      }
-    }
-
-    &--error,
-    &--error:hover,
-    &--error:focus-within {
-      div.rs__control {
-        background-color: var(--theme-error-50);
-        border: 1px solid var(--theme-error-500);
-
-        & > div.rs__indicator > button.dropdown-indicator[type='button'] {
-          border: none;
-        }
-      }
-    }
-
-    &.rs--is-disabled .rs__control {
-      @include readOnly;
-    }
-  }
-}