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

package/dist/elements/DrawerActionHeader/index.scss

@@ -1,24 +0,0 @@
-.drawer-action-header {
-  padding-top: calc(var(--base) * 2);
-  padding-bottom: calc(var(--base) * 1.2);
-  border-bottom: 1px solid var(--theme-elevation-100);
-
-  &__content {
-    margin-left: var(--gutter-h);
-    margin-right: var(--gutter-h);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  &__title {
-    margin: 0;
-  }
-
-  &__actions {
-    display: flex;
-    margin-left: auto;
-    padding-left: var(--base);
-    gap: calc(var(--base) * 0.4);
-  }
-}

package/dist/elements/DrawerContentContainer/index.scss

@@ -1,6 +0,0 @@
-.drawer-content-container {
-  padding: calc(var(--base) * 2) var(--gutter-h);
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-}

package/dist/elements/DuplicateDocument/SelectLocalesDrawer/index.scss

@@ -1,24 +0,0 @@
-@import '../../../scss/styles.scss';
-
-.select-locales-drawer {
-  &__sub-header {
-    padding: 0 var(--gutter-h);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid var(--theme-border-color);
-  }
-
-  &__content {
-    padding: calc(var(--base) * 1.5) var(--gutter-h);
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base));
-  }
-
-  &__item {
-    display: flex;
-    flex-direction: row;
-    gap: calc(var(--base) * 0.5);
-  }
-}

package/dist/elements/EditUpload/index.scss

@@ -1,228 +0,0 @@
-@import '../../scss/styles.scss';
-@import './library.scss';
-
-$header-height: base(5);
-
-@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;
-    }
-
-    &__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}));
-    }
-
-    .ReactCrop__selection-addon,
-    &__crop-window {
-      height: 100%;
-      width: 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;
-
-      &--dragging {
-        pointer-events: all;
-
-        .edit-upload__focalPoint {
-          cursor: grabbing;
-        }
-      }
-    }
-
-    &__draggable {
-      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 {
-        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;
-    }
-
-    &__crop {
-      padding: var(--edit-upload-cell-spacing);
-      padding-left: var(--gutter-h);
-      display: flex;
-      align-items: flex-start;
-      height: 100%;
-    }
-
-    &__imageWrap {
-      position: relative;
-    }
-
-    &__point {
-      cursor: move;
-      position: absolute;
-      background: rgba(0, 0, 0, 0.5);
-      border-radius: 100%;
-
-      & svg {
-        width: base(2);
-        height: base(2);
-      }
-    }
-
-    &__sidebar {
-      border-left: 1px solid var(--theme-elevation-150);
-      padding-top: var(--edit-upload-cell-spacing);
-      min-width: var(--edit-upload-sidebar-width);
-
-      & > div:first-child {
-        margin-bottom: 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%;
-
-      + .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);
-      }
-    }
-
-    &__inputsWrap,
-    &__titleWrap {
-      display: flex;
-      gap: base(1);
-    }
-
-    &__titleWrap {
-      justify-content: space-between;
-      align-items: center;
-
-      & h3 {
-        margin: 0;
-      }
-    }
-
-    &__reset {
-      height: fit-content;
-      border-radius: var(--style-radius-s);
-      background-color: var(--theme-elevation-150);
-      padding: 0 base(0.4);
-    }
-
-    &__input {
-      flex: 1;
-      & input {
-        @include formInput;
-      }
-    }
-
-    @include mid-break {
-      --edit-upload-cell-spacing: var(--gutter-h);
-      &__sidebar {
-        padding-left: 0;
-        border-left: 0;
-        width: 100%;
-      }
-      &__toolWrap {
-        flex-direction: column-reverse;
-      }
-    }
-
-    @include small-break {
-      flex-direction: column;
-
-      &__focalPoint {
-        border-right: none;
-        padding: base(1) 0;
-      }
-
-      &__inputsWrap {
-        flex-direction: column;
-        gap: base(1);
-      }
-
-      &__sidebar {
-        min-width: 0;
-      }
-    }
-  }
-}

package/dist/elements/FieldDiffContainer/index.scss

@@ -1,45 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .field-diff {
-    &__locale-label {
-      background: var(--theme-elevation-100);
-      border-radius: var(--style-radius-s);
-      padding: calc(var(--base) * 0.2);
-      // border-radius: $style-radius-m;
-      [dir='ltr'] & {
-        margin-right: calc(var(--base) * 0.25);
-      }
-      [dir='rtl'] & {
-        margin-left: calc(var(--base) * 0.25);
-      }
-    }
-
-    &-container {
-      position: relative;
-
-      // Vertical separator line - not needed anymore, as the parent version view container adds a vertical line that spans the entire height of the container.
-      /*
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: var(--left-offset);
-      width: 1px;
-      background-color: var(--theme-elevation-100);
-      transform: translateX(-50%); // Center the line
-    }*/
-    }
-
-    &-content {
-      display: grid;
-      // Need to use 50% 50% so that we can apply overflow-x without the column shrinking to the content width.
-      // Need -base(0.5) to enure the gap is center aligned - this is required when using 50% over 1fr.
-      grid-template-columns: calc(50% - base(0.5)) calc(50% - base(0.5));
-      gap: base(1);
-      background: var(--theme-elevation-50);
-      padding: base(0.5);
-    }
-  }
-}

package/dist/elements/FieldDiffLabel/index.scss

@@ -1,11 +0,0 @@
-@layer payload-default {
-  .field-diff-label {
-    margin-bottom: calc(var(--base) * 0.35);
-    font-weight: 600;
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    align-items: center;
-    line-height: normal;
-  }
-}

package/dist/elements/FieldSelect/index.scss

@@ -1,7 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .field-select {
-    margin-bottom: base(1);
-  }
-}

package/dist/elements/Gutter/index.scss

@@ -1,21 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .gutter {
-    &--left {
-      padding-left: var(--gutter-h);
-    }
-
-    &--right {
-      padding-right: var(--gutter-h);
-    }
-
-    &--negative-left {
-      margin-left: calc(-1 * var(--gutter-h));
-    }
-
-    &--negative-right {
-      margin-right: calc(-1 * var(--gutter-h));
-    }
-  }
-}

package/dist/elements/HTMLDiff/colors.scss

@@ -1,35 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  :root {
-    --diff-delete-pill-bg: var(--theme-error-200);
-    --diff-delete-pill-color: var(--theme-error-600);
-    --diff-delete-pill-border: var(--theme-error-400);
-    --diff-delete-parent-bg: var(--theme-error-100);
-    --diff-delete-parent-color: var(--theme-error-800);
-    --diff-delete-link-color: var(--theme-error-600);
-
-    --diff-create-pill-bg: var(--theme-success-200);
-    --diff-create-pill-color: var(--theme-success-600);
-    --diff-create-pill-border: var(--theme-success-400);
-    --diff-create-parent-bg: var(--theme-success-100);
-    --diff-create-parent-color: var(--theme-success-800);
-    --diff-create-link-color: var(--theme-success-600);
-  }
-
-  html[data-theme='dark'] {
-    --diff-delete-pill-bg: var(--theme-error-200);
-    --diff-delete-pill-color: var(--theme-error-650);
-    --diff-delete-pill-border: var(--theme-error-400);
-    --diff-delete-parent-bg: var(--theme-error-100);
-    --diff-delete-parent-color: var(--theme-error-900);
-    --diff-delete-link-color: var(--theme-error-750);
-
-    --diff-create-pill-bg: var(--theme-success-200);
-    --diff-create-pill-color: var(--theme-success-650);
-    --diff-create-pill-border: var(--theme-success-400);
-    --diff-create-parent-bg: var(--theme-success-100);
-    --diff-create-parent-color: var(--theme-success-900);
-    --diff-create-link-color: var(--theme-success-750);
-  }
-}

package/dist/elements/HTMLDiff/index.scss

@@ -1,170 +0,0 @@
-@import '../../scss/styles.scss';
-@import './colors.scss';
-
-@layer payload-default {
-  .html-diff {
-    font-size: base(0.7);
-    letter-spacing: 0.02em;
-
-    &-no-value {
-      color: var(--theme-elevation-400);
-    }
-
-    pre {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    // Apply background color to parents that have children with diffs
-    p,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    blockquote,
-    pre,
-    h6 {
-      &:not([data-enable-match='false']) {
-        &:has([data-match-type='create']) {
-          position: relative;
-          z-index: 1;
-          &::before {
-            content: '';
-            position: absolute;
-            top: -(base(0.5));
-            bottom: -(base(0.5));
-            left: -10px;
-            right: -(base(0.5));
-            display: block;
-            background-color: var(--diff-create-parent-bg);
-            color: var(--diff-create-parent-color);
-            z-index: -1; /* Place behind the text */
-          }
-        }
-
-        &:has([data-match-type='delete']) {
-          position: relative;
-          z-index: 1;
-          &::before {
-            content: '';
-            position: absolute;
-            top: -(base(0.5));
-            bottom: -(base(0.5));
-            left: -(base(0.5));
-            right: -10px;
-            display: block;
-            background-color: var(--diff-delete-parent-bg);
-            color: var(--diff-delete-parent-color);
-            z-index: -1; /* Place behind the text */
-          }
-        }
-      }
-    }
-
-    li {
-      &:not([data-enable-match='false']) {
-        &:has([data-match-type='create']) {
-          position: relative;
-          z-index: 1;
-          &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: -10px;
-            right: -(base(0.5));
-            display: block;
-            background-color: var(--diff-create-parent-bg);
-            color: var(--diff-create-parent-color);
-            z-index: -1; /* Place behind the text */
-          }
-        }
-
-        &:has([data-match-type='delete']) {
-          position: relative;
-          z-index: 1;
-          &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: -(base(0.5));
-            right: -10px;
-            display: block;
-            background-color: var(--diff-delete-parent-bg);
-            color: var(--diff-delete-parent-color);
-            z-index: -1; /* Place behind the text */
-          }
-        }
-      }
-    }
-
-    li::marker {
-      color: var(--theme-text);
-    }
-
-    [data-match-type='delete']:not([data-enable-match='false']):not(
-        :is([data-enable-match='false'] *)
-      ) {
-      color: var(--diff-delete-pill-color);
-      text-decoration-color: var(--diff-delete-pill-color);
-      text-decoration-line: line-through;
-      background-color: var(--diff-delete-pill-bg);
-      border-radius: 4px;
-      text-decoration-thickness: 1px;
-    }
-
-    a[data-match-type='delete']
-      :not([data-enable-match='false'])
-      :not(:is([data-enable-match='false'] *)) {
-      color: var(--diff-delete-link-color);
-    }
-
-    // :not(img) required to increase specificity
-    a[data-match-type='create']:not(img)
-      :not([data-enable-match='false'])
-      :not(:is([data-enable-match='false'] *)) {
-      color: var(--diff-create-link-color);
-    }
-
-    [data-match-type='create']:not(img):not([data-enable-match='false']):not(
-        :is([data-enable-match='false'] *)
-      ) {
-      background-color: var(--diff-create-pill-bg);
-      color: var(--diff-create-pill-color);
-      border-radius: 4px;
-    }
-
-    .html-diff {
-      &-create-inline-wrapper,
-      &-delete-inline-wrapper {
-        display: inline-flex;
-      }
-
-      &-create-block-wrapper,
-      &-delete-block-wrapper {
-        display: flex;
-      }
-
-      &-create-inline-wrapper,
-      &-delete-inline-wrapper,
-      &-create-block-wrapper,
-      &-delete-block-wrapper {
-        position: relative;
-        align-items: center;
-        flex-direction: row;
-
-        &::after {
-          position: absolute;
-          top: 0;
-          left: 0;
-          display: block;
-          width: 100%;
-          height: 100%;
-          content: '';
-        }
-      }
-    }
-  }
-}

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import './index.scss';
-export declare const Hamburger: React.FC<{
-    readonly closeIcon?: 'collapse' | 'x';
-    readonly isActive?: boolean;
-}>;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Hamburger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,UAAU,GAAG,GAAG,CAAA;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CA2BA,CAAA"}

package/dist/elements/Hamburger/index.js

@@ -1,52 +0,0 @@
-'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js';
-import { ChevronIcon } from '../../icons/Chevron/index.js';
-import { CloseMenuIcon } from '../../icons/CloseMenu/index.js';
-import { useTranslation } from '../../providers/Translation/index.js';
-import './index.scss';
-const baseClass = 'hamburger';
-export const Hamburger = props => {
-  const $ = _c(4);
-  const {
-    t
-  } = useTranslation();
-  const {
-    closeIcon: t0,
-    isActive: t1
-  } = props;
-  const closeIcon = t0 === undefined ? "x" : t0;
-  const isActive = t1 === undefined ? false : t1;
-  let t2;
-  if ($[0] !== closeIcon || $[1] !== isActive || $[2] !== t) {
-    t2 = _jsxs("div", {
-      className: baseClass,
-      children: [!isActive && _jsx("div", {
-        "aria-label": t("general:open"),
-        className: `${baseClass}__open-icon`,
-        title: t("general:open"),
-        children: _jsx(AlignJustifiedIcon, {
-          size: 16
-        })
-      }), isActive && _jsxs("div", {
-        "aria-label": closeIcon === "collapse" ? t("general:collapse") : t("general:close"),
-        className: `${baseClass}__close-icon`,
-        title: closeIcon === "collapse" ? t("general:collapse") : t("general:close"),
-        children: [closeIcon === "x" && _jsx(CloseMenuIcon, {}), closeIcon === "collapse" && _jsx(ChevronIcon, {
-          direction: "left"
-        })]
-      })]
-    });
-    $[0] = closeIcon;
-    $[1] = isActive;
-    $[2] = t;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  return t2;
-};
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["c","_c","React","AlignJustifiedIcon","ChevronIcon","CloseMenuIcon","useTranslation","baseClass","Hamburger","props","$","t","closeIcon","t0","isActive","t1","undefined","t2","_jsxs","className","children","_jsx","title","size","direction"],"sources":["../../../src/elements/Hamburger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CloseMenuIcon } from '../../icons/CloseMenu/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'hamburger'\n\nexport const Hamburger: React.FC<{\n  readonly closeIcon?: 'collapse' | 'x'\n  readonly isActive?: boolean\n}> = (props) => {\n  const { t } = useTranslation()\n  const { closeIcon = 'x', isActive = false } = props\n\n  return (\n    <div className={baseClass}>\n      {!isActive && (\n        <div\n          aria-label={t('general:open')}\n          className={`${baseClass}__open-icon`}\n          title={t('general:open')}\n        >\n          <AlignJustifiedIcon size={16} />\n        </div>\n      )}\n      {isActive && (\n        <div\n          aria-label={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n          className={`${baseClass}__close-icon`}\n          title={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n        >\n          {closeIcon === 'x' && <CloseMenuIcon />}\n          {closeIcon === 'collapse' && <ChevronIcon direction=\"left\" />}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,WAAW,QAAQ;AAC5B,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,SAAA,GAGRC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU;EAAA,IAAcL,cAAA;EACd;IAAAM,SAAA,EAAAC,EAAA;IAAAC,QAAA,EAAAC;EAAA,IAA8CN,KAAA;EAAtC,MAAAG,SAAA,GAAAC,EAAe,KAAAG,SAAA,GAAH,GAAG,GAAfH,EAAe;EAAE,MAAAC,QAAA,GAAAC,EAAgB,KAAAC,SAAA,WAAhBD,EAAgB;EAAA,IAAAE,EAAA;EAAA,IAAAP,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAI,QAAA,IAAAJ,CAAA,QAAAC,CAAA;IAGvCM,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,QAAA,GACE,CAACN,QAAA,IACAO,IAAA,CAAC;QAAA,cACaV,CAAA,CAAE;QAAAQ,SAAA,EACH,GAAAZ,SAAA,aAAyB;QAAAe,KAAA,EAC7BX,CAAA,CAAE;QAAAS,QAAA,EAETC,IAAA,CAAAlB,kBAAA;UAAAoB,IAAA;QAAA,C;UAGHT,QAAA,IACCI,KAAA,CAAC;QAAA,cACaN,SAAA,KAAc,aAAaD,CAAA,CAAE,sBAAsBA,CAAA,CAAE;QAAAQ,SAAA,EACtD,GAAAZ,SAAA,cAA0B;QAAAe,KAAA,EAC9BV,SAAA,KAAc,aAAaD,CAAA,CAAE,sBAAsBA,CAAA,CAAE;QAAAS,QAAA,GAE3DR,SAAA,KAAc,OAAOS,IAAA,CAAAhB,aAAA,IAAC,GACtBO,SAAA,KAAc,cAAcS,IAAA,CAAAjB,WAAA;UAAAoB,SAAA,EAAuB;QAAA,C;;;;;;;;;;SAjB1DP,E;CAsBJ","ignoreList":[]}

package/dist/elements/Hamburger/index.scss

@@ -1,46 +0,0 @@
-@import '../../scss/styles';
-
-@layer payload-default {
-  .hamburger {
-    padding: 0;
-    border: 0;
-    cursor: pointer;
-    background-color: var(--theme-bg);
-    outline: none;
-    position: relative;
-    color: var(--theme-text);
-    box-shadow: 0px 0px 0px 1px var(--theme-elevation-150);
-    padding: base(0.1);
-    border-radius: 3px;
-    position: relative;
-    z-index: 1;
-    height: 100%;
-    width: 100%;
-    transition-property: box-shadow, background-color;
-    transition-duration: 100ms;
-    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-    --hamburger-size: var(--base);
-
-    &:hover {
-      background-color: var(--theme-elevation-100);
-      box-shadow: 0px 0px 0px 1px var(--theme-elevation-500);
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &::after {
-      z-index: -1;
-    }
-
-    &__open-icon,
-    &__close-icon {
-      width: var(--hamburger-size);
-      height: var(--hamburger-size);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}