@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.c2b57ce

package/dist/css/preflight.css

@@ -0,0 +1,404 @@
+/*
+  COPIED OVER MANUALLY FROM: https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css
+  */
+
+/*
+MIT License
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+/*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Remove default margins and padding
+  3. Reset all borders.
+*/
+@layer payload-default {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box; /* 1 */
+    margin: 0; /* 2 */
+    padding: 0; /* 2 */
+    border: 0 solid; /* 3 */
+  }
+
+  /*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured `sans` font-family by default.
+  5. Use the user's configured `sans` font-feature-settings by default.
+  6. Use the user's configured `sans` font-variation-settings by default.
+  7. Disable tap highlights on iOS.
+*/
+
+  html,
+  :host {
+    line-height: 1.5; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    tab-size: 4; /* 3 */
+    font-family: var(--font-family-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); /* 4 */
+    font-feature-settings: normal; /* 5 */
+    font-variation-settings: normal; /* 6 */
+    -webkit-tap-highlight-color: transparent; /* 7 */
+  }
+
+  /*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Reset the default border style to a 1px solid border.
+*/
+
+  hr {
+    height: 0; /* 1 */
+    color: inherit; /* 2 */
+    border-top-width: 1px; /* 3 */
+  }
+
+  /*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  /*
+  Remove the default font size and weight for headings.
+*/
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  /*
+  Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  /*
+  Add the correct font weight in Edge and Safari.
+*/
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /*
+  1. Use the user's configured `mono` font-family by default.
+  2. Use the user's configured `mono` font-feature-settings by default.
+  3. Use the user's configured `mono` font-variation-settings by default.
+  4. Correct the odd `em` font sizing in all browsers.
+*/
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); /* 1 */
+    font-feature-settings: normal; /* 2 */
+    font-variation-settings: normal; /* 3 */
+    font-size: 1em; /* 4 */
+  }
+
+  /*
+  Add the correct font size in all browsers.
+*/
+
+  small {
+    font-size: 80%;
+  }
+
+  /*
+  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+*/
+
+  table {
+    text-indent: 0; /* 1 */
+    border-color: inherit; /* 2 */
+    border-collapse: collapse; /* 3 */
+  }
+
+  /*
+  Use the modern Firefox focus style for all focusable elements.
+*/
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  /*
+  Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /*
+  Add the correct display in Chrome and Safari.
+*/
+
+  summary {
+    display: list-item;
+  }
+
+  /*
+  Make lists unstyled by default.
+*/
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+
+  /*
+  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+      This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block; /* 1 */
+    vertical-align: middle; /* 2 */
+  }
+
+  /*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  /*
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
+*/
+
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit; /* 1 */
+    font-feature-settings: inherit; /* 1 */
+    font-variation-settings: inherit; /* 1 */
+    letter-spacing: inherit; /* 1 */
+    color: inherit; /* 1 */
+    border-radius: 0; /* 2 */
+    background-color: transparent; /* 3 */
+    opacity: 1; /* 4 */
+  }
+
+  /*
+  Restore default font weight.
+*/
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  /*
+  Restore indentation.
+*/
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 1.25rem;
+  }
+
+  /*
+  Restore space after button.
+*/
+
+  ::file-selector-button {
+    margin-inline-end: 0.25rem;
+  }
+
+  /*
+  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+*/
+
+  ::placeholder {
+    opacity: 1;
+  }
+
+  /*
+  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+*/
+
+  @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
+    (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+    ::placeholder {
+      color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  /*
+  Prevent resizing textareas horizontally by default.
+*/
+
+  textarea {
+    resize: vertical;
+  }
+
+  /*
+  Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /*
+  1. Ensure date/time inputs have the same height when empty in iOS Safari.
+  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
+*/
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh; /* 1 */
+    text-align: inherit; /* 2 */
+  }
+
+  /*
+  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
+*/
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  /*
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
+*/
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+
+  /*
+  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+*/
+
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
+  /*
+  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /*
+  Correct the inability to style the border radius in iOS Safari.
+*/
+
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  /*
+  Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /*
+  Make elements with the HTML hidden attribute stay hidden by default.
+*/
+
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+  }
+}

package/dist/css/radius.css

@@ -0,0 +1,12 @@
+@layer payload-default {
+  :root {
+    --radius-none: 0;
+    --radius-small: 0.125rem;
+    --radius-medium: 0.3125rem;
+    --radius-large: 0.8125rem;
+    --radius-full: 9999px;
+
+    --stroke-width-small: 1px;
+    --stroke-width-medium: 2px;
+  }
+}

package/dist/css/spacing.css

@@ -0,0 +1,33 @@
+@layer payload-default {
+  :root {
+    --spacer-0: 0;
+    --spacer-1: 0.25rem; /** 4px */
+    --spacer-2: 0.5rem; /** 8px */
+    --spacer-2-5: 0.75rem; /** 12px */
+    --spacer-3: 1rem; /** 16px */
+    --spacer-4: 1.5rem; /** 24px */
+    --spacer-5: 2rem; /** 32px */
+    --spacer-6: 2.5rem; /** 40px */
+
+    /* Layout spacing */
+    --gutter-h: var(--spacer-5);
+    --spacing-view-bottom: var(--gutter-h);
+
+    /* Breakpoints */
+    --breakpoint-m-width: 1024px;
+    --breakpoint-s-width: 768px;
+  }
+
+  @media (max-width: 1024px) {
+    :root {
+      --gutter-h: var(--spacer-4);
+    }
+  }
+
+  @media (max-width: 768px) {
+    :root {
+      --gutter-h: var(--spacer-3);
+      --spacing-view-bottom: var(--spacer-6);
+    }
+  }
+}

package/dist/css/typography.css

@@ -0,0 +1,67 @@
+@layer payload-default {
+  :root {
+    --font-family-sans: 'Inter';
+    --font-family-mono: 'Roboto Mono';
+    --text-letter-spacing: 0.005em; /* 0.5% */
+
+    /* Body — Small */
+    --text-body-small-font-family: var(--font-family-sans);
+    --text-body-small-font-size: 0.5625rem; /* 9px */
+    --text-body-small-font-weight: 450;
+    --text-body-small-line-height: 0.875rem; /* 14px */
+    --text-body-small-letter-spacing: 0.5px;
+
+    --text-body-small-strong-font-family: var(--font-family-sans);
+    --text-body-small-strong-font-size: 0.5625rem; /* 9px */
+    --text-body-small-strong-font-weight: 550;
+    --text-body-small-strong-line-height: 0.875rem; /* 14px */
+    --text-body-small-strong-letter-spacing: 0.5px;
+
+    /* Body — Medium */
+    --text-body-medium-font-family: var(--font-family-sans);
+    --text-body-medium-font-size: 0.6875rem; /* 11px */
+    --text-body-medium-font-weight: 450;
+    --text-body-medium-line-height: 1rem; /* 16px */
+    --text-body-medium-letter-spacing: 0.055px;
+
+    --text-body-medium-strong-font-family: var(--font-family-sans);
+    --text-body-medium-strong-font-size: 0.6875rem; /* 11px */
+    --text-body-medium-strong-font-weight: 550;
+    --text-body-medium-strong-line-height: 1rem; /* 16px */
+    --text-body-medium-strong-letter-spacing: 0.5px;
+
+    /* Body — Large */
+    --text-body-large-font-family: var(--font-family-sans);
+    --text-body-large-font-size: 0.8125rem; /* 13px */
+    --text-body-large-font-weight: 450;
+    --text-body-large-line-height: 1.375rem; /* 22px */
+    --text-body-large-letter-spacing: -0.25px;
+
+    --text-body-large-strong-font-family: var(--font-family-sans);
+    --text-body-large-strong-font-size: 0.8125rem; /* 13px */
+    --text-body-large-strong-font-weight: 550;
+    --text-body-large-strong-line-height: 1.375rem; /* 22px */
+    --text-body-large-strong-letter-spacing: -0.25px;
+
+    /* Heading — Small */
+    --text-heading-small-font-family: var(--font-family-sans);
+    --text-heading-small-font-size: 0.8125rem; /* 13px */
+    --text-heading-small-font-weight: 550;
+    --text-heading-small-line-height: 1.375rem;
+    --text-heading-small-letter-spacing: -0.25px;
+
+    /* Heading — Medium */
+    --text-heading-medium-font-family: var(--font-family-sans);
+    --text-heading-medium-font-size: 0.9375rem; /* 15px */
+    --text-heading-medium-font-weight: 550;
+    --text-heading-medium-line-height: 1.5625rem;
+    --text-heading-medium-letter-spacing: -0.075px;
+
+    /* Heading — Large */
+    --text-heading-large-font-family: var(--font-family-sans);
+    --text-heading-large-font-size: 1.5rem; /* 24px */
+    --text-heading-large-font-weight: 550;
+    --text-heading-large-line-height: 2rem; /* 32px */
+    --text-heading-large-letter-spacing: -0.408px;
+  }
+}

package/dist/css/utilities.css

@@ -0,0 +1,20 @@
+@layer payload-default {
+  :root {
+    --accessibility-focus-color: var(--color-border-selected);
+    --accessibility-outline: 1px solid var(--accessibility-focus-color);
+    --accessibility-outline-offset: 1px;
+  }
+
+  /* Screen reader only */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}

package/dist/elements/AddNewRelation/index.css

@@ -0,0 +1,45 @@
+@layer payload-default {
+  .relationship-add-new {
+    display: flex;
+    align-items: stretch;
+
+    .popup__trigger-wrap {
+      display: flex;
+      align-items: stretch;
+      height: 100%;
+    }
+  }
+
+  .relationship-add-new__add-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-5);
+    height: var(--spacer-5);
+    padding: var(--spacer-1);
+    margin: 0;
+    background: var(--color-bg-secondary);
+    border: none;
+    border-radius: var(--radius-medium);
+    color: var(--color-icon);
+    cursor: pointer;
+    transition: background-color 100ms;
+
+    &:hover {
+      background: var(--color-bg-secondary-hover);
+    }
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
+  }
+
+  .relationship-add-new__add-button--unstyled {
+    background: transparent;
+    border: none;
+    padding: 0;
+    width: auto;
+    height: auto;
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { Props } from './types.js';
-import './index.scss';
+import './index.css';
 export declare const AddNewRelation: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AddNewRelation/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAGzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAUvC,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwM1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AddNewRelation/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAGzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAUvC,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwM1C,CAAA"}

package/dist/elements/AddNewRelation/index.js

@@ -13,7 +13,7 @@ import { Button } from '../Button/index.js';
 import { useDocumentDrawer } from '../DocumentDrawer/index.js';
 import { Popup } from '../Popup/index.js';
 import * as PopupList from '../Popup/PopupButtonList/index.js';
-import './index.scss';
+import './index.css';
 import { Tooltip } from '../Tooltip/index.js';
 const baseClass = 'relationship-add-new';
 export const AddNewRelation = t0 => {
@@ -231,7 +231,7 @@ export const AddNewRelation = t0 => {
         }), relatedCollections.length > 1 && _jsxs(Fragment, {
           children: [_jsx(Popup, {
             button: ButtonFromProps ? ButtonFromProps : _jsx(Button, {
-              buttonStyle: "none",
+              buttonStyle: "ghost",
               className: `${baseClass}__add-button`,
               tooltip: popupOpen ? undefined : t("fields:addNew"),
               children: _jsx(PlusIcon, {})