@payloadcms/richtext-slate 3.41.0-canary.2 → 3.41.0-internal.8617025

package/dist/field/buttons.scss

@@ -1,5 +1,4 @@
-@import '~@payloadcms/ui/scss';
-
+@import '../scss/styles.scss';
 @layer payload-default {
   .rich-text__button {
     position: relative;

package/dist/field/elements/blockquote/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .rich-text-blockquote {

package/dist/field/elements/link/Element/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../../scss/styles.scss';
 
 @layer payload-default {
   .rich-text-link {

package/dist/field/elements/link/LinkDrawer/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../../scss/styles.scss';
 
 @layer payload-default {
   .rich-text-link-edit-modal {

package/dist/field/elements/ol/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .rich-text-ol {

package/dist/field/elements/relationship/Button/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../../scss/styles.scss';
 
 @layer payload-default {
   .relationship-rich-text-button {

package/dist/field/elements/relationship/Element/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../../scss/styles.scss';
 
 @layer payload-default {
   .rich-text-relationship {

package/dist/field/elements/ul/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .rich-text-ul {

package/dist/field/elements/upload/Button/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../../scss/styles.scss';
 
 @layer payload-default {
   .upload-rich-text-button {

package/dist/field/elements/upload/Element/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../../scss/styles.scss';
 
 @layer payload-default {
   .rich-text-upload {

package/dist/field/icons/IndentLeft/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .icon--indent-left {

package/dist/field/icons/IndentRight/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .icon--indent-right {

package/dist/field/icons/Link/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .icon--link {

package/dist/field/icons/Relationship/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .icon--relationship {

package/dist/field/icons/Upload/index.scss

@@ -1,4 +1,4 @@
-@import '~@payloadcms/ui/scss';
+@import '../../../scss/styles.scss';
 
 @layer payload-default {
   .icon--upload {

package/dist/field/index.scss

@@ -1,5 +1,4 @@
-@import '~@payloadcms/ui/scss';
-
+@import '../scss/styles.scss';
 @layer payload-default {
   .rich-text {
     margin-bottom: base(2);

package/dist/scss/app.scss

@@ -0,0 +1,204 @@
+@import 'styles';
+@import './toasts.scss';
+@import './colors.scss';
+@layer payload-default {
+  :root {
+    --base-px: 20;
+    --base-body-size: 13;
+    --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
+
+    --breakpoint-xs-width: #{$breakpoint-xs-width};
+    --breakpoint-s-width: #{$breakpoint-s-width};
+    --breakpoint-m-width: #{$breakpoint-m-width};
+    --breakpoint-l-width: #{$breakpoint-l-width};
+    --scrollbar-width: 17px;
+
+    --theme-bg: var(--theme-elevation-0);
+    --theme-input-bg: var(--theme-elevation-0);
+    --theme-text: var(--theme-elevation-800);
+    --theme-overlay: rgba(5, 5, 5, 0.5);
+    --theme-baseline: #{$baseline-px};
+    --theme-baseline-body-size: #{$baseline-body-size};
+    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+      sans-serif;
+    --font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
+    --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
+
+    --style-radius-s: #{$style-radius-s};
+    --style-radius-m: #{$style-radius-m};
+    --style-radius-l: #{$style-radius-l};
+
+    --z-popup: 10;
+    --z-nav: 20;
+    --z-modal: 30;
+    --z-status: 40;
+
+    --accessibility-outline: 2px solid var(--theme-text);
+    --accessibility-outline-offset: 2px;
+
+    --gutter-h: #{base(3)};
+    --spacing-view-bottom: var(--gutter-h);
+    --doc-controls-height: calc(var(--base) * 2.8);
+    --app-header-height: calc(var(--base) * 2.8);
+    --nav-width: 275px;
+    --nav-trans-time: 150ms;
+
+    @include mid-break {
+      --gutter-h: #{base(2)};
+      --app-header-height: calc(var(--base) * 2.4);
+      --doc-controls-height: calc(var(--base) * 2.4);
+    }
+
+    @include small-break {
+      --gutter-h: #{base(0.8)};
+      --spacing-view-bottom: calc(var(--base) * 2);
+      --nav-width: 100vw;
+    }
+  }
+
+  /////////////////////////////
+  // GLOBAL STYLES
+  /////////////////////////////
+
+  * {
+    box-sizing: border-box;
+  }
+
+  html {
+    @extend %body;
+    background: var(--theme-bg);
+    -webkit-font-smoothing: antialiased;
+
+    &[data-theme='dark'] {
+      --theme-bg: var(--theme-elevation-0);
+      --theme-text: var(--theme-elevation-1000);
+      --theme-input-bg: var(--theme-elevation-50);
+      --theme-overlay: rgba(5, 5, 5, 0.75);
+      color-scheme: dark;
+
+      ::selection {
+        color: var(--color-base-1000);
+      }
+
+      ::-moz-selection {
+        color: var(--color-base-1000);
+      }
+    }
+
+    @include mid-break {
+      font-size: 12px;
+    }
+  }
+
+  html,
+  body,
+  #app {
+    height: 100%;
+  }
+
+  body {
+    font-family: var(--font-body);
+    font-weight: 400;
+    color: var(--theme-text);
+    margin: 0;
+    // this is for the nav to be able to push the document over
+    overflow-x: hidden;
+  }
+
+  ::selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
+
+  ::-moz-selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  h1 {
+    @extend %h1;
+  }
+
+  h2 {
+    @extend %h2;
+  }
+
+  h3 {
+    @extend %h3;
+  }
+
+  h4 {
+    @extend %h4;
+  }
+
+  h5 {
+    @extend %h5;
+  }
+
+  h6 {
+    @extend %h6;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  ul,
+  ol {
+    padding-left: $baseline;
+    margin: 0;
+  }
+
+  :focus-visible {
+    outline: var(--accessibility-outline);
+  }
+
+  a {
+    color: currentColor;
+
+    &:focus {
+      &:not(:focus-visible) {
+        opacity: 0.8;
+      }
+      outline: none;
+    }
+
+    &:active {
+      opacity: 0.7;
+      outline: none;
+    }
+  }
+
+  svg {
+    vertical-align: middle;
+  }
+
+  dialog {
+    width: 100%;
+    border: 0;
+    padding: 0;
+    color: currentColor;
+  }
+
+  .payload__modal-item {
+    min-height: 100%;
+    background: transparent;
+  }
+
+  .payload__modal-container--enterDone {
+    overflow: auto;
+  }
+
+  .payload__modal-item--enter,
+  .payload__modal-item--enterDone {
+    z-index: var(--z-modal);
+  }
+
+  // @import '~payload-user-css'; TODO: re-enable this
+}

package/dist/scss/colors.scss

@@ -0,0 +1,271 @@
+@layer payload-default {
+  :root {
+    --color-base-0: rgb(255, 255, 255);
+    --color-base-50: rgb(245, 245, 245);
+    --color-base-100: rgb(235, 235, 235);
+    --color-base-150: rgb(221, 221, 221);
+    --color-base-200: rgb(208, 208, 208);
+    --color-base-250: rgb(195, 195, 195);
+    --color-base-300: rgb(181, 181, 181);
+    --color-base-350: rgb(168, 168, 168);
+    --color-base-400: rgb(154, 154, 154);
+    --color-base-450: rgb(141, 141, 141);
+    --color-base-500: rgb(128, 128, 128);
+    --color-base-550: rgb(114, 114, 114);
+    --color-base-600: rgb(101, 101, 101);
+    --color-base-650: rgb(87, 87, 87);
+    --color-base-700: rgb(74, 74, 74);
+    --color-base-750: rgb(60, 60, 60);
+    --color-base-800: rgb(47, 47, 47);
+    --color-base-850: rgb(34, 34, 34);
+    --color-base-900: rgb(20, 20, 20);
+    --color-base-950: rgb(7, 7, 7);
+    --color-base-1000: rgb(0, 0, 0);
+
+    --color-success-50: rgb(237, 245, 249);
+    --color-success-100: rgb(218, 237, 248);
+    --color-success-150: rgb(188, 225, 248);
+    --color-success-200: rgb(156, 216, 253);
+    --color-success-250: rgb(125, 204, 248);
+    --color-success-300: rgb(97, 190, 241);
+    --color-success-350: rgb(65, 178, 236);
+    --color-success-400: rgb(36, 164, 223);
+    --color-success-450: rgb(18, 148, 204);
+    --color-success-500: rgb(21, 135, 186);
+    --color-success-550: rgb(12, 121, 168);
+    --color-success-600: rgb(11, 110, 153);
+    --color-success-650: rgb(11, 97, 135);
+    --color-success-700: rgb(17, 88, 121);
+    --color-success-750: rgb(17, 76, 105);
+    --color-success-800: rgb(18, 66, 90);
+    --color-success-850: rgb(18, 56, 76);
+    --color-success-900: rgb(19, 44, 58);
+    --color-success-950: rgb(22, 33, 39);
+
+    --color-error-50: rgb(250, 241, 240);
+    --color-error-100: rgb(252, 229, 227);
+    --color-error-150: rgb(247, 208, 204);
+    --color-error-200: rgb(254, 193, 188);
+    --color-error-250: rgb(253, 177, 170);
+    --color-error-300: rgb(253, 154, 146);
+    --color-error-350: rgb(253, 131, 123);
+    --color-error-400: rgb(246, 109, 103);
+    --color-error-450: rgb(234, 90, 86);
+    --color-error-500: rgb(218, 75, 72);
+    --color-error-550: rgb(200, 62, 61);
+    --color-error-600: rgb(182, 54, 54);
+    --color-error-650: rgb(161, 47, 47);
+    --color-error-700: rgb(144, 44, 43);
+    --color-error-750: rgb(123, 41, 39);
+    --color-error-800: rgb(105, 39, 37);
+    --color-error-850: rgb(86, 36, 33);
+    --color-error-900: rgb(64, 32, 29);
+    --color-error-950: rgb(44, 26, 24);
+
+    --color-warning-50: rgb(249, 242, 237);
+    --color-warning-100: rgb(248, 232, 219);
+    --color-warning-150: rgb(243, 212, 186);
+    --color-warning-200: rgb(243, 200, 162);
+    --color-warning-250: rgb(240, 185, 136);
+    --color-warning-300: rgb(238, 166, 98);
+    --color-warning-350: rgb(234, 148, 58);
+    --color-warning-400: rgb(223, 132, 17);
+    --color-warning-450: rgb(204, 120, 15);
+    --color-warning-500: rgb(185, 108, 13);
+    --color-warning-550: rgb(167, 97, 10);
+    --color-warning-600: rgb(150, 87, 11);
+    --color-warning-650: rgb(134, 78, 11);
+    --color-warning-700: rgb(120, 70, 13);
+    --color-warning-750: rgb(105, 61, 13);
+    --color-warning-800: rgb(90, 55, 19);
+    --color-warning-850: rgb(73, 47, 21);
+    --color-warning-900: rgb(56, 38, 20);
+    --color-warning-950: rgb(38, 29, 21);
+
+    --color-blue-50: rgb(237, 245, 249);
+    --color-blue-100: rgb(218, 237, 248);
+    --color-blue-150: rgb(188, 225, 248);
+    --color-blue-200: rgb(156, 216, 253);
+    --color-blue-250: rgb(125, 204, 248);
+    --color-blue-300: rgb(97, 190, 241);
+    --color-blue-350: rgb(65, 178, 236);
+    --color-blue-400: rgb(36, 164, 223);
+    --color-blue-450: rgb(18, 148, 204);
+    --color-blue-500: rgb(21, 135, 186);
+    --color-blue-550: rgb(12, 121, 168);
+    --color-blue-600: rgb(11, 110, 153);
+    --color-blue-650: rgb(11, 97, 135);
+    --color-blue-700: rgb(17, 88, 121);
+    --color-blue-750: rgb(17, 76, 105);
+    --color-blue-800: rgb(18, 66, 90);
+    --color-blue-850: rgb(18, 56, 76);
+    --color-blue-900: rgb(19, 44, 58);
+    --color-blue-950: rgb(22, 33, 39);
+
+    --theme-border-color: var(--theme-elevation-150);
+
+    --theme-success-50: var(--color-success-50);
+    --theme-success-100: var(--color-success-100);
+    --theme-success-150: var(--color-success-150);
+    --theme-success-200: var(--color-success-200);
+    --theme-success-250: var(--color-success-250);
+    --theme-success-300: var(--color-success-300);
+    --theme-success-350: var(--color-success-350);
+    --theme-success-400: var(--color-success-400);
+    --theme-success-450: var(--color-success-450);
+    --theme-success-500: var(--color-success-500);
+    --theme-success-550: var(--color-success-550);
+    --theme-success-600: var(--color-success-600);
+    --theme-success-650: var(--color-success-650);
+    --theme-success-700: var(--color-success-700);
+    --theme-success-750: var(--color-success-750);
+    --theme-success-800: var(--color-success-800);
+    --theme-success-850: var(--color-success-850);
+    --theme-success-900: var(--color-success-900);
+    --theme-success-950: var(--color-success-950);
+
+    --theme-warning-50: var(--color-warning-50);
+    --theme-warning-100: var(--color-warning-100);
+    --theme-warning-150: var(--color-warning-150);
+    --theme-warning-200: var(--color-warning-200);
+    --theme-warning-250: var(--color-warning-250);
+    --theme-warning-300: var(--color-warning-300);
+    --theme-warning-350: var(--color-warning-350);
+    --theme-warning-400: var(--color-warning-400);
+    --theme-warning-450: var(--color-warning-450);
+    --theme-warning-500: var(--color-warning-500);
+    --theme-warning-550: var(--color-warning-550);
+    --theme-warning-600: var(--color-warning-600);
+    --theme-warning-650: var(--color-warning-650);
+    --theme-warning-700: var(--color-warning-700);
+    --theme-warning-750: var(--color-warning-750);
+    --theme-warning-800: var(--color-warning-800);
+    --theme-warning-850: var(--color-warning-850);
+    --theme-warning-900: var(--color-warning-900);
+    --theme-warning-950: var(--color-warning-950);
+
+    --theme-error-50: var(--color-error-50);
+    --theme-error-100: var(--color-error-100);
+    --theme-error-150: var(--color-error-150);
+    --theme-error-200: var(--color-error-200);
+    --theme-error-250: var(--color-error-250);
+    --theme-error-300: var(--color-error-300);
+    --theme-error-350: var(--color-error-350);
+    --theme-error-400: var(--color-error-400);
+    --theme-error-450: var(--color-error-450);
+    --theme-error-500: var(--color-error-500);
+    --theme-error-550: var(--color-error-550);
+    --theme-error-600: var(--color-error-600);
+    --theme-error-650: var(--color-error-650);
+    --theme-error-700: var(--color-error-700);
+    --theme-error-750: var(--color-error-750);
+    --theme-error-800: var(--color-error-800);
+    --theme-error-850: var(--color-error-850);
+    --theme-error-900: var(--color-error-900);
+    --theme-error-950: var(--color-error-950);
+
+    --theme-elevation-0: var(--color-base-0);
+    --theme-elevation-50: var(--color-base-50);
+    --theme-elevation-100: var(--color-base-100);
+    --theme-elevation-150: var(--color-base-150);
+    --theme-elevation-200: var(--color-base-200);
+    --theme-elevation-250: var(--color-base-250);
+    --theme-elevation-300: var(--color-base-300);
+    --theme-elevation-350: var(--color-base-350);
+    --theme-elevation-400: var(--color-base-400);
+    --theme-elevation-450: var(--color-base-450);
+    --theme-elevation-500: var(--color-base-500);
+    --theme-elevation-550: var(--color-base-550);
+    --theme-elevation-600: var(--color-base-600);
+    --theme-elevation-650: var(--color-base-650);
+    --theme-elevation-700: var(--color-base-700);
+    --theme-elevation-750: var(--color-base-750);
+    --theme-elevation-800: var(--color-base-800);
+    --theme-elevation-850: var(--color-base-850);
+    --theme-elevation-900: var(--color-base-900);
+    --theme-elevation-950: var(--color-base-950);
+    --theme-elevation-1000: var(--color-base-1000);
+  }
+
+  html[data-theme='dark'] {
+    --theme-border-color: var(--theme-elevation-150);
+
+    --theme-elevation-0: var(--color-base-900);
+    --theme-elevation-50: var(--color-base-850);
+    --theme-elevation-100: var(--color-base-800);
+    --theme-elevation-150: var(--color-base-750);
+    --theme-elevation-200: var(--color-base-700);
+    --theme-elevation-250: var(--color-base-650);
+    --theme-elevation-300: var(--color-base-600);
+    --theme-elevation-350: var(--color-base-550);
+    --theme-elevation-400: var(--color-base-450);
+    --theme-elevation-450: var(--color-base-400);
+    --theme-elevation-550: var(--color-base-350);
+    --theme-elevation-600: var(--color-base-300);
+    --theme-elevation-650: var(--color-base-250);
+    --theme-elevation-700: var(--color-base-200);
+    --theme-elevation-750: var(--color-base-150);
+    --theme-elevation-800: var(--color-base-100);
+    --theme-elevation-850: var(--color-base-50);
+    --theme-elevation-900: var(--color-base-0);
+    --theme-elevation-950: var(--color-base-0);
+    --theme-elevation-1000: var(--color-base-0);
+
+    --theme-success-50: var(--color-success-950);
+    --theme-success-100: var(--color-success-900);
+    --theme-success-150: var(--color-success-850);
+    --theme-success-200: var(--color-success-800);
+    --theme-success-250: var(--color-success-750);
+    --theme-success-300: var(--color-success-700);
+    --theme-success-350: var(--color-success-650);
+    --theme-success-400: var(--color-success-600);
+    --theme-success-450: var(--color-success-550);
+    --theme-success-550: var(--color-success-450);
+    --theme-success-600: var(--color-success-400);
+    --theme-success-650: var(--color-success-350);
+    --theme-success-700: var(--color-success-300);
+    --theme-success-750: var(--color-success-250);
+    --theme-success-800: var(--color-success-200);
+    --theme-success-850: var(--color-success-150);
+    --theme-success-900: var(--color-success-100);
+    --theme-success-950: var(--color-success-50);
+
+    --theme-warning-50: var(--color-warning-950);
+    --theme-warning-100: var(--color-warning-900);
+    --theme-warning-150: var(--color-warning-850);
+    --theme-warning-200: var(--color-warning-800);
+    --theme-warning-250: var(--color-warning-750);
+    --theme-warning-300: var(--color-warning-700);
+    --theme-warning-350: var(--color-warning-650);
+    --theme-warning-400: var(--color-warning-600);
+    --theme-warning-450: var(--color-warning-550);
+    --theme-warning-550: var(--color-warning-450);
+    --theme-warning-600: var(--color-warning-400);
+    --theme-warning-650: var(--color-warning-350);
+    --theme-warning-700: var(--color-warning-300);
+    --theme-warning-750: var(--color-warning-250);
+    --theme-warning-800: var(--color-warning-200);
+    --theme-warning-850: var(--color-warning-150);
+    --theme-warning-900: var(--color-warning-100);
+    --theme-warning-950: var(--color-warning-50);
+
+    --theme-error-50: var(--color-error-950);
+    --theme-error-100: var(--color-error-900);
+    --theme-error-150: var(--color-error-850);
+    --theme-error-200: var(--color-error-800);
+    --theme-error-250: var(--color-error-750);
+    --theme-error-300: var(--color-error-700);
+    --theme-error-350: var(--color-error-650);
+    --theme-error-400: var(--color-error-600);
+    --theme-error-450: var(--color-error-550);
+    --theme-error-550: var(--color-error-450);
+    --theme-error-600: var(--color-error-400);
+    --theme-error-650: var(--color-error-350);
+    --theme-error-700: var(--color-error-300);
+    --theme-error-750: var(--color-error-250);
+    --theme-error-800: var(--color-error-200);
+    --theme-error-850: var(--color-error-150);
+    --theme-error-900: var(--color-error-100);
+    --theme-error-950: var(--color-error-50);
+  }
+}

package/dist/scss/custom.css

@@ -0,0 +1 @@
+/* Used as a placeholder for when the Payload app does not have custom CSS */

package/dist/scss/queries.scss

@@ -0,0 +1,27 @@
+////////////////////////////
+// MEDIA QUERIES
+/////////////////////////////
+
+@mixin extra-small-break {
+  @media (max-width: $breakpoint-xs-width) {
+    @content;
+  }
+}
+
+@mixin small-break {
+  @media (max-width: $breakpoint-s-width) {
+    @content;
+  }
+}
+
+@mixin mid-break {
+  @media (max-width: $breakpoint-m-width) {
+    @content;
+  }
+}
+
+@mixin large-break {
+  @media (max-width: $breakpoint-l-width) {
+    @content;
+  }
+}

package/dist/scss/resets.scss

@@ -0,0 +1,19 @@
+@layer payload-default {
+  %btn-reset {
+    border: 0;
+    background: none;
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0;
+    color: currentColor;
+  }
+}
+
+@mixin btn-reset {
+  border: 0;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
+  color: currentColor;
+}

package/dist/scss/styles.scss

@@ -0,0 +1,11 @@
+@import 'vars';
+@import 'z-index';
+
+//////////////////////////////
+// IMPORT OVERRIDES
+//////////////////////////////
+
+@import 'type';
+@import 'queries';
+@import 'resets';
+@import 'svg';

package/dist/scss/svg.scss

@@ -0,0 +1,10 @@
+@mixin color-svg($color) {
+  .stroke {
+    stroke: $color;
+    fill: none;
+  }
+
+  .fill {
+    fill: $color;
+  }
+}

package/dist/scss/toastify.scss

@@ -0,0 +1,60 @@
+@import 'vars';
+@import 'queries';
+@layer payload-default {
+  .Toastify {
+    .Toastify__toast-container {
+      left: base(5);
+      transform: none;
+      right: base(5);
+      width: auto;
+    }
+
+    .Toastify__toast {
+      padding: base(0.5);
+      border-radius: $style-radius-m;
+      font-weight: 600;
+    }
+
+    .Toastify__close-button {
+      align-self: center;
+      opacity: 0.7;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    .Toastify__toast--success {
+      color: var(--color-success-900);
+      background: var(--color-success-500);
+
+      .Toastify__progress-bar {
+        background-color: var(--color-success-900);
+      }
+    }
+
+    .Toastify__close-button--success {
+      color: var(--color-success-900);
+    }
+
+    .Toastify__toast--error {
+      background: var(--theme-error-500);
+      color: #fff;
+
+      .Toastify__progress-bar {
+        background-color: #fff;
+      }
+    }
+
+    .Toastify__close-button--light {
+      color: inherit;
+    }
+
+    @include mid-break {
+      .Toastify__toast-container {
+        left: $baseline;
+        right: $baseline;
+      }
+    }
+  }
+}

package/dist/scss/toasts.scss

@@ -0,0 +1,143 @@
+@import './styles.scss';
+@layer payload-default {
+  .payload-toast-container {
+    padding: 0;
+    margin: 0;
+
+    .payload-toast-close-button {
+      position: absolute;
+      order: 3;
+      left: unset;
+      inset-inline-end: base(0.8);
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--theme-elevation-600);
+      background: unset;
+      border: none;
+
+      svg {
+        width: base(0.8);
+        height: base(0.8);
+      }
+
+      &:hover {
+        color: var(--theme-elevation-250);
+        background: none;
+      }
+
+      [dir='RTL'] & {
+        right: unset;
+        left: 0.5rem;
+      }
+    }
+
+    .toast-title {
+      line-height: base(1);
+      margin-right: base(1);
+    }
+
+    .payload-toast-item {
+      padding: base(0.8);
+      color: var(--theme-elevation-800);
+      font-style: normal;
+      font-weight: 600;
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+      width: 100%;
+      border-radius: 4px;
+      border: 1px solid var(--theme-border-color);
+      background: var(--theme-input-bg);
+      box-shadow:
+        0px 10px 4px -8px rgba(0, 2, 4, 0.02),
+        0px 2px 3px 0px rgba(0, 2, 4, 0.05);
+
+      .toast-content {
+        transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        width: 100%;
+      }
+
+      &[data-front='false'] {
+        .toast-content {
+          opacity: 0;
+        }
+      }
+
+      &[data-expanded='true'] {
+        .toast-content {
+          opacity: 1;
+        }
+      }
+
+      .toast-icon {
+        width: base(0.8);
+        height: base(0.8);
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        & > * {
+          width: base(1.2);
+          height: base(1.2);
+        }
+      }
+
+      &.toast-warning {
+        color: var(--theme-warning-800);
+        border-color: var(--theme-warning-250);
+        background-color: var(--theme-warning-100);
+
+        .payload-toast-close-button {
+          color: var(--theme-warning-600);
+
+          &:hover {
+            color: var(--theme-warning-250);
+          }
+        }
+      }
+
+      &.toast-error {
+        color: var(--theme-error-800);
+        border-color: var(--theme-error-250);
+        background-color: var(--theme-error-100);
+
+        .payload-toast-close-button {
+          color: var(--theme-error-600);
+
+          &:hover {
+            color: var(--theme-error-250);
+          }
+        }
+      }
+
+      &.toast-success {
+        color: var(--theme-success-800);
+        border-color: var(--theme-success-250);
+        background-color: var(--theme-success-100);
+
+        .payload-toast-close-button {
+          color: var(--theme-success-600);
+
+          &:hover {
+            color: var(--theme-success-250);
+          }
+        }
+      }
+
+      &.toast-info {
+        color: var(--theme-elevation-800);
+        border-color: var(--theme-elevation-250);
+        background-color: var(--theme-elevation-100);
+
+        .payload-toast-close-button {
+          color: var(--theme-elevation-600);
+
+          &:hover {
+            color: var(--theme-elevation-250);
+          }
+        }
+      }
+    }
+  }
+}

package/dist/scss/type.scss

@@ -0,0 +1,110 @@
+@import 'vars';
+@import 'queries';
+
+/////////////////////////////
+// HEADINGS
+/////////////////////////////
+@layer payload-default {
+  %h1,
+  %h2,
+  %h3,
+  %h4,
+  %h5,
+  %h6 {
+    font-family: var(--font-body);
+    font-weight: 500;
+  }
+
+  %h1 {
+    margin: 0;
+    font-size: base(1.6);
+    line-height: base(1.8);
+
+    @include small-break {
+      letter-spacing: -0.5px;
+      font-size: base(1.25);
+    }
+  }
+
+  %h2 {
+    margin: 0;
+    font-size: base(1.3);
+    line-height: base(1.6);
+
+    @include small-break {
+      font-size: base(0.85);
+    }
+  }
+
+  %h3 {
+    margin: 0;
+    font-size: base(1);
+    line-height: base(1.2);
+
+    @include small-break {
+      font-size: base(0.65);
+      line-height: 1.25;
+    }
+  }
+
+  %h4 {
+    margin: 0;
+    font-size: base(0.8);
+    line-height: base(1);
+    letter-spacing: -0.375px;
+  }
+
+  %h5 {
+    margin: 0;
+    font-size: base(0.65);
+    line-height: base(0.8);
+  }
+
+  %h6 {
+    margin: 0;
+    font-size: base(0.6);
+    line-height: base(0.8);
+  }
+
+  %small {
+    margin: 0;
+    font-size: 12px;
+    line-height: 20px;
+  }
+
+  /////////////////////////////
+  // TYPE STYLES
+  /////////////////////////////
+
+  %large-body {
+    font-size: base(0.6);
+    line-height: base(1);
+    letter-spacing: base(0.02);
+
+    @include mid-break {
+      font-size: base(0.7);
+      line-height: base(1);
+    }
+
+    @include small-break {
+      font-size: base(0.55);
+      line-height: base(0.75);
+    }
+  }
+
+  %body {
+    font-size: $baseline-body-size;
+    line-height: $baseline-px;
+    font-weight: normal;
+    font-family: var(--font-body);
+  }
+
+  %code {
+    font-size: base(0.4);
+    color: var(--theme-elevation-400);
+
+    span {
+      color: var(--theme-elevation-800);
+    }
+  }
+}

package/dist/scss/vars.scss

@@ -0,0 +1,192 @@
+@use 'sass:math';
+
+/////////////////////////////
+// BREAKPOINTS
+/////////////////////////////
+
+$breakpoint-xs-width: 400px !default;
+$breakpoint-s-width: 768px !default;
+$breakpoint-m-width: 1024px !default;
+$breakpoint-l-width: 1440px !default;
+
+//////////////////////////////
+// BASELINE GRID
+//////////////////////////////
+
+$baseline-px: 20px !default;
+$baseline-body-size: 13px !default;
+$baseline: math.div($baseline-px, $baseline-body-size) + rem;
+
+@function base($multiplier) {
+  @return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem;
+}
+
+//////////////////////////////
+// COLORS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+//////////////////////////////
+
+$color-dark-gray: #333333 !default;
+$color-gray: #9a9a9a !default;
+$color-light-gray: #dadada !default;
+$color-background-gray: #f3f3f3 !default;
+$color-red: #ff6f76 !default;
+$color-yellow: #fdffa4 !default;
+$color-green: #b2ffd6 !default;
+$color-purple: #f3ddf3 !default;
+
+//////////////////////////////
+// STYLES
+//////////////////////////////
+
+$style-radius-s: 3px !default;
+$style-radius-m: 4px !default;
+$style-radius-l: 8px !default;
+$style-stroke-width: 1px !default;
+
+$style-stroke-width-s: 1px !default;
+$style-stroke-width-m: 2px !default;
+
+//////////////////////////////
+// MISC
+//////////////////////////////
+
+$top-header-offset: calc(base(1) - 1px);
+$top-header-offset-m: base(3);
+$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
+
+//////////////////////////////
+// SHADOWS
+//////////////////////////////
+
+@mixin shadow-sm {
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+}
+
+@mixin shadow-m {
+  box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.1);
+}
+
+@mixin shadow-lg {
+  box-shadow: 0 -2px 16px -2px rgba(0, 0, 0, 0.2);
+}
+
+@mixin shadow-lg-top {
+  box-shadow: 0 2px 16px -2px rgba(0, 0, 0, 0.2);
+}
+
+@mixin inputShadow {
+  @include shadow-sm;
+
+  &:not(:disabled) {
+    &:hover {
+      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+
+@mixin soft-shadow-bottom {
+  box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%);
+}
+
+//////////////////////////////
+// STYLE MIXINS
+//////////////////////////////
+
+@mixin blur-bg($color: var(--theme-bg), $opacity: 0.75) {
+  &:before,
+  &:after {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &:before {
+    background: $color;
+    opacity: $opacity;
+  }
+
+  &:after {
+    backdrop-filter: blur(8px);
+  }
+}
+
+@mixin blur-bg-light {
+  @include blur-bg(var(--theme-bg), 0.3);
+}
+
+@mixin readOnly {
+  background: var(--theme-elevation-100);
+  color: var(--theme-elevation-400);
+  box-shadow: none;
+
+  &:hover {
+    border-color: var(--theme-elevation-150);
+    box-shadow: none;
+  }
+}
+
+@mixin formInput() {
+  @include inputShadow;
+  font-family: var(--font-body);
+  width: 100%;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: var(--style-radius-s);
+  background: var(--theme-input-bg);
+  color: var(--theme-elevation-800);
+  font-size: 1rem;
+  height: base(2);
+  line-height: base(1);
+  padding: base(0.4) base(0.75);
+  -webkit-appearance: none;
+  transition-property: border, box-shadow;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+
+  &[data-rtl='true'] {
+    direction: rtl;
+  }
+
+  &::-webkit-input-placeholder {
+    color: var(--theme-elevation-400);
+    font-weight: normal;
+    font-size: 1rem;
+  }
+
+  &::-moz-placeholder {
+    color: var(--theme-elevation-400);
+    font-weight: normal;
+    font-size: 1rem;
+  }
+
+  &:hover {
+    border-color: var(--theme-elevation-250);
+  }
+
+  &:focus,
+  &:focus-within,
+  &:active {
+    border-color: var(--theme-elevation-400);
+    outline: 0;
+  }
+
+  &:disabled {
+    @include readOnly;
+  }
+}
+
+@mixin lightInputError {
+  background-color: var(--theme-error-50);
+  border: 1px solid var(--theme-error-500);
+}
+
+@mixin darkInputError {
+  background-color: var(--theme-error-100);
+  border: 1px solid var(--theme-error-400);
+
+  &:hover {
+    border-color: var(--theme-error-500);
+  }
+}

package/dist/scss/z-index.scss

@@ -0,0 +1,9 @@
+/////////////////////////////
+// Z-INDEX CHART (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+/////////////////////////////
+
+$z-page: 20;
+$z-page-content: 30;
+$z-nav: 40;
+$z-modal: 50;
+$z-status: 60;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/richtext-slate",
-  "version": "3.41.0-canary.2",
+  "version": "3.41.0-internal.8617025",
   "description": "The officially supported Slate richtext adapter for Payload",
   "homepage": "https://payloadcms.com",
   "repository": {
@@ -18,10 +18,6 @@
     }
   ],
   "type": "module",
-  "sideEffects": [
-    "*.scss",
-    "*.css"
-  ],
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -50,20 +46,20 @@
     "slate-history": "0.86.0",
     "slate-hyperscript": "0.81.3",
     "slate-react": "0.92.0",
-    "@payloadcms/translations": "3.41.0-canary.2",
-    "@payloadcms/ui": "3.41.0-canary.2"
+    "@payloadcms/ui": "3.41.0-internal.8617025",
+    "@payloadcms/translations": "3.41.0-internal.8617025"
   },
   "devDependencies": {
     "@types/is-hotkey": "^0.1.10",
     "@types/node": "22.5.4",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.2",
-    "payload": "3.41.0-canary.2",
+    "payload": "3.41.0-internal.8617025",
     "@payloadcms/eslint-config": "3.28.0"
   },
   "peerDependencies": {
     "react": "^19.0.0 || ^19.0.0-rc-65a56d0e-20241020",
-    "payload": "3.41.0-canary.2"
+    "payload": "3.41.0-internal.8617025"
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0"