diff --git a/docs/admin/customizing-css.mdx b/docs/admin/customizing-css.mdx
index 593f845a2..4ed40e707 100644
--- a/docs/admin/customizing-css.mdx
+++ b/docs/admin/customizing-css.mdx
@@ -33,6 +33,19 @@ Here is an example of how you might target the Dashboard View and change the bac
   If you are building [Custom Components](./overview), it is best to import your own stylesheets directly into your components, rather than using the global stylesheet. You can continue to use the [CSS library](#css-library) as needed.
 </Banner>
 
+### Specificity rules
+
+All Payload CSS is encapsulated inside CSS layers under `@layer payload-default`. Any custom css will now have the highest possible specificity.
+
+We have also provided a layer `@layer payload` if you want to use layers and ensure that your styles are applied after payload.
+
+To override existing styles in a way that the previous rules of specificity would be respected you can use the default layer like so
+```css
+@layer payload-default {
+  // my styles within the payload specificity
+}
+```
+
 ## Re-using Payload SCSS variables and utilities
 
 You can re-use Payload's SCSS variables and utilities in your own stylesheets by importing it from the UI package.
diff --git a/packages/next/src/scss/app.scss b/packages/next/src/scss/app.scss
index 90254443b..b0c575df8 100644
--- a/packages/next/src/scss/app.scss
+++ b/packages/next/src/scss/app.scss
@@ -1,203 +1,207 @@
+@layer payload-default, payload;
+
 @import 'styles';
 @import './toasts.scss';
 @import './colors.scss';
 
-:root {
-  --base-px: 20;
-  --base-body-size: 13;
-  --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
+@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;
+    --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;
+    --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;
 
-    ::selection {
-      color: var(--color-base-1000);
+    --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);
     }
 
-    ::-moz-selection {
-      color: var(--color-base-1000);
+    @include small-break {
+      --gutter-h: #{base(0.8)};
+      --spacing-view-bottom: calc(var(--base) * 2);
+      --nav-width: 100vw;
     }
   }
 
-  @include mid-break {
-    font-size: 12px;
+  /////////////////////////////
+  // GLOBAL STYLES
+  /////////////////////////////
+
+  * {
+    box-sizing: border-box;
   }
-}
 
-html,
-body,
-#app {
-  height: 100%;
-}
+  html {
+    @extend %body;
+    background: var(--theme-bg);
+    -webkit-font-smoothing: antialiased;
 
-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;
-}
+    &[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 {
-  background: var(--color-success-250);
-  color: var(--theme-base-800);
-}
+      ::selection {
+        color: var(--color-base-1000);
+      }
 
-::-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;
+      ::-moz-selection {
+        color: var(--color-base-1000);
+      }
+    }
+
+    @include mid-break {
+      font-size: 12px;
     }
-    outline: none;
   }
 
-  &:active {
-    opacity: 0.7;
-    outline: none;
+  html,
+  body,
+  #app {
+    height: 100%;
   }
-}
 
-svg {
-  vertical-align: middle;
-}
+  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;
+  }
 
-dialog {
-  width: 100%;
-  border: 0;
-  padding: 0;
-  color: currentColor;
-}
+  ::selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-.payload__modal-item {
-  min-height: 100%;
-  background: transparent;
-}
+  ::-moz-selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-.payload__modal-container--enterDone {
-  overflow: auto;
-}
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
 
-.payload__modal-item--enter,
-.payload__modal-item--enterDone {
-  z-index: var(--z-modal);
-}
+  h1 {
+    @extend %h1;
+  }
 
-// @import '~payload-user-css'; TODO: re-enable this
+  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
+}
diff --git a/packages/next/src/scss/colors.scss b/packages/next/src/scss/colors.scss
index 42cea0585..1eaa88cb0 100644
--- a/packages/next/src/scss/colors.scss
+++ b/packages/next/src/scss/colors.scss
@@ -1,269 +1,271 @@
-: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);
+@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-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-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-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);
+    --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-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-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-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-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);
+    --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);
+  }
 }
diff --git a/packages/next/src/scss/resets.scss b/packages/next/src/scss/resets.scss
index eeda892c2..e73efa9c0 100644
--- a/packages/next/src/scss/resets.scss
+++ b/packages/next/src/scss/resets.scss
@@ -1,10 +1,12 @@
-%btn-reset {
-  border: 0;
-  background: none;
-  box-shadow: none;
-  border-radius: 0;
-  padding: 0;
-  color: currentColor;
+@layer payload-default {
+  %btn-reset {
+    border: 0;
+    background: none;
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0;
+    color: currentColor;
+  }
 }
 
 @mixin btn-reset {
diff --git a/packages/next/src/scss/toastify.scss b/packages/next/src/scss/toastify.scss
index a5bf4c35f..33192936a 100644
--- a/packages/next/src/scss/toastify.scss
+++ b/packages/next/src/scss/toastify.scss
@@ -1,59 +1,61 @@
 @import 'vars';
 @import 'queries';
 
-.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 {
+@layer payload-default {
+  .Toastify {
     .Toastify__toast-container {
-      left: $baseline;
-      right: $baseline;
+      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;
+      }
     }
   }
 }
diff --git a/packages/next/src/scss/toasts.scss b/packages/next/src/scss/toasts.scss
index 116845ac3..4d3b0bc37 100644
--- a/packages/next/src/scss/toasts.scss
+++ b/packages/next/src/scss/toasts.scss
@@ -1,140 +1,142 @@
 @import './styles.scss';
 
-.payload-toast-container {
-  padding: 0;
-  margin: 0;
+@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;
+    .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);
-    }
+      svg {
+        width: base(0.8);
+        height: base(0.8);
+      }
 
-    &:hover {
-      color: var(--theme-elevation-250);
-      background: none;
-    }
+      &: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;
+      [dir='RTL'] & {
+        right: unset;
+        left: 0.5rem;
       }
     }
 
-    &[data-expanded='true'] {
-      .toast-content {
-        opacity: 1;
-      }
+    .toast-title {
+      line-height: base(1);
+      margin-right: base(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 {
+    .payload-toast-item {
+      padding: base(0.8);
       color: var(--theme-elevation-800);
-      border-color: var(--theme-elevation-250);
-      background-color: var(--theme-elevation-100);
+      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);
 
-      .payload-toast-close-button {
-        color: var(--theme-elevation-600);
+      .toast-content {
+        transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        width: 100%;
+      }
 
-        &:hover {
-          color: var(--theme-elevation-250);
+      &[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);
+          }
         }
       }
     }
diff --git a/packages/next/src/scss/type.scss b/packages/next/src/scss/type.scss
index 997e43e24..9fe3e34be 100644
--- a/packages/next/src/scss/type.scss
+++ b/packages/next/src/scss/type.scss
@@ -4,106 +4,107 @@
 /////////////////////////////
 // HEADINGS
 /////////////////////////////
-
-%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);
+@layer payload-default {
+  %h1,
+  %h2,
+  %h3,
+  %h4,
+  %h5,
+  %h6 {
+    font-family: var(--font-body);
+    font-weight: 500;
   }
-}
 
-%h2 {
-  margin: 0;
-  font-size: base(1.3);
-  line-height: base(1.6);
+  %h1 {
+    margin: 0;
+    font-size: base(1.6);
+    line-height: base(1.8);
 
-  @include small-break {
-    font-size: base(0.85);
+    @include small-break {
+      letter-spacing: -0.5px;
+      font-size: base(1.25);
+    }
   }
-}
 
-%h3 {
-  margin: 0;
-  font-size: base(1);
-  line-height: base(1.2);
+  %h2 {
+    margin: 0;
+    font-size: base(1.3);
+    line-height: base(1.6);
 
-  @include small-break {
-    font-size: base(0.65);
-    line-height: 1.25;
+    @include small-break {
+      font-size: base(0.85);
+    }
   }
-}
 
-%h4 {
-  margin: 0;
-  font-size: base(0.8);
-  line-height: base(1);
-  letter-spacing: -0.375px;
-}
+  %h3 {
+    margin: 0;
+    font-size: base(1);
+    line-height: base(1.2);
 
-%h5 {
-  margin: 0;
-  font-size: base(0.65);
-  line-height: base(0.8);
-}
+    @include small-break {
+      font-size: base(0.65);
+      line-height: 1.25;
+    }
+  }
 
-%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);
+  %h4 {
+    margin: 0;
+    font-size: base(0.8);
     line-height: base(1);
+    letter-spacing: -0.375px;
   }
 
-  @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);
+  %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);
+    }
   }
 }
diff --git a/packages/next/src/views/API/index.scss b/packages/next/src/views/API/index.scss
index 9b549bc47..4eea92bfe 100644
--- a/packages/next/src/views/API/index.scss
+++ b/packages/next/src/views/API/index.scss
@@ -1,123 +1,125 @@
 @import '../../scss/styles.scss';
 
-.query-inspector {
-  --string-color: #11b102;
-  --number-color: #62c3f3;
-  display: flex;
-  gap: calc(var(--base) * 2);
-  align-items: flex-start;
+@layer payload-default {
+  .query-inspector {
+    --string-color: #11b102;
+    --number-color: #62c3f3;
+    display: flex;
+    gap: calc(var(--base) * 2);
+    align-items: flex-start;
 
-  ul {
-    padding-left: calc(var(--base) * 1);
-  }
-
-  &--fullscreen {
-    padding-left: 0;
-    .query-inspector__configuration {
-      display: none;
+    ul {
+      padding-left: calc(var(--base) * 1);
     }
-  }
 
-  &__configuration {
-    margin-top: calc(var(--base) * 2);
-    width: 60%;
-    position: sticky;
-    top: var(--base);
-  }
+    &--fullscreen {
+      padding-left: 0;
+      .query-inspector__configuration {
+        display: none;
+      }
+    }
 
-  &__api-url {
-    margin-bottom: calc(var(--base) * 1.5);
+    &__configuration {
+      margin-top: calc(var(--base) * 2);
+      width: 60%;
+      position: sticky;
+      top: var(--base);
+    }
 
-    a {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      text-decoration: none;
+    &__api-url {
+      margin-bottom: calc(var(--base) * 1.5);
 
-      &:hover,
-      &:focus-visible {
-        text-decoration: underline;
+      a {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-decoration: none;
+
+        &:hover,
+        &:focus-visible {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    &__form-fields {
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+    }
+
+    &__label {
+      color: var(--theme-elevation-400);
+    }
+
+    &__filter-query-checkboxes {
+      display: flex;
+      gap: var(--base);
+    }
+
+    &__results-wrapper {
+      font-family: var(--font-mono);
+      width: 100%;
+      ul {
+        margin: 0;
+      }
+      li {
+        list-style: none;
+      }
+    }
+
+    &__toggle-fullscreen-button-container {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+
+      @include mid-break {
+        display: none;
+      }
+    }
+
+    &__toggle-fullscreen-button {
+      position: absolute;
+      right: calc(var(--base) * 0.5);
+      top: calc(var(--base) * 0.5);
+      padding: calc(var(--base) * 0.25);
+      background-color: var(--theme-elevation-0);
+      cursor: pointer;
+      z-index: 1;
+      margin: 0;
+      border: 0;
+      border-radius: 3px;
+      color: var(--theme-elevation-300);
+      &:hover {
+        color: var(--theme-elevation-700);
+      }
+    }
+
+    &__results {
+      padding-top: calc(var(--base) * 0.5);
+      padding-left: calc(var(--base) * 0.5);
+      padding-bottom: calc(var(--base) * 0.5);
+      background-color: var(--theme-elevation-50);
+      overflow: auto;
+      min-height: 100vh;
+    }
+
+    @include mid-break {
+      flex-direction: column;
+      padding-left: 0;
+
+      .query-inspector__configuration {
+        position: relative;
+        width: 100%;
+        top: 0;
+        padding-inline-end: var(--gutter-h);
       }
     }
   }
 
-  &__form-fields {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-  }
-
-  &__label {
-    color: var(--theme-elevation-400);
-  }
-
-  &__filter-query-checkboxes {
-    display: flex;
-    gap: var(--base);
-  }
-
-  &__results-wrapper {
-    font-family: var(--font-mono);
-    width: 100%;
-    ul {
-      margin: 0;
-    }
-    li {
-      list-style: none;
-    }
-  }
-
-  &__toggle-fullscreen-button-container {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-
-    @include mid-break {
-      display: none;
-    }
-  }
-
-  &__toggle-fullscreen-button {
-    position: absolute;
-    right: calc(var(--base) * 0.5);
-    top: calc(var(--base) * 0.5);
-    padding: calc(var(--base) * 0.25);
-    background-color: var(--theme-elevation-0);
-    cursor: pointer;
-    z-index: 1;
-    margin: 0;
-    border: 0;
-    border-radius: 3px;
-    color: var(--theme-elevation-300);
-    &:hover {
-      color: var(--theme-elevation-700);
-    }
-  }
-
-  &__results {
-    padding-top: calc(var(--base) * 0.5);
-    padding-left: calc(var(--base) * 0.5);
-    padding-bottom: calc(var(--base) * 0.5);
-    background-color: var(--theme-elevation-50);
-    overflow: auto;
-    min-height: 100vh;
-  }
-
-  @include mid-break {
-    flex-direction: column;
-    padding-left: 0;
-
-    .query-inspector__configuration {
-      position: relative;
-      width: 100%;
-      top: 0;
-      padding-inline-end: var(--gutter-h);
+  html[data-theme='light'] {
+    .query-inspector {
+      --number-color: #2e9cd3;
     }
   }
 }
-
-html[data-theme='light'] {
-  .query-inspector {
-    --number-color: #2e9cd3;
-  }
-}
diff --git a/packages/next/src/views/Account/Settings/index.scss b/packages/next/src/views/Account/Settings/index.scss
index 23eb53b7b..18d6522c6 100644
--- a/packages/next/src/views/Account/Settings/index.scss
+++ b/packages/next/src/views/Account/Settings/index.scss
@@ -1,46 +1,48 @@
 @import '../../../scss/styles.scss';
 
-.payload-settings {
-  position: relative;
-  margin-bottom: calc(var(--base) * 2);
+@layer payload-default {
+  .payload-settings {
+    position: relative;
+    margin-bottom: calc(var(--base) * 2);
 
-  h3 {
-    margin: 0;
-  }
+    h3 {
+      margin: 0;
+    }
 
-  &::before,
-  &::after {
-    content: '';
-    display: block;
-    height: 1px;
-    background: var(--theme-elevation-100);
-    width: calc(100% + calc(var(--base) * 5));
-    left: calc(var(--gutter-h) * -1);
-    top: 0;
-    position: absolute;
-  }
-
-  &::after {
-    display: none;
-    bottom: 0;
-    top: unset;
-  }
-
-  margin-top: calc(var(--base) * 3);
-  padding-top: calc(var(--base) * 3);
-  padding-bottom: calc(var(--base) * 3);
-  display: flex;
-  flex-direction: column;
-  gap: var(--base);
-
-  @include mid-break {
-    margin-bottom: var(--base);
-    padding-top: calc(var(--base) * 2);
-    margin-top: calc(var(--base) * 2);
-    padding-bottom: calc(var(--base) * 2);
+    &::before,
+    &::after {
+      content: '';
+      display: block;
+      height: 1px;
+      background: var(--theme-elevation-100);
+      width: calc(100% + calc(var(--base) * 5));
+      left: calc(var(--gutter-h) * -1);
+      top: 0;
+      position: absolute;
+    }
 
     &::after {
-      display: block;
+      display: none;
+      bottom: 0;
+      top: unset;
+    }
+
+    margin-top: calc(var(--base) * 3);
+    padding-top: calc(var(--base) * 3);
+    padding-bottom: calc(var(--base) * 3);
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+
+    @include mid-break {
+      margin-bottom: var(--base);
+      padding-top: calc(var(--base) * 2);
+      margin-top: calc(var(--base) * 2);
+      padding-bottom: calc(var(--base) * 2);
+
+      &::after {
+        display: block;
+      }
     }
   }
 }
diff --git a/packages/next/src/views/CreateFirstUser/index.scss b/packages/next/src/views/CreateFirstUser/index.scss
index 750018a60..3b17b5e3f 100644
--- a/packages/next/src/views/CreateFirstUser/index.scss
+++ b/packages/next/src/views/CreateFirstUser/index.scss
@@ -1,19 +1,21 @@
 @import '../../scss/styles.scss';
 
-.create-first-user {
-  display: flex;
-  flex-direction: column;
-  gap: base(0.4);
+@layer payload-default {
+  .create-first-user {
+    display: flex;
+    flex-direction: column;
+    gap: base(0.4);
 
-  > form > .field-type {
-    margin-bottom: var(--base);
+    > form > .field-type {
+      margin-bottom: var(--base);
 
-    & .form-submit {
-      margin: 0;
+      & .form-submit {
+        margin: 0;
+      }
     }
   }
-}
 
-.emailAndUsername {
-  margin-bottom: var(--base);
+  .emailAndUsername {
+    margin-bottom: var(--base);
+  }
 }
diff --git a/packages/next/src/views/Dashboard/Default/index.scss b/packages/next/src/views/Dashboard/Default/index.scss
index cbd00878a..385dfd38c 100644
--- a/packages/next/src/views/Dashboard/Default/index.scss
+++ b/packages/next/src/views/Dashboard/Default/index.scss
@@ -1,67 +1,69 @@
 @import '../../../scss/styles.scss';
 
-.dashboard {
-  width: 100%;
-  --gap: var(--base);
-  --cols: 5;
-
-  &__wrap {
-    padding-bottom: var(--spacing-view-bottom);
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-  }
-
-  &__group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap);
-  }
-
-  &__label {
-    margin: 0;
-  }
-
-  &__card-list {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    gap: var(--gap);
-    display: grid;
-    grid-template-columns: repeat(var(--cols), 1fr);
-
-    .card {
-      height: 100%;
-    }
-  }
-
-  &__locked.locked {
-    align-items: unset;
-    justify-content: unset;
-  }
-
-  @include large-break {
-    --cols: 4;
-  }
-
-  @include mid-break {
+@layer payload-default {
+  .dashboard {
+    width: 100%;
     --gap: var(--base);
-    --cols: 2;
-  }
-
-  @include small-break {
-    --cols: 2;
+    --cols: 5;
 
     &__wrap {
+      padding-bottom: var(--spacing-view-bottom);
+      display: flex;
+      flex-direction: column;
       gap: var(--base);
     }
 
+    &__group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+    }
+
+    &__label {
+      margin: 0;
+    }
+
     &__card-list {
-      gap: base(0.4);
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      gap: var(--gap);
+      display: grid;
+      grid-template-columns: repeat(var(--cols), 1fr);
+
+      .card {
+        height: 100%;
+      }
+    }
+
+    &__locked.locked {
+      align-items: unset;
+      justify-content: unset;
+    }
+
+    @include large-break {
+      --cols: 4;
+    }
+
+    @include mid-break {
+      --gap: var(--base);
+      --cols: 2;
+    }
+
+    @include small-break {
+      --cols: 2;
+
+      &__wrap {
+        gap: var(--base);
+      }
+
+      &__card-list {
+        gap: base(0.4);
+      }
+    }
+
+    @include extra-small-break {
+      --cols: 1;
     }
   }
-
-  @include extra-small-break {
-    --cols: 1;
-  }
 }
diff --git a/packages/next/src/views/Edit/Default/Auth/index.scss b/packages/next/src/views/Edit/Default/Auth/index.scss
index f94e00fd3..3193be620 100644
--- a/packages/next/src/views/Edit/Default/Auth/index.scss
+++ b/packages/next/src/views/Edit/Default/Auth/index.scss
@@ -1,76 +1,78 @@
 @import '../../../../scss/styles.scss';
 
-.auth-fields {
-  padding: calc(var(--base) * 2);
-  background: var(--theme-elevation-50);
-  display: flex;
-  flex-direction: column;
-  gap: var(--base);
-
-  &__controls {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--base) / 2);
-    flex-wrap: wrap;
-  }
-
-  &__changing-password {
+@layer payload-default {
+  .auth-fields {
+    padding: calc(var(--base) * 2);
+    background: var(--theme-elevation-50);
     display: flex;
     flex-direction: column;
     gap: var(--base);
-  }
 
-  .btn {
-    margin: 0;
-  }
-
-  &__api-key-label {
-    position: relative;
-  }
-
-  @include mid-break {
-    padding: var(--base);
-    gap: calc(var(--base) / 2);
+    &__controls {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) / 2);
+      flex-wrap: wrap;
+    }
 
     &__changing-password {
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+    }
+
+    .btn {
+      margin: 0;
+    }
+
+    &__api-key-label {
+      position: relative;
+    }
+
+    @include mid-break {
+      padding: var(--base);
       gap: calc(var(--base) / 2);
+
+      &__changing-password {
+        gap: calc(var(--base) / 2);
+      }
     }
   }
-}
 
-.field-type.api-key {
-  margin-bottom: var(--base);
+  .field-type.api-key {
+    margin-bottom: var(--base);
 
-  input {
-    @include formInput;
+    input {
+      @include formInput;
+    }
+  }
+
+  @keyframes highlight {
+    0% {
+      background: var(--theme-success-250);
+      border: 1px solid var(--theme-success-500);
+    }
+
+    20% {
+      background: var(--theme-input-bg);
+      border: 1px solid var(--theme-elevation-250);
+      color: var(--theme-text);
+    }
+
+    80% {
+      background: var(--theme-input-bg);
+      border: 1px solid var(--theme-elevation-250);
+      color: var(--theme-text);
+    }
+
+    100% {
+      background: var(--theme-elevation-200);
+      border: 1px solid transparent;
+      color: var(--theme-elevation-400);
+    }
+  }
+
+  .highlight {
+    animation: highlight 10s;
   }
 }
-
-@keyframes highlight {
-  0% {
-    background: var(--theme-success-250);
-    border: 1px solid var(--theme-success-500);
-  }
-
-  20% {
-    background: var(--theme-input-bg);
-    border: 1px solid var(--theme-elevation-250);
-    color: var(--theme-text);
-  }
-
-  80% {
-    background: var(--theme-input-bg);
-    border: 1px solid var(--theme-elevation-250);
-    color: var(--theme-text);
-  }
-
-  100% {
-    background: var(--theme-elevation-200);
-    border: 1px solid transparent;
-    color: var(--theme-elevation-400);
-  }
-}
-
-.highlight {
-  animation: highlight 10s;
-}
diff --git a/packages/next/src/views/Edit/Default/index.scss b/packages/next/src/views/Edit/Default/index.scss
index 460bf8c20..59e2ddafe 100644
--- a/packages/next/src/views/Edit/Default/index.scss
+++ b/packages/next/src/views/Edit/Default/index.scss
@@ -1,21 +1,23 @@
 @import '../../../scss/styles.scss';
 
-.collection-edit {
-  width: 100%;
+@layer payload-default {
+  .collection-edit {
+    width: 100%;
 
-  &__form {
-    height: 100%;
-  }
+    &__form {
+      height: 100%;
+    }
 
-  &__auth {
-    margin-bottom: base(1.6);
-    border-radius: var(--style-radius-s);
-  }
-
-  @include small-break {
     &__auth {
-      margin-top: 0;
-      margin-bottom: var(--base);
+      margin-bottom: base(1.6);
+      border-radius: var(--style-radius-s);
+    }
+
+    @include small-break {
+      &__auth {
+        margin-top: 0;
+        margin-bottom: var(--base);
+      }
     }
   }
 }
diff --git a/packages/next/src/views/List/Default/index.scss b/packages/next/src/views/List/Default/index.scss
index 066a70388..c7410a637 100644
--- a/packages/next/src/views/List/Default/index.scss
+++ b/packages/next/src/views/List/Default/index.scss
@@ -1,177 +1,179 @@
 @import '../../../scss/styles.scss';
 
-.collection-list {
-  width: 100%;
-
-  &__wrap {
-    padding-bottom: var(--spacing-view-bottom);
-
-    & > *:not(:last-child) {
-      margin-bottom: var(--base);
-    }
-  }
-
-  .list-header {
-    a {
-      text-decoration: none;
-    }
-
-    .btn--withoutPopup,
-    .btn--withPopup {
-      position: relative;
-      margin: 0 0 base(0.2);
-    }
-  }
-
-  &__sub-header {
-    flex-basis: 100%;
-  }
-
-  .table {
-    table {
-      width: 100%;
-      overflow: auto;
-
-      [class^='cell'] > p,
-      [class^='cell'] > span,
-      [class^='cell'] > a {
-        line-clamp: 4;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 4;
-        overflow: hidden;
-        display: -webkit-box;
-        max-width: 100vw;
-      }
-
-      #heading-_select,
-      .cell-_select {
-        display: flex;
-        min-width: unset;
-      }
-    }
-  }
-
-  &__no-results {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--base);
-
-    & > * {
-      margin: 0;
-    }
-  }
-
-  &__page-controls {
+@layer payload-default {
+  .collection-list {
     width: 100%;
-    display: flex;
-    align-items: center;
-  }
-
-  .paginator {
-    margin-bottom: 0;
-  }
-
-  &__page-info {
-    [dir='ltr'] & {
-      margin-right: base(1);
-      margin-left: auto;
-    }
-    [dir='rtl'] & {
-      margin-left: base(1);
-      margin-right: auto;
-    }
-  }
-
-  &__list-selection {
-    position: fixed;
-    bottom: 0;
-    z-index: 10;
-    padding: base(0.8) 0;
-    width: 100%;
-    background-color: var(--theme-bg);
-
-    .btn {
-      margin: 0 0 0 base(0.4);
-    }
-
-    .btn {
-      background-color: var(--theme-elevation-100);
-      cursor: pointer;
-      padding: 0 base(0.4);
-      border-radius: $style-radius-s;
-
-      &:hover {
-        background-color: var(--theme-elevation-200);
-      }
-    }
-  }
-
-  &__list-selection-actions {
-    display: flex;
-    gap: base(0.25);
-  }
-
-  &__shimmer {
-    margin-top: base(1.75);
-    width: 100%;
-    > div {
-      margin-top: 8px;
-    }
-  }
-
-  @include mid-break {
-    margin-top: base(0.25);
 
     &__wrap {
-      padding-top: 0;
-      padding-bottom: 0;
+      padding-bottom: var(--spacing-view-bottom);
+
+      & > *:not(:last-child) {
+        margin-bottom: var(--base);
+      }
     }
 
-    &__header {
-      gap: base(0.5);
+    .list-header {
+      a {
+        text-decoration: none;
+      }
+
+      .btn--withoutPopup,
+      .btn--withPopup {
+        position: relative;
+        margin: 0 0 base(0.2);
+      }
     }
 
     &__sub-header {
-      margin-top: 0;
+      flex-basis: 100%;
     }
 
-    &__search-input {
-      margin: 0;
-    }
-
-    // on mobile, extend the table all the way to the viewport edges
-    // this is to visually indicate overflowing content
     .table {
-      display: flex;
-      width: calc(100% + calc(var(--gutter-h) * 2));
-      max-width: unset;
-      left: calc(var(--gutter-h) * -1);
-      position: relative;
-      padding-left: var(--gutter-h);
+      table {
+        width: 100%;
+        overflow: auto;
 
-      &::after {
-        content: '';
-        height: 1px;
-        padding-right: var(--gutter-h);
+        [class^='cell'] > p,
+        [class^='cell'] > span,
+        [class^='cell'] > a {
+          line-clamp: 4;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 4;
+          overflow: hidden;
+          display: -webkit-box;
+          max-width: 100vw;
+        }
+
+        #heading-_select,
+        .cell-_select {
+          display: flex;
+          min-width: unset;
+        }
+      }
+    }
+
+    &__no-results {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--base);
+
+      & > * {
+        margin: 0;
       }
     }
 
     &__page-controls {
-      flex-wrap: wrap;
-    }
-
-    &__page-info {
-      margin-left: 0;
+      width: 100%;
+      display: flex;
+      align-items: center;
     }
 
     .paginator {
+      margin-bottom: 0;
+    }
+
+    &__page-info {
+      [dir='ltr'] & {
+        margin-right: base(1);
+        margin-left: auto;
+      }
+      [dir='rtl'] & {
+        margin-left: base(1);
+        margin-right: auto;
+      }
+    }
+
+    &__list-selection {
+      position: fixed;
+      bottom: 0;
+      z-index: 10;
+      padding: base(0.8) 0;
       width: 100%;
-      margin-bottom: $baseline;
+      background-color: var(--theme-bg);
+
+      .btn {
+        margin: 0 0 0 base(0.4);
+      }
+
+      .btn {
+        background-color: var(--theme-elevation-100);
+        cursor: pointer;
+        padding: 0 base(0.4);
+        border-radius: $style-radius-s;
+
+        &:hover {
+          background-color: var(--theme-elevation-200);
+        }
+      }
+    }
+
+    &__list-selection-actions {
+      display: flex;
+      gap: base(0.25);
+    }
+
+    &__shimmer {
+      margin-top: base(1.75);
+      width: 100%;
+      > div {
+        margin-top: 8px;
+      }
+    }
+
+    @include mid-break {
+      margin-top: base(0.25);
+
+      &__wrap {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      &__header {
+        gap: base(0.5);
+      }
+
+      &__sub-header {
+        margin-top: 0;
+      }
+
+      &__search-input {
+        margin: 0;
+      }
+
+      // on mobile, extend the table all the way to the viewport edges
+      // this is to visually indicate overflowing content
+      .table {
+        display: flex;
+        width: calc(100% + calc(var(--gutter-h) * 2));
+        max-width: unset;
+        left: calc(var(--gutter-h) * -1);
+        position: relative;
+        padding-left: var(--gutter-h);
+
+        &::after {
+          content: '';
+          height: 1px;
+          padding-right: var(--gutter-h);
+        }
+      }
+
+      &__page-controls {
+        flex-wrap: wrap;
+      }
+
+      &__page-info {
+        margin-left: 0;
+      }
+
+      .paginator {
+        width: 100%;
+        margin-bottom: $baseline;
+      }
+    }
+
+    @include small-break {
+      margin-bottom: base(2.4);
     }
   }
-
-  @include small-break {
-    margin-bottom: base(2.4);
-  }
 }
diff --git a/packages/next/src/views/LivePreview/IFrame/index.scss b/packages/next/src/views/LivePreview/IFrame/index.scss
index 8d2c97a1e..4296d4d31 100644
--- a/packages/next/src/views/LivePreview/IFrame/index.scss
+++ b/packages/next/src/views/LivePreview/IFrame/index.scss
@@ -1,7 +1,9 @@
-.live-preview-iframe {
-  background-color: white;
-  border: 0;
-  width: 100%;
-  height: 100%;
-  transform-origin: top left;
+@layer payload-default {
+  .live-preview-iframe {
+    background-color: white;
+    border: 0;
+    width: 100%;
+    height: 100%;
+    transform-origin: top left;
+  }
 }
diff --git a/packages/next/src/views/LivePreview/Preview/index.scss b/packages/next/src/views/LivePreview/Preview/index.scss
index a93a2c625..029d7f542 100644
--- a/packages/next/src/views/LivePreview/Preview/index.scss
+++ b/packages/next/src/views/LivePreview/Preview/index.scss
@@ -1,41 +1,43 @@
 @import '../../../scss/styles.scss';
 
-.live-preview-window {
-  background-color: var(--theme-bg);
-  width: 60%;
-  flex-shrink: 0;
-  flex-grow: 0;
-  position: sticky;
-  top: var(--doc-controls-height);
-  height: calc(100vh - var(--doc-controls-height));
-  overflow: hidden;
+@layer payload-default {
+  .live-preview-window {
+    background-color: var(--theme-bg);
+    width: 60%;
+    flex-shrink: 0;
+    flex-grow: 0;
+    position: sticky;
+    top: var(--doc-controls-height);
+    height: calc(100vh - var(--doc-controls-height));
+    overflow: hidden;
 
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: flex-start;
-  }
-
-  &__main {
-    flex-grow: 1;
-    height: 100%;
-    width: 100%;
-  }
-
-  &--has-breakpoint {
-    .live-preview-iframe {
-      border: 1px solid var(--theme-elevation-100);
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      justify-content: flex-start;
     }
 
-    .live-preview-window {
-      &__main {
-        padding: var(--base);
+    &__main {
+      flex-grow: 1;
+      height: 100%;
+      width: 100%;
+    }
+
+    &--has-breakpoint {
+      .live-preview-iframe {
+        border: 1px solid var(--theme-elevation-100);
+      }
+
+      .live-preview-window {
+        &__main {
+          padding: var(--base);
+        }
       }
     }
-  }
 
-  @include mid-break {
-    width: 100%;
+    @include mid-break {
+      width: 100%;
+    }
   }
 }
diff --git a/packages/next/src/views/LivePreview/Toolbar/Controls/index.scss b/packages/next/src/views/LivePreview/Toolbar/Controls/index.scss
index ca90b4195..0d7e4359e 100644
--- a/packages/next/src/views/LivePreview/Toolbar/Controls/index.scss
+++ b/packages/next/src/views/LivePreview/Toolbar/Controls/index.scss
@@ -1,59 +1,61 @@
 @import '../../../../scss/styles.scss';
 
-.live-preview-toolbar-controls {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--base) / 3);
+@layer payload-default {
+  .live-preview-toolbar-controls {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) / 3);
 
-  &__breakpoint {
-    border: none;
-    background: transparent;
-    height: var(--base);
+    &__breakpoint {
+      border: none;
+      background: transparent;
+      height: var(--base);
 
-    &:focus {
-      outline: none;
+      &:focus {
+        outline: none;
+      }
     }
-  }
 
-  &__device-size {
-    display: flex;
-    align-items: center;
-  }
-
-  &__size {
-    width: 50px;
-    height: var(--base);
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--theme-elevation-200);
-    background: var(--theme-elevation-100);
-    border-radius: 2px;
-    font-size: small;
-  }
-
-  &__zoom {
-    width: 55px;
-    border: none;
-    background: transparent;
-    height: var(--base);
-
-    &:focus {
-      outline: none;
+    &__device-size {
+      display: flex;
+      align-items: center;
     }
-  }
 
-  &__external {
-    flex-shrink: 0;
-    display: flex;
-    width: var(--base);
-    height: var(--base);
-    align-items: center;
-    justify-content: center;
-    padding: 6px 0;
-  }
+    &__size {
+      width: 50px;
+      height: var(--base);
+      display: flex;
+      align-items: center;
+      border: 1px solid var(--theme-elevation-200);
+      background: var(--theme-elevation-100);
+      border-radius: 2px;
+      font-size: small;
+    }
 
-  .popup-button {
-    display: flex;
-    align-items: center;
+    &__zoom {
+      width: 55px;
+      border: none;
+      background: transparent;
+      height: var(--base);
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    &__external {
+      flex-shrink: 0;
+      display: flex;
+      width: var(--base);
+      height: var(--base);
+      align-items: center;
+      justify-content: center;
+      padding: 6px 0;
+    }
+
+    .popup-button {
+      display: flex;
+      align-items: center;
+    }
   }
 }
diff --git a/packages/next/src/views/LivePreview/Toolbar/SizeInput/index.scss b/packages/next/src/views/LivePreview/Toolbar/SizeInput/index.scss
index 242fc2b1e..0dbd78d67 100644
--- a/packages/next/src/views/LivePreview/Toolbar/SizeInput/index.scss
+++ b/packages/next/src/views/LivePreview/Toolbar/SizeInput/index.scss
@@ -1,10 +1,12 @@
-.toolbar-input {
-  width: 50px;
-  height: var(--base);
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--theme-elevation-200);
-  background: var(--theme-elevation-100);
-  border-radius: 2px;
-  font-size: small;
+@layer payload-default {
+  .toolbar-input {
+    width: 50px;
+    height: var(--base);
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--theme-elevation-200);
+    background: var(--theme-elevation-100);
+    border-radius: 2px;
+    font-size: small;
+  }
 }
diff --git a/packages/next/src/views/LivePreview/Toolbar/index.scss b/packages/next/src/views/LivePreview/Toolbar/index.scss
index 8dfdf751d..957bbbb44 100644
--- a/packages/next/src/views/LivePreview/Toolbar/index.scss
+++ b/packages/next/src/views/LivePreview/Toolbar/index.scss
@@ -1,41 +1,43 @@
 @import '../../../scss/styles.scss';
 
-.live-preview-toolbar {
-  display: flex;
-  background-color: var(--theme-bg);
-  color: var(--theme-text);
-  height: calc(var(--base) * 1.75);
-  align-items: center;
-  flex-shrink: 0;
+@layer payload-default {
+  .live-preview-toolbar {
+    display: flex;
+    background-color: var(--theme-bg);
+    color: var(--theme-text);
+    height: calc(var(--base) * 1.75);
+    align-items: center;
+    flex-shrink: 0;
 
-  &--static {
-    position: relative;
-    width: 100%;
-    justify-content: center;
-    border-bottom: 1px solid var(--theme-elevation-100);
-  }
-
-  &--draggable {
-    @include shadow-lg;
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin: 0;
-    border-radius: 4px;
-  }
-
-  &__drag-handle {
-    background: transparent;
-    border: 0;
-    padding: 0;
-    cursor: grab;
-
-    .icon--drag-handle .fill {
-      fill: var(--theme-elevation-300);
+    &--static {
+      position: relative;
+      width: 100%;
+      justify-content: center;
+      border-bottom: 1px solid var(--theme-elevation-100);
     }
 
-    &:active {
-      cursor: grabbing;
+    &--draggable {
+      @include shadow-lg;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: 0;
+      border-radius: 4px;
+    }
+
+    &__drag-handle {
+      background: transparent;
+      border: 0;
+      padding: 0;
+      cursor: grab;
+
+      .icon--drag-handle .fill {
+        fill: var(--theme-elevation-300);
+      }
+
+      &:active {
+        cursor: grabbing;
+      }
     }
   }
 }
diff --git a/packages/next/src/views/LivePreview/ToolbarArea/index.scss b/packages/next/src/views/LivePreview/ToolbarArea/index.scss
index bbf897ad8..7eb3e64e6 100644
--- a/packages/next/src/views/LivePreview/ToolbarArea/index.scss
+++ b/packages/next/src/views/LivePreview/ToolbarArea/index.scss
@@ -1,4 +1,6 @@
-.toolbar-area {
-  width: 100%;
-  height: 100%;
+@layer payload-default {
+  .toolbar-area {
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/packages/next/src/views/LivePreview/index.scss b/packages/next/src/views/LivePreview/index.scss
index 62113bbe1..2aae4d07d 100644
--- a/packages/next/src/views/LivePreview/index.scss
+++ b/packages/next/src/views/LivePreview/index.scss
@@ -1,66 +1,68 @@
 @import '../../scss/styles.scss';
 
-.live-preview {
-  width: 100%;
-  display: flex;
-  --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.04) 0%, transparent 100%);
-
-  [dir='rtl'] & {
-    flex-direction: row-reverse;
-  }
-
-  &--popup-open {
-    .live-preview {
-      &__edit {
-        padding-right: var(--gutter-h);
-      }
-    }
-  }
-
-  &__main {
-    width: 40%;
+@layer payload-default {
+  .live-preview {
+    width: 100%;
     display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    position: relative;
+    --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.04) 0%, transparent 100%);
+
+    [dir='rtl'] & {
+      flex-direction: row-reverse;
+    }
 
     &--popup-open {
-      width: 100%;
-    }
-
-    &::after {
-      content: ' ';
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: calc(var(--base) * 2);
-      height: 100%;
-      background: var(--gradient);
-      pointer-events: none;
-      z-index: -1;
-    }
-  }
-
-  @include mid-break {
-    flex-direction: column;
-
-    &__main {
-      min-height: initial;
-      width: 100%;
-
-      &::after {
-        display: none;
+      .live-preview {
+        &__edit {
+          padding-right: var(--gutter-h);
+        }
       }
     }
 
-    &__form {
-      display: block;
+    &__main {
+      width: 40%;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+      position: relative;
+
+      &--popup-open {
+        width: 100%;
+      }
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: calc(var(--base) * 2);
+        height: 100%;
+        background: var(--gradient);
+        pointer-events: none;
+        z-index: -1;
+      }
+    }
+
+    @include mid-break {
+      flex-direction: column;
+
+      &__main {
+        min-height: initial;
+        width: 100%;
+
+        &::after {
+          display: none;
+        }
+      }
+
+      &__form {
+        display: block;
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .live-preview {
+      --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
     }
   }
 }
-
-html[data-theme='dark'] {
-  .live-preview {
-    --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
-  }
-}
diff --git a/packages/next/src/views/Login/LoginForm/index.scss b/packages/next/src/views/Login/LoginForm/index.scss
index cdd85ab45..77ba4a0ce 100644
--- a/packages/next/src/views/Login/LoginForm/index.scss
+++ b/packages/next/src/views/Login/LoginForm/index.scss
@@ -1,8 +1,10 @@
-.login__form {
-  &__inputWrap {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-    margin-bottom: calc(var(--base) / 4);
+@layer payload-default {
+  .login__form {
+    &__inputWrap {
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+      margin-bottom: calc(var(--base) / 4);
+    }
   }
 }
diff --git a/packages/next/src/views/Login/index.scss b/packages/next/src/views/Login/index.scss
index 828c7ac97..37721af43 100644
--- a/packages/next/src/views/Login/index.scss
+++ b/packages/next/src/views/Login/index.scss
@@ -1,8 +1,10 @@
-.login {
-  &__brand {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    margin-bottom: calc(var(--base) * 2);
+@layer payload-default {
+  .login {
+    &__brand {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      margin-bottom: calc(var(--base) * 2);
+    }
   }
 }
diff --git a/packages/next/src/views/Logout/index.scss b/packages/next/src/views/Logout/index.scss
index 21aa20a4e..dfdaadb50 100644
--- a/packages/next/src/views/Logout/index.scss
+++ b/packages/next/src/views/Logout/index.scss
@@ -1,23 +1,25 @@
 @import '../../scss/styles.scss';
 
-.logout {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-wrap: wrap;
-
-  &__wrap {
-    z-index: 1;
-    position: relative;
+@layer payload-default {
+  .logout {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    gap: base(0.8);
-    width: 100%;
-    max-width: base(36);
+    align-items: center;
+    flex-wrap: wrap;
 
-    & > * {
-      margin: 0;
+    &__wrap {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: base(0.8);
+      width: 100%;
+      max-width: base(36);
+
+      & > * {
+        margin: 0;
+      }
     }
   }
 }
diff --git a/packages/next/src/views/NotFound/index.scss b/packages/next/src/views/NotFound/index.scss
index ebd6c2194..d42681971 100644
--- a/packages/next/src/views/NotFound/index.scss
+++ b/packages/next/src/views/NotFound/index.scss
@@ -1,55 +1,57 @@
 @import '../../scss/styles.scss';
 
-.not-found {
-  margin-top: var(--base);
-  display: flex;
-
-  & > * {
-    &:first-child {
-      margin-top: 0;
-    }
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &__wrap {
+@layer payload-default {
+  .not-found {
+    margin-top: var(--base);
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: base(0.8);
-    max-width: base(36);
-  }
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: base(0.4);
+    & > * {
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
 
-    > * {
+    &__wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: base(0.8);
+      max-width: base(36);
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
+
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__button {
       margin: 0;
     }
-  }
 
-  &__button {
-    margin: 0;
-  }
-
-  &--margin-top-large {
-    margin-top: calc(var(--base) * 2);
-  }
-
-  @include large-break {
     &--margin-top-large {
-      margin-top: var(--base);
+      margin-top: calc(var(--base) * 2);
     }
-  }
 
-  @include small-break {
-    margin-top: calc(var(--base) / 2);
+    @include large-break {
+      &--margin-top-large {
+        margin-top: var(--base);
+      }
+    }
 
-    &--margin-top-large {
+    @include small-break {
       margin-top: calc(var(--base) / 2);
+
+      &--margin-top-large {
+        margin-top: calc(var(--base) / 2);
+      }
     }
   }
 }
diff --git a/packages/next/src/views/ResetPassword/index.scss b/packages/next/src/views/ResetPassword/index.scss
index 2ef1a8c79..112d55478 100644
--- a/packages/next/src/views/ResetPassword/index.scss
+++ b/packages/next/src/views/ResetPassword/index.scss
@@ -1,31 +1,33 @@
 @import '../../scss/styles.scss';
 
-.reset-password {
-  &__wrap {
-    z-index: 1;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: base(0.8);
-    max-width: base(36);
+@layer payload-default {
+  .reset-password {
+    &__wrap {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: base(0.8);
+      max-width: base(36);
 
-    & > form {
-      width: 100%;
+      & > form {
+        width: 100%;
 
-      & > .inputWrap {
-        display: flex;
-        flex-direction: column;
-        gap: base(0.8);
+        & > .inputWrap {
+          display: flex;
+          flex-direction: column;
+          gap: base(0.8);
 
-        > * {
-          margin: 0;
+          > * {
+            margin: 0;
+          }
         }
       }
-    }
 
-    & > .btn {
-      margin: 0;
+      & > .btn {
+        margin: 0;
+      }
     }
   }
 }
diff --git a/packages/next/src/views/Unauthorized/index.scss b/packages/next/src/views/Unauthorized/index.scss
index fda11639e..697c9b997 100644
--- a/packages/next/src/views/Unauthorized/index.scss
+++ b/packages/next/src/views/Unauthorized/index.scss
@@ -1,36 +1,38 @@
 @import '../../scss/styles.scss';
 
-.unauthorized {
-  margin-top: var(--base);
+@layer payload-default {
+  .unauthorized {
+    margin-top: var(--base);
 
-  & > * {
-    &:first-child {
-      margin-top: 0;
+    & > * {
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
-    &:last-child {
-      margin-bottom: 0;
+
+    &__button {
+      margin: 0;
     }
-  }
-
-  &__button {
-    margin: 0;
-  }
-
-  &--margin-top-large {
-    margin-top: calc(var(--base) * 2);
-  }
-
-  @include large-break {
-    &--margin-top-large {
-      margin-top: var(--base);
-    }
-  }
-
-  @include small-break {
-    margin-top: calc(var(--base) / 2);
 
     &--margin-top-large {
+      margin-top: calc(var(--base) * 2);
+    }
+
+    @include large-break {
+      &--margin-top-large {
+        margin-top: var(--base);
+      }
+    }
+
+    @include small-break {
       margin-top: calc(var(--base) / 2);
+
+      &--margin-top-large {
+        margin-top: calc(var(--base) / 2);
+      }
     }
   }
 }
diff --git a/packages/next/src/views/Verify/index.scss b/packages/next/src/views/Verify/index.scss
index 83481597d..77b4a8841 100644
--- a/packages/next/src/views/Verify/index.scss
+++ b/packages/next/src/views/Verify/index.scss
@@ -1,14 +1,16 @@
-.verify {
-  display: flex;
-  align-items: center;
-  text-align: center;
-  flex-wrap: wrap;
-  min-height: 100vh;
-
-  &__brand {
+@layer payload-default {
+  .verify {
     display: flex;
-    justify-content: center;
-    width: 100%;
-    margin-bottom: calc(var(--base) * 2);
+    align-items: center;
+    text-align: center;
+    flex-wrap: wrap;
+    min-height: 100vh;
+
+    &__brand {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      margin-bottom: calc(var(--base) * 2);
+    }
   }
 }
diff --git a/packages/next/src/views/Version/Default/index.scss b/packages/next/src/views/Version/Default/index.scss
index 401c0cebb..4f3cd400e 100644
--- a/packages/next/src/views/Version/Default/index.scss
+++ b/packages/next/src/views/Version/Default/index.scss
@@ -1,70 +1,72 @@
 @import '../../../scss/styles.scss';
 
-.view-version {
-  width: 100%;
-  padding-bottom: var(--spacing-view-bottom);
+@layer payload-default {
+  .view-version {
+    width: 100%;
+    padding-bottom: var(--spacing-view-bottom);
 
-  &__wrap {
-    padding-top: calc(var(--base) * 1.5);
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-  }
-
-  &__header-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 4);
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-
-    h2 {
-      margin: 0;
-    }
-  }
-
-  &__created-at {
-    margin: 0;
-    color: var(--theme-elevation-500);
-  }
-
-  &__controls {
-    display: flex;
-    gap: var(--base);
-
-    > * {
-      flex-basis: 100%;
-    }
-  }
-
-  &__restore {
-    margin: 0 0 0 var(--base);
-  }
-
-  @include mid-break {
-    &__intro,
-    &__header {
-      display: block;
+    &__wrap {
+      padding-top: calc(var(--base) * 1.5);
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
     }
 
-    &__controls {
+    &__header-wrap {
+      display: flex;
       flex-direction: column;
       gap: calc(var(--base) / 4);
     }
 
-    &__restore {
-      margin: calc(var(--base) * 0.5) 0 0 0;
-    }
-  }
+    &__header {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
 
-  @include small-break {
-    &__wrap {
-      padding-top: calc(var(--base) / 2);
-      gap: calc(var(--base) / 2);
+      h2 {
+        margin: 0;
+      }
+    }
+
+    &__created-at {
+      margin: 0;
+      color: var(--theme-elevation-500);
+    }
+
+    &__controls {
+      display: flex;
+      gap: var(--base);
+
+      > * {
+        flex-basis: 100%;
+      }
+    }
+
+    &__restore {
+      margin: 0 0 0 var(--base);
+    }
+
+    @include mid-break {
+      &__intro,
+      &__header {
+        display: block;
+      }
+
+      &__controls {
+        flex-direction: column;
+        gap: calc(var(--base) / 4);
+      }
+
+      &__restore {
+        margin: calc(var(--base) * 0.5) 0 0 0;
+      }
+    }
+
+    @include small-break {
+      &__wrap {
+        padding-top: calc(var(--base) / 2);
+        gap: calc(var(--base) / 2);
+      }
     }
   }
 }
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/Label/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/Label/index.scss
index beffc17b5..61e50c4cd 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/Label/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/Label/index.scss
@@ -1,4 +1,6 @@
-.field-diff-label {
-  margin-bottom: calc(var(--base) * 0.25);
-  font-weight: 600;
+@layer payload-default {
+  .field-diff-label {
+    margin-bottom: calc(var(--base) * 0.25);
+    font-weight: 600;
+  }
 }
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss
index f4694eb94..a795f2a75 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss
@@ -1,34 +1,36 @@
-.iterable-diff {
-  margin-bottom: calc(var(--base) * 2);
+@layer payload-default {
+  .iterable-diff {
+    margin-bottom: calc(var(--base) * 2);
 
-  &__locale-label {
-    background: var(--theme-elevation-100);
-    padding: calc(var(--base) * 0.25);
-    // border-radius: $style-radius-m;
-    [dir='ltr'] & {
-      margin-right: calc(var(--base) * 0.25);
+    &__locale-label {
+      background: var(--theme-elevation-100);
+      padding: calc(var(--base) * 0.25);
+      // border-radius: $style-radius-m;
+      [dir='ltr'] & {
+        margin-right: calc(var(--base) * 0.25);
+      }
+      [dir='rtl'] & {
+        margin-left: calc(var(--base) * 0.25);
+      }
     }
-    [dir='rtl'] & {
-      margin-left: calc(var(--base) * 0.25);
-    }
-  }
 
-  &__wrap {
-    margin: calc(var(--base) * 0.5);
-    [dir='ltr'] & {
-      padding-left: calc(var(--base) * 0.5);
-      // border-left: $style-stroke-width-s solid var(--theme-elevation-150);
+    &__wrap {
+      margin: calc(var(--base) * 0.5);
+      [dir='ltr'] & {
+        padding-left: calc(var(--base) * 0.5);
+        // border-left: $style-stroke-width-s solid var(--theme-elevation-150);
+      }
+      [dir='rtl'] & {
+        padding-right: calc(var(--base) * 0.5);
+        // border-right: $style-stroke-width-s solid var(--theme-elevation-150);
+      }
     }
-    [dir='rtl'] & {
-      padding-right: calc(var(--base) * 0.5);
-      // border-right: $style-stroke-width-s solid var(--theme-elevation-150);
-    }
-  }
 
-  &__no-rows {
-    font-family: monospace;
-    background-color: var(--theme-elevation-50);
-    // padding: base(0.125) calc(var(--base) * 0.5);
-    // margin: base(0.125) 0;
+    &__no-rows {
+      font-family: monospace;
+      background-color: var(--theme-elevation-50);
+      // padding: base(0.125) calc(var(--base) * 0.5);
+      // margin: base(0.125) 0;
+    }
   }
 }
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.scss
index 5765f8779..5e6af6055 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.scss
@@ -1,12 +1,14 @@
-.nested-diff {
-  &__wrap--gutter {
-    [dir='ltr'] & {
-      padding-left: calc(var(--base) * 0.25);
-      // border-left: $style-stroke-width-s solid var(--theme-elevation-150);
-    }
-    [dir='rtl'] & {
-      padding-right: calc(var(--base) * 0.25);
-      // border-right: $style-stroke-width-s solid var(--theme-elevation-150);
+@layer payload-default {
+  .nested-diff {
+    &__wrap--gutter {
+      [dir='ltr'] & {
+        padding-left: calc(var(--base) * 0.25);
+        // border-left: $style-stroke-width-s solid var(--theme-elevation-150);
+      }
+      [dir='rtl'] & {
+        padding-right: calc(var(--base) * 0.25);
+        // border-right: $style-stroke-width-s solid var(--theme-elevation-150);
+      }
     }
   }
 }
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss
index 1d543b429..57f56a979 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss
@@ -1,13 +1,15 @@
-.relationship-diff {
-  &__locale-label {
-    [dir='ltr'] & {
-      margin-right: calc(var(--base) * 0.25);
+@layer payload-default {
+  .relationship-diff {
+    &__locale-label {
+      [dir='ltr'] & {
+        margin-right: calc(var(--base) * 0.25);
+      }
+      [dir='rtl'] & {
+        margin-left: calc(var(--base) * 0.25);
+      }
+      background: var(--theme-elevation-100);
+      padding: calc(var(--base) * 0.25);
+      // border-radius: $style-radius-m;
     }
-    [dir='rtl'] & {
-      margin-left: calc(var(--base) * 0.25);
-    }
-    background: var(--theme-elevation-100);
-    padding: calc(var(--base) * 0.25);
-    // border-radius: $style-radius-m;
   }
 }
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss
index 926ecf178..9d31d6dfa 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss
@@ -1,13 +1,15 @@
-.select-diff {
-  &__locale-label {
-    [dir='ltr'] & {
-      margin-right: calc(var(--base) * 0.25);
+@layer payload-default {
+  .select-diff {
+    &__locale-label {
+      [dir='ltr'] & {
+        margin-right: calc(var(--base) * 0.25);
+      }
+      [dir='rtl'] & {
+        margin-left: calc(var(--base) * 0.25);
+      }
+      background: var(--theme-elevation-100);
+      padding: calc(var(--base) * 0.25);
+      // border-radius: $style-radius-m;
     }
-    [dir='rtl'] & {
-      margin-left: calc(var(--base) * 0.25);
-    }
-    background: var(--theme-elevation-100);
-    padding: calc(var(--base) * 0.25);
-    // border-radius: $style-radius-m;
   }
 }
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss
index b9e00dc75..d0c265402 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss
@@ -1,13 +1,15 @@
-.text-diff {
-  &__locale-label {
-    [dir='ltr'] & {
-      margin-right: calc(var(--base) * 0.25);
+@layer payload-default {
+  .text-diff {
+    &__locale-label {
+      [dir='ltr'] & {
+        margin-right: calc(var(--base) * 0.25);
+      }
+      [dir='rtl'] & {
+        margin-left: calc(var(--base) * 0.25);
+      }
+      background: var(--theme-elevation-100);
+      padding: calc(var(--base) * 0.25);
+      // border-radius: $style-radius-m;
     }
-    [dir='rtl'] & {
-      margin-left: calc(var(--base) * 0.25);
-    }
-    background: var(--theme-elevation-100);
-    padding: calc(var(--base) * 0.25);
-    // border-radius: $style-radius-m;
   }
 }
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/index.scss
index 372a4651e..ad5dd5f4c 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/index.scss
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/index.scss
@@ -1,18 +1,20 @@
 @import '../../../scss/styles.scss';
 
-.render-field-diffs {
-  display: flex;
-  flex-direction: column;
-  gap: var(--base);
-
-  &__field {
-    overflow-wrap: anywhere;
+@layer payload-default {
+  .render-field-diffs {
     display: flex;
     flex-direction: column;
     gap: var(--base);
-  }
 
-  @include small-break {
-    gap: calc(var(--base) / 2);
+    &__field {
+      overflow-wrap: anywhere;
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+    }
+
+    @include small-break {
+      gap: calc(var(--base) / 2);
+    }
   }
 }
diff --git a/packages/next/src/views/Version/Restore/index.scss b/packages/next/src/views/Version/Restore/index.scss
index 4e260973c..7dc2909a8 100644
--- a/packages/next/src/views/Version/Restore/index.scss
+++ b/packages/next/src/views/Version/Restore/index.scss
@@ -1,77 +1,79 @@
 @import '../../.././scss/styles.scss';
 
-.restore-version {
-  cursor: pointer;
-  display: flex;
-
-  .popup-button {
-    display: flex;
-  }
-
-  &__chevron {
-    background-color: var(--theme-elevation-150);
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+@layer payload-default {
+  .restore-version {
     cursor: pointer;
-
-    .stroke {
-      stroke-width: 1px;
-    }
-
-    &:hover {
-      background: var(--theme-elevation-100);
-    }
-  }
-
-  &__button {
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-    margin-right: 2px;
-
-    &:focus {
-      border-radius: 0;
-      outline-offset: 0;
-    }
-  }
-
-  &__modal {
-    @include blur-bg;
     display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
 
-    &__toggle {
-      @extend %btn-reset;
+    .popup-button {
+      display: flex;
     }
-  }
 
-  &__wrapper {
-    z-index: 1;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: base(0.8);
-    padding: base(2);
-    max-width: base(36);
-  }
+    &__chevron {
+      background-color: var(--theme-elevation-150);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      cursor: pointer;
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: base(0.4);
+      .stroke {
+        stroke-width: 1px;
+      }
 
-    > * {
-      margin: 0;
+      &:hover {
+        background: var(--theme-elevation-100);
+      }
     }
-  }
 
-  &__controls {
-    display: flex;
-    gap: base(0.4);
+    &__button {
+      border-top-right-radius: 0px;
+      border-bottom-right-radius: 0px;
+      margin-right: 2px;
 
-    .btn {
-      margin: 0;
+      &:focus {
+        border-radius: 0;
+        outline-offset: 0;
+      }
+    }
+
+    &__modal {
+      @include blur-bg;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      &__toggle {
+        @extend %btn-reset;
+      }
+    }
+
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.8);
+      padding: base(2);
+      max-width: base(36);
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
+
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: base(0.4);
+
+      .btn {
+        margin: 0;
+      }
     }
   }
 }
diff --git a/packages/next/src/views/Version/SelectComparison/index.scss b/packages/next/src/views/Version/SelectComparison/index.scss
index 8687aabf9..5de71f857 100644
--- a/packages/next/src/views/Version/SelectComparison/index.scss
+++ b/packages/next/src/views/Version/SelectComparison/index.scss
@@ -1,13 +1,15 @@
-.compare-version {
-  &__error-loading {
-    border: 1px solid var(--theme-error-500);
-    min-height: calc(var(--base) * 2);
-    padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75);
-    background-color: var(--theme-error-100);
-    color: var(--theme-elevation-0);
-  }
+@layer payload-default {
+  .compare-version {
+    &__error-loading {
+      border: 1px solid var(--theme-error-500);
+      min-height: calc(var(--base) * 2);
+      padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75);
+      background-color: var(--theme-error-100);
+      color: var(--theme-elevation-0);
+    }
 
-  &__label {
-    margin-bottom: calc(var(--base) * 0.25);
+    &__label {
+      margin-bottom: calc(var(--base) * 0.25);
+    }
   }
 }
diff --git a/packages/next/src/views/Version/SelectLocales/index.scss b/packages/next/src/views/Version/SelectLocales/index.scss
index b61b0db84..a3ec33aab 100644
--- a/packages/next/src/views/Version/SelectLocales/index.scss
+++ b/packages/next/src/views/Version/SelectLocales/index.scss
@@ -1,7 +1,9 @@
-.select-version-locales {
-  flex-grow: 1;
+@layer payload-default {
+  .select-version-locales {
+    flex-grow: 1;
 
-  &__label {
-    margin-bottom: calc(var(--base) * 0.25);
+    &__label {
+      margin-bottom: calc(var(--base) * 0.25);
+    }
   }
 }
diff --git a/packages/next/src/views/Versions/index.scss b/packages/next/src/views/Versions/index.scss
index d7011b242..25a146073 100644
--- a/packages/next/src/views/Versions/index.scss
+++ b/packages/next/src/views/Versions/index.scss
@@ -1,108 +1,110 @@
 @import '../../scss/styles.scss';
 
-.versions {
-  width: 100%;
-  margin-bottom: calc(var(--base) * 2);
-
-  &__wrap {
-    padding-top: 0;
-    padding-bottom: var(--spacing-view-bottom);
-    margin-top: calc(var(--base) * 0.75);
-  }
-
-  &__header {
-    margin-bottom: var(--base);
-  }
-
-  &__no-versions {
-    margin-top: calc(var(--base) * 1.5);
-  }
-
-  &__parent-doc {
-    .banner__content {
-      display: flex;
-    }
-  }
-
-  &__parent-doc-pills {
-    [dir='ltr'] & {
-      margin-left: auto;
-    }
-
-    [dir='rtl'] & {
-      margin-right: auto;
-    }
-  }
-
-  .table {
-    table {
-      width: 100%;
-      overflow: auto;
-    }
-  }
-
-  &__page-controls {
+@layer payload-default {
+  .versions {
     width: 100%;
-    display: flex;
-    align-items: center;
-  }
+    margin-bottom: calc(var(--base) * 2);
 
-  .paginator {
-    margin-bottom: 0;
-  }
-
-  &__page-info {
-    [dir='ltr'] & {
-      margin-right: var(--base);
-      margin-left: auto;
-    }
-
-    [dir='rtl'] & {
-      margin-left: var(--base);
-      margin-right: auto;
-    }
-  }
-
-  @include mid-break {
     &__wrap {
       padding-top: 0;
-      margin-top: 0;
+      padding-bottom: var(--spacing-view-bottom);
+      margin-top: calc(var(--base) * 0.75);
     }
 
-    // on mobile, extend the table all the way to the viewport edges
-    // this is to visually indicate overflowing content
-    .table {
-      display: flex;
-      width: calc(100% + calc(var(--gutter-h) * 2));
-      max-width: unset;
-      left: calc(var(--gutter-h) * -1);
-      position: relative;
-      padding-left: var(--gutter-h);
+    &__header {
+      margin-bottom: var(--base);
+    }
 
-      &::after {
-        content: '';
-        height: 1px;
-        padding-right: var(--gutter-h);
+    &__no-versions {
+      margin-top: calc(var(--base) * 1.5);
+    }
+
+    &__parent-doc {
+      .banner__content {
+        display: flex;
+      }
+    }
+
+    &__parent-doc-pills {
+      [dir='ltr'] & {
+        margin-left: auto;
+      }
+
+      [dir='rtl'] & {
+        margin-right: auto;
+      }
+    }
+
+    .table {
+      table {
+        width: 100%;
+        overflow: auto;
       }
     }
 
     &__page-controls {
-      flex-wrap: wrap;
+      width: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    .paginator {
+      margin-bottom: 0;
     }
 
     &__page-info {
       [dir='ltr'] & {
-        margin-left: 0;
+        margin-right: var(--base);
+        margin-left: auto;
       }
 
       [dir='rtl'] & {
-        margin-right: 0;
+        margin-left: var(--base);
+        margin-right: auto;
       }
     }
 
-    .paginator {
-      width: 100%;
-      margin-bottom: var(--base);
+    @include mid-break {
+      &__wrap {
+        padding-top: 0;
+        margin-top: 0;
+      }
+
+      // on mobile, extend the table all the way to the viewport edges
+      // this is to visually indicate overflowing content
+      .table {
+        display: flex;
+        width: calc(100% + calc(var(--gutter-h) * 2));
+        max-width: unset;
+        left: calc(var(--gutter-h) * -1);
+        position: relative;
+        padding-left: var(--gutter-h);
+
+        &::after {
+          content: '';
+          height: 1px;
+          padding-right: var(--gutter-h);
+        }
+      }
+
+      &__page-controls {
+        flex-wrap: wrap;
+      }
+
+      &__page-info {
+        [dir='ltr'] & {
+          margin-left: 0;
+        }
+
+        [dir='rtl'] & {
+          margin-right: 0;
+        }
+      }
+
+      .paginator {
+        width: 100%;
+        margin-bottom: var(--base);
+      }
     }
   }
 }
diff --git a/packages/plugin-seo/src/fields/index.scss b/packages/plugin-seo/src/fields/index.scss
index bd00870c4..0d1a626d6 100644
--- a/packages/plugin-seo/src/fields/index.scss
+++ b/packages/plugin-seo/src/fields/index.scss
@@ -1,5 +1,7 @@
-.plugin-seo__field {
-  .field-label {
-    display: inline !important;
+@layer payload-default {
+  .plugin-seo__field {
+    .field-label {
+      display: inline !important;
+    }
   }
 }
diff --git a/packages/richtext-lexical/src/features/blocks/client/component/index.scss b/packages/richtext-lexical/src/features/blocks/client/component/index.scss
index 22cd40414..82f79c66e 100644
--- a/packages/richtext-lexical/src/features/blocks/client/component/index.scss
+++ b/packages/richtext-lexical/src/features/blocks/client/component/index.scss
@@ -1,162 +1,164 @@
 @import '../../../../scss/styles';
 
-.ContentEditable__root > div:has(.lexical-block) {
-  // Fixes a bug where, if the block field has a Select field, the Select field's dropdown menu would be hidden behind the lexical editor.
-  z-index: 1;
-}
-
-.lexical-block {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--base) / 2);
-  @extend %body;
-
-  &__row {
-    .collapsible__toggle-wrap {
-      padding-inline-start: base(0.4);
-    }
+@layer payload-default {
+  .ContentEditable__root > div:has(.lexical-block) {
+    // Fixes a bug where, if the block field has a Select field, the Select field's dropdown menu would be hidden behind the lexical editor.
+    z-index: 1;
   }
 
-  margin-block: base(0.4);
-
-  &__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: calc(var(--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: calc(var(--base) * 0.5);
-
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
-    }
-  }
-
-  .collapsible {
-    &__header-wrap {
-      //  Make more space for the block header (default right: is `calc(var(--base) * 3)`) so that the remove button aligns nicely to the right
-      right: calc(var(--base) * 1.5);
-    }
-  }
-
-  &__removeButton.btn {
-    margin: 0;
-    &:hover {
-      background-color: var(--theme-elevation-200);
-    }
-  }
-
-  &__block-header {
-    pointer-events: none;
-  }
-
-  &__block-header * {
-    pointer-events: all;
-  }
-
-  &__block-header,
-  &__block-header > div {
-    display: flex;
-    max-width: 100%;
-    width: 100%;
-    overflow: hidden;
-    gap: calc(var(--base) * 0.375);
-    justify-content: flex-start;
-    pointer-events: none;
-
-    & > * {
-      pointer-events: all;
-    }
-  }
-
-  &__block-number {
-    flex-shrink: 0;
-  }
-
-  &__block-pill {
-    flex-shrink: 0;
-    display: block;
-    line-height: unset;
-  }
-
-  &__rows {
+  .lexical-block {
     display: flex;
     flex-direction: column;
     gap: calc(var(--base) / 2);
+    @extend %body;
+
+    &__row {
+      .collapsible__toggle-wrap {
+        padding-inline-start: base(0.4);
+      }
+    }
+
+    margin-block: base(0.4);
+
+    &__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: calc(var(--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: calc(var(--base) * 0.5);
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+
+    .collapsible {
+      &__header-wrap {
+        //  Make more space for the block header (default right: is `calc(var(--base) * 3)`) so that the remove button aligns nicely to the right
+        right: calc(var(--base) * 1.5);
+      }
+    }
+
+    &__removeButton.btn {
+      margin: 0;
+      &:hover {
+        background-color: var(--theme-elevation-200);
+      }
+    }
+
+    &__block-header {
+      pointer-events: none;
+    }
+
+    &__block-header * {
+      pointer-events: all;
+    }
+
+    &__block-header,
+    &__block-header > div {
+      display: flex;
+      max-width: 100%;
+      width: 100%;
+      overflow: hidden;
+      gap: calc(var(--base) * 0.375);
+      justify-content: flex-start;
+      pointer-events: none;
+
+      & > * {
+        pointer-events: all;
+      }
+    }
+
+    &__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);
+        }
+      }
+    }
   }
 
-  &__drawer-toggler {
-    background-color: transparent;
-    margin: 0;
-    padding: 0;
-    border: none;
-    align-self: flex-start;
+  html[data-theme='light'] {
+    .blocks-field--has-error {
+      .section-title__input,
+      .blocks-field__heading-with-error {
+        color: var(--theme-error-750);
+      }
+    }
+  }
 
-    .btn {
-      color: var(--theme-elevation-400);
-      margin: 0;
-
-      &:hover {
-        color: var(--theme-elevation-800);
+  html[data-theme='dark'] {
+    .blocks-field--has-error {
+      .section-title__input,
+      .blocks-field__heading-with-error {
+        color: var(--theme-error-500);
       }
     }
   }
 }
-
-html[data-theme='light'] {
-  .blocks-field--has-error {
-    .section-title__input,
-    .blocks-field__heading-with-error {
-      color: var(--theme-error-750);
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .blocks-field--has-error {
-    .section-title__input,
-    .blocks-field__heading-with-error {
-      color: var(--theme-error-500);
-    }
-  }
-}
diff --git a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss
index d9e88e93b..8687d849f 100644
--- a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss
+++ b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.scss
@@ -1,88 +1,90 @@
 @import '../../../../scss/styles';
 
-.inline-block-container {
-  display: inline-block;
-}
-
-.inline-block {
-  @extend %body;
-  @include shadow-sm;
-  padding: base(0.1);
-  padding-inline-start: base(0.4);
-  display: flex;
-  align-items: center;
-  background: var(--theme-input-bg);
-  outline: 1px solid var(--theme-elevation-100);
-  border-radius: $style-radius-s;
-  max-width: calc(var(--base) * 15);
-  font-family: var(--font-body);
-  margin-right: base(0.2);
-  margin-left: base(0.2);
-
-  &::selection {
-    background: transparent;
+@layer payload-default {
+  .inline-block-container {
+    display: inline-block;
   }
 
-  &:hover {
-    outline: 1px solid var(--theme-elevation-150);
-  }
-
-  &__wrap {
-    flex-grow: 1;
-    overflow: hidden;
-  }
-
-  &--selected {
-    background: var(--theme-success-100);
-    outline: 1px solid var(--theme-success-400);
-  }
-
-  &__editButton.btn {
-    margin: 0;
-  }
-
-  &__editButton {
-    &:disabled {
-      color: var(--theme-elevation-300);
-      pointer-events: none;
-    }
-  }
-
-  &__actions {
+  .inline-block {
+    @extend %body;
+    @include shadow-sm;
+    padding: base(0.1);
+    padding-inline-start: base(0.4);
     display: flex;
     align-items: center;
-    flex-shrink: 0;
-    margin-left: base(0.4);
+    background: var(--theme-input-bg);
+    outline: 1px solid var(--theme-elevation-100);
+    border-radius: $style-radius-s;
+    max-width: calc(var(--base) * 15);
+    font-family: var(--font-body);
+    margin-right: base(0.2);
+    margin-left: base(0.2);
 
-    & > .btn {
-      width: base(1);
-      height: base(1);
+    &::selection {
+      background: transparent;
+    }
 
-      &:not(:disabled):hover {
-        background: var(--theme-elevation-100);
-      }
+    &:hover {
+      outline: 1px solid var(--theme-elevation-150);
+    }
 
-      & > * {
-        height: 100%;
+    &__wrap {
+      flex-grow: 1;
+      overflow: hidden;
+    }
+
+    &--selected {
+      background: var(--theme-success-100);
+      outline: 1px solid var(--theme-success-400);
+    }
+
+    &__editButton.btn {
+      margin: 0;
+    }
+
+    &__editButton {
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
       }
     }
 
-    svg {
-      width: 16px;
-      height: 16px;
-    }
-  }
+    &__actions {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      margin-left: base(0.4);
 
-  &__removeButton.btn {
-    margin: 0;
+      & > .btn {
+        width: base(1);
+        height: base(1);
 
-    line {
-      stroke-width: base(0.2);
+        &:not(:disabled):hover {
+          background: var(--theme-elevation-100);
+        }
+
+        & > * {
+          height: 100%;
+        }
+      }
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
     }
 
-    &:disabled {
-      color: var(--theme-elevation-300);
-      pointer-events: none;
+    &__removeButton.btn {
+      margin: 0;
+
+      line {
+        stroke-width: base(0.2);
+      }
+
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
+      }
     }
   }
 }
diff --git a/packages/richtext-lexical/src/features/debug/testRecorder/client/plugin/index.scss b/packages/richtext-lexical/src/features/debug/testRecorder/client/plugin/index.scss
index 65c931d11..8072b163c 100644
--- a/packages/richtext-lexical/src/features/debug/testRecorder/client/plugin/index.scss
+++ b/packages/richtext-lexical/src/features/debug/testRecorder/client/plugin/index.scss
@@ -1,51 +1,53 @@
 @import '../../../../../scss/styles';
 
-.test-recorder-output {
-  margin: 20px auto 20px auto;
-  width: 100%;
-}
-.test-recorder-toolbar {
-  display: flex;
-}
+@layer payload-default {
+  .test-recorder-output {
+    margin: 20px auto 20px auto;
+    width: 100%;
+  }
+  .test-recorder-toolbar {
+    display: flex;
+  }
 
-.test-recorder-button {
-  position: relative;
-  display: block;
-  font-size: 10px;
-  padding: 6px 6px;
-  border-radius: $style-radius-m;
-  border: none;
-  cursor: pointer;
-  outline: none;
-  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
-  background-color: #222;
-  color: white;
-  transition: box-shadow 50ms ease-out;
-}
+  .test-recorder-button {
+    position: relative;
+    display: block;
+    font-size: 10px;
+    padding: 6px 6px;
+    border-radius: $style-radius-m;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
+    background-color: #222;
+    color: white;
+    transition: box-shadow 50ms ease-out;
+  }
 
-.test-recorder-button:active {
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
-}
+  .test-recorder-button:active {
+    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
+  }
 
-.test-recorder-button + .test-recorder-button {
-  margin-left: 4px;
-}
+  .test-recorder-button + .test-recorder-button {
+    margin-left: 4px;
+  }
 
-.test-recorder-button::after {
-  content: '';
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  bottom: 8px;
-  left: 8px;
-  display: block;
-  background-size: contain;
-  filter: invert(1);
-}
-#test-recorder-button {
-  position: relative;
-}
+  .test-recorder-button::after {
+    content: '';
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    bottom: 8px;
+    left: 8px;
+    display: block;
+    background-size: contain;
+    filter: invert(1);
+  }
+  #test-recorder-button {
+    position: relative;
+  }
 
-#test-recorder-button-snapshot {
-  margin-right: auto;
+  #test-recorder-button-snapshot {
+    margin-right: auto;
+  }
 }
diff --git a/packages/richtext-lexical/src/features/debug/treeView/client/plugin/index.scss b/packages/richtext-lexical/src/features/debug/treeView/client/plugin/index.scss
index 540089b50..b06b4308e 100644
--- a/packages/richtext-lexical/src/features/debug/treeView/client/plugin/index.scss
+++ b/packages/richtext-lexical/src/features/debug/treeView/client/plugin/index.scss
@@ -1,78 +1,80 @@
-.tree-view-output {
-  display: block;
-  background: #222;
-  color: #fff;
-  padding: 0;
-  font-size: 12px;
-  margin: 1px auto 10px auto;
-  position: relative;
-  overflow: hidden;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-
-  pre {
-    line-height: 1.1;
+@layer payload-default {
+  .tree-view-output {
+    display: block;
     background: #222;
     color: #fff;
-    margin: 0;
-    padding: 10px;
-    font-size: 12px;
-    overflow: auto;
-    max-height: 400px;
-  }
-
-  .debug-treetype-button {
-    border: 0;
     padding: 0;
     font-size: 12px;
-    top: 10px;
-    right: 85px;
-    position: absolute;
-    background: none;
-    color: #fff;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .debug-timetravel-button {
-    border: 0;
-    padding: 0;
-    font-size: 12px;
-    top: 10px;
-    right: 15px;
-    position: absolute;
-    background: none;
-    color: #fff;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .debug-timetravel-panel {
+    margin: 1px auto 10px auto;
+    position: relative;
     overflow: hidden;
-    padding: 0 0 10px;
-    margin: auto;
-    display: flex;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
 
-    &-button {
-      padding: 0;
-      border: 0;
-      background: none;
-      flex: 1;
+    pre {
+      line-height: 1.1;
+      background: #222;
       color: #fff;
+      margin: 0;
+      padding: 10px;
       font-size: 12px;
+      overflow: auto;
+      max-height: 400px;
+    }
+
+    .debug-treetype-button {
+      border: 0;
+      padding: 0;
+      font-size: 12px;
+      top: 10px;
+      right: 85px;
+      position: absolute;
+      background: none;
+      color: #fff;
 
       &:hover {
         text-decoration: underline;
       }
     }
 
-    &-slider {
+    .debug-timetravel-button {
+      border: 0;
       padding: 0;
-      flex: 8;
+      font-size: 12px;
+      top: 10px;
+      right: 15px;
+      position: absolute;
+      background: none;
+      color: #fff;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    .debug-timetravel-panel {
+      overflow: hidden;
+      padding: 0 0 10px;
+      margin: auto;
+      display: flex;
+
+      &-button {
+        padding: 0;
+        border: 0;
+        background: none;
+        flex: 1;
+        color: #fff;
+        font-size: 12px;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      &-slider {
+        padding: 0;
+        flex: 8;
+      }
     }
   }
 }
diff --git a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss
index 779d0cf4a..a82b2dfca 100644
--- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss
+++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss
@@ -1,73 +1,75 @@
 @import '../../../../../scss/styles';
 
-.table-cell-action-button-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  will-change: transform;
-}
-
-.table-cell-action-button {
-  background-color: var(--theme-elevation-200);
-  border: 0;
-  padding: 2px;
-  position: relative;
-  border-radius: $style-radius-m;
-  color: var(--theme-elevation-800);
-  display: inline-block;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--theme-elevation-300);
+@layer payload-default {
+  .table-cell-action-button-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    will-change: transform;
   }
-}
 
-html[data-theme='light'] {
-  .table-action-menu-dropdown {
-    box-shadow:
-      0px 1px 2px 1px rgba(0, 0, 0, 0.05),
-      0px 4px 8px 0px rgba(0, 0, 0, 0.1);
-  }
-}
-
-.table-action-menu-dropdown {
-  z-index: 100;
-  display: block;
-  position: fixed;
-  background: var(--theme-input-bg);
-  min-width: 160px;
-  border-radius: $style-radius-m;
-  min-height: 40px;
-  overflow-y: auto;
-  box-shadow:
-    0px 1px 2px 1px rgba(0, 0, 0, 0.1),
-    0px 4px 16px 0px rgba(0, 0, 0, 0.2),
-    0px -4px 8px 0px rgba(0, 0, 0, 0.1);
-
-  hr {
-    border: none;
-    height: 1px;
+  .table-cell-action-button {
     background-color: var(--theme-elevation-200);
-  }
-
-  .item {
-    padding: 8px;
-    color: var(--theme-elevation-900);
-    background: var(--theme-input-bg);
-    cursor: pointer;
-    font-size: 13px;
-    font-family: var(--font-body);
-    display: flex;
-    align-content: center;
-    flex-direction: row;
-    flex-shrink: 0;
-    justify-content: space-between;
     border: 0;
-    height: 30px;
-    width: 100%;
+    padding: 2px;
+    position: relative;
+    border-radius: $style-radius-m;
+    color: var(--theme-elevation-800);
+    display: inline-block;
+    cursor: pointer;
 
     &:hover {
-      background: var(--theme-elevation-100);
+      background-color: var(--theme-elevation-300);
+    }
+  }
+
+  html[data-theme='light'] {
+    .table-action-menu-dropdown {
+      box-shadow:
+        0px 1px 2px 1px rgba(0, 0, 0, 0.05),
+        0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .table-action-menu-dropdown {
+    z-index: 100;
+    display: block;
+    position: fixed;
+    background: var(--theme-input-bg);
+    min-width: 160px;
+    border-radius: $style-radius-m;
+    min-height: 40px;
+    overflow-y: auto;
+    box-shadow:
+      0px 1px 2px 1px rgba(0, 0, 0, 0.1),
+      0px 4px 16px 0px rgba(0, 0, 0, 0.2),
+      0px -4px 8px 0px rgba(0, 0, 0, 0.1);
+
+    hr {
+      border: none;
+      height: 1px;
+      background-color: var(--theme-elevation-200);
+    }
+
+    .item {
+      padding: 8px;
+      color: var(--theme-elevation-900);
+      background: var(--theme-input-bg);
+      cursor: pointer;
+      font-size: 13px;
+      font-family: var(--font-body);
+      display: flex;
+      align-content: center;
+      flex-direction: row;
+      flex-shrink: 0;
+      justify-content: space-between;
+      border: 0;
+      height: 30px;
+      width: 100%;
+
+      &:hover {
+        background: var(--theme-elevation-100);
+      }
     }
   }
 }
diff --git a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss
index 18c931f86..b6b73a28c 100644
--- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss
+++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.scss
@@ -1,182 +1,184 @@
 @import '../../../../../scss/styles';
 
-.LexicalEditorTheme {
-  &__table {
-    border-collapse: collapse;
-    max-width: 100%;
-    border-spacing: 0;
-    overflow-y: scroll;
-    overflow-x: scroll;
-    table-layout: fixed;
-    width: fit-content;
-    margin: 0 25px 30px 0;
-
-    ::selection {
-      background: rgba(172, 206, 247);
-    }
-
-    br::selection {
-      background: unset;
-    }
-  }
-
-  &__tableRowStriping tr:nth-child(even) {
-    background-color: var(--theme-elevation-100);
-  }
-
-  &__tableSelected {
-    outline: 2px solid rgb(60, 132, 244);
-  }
-
-  &__tableCell {
-    border: 1px solid var(--theme-elevation-200);
-    vertical-align: top;
-    text-align: start;
-    padding: 6px 8px;
-    position: relative;
-    cursor: default;
-    outline: none;
-  }
-
-  &__tableCellSortedIndicator {
-    display: block;
-    opacity: 0.5;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 4px;
-    background-color: #999;
-  }
-
-  &__tableCellResizer {
-    position: absolute;
-    right: -4px;
-    height: 100%;
-    width: 8px;
-    cursor: ew-resize;
-    z-index: 10;
-    top: 0;
-  }
-
-  &__tableCellHeader {
-    background-color: #f2f3f5;
-    text-align: start;
-  }
-
-  &__tableCellSelected {
-    background-color: #c9dbf0;
-  }
-
-  &__tableCellPrimarySelected {
-    border: 2px solid rgb(60, 132, 244);
-    display: block;
-    height: calc(100% - 2px);
-    position: absolute;
-    width: calc(100% - 2px);
-    left: -1px;
-    top: -1px;
-    z-index: 2;
-  }
-
-  &__tableCellEditing {
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-    border-radius: $style-radius-m;
-  }
-
-  &__tableAddColumns {
-    height: 100%;
-  }
-
-  &__tableAddColumns,
-  &__tableAddRows {
-    position: absolute;
-    background-color: var(--theme-elevation-100);
-    animation: table-controls 0.2s ease;
-    border: 0;
-    cursor: pointer;
-    min-width: 24px;
-    min-height: 24px;
-  }
-
-  &__tableAddColumns:after,
-  &__tableAddRows:after {
-    background-image: url(../../../../../lexical/ui/icons/Add/index.svg);
-    background-position: center;
-    background-repeat: no-repeat;
-    display: block;
-    content: ' ';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0.4;
-  }
-
-  &__tableAddColumns:hover,
-  &__tableAddRows:hover {
-    background-color: var(--theme-elevation-200);
-  }
-
-  &__tableAddRows {
-    width: calc(100% - 25px);
-  }
-
-  @keyframes table-controls {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  &__tableCellResizeRuler {
-    display: block;
-    position: absolute;
-    width: 1px;
-    background-color: rgb(60, 132, 244);
-    height: 100%;
-    top: 0;
-  }
-
-  &__tableCellActionButtonContainer {
-    display: block;
-    right: 5px;
-    top: 6px;
-    position: absolute;
-    z-index: 4;
-    width: 20px;
-    height: 20px;
-  }
-
-  &__tableCellActionButton {
-    background-color: #eee;
-    display: block;
-    border: 0;
-    border-radius: 20px;
-    width: 20px;
-    height: 20px;
-    color: #222;
-    cursor: pointer;
-  }
-
-  &__tableCellActionButton:hover {
-    background-color: #ddd;
-  }
-}
-
-html[data-theme='dark'] {
+@layer payload-default {
   .LexicalEditorTheme {
+    &__table {
+      border-collapse: collapse;
+      max-width: 100%;
+      border-spacing: 0;
+      overflow-y: scroll;
+      overflow-x: scroll;
+      table-layout: fixed;
+      width: fit-content;
+      margin: 0 25px 30px 0;
+
+      ::selection {
+        background: rgba(172, 206, 247);
+      }
+
+      br::selection {
+        background: unset;
+      }
+    }
+
+    &__tableRowStriping tr:nth-child(even) {
+      background-color: var(--theme-elevation-100);
+    }
+
+    &__tableSelected {
+      outline: 2px solid rgb(60, 132, 244);
+    }
+
+    &__tableCell {
+      border: 1px solid var(--theme-elevation-200);
+      vertical-align: top;
+      text-align: start;
+      padding: 6px 8px;
+      position: relative;
+      cursor: default;
+      outline: none;
+    }
+
+    &__tableCellSortedIndicator {
+      display: block;
+      opacity: 0.5;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 4px;
+      background-color: #999;
+    }
+
+    &__tableCellResizer {
+      position: absolute;
+      right: -4px;
+      height: 100%;
+      width: 8px;
+      cursor: ew-resize;
+      z-index: 10;
+      top: 0;
+    }
+
     &__tableCellHeader {
-      background-color: var(--theme-elevation-50);
+      background-color: #f2f3f5;
+      text-align: start;
+    }
+
+    &__tableCellSelected {
+      background-color: #c9dbf0;
+    }
+
+    &__tableCellPrimarySelected {
+      border: 2px solid rgb(60, 132, 244);
+      display: block;
+      height: calc(100% - 2px);
+      position: absolute;
+      width: calc(100% - 2px);
+      left: -1px;
+      top: -1px;
+      z-index: 2;
+    }
+
+    &__tableCellEditing {
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+      border-radius: $style-radius-m;
+    }
+
+    &__tableAddColumns {
+      height: 100%;
+    }
+
+    &__tableAddColumns,
+    &__tableAddRows {
+      position: absolute;
+      background-color: var(--theme-elevation-100);
+      animation: table-controls 0.2s ease;
+      border: 0;
+      cursor: pointer;
+      min-width: 24px;
+      min-height: 24px;
     }
 
     &__tableAddColumns:after,
     &__tableAddRows:after {
-      background-image: url(../../../../../lexical/ui/icons/Add/light.svg);
+      background-image: url(../../../../../lexical/ui/icons/Add/index.svg);
+      background-position: center;
+      background-repeat: no-repeat;
+      display: block;
+      content: ' ';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0.4;
+    }
+
+    &__tableAddColumns:hover,
+    &__tableAddRows:hover {
+      background-color: var(--theme-elevation-200);
+    }
+
+    &__tableAddRows {
+      width: calc(100% - 25px);
+    }
+
+    @keyframes table-controls {
+      0% {
+        opacity: 0;
+      }
+
+      100% {
+        opacity: 1;
+      }
+    }
+
+    &__tableCellResizeRuler {
+      display: block;
+      position: absolute;
+      width: 1px;
+      background-color: rgb(60, 132, 244);
+      height: 100%;
+      top: 0;
+    }
+
+    &__tableCellActionButtonContainer {
+      display: block;
+      right: 5px;
+      top: 6px;
+      position: absolute;
+      z-index: 4;
+      width: 20px;
+      height: 20px;
+    }
+
+    &__tableCellActionButton {
+      background-color: #eee;
+      display: block;
+      border: 0;
+      border-radius: 20px;
+      width: 20px;
+      height: 20px;
+      color: #222;
+      cursor: pointer;
+    }
+
+    &__tableCellActionButton:hover {
+      background-color: #ddd;
+    }
+  }
+
+  html[data-theme='dark'] {
+    .LexicalEditorTheme {
+      &__tableCellHeader {
+        background-color: var(--theme-elevation-50);
+      }
+
+      &__tableAddColumns:after,
+      &__tableAddRows:after {
+        background-image: url(../../../../../lexical/ui/icons/Add/light.svg);
+      }
     }
   }
 }
diff --git a/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.scss b/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.scss
index 56eb26c89..72d343d49 100644
--- a/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.scss
+++ b/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.scss
@@ -1,20 +1,22 @@
 @import '../../../../scss/styles';
 
-.LexicalEditorTheme__hr {
-  padding: 2px 2px;
-  border: none;
-  margin: 1rem 0;
-  cursor: pointer;
-}
+@layer payload-default {
+  .LexicalEditorTheme__hr {
+    padding: 2px 2px;
+    border: none;
+    margin: 1rem 0;
+    cursor: pointer;
+  }
 
-.LexicalEditorTheme__hr:after {
-  content: '';
-  display: block;
-  height: 2px;
-  background-color: var(--theme-elevation-250);
-}
+  .LexicalEditorTheme__hr:after {
+    content: '';
+    display: block;
+    height: 2px;
+    background-color: var(--theme-elevation-250);
+  }
 
-.LexicalEditorTheme__hr.selected {
-  outline: 2px solid var(--theme-success-250);
-  user-select: none;
+  .LexicalEditorTheme__hr.selected {
+    outline: 2px solid var(--theme-success-250);
+    user-select: none;
+  }
 }
diff --git a/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.scss b/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.scss
index 7707829a1..e3fa861df 100644
--- a/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.scss
+++ b/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.scss
@@ -1,86 +1,88 @@
 @import '../../../../../scss/styles.scss';
 
-.link-editor {
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  background: var(--theme-input-bg);
-  padding: 4px 4px 4px 12px;
-  vertical-align: middle;
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  border-radius: $style-radius-m;
-  transition: opacity 0.2s;
-  will-change: transform;
-  box-shadow:
-    0px 1px 2px 1px rgba(0, 0, 0, 0.1),
-    0px 4px 16px 0px rgba(0, 0, 0, 0.1),
-    0px -4px 16px 0px rgba(0, 0, 0, 0.1);
-
-  .link-input {
+@layer payload-default {
+  .link-editor {
+    z-index: 1;
     display: flex;
     align-items: center;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    min-height: 28px;
-    box-sizing: border-box;
-    @extend %body;
-    border: 0;
-    outline: 0;
-    position: relative;
-    font-family: var(--font-body);
+    background: var(--theme-input-bg);
+    padding: 4px 4px 4px 12px;
+    vertical-align: middle;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    border-radius: $style-radius-m;
+    transition: opacity 0.2s;
+    will-change: transform;
+    box-shadow:
+      0px 1px 2px 1px rgba(0, 0, 0, 0.1),
+      0px 4px 16px 0px rgba(0, 0, 0, 0.1),
+      0px -4px 16px 0px rgba(0, 0, 0, 0.1);
 
-    &__label-pure {
-      color: var(--theme-elevation-1000);
-      margin-right: 15px;
-      display: block;
-      white-space: nowrap;
-      overflow: hidden;
+    .link-input {
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      min-height: 28px;
+      box-sizing: border-box;
+      @extend %body;
+      border: 0;
+      outline: 0;
+      position: relative;
+      font-family: var(--font-body);
+
+      &__label-pure {
+        color: var(--theme-elevation-1000);
+        margin-right: 15px;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      a {
+        text-decoration: underline;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        margin-right: base(0.4);
+        text-overflow: ellipsis;
+        color: var(--theme-success-750);
+
+        &:hover {
+          color: var(--theme-success-850);
+        }
+      }
     }
 
-    a {
-      text-decoration: underline;
-      display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      margin-right: base(0.4);
-      text-overflow: ellipsis;
-      color: var(--theme-success-750);
+    button {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-size: 16px;
+      background-position: center;
+      background-repeat: no-repeat;
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+      color: var(--theme-elevation-600);
+      border-radius: $style-radius-m;
 
-      &:hover {
-        color: var(--theme-success-850);
+      &:hover:not([disabled]) {
+        color: var(--theme-elevation-800);
+        background-color: var(--theme-elevation-100);
       }
     }
   }
 
-  button {
-    all: unset;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-size: 16px;
-    background-position: center;
-    background-repeat: no-repeat;
-    width: 30px;
-    height: 30px;
-    cursor: pointer;
-    color: var(--theme-elevation-600);
-    border-radius: $style-radius-m;
-
-    &:hover:not([disabled]) {
-      color: var(--theme-elevation-800);
-      background-color: var(--theme-elevation-100);
+  html[data-theme='light'] {
+    .link-editor {
+      box-shadow:
+        0px 1px 2px 1px rgba(0, 0, 0, 0.05),
+        0px 4px 8px 0px rgba(0, 0, 0, 0.05),
+        0px -4px 16px 0px rgba(0, 0, 0, 0.05);
     }
   }
 }
-
-html[data-theme='light'] {
-  .link-editor {
-    box-shadow:
-      0px 1px 2px 1px rgba(0, 0, 0, 0.05),
-      0px 4px 8px 0px rgba(0, 0, 0, 0.05),
-      0px -4px 16px 0px rgba(0, 0, 0, 0.05);
-  }
-}
diff --git a/packages/richtext-lexical/src/features/relationship/client/components/index.scss b/packages/richtext-lexical/src/features/relationship/client/components/index.scss
index f58ad6d19..a2c6e09d0 100644
--- a/packages/richtext-lexical/src/features/relationship/client/components/index.scss
+++ b/packages/richtext-lexical/src/features/relationship/client/components/index.scss
@@ -1,94 +1,96 @@
 @import '../../../../scss/styles.scss';
 
-.lexical-relationship {
-  @extend %body;
-  @include shadow-sm;
-  padding: calc(var(--base) * 0.75);
-  display: flex;
-  align-items: center;
-  background: var(--theme-input-bg);
-  border: 1px solid var(--theme-elevation-100);
-  border-radius: $style-radius-m;
-  max-width: calc(var(--base) * 15);
-  font-family: var(--font-body);
-  margin-block: base(0.5);
-
-  &:hover {
-    border: 1px solid var(--theme-elevation-150);
-  }
-
-  &__label {
-    margin-bottom: calc(var(--base) * 0.25);
-  }
-
-  &__title {
-    margin: 0;
-  }
-
-  &__label,
-  &__title {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    line-height: 1 !important;
-  }
-
-  &__title {
-    font-weight: bold;
-  }
-
-  &__wrap {
-    flex-grow: 1;
-    overflow: hidden;
-  }
-
-  &--selected {
-    box-shadow: $focus-box-shadow;
-    outline: none;
-  }
-
-  &__doc-drawer-toggler {
-    text-decoration: underline;
-    pointer-events: all;
-    line-height: inherit;
-    & > * {
-      margin: 0;
-    }
-  }
-
-  &__swapButton.btn {
-    margin: 0;
-  }
-
-  &__doc-drawer-toggler,
-  &__swapButton {
-    &:disabled {
-      color: var(--theme-elevation-300);
-      pointer-events: none;
-    }
-  }
-
-  &__actions {
+@layer payload-default {
+  .lexical-relationship {
+    @extend %body;
+    @include shadow-sm;
+    padding: calc(var(--base) * 0.75);
     display: flex;
     align-items: center;
-    flex-shrink: 0;
-    margin-left: calc(var(--base) * 0.5);
+    background: var(--theme-input-bg);
+    border: 1px solid var(--theme-elevation-100);
+    border-radius: $style-radius-m;
+    max-width: calc(var(--base) * 15);
+    font-family: var(--font-body);
+    margin-block: base(0.5);
 
-    & > *:not(:last-child) {
-      margin-right: calc(var(--base) * 0.25);
-    }
-  }
-
-  &__removeButton.btn {
-    margin: 0;
-
-    line {
-      stroke-width: $style-stroke-width-m;
+    &:hover {
+      border: 1px solid var(--theme-elevation-150);
     }
 
-    &:disabled {
-      color: var(--theme-elevation-300);
-      pointer-events: none;
+    &__label {
+      margin-bottom: calc(var(--base) * 0.25);
+    }
+
+    &__title {
+      margin: 0;
+    }
+
+    &__label,
+    &__title {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      line-height: 1 !important;
+    }
+
+    &__title {
+      font-weight: bold;
+    }
+
+    &__wrap {
+      flex-grow: 1;
+      overflow: hidden;
+    }
+
+    &--selected {
+      box-shadow: $focus-box-shadow;
+      outline: none;
+    }
+
+    &__doc-drawer-toggler {
+      text-decoration: underline;
+      pointer-events: all;
+      line-height: inherit;
+      & > * {
+        margin: 0;
+      }
+    }
+
+    &__swapButton.btn {
+      margin: 0;
+    }
+
+    &__doc-drawer-toggler,
+    &__swapButton {
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
+      }
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      margin-left: calc(var(--base) * 0.5);
+
+      & > *:not(:last-child) {
+        margin-right: calc(var(--base) * 0.25);
+      }
+    }
+
+    &__removeButton.btn {
+      margin: 0;
+
+      line {
+        stroke-width: $style-stroke-width-m;
+      }
+
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
+      }
     }
   }
 }
diff --git a/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.scss b/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.scss
index 1b1e133d2..ca911cd01 100644
--- a/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.scss
+++ b/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.scss
@@ -1,108 +1,110 @@
 @import '../../../../../scss/styles';
 
-html[data-theme='dark'] {
-  .fixed-toolbar {
-    &__dropdown-items {
-      background: var(--theme-elevation-0);
-      transition: background 0.2s cubic-bezier(0, 0.2, 0.2, 1);
+@layer payload-default {
+  html[data-theme='dark'] {
+    .fixed-toolbar {
+      &__dropdown-items {
+        background: var(--theme-elevation-0);
+        transition: background 0.2s cubic-bezier(0, 0.2, 0.2, 1);
 
-      .toolbar-popup__dropdown-item {
-        color: var(--theme-elevation-900);
+        .toolbar-popup__dropdown-item {
+          color: var(--theme-elevation-900);
 
-        &:hover:not([disabled]),
-        &.active {
-          background: var(--theme-elevation-100);
-        }
+          &:hover:not([disabled]),
+          &.active {
+            background: var(--theme-elevation-100);
+          }
 
-        .icon {
-          color: var(--theme-elevation-600);
+          .icon {
+            color: var(--theme-elevation-600);
+          }
         }
       }
-    }
 
-    .toolbar-popup {
-      &__dropdown {
-        transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
+      .toolbar-popup {
+        &__dropdown {
+          transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
 
-        &:hover:not([disabled]) {
-          background: var(--theme-elevation-100);
-        }
+          &:hover:not([disabled]) {
+            background: var(--theme-elevation-100);
+          }
 
-        &-caret:after {
-          filter: invert(1);
-        }
+          &-caret:after {
+            filter: invert(1);
+          }
 
-        &-label {
-          color: var(--theme-elevation-750);
+          &-label {
+            color: var(--theme-elevation-750);
+          }
         }
       }
     }
   }
-}
 
-.fixed-toolbar.fixed-toolbar--hide {
-  visibility: hidden; // Still needs to take up space so content does not jump, thus we cannot use display: none
-  // make sure you cant interact with it
-  pointer-events: none;
-  user-select: none;
-}
+  .fixed-toolbar.fixed-toolbar--hide {
+    visibility: hidden; // Still needs to take up space so content does not jump, thus we cannot use display: none
+    // make sure you cant interact with it
+    pointer-events: none;
+    user-select: none;
+  }
 
-.fixed-toolbar {
-  @include blur-bg(var(--theme-elevation-0));
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: calc(var(--base) / 4);
-  vertical-align: middle;
-  position: sticky;
-  z-index: 2;
-  top: var(--doc-controls-height);
-  border: $style-stroke-width-s solid var(--theme-elevation-150);
-  // Make it so border itself is round too and not cut off at the corners
-  border-collapse: unset;
-  transform: translateY(1px); // aligns with top bar pixel line when stuck
-
-  &__group {
+  .fixed-toolbar {
+    @include blur-bg(var(--theme-elevation-0));
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 2px;
-    z-index: 1;
+    padding: calc(var(--base) / 4);
+    vertical-align: middle;
+    position: sticky;
+    z-index: 2;
+    top: var(--doc-controls-height);
+    border: $style-stroke-width-s solid var(--theme-elevation-150);
+    // Make it so border itself is round too and not cut off at the corners
+    border-collapse: unset;
+    transform: translateY(1px); // aligns with top bar pixel line when stuck
 
-    .icon {
-      min-width: 20px;
-      height: 20px;
-      color: var(--theme-elevation-600);
-    }
+    &__group {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 2px;
+      z-index: 1;
 
-    .divider {
-      width: 1px;
-      height: 15px;
-      background-color: var(--theme-elevation-100);
-      margin: 0 6.25px 0 4.25px; // substract 2px from the gap
-    }
-  }
+      .icon {
+        min-width: 20px;
+        height: 20px;
+        color: var(--theme-elevation-600);
+      }
 
-  + .editor-container {
-    > .editor-scroller > .editor {
-      > .ContentEditable__root {
-        padding-top: calc(var(--base) * 1.25);
+      .divider {
+        width: 1px;
+        height: 15px;
+        background-color: var(--theme-elevation-100);
+        margin: 0 6.25px 0 4.25px; // substract 2px from the gap
       }
     }
 
-    > .editor-scroller > .editor > div > .editor-placeholder {
-      top: calc(var(--base) * 1.25);
-    }
-  }
-}
-
-.rich-text-lexical--show-gutter {
-  .fixed-toolbar {
     + .editor-container {
       > .editor-scroller > .editor {
-        > .ContentEditable__root::before {
-          top: calc(var(--base) * 1.25) !important;
-          height: calc(100% - calc(var(--base) * 1.25) - 8px) !important;
+        > .ContentEditable__root {
+          padding-top: calc(var(--base) * 1.25);
+        }
+      }
+
+      > .editor-scroller > .editor > div > .editor-placeholder {
+        top: calc(var(--base) * 1.25);
+      }
+    }
+  }
+
+  .rich-text-lexical--show-gutter {
+    .fixed-toolbar {
+      + .editor-container {
+        > .editor-scroller > .editor {
+          > .ContentEditable__root::before {
+            top: calc(var(--base) * 1.25) !important;
+            height: calc(100% - calc(var(--base) * 1.25) - 8px) !important;
+          }
         }
       }
     }
diff --git a/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.scss b/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.scss
index d65b61872..6d2f6270e 100644
--- a/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.scss
+++ b/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.scss
@@ -1,56 +1,58 @@
 @import '../../../../../scss/styles';
 
-.inline-toolbar-popup {
-  display: flex;
-  align-items: center;
-  background: var(--theme-input-bg);
-  padding: base(0.2);
-  vertical-align: middle;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 2;
-  opacity: 0;
-  border-radius: $style-radius-m;
-  transition: opacity 0.2s;
-  will-change: transform;
-  box-shadow:
-    0px 1px 2px 1px rgba(0, 0, 0, 0.1),
-    0px 4px 16px 0px rgba(0, 0, 0, 0.2),
-    0px -4px 8px 0px rgba(0, 0, 0, 0.1);
-
-  .caret {
-    z-index: 93;
-    position: absolute;
-    top: calc(100% - 24px);
-    border: base(0.4) solid transparent;
-    pointer-events: none;
-    border-top-color: var(--theme-input-bg);
-  }
-
-  &__group {
+@layer payload-default {
+  .inline-toolbar-popup {
     display: flex;
     align-items: center;
-    gap: 2px;
-
-    .icon {
-      min-width: 20px;
-      height: 20px;
-      color: var(--theme-elevation-600);
-    }
-
-    .divider {
-      width: 1px;
-      height: 15px;
-      background-color: var(--theme-border-color);
-      margin: 0 6.25px;
-    }
-  }
-}
-html[data-theme='light'] {
-  .inline-toolbar-popup {
+    background: var(--theme-input-bg);
+    padding: base(0.2);
+    vertical-align: middle;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    opacity: 0;
+    border-radius: $style-radius-m;
+    transition: opacity 0.2s;
+    will-change: transform;
     box-shadow:
-      0px 1px 2px 1px rgba(0, 0, 0, 0.05),
-      0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+      0px 1px 2px 1px rgba(0, 0, 0, 0.1),
+      0px 4px 16px 0px rgba(0, 0, 0, 0.2),
+      0px -4px 8px 0px rgba(0, 0, 0, 0.1);
+
+    .caret {
+      z-index: 93;
+      position: absolute;
+      top: calc(100% - 24px);
+      border: base(0.4) solid transparent;
+      pointer-events: none;
+      border-top-color: var(--theme-input-bg);
+    }
+
+    &__group {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+
+      .icon {
+        min-width: 20px;
+        height: 20px;
+        color: var(--theme-elevation-600);
+      }
+
+      .divider {
+        width: 1px;
+        height: 15px;
+        background-color: var(--theme-border-color);
+        margin: 0 6.25px;
+      }
+    }
+  }
+  html[data-theme='light'] {
+    .inline-toolbar-popup {
+      box-shadow:
+        0px 1px 2px 1px rgba(0, 0, 0, 0.05),
+        0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+    }
   }
 }
diff --git a/packages/richtext-lexical/src/features/upload/client/component/index.scss b/packages/richtext-lexical/src/features/upload/client/component/index.scss
index a1f7d0b51..400e0b97d 100644
--- a/packages/richtext-lexical/src/features/upload/client/component/index.scss
+++ b/packages/richtext-lexical/src/features/upload/client/component/index.scss
@@ -1,150 +1,152 @@
 @import '../../../../scss/styles';
 
-.lexical-upload {
-  @extend %body;
-  @include shadow-sm;
-  max-width: calc(var(--base) * 15);
-  display: flex;
-  align-items: center;
-  background: var(--theme-input-bg);
-  border-radius: $style-radius-m;
-  border: 1px solid var(--theme-elevation-100);
-  position: relative;
-  font-family: var(--font-body);
-  margin-block: base(0.5);
-
-  .btn {
-    margin: 0;
-  }
-
-  &:hover {
-    border: 1px solid var(--theme-elevation-150);
-  }
-
-  &__card {
-    @include soft-shadow-bottom;
+@layer payload-default {
+  .lexical-upload {
+    @extend %body;
+    @include shadow-sm;
+    max-width: calc(var(--base) * 15);
     display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  &__topRow {
-    display: flex;
-  }
-
-  &__thumbnail {
-    width: calc(var(--base) * 3.25);
-    height: auto;
+    align-items: center;
+    background: var(--theme-input-bg);
+    border-radius: $style-radius-m;
+    border: 1px solid var(--theme-elevation-100);
     position: relative;
-    overflow: hidden;
-    flex-shrink: 0;
-    border-top-left-radius: $style-radius-m;
+    font-family: var(--font-body);
+    margin-block: base(0.5);
 
-    img,
-    svg {
-      position: absolute;
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-      background-color: var(--theme-elevation-800);
-    }
-  }
-
-  &__topRowRightPanel {
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-    padding: calc(var(--base) * 0.75);
-    justify-content: space-between;
-    max-width: calc(100% - #{calc(var(--base) * 3.25)});
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    margin-left: calc(var(--base) * 0.5);
-
-    .lexical-upload__doc-drawer-toggler {
-      pointer-events: all;
-    }
-
-    & > *:not(:last-child) {
-      margin-right: calc(var(--base) * 0.25);
-    }
-  }
-
-  &__removeButton {
-    margin: 0;
-
-    line {
-      stroke-width: $style-stroke-width-m;
-    }
-
-    &:disabled {
-      color: var(--theme-elevation-300);
-      pointer-events: none;
-    }
-  }
-
-  &__upload-drawer-toggler {
-    background-color: transparent;
-    border: none;
-    padding: 0;
-    margin: 0;
-    outline: none;
-    line-height: inherit;
-  }
-
-  &__doc-drawer-toggler {
-    text-decoration: underline;
-  }
-
-  &__doc-drawer-toggler,
-  &__list-drawer-toggler,
-  &__upload-drawer-toggler {
-    & > * {
+    .btn {
       margin: 0;
     }
 
-    &:disabled {
-      color: var(--theme-elevation-300);
-      pointer-events: none;
+    &:hover {
+      border: 1px solid var(--theme-elevation-150);
     }
-  }
 
-  &__collectionLabel {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+    &__card {
+      @include soft-shadow-bottom;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
 
-  &__bottomRow {
-    padding: calc(var(--base) * 0.5);
-    border-top: 1px solid var(--theme-elevation-100);
-  }
+    &__topRow {
+      display: flex;
+    }
 
-  h5 {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
+    &__thumbnail {
+      width: calc(var(--base) * 3.25);
+      height: auto;
+      position: relative;
+      overflow: hidden;
+      flex-shrink: 0;
+      border-top-left-radius: $style-radius-m;
 
-  &__wrap {
-    padding: calc(var(--base) * 0.5) calc(var(--base) * 0.5) calc(var(--base) * 0.5) var(--base);
-    text-align: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+      img,
+      svg {
+        position: absolute;
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+        background-color: var(--theme-elevation-800);
+      }
+    }
 
-  &--selected {
-    box-shadow: $focus-box-shadow;
-    outline: none;
-  }
-
-  @include small-break {
     &__topRowRightPanel {
-      padding: calc(var(--base) * 0.75) calc(var(--base) * 0.5);
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      padding: calc(var(--base) * 0.75);
+      justify-content: space-between;
+      max-width: calc(100% - #{calc(var(--base) * 3.25)});
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      margin-left: calc(var(--base) * 0.5);
+
+      .lexical-upload__doc-drawer-toggler {
+        pointer-events: all;
+      }
+
+      & > *:not(:last-child) {
+        margin-right: calc(var(--base) * 0.25);
+      }
+    }
+
+    &__removeButton {
+      margin: 0;
+
+      line {
+        stroke-width: $style-stroke-width-m;
+      }
+
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
+      }
+    }
+
+    &__upload-drawer-toggler {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      margin: 0;
+      outline: none;
+      line-height: inherit;
+    }
+
+    &__doc-drawer-toggler {
+      text-decoration: underline;
+    }
+
+    &__doc-drawer-toggler,
+    &__list-drawer-toggler,
+    &__upload-drawer-toggler {
+      & > * {
+        margin: 0;
+      }
+
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
+      }
+    }
+
+    &__collectionLabel {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__bottomRow {
+      padding: calc(var(--base) * 0.5);
+      border-top: 1px solid var(--theme-elevation-100);
+    }
+
+    h5 {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &__wrap {
+      padding: calc(var(--base) * 0.5) calc(var(--base) * 0.5) calc(var(--base) * 0.5) var(--base);
+      text-align: left;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &--selected {
+      box-shadow: $focus-box-shadow;
+      outline: none;
+    }
+
+    @include small-break {
+      &__topRowRightPanel {
+        padding: calc(var(--base) * 0.75) calc(var(--base) * 0.5);
+      }
     }
   }
 }
diff --git a/packages/richtext-lexical/src/field/index.scss b/packages/richtext-lexical/src/field/index.scss
index 37ecb6819..418b73271 100644
--- a/packages/richtext-lexical/src/field/index.scss
+++ b/packages/richtext-lexical/src/field/index.scss
@@ -1,30 +1,32 @@
 @import '../scss/styles.scss';
 
-.rich-text-lexical {
-  & > .field-error.tooltip {
-    right: auto;
-    position: static;
-    margin-bottom: 0.2em;
-    max-width: fit-content;
-  }
-
-  .errorBoundary {
-    pre {
-      text-wrap: unset;
+@layer payload-default {
+  .rich-text-lexical {
+    & > .field-error.tooltip {
+      right: auto;
+      position: static;
+      margin-bottom: 0.2em;
+      max-width: fit-content;
     }
-  }
 
-  &__wrap {
-    width: 100%;
-    position: relative;
-  }
+    .errorBoundary {
+      pre {
+        text-wrap: unset;
+      }
+    }
 
-  &--read-only {
-    .editor-container {
-      .editor {
-        background: var(--theme-elevation-200);
-        color: var(--theme-elevation-450);
-        padding: calc(var(--base) * 0.5);
+    &__wrap {
+      width: 100%;
+      position: relative;
+    }
+
+    &--read-only {
+      .editor-container {
+        .editor {
+          background: var(--theme-elevation-200);
+          color: var(--theme-elevation-450);
+          padding: calc(var(--base) * 0.5);
+        }
       }
     }
   }
diff --git a/packages/richtext-lexical/src/lexical/LexicalEditor.scss b/packages/richtext-lexical/src/lexical/LexicalEditor.scss
index 236af14a2..1c327a669 100644
--- a/packages/richtext-lexical/src/lexical/LexicalEditor.scss
+++ b/packages/richtext-lexical/src/lexical/LexicalEditor.scss
@@ -1,63 +1,65 @@
 @import '../scss/styles';
 
-.rich-text-lexical {
-  .editor {
-    position: relative;
-  }
-
-  .editor-container {
-    position: relative;
-
-    font-family: var(--font-serif);
-    font-size: base(0.8);
-    letter-spacing: 0.02em;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-family: var(--font-body);
-      line-height: 1.125;
-      letter-spacing: 0;
+@layer payload-default {
+  .rich-text-lexical {
+    .editor {
+      position: relative;
     }
-  }
 
-  &--show-gutter {
-    > .rich-text-lexical__wrap
+    .editor-container {
+      position: relative;
+
+      font-family: var(--font-serif);
+      font-size: base(0.8);
+      letter-spacing: 0.02em;
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-family: var(--font-body);
+        line-height: 1.125;
+        letter-spacing: 0;
+      }
+    }
+
+    &--show-gutter {
+      > .rich-text-lexical__wrap
+        > .editor-container
+        > .editor-scroller
+        > .editor
+        > div
+        > .editor-placeholder {
+        left: 3rem;
+      }
+    }
+
+    &:not(&--show-gutter)
+      > .rich-text-lexical__wrap
       > .editor-container
       > .editor-scroller
       > .editor
       > div
       > .editor-placeholder {
-      left: 3rem;
+      left: 0;
+    }
+
+    .editor-placeholder {
+      position: absolute;
+      top: 8px;
+      font-size: base(0.8);
+      line-height: 1.5;
+      color: var(--theme-elevation-500);
+      /* Prevent text selection */
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+
+      /* Make it behave more like a background element (no interaction) */
+      pointer-events: none;
     }
   }
-
-  &:not(&--show-gutter)
-    > .rich-text-lexical__wrap
-    > .editor-container
-    > .editor-scroller
-    > .editor
-    > div
-    > .editor-placeholder {
-    left: 0;
-  }
-
-  .editor-placeholder {
-    position: absolute;
-    top: 8px;
-    font-size: base(0.8);
-    line-height: 1.5;
-    color: var(--theme-elevation-500);
-    /* Prevent text selection */
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-
-    /* Make it behave more like a background element (no interaction) */
-    pointer-events: none;
-  }
 }
diff --git a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss
index 6d52a4071..3a6d43fba 100644
--- a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss
+++ b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss
@@ -1,67 +1,69 @@
 @import '../../../scss/styles.scss';
 
-.slash-menu-popup {
-  background: var(--theme-input-bg);
-  width: 200px;
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-m;
-  list-style: none;
-  font-family: var(--font-body);
-  max-height: 300px;
-  overflow-y: auto;
-  z-index: 10;
-  position: absolute;
-  box-shadow:
-    0px 1px 2px 1px rgba(0, 0, 0, 0.1),
-    0px 4px 16px 0px rgba(0, 0, 0, 0.2),
-    0px -4px 8px 0px rgba(0, 0, 0, 0.1);
-
-  &__group {
-    padding-bottom: 8px;
-  }
-
-  &__group-title {
-    padding-left: 10px;
-    color: var(--theme-elevation-600);
-    font-size: 10px;
-  }
-
-  &__item {
-    all: unset;
-    padding-left: 12px;
-    font-size: 13px;
-    box-sizing: border-box;
-    background: none;
-    border: none;
-    color: var(--theme-elevation-900);
-    display: flex;
-    align-items: center;
-    height: 30px;
-    width: 100%;
-    cursor: pointer;
-
-    &--selected {
-      background: var(--theme-elevation-100);
-    }
-
-    &-text {
-      margin-left: 6px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    .icon {
-      color: var(--theme-elevation-500);
-      min-width: fit-content;
-    }
-  }
-}
-
-html[data-theme='light'] {
+@layer payload-default {
   .slash-menu-popup {
+    background: var(--theme-input-bg);
+    width: 200px;
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-m;
+    list-style: none;
+    font-family: var(--font-body);
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 10;
+    position: absolute;
     box-shadow:
-      0px 1px 2px 1px rgba(0, 0, 0, 0.05),
-      0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+      0px 1px 2px 1px rgba(0, 0, 0, 0.1),
+      0px 4px 16px 0px rgba(0, 0, 0, 0.2),
+      0px -4px 8px 0px rgba(0, 0, 0, 0.1);
+
+    &__group {
+      padding-bottom: 8px;
+    }
+
+    &__group-title {
+      padding-left: 10px;
+      color: var(--theme-elevation-600);
+      font-size: 10px;
+    }
+
+    &__item {
+      all: unset;
+      padding-left: 12px;
+      font-size: 13px;
+      box-sizing: border-box;
+      background: none;
+      border: none;
+      color: var(--theme-elevation-900);
+      display: flex;
+      align-items: center;
+      height: 30px;
+      width: 100%;
+      cursor: pointer;
+
+      &--selected {
+        background: var(--theme-elevation-100);
+      }
+
+      &-text {
+        margin-left: 6px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .icon {
+        color: var(--theme-elevation-500);
+        min-width: fit-content;
+      }
+    }
+  }
+
+  html[data-theme='light'] {
+    .slash-menu-popup {
+      box-shadow:
+        0px 1px 2px 1px rgba(0, 0, 0, 0.05),
+        0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+    }
   }
 }
diff --git a/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.scss b/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.scss
index c887d0270..42905de0e 100644
--- a/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.scss
+++ b/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.scss
@@ -1,33 +1,35 @@
 @import '../../../../scss/styles.scss';
 
-.add-block-menu {
-  all: unset; // reset all default button styles
-  border-radius: $style-radius-m;
-  padding: 0;
-  cursor: pointer;
-  opacity: 0;
-  position: absolute;
-  left: 0;
-  top: 0;
-  will-change: transform;
+@layer payload-default {
+  .add-block-menu {
+    all: unset; // reset all default button styles
+    border-radius: $style-radius-m;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    will-change: transform;
 
-  &:hover {
-    background-color: var(--theme-elevation-100);
-    .icon {
-      opacity: 1;
+    &:hover {
+      background-color: var(--theme-elevation-100);
+      .icon {
+        opacity: 1;
+      }
     }
-  }
 
-  .icon {
-    width: 18px;
-    height: 24px;
-    opacity: 0.3;
-    background-image: url(../../../ui/icons/Add/index.svg);
-  }
-
-  html[data-theme='dark'] & {
     .icon {
-      background-image: url(../../../ui/icons/Add/light.svg);
+      width: 18px;
+      height: 24px;
+      opacity: 0.3;
+      background-image: url(../../../ui/icons/Add/index.svg);
+    }
+
+    html[data-theme='dark'] & {
+      .icon {
+        background-image: url(../../../ui/icons/Add/light.svg);
+      }
     }
   }
 }
diff --git a/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.scss b/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.scss
index de36b179b..00e71dcd2 100644
--- a/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.scss
+++ b/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.scss
@@ -1,76 +1,78 @@
 @import '../../../../scss/styles.scss';
 
-.draggable-block-menu {
-  border-radius: $style-radius-m;
-  padding: 0;
-  cursor: grab;
-  opacity: 0;
-  position: absolute;
-  left: 0;
-  top: 0;
-  will-change: transform;
-  background-color: var(--theme-bg);
+@layer payload-default {
+  .draggable-block-menu {
+    border-radius: $style-radius-m;
+    padding: 0;
+    cursor: grab;
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    will-change: transform;
+    background-color: var(--theme-bg);
 
-  &:active {
-    cursor: grabbing;
-  }
+    &:active {
+      cursor: grabbing;
+    }
+
+    &:hover {
+      background-color: var(--theme-elevation-100);
+      .icon {
+        opacity: 1;
+      }
+    }
 
-  &:hover {
-    background-color: var(--theme-elevation-100);
     .icon {
-      opacity: 1;
+      width: 18px;
+      height: 24px;
+      opacity: 0.3;
+      background-image: url(../../../ui/icons/DraggableBlock/index.svg);
+    }
+
+    html[data-theme='dark'] & {
+      .icon {
+        background-image: url(../../../ui/icons/DraggableBlock/light.svg);
+      }
     }
   }
 
-  .icon {
-    width: 18px;
-    height: 24px;
-    opacity: 0.3;
-    background-image: url(../../../ui/icons/DraggableBlock/index.svg);
-  }
-
-  html[data-theme='dark'] & {
-    .icon {
-      background-image: url(../../../ui/icons/DraggableBlock/light.svg);
+  .rich-text-lexical--show-gutter
+    > .rich-text-lexical__wrap
+    > .editor-container
+    > .editor-scroller
+    > .editor {
+    > .draggable-block-target-line {
+      left: 3rem;
     }
   }
-}
 
-.rich-text-lexical--show-gutter
-  > .rich-text-lexical__wrap
-  > .editor-container
-  > .editor-scroller
-  > .editor {
-  > .draggable-block-target-line {
-    left: 3rem;
-  }
-}
-
-.draggable-block-target-line {
-  pointer-events: none;
-  background: var(--theme-success-400);
-  border-radius: 1px;
-  height: base(0.2);
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  will-change: transform;
-  transition: transform 0.1s;
-}
-
-/* This targets Firefox 57+. The transition looks ugly on firefox, thus we disable it here */
-@-moz-document url-prefix() {
   .draggable-block-target-line {
-    transition: none;
+    pointer-events: none;
+    background: var(--theme-success-400);
+    border-radius: 1px;
+    height: base(0.2);
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    will-change: transform;
+    transition: transform 0.1s;
   }
-}
 
-.rich-text-lexical {
-  .ContentEditable__root > * {
-    will-change: margin-top, margin-bottom;
-    transition:
-      margin-top 0.08s,
-      margin-bottom 0.08s;
+  /* This targets Firefox 57+. The transition looks ugly on firefox, thus we disable it here */
+  @-moz-document url-prefix() {
+    .draggable-block-target-line {
+      transition: none;
+    }
+  }
+
+  .rich-text-lexical {
+    .ContentEditable__root > * {
+      will-change: margin-top, margin-bottom;
+      transition:
+        margin-top 0.08s,
+        margin-bottom 0.08s;
+    }
   }
 }
diff --git a/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss b/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss
index b0fe93378..b15aca508 100644
--- a/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss
+++ b/packages/richtext-lexical/src/lexical/theme/EditorTheme.scss
@@ -1,392 +1,394 @@
 @import '../../scss/styles.scss';
 
-.LexicalEditorTheme {
-  &__ltr {
-    text-align: left;
+@layer payload-default {
+  .LexicalEditorTheme {
+    &__ltr {
+      text-align: left;
+    }
+
+    &__rtl {
+      text-align: right;
+    }
+
+    &__paragraph {
+      font-size: base(0.8);
+      margin-bottom: 0.55em;
+      position: relative;
+      line-height: 1.5;
+      letter-spacing: normal;
+    }
+
+    // No bottom margin for last paragraph in editor. This also created nice animations when adding a new line at the end
+    .ContentEditable__root {
+      font-size: base(0.8);
+    }
+
+    &__quote {
+      font-size: base(0.8);
+      margin-block: base(0.8);
+      margin-inline: base(0.2);
+      border-inline-start-color: var(--theme-elevation-150);
+      border-inline-start-width: base(0.2);
+      border-inline-start-style: solid;
+      padding-inline-start: base(0.6);
+      padding-block: base(0.2);
+    }
+
+    &__h1 {
+      font-size: base(1.4);
+      font-weight: 700;
+      margin-block: 0.5em 0.4em;
+      line-height: base(1.2);
+      letter-spacing: normal;
+    }
+
+    &__h2 {
+      font-size: base(1.25);
+      font-weight: 700;
+      margin-block: 0.55em 0.4em;
+      line-height: base(1.2);
+      letter-spacing: normal;
+    }
+
+    &__h3 {
+      font-size: base(1.1);
+      font-weight: 700;
+      margin-block: 0.6em 0.4em;
+      line-height: base(1.3);
+      letter-spacing: normal;
+    }
+
+    &__h4 {
+      font-size: base(1);
+      font-weight: 700;
+      margin-block: 0.65em 0.4em;
+      line-height: base(1.4);
+      letter-spacing: normal;
+    }
+
+    &__h5 {
+      font-size: base(0.9);
+      font-weight: 700;
+      margin-block: 0.7em 0.4em;
+      line-height: base(1.5);
+      letter-spacing: normal;
+    }
+
+    &__h6 {
+      font-size: base(0.8);
+      font-weight: 700;
+      margin-block: 0.75em 0.4em;
+      line-height: base(1.5);
+      letter-spacing: 0.1em;
+    }
+
+    &__indent {
+      --lexical-indent-base-value: 40px;
+    }
+
+    &__textBold {
+      font-weight: bold;
+    }
+
+    &__textItalic {
+      font-style: italic;
+    }
+
+    &__textUnderline {
+      text-decoration: underline;
+    }
+
+    &__textStrikethrough {
+      text-decoration: line-through;
+    }
+
+    &__textUnderlineStrikethrough {
+      text-decoration: underline line-through;
+    }
+
+    &__textSubscript {
+      font-size: 0.8em;
+      vertical-align: sub !important;
+    }
+
+    &__textSuperscript {
+      font-size: 0.8em;
+      vertical-align: super;
+    }
+
+    &__textCode {
+      background-color: var(--theme-elevation-50);
+      border: 1px solid var(--theme-elevation-150);
+      color: var(--theme-error-600);
+      padding: base(0.1) base(0.2);
+      font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace;
+      font-size: 0.875em;
+      border-radius: var(--style-radius-s);
+      box-decoration-break: clone;
+      -webkit-box-decoration-break: clone;
+    }
+
+    &__hashtag {
+      background-color: rgba(88, 144, 255, 0.15);
+      border-bottom: 1px solid rgba(88, 144, 255, 0.3);
+    }
+
+    .ContentEditable__root &__link {
+      pointer-events: none;
+    }
+
+    &__link {
+      color: var(--theme-success-750);
+      text-decoration: none;
+      border-bottom: 1px dotted;
+    }
+
+    &__code {
+      /*background-color: rgb(240, 242, 245);*/
+      font-family: Menlo, Consolas, Monaco, monospace;
+      display: block;
+      padding: 8px 8px 8px 52px;
+      line-height: 1.53;
+      font-size: 13px;
+      margin: 8px 0;
+      tab-size: 2;
+      /* white-space: pre; */
+      overflow-x: auto;
+      position: relative;
+    }
+
+    &__code:before {
+      content: attr(data-gutter);
+      position: absolute;
+      /*background-color: #eee;*/
+      left: 0;
+      top: 0;
+      border-right: 1px solid #ccc;
+      padding: 8px;
+      color: #777;
+      white-space: pre-wrap;
+      text-align: right;
+      min-width: 25px;
+    }
+
+    &__characterLimit {
+      display: inline;
+      background-color: #ffbbbb !important;
+    }
+
+    &__ol1 {
+      padding: 0;
+      list-style-position: outside;
+      margin: base(0.4) 0 base(0.8);
+    }
+
+    &__ol2 {
+      padding: 0;
+      margin: 0;
+      list-style-type: upper-alpha;
+      list-style-position: outside;
+    }
+
+    &__ol3 {
+      padding: 0;
+      margin: 0;
+      list-style-type: lower-alpha;
+      list-style-position: outside;
+    }
+
+    &__ol4 {
+      padding: 0;
+      margin: 0;
+      list-style-type: upper-roman;
+      list-style-position: outside;
+    }
+
+    &__ol5 {
+      padding: 0;
+      margin: 0;
+      list-style-type: lower-roman;
+      list-style-position: outside;
+    }
+
+    &__ul {
+      padding: 0;
+      margin: base(0.4) 0 base(0.8);
+      list-style-position: outside;
+    }
+
+    &__ul ul {
+      margin: 0;
+    }
+
+    &__listItem {
+      font-size: base(0.8);
+      margin: 0 0 0.4em 40px;
+    }
+
+    &__listItem[dir='rtl'] {
+      margin: 0 40px 0.4em 0;
+    }
+
+    &__listItemChecked,
+    &__listItemUnchecked {
+      position: relative;
+      // Instead of having margin-left: 40px like other list-items or indented paragraphs,
+      // we use padding-left: 25px + margin-left: 15px = 40px, so that the click position
+      // calculation in `CheckListPlugin` matches the checkbox
+      margin-left: 15px;
+      padding-left: 25px;
+      list-style-type: none;
+      outline: none;
+    }
+
+    // See comment above for why we need this
+    &__listItemUnchecked[dir='rtl'],
+    &__listItemChecked[dir='rtl'] {
+      margin-left: 0;
+      padding-left: 0;
+      padding-right: 25px;
+      margin-right: 15px;
+    }
+
+    &__listItemChecked {
+      text-decoration: line-through;
+    }
+
+    &__listItemUnchecked:before,
+    &__listItemChecked:before {
+      content: '';
+      width: base(0.8);
+      height: base(0.8);
+      top: base(0.1);
+      left: 0;
+      cursor: pointer;
+      display: block;
+      background-size: cover;
+      position: absolute;
+    }
+
+    &__listItemUnchecked[dir='rtl']:before,
+    &__listItemChecked[dir='rtl']:before {
+      left: auto;
+      right: 0;
+    }
+
+    &__listItemUnchecked:focus:before,
+    &__listItemChecked:focus:before {
+      outline: 0;
+      box-shadow: 0 0 3px 3px var(--theme-success-400);
+      border: 1px solid var(--theme-elevation-250);
+      border-radius: var(--style-radius-s);
+    }
+
+    &__listItemUnchecked:before {
+      border: 1px solid var(--theme-elevation-250);
+      border-radius: $style-radius-s;
+    }
+
+    &__listItemChecked:before {
+      border: 1px solid var(--theme-elevation-500);
+      border-radius: $style-radius-s;
+      background-color: var(--theme-elevation-100);
+      background-repeat: no-repeat;
+    }
+
+    &__listItemChecked:after {
+      content: '';
+      cursor: pointer;
+      border-color: var(--theme-text);
+      border-style: solid;
+      position: absolute;
+      display: block;
+      top: 6px;
+      width: 3px;
+      left: 7px;
+      right: 7px;
+      height: 6px;
+      transform: rotate(45deg);
+      border-width: 0 2px 2px 0;
+    }
+
+    &__nestedListItem {
+      list-style-type: none;
+    }
+
+    &__nestedListItem:before,
+    &__nestedListItem:after {
+      display: none;
+    }
+
+    &__tokenComment {
+      color: slategray;
+    }
+
+    &__tokenPunctuation {
+      color: #999;
+    }
+
+    &__tokenProperty {
+      color: #905;
+    }
+
+    &__tokenSelector {
+      color: #690;
+    }
+
+    &__tokenOperator {
+      color: #9a6e3a;
+    }
+
+    &__tokenAttr {
+      color: #07a;
+    }
+
+    &__tokenVariable {
+      color: #e90;
+    }
+
+    &__tokenFunction {
+      color: #dd4a68;
+    }
+
+    &__mark {
+      background: rgba(255, 212, 0, 0.14);
+      border-bottom: 2px solid rgba(255, 212, 0, 0.3);
+      padding-bottom: 2px;
+    }
+
+    &__markOverlap {
+      background: rgba(255, 212, 0, 0.3);
+      border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+    }
+
+    &__mark.selected {
+      background: rgba(255, 212, 0, 0.5);
+      border-bottom: 2px solid rgba(255, 212, 0, 1);
+    }
+
+    &__markOverlap.selected {
+      background: rgba(255, 212, 0, 0.7);
+      border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+    }
+
+    &__embedBlock {
+      user-select: none;
+    }
+
+    &__embedBlockFocus {
+      outline: 2px solid rgb(60, 132, 244);
+    }
+
+    .ContentEditable__root {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
   }
 
-  &__rtl {
-    text-align: right;
-  }
-
-  &__paragraph {
-    font-size: base(0.8);
-    margin-bottom: 0.55em;
-    position: relative;
-    line-height: 1.5;
-    letter-spacing: normal;
-  }
-
-  // No bottom margin for last paragraph in editor. This also created nice animations when adding a new line at the end
-  .ContentEditable__root {
-    font-size: base(0.8);
-  }
-
-  &__quote {
-    font-size: base(0.8);
-    margin-block: base(0.8);
-    margin-inline: base(0.2);
-    border-inline-start-color: var(--theme-elevation-150);
-    border-inline-start-width: base(0.2);
-    border-inline-start-style: solid;
-    padding-inline-start: base(0.6);
-    padding-block: base(0.2);
-  }
-
-  &__h1 {
-    font-size: base(1.4);
-    font-weight: 700;
-    margin-block: 0.5em 0.4em;
-    line-height: base(1.2);
-    letter-spacing: normal;
-  }
-
-  &__h2 {
-    font-size: base(1.25);
-    font-weight: 700;
-    margin-block: 0.55em 0.4em;
-    line-height: base(1.2);
-    letter-spacing: normal;
-  }
-
-  &__h3 {
-    font-size: base(1.1);
-    font-weight: 700;
-    margin-block: 0.6em 0.4em;
-    line-height: base(1.3);
-    letter-spacing: normal;
-  }
-
-  &__h4 {
-    font-size: base(1);
-    font-weight: 700;
-    margin-block: 0.65em 0.4em;
-    line-height: base(1.4);
-    letter-spacing: normal;
-  }
-
-  &__h5 {
-    font-size: base(0.9);
-    font-weight: 700;
-    margin-block: 0.7em 0.4em;
-    line-height: base(1.5);
-    letter-spacing: normal;
-  }
-
-  &__h6 {
-    font-size: base(0.8);
-    font-weight: 700;
-    margin-block: 0.75em 0.4em;
-    line-height: base(1.5);
-    letter-spacing: 0.1em;
-  }
-
-  &__indent {
-    --lexical-indent-base-value: 40px;
-  }
-
-  &__textBold {
-    font-weight: bold;
-  }
-
-  &__textItalic {
-    font-style: italic;
-  }
-
-  &__textUnderline {
-    text-decoration: underline;
-  }
-
-  &__textStrikethrough {
-    text-decoration: line-through;
-  }
-
-  &__textUnderlineStrikethrough {
-    text-decoration: underline line-through;
-  }
-
-  &__textSubscript {
-    font-size: 0.8em;
-    vertical-align: sub !important;
-  }
-
-  &__textSuperscript {
-    font-size: 0.8em;
-    vertical-align: super;
-  }
-
-  &__textCode {
-    background-color: var(--theme-elevation-50);
-    border: 1px solid var(--theme-elevation-150);
-    color: var(--theme-error-600);
-    padding: base(0.1) base(0.2);
-    font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace;
-    font-size: 0.875em;
-    border-radius: var(--style-radius-s);
-    box-decoration-break: clone;
-    -webkit-box-decoration-break: clone;
-  }
-
-  &__hashtag {
-    background-color: rgba(88, 144, 255, 0.15);
-    border-bottom: 1px solid rgba(88, 144, 255, 0.3);
-  }
-
-  .ContentEditable__root &__link {
-    pointer-events: none;
-  }
-
-  &__link {
-    color: var(--theme-success-750);
-    text-decoration: none;
-    border-bottom: 1px dotted;
-  }
-
-  &__code {
-    /*background-color: rgb(240, 242, 245);*/
-    font-family: Menlo, Consolas, Monaco, monospace;
-    display: block;
-    padding: 8px 8px 8px 52px;
-    line-height: 1.53;
-    font-size: 13px;
-    margin: 8px 0;
-    tab-size: 2;
-    /* white-space: pre; */
-    overflow-x: auto;
-    position: relative;
-  }
-
-  &__code:before {
-    content: attr(data-gutter);
-    position: absolute;
-    /*background-color: #eee;*/
-    left: 0;
-    top: 0;
-    border-right: 1px solid #ccc;
-    padding: 8px;
-    color: #777;
-    white-space: pre-wrap;
-    text-align: right;
-    min-width: 25px;
-  }
-
-  &__characterLimit {
-    display: inline;
-    background-color: #ffbbbb !important;
-  }
-
-  &__ol1 {
-    padding: 0;
-    list-style-position: outside;
-    margin: base(0.4) 0 base(0.8);
-  }
-
-  &__ol2 {
-    padding: 0;
-    margin: 0;
-    list-style-type: upper-alpha;
-    list-style-position: outside;
-  }
-
-  &__ol3 {
-    padding: 0;
-    margin: 0;
-    list-style-type: lower-alpha;
-    list-style-position: outside;
-  }
-
-  &__ol4 {
-    padding: 0;
-    margin: 0;
-    list-style-type: upper-roman;
-    list-style-position: outside;
-  }
-
-  &__ol5 {
-    padding: 0;
-    margin: 0;
-    list-style-type: lower-roman;
-    list-style-position: outside;
-  }
-
-  &__ul {
-    padding: 0;
-    margin: base(0.4) 0 base(0.8);
-    list-style-position: outside;
-  }
-
-  &__ul ul {
-    margin: 0;
-  }
-
-  &__listItem {
-    font-size: base(0.8);
-    margin: 0 0 0.4em 40px;
-  }
-
-  &__listItem[dir='rtl'] {
-    margin: 0 40px 0.4em 0;
-  }
-
-  &__listItemChecked,
-  &__listItemUnchecked {
-    position: relative;
-    // Instead of having margin-left: 40px like other list-items or indented paragraphs, 
-    // we use padding-left: 25px + margin-left: 15px = 40px, so that the click position 
-    // calculation in `CheckListPlugin` matches the checkbox
-    margin-left: 15px;
-    padding-left: 25px;
-    list-style-type: none;
-    outline: none;
-  }
-
-  // See comment above for why we need this
-  &__listItemUnchecked[dir='rtl'],
-  &__listItemChecked[dir='rtl'] {
-    margin-left: 0;
-    padding-left: 0;
-    padding-right: 25px;
-    margin-right: 15px;
-  }
-
-  &__listItemChecked {
-    text-decoration: line-through;
-  }
-
-  &__listItemUnchecked:before,
-  &__listItemChecked:before {
-    content: '';
-    width: base(0.8);
-    height: base(0.8);
-    top: base(0.1);
-    left: 0;
-    cursor: pointer;
-    display: block;
-    background-size: cover;
-    position: absolute;
-  }
-
-  &__listItemUnchecked[dir='rtl']:before,
-  &__listItemChecked[dir='rtl']:before {
-    left: auto;
-    right: 0;
-  }
-
-  &__listItemUnchecked:focus:before,
-  &__listItemChecked:focus:before {
-    outline: 0;
-    box-shadow: 0 0 3px 3px var(--theme-success-400);
-    border: 1px solid var(--theme-elevation-250);
-    border-radius: var(--style-radius-s);
-  }
-
-  &__listItemUnchecked:before {
-    border: 1px solid var(--theme-elevation-250);
-    border-radius: $style-radius-s;
-  }
-
-  &__listItemChecked:before {
-    border: 1px solid var(--theme-elevation-500);
-    border-radius: $style-radius-s;
-    background-color: var(--theme-elevation-100);
-    background-repeat: no-repeat;
-  }
-
-  &__listItemChecked:after {
-    content: '';
-    cursor: pointer;
-    border-color: var(--theme-text);
-    border-style: solid;
-    position: absolute;
-    display: block;
-    top: 6px;
-    width: 3px;
-    left: 7px;
-    right: 7px;
-    height: 6px;
-    transform: rotate(45deg);
-    border-width: 0 2px 2px 0;
-  }
-
-  &__nestedListItem {
-    list-style-type: none;
-  }
-
-  &__nestedListItem:before,
-  &__nestedListItem:after {
-    display: none;
-  }
-
-  &__tokenComment {
-    color: slategray;
-  }
-
-  &__tokenPunctuation {
-    color: #999;
-  }
-
-  &__tokenProperty {
-    color: #905;
-  }
-
-  &__tokenSelector {
-    color: #690;
-  }
-
-  &__tokenOperator {
-    color: #9a6e3a;
-  }
-
-  &__tokenAttr {
-    color: #07a;
-  }
-
-  &__tokenVariable {
-    color: #e90;
-  }
-
-  &__tokenFunction {
-    color: #dd4a68;
-  }
-
-  &__mark {
-    background: rgba(255, 212, 0, 0.14);
-    border-bottom: 2px solid rgba(255, 212, 0, 0.3);
-    padding-bottom: 2px;
-  }
-
-  &__markOverlap {
-    background: rgba(255, 212, 0, 0.3);
-    border-bottom: 2px solid rgba(255, 212, 0, 0.7);
-  }
-
-  &__mark.selected {
-    background: rgba(255, 212, 0, 0.5);
-    border-bottom: 2px solid rgba(255, 212, 0, 1);
-  }
-
-  &__markOverlap.selected {
-    background: rgba(255, 212, 0, 0.7);
-    border-bottom: 2px solid rgba(255, 212, 0, 0.7);
-  }
-
-  &__embedBlock {
-    user-select: none;
-  }
-
-  &__embedBlockFocus {
-    outline: 2px solid rgb(60, 132, 244);
-  }
-
-  .ContentEditable__root {
-    &:first-child {
-      margin-top: 0;
+  html[data-theme='dark'] {
+    .LexicalEditorTheme__textCode {
+      color: var(--theme-warning-600);
     }
   }
 }
-
-html[data-theme='dark'] {
-  .LexicalEditorTheme__textCode {
-    color: var(--theme-warning-600);
-  }
-}
diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
index bea0e4eb3..0ab945b25 100644
--- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
+++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
@@ -3,89 +3,91 @@
 $lexical-contenteditable-top-padding: 8px;
 $lexical-contenteditable-bottom-padding: 8px;
 
-.ContentEditable__root {
-  border: 0;
-  font-size: 15px;
-  display: block;
-  position: relative;
-  tab-size: 1;
-  outline: 0;
-  padding-top: $lexical-contenteditable-top-padding;
-  padding-bottom: $lexical-contenteditable-bottom-padding;
-  //min-height: base(10);
-
-  &:focus-visible {
-    outline: none !important;
-  }
-
-  & > * {
-    transition: transform 0.2s ease-in-out;
-    // will-change: transform; // breaks cursor rendering for empty paragraph blocks in safari, and creates other issues
-  }
-}
-
-@media (max-width: 768px) {
+@layer payload-default {
   .ContentEditable__root {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
+    border: 0;
+    font-size: 15px;
+    display: block;
+    position: relative;
+    tab-size: 1;
+    outline: 0;
+    padding-top: $lexical-contenteditable-top-padding;
+    padding-bottom: $lexical-contenteditable-bottom-padding;
+    //min-height: base(10);
 
-@media (min-width: 769px) {
-  .rich-text-lexical--show-gutter
-    > .rich-text-lexical__wrap
-    > .editor-container
-    > .editor-scroller
-    > .editor {
-    > .ContentEditable__root {
-      padding-left: 3rem;
+    &:focus-visible {
+      outline: none !important;
     }
-    > .ContentEditable__root::before {
-      content: ' ';
-      position: absolute;
-      top: $lexical-contenteditable-top-padding;
-      left: 0;
-      height: calc(
-        100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
-      );
-      border-left: 1px solid var(--theme-elevation-100);
+
+    & > * {
+      transition: transform 0.2s ease-in-out;
+      // will-change: transform; // breaks cursor rendering for empty paragraph blocks in safari, and creates other issues
     }
   }
-}
 
-html[data-theme='light'] {
-  .rich-text-lexical.rich-text-lexical--show-gutter {
-    &.error:not(:hover) {
+  @media (max-width: 768px) {
+    .ContentEditable__root {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  @media (min-width: 769px) {
+    .rich-text-lexical--show-gutter
       > .rich-text-lexical__wrap
-        > .editor-container
-        > .editor-scroller
-        > .editor
-        > .ContentEditable__root::before {
-        border-left: 2px solid var(--theme-error-400);
+      > .editor-container
+      > .editor-scroller
+      > .editor {
+      > .ContentEditable__root {
+        padding-left: 3rem;
+      }
+      > .ContentEditable__root::before {
+        content: ' ';
+        position: absolute;
+        top: $lexical-contenteditable-top-padding;
+        left: 0;
+        height: calc(
+          100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
+        );
+        border-left: 1px solid var(--theme-elevation-100);
       }
     }
+  }
 
-    &.error:hover {
-      > .rich-text-lexical__wrap
-        > .editor-container
-        > .editor-scroller
-        > .editor
-        > .ContentEditable__root::before {
-        border-left: 2px solid var(--theme-error-500);
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .rich-text-lexical.rich-text-lexical--show-gutter {
-    &.error {
-      > .rich-text-lexical__wrap
-        > .editor-container
-        > .editor-scroller
-        > .editor
-        > .ContentEditable__root::before {
-        border-left: 2px solid var(--theme-error-500);
+  html[data-theme='light'] {
+    .rich-text-lexical.rich-text-lexical--show-gutter {
+      &.error:not(:hover) {
+        > .rich-text-lexical__wrap
+          > .editor-container
+          > .editor-scroller
+          > .editor
+          > .ContentEditable__root::before {
+          border-left: 2px solid var(--theme-error-400);
+        }
+      }
+
+      &.error:hover {
+        > .rich-text-lexical__wrap
+          > .editor-container
+          > .editor-scroller
+          > .editor
+          > .ContentEditable__root::before {
+          border-left: 2px solid var(--theme-error-500);
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .rich-text-lexical.rich-text-lexical--show-gutter {
+      &.error {
+        > .rich-text-lexical__wrap
+          > .editor-container
+          > .editor-scroller
+          > .editor
+          > .ContentEditable__root::before {
+          border-left: 2px solid var(--theme-error-500);
+        }
       }
     }
   }
diff --git a/packages/richtext-lexical/src/scss/app.scss b/packages/richtext-lexical/src/scss/app.scss
index 90254443b..f253d986b 100644
--- a/packages/richtext-lexical/src/scss/app.scss
+++ b/packages/richtext-lexical/src/scss/app.scss
@@ -2,202 +2,204 @@
 @import './toasts.scss';
 @import './colors.scss';
 
-:root {
-  --base-px: 20;
-  --base-body-size: 13;
-  --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
+@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;
+    --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;
+    --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;
 
-    ::selection {
-      color: var(--color-base-1000);
+    --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);
     }
 
-    ::-moz-selection {
-      color: var(--color-base-1000);
+    @include small-break {
+      --gutter-h: #{base(0.8)};
+      --spacing-view-bottom: calc(var(--base) * 2);
+      --nav-width: 100vw;
     }
   }
 
-  @include mid-break {
-    font-size: 12px;
+  /////////////////////////////
+  // GLOBAL STYLES
+  /////////////////////////////
+
+  * {
+    box-sizing: border-box;
   }
-}
 
-html,
-body,
-#app {
-  height: 100%;
-}
+  html {
+    @extend %body;
+    background: var(--theme-bg);
+    -webkit-font-smoothing: antialiased;
 
-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;
-}
+    &[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 {
-  background: var(--color-success-250);
-  color: var(--theme-base-800);
-}
+      ::selection {
+        color: var(--color-base-1000);
+      }
 
-::-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;
+      ::-moz-selection {
+        color: var(--color-base-1000);
+      }
+    }
+
+    @include mid-break {
+      font-size: 12px;
     }
-    outline: none;
   }
 
-  &:active {
-    opacity: 0.7;
-    outline: none;
+  html,
+  body,
+  #app {
+    height: 100%;
   }
-}
 
-svg {
-  vertical-align: middle;
-}
+  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;
+  }
 
-dialog {
-  width: 100%;
-  border: 0;
-  padding: 0;
-  color: currentColor;
-}
+  ::selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-.payload__modal-item {
-  min-height: 100%;
-  background: transparent;
-}
+  ::-moz-selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-.payload__modal-container--enterDone {
-  overflow: auto;
-}
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
 
-.payload__modal-item--enter,
-.payload__modal-item--enterDone {
-  z-index: var(--z-modal);
-}
+  h1 {
+    @extend %h1;
+  }
 
-// @import '~payload-user-css'; TODO: re-enable this
+  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
+}
diff --git a/packages/richtext-lexical/src/scss/colors.scss b/packages/richtext-lexical/src/scss/colors.scss
index 42cea0585..1eaa88cb0 100644
--- a/packages/richtext-lexical/src/scss/colors.scss
+++ b/packages/richtext-lexical/src/scss/colors.scss
@@ -1,269 +1,271 @@
-: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);
+@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-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-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-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);
+    --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-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-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-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-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);
+    --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);
+  }
 }
diff --git a/packages/richtext-lexical/src/scss/resets.scss b/packages/richtext-lexical/src/scss/resets.scss
index eeda892c2..e73efa9c0 100644
--- a/packages/richtext-lexical/src/scss/resets.scss
+++ b/packages/richtext-lexical/src/scss/resets.scss
@@ -1,10 +1,12 @@
-%btn-reset {
-  border: 0;
-  background: none;
-  box-shadow: none;
-  border-radius: 0;
-  padding: 0;
-  color: currentColor;
+@layer payload-default {
+  %btn-reset {
+    border: 0;
+    background: none;
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0;
+    color: currentColor;
+  }
 }
 
 @mixin btn-reset {
diff --git a/packages/richtext-lexical/src/scss/toastify.scss b/packages/richtext-lexical/src/scss/toastify.scss
index a5bf4c35f..3c915f788 100644
--- a/packages/richtext-lexical/src/scss/toastify.scss
+++ b/packages/richtext-lexical/src/scss/toastify.scss
@@ -1,59 +1,60 @@
 @import 'vars';
 @import 'queries';
-
-.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 {
+@layer payload-default {
+  .Toastify {
     .Toastify__toast-container {
-      left: $baseline;
-      right: $baseline;
+      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;
+      }
     }
   }
 }
diff --git a/packages/richtext-lexical/src/scss/toasts.scss b/packages/richtext-lexical/src/scss/toasts.scss
index 116845ac3..4d3b0bc37 100644
--- a/packages/richtext-lexical/src/scss/toasts.scss
+++ b/packages/richtext-lexical/src/scss/toasts.scss
@@ -1,140 +1,142 @@
 @import './styles.scss';
 
-.payload-toast-container {
-  padding: 0;
-  margin: 0;
+@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;
+    .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);
-    }
+      svg {
+        width: base(0.8);
+        height: base(0.8);
+      }
 
-    &:hover {
-      color: var(--theme-elevation-250);
-      background: none;
-    }
+      &: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;
+      [dir='RTL'] & {
+        right: unset;
+        left: 0.5rem;
       }
     }
 
-    &[data-expanded='true'] {
-      .toast-content {
-        opacity: 1;
-      }
+    .toast-title {
+      line-height: base(1);
+      margin-right: base(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 {
+    .payload-toast-item {
+      padding: base(0.8);
       color: var(--theme-elevation-800);
-      border-color: var(--theme-elevation-250);
-      background-color: var(--theme-elevation-100);
+      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);
 
-      .payload-toast-close-button {
-        color: var(--theme-elevation-600);
+      .toast-content {
+        transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        width: 100%;
+      }
 
-        &:hover {
-          color: var(--theme-elevation-250);
+      &[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);
+          }
         }
       }
     }
diff --git a/packages/richtext-lexical/src/scss/type.scss b/packages/richtext-lexical/src/scss/type.scss
index 997e43e24..9fe3e34be 100644
--- a/packages/richtext-lexical/src/scss/type.scss
+++ b/packages/richtext-lexical/src/scss/type.scss
@@ -4,106 +4,107 @@
 /////////////////////////////
 // HEADINGS
 /////////////////////////////
-
-%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);
+@layer payload-default {
+  %h1,
+  %h2,
+  %h3,
+  %h4,
+  %h5,
+  %h6 {
+    font-family: var(--font-body);
+    font-weight: 500;
   }
-}
 
-%h2 {
-  margin: 0;
-  font-size: base(1.3);
-  line-height: base(1.6);
+  %h1 {
+    margin: 0;
+    font-size: base(1.6);
+    line-height: base(1.8);
 
-  @include small-break {
-    font-size: base(0.85);
+    @include small-break {
+      letter-spacing: -0.5px;
+      font-size: base(1.25);
+    }
   }
-}
 
-%h3 {
-  margin: 0;
-  font-size: base(1);
-  line-height: base(1.2);
+  %h2 {
+    margin: 0;
+    font-size: base(1.3);
+    line-height: base(1.6);
 
-  @include small-break {
-    font-size: base(0.65);
-    line-height: 1.25;
+    @include small-break {
+      font-size: base(0.85);
+    }
   }
-}
 
-%h4 {
-  margin: 0;
-  font-size: base(0.8);
-  line-height: base(1);
-  letter-spacing: -0.375px;
-}
+  %h3 {
+    margin: 0;
+    font-size: base(1);
+    line-height: base(1.2);
 
-%h5 {
-  margin: 0;
-  font-size: base(0.65);
-  line-height: base(0.8);
-}
+    @include small-break {
+      font-size: base(0.65);
+      line-height: 1.25;
+    }
+  }
 
-%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);
+  %h4 {
+    margin: 0;
+    font-size: base(0.8);
     line-height: base(1);
+    letter-spacing: -0.375px;
   }
 
-  @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);
+  %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);
+    }
   }
 }
diff --git a/packages/richtext-slate/src/field/buttons.scss b/packages/richtext-slate/src/field/buttons.scss
index b02de5ce4..6e529983f 100644
--- a/packages/richtext-slate/src/field/buttons.scss
+++ b/packages/richtext-slate/src/field/buttons.scss
@@ -1,15 +1,16 @@
 @import '../scss/styles.scss';
+@layer payload-default {
+  .rich-text__button {
+    position: relative;
+    cursor: pointer;
 
-.rich-text__button {
-  position: relative;
-  cursor: pointer;
+    svg {
+      width: base(0.75);
+      height: base(0.75);
+    }
 
-  svg {
-    width: base(0.75);
-    height: base(0.75);
-  }
-
-  &--disabled {
-    opacity: 0.4;
+    &--disabled {
+      opacity: 0.4;
+    }
   }
 }
diff --git a/packages/richtext-slate/src/field/icons/IndentLeft/index.scss b/packages/richtext-slate/src/field/icons/IndentLeft/index.scss
index 62b0f7fe8..28cf55c34 100644
--- a/packages/richtext-slate/src/field/icons/IndentLeft/index.scss
+++ b/packages/richtext-slate/src/field/icons/IndentLeft/index.scss
@@ -1,16 +1,18 @@
 @import '../../../scss/styles.scss';
 
-.icon--indent-left {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--indent-left {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    fill: none;
-    stroke: var(--theme-elevation-800);
-    stroke-width: $style-stroke-width-m;
-  }
+    .stroke {
+      fill: none;
+      stroke: var(--theme-elevation-800);
+      stroke-width: $style-stroke-width-m;
+    }
 
-  .fill {
-    fill: var(--theme-elevation-800);
+    .fill {
+      fill: var(--theme-elevation-800);
+    }
   }
 }
diff --git a/packages/richtext-slate/src/field/icons/IndentRight/index.scss b/packages/richtext-slate/src/field/icons/IndentRight/index.scss
index f5984269c..3110ed8cf 100644
--- a/packages/richtext-slate/src/field/icons/IndentRight/index.scss
+++ b/packages/richtext-slate/src/field/icons/IndentRight/index.scss
@@ -1,16 +1,18 @@
 @import '../../../scss/styles.scss';
 
-.icon--indent-right {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--indent-right {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    fill: none;
-    stroke: var(--theme-elevation-800);
-    stroke-width: $style-stroke-width-m;
-  }
+    .stroke {
+      fill: none;
+      stroke: var(--theme-elevation-800);
+      stroke-width: $style-stroke-width-m;
+    }
 
-  .fill {
-    fill: var(--theme-elevation-800);
+    .fill {
+      fill: var(--theme-elevation-800);
+    }
   }
 }
diff --git a/packages/richtext-slate/src/field/icons/Link/index.scss b/packages/richtext-slate/src/field/icons/Link/index.scss
index 088b8c265..2eff6818c 100644
--- a/packages/richtext-slate/src/field/icons/Link/index.scss
+++ b/packages/richtext-slate/src/field/icons/Link/index.scss
@@ -1,11 +1,13 @@
 @import '../../../scss/styles.scss';
 
-.icon--link {
-  width: $baseline;
-  height: $baseline;
+@layer payload-default {
+  .icon--link {
+    width: $baseline;
+    height: $baseline;
 
-  .stroke {
-    stroke: var(--theme-elevation-800);
-    stroke-width: $style-stroke-width;
+    .stroke {
+      stroke: var(--theme-elevation-800);
+      stroke-width: $style-stroke-width;
+    }
   }
 }
diff --git a/packages/richtext-slate/src/field/icons/Relationship/index.scss b/packages/richtext-slate/src/field/icons/Relationship/index.scss
index efa651886..417693f2b 100644
--- a/packages/richtext-slate/src/field/icons/Relationship/index.scss
+++ b/packages/richtext-slate/src/field/icons/Relationship/index.scss
@@ -1,12 +1,14 @@
 @import '../../../scss/styles.scss';
 
-.icon--relationship {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--relationship {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    fill: none;
-    stroke: var(--theme-elevation-800);
-    stroke-width: $style-stroke-width-m;
+    .stroke {
+      fill: none;
+      stroke: var(--theme-elevation-800);
+      stroke-width: $style-stroke-width-m;
+    }
   }
 }
diff --git a/packages/richtext-slate/src/field/icons/Upload/index.scss b/packages/richtext-slate/src/field/icons/Upload/index.scss
index 33742f91d..1b3147d6c 100644
--- a/packages/richtext-slate/src/field/icons/Upload/index.scss
+++ b/packages/richtext-slate/src/field/icons/Upload/index.scss
@@ -1,11 +1,13 @@
 @import '../../../scss/styles.scss';
 
-.icon--upload {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--upload {
+    height: $baseline;
+    width: $baseline;
 
-  .fill {
-    fill: var(--theme-elevation-800);
-    stroke: none;
+    .fill {
+      fill: var(--theme-elevation-800);
+      stroke: none;
+    }
   }
 }
diff --git a/packages/richtext-slate/src/field/index.scss b/packages/richtext-slate/src/field/index.scss
index 51ec4eb07..f5247cd81 100644
--- a/packages/richtext-slate/src/field/index.scss
+++ b/packages/richtext-slate/src/field/index.scss
@@ -1,212 +1,213 @@
 @import '../scss/styles.scss';
-
-.rich-text {
-  margin-bottom: base(2);
-  display: flex;
-  flex-direction: column;
-  isolation: isolate;
-
-  &__toolbar {
-    @include blur-bg(var(--theme-elevation-0));
-    margin-bottom: $baseline;
-    border: $style-stroke-width-s solid var(--theme-elevation-150);
-    position: sticky;
-    z-index: 1;
-    top: var(--doc-controls-height);
-  }
-
-  &__toolbar-wrap {
-    padding: base(0.25);
+@layer payload-default {
+  .rich-text {
+    margin-bottom: base(2);
     display: flex;
-    flex-wrap: wrap;
-    align-items: stretch;
-    position: relative;
-    z-index: 1;
+    flex-direction: column;
+    isolation: isolate;
 
-    &:after {
-      content: ' ';
-      opacity: 0.8;
-      position: absolute;
-      top: calc(100% + 1px);
-      background: linear-gradient(var(--theme-elevation-0), transparent);
-      display: block;
-      left: -1px;
-      right: -1px;
-      height: base(1);
-    }
-  }
-
-  &__editor {
-    font-family: var(--font-serif);
-    font-size: base(0.8);
-    line-height: 1.5;
-
-    *[data-slate-node='element'] {
-      margin-top: 0.75em;
-      position: relative;
-      line-height: 1.5;
-      letter-spacing: normal;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-weight: 700;
-      letter-spacing: normal;
-    }
-
-    h1[data-slate-node='element'] {
-      font-size: base(1.4);
-      margin-block: 0.5em 0.4em;
-      line-height: base(1.2);
-      letter-spacing: normal;
-    }
-
-    h2[data-slate-node='element'] {
-      font-size: base(1.25);
-      margin-block: 0.55em 0.4em;
-      line-height: base(1.2);
-      letter-spacing: normal;
-    }
-
-    h3[data-slate-node='element'] {
-      font-size: base(1.1);
-      margin-block: 0.6em 0.4em;
-      line-height: base(1.3);
-      letter-spacing: normal;
-    }
-
-    h4[data-slate-node='element'] {
-      font-size: base(1);
-      margin-block: 0.65em 0.4em;
-      line-height: base(1.4);
-      letter-spacing: normal;
-    }
-
-    h5[data-slate-node='element'] {
-      font-size: base(0.9);
-      margin-block: 0.7em 0.4em;
-      line-height: base(1.5);
-      letter-spacing: normal;
-    }
-
-    h6[data-slate-node='element'] {
-      font-size: base(0.8);
-      margin-block: 0.75em 0.4em;
-      line-height: base(1.5);
-    }
-  }
-
-  &--gutter {
-    .rich-text__editor {
-      padding-left: $baseline;
-      border-left: 1px solid var(--theme-elevation-100);
-    }
-  }
-
-  &__input {
-    min-height: base(10);
-  }
-
-  &__wrap {
-    width: 100%;
-    position: relative;
-  }
-
-  &__wrapper {
-    width: 100%;
-  }
-
-  &--read-only {
-    .rich-text__editor {
-      background: var(--theme-elevation-200);
-      color: var(--theme-elevation-450);
-      padding: base(0.5);
-
-      .popup button {
-        display: none;
-      }
-    }
-
-    .rich-text__toolbar {
-      pointer-events: none;
-      position: relative;
-      top: 0;
-
-      &::after {
-        content: ' ';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: var(--theme-elevation-200);
-        opacity: 0.85;
-        z-index: 2;
-        backdrop-filter: unset;
-      }
-    }
-  }
-
-  &__button {
-    @extend %btn-reset;
-    padding: base(0.25);
-
-    svg {
-      @include color-svg(var(--theme-elevation-800));
-      width: base(0.75);
-      height: base(0.75);
-    }
-
-    &:hover {
-      background-color: var(--theme-elevation-100);
-    }
-
-    &__button--active,
-    &__button--active:hover {
-      background-color: var(--theme-elevation-150);
-    }
-  }
-
-  &__drawerIsOpen {
-    top: base(1);
-  }
-
-  @include mid-break {
     &__toolbar {
-      top: base(3);
+      @include blur-bg(var(--theme-elevation-0));
+      margin-bottom: $baseline;
+      border: $style-stroke-width-s solid var(--theme-elevation-150);
+      position: sticky;
+      z-index: 1;
+      top: var(--doc-controls-height);
+    }
+
+    &__toolbar-wrap {
+      padding: base(0.25);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: stretch;
+      position: relative;
+      z-index: 1;
+
+      &:after {
+        content: ' ';
+        opacity: 0.8;
+        position: absolute;
+        top: calc(100% + 1px);
+        background: linear-gradient(var(--theme-elevation-0), transparent);
+        display: block;
+        left: -1px;
+        right: -1px;
+        height: base(1);
+      }
+    }
+
+    &__editor {
+      font-family: var(--font-serif);
+      font-size: base(0.8);
+      line-height: 1.5;
+
+      *[data-slate-node='element'] {
+        margin-top: 0.75em;
+        position: relative;
+        line-height: 1.5;
+        letter-spacing: normal;
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-weight: 700;
+        letter-spacing: normal;
+      }
+
+      h1[data-slate-node='element'] {
+        font-size: base(1.4);
+        margin-block: 0.5em 0.4em;
+        line-height: base(1.2);
+        letter-spacing: normal;
+      }
+
+      h2[data-slate-node='element'] {
+        font-size: base(1.25);
+        margin-block: 0.55em 0.4em;
+        line-height: base(1.2);
+        letter-spacing: normal;
+      }
+
+      h3[data-slate-node='element'] {
+        font-size: base(1.1);
+        margin-block: 0.6em 0.4em;
+        line-height: base(1.3);
+        letter-spacing: normal;
+      }
+
+      h4[data-slate-node='element'] {
+        font-size: base(1);
+        margin-block: 0.65em 0.4em;
+        line-height: base(1.4);
+        letter-spacing: normal;
+      }
+
+      h5[data-slate-node='element'] {
+        font-size: base(0.9);
+        margin-block: 0.7em 0.4em;
+        line-height: base(1.5);
+        letter-spacing: normal;
+      }
+
+      h6[data-slate-node='element'] {
+        font-size: base(0.8);
+        margin-block: 0.75em 0.4em;
+        line-height: base(1.5);
+      }
+    }
+
+    &--gutter {
+      .rich-text__editor {
+        padding-left: $baseline;
+        border-left: 1px solid var(--theme-elevation-100);
+      }
+    }
+
+    &__input {
+      min-height: base(10);
+    }
+
+    &__wrap {
+      width: 100%;
+      position: relative;
+    }
+
+    &__wrapper {
+      width: 100%;
+    }
+
+    &--read-only {
+      .rich-text__editor {
+        background: var(--theme-elevation-200);
+        color: var(--theme-elevation-450);
+        padding: base(0.5);
+
+        .popup button {
+          display: none;
+        }
+      }
+
+      .rich-text__toolbar {
+        pointer-events: none;
+        position: relative;
+        top: 0;
+
+        &::after {
+          content: ' ';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: var(--theme-elevation-200);
+          opacity: 0.85;
+          z-index: 2;
+          backdrop-filter: unset;
+        }
+      }
+    }
+
+    &__button {
+      @extend %btn-reset;
+      padding: base(0.25);
+
+      svg {
+        @include color-svg(var(--theme-elevation-800));
+        width: base(0.75);
+        height: base(0.75);
+      }
+
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+
+      &__button--active,
+      &__button--active:hover {
+        background-color: var(--theme-elevation-150);
+      }
     }
 
     &__drawerIsOpen {
       top: base(1);
     }
+
+    @include mid-break {
+      &__toolbar {
+        top: base(3);
+      }
+
+      &__drawerIsOpen {
+        top: base(1);
+      }
+    }
   }
-}
 
-[data-slate-node='element'] {
-  margin-bottom: base(0.25);
-}
+  [data-slate-node='element'] {
+    margin-bottom: base(0.25);
+  }
 
-html[data-theme='light'] {
-  .rich-text {
-    &.error {
-      .rich-text__editor,
-      .rich-text__toolbar {
-        @include lightInputError;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .rich-text {
-    &.error {
-      .rich-text__editor,
-      .rich-text__toolbar {
-        @include darkInputError;
+  html[data-theme='light'] {
+    .rich-text {
+      &.error {
+        .rich-text__editor,
+        .rich-text__toolbar {
+          @include lightInputError;
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .rich-text {
+      &.error {
+        .rich-text__editor,
+        .rich-text__toolbar {
+          @include darkInputError;
+        }
       }
     }
   }
diff --git a/packages/richtext-slate/src/scss/app.scss b/packages/richtext-slate/src/scss/app.scss
index 90254443b..b59af595d 100644
--- a/packages/richtext-slate/src/scss/app.scss
+++ b/packages/richtext-slate/src/scss/app.scss
@@ -1,203 +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);
 
-: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;
 
-  --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;
+    --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;
 
-    ::selection {
-      color: var(--color-base-1000);
+    --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);
     }
 
-    ::-moz-selection {
-      color: var(--color-base-1000);
+    @include small-break {
+      --gutter-h: #{base(0.8)};
+      --spacing-view-bottom: calc(var(--base) * 2);
+      --nav-width: 100vw;
     }
   }
 
-  @include mid-break {
-    font-size: 12px;
+  /////////////////////////////
+  // GLOBAL STYLES
+  /////////////////////////////
+
+  * {
+    box-sizing: border-box;
   }
-}
 
-html,
-body,
-#app {
-  height: 100%;
-}
+  html {
+    @extend %body;
+    background: var(--theme-bg);
+    -webkit-font-smoothing: antialiased;
 
-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;
-}
+    &[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 {
-  background: var(--color-success-250);
-  color: var(--theme-base-800);
-}
+      ::selection {
+        color: var(--color-base-1000);
+      }
 
-::-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;
+      ::-moz-selection {
+        color: var(--color-base-1000);
+      }
+    }
+
+    @include mid-break {
+      font-size: 12px;
     }
-    outline: none;
   }
 
-  &:active {
-    opacity: 0.7;
-    outline: none;
+  html,
+  body,
+  #app {
+    height: 100%;
   }
-}
 
-svg {
-  vertical-align: middle;
-}
+  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;
+  }
 
-dialog {
-  width: 100%;
-  border: 0;
-  padding: 0;
-  color: currentColor;
-}
+  ::selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-.payload__modal-item {
-  min-height: 100%;
-  background: transparent;
-}
+  ::-moz-selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-.payload__modal-container--enterDone {
-  overflow: auto;
-}
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
 
-.payload__modal-item--enter,
-.payload__modal-item--enterDone {
-  z-index: var(--z-modal);
-}
+  h1 {
+    @extend %h1;
+  }
 
-// @import '~payload-user-css'; TODO: re-enable this
+  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
+}
diff --git a/packages/richtext-slate/src/scss/colors.scss b/packages/richtext-slate/src/scss/colors.scss
index 42cea0585..1eaa88cb0 100644
--- a/packages/richtext-slate/src/scss/colors.scss
+++ b/packages/richtext-slate/src/scss/colors.scss
@@ -1,269 +1,271 @@
-: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);
+@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-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-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-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);
+    --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-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-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-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-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);
+    --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);
+  }
 }
diff --git a/packages/richtext-slate/src/scss/resets.scss b/packages/richtext-slate/src/scss/resets.scss
index eeda892c2..e73efa9c0 100644
--- a/packages/richtext-slate/src/scss/resets.scss
+++ b/packages/richtext-slate/src/scss/resets.scss
@@ -1,10 +1,12 @@
-%btn-reset {
-  border: 0;
-  background: none;
-  box-shadow: none;
-  border-radius: 0;
-  padding: 0;
-  color: currentColor;
+@layer payload-default {
+  %btn-reset {
+    border: 0;
+    background: none;
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0;
+    color: currentColor;
+  }
 }
 
 @mixin btn-reset {
diff --git a/packages/richtext-slate/src/scss/toastify.scss b/packages/richtext-slate/src/scss/toastify.scss
index a5bf4c35f..3c915f788 100644
--- a/packages/richtext-slate/src/scss/toastify.scss
+++ b/packages/richtext-slate/src/scss/toastify.scss
@@ -1,59 +1,60 @@
 @import 'vars';
 @import 'queries';
-
-.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 {
+@layer payload-default {
+  .Toastify {
     .Toastify__toast-container {
-      left: $baseline;
-      right: $baseline;
+      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;
+      }
     }
   }
 }
diff --git a/packages/richtext-slate/src/scss/toasts.scss b/packages/richtext-slate/src/scss/toasts.scss
index 116845ac3..d40a51c4d 100644
--- a/packages/richtext-slate/src/scss/toasts.scss
+++ b/packages/richtext-slate/src/scss/toasts.scss
@@ -1,140 +1,141 @@
 @import './styles.scss';
+@layer payload-default {
+  .payload-toast-container {
+    padding: 0;
+    margin: 0;
 
-.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;
 
-  .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);
+      }
 
-    svg {
-      width: base(0.8);
-      height: base(0.8);
-    }
+      &:hover {
+        color: var(--theme-elevation-250);
+        background: none;
+      }
 
-    &: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;
+      [dir='RTL'] & {
+        right: unset;
+        left: 0.5rem;
       }
     }
 
-    &[data-expanded='true'] {
-      .toast-content {
-        opacity: 1;
-      }
+    .toast-title {
+      line-height: base(1);
+      margin-right: base(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 {
+    .payload-toast-item {
+      padding: base(0.8);
       color: var(--theme-elevation-800);
-      border-color: var(--theme-elevation-250);
-      background-color: var(--theme-elevation-100);
+      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);
 
-      .payload-toast-close-button {
-        color: var(--theme-elevation-600);
+      .toast-content {
+        transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        width: 100%;
+      }
 
-        &:hover {
-          color: var(--theme-elevation-250);
+      &[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);
+          }
         }
       }
     }
diff --git a/packages/richtext-slate/src/scss/type.scss b/packages/richtext-slate/src/scss/type.scss
index 997e43e24..9fe3e34be 100644
--- a/packages/richtext-slate/src/scss/type.scss
+++ b/packages/richtext-slate/src/scss/type.scss
@@ -4,106 +4,107 @@
 /////////////////////////////
 // HEADINGS
 /////////////////////////////
-
-%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);
+@layer payload-default {
+  %h1,
+  %h2,
+  %h3,
+  %h4,
+  %h5,
+  %h6 {
+    font-family: var(--font-body);
+    font-weight: 500;
   }
-}
 
-%h2 {
-  margin: 0;
-  font-size: base(1.3);
-  line-height: base(1.6);
+  %h1 {
+    margin: 0;
+    font-size: base(1.6);
+    line-height: base(1.8);
 
-  @include small-break {
-    font-size: base(0.85);
+    @include small-break {
+      letter-spacing: -0.5px;
+      font-size: base(1.25);
+    }
   }
-}
 
-%h3 {
-  margin: 0;
-  font-size: base(1);
-  line-height: base(1.2);
+  %h2 {
+    margin: 0;
+    font-size: base(1.3);
+    line-height: base(1.6);
 
-  @include small-break {
-    font-size: base(0.65);
-    line-height: 1.25;
+    @include small-break {
+      font-size: base(0.85);
+    }
   }
-}
 
-%h4 {
-  margin: 0;
-  font-size: base(0.8);
-  line-height: base(1);
-  letter-spacing: -0.375px;
-}
+  %h3 {
+    margin: 0;
+    font-size: base(1);
+    line-height: base(1.2);
 
-%h5 {
-  margin: 0;
-  font-size: base(0.65);
-  line-height: base(0.8);
-}
+    @include small-break {
+      font-size: base(0.65);
+      line-height: 1.25;
+    }
+  }
 
-%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);
+  %h4 {
+    margin: 0;
+    font-size: base(0.8);
     line-height: base(1);
+    letter-spacing: -0.375px;
   }
 
-  @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);
+  %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);
+    }
   }
 }
diff --git a/packages/ui/src/elements/AddNewRelation/index.scss b/packages/ui/src/elements/AddNewRelation/index.scss
index c22d4b26b..d2d699c08 100644
--- a/packages/ui/src/elements/AddNewRelation/index.scss
+++ b/packages/ui/src/elements/AddNewRelation/index.scss
@@ -1,42 +1,44 @@
 @import '../../scss/styles.scss';
 
-.relationship-add-new {
-  display: flex;
-  align-items: stretch;
-
-  .popup__trigger-wrap {
+@layer payload-default {
+  .relationship-add-new {
     display: flex;
     align-items: stretch;
-    height: 100%;
-  }
 
-  &__add-button:not(.relationship-add-new__add-button--unstyled),
-  &__add-button:not(.relationship-add-new__add-button--unstyled).doc-drawer__toggler {
-    @include formInput;
-    margin: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    position: relative;
-    height: 100%;
-    margin-left: -1px;
-    display: flex;
-    padding: 0 base(0.5);
-    align-items: center;
-    display: flex;
-    cursor: pointer;
-  }
+    .popup__trigger-wrap {
+      display: flex;
+      align-items: stretch;
+      height: 100%;
+    }
 
-  &__add-button {
-    margin: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    position: relative;
-    height: 100%;
-    margin-left: -1px;
-    display: flex;
-    padding: 0 base(0.5);
-    align-items: center;
-    display: flex;
-    cursor: pointer;
+    &__add-button:not(.relationship-add-new__add-button--unstyled),
+    &__add-button:not(.relationship-add-new__add-button--unstyled).doc-drawer__toggler {
+      @include formInput;
+      margin: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      position: relative;
+      height: 100%;
+      margin-left: -1px;
+      display: flex;
+      padding: 0 base(0.5);
+      align-items: center;
+      display: flex;
+      cursor: pointer;
+    }
+
+    &__add-button {
+      margin: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      position: relative;
+      height: 100%;
+      margin-left: -1px;
+      display: flex;
+      padding: 0 base(0.5);
+      align-items: center;
+      display: flex;
+      cursor: pointer;
+    }
   }
 }
diff --git a/packages/ui/src/elements/AppHeader/index.scss b/packages/ui/src/elements/AppHeader/index.scss
index 4be3584bf..22150e8e1 100644
--- a/packages/ui/src/elements/AppHeader/index.scss
+++ b/packages/ui/src/elements/AppHeader/index.scss
@@ -1,194 +1,196 @@
 @import '../../scss/styles.scss';
 
-.app-header {
-  position: relative;
-  width: 100%;
-  height: var(--app-header-height);
-  z-index: var(--z-modal);
-
-  &__mobile-nav-toggler {
-    display: none;
-  }
-
-  // place the localizer outside the `overflow: hidden` container so that the popup is visible
-  // this means we need to use a placeholder div so that the space is retained in the DOM
-  [dir='rtl'] &__localizer {
-    right: unset;
-    left: base(4.5);
-  }
-  &__localizer.localizer {
-    position: absolute;
-    top: 50%;
-    right: base(4.5);
-    transform: translate3d(0, -50%, 0);
-  }
-
-  &__localizer-spacing {
-    visibility: hidden;
-  }
-
-  &__bg {
-    opacity: 0;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
-
-  &--show-bg {
-    opacity: 1;
-  }
-
-  &__content {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding: 0 var(--gutter-h);
+@layer payload-default {
+  .app-header {
     position: relative;
-    flex-grow: 1;
-  }
-
-  &__wrapper {
-    display: flex;
-    gap: calc(var(--base) / 2);
-    align-items: center;
-    height: 100%;
-    flex-grow: 1;
-    justify-content: space-between;
     width: 100%;
-  }
+    height: var(--app-header-height);
+    z-index: var(--z-modal);
 
-  &__account {
-    position: relative;
+    &__mobile-nav-toggler {
+      display: none;
+    }
 
-    &:focus:not(:focus-visible) {
+    // place the localizer outside the `overflow: hidden` container so that the popup is visible
+    // this means we need to use a placeholder div so that the space is retained in the DOM
+    [dir='rtl'] &__localizer {
+      right: unset;
+      left: base(4.5);
+    }
+    &__localizer.localizer {
+      position: absolute;
+      top: 50%;
+      right: base(4.5);
+      transform: translate3d(0, -50%, 0);
+    }
+
+    &__localizer-spacing {
+      visibility: hidden;
+    }
+
+    &__bg {
+      opacity: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    &--show-bg {
       opacity: 1;
     }
 
-    // Use a pseudo element for the accessability so that it doesn't take up DOM space
-    // Also because the parent element has `overflow: hidden` which would clip an outline
-    &:focus-visible {
-      outline: none;
+    &__content {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      padding: 0 var(--gutter-h);
+      position: relative;
+      flex-grow: 1;
+    }
 
-      &::after {
-        content: '';
-        border: var(--accessibility-outline);
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
+    &__wrapper {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      align-items: center;
+      height: 100%;
+      flex-grow: 1;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    &__account {
+      position: relative;
+
+      &:focus:not(:focus-visible) {
+        opacity: 1;
+      }
+
+      // Use a pseudo element for the accessability so that it doesn't take up DOM space
+      // Also because the parent element has `overflow: hidden` which would clip an outline
+      &:focus-visible {
+        outline: none;
+
+        &::after {
+          content: '';
+          border: var(--accessibility-outline);
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          pointer-events: none;
+        }
       }
     }
-  }
 
-  &__controls-wrapper {
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    overflow: hidden;
-    width: 100%;
-  }
-
-  &__step-nav-wrapper {
-    flex-grow: 0;
-    overflow: auto;
-    display: flex;
-    width: 100%;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  &__actions-wrapper {
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    gap: calc(var(--base) / 2);
-    margin-right: var(--base);
-  }
-
-  &__gradient-placeholder {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: var(--base);
-    height: var(--base);
-    background: linear-gradient(to right, transparent, var(--theme-bg));
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--base) / 2);
-    flex-shrink: 0;
-    max-width: 600px;
-    overflow: auto;
-    white-space: nowrap;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  &__last-action {
-    margin-right: var(--base);
-  }
-
-  @include large-break {
-    &__actions {
-      max-width: 500px;
-    }
-  }
-
-  @include mid-break {
-    &__gradient-placeholder {
-      right: var(--base);
+    &__controls-wrapper {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      overflow: hidden;
+      width: 100%;
     }
 
-    &__actions {
-      max-width: 300px;
-      margin-right: var(--base);
-    }
-  }
+    &__step-nav-wrapper {
+      flex-grow: 0;
+      overflow: auto;
+      display: flex;
+      width: 100%;
 
-  @include small-break {
-    &__localizer.localizer {
-      right: base(2);
-    }
-
-    &--nav-open {
-      .app-header__localizer {
+      &::-webkit-scrollbar {
         display: none;
       }
     }
 
-    &__mobile-nav-toggler {
+    &__actions-wrapper {
+      position: relative;
+      overflow: hidden;
       display: flex;
       align-items: center;
-
-      &.nav-toggler--is-open {
-        opacity: 0.5;
-      }
-    }
-
-    &__step-header {
-      // TODO: overflow the step header instead of hide it
-      display: none;
+      gap: calc(var(--base) / 2);
+      margin-right: var(--base);
     }
 
     &__gradient-placeholder {
+      position: absolute;
+      top: 0;
       right: 0;
+      width: var(--base);
+      height: var(--base);
+      background: linear-gradient(to right, transparent, var(--theme-bg));
     }
 
     &__actions {
-      max-width: 150px;
-      margin-right: 0;
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) / 2);
+      flex-shrink: 0;
+      max-width: 600px;
+      overflow: auto;
+      white-space: nowrap;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    &__last-action {
+      margin-right: var(--base);
+    }
+
+    @include large-break {
+      &__actions {
+        max-width: 500px;
+      }
+    }
+
+    @include mid-break {
+      &__gradient-placeholder {
+        right: var(--base);
+      }
+
+      &__actions {
+        max-width: 300px;
+        margin-right: var(--base);
+      }
+    }
+
+    @include small-break {
+      &__localizer.localizer {
+        right: base(2);
+      }
+
+      &--nav-open {
+        .app-header__localizer {
+          display: none;
+        }
+      }
+
+      &__mobile-nav-toggler {
+        display: flex;
+        align-items: center;
+
+        &.nav-toggler--is-open {
+          opacity: 0.5;
+        }
+      }
+
+      &__step-header {
+        // TODO: overflow the step header instead of hide it
+        display: none;
+      }
+
+      &__gradient-placeholder {
+        right: 0;
+      }
+
+      &__actions {
+        max-width: 150px;
+        margin-right: 0;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/ArrayAction/index.scss b/packages/ui/src/elements/ArrayAction/index.scss
index 57d1fff24..10b8e3b07 100644
--- a/packages/ui/src/elements/ArrayAction/index.scss
+++ b/packages/ui/src/elements/ArrayAction/index.scss
@@ -1,32 +1,34 @@
 @import '../../scss/styles.scss';
 
-.array-actions {
-  &__button {
-    @extend %btn-reset;
-    cursor: pointer;
-    border-radius: 100px;
+@layer payload-default {
+  .array-actions {
+    &__button {
+      @extend %btn-reset;
+      cursor: pointer;
+      border-radius: 100px;
 
-    &:hover {
-      background: var(--theme-elevation-0);
+      &:hover {
+        background: var(--theme-elevation-0);
+      }
     }
-  }
 
-  &__actions {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
+    &__actions {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
 
-  &__action {
-    display: flex;
-    gap: calc(var(--base) / 2);
-    align-items: center;
+    &__action {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      align-items: center;
 
-    svg {
-      position: relative;
+      svg {
+        position: relative;
 
-      .stroke {
-        stroke-width: 1px;
+        .stroke {
+          stroke-width: 1px;
+        }
       }
     }
   }
diff --git a/packages/ui/src/elements/Autosave/index.scss b/packages/ui/src/elements/Autosave/index.scss
index b51a57d1b..bd769aa4c 100644
--- a/packages/ui/src/elements/Autosave/index.scss
+++ b/packages/ui/src/elements/Autosave/index.scss
@@ -1,5 +1,7 @@
 @import '../../scss/styles.scss';
 
-.autosave {
-  white-space: nowrap;
+@layer payload-default {
+  .autosave {
+    white-space: nowrap;
+  }
 }
diff --git a/packages/ui/src/elements/Banner/index.scss b/packages/ui/src/elements/Banner/index.scss
index 5e1a9a326..c47077598 100644
--- a/packages/ui/src/elements/Banner/index.scss
+++ b/packages/ui/src/elements/Banner/index.scss
@@ -1,71 +1,73 @@
 @import '../../scss/styles.scss';
 
-.banner {
-  font-size: 1rem;
-  line-height: base(1);
-  border: 0;
-  vertical-align: middle;
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-m;
-  padding: base(0.5);
-  margin-bottom: $baseline;
+@layer payload-default {
+  .banner {
+    font-size: 1rem;
+    line-height: base(1);
+    border: 0;
+    vertical-align: middle;
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-m;
+    padding: base(0.5);
+    margin-bottom: $baseline;
 
-  &--has-action {
-    cursor: pointer;
-    text-decoration: none;
-  }
-
-  &--has-icon {
-    display: flex;
-
-    svg {
-      display: block;
-    }
-  }
-
-  &--type-default {
-    &.button--has-action {
-      &:hover {
-        background: var(--theme-elevation-900);
-      }
-
-      &:active {
-        background: var(--theme-elevation-950);
-      }
-    }
-  }
-
-  &--type-error {
-    background: var(--theme-error-100);
-    color: var(--theme-error-600);
-
-    svg {
-      @include color-svg(var(--theme-error-600));
+    &--has-action {
+      cursor: pointer;
+      text-decoration: none;
     }
 
-    &.button--has-action {
-      &:hover {
-        background: var(--theme-error-200);
-      }
+    &--has-icon {
+      display: flex;
 
-      &:active {
-        background: var(--theme-error-300);
+      svg {
+        display: block;
       }
     }
-  }
 
-  &--type-success {
-    background: var(--theme-success-100);
-    color: var(--theme-success-600);
+    &--type-default {
+      &.button--has-action {
+        &:hover {
+          background: var(--theme-elevation-900);
+        }
 
-    &.button--has-action {
-      &:hover {
-        background: var(--theme-success-200);
+        &:active {
+          background: var(--theme-elevation-950);
+        }
+      }
+    }
+
+    &--type-error {
+      background: var(--theme-error-100);
+      color: var(--theme-error-600);
+
+      svg {
+        @include color-svg(var(--theme-error-600));
       }
 
-      &:active {
-        background: var(--theme-success-200);
+      &.button--has-action {
+        &:hover {
+          background: var(--theme-error-200);
+        }
+
+        &:active {
+          background: var(--theme-error-300);
+        }
+      }
+    }
+
+    &--type-success {
+      background: var(--theme-success-100);
+      color: var(--theme-success-600);
+
+      &.button--has-action {
+        &:hover {
+          background: var(--theme-success-200);
+        }
+
+        &:active {
+          background: var(--theme-success-200);
+        }
       }
     }
   }
diff --git a/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss b/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss
index 6ea0e24d3..5f09ceb7c 100644
--- a/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss
+++ b/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss
@@ -1,59 +1,61 @@
 @import '../../../scss/styles.scss';
 
-.bulk-upload--actions-bar {
-  display: flex;
-  padding-inline: var(--gutter-h);
-  align-items: center;
-  border-bottom: 1px solid var(--theme-border-color);
-  position: sticky;
-  z-index: 1;
-  top: 0;
-  background-color: var(--theme-bg);
-  height: var(--doc-controls-height);
-
-  &__navigation {
+@layer payload-default {
+  .bulk-upload--actions-bar {
     display: flex;
-    gap: var(--base);
+    padding-inline: var(--gutter-h);
     align-items: center;
-    width: 100%;
-  }
+    border-bottom: 1px solid var(--theme-border-color);
+    position: sticky;
+    z-index: 1;
+    top: 0;
+    background-color: var(--theme-bg);
+    height: var(--doc-controls-height);
 
-  &__locationText {
-    font-variant-numeric: tabular-nums;
-    margin: 0;
-  }
-
-  &__controls {
-    display: flex;
-    gap: calc(var(--base) / 2);
-
-    .btn {
-      background-color: var(--theme-elevation-100);
-      width: calc(var(--base) * 1.2);
-      height: calc(var(--base) * 1.2);
-
-      &:hover {
-        background-color: var(--theme-elevation-200);
-      }
-
-      &__label {
-        display: flex;
-      }
-    }
-  }
-
-  &__buttons {
-    display: flex;
-    gap: var(--base);
-    margin-left: auto;
-  }
-
-  @include mid-break {
     &__navigation {
-      justify-content: space-between;
+      display: flex;
+      gap: var(--base);
+      align-items: center;
+      width: 100%;
     }
-    &__saveButtons {
-      display: none;
+
+    &__locationText {
+      font-variant-numeric: tabular-nums;
+      margin: 0;
+    }
+
+    &__controls {
+      display: flex;
+      gap: calc(var(--base) / 2);
+
+      .btn {
+        background-color: var(--theme-elevation-100);
+        width: calc(var(--base) * 1.2);
+        height: calc(var(--base) * 1.2);
+
+        &:hover {
+          background-color: var(--theme-elevation-200);
+        }
+
+        &__label {
+          display: flex;
+        }
+      }
+    }
+
+    &__buttons {
+      display: flex;
+      gap: var(--base);
+      margin-left: auto;
+    }
+
+    @include mid-break {
+      &__navigation {
+        justify-content: space-between;
+      }
+      &__saveButtons {
+        display: none;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/BulkUpload/AddFilesView/index.scss b/packages/ui/src/elements/BulkUpload/AddFilesView/index.scss
index d953c728b..afb4bde4f 100644
--- a/packages/ui/src/elements/BulkUpload/AddFilesView/index.scss
+++ b/packages/ui/src/elements/BulkUpload/AddFilesView/index.scss
@@ -1,28 +1,30 @@
-.bulk-upload--add-files {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  &__dropArea {
+@layer payload-default {
+  .bulk-upload--add-files {
     height: 100%;
-    padding: calc(var(--base) * 2) var(--gutter-h);
-  }
-
-  .dropzone {
-    flex-direction: column;
-    justify-content: center;
     display: flex;
-    gap: var(--base);
-    background-color: var(--theme-elevation-50);
+    flex-direction: column;
 
-    p {
+    &__dropArea {
+      height: 100%;
+      padding: calc(var(--base) * 2) var(--gutter-h);
+    }
+
+    .dropzone {
+      flex-direction: column;
+      justify-content: center;
+      display: flex;
+      gap: var(--base);
+      background-color: var(--theme-elevation-50);
+
+      p {
+        margin: 0;
+      }
+    }
+
+    &__dragAndDropText {
       margin: 0;
+      text-transform: lowercase;
+      align-self: center;
     }
   }
-
-  &__dragAndDropText {
-    margin: 0;
-    text-transform: lowercase;
-    align-self: center;
-  }
 }
diff --git a/packages/ui/src/elements/BulkUpload/AddingFilesView/index.scss b/packages/ui/src/elements/BulkUpload/AddingFilesView/index.scss
index c7e3428e1..8612ab941 100644
--- a/packages/ui/src/elements/BulkUpload/AddingFilesView/index.scss
+++ b/packages/ui/src/elements/BulkUpload/AddingFilesView/index.scss
@@ -1,23 +1,25 @@
 @import '../../../scss/styles.scss';
 
-.bulk-upload--file-manager {
-  display: flex;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-
-  &__editView {
-    flex-grow: 1;
+@layer payload-default {
+  .bulk-upload--file-manager {
+    display: flex;
     height: 100%;
-    max-height: 100%;
-    overflow: auto;
-  }
-
-  @include mid-break {
-    flex-direction: column-reverse;
+    width: 100%;
+    overflow: hidden;
 
     &__editView {
       flex-grow: 1;
+      height: 100%;
+      max-height: 100%;
+      overflow: auto;
+    }
+
+    @include mid-break {
+      flex-direction: column-reverse;
+
+      &__editView {
+        flex-grow: 1;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/BulkUpload/DrawerCloseButton/index.scss b/packages/ui/src/elements/BulkUpload/DrawerCloseButton/index.scss
index 993de8845..3b088ecfb 100644
--- a/packages/ui/src/elements/BulkUpload/DrawerCloseButton/index.scss
+++ b/packages/ui/src/elements/BulkUpload/DrawerCloseButton/index.scss
@@ -1,27 +1,29 @@
-.drawer-close-button {
-  --size: calc(var(--base) * 1.2);
-  border: 0;
-  background-color: transparent;
-  padding: 0;
-  cursor: pointer;
-  overflow: hidden;
-  direction: ltr;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--size);
-  height: var(--size);
+@layer payload-default {
+  .drawer-close-button {
+    --size: calc(var(--base) * 1.2);
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    cursor: pointer;
+    overflow: hidden;
+    direction: ltr;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--size);
+    height: var(--size);
 
-  svg {
-    margin: calc(-1 * var(--size));
-    width: calc(var(--size) * 2);
-    height: calc(var(--size) * 2);
+    svg {
+      margin: calc(-1 * var(--size));
+      width: calc(var(--size) * 2);
+      height: calc(var(--size) * 2);
 
-    position: relative;
+      position: relative;
 
-    .stroke {
-      stroke-width: 1px;
-      vector-effect: non-scaling-stroke;
+      .stroke {
+        stroke-width: 1px;
+        vector-effect: non-scaling-stroke;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/BulkUpload/EditForm/index.scss b/packages/ui/src/elements/BulkUpload/EditForm/index.scss
index 943eb5ae1..a1cab90a7 100644
--- a/packages/ui/src/elements/BulkUpload/EditForm/index.scss
+++ b/packages/ui/src/elements/BulkUpload/EditForm/index.scss
@@ -1,9 +1,11 @@
 @import '../../../scss/styles.scss';
 
-.collection-edit {
-  width: 100%;
+@layer payload-default {
+  .collection-edit {
+    width: 100%;
 
-  &__form {
-    height: auto;
+    &__form {
+      height: auto;
+    }
   }
 }
diff --git a/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss b/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss
index b17a358c9..f4147d182 100644
--- a/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss
+++ b/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss
@@ -1,277 +1,279 @@
 @import '../../../scss/styles.scss';
 
-.file-selections {
-  --file-gutter-h: calc(var(--gutter-h) / 4);
-  border-right: 1px solid var(--theme-border-color);
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  width: 300px;
-  overflow: auto;
-  max-height: 100%;
-
-  &__header {
-    position: sticky;
-    top: 0;
-    margin-top: var(--base);
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    background: var(--theme-bg);
-    flex-wrap: wrap;
-
-    p {
-      margin: 0;
-    }
-  }
-
-  &__headerTopRow {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--base);
-    width: 100%;
-    padding-block: var(--base);
-    padding-inline: var(--file-gutter-h);
-  }
-
-  &__header__text {
+@layer payload-default {
+  .file-selections {
+    --file-gutter-h: calc(var(--gutter-h) / 4);
+    border-right: 1px solid var(--theme-border-color);
+    padding: 0;
     display: flex;
     flex-direction: column;
-
-    .error-pill {
-      align-self: flex-start;
-    }
-  }
-
-  &__filesContainer {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 4);
-    margin-top: calc(var(--base) / 2);
-    width: 100%;
-    padding-inline: var(--file-gutter-h);
-
-    .shimmer-effect {
-      border-radius: var(--style-radius-m);
-    }
-  }
-
-  &__fileRowContainer {
-    --rowPadding: calc(var(--base) / 4);
-    position: relative;
-    &:last-child {
-      margin-bottom: calc(var(--base) / 4);
-    }
-  }
-
-  &__fileRow {
-    @include btn-reset;
-    display: flex;
-    padding: var(--rowPadding);
-    align-items: center;
-    gap: calc(var(--base) / 2);
-    border-radius: var(--style-radius-m);
-    max-width: 100%;
-    cursor: pointer;
-    width: 100%;
-
-    &:hover {
-      background-color: var(--theme-elevation-100);
-    }
-
-    .thumbnail {
-      width: base(1.2);
-      height: base(1.2);
-      flex-shrink: 0;
-      object-fit: cover;
-      border-radius: var(--style-radius-s);
-    }
-
-    p {
-      margin: 0;
-    }
-  }
-
-  &__fileDetails {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  &__fileRowContainer--active {
-    .file-selections__fileRow {
-      background-color: var(--theme-elevation-100);
-    }
-
-    .file-selections__remove {
-      .icon--x {
-        opacity: 1;
-      }
-    }
-  }
-
-  &__fileRowContainer--error {
-    .file-selections__fileRow {
-      background-color: var(--theme-error-100);
-    }
-
-    &.file-selections__fileRowContainer--active .file-selections__fileRow,
-    .file-selections__fileRow:hover {
-      background-color: var(--theme-error-200);
-    }
-
-    .file-selections__remove--overlay:hover {
-      background-color: var(--theme-error-50);
-
-      .icon--x {
-        opacity: 1;
-      }
-    }
-  }
-
-  &__errorCount {
-    margin-left: auto;
-    position: absolute;
-    transform: translate(50%, -50%);
-    top: 0;
-    right: 0;
-  }
-
-  &__fileName {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &__fileSize {
-    font-size: calc(var(--base) / 2);
-    color: var(--theme-elvation-400);
-    flex-shrink: 0;
-  }
-
-  &__remove {
-    @include btn-reset;
-    margin: 0;
-    margin-left: auto;
-
-    .icon--x {
-      opacity: 0.75;
-    }
-  }
-
-  &__remove--underlay {
-    pointer-events: none;
-    opacity: 0;
-  }
-
-  &__remove--overlay {
-    position: absolute;
-    transform: translateY(-50%);
-    top: 50%;
-    bottom: 50%;
-    right: var(--rowPadding);
-    height: 20px;
-    border-radius: var(--style-radius-m);
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--theme-elevation-200);
-    }
-  }
-
-  &__header__actions {
-    display: flex;
-    gap: var(--base);
-  }
-
-  &__toggler {
-    display: none;
-    margin: 0;
-    padding-block: 0;
-  }
-
-  &__header__mobileDocActions {
-    display: none;
-  }
-
-  &__animateWrapper {
+    width: 300px;
     overflow: auto;
-  }
-
-  &__mobileBlur {
-    @include blur-bg;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    transition: opacity 100ms cubic-bezier(0, 0.2, 0.2, 1);
-  }
-
-  &__showingFiles {
-    .file-selections__mobileBlur {
-      opacity: 1;
-    }
-  }
-
-  @include mid-break {
-    --file-gutter-h: var(--gutter-h);
-    flex-direction: column-reverse;
-    width: 100%;
-    position: sticky;
-    bottom: 0;
-    flex-shrink: 0;
-
-    &__showingFiles {
-      z-index: 2;
-    }
-
-    &__filesContainer {
-      @include blur-bg;
-    }
-
-    &__fileRowContainer {
-      z-index: 1;
-    }
+    max-height: 100%;
 
     &__header {
-      margin-top: 0;
+      position: sticky;
+      top: 0;
+      margin-top: var(--base);
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      background: var(--theme-bg);
+      flex-wrap: wrap;
+
+      p {
+        margin: 0;
+      }
     }
 
     &__headerTopRow {
-      border-top: 1px solid var(--theme-border-color);
-      padding-block: calc(var(--base) * 0.8);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--base);
+      width: 100%;
+      padding-block: var(--base);
+      padding-inline: var(--file-gutter-h);
     }
 
-    &__header__mobileDocActions {
-      position: relative;
+    &__header__text {
       display: flex;
-      width: 100%;
-      padding-block: calc(var(--base) * 0.8);
-      padding-inline: var(--file-gutter-h);
-      border-top: 1px solid var(--theme-border-color);
+      flex-direction: column;
 
-      > div {
-        display: flex;
-        justify-content: flex-end;
-        width: 100%;
-        button {
-          flex: 0.5;
+      .error-pill {
+        align-self: flex-start;
+      }
+    }
+
+    &__filesContainer {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+      margin-top: calc(var(--base) / 2);
+      width: 100%;
+      padding-inline: var(--file-gutter-h);
+
+      .shimmer-effect {
+        border-radius: var(--style-radius-m);
+      }
+    }
+
+    &__fileRowContainer {
+      --rowPadding: calc(var(--base) / 4);
+      position: relative;
+      &:last-child {
+        margin-bottom: calc(var(--base) / 4);
+      }
+    }
+
+    &__fileRow {
+      @include btn-reset;
+      display: flex;
+      padding: var(--rowPadding);
+      align-items: center;
+      gap: calc(var(--base) / 2);
+      border-radius: var(--style-radius-m);
+      max-width: 100%;
+      cursor: pointer;
+      width: 100%;
+
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+
+      .thumbnail {
+        width: base(1.2);
+        height: base(1.2);
+        flex-shrink: 0;
+        object-fit: cover;
+        border-radius: var(--style-radius-s);
+      }
+
+      p {
+        margin: 0;
+      }
+    }
+
+    &__fileDetails {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    &__fileRowContainer--active {
+      .file-selections__fileRow {
+        background-color: var(--theme-elevation-100);
+      }
+
+      .file-selections__remove {
+        .icon--x {
+          opacity: 1;
         }
       }
     }
 
-    &__toggler {
-      padding-right: 0;
-      display: block;
+    &__fileRowContainer--error {
+      .file-selections__fileRow {
+        background-color: var(--theme-error-100);
+      }
+
+      &.file-selections__fileRowContainer--active .file-selections__fileRow,
+      .file-selections__fileRow:hover {
+        background-color: var(--theme-error-200);
+      }
+
+      .file-selections__remove--overlay:hover {
+        background-color: var(--theme-error-50);
+
+        .icon--x {
+          opacity: 1;
+        }
+      }
     }
 
-    .btn {
+    &__errorCount {
+      margin-left: auto;
+      position: absolute;
+      transform: translate(50%, -50%);
+      top: 0;
+      right: 0;
+    }
+
+    &__fileName {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &__fileSize {
+      font-size: calc(var(--base) / 2);
+      color: var(--theme-elvation-400);
+      flex-shrink: 0;
+    }
+
+    &__remove {
+      @include btn-reset;
       margin: 0;
+      margin-left: auto;
+
+      .icon--x {
+        opacity: 0.75;
+      }
+    }
+
+    &__remove--underlay {
+      pointer-events: none;
+      opacity: 0;
+    }
+
+    &__remove--overlay {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      bottom: 50%;
+      right: var(--rowPadding);
+      height: 20px;
+      border-radius: var(--style-radius-m);
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--theme-elevation-200);
+      }
+    }
+
+    &__header__actions {
+      display: flex;
+      gap: var(--base);
+    }
+
+    &__toggler {
+      display: none;
+      margin: 0;
+      padding-block: 0;
+    }
+
+    &__header__mobileDocActions {
+      display: none;
+    }
+
+    &__animateWrapper {
+      overflow: auto;
+    }
+
+    &__mobileBlur {
+      @include blur-bg;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      transition: opacity 100ms cubic-bezier(0, 0.2, 0.2, 1);
+    }
+
+    &__showingFiles {
+      .file-selections__mobileBlur {
+        opacity: 1;
+      }
+    }
+
+    @include mid-break {
+      --file-gutter-h: var(--gutter-h);
+      flex-direction: column-reverse;
+      width: 100%;
+      position: sticky;
+      bottom: 0;
+      flex-shrink: 0;
+
+      &__showingFiles {
+        z-index: 2;
+      }
+
+      &__filesContainer {
+        @include blur-bg;
+      }
+
+      &__fileRowContainer {
+        z-index: 1;
+      }
+
+      &__header {
+        margin-top: 0;
+      }
+
+      &__headerTopRow {
+        border-top: 1px solid var(--theme-border-color);
+        padding-block: calc(var(--base) * 0.8);
+      }
+
+      &__header__mobileDocActions {
+        position: relative;
+        display: flex;
+        width: 100%;
+        padding-block: calc(var(--base) * 0.8);
+        padding-inline: var(--file-gutter-h);
+        border-top: 1px solid var(--theme-border-color);
+
+        > div {
+          display: flex;
+          justify-content: flex-end;
+          width: 100%;
+          button {
+            flex: 0.5;
+          }
+        }
+      }
+
+      &__toggler {
+        padding-right: 0;
+        display: block;
+      }
+
+      .btn {
+        margin: 0;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/BulkUpload/Header/index.scss b/packages/ui/src/elements/BulkUpload/Header/index.scss
index 088a336fb..6fe512d7d 100644
--- a/packages/ui/src/elements/BulkUpload/Header/index.scss
+++ b/packages/ui/src/elements/BulkUpload/Header/index.scss
@@ -1,12 +1,14 @@
-.bulk-upload--drawer-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: calc(var(--base) * 2.5) var(--gutter-h);
-  height: 48px;
-  border-bottom: 1px solid var(--theme-border-color);
+@layer payload-default {
+  .bulk-upload--drawer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: calc(var(--base) * 2.5) var(--gutter-h);
+    height: 48px;
+    border-bottom: 1px solid var(--theme-border-color);
 
-  h2 {
-    margin: 0;
+    h2 {
+      margin: 0;
+    }
   }
 }
diff --git a/packages/ui/src/elements/Button/index.scss b/packages/ui/src/elements/Button/index.scss
index ccaa749ad..e9fc45402 100644
--- a/packages/ui/src/elements/Button/index.scss
+++ b/packages/ui/src/elements/Button/index.scss
@@ -1,277 +1,279 @@
 @import '../../scss/styles.scss';
 
-a.btn {
-  display: inline-block;
-}
+@layer payload-default {
+  a.btn {
+    display: inline-block;
+  }
+
+  .btn--withPopup {
+    margin-block: 24px;
+    .btn {
+      margin: 0;
+    }
+  }
 
-.btn--withPopup {
-  margin-block: 24px;
   .btn {
-    margin: 0;
-  }
-}
+    // colors
+    &--style-primary {
+      --color: var(--theme-elevation-0);
+      --bg-color: var(--theme-elevation-800);
+      --box-shadow: none;
+      --hover-bg: var(--theme-elevation-600);
+      --hover-color: var(--color);
 
-.btn {
-  // colors
-  &--style-primary {
-    --color: var(--theme-elevation-0);
-    --bg-color: var(--theme-elevation-800);
-    --box-shadow: none;
-    --hover-bg: var(--theme-elevation-600);
-    --hover-color: var(--color);
+      &.btn--disabled {
+        --bg-color: var(--theme-elevation-200);
+        --color: var(--theme-elevation-800);
+        --hover-bg: var(--bg-color);
+        --hover-color: var(--color);
+      }
+    }
 
-    &.btn--disabled {
-      --bg-color: var(--theme-elevation-200);
+    &--style-secondary {
+      --color: var(--theme-text);
+      --bg-color: transparent;
+      --box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
+      --hover-color: var(--theme-elevation-600);
+      --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
+
+      &.btn--disabled {
+        --color: var(--theme-elevation-200);
+        --box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
+        --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
+        --hover-color: var(--color);
+      }
+    }
+
+    &--style-pill {
+      --bg-color: var(--theme-elevation-150);
       --color: var(--theme-elevation-800);
-      --hover-bg: var(--bg-color);
       --hover-color: var(--color);
+      --hover-bg: var(--theme-elevation-100);
+
+      &.btn--disabled {
+        --color: var(--theme-elevation-600);
+        --hover-bg: var(--bg-color);
+        --hover-color: var(--color);
+      }
     }
   }
 
-  &--style-secondary {
-    --color: var(--theme-text);
-    --bg-color: transparent;
-    --box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
-    --hover-color: var(--theme-elevation-600);
-    --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
+  .btn--withPopup {
+    .popup-button {
+      color: var(--color, inherit);
+      background-color: var(--bg-color);
+      box-shadow: var(--box-shadow);
+      border-radius: $style-radius-m;
+      border-left: 1px solid var(--theme-bg);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      align-items: center;
 
-    &.btn--disabled {
-      --color: var(--theme-elevation-200);
-      --box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
-      --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
-      --hover-color: var(--color);
+      &:hover,
+      &:focus-visible,
+      &:focus,
+      &:active {
+        background-color: var(--hover-bg);
+        color: var(--hover-color);
+        box-shadow: var(--hover-box-shadow);
+      }
     }
   }
 
-  &--style-pill {
-    --bg-color: var(--theme-elevation-150);
-    --color: var(--theme-elevation-800);
-    --hover-color: var(--color);
-    --hover-bg: var(--theme-elevation-100);
-
-    &.btn--disabled {
-      --color: var(--theme-elevation-600);
-      --hover-bg: var(--bg-color);
-      --hover-color: var(--color);
-    }
-  }
-}
-
-.btn--withPopup {
-  .popup-button {
-    color: var(--color, inherit);
-    background-color: var(--bg-color);
-    box-shadow: var(--box-shadow);
-    border-radius: $style-radius-m;
-    border-left: 1px solid var(--theme-bg);
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    align-items: center;
-
+  .btn,
+  .btn--withPopup .btn {
     &:hover,
     &:focus-visible,
     &:focus,
     &:active {
-      background-color: var(--hover-bg);
       color: var(--hover-color);
       box-shadow: var(--hover-box-shadow);
+      background-color: var(--hover-bg);
     }
   }
-}
 
-.btn,
-.btn--withPopup .btn {
-  &:hover,
-  &:focus-visible,
-  &:focus,
-  &:active {
-    color: var(--hover-color);
-    box-shadow: var(--hover-box-shadow);
-    background-color: var(--hover-bg);
-  }
-}
-
-.btn--disabled,
-.btn--disabled .btn {
-  cursor: not-allowed;
-}
-
-.btn {
-  border-radius: $style-radius-s;
-  font-size: var(--base-body-size);
-  margin-block: base(1.2);
-  line-height: base(1.2);
-  border: 0;
-  cursor: pointer;
-  font-weight: normal;
-  text-decoration: none;
-  transition-property: border, color, box-shadow, background;
-  transition-duration: 100ms;
-  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-
-  color: var(--color, inherit);
-  background-color: var(--bg-color, transparent);
-  box-shadow: var(--box-shadow, none);
-
-  .icon {
-    @include color-svg(var(--color, currentColor));
-    width: 100%;
-    height: 100%;
+  .btn--disabled,
+  .btn--disabled .btn {
+    cursor: not-allowed;
   }
 
-  &__content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+  .btn {
+    border-radius: $style-radius-s;
+    font-size: var(--base-body-size);
+    margin-block: base(1.2);
+    line-height: base(1.2);
+    border: 0;
+    cursor: pointer;
+    font-weight: normal;
+    text-decoration: none;
+    transition-property: border, color, box-shadow, background;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
-  &__icon {
-    width: base(1.2);
-    height: base(1.2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid;
-    border-radius: 100%;
-    padding: base(0.1);
-    color: inherit;
+    color: var(--color, inherit);
+    background-color: var(--bg-color, transparent);
+    box-shadow: var(--box-shadow, none);
 
     .icon {
+      @include color-svg(var(--color, currentColor));
       width: 100%;
       height: 100%;
     }
 
-    &.btn--size-small {
-      padding: base(0.2);
+    &__content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-  }
 
-  &--withPopup {
-    display: flex;
-  }
+    &__icon {
+      width: base(1.2);
+      height: base(1.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid;
+      border-radius: 100%;
+      padding: base(0.1);
+      color: inherit;
 
-  &--has-tooltip {
-    position: relative;
-  }
+      .icon {
+        width: 100%;
+        height: 100%;
+      }
 
-  &--icon-style-without-border {
-    .btn__icon {
-      border: none;
-    }
-  }
-
-  &--icon-style-none {
-    .btn__icon {
-      border: none;
-    }
-  }
-
-  &--size-small {
-    padding: 0 base(0.4);
-
-    &.btn--icon-position-left {
-      padding-inline-start: base(0.1);
-      padding-inline-end: base(0.4);
-
-      .btn__content {
-        flex-direction: row-reverse;
+      &.btn--size-small {
+        padding: base(0.2);
       }
     }
 
-    &.btn--icon-position-right {
-      padding-inline-start: base(0.4);
-      padding-inline-end: base(0.1);
+    &--withPopup {
+      display: flex;
     }
-  }
 
-  &--size-medium {
-    padding: base(0.2) base(0.6);
+    &--has-tooltip {
+      position: relative;
+    }
 
-    &.btn--icon-position-left {
-      padding-inline-start: base(0.4);
-      padding-inline-end: base(0.6);
-
-      .btn__content {
-        gap: base(0.2);
-        flex-direction: row-reverse;
+    &--icon-style-without-border {
+      .btn__icon {
+        border: none;
       }
     }
 
-    &.btn--icon-position-right {
-      padding-inline-start: base(0.6);
-      padding-inline-end: base(0.4);
-
-      .btn__content {
-        gap: base(0.2);
-      }
-    }
-  }
-
-  &--size-large {
-    padding: base(0.4) base(0.8);
-
-    &.btn--icon-position-left {
-      padding-inline-start: base(0.6);
-      padding-inline-end: base(0.8);
-
-      .btn__content {
-        gap: base(0.4);
-        flex-direction: row-reverse;
+    &--icon-style-none {
+      .btn__icon {
+        border: none;
       }
     }
 
-    &.btn--icon-position-right {
-      padding-inline-start: base(0.8);
-      padding-inline-end: base(0.6);
+    &--size-small {
+      padding: 0 base(0.4);
+
+      &.btn--icon-position-left {
+        padding-inline-start: base(0.1);
+        padding-inline-end: base(0.4);
+
+        .btn__content {
+          flex-direction: row-reverse;
+        }
+      }
+
+      &.btn--icon-position-right {
+        padding-inline-start: base(0.4);
+        padding-inline-end: base(0.1);
+      }
+    }
+
+    &--size-medium {
+      padding: base(0.2) base(0.6);
+
+      &.btn--icon-position-left {
+        padding-inline-start: base(0.4);
+        padding-inline-end: base(0.6);
+
+        .btn__content {
+          gap: base(0.2);
+          flex-direction: row-reverse;
+        }
+      }
+
+      &.btn--icon-position-right {
+        padding-inline-start: base(0.6);
+        padding-inline-end: base(0.4);
+
+        .btn__content {
+          gap: base(0.2);
+        }
+      }
+    }
+
+    &--size-large {
+      padding: base(0.4) base(0.8);
+
+      &.btn--icon-position-left {
+        padding-inline-start: base(0.6);
+        padding-inline-end: base(0.8);
+
+        .btn__content {
+          gap: base(0.4);
+          flex-direction: row-reverse;
+        }
+      }
+
+      &.btn--icon-position-right {
+        padding-inline-start: base(0.8);
+        padding-inline-end: base(0.6);
+
+        .btn__content {
+          gap: base(0.4);
+        }
+      }
+    }
+
+    &--withPopup .btn {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &--style-icon-label,
+    &--style-icon-label.btn--icon-position-left,
+    &--style-icon-label.btn--icon-position-right {
+      padding: 0;
+      font-weight: 600;
 
       .btn__content {
         gap: base(0.4);
       }
     }
-  }
 
-  &--withPopup .btn {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  &--style-icon-label,
-  &--style-icon-label.btn--icon-position-left,
-  &--style-icon-label.btn--icon-position-right {
-    padding: 0;
-    font-weight: 600;
-
-    .btn__content {
-      gap: base(0.4);
-    }
-  }
-
-  &--style-none {
-    padding: 0;
-  }
-
-  &:focus:not(:focus-visible) {
-    .btn__icon {
-      @include color-svg(var(--theme-elevation-800));
-      background: var(--theme-elevation-150);
+    &--style-none {
+      padding: 0;
     }
 
-    outline: none;
-  }
+    &:focus:not(:focus-visible) {
+      .btn__icon {
+        @include color-svg(var(--theme-elevation-800));
+        background: var(--theme-elevation-150);
+      }
 
-  &:active {
-    .btn__icon {
-      @include color-svg(var(--theme-elevation-0));
-      background: var(--theme-elevation-700);
+      outline: none;
     }
-  }
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
-    outline-offset: var(--accessibility-outline-offset);
-  }
+    &:active {
+      .btn__icon {
+        @include color-svg(var(--theme-elevation-0));
+        background: var(--theme-elevation-700);
+      }
+    }
 
-  &.btn--disabled {
-    cursor: not-allowed;
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
+
+    &.btn--disabled {
+      cursor: not-allowed;
+    }
   }
 }
diff --git a/packages/ui/src/elements/Card/index.scss b/packages/ui/src/elements/Card/index.scss
index bd24f6c4f..a52296185 100644
--- a/packages/ui/src/elements/Card/index.scss
+++ b/packages/ui/src/elements/Card/index.scss
@@ -1,71 +1,73 @@
 @import '../../scss/styles';
 
-.card {
-  background: var(--theme-elevation-50);
-  padding: base(0.8);
-  width: 100%;
-  min-height: base(4);
-  position: relative;
-  border-radius: var(--style-radius-m);
-  border: 1px solid var(--theme-border-color);
-  transition-property: border, box-shadow, background;
-  transition-duration: 100ms;
-  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-  display: flex;
-  justify-content: space-between;
-  align-self: start;
-  gap: base(0.8);
-
-  &__title {
-    @extend %h5;
-    letter-spacing: 0;
-    font-weight: 600;
-    line-height: base(0.8);
+@layer payload-default {
+  .card {
+    background: var(--theme-elevation-50);
+    padding: base(0.8);
     width: 100%;
-    margin: base(0.1) 0;
-  }
-
-  &__actions {
+    min-height: base(4);
     position: relative;
-    z-index: 2;
-    display: inline-flex;
-    .btn {
-      margin: 0;
-      flex-shrink: 0;
+    border-radius: var(--style-radius-m);
+    border: 1px solid var(--theme-border-color);
+    transition-property: border, box-shadow, background;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+    display: flex;
+    justify-content: space-between;
+    align-self: start;
+    gap: base(0.8);
+
+    &__title {
+      @extend %h5;
+      letter-spacing: 0;
+      font-weight: 600;
+      line-height: base(0.8);
+      width: 100%;
+      margin: base(0.1) 0;
     }
 
-    .btn__icon {
-      border: 1px solid var(--theme-border-color);
-      transition-property: border, box-shadow, color, background;
-      transition-duration: 100ms;
-      transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+    &__actions {
+      position: relative;
+      z-index: 2;
+      display: inline-flex;
+      .btn {
+        margin: 0;
+        flex-shrink: 0;
+      }
 
-      &:hover {
-        border: 1px solid var(--theme-elevation-500);
-        background-color: var(--theme-elevation-0);
-        color: currentColor;
-        @include shadow-sm;
+      .btn__icon {
+        border: 1px solid var(--theme-border-color);
+        transition-property: border, box-shadow, color, background;
+        transition-duration: 100ms;
+        transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+
+        &:hover {
+          border: 1px solid var(--theme-elevation-500);
+          background-color: var(--theme-elevation-0);
+          color: currentColor;
+          @include shadow-sm;
+        }
       }
     }
-  }
 
-  &--has-onclick {
-    cursor: pointer;
+    &--has-onclick {
+      cursor: pointer;
 
-    &:hover {
-      background: var(--theme-elevation-50);
-      border: 1px solid var(--theme-elevation-250);
-      box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05);
+      &:hover {
+        background: var(--theme-elevation-50);
+        border: 1px solid var(--theme-elevation-250);
+        box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05);
+      }
+    }
+
+    &__click {
+      z-index: 1;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      margin: 0;
     }
   }
-
-  &__click {
-    z-index: 1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    margin: 0;
-  }
 }
diff --git a/packages/ui/src/elements/CodeEditor/index.scss b/packages/ui/src/elements/CodeEditor/index.scss
index 854d72635..f6cb6c426 100644
--- a/packages/ui/src/elements/CodeEditor/index.scss
+++ b/packages/ui/src/elements/CodeEditor/index.scss
@@ -1,21 +1,23 @@
 @import '../../scss/styles';
 
-.code-editor {
-  direction: ltr;
-  @include formInput;
-  height: auto;
-  padding: 0;
+@layer payload-default {
+  .code-editor {
+    direction: ltr;
+    @include formInput;
+    height: auto;
+    padding: 0;
 
-  .monaco-editor {
-    .view-overlays .current-line {
-      max-width: calc(100% - 14px);
-      border-width: 0px;
-    }
-
-    &:focus-within {
+    .monaco-editor {
       .view-overlays .current-line {
-        border-right: 0;
-        border-width: 1px;
+        max-width: calc(100% - 14px);
+        border-width: 0px;
+      }
+
+      &:focus-within {
+        .view-overlays .current-line {
+          border-right: 0;
+          border-width: 1px;
+        }
       }
     }
   }
diff --git a/packages/ui/src/elements/Collapsible/index.scss b/packages/ui/src/elements/Collapsible/index.scss
index d5d2e76bb..d826c4082 100644
--- a/packages/ui/src/elements/Collapsible/index.scss
+++ b/packages/ui/src/elements/Collapsible/index.scss
@@ -1,158 +1,160 @@
 @import '../../scss/styles.scss';
 
-.collapsible {
-  --toggle-pad-h: #{base(0.75)};
-  --toggle-pad-v: #{base(0.6)};
+@layer payload-default {
+  .collapsible {
+    --toggle-pad-h: #{base(0.75)};
+    --toggle-pad-v: #{base(0.6)};
 
-  border-radius: $style-radius-m;
+    border-radius: $style-radius-m;
 
-  &__toggle-wrap {
-    position: relative;
-    padding: base(0.4) base(0.4) base(0.4) base(0.8);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--theme-elevation-50);
-    line-height: base(1.2);
-    gap: base(0.2);
-    border-top-right-radius: $style-radius-m;
-    border-top-left-radius: $style-radius-m;
-    width: 100%;
-
-    &:hover {
-      background: var(--theme-elevation-100);
-    }
-
-    &:has(.collapsible__drag) {
-      padding-inline-start: base(0.4);
-    }
-  }
-
-  &__drag {
-    display: flex;
-    opacity: 0.5;
-    top: var(--toggle-pad-v);
-    width: base(1.2);
-    height: base(1.2);
-    padding: base(0.1);
-
-    icon {
+    &__toggle-wrap {
+      position: relative;
+      padding: base(0.4) base(0.4) base(0.4) base(0.8);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: var(--theme-elevation-50);
+      line-height: base(1.2);
+      gap: base(0.2);
+      border-top-right-radius: $style-radius-m;
+      border-top-left-radius: $style-radius-m;
       width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__toggle {
-    @extend %btn-reset;
-    @extend %body;
-    text-align: left;
-    cursor: pointer;
-    border-top-right-radius: $style-radius-m;
-    border-top-left-radius: $style-radius-m;
-    width: 100%;
-    height: 100%;
-    color: transparent;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    span {
-      user-select: none;
-    }
-  }
-
-  &--style-default {
-    border: 1px solid var(--theme-elevation-200);
-    &:hover {
-      border: 1px solid var(--theme-elevation-300);
-    }
-
-    > .collapsible__toggle-wrap {
-      .row-label {
-        color: var(--theme-text);
-      }
-    }
-  }
-
-  &--style-error {
-    border: 1px solid var(--theme-error-400);
-    > .collapsible__toggle-wrap {
-      background-color: var(--theme-error-100);
 
       &:hover {
-        background: var(--theme-error-150);
+        background: var(--theme-elevation-100);
       }
 
-      .row-label {
-        color: var(--theme-error-950);
+      &:has(.collapsible__drag) {
+        padding-inline-start: base(0.4);
       }
     }
-  }
 
-  &__header-wrap {
-    top: 0;
-    right: base(3);
-    bottom: 0;
-    left: 0;
-    pointer-events: none;
-    width: 100%;
-    overflow: hidden;
-    max-width: 100%;
-  }
-
-  &__header-wrap--has-drag-handle {
-    left: base(1);
-  }
-
-  &--collapsed {
-    .collapsible__toggle-wrap {
-      border-bottom-right-radius: $style-radius-m;
-      border-bottom-left-radius: $style-radius-m;
-    }
-  }
-
-  &__actions-wrap {
-    pointer-events: none;
-    display: flex;
-    gap: base(0.2);
-    margin-inline-end: base(0.2);
-  }
-
-  &__actions {
-    pointer-events: all;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: base(1.2);
-    height: base(1.2);
-
-    &.icon {
+    &__drag {
+      display: flex;
+      opacity: 0.5;
+      top: var(--toggle-pad-v);
+      width: base(1.2);
+      height: base(1.2);
       padding: base(0.1);
+
+      icon {
+        width: 100%;
+        height: 100%;
+      }
     }
-  }
 
-  &__indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: base(1.2);
-    height: base(1.2);
+    &__toggle {
+      @extend %btn-reset;
+      @extend %body;
+      text-align: left;
+      cursor: pointer;
+      border-top-right-radius: $style-radius-m;
+      border-top-left-radius: $style-radius-m;
+      width: 100%;
+      height: 100%;
+      color: transparent;
+      position: absolute;
+      top: 0;
+      left: 0;
 
-    &.icon {
-      padding: base(0.1);
+      span {
+        user-select: none;
+      }
     }
-  }
 
-  &__content {
-    background-color: var(--theme-elevation-0);
-    border-bottom-left-radius: $style-radius-m;
-    border-bottom-right-radius: $style-radius-m;
-    padding: var(--base);
-  }
+    &--style-default {
+      border: 1px solid var(--theme-elevation-200);
+      &:hover {
+        border: 1px solid var(--theme-elevation-300);
+      }
+
+      > .collapsible__toggle-wrap {
+        .row-label {
+          color: var(--theme-text);
+        }
+      }
+    }
+
+    &--style-error {
+      border: 1px solid var(--theme-error-400);
+      > .collapsible__toggle-wrap {
+        background-color: var(--theme-error-100);
+
+        &:hover {
+          background: var(--theme-error-150);
+        }
+
+        .row-label {
+          color: var(--theme-error-950);
+        }
+      }
+    }
+
+    &__header-wrap {
+      top: 0;
+      right: base(3);
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      width: 100%;
+      overflow: hidden;
+      max-width: 100%;
+    }
+
+    &__header-wrap--has-drag-handle {
+      left: base(1);
+    }
+
+    &--collapsed {
+      .collapsible__toggle-wrap {
+        border-bottom-right-radius: $style-radius-m;
+        border-bottom-left-radius: $style-radius-m;
+      }
+    }
+
+    &__actions-wrap {
+      pointer-events: none;
+      display: flex;
+      gap: base(0.2);
+      margin-inline-end: base(0.2);
+    }
+
+    &__actions {
+      pointer-events: all;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: base(1.2);
+      height: base(1.2);
+
+      &.icon {
+        padding: base(0.1);
+      }
+    }
+
+    &__indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: base(1.2);
+      height: base(1.2);
+
+      &.icon {
+        padding: base(0.1);
+      }
+    }
 
-  @include small-break {
     &__content {
-      padding: var(--gutter-h);
+      background-color: var(--theme-elevation-0);
+      border-bottom-left-radius: $style-radius-m;
+      border-bottom-right-radius: $style-radius-m;
+      padding: var(--base);
+    }
+
+    @include small-break {
+      &__content {
+        padding: var(--gutter-h);
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/ColumnSelector/index.scss b/packages/ui/src/elements/ColumnSelector/index.scss
index deb0e9619..a194d629e 100644
--- a/packages/ui/src/elements/ColumnSelector/index.scss
+++ b/packages/ui/src/elements/ColumnSelector/index.scss
@@ -1,46 +1,48 @@
 @import '../../scss/styles.scss';
 
-.column-selector {
-  display: flex;
-  flex-wrap: wrap;
-  background: var(--theme-elevation-50);
-  padding: base(1) base(1) base(0.5);
+@layer payload-default {
+  .column-selector {
+    display: flex;
+    flex-wrap: wrap;
+    background: var(--theme-elevation-50);
+    padding: base(1) base(1) base(0.5);
 
-  &__column {
-    margin-right: base(0.5);
-    margin-bottom: base(0.5);
-    background-color: transparent;
-    box-shadow: 0 0 0 1px var(--theme-elevation-150);
+    &__column {
+      margin-right: base(0.5);
+      margin-bottom: base(0.5);
+      background-color: transparent;
+      box-shadow: 0 0 0 1px var(--theme-elevation-150);
 
-    &.column-selector__column {
-      cursor: pointer;
+      &.column-selector__column {
+        cursor: pointer;
 
-      &:hover {
-        background-color: var(--theme-elevation-100);
+        &:hover {
+          background-color: var(--theme-elevation-100);
+        }
       }
-    }
 
-    &.column-selector__column--active {
-      background-color: var(--theme-elevation-0);
-      box-shadow:
-        0 0px 1px 1px var(--theme-elevation-150),
-        0 2px 4px -2px rgba(0, 0, 0, 0.1);
-
-      &:hover {
+      &.column-selector__column--active {
         background-color: var(--theme-elevation-0);
         box-shadow:
-          0 0px 1px 1px var(--theme-elevation-250),
-          0 3px 4px -1px rgba(0, 0, 0, 0.1);
+          0 0px 1px 1px var(--theme-elevation-150),
+          0 2px 4px -2px rgba(0, 0, 0, 0.1);
+
+        &:hover {
+          background-color: var(--theme-elevation-0);
+          box-shadow:
+            0 0px 1px 1px var(--theme-elevation-250),
+            0 3px 4px -1px rgba(0, 0, 0, 0.1);
+        }
       }
     }
-  }
 
-  // TODO: delete this once all icons have been migrated to viewbox edge-to-edge
-  .pill__icon {
-    padding: 0;
-  }
+    // TODO: delete this once all icons have been migrated to viewbox edge-to-edge
+    .pill__icon {
+      padding: 0;
+    }
 
-  @include small-break {
-    padding: calc(var(--base) / 2) calc(var(--base) / 2) 0;
+    @include small-break {
+      padding: calc(var(--base) / 2) calc(var(--base) / 2) 0;
+    }
   }
 }
diff --git a/packages/ui/src/elements/CopyToClipboard/index.scss b/packages/ui/src/elements/CopyToClipboard/index.scss
index b4a24f13a..439a6b565 100644
--- a/packages/ui/src/elements/CopyToClipboard/index.scss
+++ b/packages/ui/src/elements/CopyToClipboard/index.scss
@@ -1,26 +1,28 @@
 @import '../../scss/styles.scss';
 
-.copy-to-clipboard {
-  @extend %btn-reset;
-  position: relative;
-  cursor: pointer;
-  vertical-align: middle;
-  border-radius: 100%;
+@layer payload-default {
+  .copy-to-clipboard {
+    @extend %btn-reset;
+    position: relative;
+    cursor: pointer;
+    vertical-align: middle;
+    border-radius: 100%;
 
-  textarea {
-    position: absolute;
-    opacity: 0;
-    z-index: -1;
-    height: 0px;
-    width: 0px;
-  }
+    textarea {
+      position: absolute;
+      opacity: 0;
+      z-index: -1;
+      height: 0px;
+      width: 0px;
+    }
 
-  &:focus,
-  &:active {
-    outline: none;
-  }
+    &:focus,
+    &:active {
+      outline: none;
+    }
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
   }
 }
diff --git a/packages/ui/src/elements/DatePicker/index.scss b/packages/ui/src/elements/DatePicker/index.scss
index 417456761..a3dd2d90b 100644
--- a/packages/ui/src/elements/DatePicker/index.scss
+++ b/packages/ui/src/elements/DatePicker/index.scss
@@ -2,386 +2,388 @@
 
 $cal-icon-width: 18px;
 
-[dir='rtl'] {
-  .date-time-picker {
-    .react-datepicker__input-container input {
-      padding-right: base(3.4);
+@layer payload-default {
+  [dir='rtl'] {
+    .date-time-picker {
+      .react-datepicker__input-container input {
+        padding-right: base(3.4);
+      }
     }
   }
-}
 
-.date-time-picker {
-  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
-  .react-datepicker__time-container {
-    width: 120px;
-  }
+  .date-time-picker {
+    .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
+    .react-datepicker__time-container {
+      width: 120px;
+    }
 
-  &__icon-wrap {
-    position: relative;
-    z-index: 1;
-  }
+    &__icon-wrap {
+      position: relative;
+      z-index: 1;
+    }
 
-  .icon--calendar,
-  &__clear-button {
-    position: absolute;
-  }
+    .icon--calendar,
+    &__clear-button {
+      position: absolute;
+    }
 
-  .icon--calendar,
-  .icon--x {
-    @include color-svg(var(--theme-elevation-800));
-    height: auto;
-  }
+    .icon--calendar,
+    .icon--x {
+      @include color-svg(var(--theme-elevation-800));
+      height: auto;
+    }
 
-  &__clear-button {
-    top: base(0.5);
-    right: base(2);
-  }
+    &__clear-button {
+      top: base(0.5);
+      right: base(2);
+    }
 
-  .icon--calendar {
-    top: base(0.625);
-    right: base(0.75);
-    width: $cal-icon-width;
-    pointer-events: none;
-  }
+    .icon--calendar {
+      top: base(0.625);
+      right: base(0.75);
+      width: $cal-icon-width;
+      pointer-events: none;
+    }
 
-  .icon--x {
-    width: base(1);
-  }
+    .icon--x {
+      width: base(1);
+    }
 
-  &__clear-button {
-    appearance: none;
-    background-color: transparent;
-    border: none;
-    outline: none;
-    padding: 0;
-    cursor: pointer;
-  }
+    &__clear-button {
+      appearance: none;
+      background-color: transparent;
+      border: none;
+      outline: none;
+      padding: 0;
+      cursor: pointer;
+    }
 
-  &__appearance--timeOnly {
-    .react-datepicker {
-      width: 100%;
+    &__appearance--timeOnly {
+      .react-datepicker {
+        width: 100%;
 
-      &__month-container,
-      &__navigation--previous,
-      &__navigation--next {
-        display: none;
-        visibility: hidden;
-      }
+        &__month-container,
+        &__navigation--previous,
+        &__navigation--next {
+          display: none;
+          visibility: hidden;
+        }
 
-      &-popper,
-      &__time-container,
-      &__time-box {
-        width: base(6);
-      }
+        &-popper,
+        &__time-container,
+        &__time-box {
+          width: base(6);
+        }
 
-      &__time-container {
-        .react-datepicker__time {
-          .react-datepicker__time-box {
-            width: 100%;
+        &__time-container {
+          .react-datepicker__time {
+            .react-datepicker__time-box {
+              width: 100%;
+            }
           }
         }
       }
     }
-  }
 
-  .react-datepicker-wrapper {
-    display: block;
-  }
+    .react-datepicker-wrapper {
+      display: block;
+    }
 
-  .react-datepicker-wrapper,
-  .react-datepicker__input-container {
-    width: 100%;
-  }
+    .react-datepicker-wrapper,
+    .react-datepicker__input-container {
+      width: 100%;
+    }
 
-  .react-datepicker__input-container input {
-    @include formInput;
-    padding-right: calc(#{base(0.75)} + #{$cal-icon-width});
-  }
-
-  &--has-error {
     .react-datepicker__input-container input {
-      background-color: var(--theme-error-200);
+      @include formInput;
+      padding-right: calc(#{base(0.75)} + #{$cal-icon-width});
     }
-  }
 
-  .react-datepicker {
-    @include shadow-lg;
-    border: 1px solid var(--theme-elevation-100);
-    background: var(--theme-input-bg);
-    display: inline-flex;
-    font-family: var(--font-body);
-    font-weight: 100;
-    border-radius: 0;
-    color: var(--theme-elevation-800);
+    &--has-error {
+      .react-datepicker__input-container input {
+        background-color: var(--theme-error-200);
+      }
+    }
 
-    &__header {
-      padding-top: 0;
-      text-transform: none;
-      text-align: center;
+    .react-datepicker {
+      @include shadow-lg;
+      border: 1px solid var(--theme-elevation-100);
+      background: var(--theme-input-bg);
+      display: inline-flex;
+      font-family: var(--font-body);
+      font-weight: 100;
       border-radius: 0;
-      border: none;
-      background-color: var(--theme-input-bg);
+      color: var(--theme-elevation-800);
 
-      &--time {
+      &__header {
+        padding-top: 0;
+        text-transform: none;
+        text-align: center;
+        border-radius: 0;
+        border: none;
+        background-color: var(--theme-input-bg);
+
+        &--time {
+          padding: 10px 0;
+          border-bottom: 1px solid var(--theme-elevation-150);
+          font-weight: 600;
+        }
+      }
+
+      &__navigation {
+        background: none;
+        line-height: 1.7rem;
+        text-align: center;
+        cursor: pointer;
+        position: absolute;
+        top: 10px;
+        width: 0;
+        padding: 0;
+        border: 0.45rem solid transparent;
+        z-index: 1;
+        height: 10px;
+        width: 10px;
+        text-indent: -999em;
+        overflow: hidden;
+        top: 15px;
+
+        &--next {
+          border-left-color: var(--theme-elevation-400);
+
+          &:focus {
+            border-left-color: var(--theme-elevation-500);
+            outline: none;
+          }
+        }
+
+        &--previous {
+          border-right-color: var(--theme-elevation-400);
+
+          &:focus {
+            border-right-color: var(--theme-elevation-500);
+            outline: none;
+          }
+        }
+      }
+
+      &__current-month,
+      &__header,
+      &-year-header,
+      &__day-name,
+      &__day,
+      &__time-name,
+      &-time__header {
+        color: var(--theme-elevation-1000);
+      }
+
+      &__current-month {
+        display: none;
+      }
+
+      &__header__dropdown,
+      &-year-header {
         padding: 10px 0;
-        border-bottom: 1px solid var(--theme-elevation-150);
-        font-weight: 600;
-      }
-    }
-
-    &__navigation {
-      background: none;
-      line-height: 1.7rem;
-      text-align: center;
-      cursor: pointer;
-      position: absolute;
-      top: 10px;
-      width: 0;
-      padding: 0;
-      border: 0.45rem solid transparent;
-      z-index: 1;
-      height: 10px;
-      width: 10px;
-      text-indent: -999em;
-      overflow: hidden;
-      top: 15px;
-
-      &--next {
-        border-left-color: var(--theme-elevation-400);
-
-        &:focus {
-          border-left-color: var(--theme-elevation-500);
-          outline: none;
-        }
-      }
-
-      &--previous {
-        border-right-color: var(--theme-elevation-400);
-
-        &:focus {
-          border-right-color: var(--theme-elevation-500);
-          outline: none;
-        }
-      }
-    }
-
-    &__current-month,
-    &__header,
-    &-year-header,
-    &__day-name,
-    &__day,
-    &__time-name,
-    &-time__header {
-      color: var(--theme-elevation-1000);
-    }
-
-    &__current-month {
-      display: none;
-    }
-
-    &__header__dropdown,
-    &-year-header {
-      padding: 10px 0;
-      font-weight: bold;
-    }
-
-    &__month-container {
-      border-right: 1px solid var(--theme-elevation-150);
-    }
-
-    &__time,
-    &__time-container,
-    .react-datepicker__time-container .react-datepicker__time {
-      background: none;
-    }
-
-    &__time-container {
-      border-left: none;
-    }
-
-    &__month-text {
-      padding: base(0.3);
-      margin: base(0.15);
-      font-size: base(0.55);
-      &:hover {
-        background: var(--theme-elevation-100);
-      }
-    }
-
-    &__month-select,
-    &__year-select {
-      min-width: 70px;
-      border: none;
-      background: none;
-      outline: none;
-      cursor: pointer;
-
-      option {
-        background-color: var(--theme-elevation-50);
-      }
-    }
-
-    &__day-names {
-      background-color: var(--theme-elevation-100);
-    }
-
-    &__day {
-      box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150);
-      font-size: base(0.55);
-
-      &:hover {
-        background: var(--theme-elevation-100);
-      }
-
-      &:focus {
-        outline: 0;
-        background: var(--theme-elevation-400);
-      }
-
-      &--selected {
-        font-weight: bold;
-
-        &:focus {
-          background-color: var(--theme-elevation-150);
-        }
-      }
-
-      &--keyboard-selected {
-        color: var(--theme-elevation-0);
-        font-weight: bold;
-
-        &:focus {
-          background-color: var(--theme-elevation-150);
-          box-shadow:
-            inset 0px 0px 0px 1px var(--theme-elevation-800),
-            0px 0px 0px 1px var(--theme-elevation-800);
-        }
-      }
-
-      &--today {
         font-weight: bold;
       }
-    }
 
-    &__day,
-    &__day-name {
-      width: base(1.5);
-      margin: base(0.15);
-      line-height: base(1.25);
-    }
-  }
-
-  .react-datepicker-popper {
-    z-index: 10;
-    border: none;
-  }
-
-  .react-datepicker__time-container
-    .react-datepicker__time
-    .react-datepicker__time-box
-    ul.react-datepicker__time-list {
-    max-height: 100%;
-  }
-
-  .react-datepicker__day--keyboard-selected,
-  .react-datepicker__month-text--keyboard-selected,
-  .react-datepicker__time-container
-    .react-datepicker__time
-    .react-datepicker__time-box
-    ul.react-datepicker__time-list
-    li.react-datepicker__time-list-item--selected {
-    box-shadow: none;
-    background-color: var(--theme-elevation-150);
-    font-weight: bold;
-    color: var(--theme-elevation-800);
-    border-radius: 0;
-  }
-
-  .react-datepicker__time-container
-    .react-datepicker__time
-    .react-datepicker__time-box
-    ul.react-datepicker__time-list
-    li.react-datepicker__time-list-item--selected,
-  .react-datepicker__day--selected,
-  .react-datepicker__day--in-selecting-range,
-  .react-datepicker__day--in-range,
-  .react-datepicker__month-text--selected,
-  .react-datepicker__month-text--in-selecting-range,
-  .react-datepicker__month-text--in-range {
-    box-shadow: none;
-    background-color: var(--theme-elevation-150);
-    color: var(--theme-elevation-800);
-    font-weight: bold;
-    border-radius: 0;
-  }
-
-  .react-datepicker__time-container
-    .react-datepicker__time
-    .react-datepicker__time-box
-    ul.react-datepicker__time-list
-    li.react-datepicker__time-list-item:hover {
-    background: var(--theme-elevation-100);
-  }
-
-  .react-datepicker__day:hover,
-  .react-datepicker__month-text:hover {
-    border-radius: 0;
-  }
-
-  .react-datepicker__navigation--next--with-time:not(
-      .react-datepicker__navigation--next--with-today-button
-    ) {
-    right: 130px;
-  }
-
-  .react-datepicker__time-container
-    .react-datepicker__time
-    .react-datepicker__time-box
-    ul.react-datepicker__time-list
-    li.react-datepicker__time-list-item {
-    line-height: 20px;
-    font-size: base(0.5);
-  }
-
-  &__appearance--dayOnly,
-  &__appearance--monthOnly {
-    .react-datepicker {
       &__month-container {
-        border-right: none;
+        border-right: 1px solid var(--theme-elevation-150);
       }
-    }
-  }
 
-  @include small-break {
-    .react-datepicker {
-      flex-direction: column;
-    }
-    .react-datepicker__month-container {
-      border-right: 0;
-    }
-    .react-datepicker__time-container {
-      width: auto;
-    }
-    .react-datepicker__header--time {
-      background-color: var(--theme-elevation-100);
-      padding: 8px 0;
-      border-bottom: none;
-    }
-    .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
-      height: 120px;
-      width: unset;
-      > ul {
-        height: 120px;
+      &__time,
+      &__time-container,
+      .react-datepicker__time-container .react-datepicker__time {
+        background: none;
+      }
+
+      &__time-container {
+        border-left: none;
+      }
+
+      &__month-text {
+        padding: base(0.3);
+        margin: base(0.15);
+        font-size: base(0.55);
+        &:hover {
+          background: var(--theme-elevation-100);
+        }
+      }
+
+      &__month-select,
+      &__year-select {
+        min-width: 70px;
+        border: none;
+        background: none;
+        outline: none;
+        cursor: pointer;
+
+        option {
+          background-color: var(--theme-elevation-50);
+        }
+      }
+
+      &__day-names {
+        background-color: var(--theme-elevation-100);
+      }
+
+      &__day {
+        box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150);
+        font-size: base(0.55);
+
+        &:hover {
+          background: var(--theme-elevation-100);
+        }
+
+        &:focus {
+          outline: 0;
+          background: var(--theme-elevation-400);
+        }
+
+        &--selected {
+          font-weight: bold;
+
+          &:focus {
+            background-color: var(--theme-elevation-150);
+          }
+        }
+
+        &--keyboard-selected {
+          color: var(--theme-elevation-0);
+          font-weight: bold;
+
+          &:focus {
+            background-color: var(--theme-elevation-150);
+            box-shadow:
+              inset 0px 0px 0px 1px var(--theme-elevation-800),
+              0px 0px 0px 1px var(--theme-elevation-800);
+          }
+        }
+
+        &--today {
+          font-weight: bold;
+        }
+      }
+
+      &__day,
+      &__day-name {
+        width: base(1.5);
+        margin: base(0.15);
+        line-height: base(1.25);
       }
     }
+
+    .react-datepicker-popper {
+      z-index: 10;
+      border: none;
+    }
+
+    .react-datepicker__time-container
+      .react-datepicker__time
+      .react-datepicker__time-box
+      ul.react-datepicker__time-list {
+      max-height: 100%;
+    }
+
+    .react-datepicker__day--keyboard-selected,
+    .react-datepicker__month-text--keyboard-selected,
+    .react-datepicker__time-container
+      .react-datepicker__time
+      .react-datepicker__time-box
+      ul.react-datepicker__time-list
+      li.react-datepicker__time-list-item--selected {
+      box-shadow: none;
+      background-color: var(--theme-elevation-150);
+      font-weight: bold;
+      color: var(--theme-elevation-800);
+      border-radius: 0;
+    }
+
+    .react-datepicker__time-container
+      .react-datepicker__time
+      .react-datepicker__time-box
+      ul.react-datepicker__time-list
+      li.react-datepicker__time-list-item--selected,
+    .react-datepicker__day--selected,
+    .react-datepicker__day--in-selecting-range,
+    .react-datepicker__day--in-range,
+    .react-datepicker__month-text--selected,
+    .react-datepicker__month-text--in-selecting-range,
+    .react-datepicker__month-text--in-range {
+      box-shadow: none;
+      background-color: var(--theme-elevation-150);
+      color: var(--theme-elevation-800);
+      font-weight: bold;
+      border-radius: 0;
+    }
+
+    .react-datepicker__time-container
+      .react-datepicker__time
+      .react-datepicker__time-box
+      ul.react-datepicker__time-list
+      li.react-datepicker__time-list-item:hover {
+      background: var(--theme-elevation-100);
+    }
+
+    .react-datepicker__day:hover,
+    .react-datepicker__month-text:hover {
+      border-radius: 0;
+    }
+
     .react-datepicker__navigation--next--with-time:not(
         .react-datepicker__navigation--next--with-today-button
       ) {
-      right: 0px;
+      right: 130px;
     }
-    &__input-wrapper {
-      .icon {
-        top: calc(50% - #{base(0.25)});
+
+    .react-datepicker__time-container
+      .react-datepicker__time
+      .react-datepicker__time-box
+      ul.react-datepicker__time-list
+      li.react-datepicker__time-list-item {
+      line-height: 20px;
+      font-size: base(0.5);
+    }
+
+    &__appearance--dayOnly,
+    &__appearance--monthOnly {
+      .react-datepicker {
+        &__month-container {
+          border-right: none;
+        }
+      }
+    }
+
+    @include small-break {
+      .react-datepicker {
+        flex-direction: column;
+      }
+      .react-datepicker__month-container {
+        border-right: 0;
+      }
+      .react-datepicker__time-container {
+        width: auto;
+      }
+      .react-datepicker__header--time {
+        background-color: var(--theme-elevation-100);
+        padding: 8px 0;
+        border-bottom: none;
+      }
+      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
+        height: 120px;
+        width: unset;
+        > ul {
+          height: 120px;
+        }
+      }
+      .react-datepicker__navigation--next--with-time:not(
+          .react-datepicker__navigation--next--with-today-button
+        ) {
+        right: 0px;
+      }
+      &__input-wrapper {
+        .icon {
+          top: calc(50% - #{base(0.25)});
+        }
       }
     }
   }
diff --git a/packages/ui/src/elements/DeleteDocument/index.scss b/packages/ui/src/elements/DeleteDocument/index.scss
index 8458f5305..621028b2b 100644
--- a/packages/ui/src/elements/DeleteDocument/index.scss
+++ b/packages/ui/src/elements/DeleteDocument/index.scss
@@ -1,42 +1,44 @@
 @import '../../scss/styles.scss';
 
-.delete-document {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  &__toggle {
-    @extend %btn-reset;
-  }
-
-  &__wrapper {
-    z-index: 1;
-    position: relative;
+@layer payload-default {
+  .delete-document {
+    @include blur-bg;
     display: flex;
-    flex-direction: column;
-    gap: base(0.8);
-    padding: base(2);
-    max-width: base(36);
-  }
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: base(0.4);
-
-    > * {
-      margin: 0;
+    &__toggle {
+      @extend %btn-reset;
     }
-  }
 
-  &__controls {
-    display: flex;
-    gap: base(0.4);
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.8);
+      padding: base(2);
+      max-width: base(36);
+    }
 
-    .btn {
-      margin: 0;
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
+
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: base(0.4);
+
+      .btn {
+        margin: 0;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/DeleteMany/index.scss b/packages/ui/src/elements/DeleteMany/index.scss
index c7c927278..2dbdd1c51 100644
--- a/packages/ui/src/elements/DeleteMany/index.scss
+++ b/packages/ui/src/elements/DeleteMany/index.scss
@@ -1,38 +1,40 @@
 @import '../../scss/styles.scss';
 
-.delete-documents {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  &__wrapper {
-    z-index: 1;
-    position: relative;
+@layer payload-default {
+  .delete-documents {
+    @include blur-bg;
     display: flex;
-    flex-direction: column;
-    gap: base(0.8);
-    padding: base(2);
-    max-width: base(36);
-  }
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: base(0.4);
-
-    > * {
-      margin: 0;
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.8);
+      padding: base(2);
+      max-width: base(36);
     }
-  }
 
-  &__controls {
-    display: flex;
-    gap: base(0.4);
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
 
-    .btn {
-      margin: 0;
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: base(0.4);
+
+      .btn {
+        margin: 0;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/DocumentControls/index.scss b/packages/ui/src/elements/DocumentControls/index.scss
index 4e7ae3833..3794d9224 100644
--- a/packages/ui/src/elements/DocumentControls/index.scss
+++ b/packages/ui/src/elements/DocumentControls/index.scss
@@ -1,237 +1,239 @@
 @import '../../scss/styles.scss';
 
-.doc-controls {
-  @include blur-bg-light;
-  position: sticky;
-  top: 0;
-  width: 100%;
-  z-index: 5;
-  display: flex;
-  align-items: center;
-
-  &__divider {
-    content: '';
-    display: block;
-    position: absolute;
-    height: 1px;
-    background: var(--theme-elevation-100);
+@layer payload-default {
+  .doc-controls {
+    @include blur-bg-light;
+    position: sticky;
+    top: 0;
     width: 100%;
-    left: 0;
-    top: 100%;
-  }
-
-  &__wrapper {
-    position: relative;
-    width: 100%;
-    display: flex;
-    align-items: space-between;
-    gap: var(--base);
-    padding-bottom: 1px;
-    z-index: 4;
-    height: var(--doc-controls-height);
-  }
-
-  &__content {
+    z-index: 5;
     display: flex;
     align-items: center;
-    flex-grow: 1;
-    overflow: hidden;
-    padding: base(0.8) 0;
-  }
 
-  &__meta {
-    flex-grow: 1;
-    display: flex;
-    list-style: none;
-    padding: 0;
-    gap: var(--base);
-    margin: 0;
-    width: 100%;
-
-    & button {
-      margin: 0;
+    &__divider {
+      content: '';
+      display: block;
+      position: absolute;
+      height: 1px;
+      background: var(--theme-elevation-100);
+      width: 100%;
+      left: 0;
+      top: 100%;
     }
-  }
-
-  &__locked-controls.locked {
-    position: unset;
-
-    .tooltip {
-      top: calc(var(--base) * -0.5);
-    }
-  }
-
-  &__list-item {
-    display: flex;
-    align-items: center;
-    margin: 0;
-  }
-
-  &__value-wrap {
-    overflow: hidden;
-  }
-
-  &__value {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin: 0;
-    font-weight: 600;
-    line-height: base(1.2);
-  }
-
-  &__label {
-    color: var(--theme-elevation-500);
-    white-space: nowrap;
-    margin: 0;
-  }
-
-  &__controls-wrapper {
-    --controls-gap: calc(var(--base) / 2);
-    --dot-button-width: calc(var(--base) * 2);
-    display: flex;
-    align-items: center;
-    margin: 0;
-    gap: var(--controls-gap);
-    position: relative;
-  }
-
-  &__controls {
-    display: flex;
-    align-items: center;
-    margin: 0;
-    gap: calc(var(--base) / 2);
-
-    button {
-      margin: 0;
-      white-space: nowrap;
-    }
-  }
-
-  &__dots {
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 2px;
-    border: 1px solid var(--theme-elevation-100);
-    border-radius: $style-radius-m;
-    height: calc(var(--base) * 1.6);
-    width: calc(var(--base) * 1.6);
-
-    &:hover {
-      border: 1px solid var(--theme-elevation-500);
-      background-color: var(--theme-elevation-100);
-    }
-
-    > div {
-      width: 3px;
-      height: 3px;
-      border-radius: 100%;
-      background-color: currentColor;
-    }
-  }
-
-  &__popup {
-    position: relative;
-  }
-
-  .popup--active {
-    .doc-controls {
-      &__dots {
-        border: 1px solid var(--theme-elevation-500);
-        background-color: var(--theme-elevation-100);
-      }
-    }
-  }
-
-  .popup__trigger-wrap {
-    display: flex;
-  }
-
-  @include mid-break {
-    // On mobile, only stick the controls to the top
-    // The timestamps and meta can scroll past
-    // The same container needs to the sticky, though
-    // So we use a static height with a negative top equal to the meta height plus top padding
-    top: base(-2.8);
-    padding-right: 0;
-    padding-left: 0;
 
     &__wrapper {
-      flex-direction: column;
-      gap: 0;
-      height: unset;
+      position: relative;
+      width: 100%;
+      display: flex;
+      align-items: space-between;
+      gap: var(--base);
+      padding-bottom: 1px;
+      z-index: 4;
+      height: var(--doc-controls-height);
     }
 
     &__content {
-      width: 100%;
-      overflow: auto;
-      padding-inline: base(2);
-      // this container has a fixed height
-      // this means the scrollbar (when present) overlaps the content
-      &::-webkit-scrollbar {
-        display: none;
-      }
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      overflow: hidden;
+      padding: base(0.8) 0;
     }
 
     &__meta {
-      width: auto;
-      gap: calc(var(--base) / 2);
+      flex-grow: 1;
+      display: flex;
+      list-style: none;
+      padding: 0;
+      gap: var(--base);
+      margin: 0;
+      width: 100%;
 
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        right: 0;
-        width: base(0.8);
-        height: var(--base);
-        background: linear-gradient(to right, transparent, var(--theme-bg));
-        flex-shrink: 0;
-        z-index: 1111;
-        pointer-events: none;
+      & button {
+        margin: 0;
       }
     }
 
+    &__locked-controls.locked {
+      position: unset;
+
+      .tooltip {
+        top: calc(var(--base) * -0.5);
+      }
+    }
+
+    &__list-item {
+      display: flex;
+      align-items: center;
+      margin: 0;
+    }
+
+    &__value-wrap {
+      overflow: hidden;
+    }
+
+    &__value {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin: 0;
+      font-weight: 600;
+      line-height: base(1.2);
+    }
+
+    &__label {
+      color: var(--theme-elevation-500);
+      white-space: nowrap;
+      margin: 0;
+    }
+
     &__controls-wrapper {
-      background-color: var(--theme-bg);
-      width: 100%;
-      transform: translate3d(0, 0, 0);
-      padding-right: var(--gutter-h);
-      justify-content: space-between;
-      height: var(--doc-controls-height);
-      border-top: 1px solid var(--theme-elevation-100);
+      --controls-gap: calc(var(--base) / 2);
+      --dot-button-width: calc(var(--base) * 2);
+      display: flex;
+      align-items: center;
+      margin: 0;
+      gap: var(--controls-gap);
+      position: relative;
     }
 
     &__controls {
-      padding-left: var(--gutter-h);
-      overflow: auto;
+      display: flex;
+      align-items: center;
+      margin: 0;
+      gap: calc(var(--base) / 2);
 
-      // do not show scrollbar because the parent container has a static height
-      // this container has a gradient overlay as visual indication of `overflow: scroll`
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      &::after {
-        content: '';
-        display: block;
-        position: sticky;
-        right: 0;
-        width: calc(var(--base) * 2);
-        height: calc(var(--base) * 1.5);
-        background: linear-gradient(to right, transparent, var(--theme-bg));
-        flex-shrink: 0;
-        z-index: 1111;
-        pointer-events: none;
+      button {
+        margin: 0;
+        white-space: nowrap;
       }
     }
-  }
 
-  @include small-break {
-    &__content {
-      padding-inline: base(0.8);
+    &__dots {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      gap: 2px;
+      border: 1px solid var(--theme-elevation-100);
+      border-radius: $style-radius-m;
+      height: calc(var(--base) * 1.6);
+      width: calc(var(--base) * 1.6);
+
+      &:hover {
+        border: 1px solid var(--theme-elevation-500);
+        background-color: var(--theme-elevation-100);
+      }
+
+      > div {
+        width: 3px;
+        height: 3px;
+        border-radius: 100%;
+        background-color: currentColor;
+      }
+    }
+
+    &__popup {
+      position: relative;
+    }
+
+    .popup--active {
+      .doc-controls {
+        &__dots {
+          border: 1px solid var(--theme-elevation-500);
+          background-color: var(--theme-elevation-100);
+        }
+      }
+    }
+
+    .popup__trigger-wrap {
+      display: flex;
+    }
+
+    @include mid-break {
+      // On mobile, only stick the controls to the top
+      // The timestamps and meta can scroll past
+      // The same container needs to the sticky, though
+      // So we use a static height with a negative top equal to the meta height plus top padding
+      top: base(-2.8);
+      padding-right: 0;
+      padding-left: 0;
+
+      &__wrapper {
+        flex-direction: column;
+        gap: 0;
+        height: unset;
+      }
+
+      &__content {
+        width: 100%;
+        overflow: auto;
+        padding-inline: base(2);
+        // this container has a fixed height
+        // this means the scrollbar (when present) overlaps the content
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+
+      &__meta {
+        width: auto;
+        gap: calc(var(--base) / 2);
+
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          right: 0;
+          width: base(0.8);
+          height: var(--base);
+          background: linear-gradient(to right, transparent, var(--theme-bg));
+          flex-shrink: 0;
+          z-index: 1111;
+          pointer-events: none;
+        }
+      }
+
+      &__controls-wrapper {
+        background-color: var(--theme-bg);
+        width: 100%;
+        transform: translate3d(0, 0, 0);
+        padding-right: var(--gutter-h);
+        justify-content: space-between;
+        height: var(--doc-controls-height);
+        border-top: 1px solid var(--theme-elevation-100);
+      }
+
+      &__controls {
+        padding-left: var(--gutter-h);
+        overflow: auto;
+
+        // do not show scrollbar because the parent container has a static height
+        // this container has a gradient overlay as visual indication of `overflow: scroll`
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        &::after {
+          content: '';
+          display: block;
+          position: sticky;
+          right: 0;
+          width: calc(var(--base) * 2);
+          height: calc(var(--base) * 1.5);
+          background: linear-gradient(to right, transparent, var(--theme-bg));
+          flex-shrink: 0;
+          z-index: 1111;
+          pointer-events: none;
+        }
+      }
+    }
+
+    @include small-break {
+      &__content {
+        padding-inline: base(0.8);
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/DocumentDrawer/index.scss b/packages/ui/src/elements/DocumentDrawer/index.scss
index a02a0ac7b..864b9c4c3 100644
--- a/packages/ui/src/elements/DocumentDrawer/index.scss
+++ b/packages/ui/src/elements/DocumentDrawer/index.scss
@@ -1,71 +1,73 @@
 @import '../../scss/styles.scss';
 
-.doc-drawer {
-  &__header {
-    width: 100%;
-    margin-top: base(2.5);
-    display: flex;
-    flex-direction: column;
-    gap: base(0.5);
-    align-items: flex-start;
-  }
-
-  &__header-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    width: 100%;
-  }
-
-  &__header-text {
-    margin: 0;
-  }
-
-  &__toggler {
-    background: transparent;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    color: inherit;
-
-    &:focus,
-    &:focus-within {
-      outline: none;
+@layer payload-default {
+  .doc-drawer {
+    &__header {
+      width: 100%;
+      margin-top: base(2.5);
+      display: flex;
+      flex-direction: column;
+      gap: base(0.5);
+      align-items: flex-start;
     }
 
-    &:disabled {
-      pointer-events: none;
+    &__header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      width: 100%;
     }
-  }
 
-  &__header-close {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-    cursor: pointer;
-    overflow: hidden;
-    width: base(2);
-    height: base(2);
+    &__header-text {
+      margin: 0;
+    }
 
-    svg {
+    &__toggler {
+      background: transparent;
+      border: 0;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      color: inherit;
+
+      &:focus,
+      &:focus-within {
+        outline: none;
+      }
+
+      &:disabled {
+        pointer-events: none;
+      }
+    }
+
+    &__header-close {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      overflow: hidden;
       width: base(2);
       height: base(2);
-      position: relative;
 
-      .stroke {
-        stroke-width: 2px;
-        vector-effect: non-scaling-stroke;
+      svg {
+        width: base(2);
+        height: base(2);
+        position: relative;
+
+        .stroke {
+          stroke-width: 2px;
+          vector-effect: non-scaling-stroke;
+        }
+      }
+    }
+
+    @include mid-break {
+      &__header {
+        margin-top: base(1.5);
+        margin-bottom: base(0.5);
+        padding-left: var(--gutter-h);
+        padding-right: var(--gutter-h);
       }
     }
   }
-
-  @include mid-break {
-    &__header {
-      margin-top: base(1.5);
-      margin-bottom: base(0.5);
-      padding-left: var(--gutter-h);
-      padding-right: var(--gutter-h);
-    }
-  }
 }
diff --git a/packages/ui/src/elements/DocumentFields/index.scss b/packages/ui/src/elements/DocumentFields/index.scss
index 5ff812254..35cdfb9a3 100644
--- a/packages/ui/src/elements/DocumentFields/index.scss
+++ b/packages/ui/src/elements/DocumentFields/index.scss
@@ -1,91 +1,147 @@
 @import '../../scss/styles.scss';
 
-.document-fields {
-  width: 100%;
-  display: flex;
-  --doc-sidebar-width: 325px;
+@layer payload-default {
+  .document-fields {
+    width: 100%;
+    display: flex;
+    --doc-sidebar-width: 325px;
 
-  &--has-sidebar {
-    .document-fields {
-      &__main {
-        width: 66.66%;
-      }
-
-      &__edit {
-        [dir='ltr'] & {
-          top: 0;
-          right: 0;
-          border-right: 1px solid var(--theme-elevation-100);
-          padding-right: calc(var(--base) * 2);
+    &--has-sidebar {
+      .document-fields {
+        &__main {
+          width: 66.66%;
         }
 
-        [dir='rtl'] & {
-          top: 0;
-          left: 0;
-          border-left: 1px solid var(--theme-elevation-100);
-          padding-left: calc(var(--base) * 2);
-        }
-      }
+        &__edit {
+          [dir='ltr'] & {
+            top: 0;
+            right: 0;
+            border-right: 1px solid var(--theme-elevation-100);
+            padding-right: calc(var(--base) * 2);
+          }
 
-      &__fields {
-        & > .tabs-field,
-        & > .group-field {
-          margin-right: calc(var(--base) * -2);
+          [dir='rtl'] & {
+            top: 0;
+            left: 0;
+            border-left: 1px solid var(--theme-elevation-100);
+            padding-left: calc(var(--base) * 2);
+          }
+        }
+
+        &__fields {
+          & > .tabs-field,
+          & > .group-field {
+            margin-right: calc(var(--base) * -2);
+          }
         }
       }
     }
-  }
 
-  &__main {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    flex-grow: 1;
-  }
+    &__main {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+      flex-grow: 1;
+    }
 
-  &__edit {
-    padding-top: calc(var(--base) * 1.5);
-    padding-bottom: var(--spacing-view-bottom);
-    flex-grow: 1;
-  }
+    &__edit {
+      padding-top: calc(var(--base) * 1.5);
+      padding-bottom: var(--spacing-view-bottom);
+      flex-grow: 1;
+    }
 
-  &__sidebar-wrap {
-    position: sticky;
-    top: var(--doc-controls-height);
-    width: 33.33%;
-    height: calc(100vh - var(--doc-controls-height));
-    min-width: var(--doc-sidebar-width);
-    flex-shrink: 0;
-  }
+    &__sidebar-wrap {
+      position: sticky;
+      top: var(--doc-controls-height);
+      width: 33.33%;
+      height: calc(100vh - var(--doc-controls-height));
+      min-width: var(--doc-sidebar-width);
+      flex-shrink: 0;
+    }
 
-  &__sidebar {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-  }
+    &__sidebar {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+    }
 
-  &__sidebar-fields {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-    padding-top: calc(var(--base) * 1.5);
-    padding-left: calc(var(--base) * 2);
-    padding-right: var(--gutter-h);
-    padding-bottom: var(--spacing-view-bottom);
-  }
+    &__sidebar-fields {
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+      padding-top: calc(var(--base) * 1.5);
+      padding-left: calc(var(--base) * 2);
+      padding-right: var(--gutter-h);
+      padding-bottom: var(--spacing-view-bottom);
+    }
 
-  &__label {
-    color: var(--theme-elevation-400);
-  }
+    &__label {
+      color: var(--theme-elevation-400);
+    }
 
-  &--force-sidebar-wrap {
-    display: block;
+    &--force-sidebar-wrap {
+      display: block;
+
+      .document-fields {
+        &__main {
+          width: 100%;
+          min-height: initial;
+        }
+
+        &__sidebar-wrap {
+          position: static;
+          width: 100%;
+          height: initial;
+          border-left: 0;
+        }
+
+        &__sidebar {
+          padding-bottom: base(3.5);
+          overflow: visible;
+        }
+
+        &__sidebar-fields {
+          padding-top: 0;
+          padding-left: var(--gutter-h);
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    @include mid-break {
+      display: block;
+
+      &--has-sidebar {
+        .document-fields {
+          &__main {
+            width: 100%;
+          }
+
+          &__edit {
+            [dir='ltr'] & {
+              border-right: 0;
+              padding-right: var(--gutter-h);
+            }
+
+            [dir='rtl'] & {
+              border-left: 0;
+              padding-left: var(--gutter-h);
+            }
+          }
+
+          &__fields {
+            & > .tabs-field,
+            & > .group-field {
+              margin-right: calc(var(--gutter-h) * -1);
+            }
+          }
+        }
+      }
 
-    .document-fields {
       &__main {
         width: 100%;
         min-height: initial;
@@ -98,95 +154,41 @@
         border-left: 0;
       }
 
-      &__sidebar {
-        padding-bottom: base(3.5);
-        overflow: visible;
+      &__form {
+        display: block;
       }
 
       &__sidebar-fields {
         padding-top: 0;
         padding-left: var(--gutter-h);
-        padding-bottom: 0;
-      }
-    }
-  }
-
-  @include mid-break {
-    display: block;
-
-    &--has-sidebar {
-      .document-fields {
-        &__main {
-          width: 100%;
-        }
-
-        &__edit {
-          [dir='ltr'] & {
-            border-right: 0;
-            padding-right: var(--gutter-h);
-          }
-
-          [dir='rtl'] & {
-            border-left: 0;
-            padding-left: var(--gutter-h);
-          }
-        }
-
-        &__fields {
-          & > .tabs-field,
-          & > .group-field {
-            margin-right: calc(var(--gutter-h) * -1);
-          }
-        }
-      }
-    }
-
-    &__main {
-      width: 100%;
-      min-height: initial;
-    }
-
-    &__sidebar-wrap {
-      position: static;
-      width: 100%;
-      height: initial;
-      border-left: 0;
-    }
-
-    &__form {
-      display: block;
-    }
-
-    &__sidebar-fields {
-      padding-top: 0;
-      padding-left: var(--gutter-h);
-      padding-right: var(--gutter-h);
-      padding-bottom: 0;
-      gap: base(0.5);
-
-      [dir='ltr'] & {
         padding-right: var(--gutter-h);
+        padding-bottom: 0;
+        gap: base(0.5);
+
+        [dir='ltr'] & {
+          padding-right: var(--gutter-h);
+        }
+
+        [dir='rtl'] & {
+          padding-left: var(--gutter-h);
+        }
       }
 
-      [dir='rtl'] & {
-        padding-left: var(--gutter-h);
+      &__sidebar {
+        padding-bottom: base(3.5);
+        overflow: visible;
       }
     }
 
-    &__sidebar {
-      padding-bottom: base(3.5);
-      overflow: visible;
-    }
-  }
+    @include small-break {
+      &__sidebar-wrap {
+        min-width: initial;
+        width: 100%;
+      }
 
-  @include small-break {
-    &__sidebar-wrap {
-      min-width: initial;
-      width: 100%;
-    }
-
-    &__edit {
-      padding-top: calc(var(--base) / 2);
+      &__edit {
+        padding-top: calc(var(--base) / 2);
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/Drawer/index.scss b/packages/ui/src/elements/Drawer/index.scss
index e95855fd9..ea3b5ce24 100644
--- a/packages/ui/src/elements/Drawer/index.scss
+++ b/packages/ui/src/elements/Drawer/index.scss
@@ -2,139 +2,141 @@
 
 $transTime: 200;
 
-.drawer {
-  display: flex;
-  overflow: hidden;
-  position: fixed;
-  height: 100vh;
-
-  &__blur-bg {
-    @include blur-bg;
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    transition: all #{$transTime}ms linear;
-  }
-
-  &__content {
-    opacity: 0;
-    transform: translateX(calc(var(--base) * 4));
-    position: relative;
-    z-index: 2;
-    // NOTE: width is controlled by js
-    // width: calc(100% - var(--gutter-h));
-    overflow: hidden;
-    transition: all #{$transTime}ms linear;
-    background-color: var(--theme-bg);
-  }
-
-  &__content-children {
-    position: relative;
-    z-index: 1;
-    overflow: auto;
-    height: 100%;
-  }
-
-  &--is-open {
-    .drawer {
-      &__content,
-      &__blur-bg {
-        opacity: 1;
-      }
-
-      &__close {
-        opacity: 0.1;
-        transition: opacity #{$transTime}ms linear;
-        transition-delay: #{calc($transTime / 2)}ms;
-      }
-
-      &__content {
-        transform: translateX(0);
-      }
-    }
-  }
-
-  &__close {
-    @extend %btn-reset;
-    position: relative;
-    z-index: 2;
-    flex-shrink: 0;
-    text-indent: -9999px;
-    cursor: pointer;
-    opacity: 0;
-    will-change: opacity;
-    transition: none;
-    transition-delay: 0ms;
-    flex-grow: 1;
-    background: var(--theme-elevation-800);
-
-    &:active,
-    &:focus {
-      outline: 0;
-    }
-  }
-
-  &__header {
+@layer payload-default {
+  .drawer {
     display: flex;
-    align-items: center;
-    margin-top: base(2.5);
-    margin-bottom: base(1);
-    width: 100%;
+    overflow: hidden;
+    position: fixed;
+    height: 100vh;
 
-    &__title {
-      margin: 0;
-      flex-grow: 1;
+    &__blur-bg {
+      @include blur-bg;
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      opacity: 0;
+      transition: all #{$transTime}ms linear;
+    }
+
+    &__content {
+      opacity: 0;
+      transform: translateX(calc(var(--base) * 4));
+      position: relative;
+      z-index: 2;
+      // NOTE: width is controlled by js
+      // width: calc(100% - var(--gutter-h));
+      overflow: hidden;
+      transition: all #{$transTime}ms linear;
+      background-color: var(--theme-bg);
+    }
+
+    &__content-children {
+      position: relative;
+      z-index: 1;
+      overflow: auto;
+      height: 100%;
+    }
+
+    &--is-open {
+      .drawer {
+        &__content,
+        &__blur-bg {
+          opacity: 1;
+        }
+
+        &__close {
+          opacity: 0.1;
+          transition: opacity #{$transTime}ms linear;
+          transition-delay: #{calc($transTime / 2)}ms;
+        }
+
+        &__content {
+          transform: translateX(0);
+        }
+      }
     }
 
     &__close {
-      border: 0;
-      background-color: transparent;
-      padding: 0;
+      @extend %btn-reset;
+      position: relative;
+      z-index: 2;
+      flex-shrink: 0;
+      text-indent: -9999px;
       cursor: pointer;
-      overflow: hidden;
-      direction: ltr;
+      opacity: 0;
+      will-change: opacity;
+      transition: none;
+      transition-delay: 0ms;
+      flex-grow: 1;
+      background: var(--theme-elevation-800);
+
+      &:active,
+      &:focus {
+        outline: 0;
+      }
+    }
+
+    &__header {
       display: flex;
       align-items: center;
-      justify-content: center;
-      width: base(1.2);
-      height: base(1.2);
+      margin-top: base(2.5);
+      margin-bottom: base(1);
+      width: 100%;
 
-      svg {
-        margin: base(-1.2);
-        width: base(2.4);
-        height: base(2.4);
+      &__title {
+        margin: 0;
+        flex-grow: 1;
+      }
 
-        position: relative;
+      &__close {
+        border: 0;
+        background-color: transparent;
+        padding: 0;
+        cursor: pointer;
+        overflow: hidden;
+        direction: ltr;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: base(1.2);
+        height: base(1.2);
 
-        .stroke {
-          stroke-width: 1px;
-          vector-effect: non-scaling-stroke;
+        svg {
+          margin: base(-1.2);
+          width: base(2.4);
+          height: base(2.4);
+
+          position: relative;
+
+          .stroke {
+            stroke-width: 1px;
+            vector-effect: non-scaling-stroke;
+          }
+        }
+      }
+    }
+
+    @include mid-break {
+      &__header {
+        margin-top: base(1.5);
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .drawer {
+      &__close {
+        background: var(--color-base-1000);
+      }
+
+      &--is-open {
+        .drawer__close {
+          opacity: 0.25;
         }
       }
     }
   }
-
-  @include mid-break {
-    &__header {
-      margin-top: base(1.5);
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .drawer {
-    &__close {
-      background: var(--color-base-1000);
-    }
-
-    &--is-open {
-      .drawer__close {
-        opacity: 0.25;
-      }
-    }
-  }
 }
diff --git a/packages/ui/src/elements/Dropzone/index.scss b/packages/ui/src/elements/Dropzone/index.scss
index 6a1ef6d90..9ad40b205 100644
--- a/packages/ui/src/elements/Dropzone/index.scss
+++ b/packages/ui/src/elements/Dropzone/index.scss
@@ -1,41 +1,43 @@
 @import '../../scss/styles.scss';
 
-.dropzone {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: calc(var(--base) * 0.9) var(--base);
-  background: transparent;
-  border: 1px dotted var(--theme-elevation-400);
-  border-radius: var(--style-radius-s);
-  height: 100%;
-  width: 100%;
-  box-shadow: 0 0 0 0 transparent;
-  transition: all 100ms cubic-bezier(0, 0.2, 0.2, 1);
-
-  .btn {
-    margin: 0;
+@layer payload-default {
+  .dropzone {
+    position: relative;
     display: flex;
-    justify-content: center;
     align-items: center;
-  }
+    padding: calc(var(--base) * 0.9) var(--base);
+    background: transparent;
+    border: 1px dotted var(--theme-elevation-400);
+    border-radius: var(--style-radius-s);
+    height: 100%;
+    width: 100%;
+    box-shadow: 0 0 0 0 transparent;
+    transition: all 100ms cubic-bezier(0, 0.2, 0.2, 1);
 
-  &.dragging {
-    border-color: var(--theme-success-500);
-    background: var(--theme-success-150);
-    @include shadow-m;
+    .btn {
+      margin: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
 
-    * {
-      pointer-events: none;
+    &.dragging {
+      border-color: var(--theme-success-500);
+      background: var(--theme-success-150);
+      @include shadow-m;
+
+      * {
+        pointer-events: none;
+      }
+    }
+
+    @include mid-break {
+      display: block;
+      text-align: center;
+    }
+
+    &.dropzoneStyle--none {
+      all: unset;
     }
   }
-
-  @include mid-break {
-    display: block;
-    text-align: center;
-  }
-
-  &.dropzoneStyle--none {
-    all: unset;
-  }
 }
diff --git a/packages/ui/src/elements/DuplicateDocument/index.scss b/packages/ui/src/elements/DuplicateDocument/index.scss
index dd584a53a..ca14d1347 100644
--- a/packages/ui/src/elements/DuplicateDocument/index.scss
+++ b/packages/ui/src/elements/DuplicateDocument/index.scss
@@ -1,40 +1,42 @@
 @import '../../scss/styles.scss';
 
-.duplicate {
-  &__modal {
-    @include blur-bg;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-
-  &__wrapper {
-    z-index: 1;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: base(0.8);
-    padding: base(2);
-    max-width: base(36);
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: base(0.4);
-
-    > * {
-      margin: 0;
+@layer payload-default {
+  .duplicate {
+    &__modal {
+      @include blur-bg;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
     }
-  }
 
-  &__controls {
-    display: flex;
-    gap: base(0.4);
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.8);
+      padding: base(2);
+      max-width: base(36);
+    }
 
-    .btn {
-      margin: 0;
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
+
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: base(0.4);
+
+      .btn {
+        margin: 0;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/EditMany/index.scss b/packages/ui/src/elements/EditMany/index.scss
index 3fb212f24..25a1c1044 100644
--- a/packages/ui/src/elements/EditMany/index.scss
+++ b/packages/ui/src/elements/EditMany/index.scss
@@ -1,199 +1,201 @@
 @import '../../scss/styles.scss';
 
-.edit-many {
-  &__toggle {
-    font-size: 1rem;
-    line-height: base(1.2);
-    display: inline-flex;
-    background: var(--theme-elevation-150);
-    color: var(--theme-elevation-800);
-    border-radius: $style-radius-s;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    border: 0;
-    padding: 0 base(0.4);
-    align-items: center;
-    cursor: pointer;
-    text-decoration: none;
-
-    &:active,
-    &:focus {
-      outline: none;
-    }
-
-    &:hover {
-      background: var(--theme-elevation-100);
-    }
-
-    &:active {
-      background: var(--theme-elevation-100);
-    }
-  }
-
-  &__form {
-    height: 100%;
-  }
-
-  &__main {
-    width: calc(100% - #{base(15)});
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-  }
-
-  &__header {
-    display: flex;
-    margin-top: base(2.5);
-    margin-bottom: base(1);
-    width: 100%;
-
-    &__title {
-      margin: 0;
-      flex-grow: 1;
-    }
-
-    &__close {
-      border: 0;
-      background-color: transparent;
-      padding: 0;
-      cursor: pointer;
+@layer payload-default {
+  .edit-many {
+    &__toggle {
+      font-size: 1rem;
+      line-height: base(1.2);
+      display: inline-flex;
+      background: var(--theme-elevation-150);
+      color: var(--theme-elevation-800);
+      border-radius: $style-radius-s;
+      white-space: nowrap;
       overflow: hidden;
-      width: base(1);
-      height: base(1);
+      text-overflow: ellipsis;
+      border: 0;
+      padding: 0 base(0.4);
+      align-items: center;
+      cursor: pointer;
+      text-decoration: none;
 
-      svg {
-        width: base(2);
-        height: base(2);
-        position: relative;
-        inset-inline-start: base(-0.5);
-        top: base(-0.5);
-
-        .stroke {
-          stroke-width: 2px;
-          vector-effect: non-scaling-stroke;
-        }
-      }
-    }
-  }
-
-  &__edit {
-    padding-top: base(1);
-    padding-bottom: base(2);
-    flex-grow: 1;
-  }
-  [dir='rtl'] &__sidebar-wrap {
-    left: 0;
-    border-right: 1px solid var(--theme-elevation-100);
-    right: auto;
-  }
-
-  &__sidebar-wrap {
-    position: fixed;
-    width: base(15);
-    height: 100%;
-    top: 0;
-    right: 0;
-    overflow: visible;
-    border-left: 1px solid var(--theme-elevation-100);
-  }
-
-  &__sidebar {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-  }
-
-  &__sidebar-sticky-wrap {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-  }
-
-  &__collection-actions,
-  &__meta,
-  &__sidebar-fields {
-    [dir='ltr'] & {
-      padding-left: base(1.5);
-    }
-    [dir='rtl'] & {
-      padding-right: base(1.5);
-    }
-  }
-
-  &__document-actions {
-    padding-right: $baseline;
-    position: sticky;
-    top: 0;
-    z-index: var(--z-nav);
-
-    > * {
-      position: relative;
-      z-index: 1;
-    }
-
-    @include mid-break {
-      @include blur-bg;
-    }
-  }
-
-  &__document-actions {
-    display: flex;
-    flex-wrap: wrap;
-    padding: base(1);
-    gap: base(0.5);
-
-    .form-submit {
-      width: calc(50% - #{base(1)});
-
-      @include mid-break {
-        width: auto;
-        flex-grow: 1;
+      &:active,
+      &:focus {
+        outline: none;
       }
 
-      .btn {
-        width: 100%;
-        padding-left: base(0.5);
-        padding-right: base(0.5);
-        margin-bottom: 0;
+      &:hover {
+        background: var(--theme-elevation-100);
       }
-    }
-  }
 
-  @include mid-break {
-    &__main {
-      width: 100%;
-      min-height: initial;
-    }
-
-    &__sidebar-wrap {
-      position: static;
-      width: 100%;
-      height: initial;
+      &:active {
+        background: var(--theme-elevation-100);
+      }
     }
 
     &__form {
-      display: block;
+      height: 100%;
+    }
+
+    &__main {
+      width: calc(100% - #{base(15)});
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+    }
+
+    &__header {
+      display: flex;
+      margin-top: base(2.5);
+      margin-bottom: base(1);
+      width: 100%;
+
+      &__title {
+        margin: 0;
+        flex-grow: 1;
+      }
+
+      &__close {
+        border: 0;
+        background-color: transparent;
+        padding: 0;
+        cursor: pointer;
+        overflow: hidden;
+        width: base(1);
+        height: base(1);
+
+        svg {
+          width: base(2);
+          height: base(2);
+          position: relative;
+          inset-inline-start: base(-0.5);
+          top: base(-0.5);
+
+          .stroke {
+            stroke-width: 2px;
+            vector-effect: non-scaling-stroke;
+          }
+        }
+      }
     }
 
     &__edit {
-      padding-top: 0;
-      padding-bottom: 0;
+      padding-top: base(1);
+      padding-bottom: base(2);
+      flex-grow: 1;
+    }
+    [dir='rtl'] &__sidebar-wrap {
+      left: 0;
+      border-right: 1px solid var(--theme-elevation-100);
+      right: auto;
+    }
+
+    &__sidebar-wrap {
+      position: fixed;
+      width: base(15);
+      height: 100%;
+      top: 0;
+      right: 0;
+      overflow: visible;
+      border-left: 1px solid var(--theme-elevation-100);
+    }
+
+    &__sidebar {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+    }
+
+    &__sidebar-sticky-wrap {
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+    }
+
+    &__collection-actions,
+    &__meta,
+    &__sidebar-fields {
+      [dir='ltr'] & {
+        padding-left: base(1.5);
+      }
+      [dir='rtl'] & {
+        padding-right: base(1.5);
+      }
     }
 
     &__document-actions {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      top: auto;
+      padding-right: $baseline;
+      position: sticky;
+      top: 0;
       z-index: var(--z-nav);
+
+      > * {
+        position: relative;
+        z-index: 1;
+      }
+
+      @include mid-break {
+        @include blur-bg;
+      }
     }
 
-    &__document-actions,
-    &__sidebar-fields {
-      padding-left: var(--gutter-h);
-      padding-right: var(--gutter-h);
+    &__document-actions {
+      display: flex;
+      flex-wrap: wrap;
+      padding: base(1);
+      gap: base(0.5);
+
+      .form-submit {
+        width: calc(50% - #{base(1)});
+
+        @include mid-break {
+          width: auto;
+          flex-grow: 1;
+        }
+
+        .btn {
+          width: 100%;
+          padding-left: base(0.5);
+          padding-right: base(0.5);
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    @include mid-break {
+      &__main {
+        width: 100%;
+        min-height: initial;
+      }
+
+      &__sidebar-wrap {
+        position: static;
+        width: 100%;
+        height: initial;
+      }
+
+      &__form {
+        display: block;
+      }
+
+      &__edit {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      &__document-actions {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        top: auto;
+        z-index: var(--z-nav);
+      }
+
+      &__document-actions,
+      &__sidebar-fields {
+        padding-left: var(--gutter-h);
+        padding-right: var(--gutter-h);
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/EditUpload/index.scss b/packages/ui/src/elements/EditUpload/index.scss
index 6ad21e3ca..d887b82cf 100644
--- a/packages/ui/src/elements/EditUpload/index.scss
+++ b/packages/ui/src/elements/EditUpload/index.scss
@@ -2,225 +2,227 @@
 
 $header-height: base(5);
 
-.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 {
+@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%;
-    width: 100%;
-  }
+    margin-right: calc(var(--gutter-h) * -1);
+    margin-left: calc(var(--gutter-h) * -1);
 
-  &__focal-wrapper {
-    position: relative;
-    display: inline-flex;
-    max-height: 100%;
-  }
+    &__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;
 
-  &__draggable-container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    pointer-events: none;
-
-    &--dragging {
-      pointer-events: all;
-
-      .edit-upload__focalPoint {
-        cursor: grabbing;
+      & h2 {
+        margin: 0;
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
-  }
 
-  &__draggable {
-    @include btn-reset;
-    position: absolute;
-  }
+    [dir='rtl'] &__actions {
+      margin-right: auto;
+      margin-left: unset;
+    }
 
-  &__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;
+    &__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;
+    }
 
-    svg {
+    &__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;
-      top: 0;
       bottom: 0;
-      background: rgba(0, 0, 0, 0.5);
-      border-radius: 100%;
-      width: base(2);
-      height: base(2);
-      color: white;
+      top: 0;
+      pointer-events: none;
+
+      &--dragging {
+        pointer-events: all;
+
+        .edit-upload__focalPoint {
+          cursor: grabbing;
+        }
+      }
     }
-  }
 
-  &__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);
+    &__draggable {
+      @include btn-reset;
+      position: absolute;
     }
-  }
-
-  &__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;
+      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;
+      }
     }
 
-    &__inputsWrap {
+    &__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);
     }
 
-    &__sidebar {
-      min-width: 0;
+    &__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;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/ErrorPill/index.scss b/packages/ui/src/elements/ErrorPill/index.scss
index ba24e2999..39ab442e9 100644
--- a/packages/ui/src/elements/ErrorPill/index.scss
+++ b/packages/ui/src/elements/ErrorPill/index.scss
@@ -1,31 +1,33 @@
 @import '../../scss/styles.scss';
 
-.error-pill {
-  align-self: center;
-  align-items: center;
-  border: 0;
-  padding: 0 base(0.25);
-  flex-shrink: 0;
-  border-radius: var(--style-radius-l);
-  line-height: 18px;
-  font-size: 11px;
-  text-align: center;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--theme-error-300);
-  color: var(--theme-error-950);
+@layer payload-default {
+  .error-pill {
+    align-self: center;
+    align-items: center;
+    border: 0;
+    padding: 0 base(0.25);
+    flex-shrink: 0;
+    border-radius: var(--style-radius-l);
+    line-height: 18px;
+    font-size: 11px;
+    text-align: center;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--theme-error-300);
+    color: var(--theme-error-950);
 
-  &--fixed-width {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    position: relative;
-  }
+    &--fixed-width {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      position: relative;
+    }
 
-  &__count {
-    letter-spacing: 0.5px;
-    margin-left: 0.5px;
+    &__count {
+      letter-spacing: 0.5px;
+      margin-left: 0.5px;
+    }
   }
 }
diff --git a/packages/ui/src/elements/FieldSelect/index.scss b/packages/ui/src/elements/FieldSelect/index.scss
index 2330be078..37281463b 100644
--- a/packages/ui/src/elements/FieldSelect/index.scss
+++ b/packages/ui/src/elements/FieldSelect/index.scss
@@ -1,5 +1,7 @@
 @import '../../scss/styles.scss';
 
-.field-select {
-  margin-bottom: base(1);
+@layer payload-default {
+  .field-select {
+    margin-bottom: base(1);
+  }
 }
diff --git a/packages/ui/src/elements/FileDetails/DraggableFileDetails/index.scss b/packages/ui/src/elements/FileDetails/DraggableFileDetails/index.scss
index 1aa27226e..0943d23e7 100644
--- a/packages/ui/src/elements/FileDetails/DraggableFileDetails/index.scss
+++ b/packages/ui/src/elements/FileDetails/DraggableFileDetails/index.scss
@@ -1,33 +1,35 @@
 @import '../../../scss/styles.scss';
 
-.file-details-draggable {
-  display: flex;
-  gap: 0.6rem;
-  //justify-content: space-between;
-  align-items: center;
-  background: var(--theme-elevation-50);
-  border-radius: 3px;
-  padding: 0.7rem 0.8rem;
-
-  &--drag-wrapper {
+@layer payload-default {
+  .file-details-draggable {
     display: flex;
     gap: 0.6rem;
+    //justify-content: space-between;
     align-items: center;
-  }
+    background: var(--theme-elevation-50);
+    border-radius: 3px;
+    padding: 0.7rem 0.8rem;
 
-  &__thumbnail {
-    max-width: 1.5rem;
-  }
+    &--drag-wrapper {
+      display: flex;
+      gap: 0.6rem;
+      align-items: center;
+    }
 
-  &__actions {
-    flex-grow: 2;
-    display: flex;
-    gap: 0.6rem;
-    align-items: center;
-    justify-content: flex-end;
-  }
+    &__thumbnail {
+      max-width: 1.5rem;
+    }
 
-  &__remove.btn--style-icon-label {
-    margin: 0;
+    &__actions {
+      flex-grow: 2;
+      display: flex;
+      gap: 0.6rem;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    &__remove.btn--style-icon-label {
+      margin: 0;
+    }
   }
 }
diff --git a/packages/ui/src/elements/FileDetails/FileMeta/index.scss b/packages/ui/src/elements/FileDetails/FileMeta/index.scss
index ce70e35d4..f47c795de 100644
--- a/packages/ui/src/elements/FileDetails/FileMeta/index.scss
+++ b/packages/ui/src/elements/FileDetails/FileMeta/index.scss
@@ -1,29 +1,31 @@
 @import '../../../scss/styles.scss';
 
-.file-meta {
-  &__url {
-    display: flex;
-    gap: base(0.4);
+@layer payload-default {
+  .file-meta {
+    &__url {
+      display: flex;
+      gap: base(0.4);
 
-    a {
-      font-weight: 600;
-      text-decoration: none;
+      a {
+        font-weight: 600;
+        text-decoration: none;
 
-      &:hover,
-      &:focus-visible {
-        text-decoration: underline;
+        &:hover,
+        &:focus-visible {
+          text-decoration: underline;
+        }
       }
     }
-  }
 
-  &__size-type,
-  &__url a {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+    &__size-type,
+    &__url a {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-  &__edit {
-    position: relative;
+    &__edit {
+      position: relative;
+    }
   }
 }
diff --git a/packages/ui/src/elements/FileDetails/StaticFileDetails/index.scss b/packages/ui/src/elements/FileDetails/StaticFileDetails/index.scss
index f89be36c9..17f0e6977 100644
--- a/packages/ui/src/elements/FileDetails/StaticFileDetails/index.scss
+++ b/packages/ui/src/elements/FileDetails/StaticFileDetails/index.scss
@@ -1,132 +1,134 @@
 @import '../../../scss/styles.scss';
 
-.file-details {
-  background: var(--theme-elevation-50);
-  border: 1px solid var(--theme-border-color);
-  border-radius: var(--style-radius-m);
-  @include inputShadow;
+@layer payload-default {
+  .file-details {
+    background: var(--theme-elevation-50);
+    border: 1px solid var(--theme-border-color);
+    border-radius: var(--style-radius-m);
+    @include inputShadow;
 
-  header {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    position: relative;
-  }
+    header {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      position: relative;
+    }
 
-  &__remove {
-    position: absolute;
-    margin: 0;
-    top: $baseline;
-    right: $baseline;
+    &__remove {
+      position: absolute;
+      margin: 0;
+      top: $baseline;
+      right: $baseline;
 
-    & .btn__icon {
-      border: 1px solid var(--theme-border-color);
-      background: var(--theme-input-bg);
-      @include inputShadow;
-      transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+      & .btn__icon {
+        border: 1px solid var(--theme-border-color);
+        background: var(--theme-input-bg);
+        @include inputShadow;
+        transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
 
-      &:hover {
-        border: 1px solid var(--theme-elevation-400);
+        &:hover {
+          border: 1px solid var(--theme-elevation-400);
+        }
       }
     }
-  }
 
-  &__main-detail {
-    padding: base(0.8) base(1.2);
-    width: auto;
-    flex-grow: 1;
-    min-width: 280px;
-    max-width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-self: stretch;
-    gap: base(0.2);
-  }
-
-  &__toggle-more-info {
-    font-weight: 600;
-    text-decoration: none;
-
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
-    }
-  }
-
-  &__toggle-icon {
-    padding: calc(var(--base) / 4);
-  }
-
-  &__sizes {
-    margin: 0;
-    padding: base(1.5) $baseline 0;
-    list-style: none;
-    display: flex;
-    flex-wrap: wrap;
-
-    li {
-      width: 50%;
-      padding: 0 base(0.5);
-      margin-bottom: $baseline;
-    }
-  }
-
-  &__size-label {
-    color: var(--theme-elevation-400);
-  }
-
-  &__file-mutation {
-    display: flex;
-    margin-top: base(0.25);
-    gap: calc(var(--base) / 2);
-  }
-
-  &__edit {
-    cursor: pointer;
-    background-color: var(--theme-elevation-150);
-    border: none;
-    border-radius: $style-radius-m;
-    padding: base(0.25) base(0.5);
-
-    &:hover {
-      background-color: var(--theme-elevation-100);
-    }
-  }
-
-  @include large-break {
     &__main-detail {
-      padding: $baseline;
+      padding: base(0.8) base(1.2);
+      width: auto;
+      flex-grow: 1;
+      min-width: 280px;
+      max-width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-self: stretch;
+      gap: base(0.2);
+    }
+
+    &__toggle-more-info {
+      font-weight: 600;
+      text-decoration: none;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+
+    &__toggle-icon {
+      padding: calc(var(--base) / 4);
     }
 
     &__sizes {
-      display: block;
-      padding: $baseline $baseline base(0.5);
+      margin: 0;
+      padding: base(1.5) $baseline 0;
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
 
       li {
-        padding: 0;
+        width: 50%;
+        padding: 0 base(0.5);
+        margin-bottom: $baseline;
+      }
+    }
+
+    &__size-label {
+      color: var(--theme-elevation-400);
+    }
+
+    &__file-mutation {
+      display: flex;
+      margin-top: base(0.25);
+      gap: calc(var(--base) / 2);
+    }
+
+    &__edit {
+      cursor: pointer;
+      background-color: var(--theme-elevation-150);
+      border: none;
+      border-radius: $style-radius-m;
+      padding: base(0.25) base(0.5);
+
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+    }
+
+    @include large-break {
+      &__main-detail {
+        padding: $baseline;
+      }
+
+      &__sizes {
+        display: block;
+        padding: $baseline $baseline base(0.5);
+
+        li {
+          padding: 0;
+          width: 100%;
+        }
+      }
+    }
+
+    @include mid-break {
+      header {
+        flex-wrap: wrap;
+      }
+
+      .thumbnail {
+        width: 50%;
+        order: 1;
+      }
+
+      &__remove {
+        order: 2;
+      }
+
+      &__main-detail {
+        order: 3;
         width: 100%;
       }
     }
   }
-
-  @include mid-break {
-    header {
-      flex-wrap: wrap;
-    }
-
-    .thumbnail {
-      width: 50%;
-      order: 1;
-    }
-
-    &__remove {
-      order: 2;
-    }
-
-    &__main-detail {
-      order: 3;
-      width: 100%;
-    }
-  }
 }
diff --git a/packages/ui/src/elements/GenerateConfirmation/index.scss b/packages/ui/src/elements/GenerateConfirmation/index.scss
index eb60c3459..0294ef71b 100644
--- a/packages/ui/src/elements/GenerateConfirmation/index.scss
+++ b/packages/ui/src/elements/GenerateConfirmation/index.scss
@@ -1,38 +1,40 @@
 @import '../../scss/styles.scss';
 
-.generate-confirmation {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  &__wrapper {
-    z-index: 1;
-    position: relative;
+@layer payload-default {
+  .generate-confirmation {
+    @include blur-bg;
     display: flex;
-    flex-direction: column;
-    gap: base(0.8);
-    padding: base(2);
-    max-width: base(36);
-  }
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: base(0.4);
-
-    > * {
-      margin: 0;
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.8);
+      padding: base(2);
+      max-width: base(36);
     }
-  }
 
-  &__controls {
-    display: flex;
-    gap: base(0.4);
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
 
-    .btn {
-      margin: 0;
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: base(0.4);
+
+      .btn {
+        margin: 0;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/Gutter/index.scss b/packages/ui/src/elements/Gutter/index.scss
index 5222d2757..f094a5bc8 100644
--- a/packages/ui/src/elements/Gutter/index.scss
+++ b/packages/ui/src/elements/Gutter/index.scss
@@ -1,19 +1,21 @@
 @import '../../scss/styles.scss';
 
-.gutter {
-  &--left {
-    padding-left: var(--gutter-h);
-  }
+@layer payload-default {
+  .gutter {
+    &--left {
+      padding-left: var(--gutter-h);
+    }
 
-  &--right {
-    padding-right: var(--gutter-h);
-  }
+    &--right {
+      padding-right: var(--gutter-h);
+    }
 
-  &--negative-left {
-    margin-left: calc(-1 * var(--gutter-h));
-  }
+    &--negative-left {
+      margin-left: calc(-1 * var(--gutter-h));
+    }
 
-  &--negative-right {
-    margin-right: calc(-1 * var(--gutter-h));
+    &--negative-right {
+      margin-right: calc(-1 * var(--gutter-h));
+    }
   }
 }
diff --git a/packages/ui/src/elements/Hamburger/index.scss b/packages/ui/src/elements/Hamburger/index.scss
index ec67bf9d6..efdfc9e35 100644
--- a/packages/ui/src/elements/Hamburger/index.scss
+++ b/packages/ui/src/elements/Hamburger/index.scss
@@ -1,44 +1,46 @@
 @import '../../scss/styles';
 
-.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 {
+@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);
 
-  &::after {
-    z-index: -1;
-  }
+    &:hover {
+      background-color: var(--theme-elevation-100);
+      box-shadow: 0px 0px 0px 1px var(--theme-elevation-500);
+    }
 
-  &__open-icon,
-  &__close-icon {
-    width: var(--hamburger-size);
-    height: var(--hamburger-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    &: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;
+    }
   }
 }
diff --git a/packages/ui/src/elements/IDLabel/index.scss b/packages/ui/src/elements/IDLabel/index.scss
index 803ed6bb4..274268cf5 100644
--- a/packages/ui/src/elements/IDLabel/index.scss
+++ b/packages/ui/src/elements/IDLabel/index.scss
@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.id-label {
-  font-size: base(0.8);
-  line-height: base(1.2);
-  font-weight: normal;
-  color: var(--theme-elevation-600);
-  background: var(--theme-elevation-100);
-  padding: base(0.2) base(0.4);
-  border-radius: $style-radius-m;
-  display: inline-flex;
+@layer payload-default {
+  .id-label {
+    font-size: base(0.8);
+    line-height: base(1.2);
+    font-weight: normal;
+    color: var(--theme-elevation-600);
+    background: var(--theme-elevation-100);
+    padding: base(0.2) base(0.4);
+    border-radius: $style-radius-m;
+    display: inline-flex;
+  }
 }
diff --git a/packages/ui/src/elements/ListControls/index.scss b/packages/ui/src/elements/ListControls/index.scss
index 8a11e6c72..c79a78ee1 100644
--- a/packages/ui/src/elements/ListControls/index.scss
+++ b/packages/ui/src/elements/ListControls/index.scss
@@ -1,95 +1,97 @@
 @import '../../scss/styles';
 
-.list-controls {
-  &__wrap {
-    display: flex;
-    align-items: center;
-    background-color: var(--theme-elevation-50);
-    border-radius: var(--style-radius-m);
-    padding: base(0.6);
-    gap: base(0.6);
-  }
-
-  .search-filter {
-    flex-grow: 1;
-
-    input {
-      margin: 0;
-    }
-  }
-
-  &__buttons-wrap {
-    display: flex;
-    align-items: center;
-    gap: base(0.2);
-
-    .pill {
-      background-color: var(--theme-elevation-150);
-
-      &:hover {
-        background-color: var(--theme-elevation-100);
-      }
-    }
-  }
-
-  .column-selector,
-  .where-builder,
-  .sort-complex {
-    margin-top: base(1);
-  }
-
-  @include small-break {
+@layer payload-default {
+  .list-controls {
     &__wrap {
-      flex-wrap: wrap;
-      background-color: unset;
-      padding: 0;
-      position: relative;
-    }
-
-    .icon--search {
-      position: absolute;
-      top: base(0.4);
-      inset-inline-start: base(0.4);
-      z-index: 1;
+      display: flex;
+      align-items: center;
+      background-color: var(--theme-elevation-50);
+      border-radius: var(--style-radius-m);
+      padding: base(0.6);
+      gap: base(0.6);
     }
 
     .search-filter {
-      width: 100%;
+      flex-grow: 1;
+
       input {
-        padding: base(0.4) base(2);
+        margin: 0;
       }
     }
 
     &__buttons-wrap {
-      [dir='ltr'] & {
-        margin-right: 0;
-      }
-
-      [dir='rtl'] & {
-        margin-left: 0;
-      }
+      display: flex;
+      align-items: center;
+      gap: base(0.2);
 
       .pill {
-        padding: base(0.2) base(0.2) base(0.2) base(0.4);
-        justify-content: space-between;
-      }
-    }
+        background-color: var(--theme-elevation-150);
 
-    &__buttons {
-      margin: 0;
-      width: 100%;
+        &:hover {
+          background-color: var(--theme-elevation-100);
+        }
+      }
     }
 
     .column-selector,
     .where-builder,
     .sort-complex {
-      margin-top: calc(var(--base) / 2);
+      margin-top: base(1);
     }
 
-    &__toggle-columns,
-    &__toggle-where,
-    &__toggle-sort {
-      flex: 1;
+    @include small-break {
+      &__wrap {
+        flex-wrap: wrap;
+        background-color: unset;
+        padding: 0;
+        position: relative;
+      }
+
+      .icon--search {
+        position: absolute;
+        top: base(0.4);
+        inset-inline-start: base(0.4);
+        z-index: 1;
+      }
+
+      .search-filter {
+        width: 100%;
+        input {
+          padding: base(0.4) base(2);
+        }
+      }
+
+      &__buttons-wrap {
+        [dir='ltr'] & {
+          margin-right: 0;
+        }
+
+        [dir='rtl'] & {
+          margin-left: 0;
+        }
+
+        .pill {
+          padding: base(0.2) base(0.2) base(0.2) base(0.4);
+          justify-content: space-between;
+        }
+      }
+
+      &__buttons {
+        margin: 0;
+        width: 100%;
+      }
+
+      .column-selector,
+      .where-builder,
+      .sort-complex {
+        margin-top: calc(var(--base) / 2);
+      }
+
+      &__toggle-columns,
+      &__toggle-where,
+      &__toggle-sort {
+        flex: 1;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/ListDrawer/index.scss b/packages/ui/src/elements/ListDrawer/index.scss
index ccda4f21a..1dd317410 100644
--- a/packages/ui/src/elements/ListDrawer/index.scss
+++ b/packages/ui/src/elements/ListDrawer/index.scss
@@ -1,116 +1,118 @@
 @import '../../scss/styles.scss';
 
-.list-drawer {
-  &__header {
-    margin-top: base(2.5);
-    width: 100%;
+@layer payload-default {
+  .list-drawer {
+    &__header {
+      margin-top: base(2.5);
+      width: 100%;
 
-    @include mid-break {
-      margin-top: base(1.5);
-    }
-  }
-
-  &__header-wrap {
-    display: flex;
-    gap: base(1);
-  }
-
-  &__header-content {
-    display: flex;
-    flex-wrap: wrap;
-    flex-grow: 1;
-    align-items: flex-start;
-    align-items: center;
-
-    button .pill {
-      pointer-events: none;
-      margin: 0;
-      top: 4px;
-      margin-left: base(0.5);
-    }
-  }
-
-  &__header-text {
-    margin: 0;
-  }
-
-  &__header-close {
-    flex-shrink: 0;
-  }
-
-  &__toggler {
-    background: transparent;
-    border: 0;
-    padding: 0;
-    cursor: pointer;
-    color: inherit;
-    border-radius: var(--style-radius-s);
-
-    &:focus:not(:focus-visible),
-    &:focus-within:not(:focus-visible) {
-      outline: none;
-    }
-
-    &:focus-visible {
-      outline: var(--accessibility-outline);
-      outline-offset: var(--accessibility-outline-offset);
-    }
-
-    &:disabled {
-      pointer-events: none;
-    }
-  }
-
-  &__header-close {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    overflow: hidden;
-    width: base(1);
-    height: base(1);
-
-    svg {
-      width: base(2);
-      height: base(2);
-      position: relative;
-      inset-inline-start: base(-0.5);
-      top: base(-0.5);
-
-      .stroke {
-        stroke-width: 2px;
-        vector-effect: non-scaling-stroke;
+      @include mid-break {
+        margin-top: base(1.5);
       }
     }
-  }
 
-  &__select-collection-wrap {
-    margin-top: base(1);
-  }
-
-  &__first-cell {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-    cursor: pointer;
-    text-decoration: underline;
-    text-align: left;
-    white-space: nowrap;
-  }
-
-  @include mid-break {
-    .collection-list__header {
-      margin-bottom: base(0.5);
-    }
-
-    &__select-collection-wrap {
-      margin-top: calc(var(--base) / 2);
+    &__header-wrap {
+      display: flex;
+      gap: base(1);
     }
 
     &__header-content {
+      display: flex;
+      flex-wrap: wrap;
+      flex-grow: 1;
+      align-items: flex-start;
+      align-items: center;
+
       button .pill {
-        top: 2px;
+        pointer-events: none;
+        margin: 0;
+        top: 4px;
+        margin-left: base(0.5);
+      }
+    }
+
+    &__header-text {
+      margin: 0;
+    }
+
+    &__header-close {
+      flex-shrink: 0;
+    }
+
+    &__toggler {
+      background: transparent;
+      border: 0;
+      padding: 0;
+      cursor: pointer;
+      color: inherit;
+      border-radius: var(--style-radius-s);
+
+      &:focus:not(:focus-visible),
+      &:focus-within:not(:focus-visible) {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline: var(--accessibility-outline);
+        outline-offset: var(--accessibility-outline-offset);
+      }
+
+      &:disabled {
+        pointer-events: none;
+      }
+    }
+
+    &__header-close {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+      overflow: hidden;
+      width: base(1);
+      height: base(1);
+
+      svg {
+        width: base(2);
+        height: base(2);
+        position: relative;
+        inset-inline-start: base(-0.5);
+        top: base(-0.5);
+
+        .stroke {
+          stroke-width: 2px;
+          vector-effect: non-scaling-stroke;
+        }
+      }
+    }
+
+    &__select-collection-wrap {
+      margin-top: base(1);
+    }
+
+    &__first-cell {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      text-decoration: underline;
+      text-align: left;
+      white-space: nowrap;
+    }
+
+    @include mid-break {
+      .collection-list__header {
+        margin-bottom: base(0.5);
+      }
+
+      &__select-collection-wrap {
+        margin-top: calc(var(--base) / 2);
+      }
+
+      &__header-content {
+        button .pill {
+          top: 2px;
+        }
       }
     }
   }
diff --git a/packages/ui/src/elements/ListHeader/index.scss b/packages/ui/src/elements/ListHeader/index.scss
index 994ede3aa..2a908a8bd 100644
--- a/packages/ui/src/elements/ListHeader/index.scss
+++ b/packages/ui/src/elements/ListHeader/index.scss
@@ -1,10 +1,12 @@
-.list-header {
-  display: flex;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  gap: calc(var(--base) * 0.8);
+@layer payload-default {
+  .list-header {
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    gap: calc(var(--base) * 0.8);
 
-  h1 {
-    margin: 0;
+    h1 {
+      margin: 0;
+    }
   }
 }
diff --git a/packages/ui/src/elements/ListSelection/index.scss b/packages/ui/src/elements/ListSelection/index.scss
index 4e1103f97..d2dd8b867 100644
--- a/packages/ui/src/elements/ListSelection/index.scss
+++ b/packages/ui/src/elements/ListSelection/index.scss
@@ -1,18 +1,20 @@
 @import '../../scss/styles.scss';
 
-.list-selection {
-  margin-left: auto;
-  color: var(--theme-elevation-500);
-
-  &__button {
+@layer payload-default {
+  .list-selection {
+    margin-left: auto;
     color: var(--theme-elevation-500);
-    background: unset;
-    border: none;
-    text-decoration: underline;
-    cursor: pointer;
-  }
 
-  @include small-break {
-    margin-bottom: base(0.5);
+    &__button {
+      color: var(--theme-elevation-500);
+      background: unset;
+      border: none;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+    @include small-break {
+      margin-bottom: base(0.5);
+    }
   }
 }
diff --git a/packages/ui/src/elements/Loading/index.scss b/packages/ui/src/elements/Loading/index.scss
index ad7b00bd7..be90a3bdc 100644
--- a/packages/ui/src/elements/Loading/index.scss
+++ b/packages/ui/src/elements/Loading/index.scss
@@ -1,136 +1,138 @@
 @import '../../scss/styles';
 
-.loading-overlay {
-  isolation: isolate;
-  height: 100%;
-  width: 100%;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  position: fixed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  pointer-events: none;
-  z-index: calc(var(--z-status) + 1);
-  transition-property: left, width;
-  transition: 250ms ease;
-
-  &.loading-overlay--entering {
-    opacity: 1;
-    animation: fade-in ease;
-    pointer-events: all;
-  }
-
-  &.loading-overlay--exiting {
-    opacity: 0;
-    animation: fade-out ease;
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
+@layer payload-default {
+  .loading-overlay {
+    isolation: isolate;
     height: 100%;
-    background-color: var(--theme-elevation-0);
-    opacity: 0.85;
-    z-index: -1;
-  }
-
-  &__bars {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    gap: 7px;
+    width: 100%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    position: fixed;
+    display: flex;
     align-items: center;
-  }
+    justify-content: center;
+    flex-direction: column;
+    pointer-events: none;
+    z-index: calc(var(--z-status) + 1);
+    transition-property: left, width;
+    transition: 250ms ease;
 
-  &__bar {
-    width: 2px;
-    background-color: currentColor;
-    height: 15px;
-
-    &:nth-child(1) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
+    &.loading-overlay--entering {
+      opacity: 1;
+      animation: fade-in ease;
+      pointer-events: all;
     }
 
-    &:nth-child(2) {
+    &.loading-overlay--exiting {
+      opacity: 0;
+      animation: fade-out ease;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--theme-elevation-0);
+      opacity: 0.85;
+      z-index: -1;
+    }
+
+    &__bars {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+      gap: 7px;
+      align-items: center;
+    }
+
+    &__bar {
+      width: 2px;
+      background-color: currentColor;
+      height: 15px;
+
+      &:nth-child(1) {
+        transform: translateY(0);
+        animation: animate-bar--odd 1.25s infinite;
+      }
+
+      &:nth-child(2) {
+        transform: translateY(-2px);
+        animation: animate-bar--even 1.25s infinite;
+      }
+
+      &:nth-child(3) {
+        transform: translateY(0);
+        animation: animate-bar--odd 1.25s infinite;
+      }
+
+      &:nth-child(4) {
+        transform: translateY(-2px);
+        animation: animate-bar--even 1.25s infinite;
+      }
+
+      &:nth-child(5) {
+        transform: translateY(0);
+        animation: animate-bar--odd 1.25s infinite;
+      }
+    }
+
+    &__text {
+      margin-top: base(0.75);
+      text-transform: uppercase;
+      font-family: var(--font-body);
+      font-size: base(0.65);
+      letter-spacing: 3px;
+    }
+  }
+
+  @keyframes animate-bar--even {
+    0% {
+      transform: translateY(2px);
+    }
+
+    50% {
       transform: translateY(-2px);
-      animation: animate-bar--even 1.25s infinite;
     }
 
-    &:nth-child(3) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
+    100% {
+      transform: translateY(2px);
     }
+  }
 
-    &:nth-child(4) {
+  @keyframes animate-bar--odd {
+    0% {
       transform: translateY(-2px);
-      animation: animate-bar--even 1.25s infinite;
     }
 
-    &:nth-child(5) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
+    50% {
+      transform: translateY(2px);
+    }
+
+    100% {
+      transform: translateY(-2px);
     }
   }
 
-  &__text {
-    margin-top: base(0.75);
-    text-transform: uppercase;
-    font-family: var(--font-body);
-    font-size: base(0.65);
-    letter-spacing: 3px;
-  }
-}
-
-@keyframes animate-bar--even {
-  0% {
-    transform: translateY(2px);
-  }
-
-  50% {
-    transform: translateY(-2px);
-  }
-
-  100% {
-    transform: translateY(2px);
-  }
-}
-
-@keyframes animate-bar--odd {
-  0% {
-    transform: translateY(-2px);
-  }
-
-  50% {
-    transform: translateY(2px);
-  }
-
-  100% {
-    transform: translateY(-2px);
-  }
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
   }
 }
diff --git a/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss b/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss
index 3b4785855..545fc8095 100644
--- a/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss
+++ b/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss
@@ -1,55 +1,57 @@
 @import '../../../scss/styles.scss';
 
-.localizer-button {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  display: flex;
-  padding-inline-start: base(0.4);
-  padding-inline-end: base(0.4);
-  background-color: var(--theme-elevation-100);
-  border-radius: var(--style-radius-s);
-
-  &__label {
-    color: var(--theme-elevation-500);
-  }
-
-  &__chevron {
-    .stroke {
-      stroke: currentColor;
-    }
-  }
-
-  &__current {
+@layer payload-default {
+  .localizer-button {
     display: flex;
     align-items: center;
-    gap: base(0.3);
-  }
+    white-space: nowrap;
+    display: flex;
+    padding-inline-start: base(0.4);
+    padding-inline-end: base(0.4);
+    background-color: var(--theme-elevation-100);
+    border-radius: var(--style-radius-s);
 
-  button {
-    color: currentColor;
-    padding: 0;
-    font-size: 1rem;
-    line-height: base(1);
-    background: transparent;
-    border: 0;
-    font-weight: 600;
-    cursor: pointer;
-
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
-    }
-
-    &:active,
-    &:focus {
-      outline: none;
-    }
-  }
-
-  @include small-break {
     &__label {
-      display: none;
+      color: var(--theme-elevation-500);
+    }
+
+    &__chevron {
+      .stroke {
+        stroke: currentColor;
+      }
+    }
+
+    &__current {
+      display: flex;
+      align-items: center;
+      gap: base(0.3);
+    }
+
+    button {
+      color: currentColor;
+      padding: 0;
+      font-size: 1rem;
+      line-height: base(1);
+      background: transparent;
+      border: 0;
+      font-weight: 600;
+      cursor: pointer;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+
+      &:active,
+      &:focus {
+        outline: none;
+      }
+    }
+
+    @include small-break {
+      &__label {
+        display: none;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/Localizer/index.scss b/packages/ui/src/elements/Localizer/index.scss
index b692fad79..f56b961bc 100644
--- a/packages/ui/src/elements/Localizer/index.scss
+++ b/packages/ui/src/elements/Localizer/index.scss
@@ -1,8 +1,10 @@
 @import '../../scss/styles.scss';
 
-.localizer {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
+@layer payload-default {
+  .localizer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
 }
diff --git a/packages/ui/src/elements/Locked/index.scss b/packages/ui/src/elements/Locked/index.scss
index 95cf809c6..6963fda2a 100644
--- a/packages/ui/src/elements/Locked/index.scss
+++ b/packages/ui/src/elements/Locked/index.scss
@@ -1,14 +1,16 @@
 @import '../../scss/styles.scss';
 
-.locked {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: all;
+@layer payload-default {
+  .locked {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: all;
 
-  &__tooltip {
-    left: 0;
-    transform: translate3d(-0%, calc(var(--caret-size) * -1), 0);
+    &__tooltip {
+      left: 0;
+      transform: translate3d(-0%, calc(var(--caret-size) * -1), 0);
+    }
   }
 }
diff --git a/packages/ui/src/elements/Nav/NavToggler/index.scss b/packages/ui/src/elements/Nav/NavToggler/index.scss
index ba1e3b4d5..e2e108f43 100644
--- a/packages/ui/src/elements/Nav/NavToggler/index.scss
+++ b/packages/ui/src/elements/Nav/NavToggler/index.scss
@@ -1,10 +1,12 @@
 @import '../../../scss/styles.scss';
 
-.nav-toggler {
-  position: relative;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  cursor: pointer;
+@layer payload-default {
+  .nav-toggler {
+    position: relative;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    cursor: pointer;
+  }
 }
diff --git a/packages/ui/src/elements/NavGroup/index.scss b/packages/ui/src/elements/NavGroup/index.scss
index b2f8ac64b..d0681b317 100644
--- a/packages/ui/src/elements/NavGroup/index.scss
+++ b/packages/ui/src/elements/NavGroup/index.scss
@@ -1,56 +1,58 @@
 @import '../../scss/styles.scss';
 
-.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);
+@layer payload-default {
+  .nav-group {
     width: 100%;
-    text-align: left;
-    display: flex;
-    align-items: flex-start;
-    padding: 0;
-    gap: base(0.5);
-    justify-content: space-between;
+    margin-bottom: base(0.5);
 
-    svg {
-      flex-shrink: 0;
-      margin-top: base(-0.2);
-    }
+    &__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;
 
-    &:hover,
-    &:focus-visible {
-      color: var(--theme-elevation-1000);
+      svg {
+        flex-shrink: 0;
+        margin-top: base(-0.2);
+      }
 
-      .stroke {
-        stroke: var(--theme-elevation-1000);
+      &:hover,
+      &:focus-visible {
+        color: var(--theme-elevation-1000);
+
+        .stroke {
+          stroke: var(--theme-elevation-1000);
+        }
+      }
+
+      &:focus-visible {
+        outline: none;
       }
     }
 
-    &:focus-visible {
-      outline: none;
+    &__indicator {
+      position: relative;
+      flex-shrink: 0;
+
+      svg .stroke {
+        stroke: var(--theme-elevation-200);
+      }
     }
-  }
 
-  &__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;
+    &--collapsed {
+      .collapsible__toggle {
+        border-bottom-right-radius: $style-radius-m;
+        border-bottom-left-radius: $style-radius-m;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/Pagination/ClickableArrow/index.scss b/packages/ui/src/elements/Pagination/ClickableArrow/index.scss
index b8d88ee9b..4cb8c6812 100644
--- a/packages/ui/src/elements/Pagination/ClickableArrow/index.scss
+++ b/packages/ui/src/elements/Pagination/ClickableArrow/index.scss
@@ -1,45 +1,47 @@
 @import '../../../scss/styles.scss';
 
-.clickable-arrow {
-  cursor: pointer;
-  @extend %btn-reset;
-  width: base(2);
-  height: base(2);
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  outline: 0;
-  padding: base(0.5);
-  color: var(--theme-elevation-800);
-  line-height: base(1);
+@layer payload-default {
+  .clickable-arrow {
+    cursor: pointer;
+    @extend %btn-reset;
+    width: base(2);
+    height: base(2);
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    outline: 0;
+    padding: base(0.5);
+    color: var(--theme-elevation-800);
+    line-height: base(1);
+
+    &:not(.clickable-arrow--is-disabled) {
+      &:hover,
+      &:focus-visible {
+        background: var(--theme-elevation-100);
+      }
+    }
 
-  &:not(.clickable-arrow--is-disabled) {
-    &:hover,
     &:focus-visible {
-      background: var(--theme-elevation-100);
+      outline: var(--accessibility-outline);
     }
-  }
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
-  }
-
-  &--right {
-    .icon {
-      transform: rotate(-90deg);
+    &--right {
+      .icon {
+        transform: rotate(-90deg);
+      }
     }
-  }
 
-  &--left .icon {
-    transform: rotate(90deg);
-  }
+    &--left .icon {
+      transform: rotate(90deg);
+    }
 
-  &--is-disabled {
-    cursor: default;
+    &--is-disabled {
+      cursor: default;
 
-    .icon .stroke {
-      stroke: var(--theme-elevation-400);
+      .icon .stroke {
+        stroke: var(--theme-elevation-400);
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/Pagination/index.scss b/packages/ui/src/elements/Pagination/index.scss
index b0b756dd1..e7cb22ceb 100644
--- a/packages/ui/src/elements/Pagination/index.scss
+++ b/packages/ui/src/elements/Pagination/index.scss
@@ -1,51 +1,53 @@
 @import '../../scss/styles.scss';
 
-.paginator {
-  display: flex;
-  margin-bottom: $baseline;
-
-  &__page {
-    cursor: pointer;
-
-    &--is-current {
-      background: var(--theme-elevation-100);
-      color: var(--theme-elevation-400);
-      cursor: default;
-    }
-
-    &--is-last-page {
-      margin-right: 0;
-    }
-  }
-
-  .clickable-arrow--right {
-    margin-right: base(0.25);
-  }
-
-  &__page {
-    @extend %btn-reset;
-    width: base(2);
-    height: base(2);
+@layer payload-default {
+  .paginator {
     display: flex;
-    justify-content: center;
-    align-content: center;
-    outline: 0;
-    padding: base(0.5);
-    color: var(--theme-elevation-800);
-    line-height: base(1);
+    margin-bottom: $baseline;
 
-    &:focus-visible {
-      outline: var(--accessibility-outline);
+    &__page {
+      cursor: pointer;
+
+      &--is-current {
+        background: var(--theme-elevation-100);
+        color: var(--theme-elevation-400);
+        cursor: default;
+      }
+
+      &--is-last-page {
+        margin-right: 0;
+      }
     }
-  }
 
-  &__page,
-  &__separator {
-    margin-right: base(0.25);
-  }
+    .clickable-arrow--right {
+      margin-right: base(0.25);
+    }
 
-  &__separator {
-    align-self: center;
-    color: var(--theme-elevation-400);
+    &__page {
+      @extend %btn-reset;
+      width: base(2);
+      height: base(2);
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      outline: 0;
+      padding: base(0.5);
+      color: var(--theme-elevation-800);
+      line-height: base(1);
+
+      &:focus-visible {
+        outline: var(--accessibility-outline);
+      }
+    }
+
+    &__page,
+    &__separator {
+      margin-right: base(0.25);
+    }
+
+    &__separator {
+      align-self: center;
+      color: var(--theme-elevation-400);
+    }
   }
 }
diff --git a/packages/ui/src/elements/PerPage/index.scss b/packages/ui/src/elements/PerPage/index.scss
index 81f547eab..96a24a52c 100644
--- a/packages/ui/src/elements/PerPage/index.scss
+++ b/packages/ui/src/elements/PerPage/index.scss
@@ -1,46 +1,48 @@
 @import '../../scss/styles.scss';
 
-.per-page {
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 4);
-  }
-
-  &__base-button {
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-  }
-
-  &__button {
-    @extend %btn-reset;
-    cursor: pointer;
-    text-align: left;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    color: var(--theme-elevation-500);
-
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
+@layer payload-default {
+  .per-page {
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
     }
 
-    svg .stroke {
-      stroke: currentColor;
+    &__base-button {
+      display: flex;
+      align-items: center;
+      font-weight: bold;
     }
-  }
 
-  &__chevron {
-    padding-left: calc(var(--base) / 4);
-  }
+    &__button {
+      @extend %btn-reset;
+      cursor: pointer;
+      text-align: left;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      color: var(--theme-elevation-500);
 
-  &__button-active {
-    font-weight: bold;
-    color: var(--theme-text);
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+
+      svg .stroke {
+        stroke: currentColor;
+      }
+    }
+
+    &__chevron {
+      padding-left: calc(var(--base) / 4);
+    }
+
+    &__button-active {
+      font-weight: bold;
+      color: var(--theme-text);
+    }
   }
 }
diff --git a/packages/ui/src/elements/Pill/index.scss b/packages/ui/src/elements/Pill/index.scss
index 9507e587e..2394525fd 100644
--- a/packages/ui/src/elements/Pill/index.scss
+++ b/packages/ui/src/elements/Pill/index.scss
@@ -1,134 +1,136 @@
 @import '../../scss/styles.scss';
 
-.pill {
-  font-size: 1rem;
-  line-height: base(1.2);
-  display: inline-flex;
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-s;
-  cursor: default;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: 0;
-  padding: 0 base(0.4);
-  align-items: center;
-  flex-shrink: 0;
-  gap: base(0.2);
-
-  &--rounded {
-    border-radius: var(--style-radius-l);
-    line-height: 18px;
-    font-size: 12px;
-  }
-
-  &:active,
-  &:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: var(--accessibility-outline);
-    outline-offset: var(--accessibility-outline-offset);
-  }
-
-  .icon {
-    flex-shrink: 0;
-    margin: base(0.1);
-  }
-
-  &__label {
+@layer payload-default {
+  .pill {
+    font-size: 1rem;
+    line-height: base(1.2);
+    display: inline-flex;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-s;
+    cursor: default;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-  }
+    border: 0;
+    padding: 0 base(0.4);
+    align-items: center;
+    flex-shrink: 0;
+    gap: base(0.2);
 
-  &--has-action {
-    cursor: pointer;
-    text-decoration: none;
-  }
-
-  &--is-dragging {
-    cursor: grabbing;
-  }
-
-  &--has-icon {
-    padding-inline-start: base(0.4);
-    padding-inline-end: base(0.3);
-
-    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 {
-        background: var(--theme-elevation-100);
-      }
-
-      &:active {
-        background: var(--theme-elevation-100);
-      }
-    }
-  }
-
-  &--style-light {
-    &.pill--has-action {
-      &:hover {
-        background: var(--theme-elevation-100);
-      }
-
-      &: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));
+    &--rounded {
+      border-radius: var(--style-radius-l);
+      line-height: 18px;
+      font-size: 12px;
     }
 
-    &.pill--has-action {
-      &:hover {
-        background: var(--theme-elevation-750);
+    &:active,
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
+
+    .icon {
+      flex-shrink: 0;
+      margin: base(0.1);
+    }
+
+    &__label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &--has-action {
+      cursor: pointer;
+      text-decoration: none;
+    }
+
+    &--is-dragging {
+      cursor: grabbing;
+    }
+
+    &--has-icon {
+      padding-inline-start: base(0.4);
+      padding-inline-end: base(0.3);
+
+      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 {
+          background: var(--theme-elevation-100);
+        }
+
+        &:active {
+          background: var(--theme-elevation-100);
+        }
+      }
+    }
+
+    &--style-light {
+      &.pill--has-action {
+        &:hover {
+          background: var(--theme-elevation-100);
+        }
+
+        &: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));
       }
 
-      &:active {
-        background: var(--theme-elevation-700);
+      &.pill--has-action {
+        &:hover {
+          background: var(--theme-elevation-750);
+        }
+
+        &:active {
+          background: var(--theme-elevation-700);
+        }
       }
     }
   }
diff --git a/packages/ui/src/elements/Popup/PopupButtonList/index.scss b/packages/ui/src/elements/Popup/PopupButtonList/index.scss
index 7d70602a7..81f08a684 100644
--- a/packages/ui/src/elements/Popup/PopupButtonList/index.scss
+++ b/packages/ui/src/elements/Popup/PopupButtonList/index.scss
@@ -1,56 +1,58 @@
 @import '../../../scss/styles.scss';
 
-.popup-button-list {
-  --list-button-padding: calc(var(--base) * 0.5);
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-  gap: 3px;
-  [dir='rtl'] &__text-align--left {
-    text-align: right;
-  }
-  &__text-align--left {
+@layer payload-default {
+  .popup-button-list {
+    --list-button-padding: calc(var(--base) * 0.5);
+    display: flex;
+    flex-direction: column;
     text-align: left;
-  }
+    gap: 3px;
+    [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;
-  }
+    &__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: 2px;
-    padding-bottom: 2px;
-    cursor: pointer;
-    text-align: inherit;
-    line-height: var(--base);
-    text-decoration: none;
-    border-radius: 3px;
-
-    button {
+    &__button {
       @extend %btn-reset;
+      padding-left: var(--list-button-padding);
+      padding-right: var(--list-button-padding);
+      padding-top: 2px;
+      padding-bottom: 2px;
+      cursor: pointer;
+      text-align: inherit;
+      line-height: var(--base);
+      text-decoration: none;
+      border-radius: 3px;
 
-      &:focus-visible {
-        outline: none;
+      button {
+        @extend %btn-reset;
+
+        &:focus-visible {
+          outline: none;
+        }
+      }
+
+      &:hover,
+      &:focus-visible,
+      &:focus-within {
+        background-color: var(--popup-button-highlight);
       }
     }
 
-    &:hover,
-    &:focus-visible,
-    &:focus-within {
-      background-color: var(--popup-button-highlight);
+    &__button--selected {
+      background-color: var(--theme-elevation-150);
     }
   }
-
-  &__button--selected {
-    background-color: var(--theme-elevation-150);
-  }
 }
diff --git a/packages/ui/src/elements/Popup/PopupTrigger/index.scss b/packages/ui/src/elements/Popup/PopupTrigger/index.scss
index 688574642..65d3f7177 100644
--- a/packages/ui/src/elements/Popup/PopupTrigger/index.scss
+++ b/packages/ui/src/elements/Popup/PopupTrigger/index.scss
@@ -1,29 +1,31 @@
 @import '../../../scss/styles.scss';
 
-.popup-button {
-  height: 100%;
-  color: currentColor;
-  padding: 0;
-  font-size: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  border: 0;
-  cursor: pointer;
-  display: inline-flex;
+@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;
-  }
+    &--background {
+      background: transparent;
+    }
 
-  &--size-small {
-    padding: base(0.4);
-  }
+    &--size-small {
+      padding: base(0.4);
+    }
 
-  &--size-medium {
-    padding: base(0.6);
-  }
+    &--size-medium {
+      padding: base(0.6);
+    }
 
-  &--size-large {
-    padding: base(0.8);
+    &--size-large {
+      padding: base(0.8);
+    }
   }
 }
diff --git a/packages/ui/src/elements/Popup/index.scss b/packages/ui/src/elements/Popup/index.scss
index 6aaf5835c..d71c0fbda 100644
--- a/packages/ui/src/elements/Popup/index.scss
+++ b/packages/ui/src/elements/Popup/index.scss
@@ -1,216 +1,147 @@
 @import '../../scss/styles.scss';
 
-.popup {
-  --popup-button-highlight: var(--theme-elevation-200);
-  --popup-bg: var(--theme-input-bg);
-  --popup-text: var(--theme-text);
-  --popup-caret-size: 10px;
-  --popup-x-padding: calc(var(--base) * 0.33);
-  --popup-padding: calc(var(--base) * 0.5);
-  --button-size-offset: -8px;
-  position: relative;
-
-  &__trigger-wrap {
-    display: flex;
-    align-items: stretch;
-    height: 100%;
-  }
-
-  &__content {
-    position: absolute;
-    background: var(--popup-bg);
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    z-index: var(--z-popup);
-    max-width: calc(100vw - #{$baseline});
-    color: var(--popup-text);
-    border-radius: 4px;
-    padding-left: var(--popup-padding);
-    padding-right: var(--popup-padding);
-    min-width: var(--popup-width, auto);
-  }
-
-  &__hide-scrollbar {
-    overflow: hidden;
-  }
-
-  &__scroll-container {
-    overflow-y: auto;
-    white-space: nowrap;
-    width: calc(100% + var(--scrollbar-width));
-    padding-top: var(--popup-padding);
-    padding-bottom: var(--popup-padding);
-  }
-
-  &__scroll-content {
-    width: calc(100% - var(--scrollbar-width));
-  }
-
-  &--show-scrollbar {
-    .popup__scroll-container,
-    .popup__scroll-content {
-      width: 100%;
-    }
-  }
-
-  &:focus,
-  &:active {
-    outline: none;
-  }
-
-  ////////////////////////////////
-  // SIZE
-  ////////////////////////////////
-
-  &--size-small {
-    --popup-width: 100px;
-    .popup__content {
-      @include shadow-m;
-    }
-  }
-
-  &--size-medium {
-    --popup-width: 150px;
-    .popup__content {
-      @include shadow-lg;
-    }
-  }
-
-  &--size-large {
-    --popup-width: 200px;
-    .popup__content {
-      @include shadow-lg;
-    }
-  }
-
-  ////////////////////////////////
-  /// BUTTON SIZE
-  ////////////////////////////////
-
-  &--button-size-small {
+@layer payload-default {
+  .popup {
+    --popup-button-highlight: var(--theme-elevation-200);
+    --popup-bg: var(--theme-input-bg);
+    --popup-text: var(--theme-text);
+    --popup-caret-size: 10px;
+    --popup-x-padding: calc(var(--base) * 0.33);
+    --popup-padding: calc(var(--base) * 0.5);
     --button-size-offset: -8px;
-  }
+    position: relative;
 
-  &--button-size-medium {
-    --button-size-offset: -4px;
-  }
-
-  &--button-size-large {
-    --button-size-offset: 0px;
-  }
-
-  ////////////////////////////////
-  // HORIZONTAL ALIGNMENT
-  ////////////////////////////////
-  [dir='rtl'] &--h-align-left {
-    .popup__caret {
-      right: var(--popup-padding);
-      left: unset;
-    }
-  }
-  &--h-align-left {
-    .popup__caret {
-      left: var(--popup-padding);
-    }
-  }
-  &--h-align-center {
-    .popup__content {
-      left: 50%;
-      transform: translateX(-50%);
+    &__trigger-wrap {
+      display: flex;
+      align-items: stretch;
+      height: 100%;
     }
 
-    .popup__caret {
-      left: 50%;
-      transform: translateX(-50%);
-    }
-  }
-
-  [dir='rtl'] &--h-align-right {
-    .popup__content {
-      right: unset;
-      left: 0;
+    &__content {
+      position: absolute;
+      background: var(--popup-bg);
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      z-index: var(--z-popup);
+      max-width: calc(100vw - #{$baseline});
+      color: var(--popup-text);
+      border-radius: 4px;
+      padding-left: var(--popup-padding);
+      padding-right: var(--popup-padding);
+      min-width: var(--popup-width, auto);
     }
 
-    .popup__caret {
-      right: unset;
-      left: var(--popup-padding);
-    }
-  }
-
-  &--h-align-right {
-    .popup__content {
-      right: var(--button-size-offset);
+    &__hide-scrollbar {
+      overflow: hidden;
     }
 
-    .popup__caret {
-      right: var(--popup-padding);
-    }
-  }
-
-  ////////////////////////////////
-  // VERTICAL ALIGNMENT
-  ////////////////////////////////
-
-  &__caret {
-    position: absolute;
-    border: var(--popup-caret-size) solid transparent;
-  }
-
-  &--v-align-top {
-    .popup__content {
-      @include shadow-lg;
-      bottom: calc(100% + var(--popup-caret-size));
+    &__scroll-container {
+      overflow-y: auto;
+      white-space: nowrap;
+      width: calc(100% + var(--scrollbar-width));
+      padding-top: var(--popup-padding);
+      padding-bottom: var(--popup-padding);
     }
 
-    .popup__caret {
-      top: calc(100% - 1px);
-      border-top-color: var(--popup-bg);
-    }
-  }
-
-  &--v-align-bottom {
-    .popup__content {
-      @include shadow-lg-top;
-      top: calc(100% + var(--popup-caret-size));
+    &__scroll-content {
+      width: calc(100% - var(--scrollbar-width));
     }
 
-    .popup__caret {
-      bottom: calc(100% - 1px);
-      border-bottom-color: var(--popup-bg);
+    &--show-scrollbar {
+      .popup__scroll-container,
+      .popup__scroll-content {
+        width: 100%;
+      }
     }
-  }
 
-  ////////////////////////////////
-  // ACTIVE
-  ////////////////////////////////
-
-  &--active {
-    .popup__content {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: all;
+    &:focus,
+    &:active {
+      outline: none;
     }
-  }
 
-  @include mid-break {
-    --popup-padding: calc(var(--base) * 0.25);
+    ////////////////////////////////
+    // SIZE
+    ////////////////////////////////
 
+    &--size-small {
+      --popup-width: 100px;
+      .popup__content {
+        @include shadow-m;
+      }
+    }
+
+    &--size-medium {
+      --popup-width: 150px;
+      .popup__content {
+        @include shadow-lg;
+      }
+    }
+
+    &--size-large {
+      --popup-width: 200px;
+      .popup__content {
+        @include shadow-lg;
+      }
+    }
+
+    ////////////////////////////////
+    /// BUTTON SIZE
+    ////////////////////////////////
+
+    &--button-size-small {
+      --button-size-offset: -8px;
+    }
+
+    &--button-size-medium {
+      --button-size-offset: -4px;
+    }
+
+    &--button-size-large {
+      --button-size-offset: 0px;
+    }
+
+    ////////////////////////////////
+    // HORIZONTAL ALIGNMENT
+    ////////////////////////////////
+    [dir='rtl'] &--h-align-left {
+      .popup__caret {
+        right: var(--popup-padding);
+        left: unset;
+      }
+    }
+    &--h-align-left {
+      .popup__caret {
+        left: var(--popup-padding);
+      }
+    }
     &--h-align-center {
       .popup__content {
         left: 50%;
-        transform: translateX(-0%);
+        transform: translateX(-50%);
       }
 
       .popup__caret {
         left: 50%;
-        transform: translateX(-0%);
+        transform: translateX(-50%);
+      }
+    }
+
+    [dir='rtl'] &--h-align-right {
+      .popup__content {
+        right: unset;
+        left: 0;
+      }
+
+      .popup__caret {
+        right: unset;
+        left: var(--popup-padding);
       }
     }
 
     &--h-align-right {
       .popup__content {
-        right: 0;
+        right: var(--button-size-offset);
       }
 
       .popup__caret {
@@ -218,31 +149,102 @@
       }
     }
 
-    &--force-h-align-left {
+    ////////////////////////////////
+    // VERTICAL ALIGNMENT
+    ////////////////////////////////
+
+    &__caret {
+      position: absolute;
+      border: var(--popup-caret-size) solid transparent;
+    }
+
+    &--v-align-top {
       .popup__content {
-        left: 0;
-        right: unset;
-        transform: unset;
+        @include shadow-lg;
+        bottom: calc(100% + var(--popup-caret-size));
       }
 
       .popup__caret {
-        left: var(--popup-padding);
-        right: unset;
-        transform: unset;
+        top: calc(100% - 1px);
+        border-top-color: var(--popup-bg);
       }
     }
 
-    &--force-h-align-right {
+    &--v-align-bottom {
       .popup__content {
-        right: 0;
-        left: unset;
-        transform: unset;
+        @include shadow-lg-top;
+        top: calc(100% + var(--popup-caret-size));
       }
 
       .popup__caret {
-        right: var(--popup-padding);
-        left: unset;
-        transform: unset;
+        bottom: calc(100% - 1px);
+        border-bottom-color: var(--popup-bg);
+      }
+    }
+
+    ////////////////////////////////
+    // ACTIVE
+    ////////////////////////////////
+
+    &--active {
+      .popup__content {
+        opacity: 1;
+        visibility: visible;
+        pointer-events: all;
+      }
+    }
+
+    @include mid-break {
+      --popup-padding: calc(var(--base) * 0.25);
+
+      &--h-align-center {
+        .popup__content {
+          left: 50%;
+          transform: translateX(-0%);
+        }
+
+        .popup__caret {
+          left: 50%;
+          transform: translateX(-0%);
+        }
+      }
+
+      &--h-align-right {
+        .popup__content {
+          right: 0;
+        }
+
+        .popup__caret {
+          right: var(--popup-padding);
+        }
+      }
+
+      &--force-h-align-left {
+        .popup__content {
+          left: 0;
+          right: unset;
+          transform: unset;
+        }
+
+        .popup__caret {
+          left: var(--popup-padding);
+          right: unset;
+          transform: unset;
+        }
+      }
+
+      &--force-h-align-right {
+        .popup__content {
+          right: 0;
+          left: unset;
+          transform: unset;
+        }
+
+        .popup__caret {
+          right: var(--popup-padding);
+          left: unset;
+          transform: unset;
+        }
       }
     }
   }
diff --git a/packages/ui/src/elements/PreviewSizes/index.scss b/packages/ui/src/elements/PreviewSizes/index.scss
index c3284362f..f4d5ac3ac 100644
--- a/packages/ui/src/elements/PreviewSizes/index.scss
+++ b/packages/ui/src/elements/PreviewSizes/index.scss
@@ -1,145 +1,147 @@
 @import '../../scss/styles.scss';
 
-.preview-sizes {
-  margin: base(2) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1);
-  border-top: 1px solid var(--theme-elevation-150);
-  max-height: calc(100vh - base(6));
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-
-  &__imageWrap {
-    min-width: 60%;
-    border-right: 1px solid var(--theme-elevation-150);
-  }
-
-  &__preview {
-    max-height: calc(100% - base(6));
-    padding: base(1.5) base(1.5) base(1.5) var(--gutter-h);
-    object-fit: contain;
-  }
-
-  &__meta {
-    border-bottom: 1px solid var(--theme-elevation-150);
-    padding: base(1) var(--gutter-h);
+@layer payload-default {
+  .preview-sizes {
+    margin: base(2) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1);
+    border-top: 1px solid var(--theme-elevation-150);
+    max-height: calc(100vh - base(6));
+    height: 100%;
     display: flex;
-    flex-wrap: wrap;
-    column-gap: base(1);
+    flex-direction: row;
 
-    .file-meta {
+    &__imageWrap {
+      min-width: 60%;
+      border-right: 1px solid var(--theme-elevation-150);
+    }
+
+    &__preview {
+      max-height: calc(100% - base(6));
+      padding: base(1.5) base(1.5) base(1.5) var(--gutter-h);
+      object-fit: contain;
+    }
+
+    &__meta {
+      border-bottom: 1px solid var(--theme-elevation-150);
+      padding: base(1) var(--gutter-h);
       display: flex;
       flex-wrap: wrap;
       column-gap: base(1);
-      text-wrap: wrap;
-      width: 100%;
+
+      .file-meta {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: base(1);
+        text-wrap: wrap;
+        width: 100%;
+      }
+
+      .file-meta__url {
+        width: 100%;
+      }
     }
 
-    .file-meta__url {
-      width: 100%;
-    }
-  }
-
-  &__sizeName,
-  .file-meta__size-type {
-    color: var(--theme-elevation-600);
-  }
-
-  &__listWrap {
-    padding-right: var(--gutter-h);
-    overflow-y: scroll;
-
-    &::-webkit-scrollbar {
-      width: 0;
-    }
-
-    &::after {
-      content: '';
-      display: block;
-      position: sticky;
-      bottom: 0;
-      left: 0;
-      height: base(4);
-      width: 100%;
-      background: linear-gradient(180deg, transparent 0, var(--theme-bg) 100%);
-      pointer-events: none;
-    }
-  }
-
-  &__list {
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    gap: base(0.5);
-    margin: 0;
-    padding: base(1.5) 0 base(1.5) base(1.5);
-  }
-
-  &__sizeOption {
-    padding: base(0.5);
-    display: flex;
-    gap: base(1);
-    cursor: pointer;
-    transition: background-color 0.2s ease-in-out;
-
-    &:hover {
-      background-color: var(--theme-elevation-100);
-    }
-  }
-
-  &--selected {
-    background-color: var(--theme-elevation-100);
-  }
-
-  &__image {
-    display: flex;
-    width: 30%;
-    min-width: 30%;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__sizeMeta {
-    padding: base(0.5) 0;
-  }
-
-  &__sizeName,
-  &__sizeMeta {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  @include mid-break {
-    margin-top: base(1);
-    max-height: calc(100vh - base(4));
-  }
-
-  @include small-break {
-    margin-top: 0;
-    max-height: calc(100vh - base(3.5));
-    flex-direction: column;
-    justify-content: space-between;
-
-    &__imageWrap {
-      height: 60%;
-      border: none;
-    }
-
-    &__list,
-    &__preview {
-      padding: calc(var(--gutter-h) * 2) var(--gutter-h);
-    }
-
-    &__preview {
-      max-height: calc(100% - base(4));
-    }
-
-    &__sizeOption {
-      padding: base(0.25);
+    &__sizeName,
+    .file-meta__size-type {
+      color: var(--theme-elevation-600);
     }
 
     &__listWrap {
-      border-top: 1px solid var(--theme-elevation-150);
-      height: 40%;
+      padding-right: var(--gutter-h);
+      overflow-y: scroll;
+
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+
+      &::after {
+        content: '';
+        display: block;
+        position: sticky;
+        bottom: 0;
+        left: 0;
+        height: base(4);
+        width: 100%;
+        background: linear-gradient(180deg, transparent 0, var(--theme-bg) 100%);
+        pointer-events: none;
+      }
+    }
+
+    &__list {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.5);
+      margin: 0;
+      padding: base(1.5) 0 base(1.5) base(1.5);
+    }
+
+    &__sizeOption {
+      padding: base(0.5);
+      display: flex;
+      gap: base(1);
+      cursor: pointer;
+      transition: background-color 0.2s ease-in-out;
+
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+    }
+
+    &--selected {
+      background-color: var(--theme-elevation-100);
+    }
+
+    &__image {
+      display: flex;
+      width: 30%;
+      min-width: 30%;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__sizeMeta {
+      padding: base(0.5) 0;
+    }
+
+    &__sizeName,
+    &__sizeMeta {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    @include mid-break {
+      margin-top: base(1);
+      max-height: calc(100vh - base(4));
+    }
+
+    @include small-break {
+      margin-top: 0;
+      max-height: calc(100vh - base(3.5));
+      flex-direction: column;
+      justify-content: space-between;
+
+      &__imageWrap {
+        height: 60%;
+        border: none;
+      }
+
+      &__list,
+      &__preview {
+        padding: calc(var(--gutter-h) * 2) var(--gutter-h);
+      }
+
+      &__preview {
+        max-height: calc(100% - base(4));
+      }
+
+      &__sizeOption {
+        padding: base(0.25);
+      }
+
+      &__listWrap {
+        border-top: 1px solid var(--theme-elevation-150);
+        height: 40%;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/PublishMany/index.scss b/packages/ui/src/elements/PublishMany/index.scss
index 94864a7f1..804a46408 100644
--- a/packages/ui/src/elements/PublishMany/index.scss
+++ b/packages/ui/src/elements/PublishMany/index.scss
@@ -1,37 +1,39 @@
 @import '../../scss/styles.scss';
 
-.publish-many {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  &__wrapper {
-    z-index: 1;
-    position: relative;
+@layer payload-default {
+  .publish-many {
+    @include blur-bg;
     display: flex;
-    flex-direction: column;
-    gap: base(0.8);
-    padding: base(2);
-  }
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: base(0.4);
-
-    > * {
-      margin: 0;
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.8);
+      padding: base(2);
     }
-  }
 
-  &__controls {
-    display: flex;
-    gap: base(0.4);
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
 
-    .btn {
-      margin: 0;
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: base(0.4);
+
+      .btn {
+        margin: 0;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss b/packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss
index 694307444..e11e0e929 100644
--- a/packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss
+++ b/packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss
@@ -1,9 +1,11 @@
 @import '../../../scss/styles.scss';
 
-.clear-indicator {
-  cursor: pointer;
+@layer payload-default {
+  .clear-indicator {
+    cursor: pointer;
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
   }
 }
diff --git a/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.scss b/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.scss
index 3c1af3c3b..09e4ca8a8 100644
--- a/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.scss
+++ b/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.scss
@@ -1,16 +1,18 @@
 @import '../../../scss/styles.scss';
 
-.dropdown-indicator {
-  cursor: pointer;
-  @include btn-reset;
+@layer payload-default {
+  .dropdown-indicator {
+    cursor: pointer;
+    @include btn-reset;
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
-  }
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
 
-  &__icon {
-    .stroke {
-      stroke-width: 1px;
+    &__icon {
+      .stroke {
+        stroke-width: 1px;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/ReactSelect/MultiValue/index.scss b/packages/ui/src/elements/ReactSelect/MultiValue/index.scss
index 1960b1772..c1ecec8bf 100644
--- a/packages/ui/src/elements/ReactSelect/MultiValue/index.scss
+++ b/packages/ui/src/elements/ReactSelect/MultiValue/index.scss
@@ -1,37 +1,39 @@
 @import '../../../scss/styles.scss';
 
-.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'] {
+@layer payload-default {
   .multi-value {
     &.rs__multi-value {
-      background: var(--theme-elevation-50);
-    }
-  }
-}
+      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);
 
-html[data-theme='dark'] {
-  .multi-value {
-    &.rs__multi-value {
-      background: var(--theme-elevation-50);
+      &: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);
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss b/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss
index 93253c7e2..22b529482 100644
--- a/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss
+++ b/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss
@@ -1,20 +1,22 @@
 @import '../../../scss/styles.scss';
 
-.multi-value-label {
-  @extend %small;
-  display: flex;
-  align-items: center;
-  max-width: 150px;
-  color: currentColor;
-  padding: 0 base(0.4);
+@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;
-  }
+    &__text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
   }
 }
diff --git a/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.scss b/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.scss
index 3b543655c..df7399ee2 100644
--- a/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.scss
+++ b/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.scss
@@ -1,24 +1,26 @@
 @import '../../../scss/styles.scss';
 
-.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;
+@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);
-  }
+    &:hover {
+      color: var(--theme-elevation-800);
+      background: var(--theme-elevation-150);
+    }
 
-  &__icon {
-    width: 100%;
-    height: 100%;
+    &__icon {
+      width: 100%;
+      height: 100%;
+    }
   }
 }
diff --git a/packages/ui/src/elements/ReactSelect/ValueContainer/index.scss b/packages/ui/src/elements/ReactSelect/ValueContainer/index.scss
index 5aeb03af1..47901e7ef 100644
--- a/packages/ui/src/elements/ReactSelect/ValueContainer/index.scss
+++ b/packages/ui/src/elements/ReactSelect/ValueContainer/index.scss
@@ -1,31 +1,33 @@
 @import '../../../scss/styles.scss';
 
-.value-container {
-  flex-grow: 1;
-  min-width: 0;
+@layer payload-default {
+  .value-container {
+    flex-grow: 1;
+    min-width: 0;
 
-  .rs__value-container {
-    overflow: visible;
-    padding: 2px;
-    gap: 2px;
+    .rs__value-container {
+      overflow: visible;
+      padding: 2px;
+      gap: 2px;
 
-    > * {
-      margin: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-      color: currentColor;
-
-      .field-label {
+      > * {
+        margin: 0;
+        padding-top: 0;
         padding-bottom: 0;
+        color: currentColor;
+
+        .field-label {
+          padding-bottom: 0;
+        }
       }
-    }
 
-    &--is-multi {
-      width: calc(100% + base(0.25));
+      &--is-multi {
+        width: calc(100% + base(0.25));
 
-      &.rs__value-container--has-value {
-        padding: 0;
-        margin-inline-start: -4px;
+        &.rs__value-container--has-value {
+          padding: 0;
+          margin-inline-start: -4px;
+        }
       }
     }
   }
diff --git a/packages/ui/src/elements/ReactSelect/index.scss b/packages/ui/src/elements/ReactSelect/index.scss
index 29409f6d2..60cc186ee 100644
--- a/packages/ui/src/elements/ReactSelect/index.scss
+++ b/packages/ui/src/elements/ReactSelect/index.scss
@@ -1,81 +1,83 @@
 @import '../../scss/styles';
 
-.react-select-container {
-  width: 100%;
-}
-
-.react-select {
-  .rs__control {
-    @include formInput;
-    height: auto;
-    padding: base(0.4) base(0.6);
-    flex-wrap: nowrap;
+@layer payload-default {
+  .react-select-container {
+    width: 100%;
   }
 
-  .rs__indicators {
-    gap: calc(var(--base) / 4);
-  }
-
-  .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-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);
+  .react-select {
+    .rs__control {
+      @include formInput;
+      height: auto;
+      padding: base(0.4) base(0.6);
+      flex-wrap: nowrap;
     }
 
-    &--is-selected {
-      background-color: var(--theme-elevation-300);
+    .rs__indicators {
+      gap: calc(var(--base) / 4);
     }
-  }
 
-  &--error,
-  &--error:hover,
-  &--error:focus-within {
-    div.rs__control {
-      background-color: var(--theme-error-50);
-      border: 1px solid var(--theme-error-500);
+    .rs__indicator {
+      padding: 0px 4px;
+      cursor: pointer;
+    }
 
-      & > div.rs__indicator > button.dropdown-indicator[type='button'] {
-        border: none;
+    .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-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);
       }
     }
-  }
 
-  &.rs--is-disabled .rs__control {
-    @include readOnly;
+    &--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;
+    }
   }
 }
diff --git a/packages/ui/src/elements/RelationshipTable/cells/DrawerLink/index.scss b/packages/ui/src/elements/RelationshipTable/cells/DrawerLink/index.scss
index 0df588c8c..42d6e2268 100644
--- a/packages/ui/src/elements/RelationshipTable/cells/DrawerLink/index.scss
+++ b/packages/ui/src/elements/RelationshipTable/cells/DrawerLink/index.scss
@@ -1,4 +1,6 @@
-.drawer-link {
-  display: flex;
-  gap: calc(var(--base) / 2);
+@layer payload-default {
+  .drawer-link {
+    display: flex;
+    gap: calc(var(--base) / 2);
+  }
 }
diff --git a/packages/ui/src/elements/RelationshipTable/index.scss b/packages/ui/src/elements/RelationshipTable/index.scss
index 271e41bc3..a2ccb6c41 100644
--- a/packages/ui/src/elements/RelationshipTable/index.scss
+++ b/packages/ui/src/elements/RelationshipTable/index.scss
@@ -1,26 +1,28 @@
-.relationship-table {
-  position: relative;
+@layer payload-default {
+  .relationship-table {
+    position: relative;
 
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: var(--base);
-  }
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: var(--base);
+    }
 
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: var(--base);
-  }
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: var(--base);
+    }
 
-  &__columns-inner {
-    padding-bottom: var(--base);
-  }
+    &__columns-inner {
+      padding-bottom: var(--base);
+    }
 
-  .table {
-    th,
-    td:first-child {
-      min-width: 0;
+    .table {
+      th,
+      td:first-child {
+        min-width: 0;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/RenderTitle/index.scss b/packages/ui/src/elements/RenderTitle/index.scss
index cb6254a4d..33a301fdd 100644
--- a/packages/ui/src/elements/RenderTitle/index.scss
+++ b/packages/ui/src/elements/RenderTitle/index.scss
@@ -1,9 +1,11 @@
 @import '../../scss/styles.scss';
 
-.render-title {
-  display: inline-block;
-  &__id {
-    vertical-align: middle;
-    position: relative;
+@layer payload-default {
+  .render-title {
+    display: inline-block;
+    &__id {
+      vertical-align: middle;
+      position: relative;
+    }
   }
 }
diff --git a/packages/ui/src/elements/SearchFilter/index.scss b/packages/ui/src/elements/SearchFilter/index.scss
index bec9c9462..8de168b17 100644
--- a/packages/ui/src/elements/SearchFilter/index.scss
+++ b/packages/ui/src/elements/SearchFilter/index.scss
@@ -1,36 +1,39 @@
 @import '../../scss/styles';
-[dir='rtl'] .search-filter {
-  svg {
-    right: base(0.5);
-    left: 0;
-  }
-  &__input {
-    padding-right: base(2);
-    padding-left: 0;
-  }
-}
-.search-filter {
-  position: relative;
 
-  svg {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: base(0.5);
+@layer payload-default {
+  [dir='rtl'] .search-filter {
+    svg {
+      right: base(0.5);
+      left: 0;
+    }
+    &__input {
+      padding-right: base(2);
+      padding-left: 0;
+    }
   }
+  .search-filter {
+    position: relative;
 
-  &__input {
-    @include formInput;
-    height: auto;
-    padding: 0;
-    box-shadow: none;
-    background-color: var(--theme-elevation-50);
-    border: none;
+    svg {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: base(0.5);
+    }
 
-    &:not(:disabled) {
-      &:hover,
-      &:focus {
-        box-shadow: none;
+    &__input {
+      @include formInput;
+      height: auto;
+      padding: 0;
+      box-shadow: none;
+      background-color: var(--theme-elevation-50);
+      border: none;
+
+      &:not(:disabled) {
+        &:hover,
+        &:focus {
+          box-shadow: none;
+        }
       }
     }
   }
diff --git a/packages/ui/src/elements/SelectAll/index.scss b/packages/ui/src/elements/SelectAll/index.scss
index 9530c4e04..c2c74692d 100644
--- a/packages/ui/src/elements/SelectAll/index.scss
+++ b/packages/ui/src/elements/SelectAll/index.scss
@@ -1,5 +1,7 @@
-.select-all {
-  &__checkbox {
-    display: block;
+@layer payload-default {
+  .select-all {
+    &__checkbox {
+      display: block;
+    }
   }
 }
diff --git a/packages/ui/src/elements/SelectRow/index.scss b/packages/ui/src/elements/SelectRow/index.scss
index 9e316db58..f0baca873 100644
--- a/packages/ui/src/elements/SelectRow/index.scss
+++ b/packages/ui/src/elements/SelectRow/index.scss
@@ -1,6 +1,8 @@
-.select-row {
-  &__checkbox {
-    display: block;
-    width: min-content;
+@layer payload-default {
+  .select-row {
+    &__checkbox {
+      display: block;
+      width: min-content;
+    }
   }
 }
diff --git a/packages/ui/src/elements/ShimmerEffect/index.scss b/packages/ui/src/elements/ShimmerEffect/index.scss
index 402542fed..5c16f0964 100644
--- a/packages/ui/src/elements/ShimmerEffect/index.scss
+++ b/packages/ui/src/elements/ShimmerEffect/index.scss
@@ -1,29 +1,31 @@
-.shimmer-effect {
-  position: relative;
-  overflow: hidden;
-  background-color: var(--theme-elevation-50);
+@layer payload-default {
+  .shimmer-effect {
+    position: relative;
+    overflow: hidden;
+    background-color: var(--theme-elevation-50);
 
-  &__shine {
-    position: absolute;
-    scale: 1.5;
-    width: 100%;
-    height: 100%;
-    transform: translateX(-100%);
-    animation: shimmer 1.75s infinite;
-    opacity: 0.75;
-    background: linear-gradient(
-      100deg,
-      var(--theme-elevation-50) 0%,
-      var(--theme-elevation-50) 15%,
-      var(--theme-elevation-150) 50%,
-      var(--theme-elevation-50) 85%,
-      var(--theme-elevation-50) 100%
-    );
-  }
-}
-
-@keyframes shimmer {
-  100% {
-    transform: translate3d(100%, 0, 0);
+    &__shine {
+      position: absolute;
+      scale: 1.5;
+      width: 100%;
+      height: 100%;
+      transform: translateX(-100%);
+      animation: shimmer 1.75s infinite;
+      opacity: 0.75;
+      background: linear-gradient(
+        100deg,
+        var(--theme-elevation-50) 0%,
+        var(--theme-elevation-50) 15%,
+        var(--theme-elevation-150) 50%,
+        var(--theme-elevation-50) 85%,
+        var(--theme-elevation-50) 100%
+      );
+    }
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translate3d(100%, 0, 0);
+    }
   }
 }
diff --git a/packages/ui/src/elements/SortColumn/index.scss b/packages/ui/src/elements/SortColumn/index.scss
index e3b65b426..4d62dca9e 100644
--- a/packages/ui/src/elements/SortColumn/index.scss
+++ b/packages/ui/src/elements/SortColumn/index.scss
@@ -1,66 +1,68 @@
 @import '../../scss/styles.scss';
 
-.sort-column {
-  display: flex;
-  gap: calc(var(--base) / 2);
-  align-items: center;
-
-  &__label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__label,
-  .btn {
-    vertical-align: middle;
-    display: inline-block;
-  }
-
-  &__label {
-    cursor: default;
-  }
-
-  &__buttons {
+@layer payload-default {
+  .sort-column {
     display: flex;
+    gap: calc(var(--base) / 2);
     align-items: center;
-    gap: calc(var(--base) / 4);
-  }
 
-  &__button {
-    margin: 0;
-    opacity: 0.3;
-    padding: calc(var(--base) / 4);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    border: none;
-    outline: none;
-    cursor: pointer;
+    &__label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-    &.sort-column--active {
-      opacity: 1;
-      visibility: visible;
+    &__label,
+    .btn {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    &__label {
+      cursor: default;
+    }
+
+    &__buttons {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) / 4);
+    }
+
+    &__button {
+      margin: 0;
+      opacity: 0.3;
+      padding: calc(var(--base) / 4);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      outline: none;
+      cursor: pointer;
+
+      &.sort-column--active {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      &:hover {
+        opacity: 0.7;
+      }
     }
 
     &:hover {
-      opacity: 0.7;
+      .btn {
+        opacity: 0.4;
+        visibility: visible;
+      }
     }
-  }
 
-  &:hover {
-    .btn {
-      opacity: 0.4;
-      visibility: visible;
-    }
-  }
+    &--appearance-condensed {
+      gap: calc(var(--base) / 4);
 
-  &--appearance-condensed {
-    gap: calc(var(--base) / 4);
-
-    .sort-column__buttons {
-      gap: 0;
+      .sort-column__buttons {
+        gap: 0;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/SortComplex/index.scss b/packages/ui/src/elements/SortComplex/index.scss
index ce0788955..a04a32cec 100644
--- a/packages/ui/src/elements/SortComplex/index.scss
+++ b/packages/ui/src/elements/SortComplex/index.scss
@@ -1,36 +1,38 @@
 @import '../../scss/styles.scss';
 
-.sort-complex {
-  background: var(--theme-elevation-100);
-  padding: base(0.5);
-  display: flex;
-
-  &__wrap {
-    width: 100%;
+@layer payload-default {
+  .sort-complex {
+    background: var(--theme-elevation-100);
+    padding: base(0.5);
     display: flex;
-    align-items: center;
-  }
 
-  &__select {
-    width: 50%;
-    margin-bottom: base(0.5);
-    padding: 0 base(0.5);
-    flex-grow: 1;
-  }
-
-  &__label {
-    color: var(--theme-elevation-400);
-    margin: base(0.5) 0;
-  }
-
-  @include mid-break {
     &__wrap {
-      display: block;
+      width: 100%;
+      display: flex;
+      align-items: center;
     }
 
     &__select {
-      margin: 0 0 base(0.5);
-      width: 100%;
+      width: 50%;
+      margin-bottom: base(0.5);
+      padding: 0 base(0.5);
+      flex-grow: 1;
+    }
+
+    &__label {
+      color: var(--theme-elevation-400);
+      margin: base(0.5) 0;
+    }
+
+    @include mid-break {
+      &__wrap {
+        display: block;
+      }
+
+      &__select {
+        margin: 0 0 base(0.5);
+        width: 100%;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/Status/index.scss b/packages/ui/src/elements/Status/index.scss
index 794c45bb4..8a802c484 100644
--- a/packages/ui/src/elements/Status/index.scss
+++ b/packages/ui/src/elements/Status/index.scss
@@ -1,60 +1,62 @@
 @import '../../scss/styles.scss';
 
-.status {
-  &__label {
-    color: var(--theme-elevation-500);
-  }
-
-  &__value {
-    font-weight: 600;
-  }
-
-  &__value-wrap {
-    white-space: nowrap;
-  }
-
-  &__action {
-    text-decoration: underline;
-  }
-
-  &__modal {
-    @include blur-bg;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-
-    &__toggle {
-      @extend %btn-reset;
+@layer payload-default {
+  .status {
+    &__label {
+      color: var(--theme-elevation-500);
     }
-  }
 
-  &__wrapper {
-    z-index: 1;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: base(0.8);
-    padding: base(2);
-    max-width: base(36);
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: base(0.4);
-
-    > * {
-      margin: 0;
+    &__value {
+      font-weight: 600;
     }
-  }
 
-  &__controls {
-    display: flex;
-    gap: base(0.4);
+    &__value-wrap {
+      white-space: nowrap;
+    }
 
-    .btn {
-      margin: 0;
+    &__action {
+      text-decoration: underline;
+    }
+
+    &__modal {
+      @include blur-bg;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      &__toggle {
+        @extend %btn-reset;
+      }
+    }
+
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.8);
+      padding: base(2);
+      max-width: base(36);
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
+
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: base(0.4);
+
+      .btn {
+        margin: 0;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/StayLoggedIn/index.scss b/packages/ui/src/elements/StayLoggedIn/index.scss
index 28459881e..e4b4ed6b0 100644
--- a/packages/ui/src/elements/StayLoggedIn/index.scss
+++ b/packages/ui/src/elements/StayLoggedIn/index.scss
@@ -1,37 +1,39 @@
 @import '../../scss/styles.scss';
 
-.stay-logged-in {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  &__wrapper {
-    z-index: 1;
-    position: relative;
+@layer payload-default {
+  .stay-logged-in {
+    @include blur-bg;
     display: flex;
-    flex-direction: column;
-    gap: var(--base);
-    padding: base(2);
-  }
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-
-    > * {
-      margin: 0;
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+      padding: base(2);
     }
-  }
 
-  &__controls {
-    display: flex;
-    gap: var(--base);
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
 
-    .btn {
-      margin: 0;
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: var(--base);
+
+      .btn {
+        margin: 0;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/StepNav/index.scss b/packages/ui/src/elements/StepNav/index.scss
index 927a6dac9..1de869838 100644
--- a/packages/ui/src/elements/StepNav/index.scss
+++ b/packages/ui/src/elements/StepNav/index.scss
@@ -1,80 +1,81 @@
 @import '../../scss/styles.scss';
-
-.step-nav {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--base) / 2);
-
-  &::after {
-    content: ' ';
-    position: sticky;
-    top: 0;
-    right: 0;
-    width: var(--base);
-    background: linear-gradient(to right, transparent, var(--theme-bg));
-  }
-
-  // Use a pseudo element for the accessability so that it doesn't take up DOM space
-  // Also because the parent element has `overflow: hidden` which would clip an outline
-  &__home {
-    width: 18px;
-    height: 18px;
-    position: relative;
-
-    &:focus-visible {
-      outline: none;
-
-      &::after {
-        content: '';
-        border: var(--accessibility-outline);
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
-      }
-    }
-  }
-
-  * {
-    display: block;
-  }
-
-  a {
-    border: 0;
+@layer payload-default {
+  .step-nav {
     display: flex;
     align-items: center;
-    font-weight: 600;
-    text-decoration: none;
+    gap: calc(var(--base) / 2);
 
-    label {
-      cursor: pointer;
+    &::after {
+      content: ' ';
+      position: sticky;
+      top: 0;
+      right: 0;
+      width: var(--base);
+      background: linear-gradient(to right, transparent, var(--theme-bg));
     }
 
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
-    }
-  }
+    // Use a pseudo element for the accessability so that it doesn't take up DOM space
+    // Also because the parent element has `overflow: hidden` which would clip an outline
+    &__home {
+      width: 18px;
+      height: 18px;
+      position: relative;
 
-  span {
-    max-width: base(8);
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
+      &:focus-visible {
+        outline: none;
 
-  @include mid-break {
-    .step-nav {
-      &__home {
-        width: 16px;
-        height: 16px;
+        &::after {
+          content: '';
+          border: var(--accessibility-outline);
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          pointer-events: none;
+        }
       }
     }
-  }
 
-  @include small-break {
-    gap: base(0.4);
+    * {
+      display: block;
+    }
+
+    a {
+      border: 0;
+      display: flex;
+      align-items: center;
+      font-weight: 600;
+      text-decoration: none;
+
+      label {
+        cursor: pointer;
+      }
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+
+    span {
+      max-width: base(8);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    @include mid-break {
+      .step-nav {
+        &__home {
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+
+    @include small-break {
+      gap: base(0.4);
+    }
   }
 }
diff --git a/packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.scss
index eabbcee2b..d0f99e532 100644
--- a/packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.scss
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.scss
@@ -1,22 +1,24 @@
 @import '../../../../../scss/styles.scss';
 
-.bool-cell {
-  font-size: 1rem;
-  line-height: base(1);
-  border: 0;
-  display: inline-flex;
-  vertical-align: middle;
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-s;
-  padding: 0 base(0.25);
-  [dir='ltr'] & {
-    padding-left: base(0.0875 + 0.25);
-  }
-  [dir='rtl'] & {
-    padding-right: base(0.0875 + 0.25);
-  }
+@layer payload-default {
+  .bool-cell {
+    font-size: 1rem;
+    line-height: base(1);
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-s;
+    padding: 0 base(0.25);
+    [dir='ltr'] & {
+      padding-left: base(0.0875 + 0.25);
+    }
+    [dir='rtl'] & {
+      padding-right: base(0.0875 + 0.25);
+    }
 
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-800);
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
+  }
 }
diff --git a/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss
index 1d488cef2..182abc603 100644
--- a/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss
@@ -1,27 +1,29 @@
 @import '../../../../../scss/styles.scss';
 
-.code-cell {
-  font-size: 1rem;
-  line-height: base(1);
-  border: 0;
-  display: inline-flex;
-  vertical-align: middle;
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-m;
-  padding: 0 base(0.25);
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-800);
+@layer payload-default {
+  .code-cell {
+    font-size: 1rem;
+    line-height: base(1);
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-m;
+    padding: 0 base(0.25);
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
 
-  [dir='ltr'] & {
-    padding-left: base(0.0875 + 0.25);
-  }
+    [dir='ltr'] & {
+      padding-left: base(0.0875 + 0.25);
+    }
 
-  [dir='rtl'] & {
-    padding-right: base(0.0875 + 0.25);
-  }
+    [dir='rtl'] & {
+      padding-right: base(0.0875 + 0.25);
+    }
 
-  &:hover {
-    text-decoration: inherit;
+    &:hover {
+      text-decoration: inherit;
+    }
   }
 }
diff --git a/packages/ui/src/elements/Table/DefaultCell/fields/File/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/File/index.scss
index 846db8b63..7dd490968 100644
--- a/packages/ui/src/elements/Table/DefaultCell/fields/File/index.scss
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/File/index.scss
@@ -1,23 +1,25 @@
 @import '../../../../../scss/styles.scss';
 
-.file {
-  display: flex;
-  flex-wrap: nowrap;
+@layer payload-default {
+  .file {
+    display: flex;
+    flex-wrap: nowrap;
 
-  &__thumbnail {
-    display: inline-block;
-    max-width: calc(var(--base) * 2);
-    height: calc(var(--base) * 2);
-    border-radius: var(--style-radius-s);
-  }
-
-  &__filename {
-    align-self: center;
-    [dir='ltr'] & {
-      margin-left: var(--base);
+    &__thumbnail {
+      display: inline-block;
+      max-width: calc(var(--base) * 2);
+      height: calc(var(--base) * 2);
+      border-radius: var(--style-radius-s);
     }
-    [dir='rtl'] & {
-      margin-right: var(--base);
+
+    &__filename {
+      align-self: center;
+      [dir='ltr'] & {
+        margin-left: var(--base);
+      }
+      [dir='rtl'] & {
+        margin-right: var(--base);
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss
index 52286f72e..935aef0b9 100644
--- a/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss
@@ -1,22 +1,24 @@
 @import '../../../../../scss/styles.scss';
 
-.json-cell {
-  font-size: 1rem;
-  line-height: base(1);
-  border: 0;
-  display: inline-flex;
-  vertical-align: middle;
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-m;
-  padding: 0 base(0.25);
-  [dir='ltr'] & {
-    padding-left: base(0.0875 + 0.25);
-  }
-  [dir='rtl'] & {
-    padding-right: base(0.0875 + 0.25);
-  }
+@layer payload-default {
+  .json-cell {
+    font-size: 1rem;
+    line-height: base(1);
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-m;
+    padding: 0 base(0.25);
+    [dir='ltr'] & {
+      padding-left: base(0.0875 + 0.25);
+    }
+    [dir='rtl'] & {
+      padding-right: base(0.0875 + 0.25);
+    }
 
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-800);
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
+  }
 }
diff --git a/packages/ui/src/elements/Table/index.scss b/packages/ui/src/elements/Table/index.scss
index 3c757a03e..f4c5e5bd0 100644
--- a/packages/ui/src/elements/Table/index.scss
+++ b/packages/ui/src/elements/Table/index.scss
@@ -1,104 +1,106 @@
 @import '../../scss/styles.scss';
 
-.table {
-  margin-bottom: $baseline;
-  overflow: auto;
-  max-width: 100%;
+@layer payload-default {
+  .table {
+    margin-bottom: $baseline;
+    overflow: auto;
+    max-width: 100%;
 
-  table {
-    min-width: 100%;
-  }
-
-  thead {
-    color: var(--theme-elevation-400);
-
-    th {
-      font-weight: normal;
-      text-align: left;
-      [dir='rtl'] & {
-        text-align: right;
-      }
-    }
-  }
-
-  th,
-  td {
-    vertical-align: top;
-    padding: base(0.8) base(0.6);
-    min-width: 150px;
-
-    &:first-child {
-      padding-inline-start: base(0.8);
+    table {
+      min-width: 100%;
     }
 
-    &:last-child {
-      padding-inline-end: base(0.8);
-    }
-  }
-
-  tbody {
-    tr {
-      &:nth-child(odd) {
-        background: var(--theme-elevation-50);
-        border-radius: $style-radius-s;
-      }
-    }
-  }
-
-  a:focus-visible {
-    outline: var(--accessibility-outline);
-    outline-offset: var(--accessibility-outline-offset);
-  }
-
-  &--appearance-condensed {
     thead {
-      th:first-child {
-        border-top-left-radius: $style-radius-s;
-      }
+      color: var(--theme-elevation-400);
 
-      th:last-child {
-        border-top-right-radius: $style-radius-s;
-      }
-
-      background: var(--theme-elevation-50);
-    }
-
-    tbody {
-      tr {
-        &:nth-child(odd) {
-          background: transparent;
-          border-radius: 0;
+      th {
+        font-weight: normal;
+        text-align: left;
+        [dir='rtl'] & {
+          text-align: right;
         }
       }
     }
 
     th,
     td {
-      padding: base(0.3) base(0.3);
+      vertical-align: top;
+      padding: base(0.8) base(0.6);
+      min-width: 150px;
 
       &:first-child {
-        padding-inline-start: base(0.6);
+        padding-inline-start: base(0.8);
       }
 
       &:last-child {
-        padding-inline-end: base(0.6);
+        padding-inline-end: base(0.8);
       }
     }
 
-    th {
-      padding: base(0.3);
+    tbody {
+      tr {
+        &:nth-child(odd) {
+          background: var(--theme-elevation-50);
+          border-radius: $style-radius-s;
+        }
+      }
     }
 
-    tr td,
-    th {
-      border: 0.5px solid var(--theme-elevation-100);
+    a:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
     }
-  }
 
-  @include mid-break {
-    th,
-    td {
-      max-width: 70vw;
+    &--appearance-condensed {
+      thead {
+        th:first-child {
+          border-top-left-radius: $style-radius-s;
+        }
+
+        th:last-child {
+          border-top-right-radius: $style-radius-s;
+        }
+
+        background: var(--theme-elevation-50);
+      }
+
+      tbody {
+        tr {
+          &:nth-child(odd) {
+            background: transparent;
+            border-radius: 0;
+          }
+        }
+      }
+
+      th,
+      td {
+        padding: base(0.3) base(0.3);
+
+        &:first-child {
+          padding-inline-start: base(0.6);
+        }
+
+        &:last-child {
+          padding-inline-end: base(0.6);
+        }
+      }
+
+      th {
+        padding: base(0.3);
+      }
+
+      tr td,
+      th {
+        border: 0.5px solid var(--theme-elevation-100);
+      }
+    }
+
+    @include mid-break {
+      th,
+      td {
+        max-width: 70vw;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/Thumbnail/index.scss b/packages/ui/src/elements/Thumbnail/index.scss
index 6dc513447..d9ead3017 100644
--- a/packages/ui/src/elements/Thumbnail/index.scss
+++ b/packages/ui/src/elements/Thumbnail/index.scss
@@ -1,49 +1,51 @@
 @import '../../scss/styles.scss';
 
-.thumbnail {
-  min-height: 100%;
-  flex-shrink: 0;
-  align-self: stretch;
-  overflow: hidden;
-
-  img,
-  svg {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  &--size-expand {
-    max-height: 100%;
-    width: 100%;
-    padding-top: 100%;
-    position: relative;
+@layer payload-default {
+  .thumbnail {
+    min-height: 100%;
+    flex-shrink: 0;
+    align-self: stretch;
+    overflow: hidden;
 
     img,
     svg {
-      position: absolute;
-      top: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
     }
-  }
 
-  &--size-large {
-    max-height: base(9);
-    width: base(9);
-  }
+    &--size-expand {
+      max-height: 100%;
+      width: 100%;
+      padding-top: 100%;
+      position: relative;
 
-  &--size-medium {
-    max-height: base(7);
-    width: base(7);
-  }
+      img,
+      svg {
+        position: absolute;
+        top: 0;
+      }
+    }
 
-  &--size-small {
-    max-height: base(5);
-    width: base(5);
-  }
+    &--size-large {
+      max-height: base(9);
+      width: base(9);
+    }
 
-  @include large-break {
-    .thumbnail {
+    &--size-medium {
+      max-height: base(7);
+      width: base(7);
+    }
+
+    &--size-small {
+      max-height: base(5);
       width: base(5);
     }
+
+    @include large-break {
+      .thumbnail {
+        width: base(5);
+      }
+    }
   }
 }
diff --git a/packages/ui/src/elements/ThumbnailCard/index.scss b/packages/ui/src/elements/ThumbnailCard/index.scss
index c4891d151..42c805d55 100644
--- a/packages/ui/src/elements/ThumbnailCard/index.scss
+++ b/packages/ui/src/elements/ThumbnailCard/index.scss
@@ -1,39 +1,41 @@
 @import '../../scss/styles.scss';
 
-.thumbnail-card {
-  @include btn-reset;
-  @include shadow-m;
-  width: 100%;
-  background: var(--theme-input-bg);
-  border: 1px solid var(--theme-border-color);
-  border-radius: var(--style-radius-m);
-  transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+@layer payload-default {
+  .thumbnail-card {
+    @include btn-reset;
+    @include shadow-m;
+    width: 100%;
+    background: var(--theme-input-bg);
+    border: 1px solid var(--theme-border-color);
+    border-radius: var(--style-radius-m);
+    transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
 
-  &__label {
-    padding: base(0.5);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: 600;
-  }
+    &__label {
+      padding: base(0.5);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 600;
+    }
 
-  &--has-on-click {
-    cursor: pointer;
+    &--has-on-click {
+      cursor: pointer;
 
-    &:hover,
-    &:focus,
-    &:active {
-      border: 1px solid var(--theme-elevation-350);
+      &:hover,
+      &:focus,
+      &:active {
+        border: 1px solid var(--theme-elevation-350);
+      }
+    }
+
+    &--align-label-center {
+      text-align: center;
+    }
+
+    &__thumbnail {
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
   }
-
-  &--align-label-center {
-    text-align: center;
-  }
-
-  &__thumbnail {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 }
diff --git a/packages/ui/src/elements/Tooltip/index.scss b/packages/ui/src/elements/Tooltip/index.scss
index 875739afd..74f7f8fb3 100644
--- a/packages/ui/src/elements/Tooltip/index.scss
+++ b/packages/ui/src/elements/Tooltip/index.scss
@@ -1,99 +1,101 @@
 @import '../../scss/styles.scss';
 
-.tooltip {
-  --caret-size: 6px;
+@layer payload-default {
+  .tooltip {
+    --caret-size: 6px;
 
-  opacity: 0;
-  background-color: var(--theme-elevation-800);
-  position: absolute;
-  z-index: 3;
-  left: 50%;
-  padding: base(0.2) base(0.4);
-  color: var(--theme-elevation-0);
-  line-height: base(0.75);
-  font-weight: normal;
-  white-space: nowrap;
-  border-radius: 2px;
-  visibility: hidden;
-
-  &::after {
-    content: ' ';
-    display: block;
+    opacity: 0;
+    background-color: var(--theme-elevation-800);
     position: absolute;
-    transform: translate3d(-50%, 100%, 0);
-    width: 0;
-    height: 0;
-    border-left: var(--caret-size) solid transparent;
-    border-right: var(--caret-size) solid transparent;
-  }
+    z-index: 3;
+    left: 50%;
+    padding: base(0.2) base(0.4);
+    color: var(--theme-elevation-0);
+    line-height: base(0.75);
+    font-weight: normal;
+    white-space: nowrap;
+    border-radius: 2px;
+    visibility: hidden;
 
-  &--show {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.2s ease-in-out;
-    cursor: default;
-  }
-
-  &--caret-center {
     &::after {
-      left: 50%;
+      content: ' ';
+      display: block;
+      position: absolute;
+      transform: translate3d(-50%, 100%, 0);
+      width: 0;
+      height: 0;
+      border-left: var(--caret-size) solid transparent;
+      border-right: var(--caret-size) solid transparent;
+    }
+
+    &--show {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 0.2s ease-in-out;
+      cursor: default;
+    }
+
+    &--caret-center {
+      &::after {
+        left: 50%;
+      }
+    }
+
+    &--caret-left {
+      &::after {
+        left: calc(var(--base) * 0.5);
+      }
+    }
+
+    &--caret-right {
+      &::after {
+        right: calc(var(--base) * 0.5);
+      }
+    }
+
+    &--position-top {
+      top: calc(var(--base) * -1.25);
+      transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
+
+      &::after {
+        bottom: 1px;
+        border-top: var(--caret-size) solid var(--theme-elevation-800);
+      }
+    }
+
+    &--position-bottom {
+      bottom: calc(var(--base) * -1.25);
+      transform: translate3d(-50%, var(--caret-size), 0);
+
+      &::after {
+        bottom: calc(100% + var(--caret-size) - 1px);
+        border-bottom: var(--caret-size) solid var(--theme-elevation-800);
+      }
+    }
+
+    .tooltip-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+    }
+
+    @include mid-break {
+      display: none;
     }
   }
 
-  &--caret-left {
-    &::after {
-      left: calc(var(--base) * 0.5);
+  html[data-theme='light'] {
+    .tooltip:not(.field-error) {
+      background-color: var(--theme-elevation-100);
+      color: var(--theme-elevation-1000);
     }
-  }
 
-  &--caret-right {
-    &::after {
-      right: calc(var(--base) * 0.5);
+    .tooltip--position-top:not(.field-error):after {
+      border-top-color: var(--theme-elevation-100);
     }
-  }
 
-  &--position-top {
-    top: calc(var(--base) * -1.25);
-    transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
-
-    &::after {
-      bottom: 1px;
-      border-top: var(--caret-size) solid var(--theme-elevation-800);
+    .tooltip--position-bottom:not(.field-error):after {
+      border-bottom-color: var(--theme-elevation-100);
     }
   }
-
-  &--position-bottom {
-    bottom: calc(var(--base) * -1.25);
-    transform: translate3d(-50%, var(--caret-size), 0);
-
-    &::after {
-      bottom: calc(100% + var(--caret-size) - 1px);
-      border-bottom: var(--caret-size) solid var(--theme-elevation-800);
-    }
-  }
-
-  .tooltip-content {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 100%;
-  }
-
-  @include mid-break {
-    display: none;
-  }
-}
-
-html[data-theme='light'] {
-  .tooltip:not(.field-error) {
-    background-color: var(--theme-elevation-100);
-    color: var(--theme-elevation-1000);
-  }
-
-  .tooltip--position-top:not(.field-error):after {
-    border-top-color: var(--theme-elevation-100);
-  }
-
-  .tooltip--position-bottom:not(.field-error):after {
-    border-bottom-color: var(--theme-elevation-100);
-  }
 }
diff --git a/packages/ui/src/elements/UnpublishMany/index.scss b/packages/ui/src/elements/UnpublishMany/index.scss
index 42bf20054..8c3ac9ec2 100644
--- a/packages/ui/src/elements/UnpublishMany/index.scss
+++ b/packages/ui/src/elements/UnpublishMany/index.scss
@@ -1,37 +1,39 @@
 @import '../../scss/styles.scss';
 
-.unpublish-many {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  &__wrapper {
-    z-index: 1;
-    position: relative;
+@layer payload-default {
+  .unpublish-many {
+    @include blur-bg;
     display: flex;
-    flex-direction: column;
-    gap: base(0.8);
-    padding: base(2);
-  }
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: base(0.4);
-
-    > * {
-      margin: 0;
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.8);
+      padding: base(2);
     }
-  }
 
-  &__controls {
-    display: flex;
-    gap: base(0.4);
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
 
-    .btn {
-      margin: 0;
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: base(0.4);
+
+      .btn {
+        margin: 0;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/Upload/index.scss b/packages/ui/src/elements/Upload/index.scss
index d45f607c4..bff486ac3 100644
--- a/packages/ui/src/elements/Upload/index.scss
+++ b/packages/ui/src/elements/Upload/index.scss
@@ -1,155 +1,157 @@
 @import '../../scss/styles.scss';
 
-.file-field {
-  position: relative;
-  margin-bottom: var(--base);
-  background: var(--theme-elevation-50);
-  border-radius: var(--style-radius-s);
-
-  &__upload {
-    display: flex;
-  }
-
-  .tooltip.error-message {
-    z-index: 3;
-    bottom: calc(100% - #{base(0.5)});
-  }
-
-  &__file-selected {
-    display: flex;
-  }
-
-  &__thumbnail-wrap {
+@layer payload-default {
+  .file-field {
     position: relative;
-    width: 150px;
+    margin-bottom: var(--base);
+    background: var(--theme-elevation-50);
+    border-radius: var(--style-radius-s);
 
-    .thumbnail {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      border-radius: var(--style-radius-s) 0 0 var(--style-radius-s);
-    }
-  }
-
-  &__remove {
-    margin: calc($baseline * 1.5) $baseline $baseline 0;
-    place-self: flex-start;
-  }
-
-  &__file-adjustments,
-  &__remote-file-wrap {
-    padding: $baseline;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 2);
-  }
-
-  &__filename,
-  &__remote-file {
-    @include formInput;
-    background-color: var(--theme-bg);
-  }
-
-  &__upload-actions,
-  &__add-file-wrap {
-    display: flex;
-    gap: calc(var(--base) / 2);
-    flex-wrap: wrap;
-
-    & button {
-      cursor: pointer;
-      background-color: var(--theme-elevation-150);
-      border: none;
-      border-radius: $style-radius-m;
-      padding: base(0.25) base(0.5);
-      text-wrap: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      &:hover {
-        background-color: var(--theme-elevation-100);
-      }
-    }
-  }
-
-  &__previewDrawer {
-    & h2 {
-      margin: 0 base(1) 0 0;
-      text-wrap: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: calc(100% - base(2));
-    }
-  }
-
-  .dropzone {
-    background-color: transparent;
-    padding-block: calc(var(--base) * 2.25);
-  }
-
-  &__dropzoneContent {
-    display: flex;
-    flex-wrap: wrap;
-    gap: base(0.4);
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  &__dropzoneButtons {
-    display: flex;
-    gap: calc(var(--base) * 0.5);
-  }
-
-  &__orText {
-    color: var(--theme-elevation-500);
-    text-transform: lowercase;
-  }
-
-  &__dragAndDropText {
-    flex-shrink: 0;
-    margin: 0;
-    text-transform: lowercase;
-    align-self: center;
-    color: var(--theme-elevation-500);
-  }
-
-  @include small-break {
     &__upload {
-      flex-wrap: wrap;
-      justify-content: space-between;
+      display: flex;
     }
 
-    &__remove {
-      margin: $baseline;
-      order: 2;
+    .tooltip.error-message {
+      z-index: 3;
+      bottom: calc(100% - #{base(0.5)});
     }
 
-    &__file-adjustments {
-      order: 3;
-      border-top: 2px solid var(--theme-elevation-0);
-      padding: calc($baseline * 0.5);
-      gap: 0;
+    &__file-selected {
+      display: flex;
     }
 
     &__thumbnail-wrap {
-      order: 1;
-      width: 50%;
+      position: relative;
+      width: 150px;
 
       .thumbnail {
+        position: relative;
         width: 100%;
+        height: 100%;
+        object-fit: contain;
+        border-radius: var(--style-radius-s) 0 0 var(--style-radius-s);
       }
     }
 
-    &__edit {
-      display: none;
+    &__remove {
+      margin: calc($baseline * 1.5) $baseline $baseline 0;
+      place-self: flex-start;
+    }
+
+    &__file-adjustments,
+    &__remote-file-wrap {
+      padding: $baseline;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 2);
+    }
+
+    &__filename,
+    &__remote-file {
+      @include formInput;
+      background-color: var(--theme-bg);
+    }
+
+    &__upload-actions,
+    &__add-file-wrap {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      flex-wrap: wrap;
+
+      & button {
+        cursor: pointer;
+        background-color: var(--theme-elevation-150);
+        border: none;
+        border-radius: $style-radius-m;
+        padding: base(0.25) base(0.5);
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:hover {
+          background-color: var(--theme-elevation-100);
+        }
+      }
+    }
+
+    &__previewDrawer {
+      & h2 {
+        margin: 0 base(1) 0 0;
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: calc(100% - base(2));
+      }
+    }
+
+    .dropzone {
+      background-color: transparent;
+      padding-block: calc(var(--base) * 2.25);
     }
-  }
 
-  @include small-break {
     &__dropzoneContent {
-      display: none;
+      display: flex;
+      flex-wrap: wrap;
+      gap: base(0.4);
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    &__dropzoneButtons {
+      display: flex;
+      gap: calc(var(--base) * 0.5);
+    }
+
+    &__orText {
+      color: var(--theme-elevation-500);
+      text-transform: lowercase;
+    }
+
+    &__dragAndDropText {
+      flex-shrink: 0;
+      margin: 0;
+      text-transform: lowercase;
+      align-self: center;
+      color: var(--theme-elevation-500);
+    }
+
+    @include small-break {
+      &__upload {
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+
+      &__remove {
+        margin: $baseline;
+        order: 2;
+      }
+
+      &__file-adjustments {
+        order: 3;
+        border-top: 2px solid var(--theme-elevation-0);
+        padding: calc($baseline * 0.5);
+        gap: 0;
+      }
+
+      &__thumbnail-wrap {
+        order: 1;
+        width: 50%;
+
+        .thumbnail {
+          width: 100%;
+        }
+      }
+
+      &__edit {
+        display: none;
+      }
+    }
+
+    @include small-break {
+      &__dropzoneContent {
+        display: none;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/WhereBuilder/Condition/Number/index.scss b/packages/ui/src/elements/WhereBuilder/Condition/Number/index.scss
index 4babb8b21..51663f474 100644
--- a/packages/ui/src/elements/WhereBuilder/Condition/Number/index.scss
+++ b/packages/ui/src/elements/WhereBuilder/Condition/Number/index.scss
@@ -1,5 +1,7 @@
 @import '../../../../scss/styles.scss';
 
-.condition-value-number {
-  @include formInput;
+@layer payload-default {
+  .condition-value-number {
+    @include formInput;
+  }
 }
diff --git a/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss b/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss
index 9611d4326..016fd097a 100644
--- a/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss
+++ b/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss
@@ -1,11 +1,13 @@
 @import '../../../../scss/styles.scss';
 
-.condition-value-relationship {
-  &__error-loading {
-    border: 1px solid var(--theme-error-600);
-    min-height: base(2);
-    padding: base(0.5) base(0.75);
-    background-color: var(--theme-error-100);
-    color: var(--theme-elevation-0);
+@layer payload-default {
+  .condition-value-relationship {
+    &__error-loading {
+      border: 1px solid var(--theme-error-600);
+      min-height: base(2);
+      padding: base(0.5) base(0.75);
+      background-color: var(--theme-error-100);
+      color: var(--theme-elevation-0);
+    }
   }
 }
diff --git a/packages/ui/src/elements/WhereBuilder/Condition/Text/index.scss b/packages/ui/src/elements/WhereBuilder/Condition/Text/index.scss
index 647c3196e..52650a604 100644
--- a/packages/ui/src/elements/WhereBuilder/Condition/Text/index.scss
+++ b/packages/ui/src/elements/WhereBuilder/Condition/Text/index.scss
@@ -1,5 +1,7 @@
 @import '../../../../scss/styles.scss';
 
-.condition-value-text {
-  @include formInput;
+@layer payload-default {
+  .condition-value-text {
+    @include formInput;
+  }
 }
diff --git a/packages/ui/src/elements/WhereBuilder/Condition/index.scss b/packages/ui/src/elements/WhereBuilder/Condition/index.scss
index 2ef134928..40f0ea395 100644
--- a/packages/ui/src/elements/WhereBuilder/Condition/index.scss
+++ b/packages/ui/src/elements/WhereBuilder/Condition/index.scss
@@ -1,57 +1,59 @@
 @import '../../../scss/styles.scss';
 
-.condition {
-  &__wrap {
-    display: flex;
-    align-items: center;
-    gap: var(--base);
-  }
-
-  &__inputs {
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-    gap: var(--base);
-
-    > div {
-      flex-basis: 100%;
-    }
-  }
-
-  &__field {
-    .field-label {
-      padding-bottom: 0;
-    }
-  }
-
-  &__actions {
-    flex-shrink: 0;
-    display: flex;
-    gap: calc(var(--base) / 2);
-    padding: calc(var(--base) / 2) 0;
-  }
-
-  .btn {
-    vertical-align: middle;
-    margin: 0;
-  }
-
-  @include mid-break {
+@layer payload-default {
+  .condition {
     &__wrap {
-      align-items: initial;
-      gap: calc(var(--base) / 2);
+      display: flex;
+      align-items: center;
+      gap: var(--base);
     }
 
     &__inputs {
-      flex-direction: column;
-      gap: calc(var(--base) / 2);
-      align-items: stretch;
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      gap: var(--base);
+
+      > div {
+        flex-basis: 100%;
+      }
+    }
+
+    &__field {
+      .field-label {
+        padding-bottom: 0;
+      }
     }
 
     &__actions {
+      flex-shrink: 0;
       display: flex;
-      flex-direction: column;
-      justify-content: space-between;
+      gap: calc(var(--base) / 2);
+      padding: calc(var(--base) / 2) 0;
+    }
+
+    .btn {
+      vertical-align: middle;
+      margin: 0;
+    }
+
+    @include mid-break {
+      &__wrap {
+        align-items: initial;
+        gap: calc(var(--base) / 2);
+      }
+
+      &__inputs {
+        flex-direction: column;
+        gap: calc(var(--base) / 2);
+        align-items: stretch;
+      }
+
+      &__actions {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
     }
   }
 }
diff --git a/packages/ui/src/elements/WhereBuilder/index.scss b/packages/ui/src/elements/WhereBuilder/index.scss
index 54d5136d8..71b3b27df 100644
--- a/packages/ui/src/elements/WhereBuilder/index.scss
+++ b/packages/ui/src/elements/WhereBuilder/index.scss
@@ -1,40 +1,42 @@
 @import '../../scss/styles.scss';
 
-.where-builder {
-  background: var(--theme-elevation-50);
-  padding: var(--base);
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--base) / 2);
-
-  .btn {
-    margin: 0;
-    align-self: flex-start;
-  }
-
-  &__no-filters {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 2);
-  }
-
-  &__or-filters,
-  &__and-filters {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+@layer payload-default {
+  .where-builder {
+    background: var(--theme-elevation-50);
+    padding: var(--base);
     display: flex;
     flex-direction: column;
     gap: calc(var(--base) / 2);
 
-    li {
+    .btn {
+      margin: 0;
+      align-self: flex-start;
+    }
+
+    &__no-filters {
       display: flex;
       flex-direction: column;
       gap: calc(var(--base) / 2);
     }
-  }
 
-  @include small-break {
-    padding: calc(var(--base) / 2);
+    &__or-filters,
+    &__and-filters {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 2);
+
+      li {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--base) / 2);
+      }
+    }
+
+    @include small-break {
+      padding: calc(var(--base) / 2);
+    }
   }
 }
diff --git a/packages/ui/src/fields/Array/index.scss b/packages/ui/src/fields/Array/index.scss
index 3a1bd74da..139e0585b 100644
--- a/packages/ui/src/fields/Array/index.scss
+++ b/packages/ui/src/fields/Array/index.scss
@@ -1,104 +1,106 @@
 @import '../../scss/styles.scss';
 
-.array-field {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--base) / 2);
-
-  &__header {
+@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;
-      flex-direction: column;
-      gap: calc(var(--base) / 4);
+      align-items: center;
+      gap: base(0.5);
     }
-  }
 
-  &--has-no-error {
-    > .array-field__header .array-field__header-content {
-      color: var(--theme-text);
+    &__header-wrap {
+      display: flex;
+      align-items: flex-end;
+      width: 100%;
+      justify-content: space-between;
     }
-  }
 
-  &__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 {
-    align-self: flex-start;
-    color: var(--theme-elevation-400);
-    margin: 2px 0;
-
-    &:hover {
+    &__header-actions {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
       color: var(--theme-elevation-800);
     }
-  }
-}
 
-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);
+    &__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 {
+      align-self: flex-start;
+      color: var(--theme-elevation-400);
+      margin: 2px 0;
+
+      &:hover {
+        color: var(--theme-elevation-800);
+      }
+    }
+  }
+
+  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);
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/Blocks/BlocksDrawer/BlockSearch/index.scss b/packages/ui/src/fields/Blocks/BlocksDrawer/BlockSearch/index.scss
index f7857206c..0d13c3c7c 100644
--- a/packages/ui/src/fields/Blocks/BlocksDrawer/BlockSearch/index.scss
+++ b/packages/ui/src/fields/Blocks/BlocksDrawer/BlockSearch/index.scss
@@ -3,34 +3,36 @@
 $icon-width: base(2);
 $icon-margin: base(0.25);
 
-.block-search {
-  position: sticky;
-  top: 0;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  z-index: 1;
+@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;
+      @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;
+      }
     }
   }
 }
diff --git a/packages/ui/src/fields/Blocks/BlocksDrawer/index.scss b/packages/ui/src/fields/Blocks/BlocksDrawer/index.scss
index a07728e8e..efe5c5fc9 100644
--- a/packages/ui/src/fields/Blocks/BlocksDrawer/index.scss
+++ b/packages/ui/src/fields/Blocks/BlocksDrawer/index.scss
@@ -1,48 +1,50 @@
 @import '../../../scss/styles.scss';
 
-.blocks-drawer {
-  &__blocks-wrapper {
-    padding-top: base(1.5);
-  }
-
-  &__blocks {
-    position: relative;
-    padding: 0;
-    list-style: none;
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    gap: base(1);
-  }
-
-  &__default-image {
-    width: 100%;
-    overflow: hidden;
-    padding-top: base(0.75);
-  }
-
-  @include large-break {
-    &__blocks {
-      grid-template-columns: repeat(5, 1fr);
-    }
-  }
-
-  @include mid-break {
+@layer payload-default {
+  .blocks-drawer {
     &__blocks-wrapper {
-      padding-top: base(1.75);
+      padding-top: base(1.5);
     }
-    &__blocks {
-      grid-template-columns: repeat(3, 1fr);
-      gap: base(0.5);
-    }
-  }
 
-  @include small-break {
-    &__blocks-wrapper {
+    &__blocks {
+      position: relative;
+      padding: 0;
+      list-style: none;
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      gap: base(1);
+    }
+
+    &__default-image {
+      width: 100%;
+      overflow: hidden;
       padding-top: base(0.75);
     }
 
-    &__blocks {
-      grid-template-columns: repeat(2, 1fr);
+    @include large-break {
+      &__blocks {
+        grid-template-columns: repeat(5, 1fr);
+      }
+    }
+
+    @include mid-break {
+      &__blocks-wrapper {
+        padding-top: base(1.75);
+      }
+      &__blocks {
+        grid-template-columns: repeat(3, 1fr);
+        gap: base(0.5);
+      }
+    }
+
+    @include small-break {
+      &__blocks-wrapper {
+        padding-top: base(0.75);
+      }
+
+      &__blocks {
+        grid-template-columns: repeat(2, 1fr);
+      }
     }
   }
 }
diff --git a/packages/ui/src/fields/Blocks/SectionTitle/index.scss b/packages/ui/src/fields/Blocks/SectionTitle/index.scss
index d1d99ebf9..0736bf691 100644
--- a/packages/ui/src/fields/Blocks/SectionTitle/index.scss
+++ b/packages/ui/src/fields/Blocks/SectionTitle/index.scss
@@ -1,61 +1,63 @@
 @import '../../../scss/styles.scss';
 
-.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%;
+@layer payload-default {
+  .section-title {
+    position: relative;
+    min-width: base(4);
     max-width: 100%;
+    pointer-events: all;
+    display: flex;
     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);
+    &:after {
+      display: block;
+      content: attr(data-value) ' ';
+      visibility: hidden;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
     }
 
-    &:hover,
-    &:focus {
-      outline: 0;
+    &:after,
+    &__input {
+      font-family: var(--font-body);
+      font-weight: 600;
+      font-size: base(0.625);
+      padding: 0;
+      width: 100%;
     }
 
-    &:focus {
-      box-shadow: none;
+    &__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;
+      }
     }
   }
 }
diff --git a/packages/ui/src/fields/Blocks/index.scss b/packages/ui/src/fields/Blocks/index.scss
index d3622c363..c6178f9d5 100644
--- a/packages/ui/src/fields/Blocks/index.scss
+++ b/packages/ui/src/fields/Blocks/index.scss
@@ -1,119 +1,121 @@
 @import '../../scss/styles.scss';
 
-.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 {
+@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);
+        }
+      }
+    }
   }
 
-  &__drawer-toggler {
-    background-color: transparent;
-    margin: 0;
-    padding: 0;
-    border: none;
-    align-self: flex-start;
+  html[data-theme='light'] {
+    .blocks-field--has-error {
+      .section-title__input,
+      .blocks-field__heading-with-error {
+        color: var(--theme-error-750);
+      }
+    }
+  }
 
-    .btn {
-      color: var(--theme-elevation-400);
-      margin: 0;
-
-      &:hover {
-        color: var(--theme-elevation-800);
+  html[data-theme='dark'] {
+    .blocks-field--has-error {
+      .section-title__input,
+      .blocks-field__heading-with-error {
+        color: var(--theme-error-500);
       }
     }
   }
 }
-
-html[data-theme='light'] {
-  .blocks-field--has-error {
-    .section-title__input,
-    .blocks-field__heading-with-error {
-      color: var(--theme-error-750);
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .blocks-field--has-error {
-    .section-title__input,
-    .blocks-field__heading-with-error {
-      color: var(--theme-error-500);
-    }
-  }
-}
diff --git a/packages/ui/src/fields/Checkbox/index.scss b/packages/ui/src/fields/Checkbox/index.scss
index 9942664d9..4e930a257 100644
--- a/packages/ui/src/fields/Checkbox/index.scss
+++ b/packages/ui/src/fields/Checkbox/index.scss
@@ -1,146 +1,148 @@
 @import '../../scss/styles.scss';
 
-.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 {
-    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;
+@layer payload-default {
+  .checkbox {
     position: relative;
-    width: $baseline;
-    height: $baseline;
+    margin-bottom: $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;
+    .tooltip:not([aria-hidden='true']) {
+      right: auto;
+      position: static;
+      transform: translateY(calc(var(--caret-size) * -1));
+      margin-bottom: 0.2em;
+      max-width: fit-content;
     }
   }
 
-  &__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);
+  .checkbox-input {
+    display: inline-flex;
+    &:hover:not(&--read-only) {
+      label,
+      input {
+        cursor: pointer;
       }
     }
 
-    &: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);
+      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;
+  html[data-theme='light'] {
+    .checkbox {
+      &.error {
+        .checkbox-input__input {
+          @include lightInputError;
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .checkbox {
+      &.error {
+        .checkbox-input__input {
+          @include darkInputError;
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/Code/index.scss b/packages/ui/src/fields/Code/index.scss
index d65077ccb..e6f23b545 100644
--- a/packages/ui/src/fields/Code/index.scss
+++ b/packages/ui/src/fields/Code/index.scss
@@ -1,24 +1,26 @@
 @import '../../scss/styles.scss';
 
-.code-field {
-  position: relative;
+@layer payload-default {
+  .code-field {
+    position: relative;
 
-  &.error {
-    textarea {
-      border: 1px solid var(--theme-error-500) !important;
+    &.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);
+      }
     }
-    .code-editor {
-      border-color: var(--theme-error-500);
-    }
-    .monaco-editor-background,
-    .margin {
-      background-color: var(--theme-error-50);
-    }
-  }
 
-  .read-only {
-    .code-editor {
-      @include readOnly;
+    .read-only {
+      .code-editor {
+        @include readOnly;
+      }
     }
   }
 }
diff --git a/packages/ui/src/fields/Collapsible/index.scss b/packages/ui/src/fields/Collapsible/index.scss
index 559d102db..d2b1d2a6f 100644
--- a/packages/ui/src/fields/Collapsible/index.scss
+++ b/packages/ui/src/fields/Collapsible/index.scss
@@ -1,10 +1,12 @@
 @import '../../scss/styles.scss';
 
-.collapsible-field {
-  &__row-label-wrap {
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-    gap: base(0.5);
+@layer payload-default {
+  .collapsible-field {
+    &__row-label-wrap {
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      gap: base(0.5);
+    }
   }
 }
diff --git a/packages/ui/src/fields/ConfirmPassword/index.scss b/packages/ui/src/fields/ConfirmPassword/index.scss
index 2db4d78a6..70f7b5c87 100644
--- a/packages/ui/src/fields/ConfirmPassword/index.scss
+++ b/packages/ui/src/fields/ConfirmPassword/index.scss
@@ -1,28 +1,30 @@
 @import '../../scss/styles.scss';
 
-.field-type.confirm-password {
-  position: relative;
+@layer payload-default {
+  .field-type.confirm-password {
+    position: relative;
 
-  input {
-    @include formInput;
+    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;
+  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;
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/DateTime/index.scss b/packages/ui/src/fields/DateTime/index.scss
index 1ca8b98ac..b4359c6ea 100644
--- a/packages/ui/src/fields/DateTime/index.scss
+++ b/packages/ui/src/fields/DateTime/index.scss
@@ -1,20 +1,22 @@
 @import '../../scss/styles.scss';
 
-html[data-theme='light'] {
-  .date-time-field {
-    &--has-error {
-      .react-datepicker__input-container input {
-        @include lightInputError;
+@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;
+  html[data-theme='dark'] {
+    .date-time-field {
+      &--has-error {
+        .react-datepicker__input-container input {
+          @include darkInputError;
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/Email/index.scss b/packages/ui/src/fields/Email/index.scss
index a44a20024..d12a0171d 100644
--- a/packages/ui/src/fields/Email/index.scss
+++ b/packages/ui/src/fields/Email/index.scss
@@ -1,34 +1,36 @@
 @import '../../scss/styles.scss';
 
-.field-type.email {
-  position: relative;
+@layer payload-default {
+  .field-type.email {
+    position: relative;
 
-  input {
-    @include formInput;
-  }
-
-  &.error {
     input {
-      background-color: var(--theme-error-200);
+      @include formInput;
     }
-  }
-}
 
-html[data-theme='light'] {
-  .field-type.email {
     &.error {
       input {
-        @include lightInputError;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .field-type.email {
-    &.error {
-      input {
-        @include darkInputError;
+        background-color: var(--theme-error-200);
+      }
+    }
+  }
+
+  html[data-theme='light'] {
+    .field-type.email {
+      &.error {
+        input {
+          @include lightInputError;
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .field-type.email {
+      &.error {
+        input {
+          @include darkInputError;
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/FieldDescription/index.scss b/packages/ui/src/fields/FieldDescription/index.scss
index dd1d35bc3..b1a935f7c 100644
--- a/packages/ui/src/fields/FieldDescription/index.scss
+++ b/packages/ui/src/fields/FieldDescription/index.scss
@@ -1,12 +1,14 @@
 @import '../../scss/styles.scss';
 
-.field-description {
-  display: flex;
-  color: var(--theme-elevation-400);
-  margin-top: calc(var(--base) / 4);
+@layer payload-default {
+  .field-description {
+    display: flex;
+    color: var(--theme-elevation-400);
+    margin-top: calc(var(--base) / 4);
 
-  &--margin-bottom {
-    margin-top: 0;
-    margin-bottom: calc(var(--base) / 2);
+    &--margin-bottom {
+      margin-top: 0;
+      margin-bottom: calc(var(--base) / 2);
+    }
   }
 }
diff --git a/packages/ui/src/fields/FieldError/index.scss b/packages/ui/src/fields/FieldError/index.scss
index 23613c34a..835fd6d66 100644
--- a/packages/ui/src/fields/FieldError/index.scss
+++ b/packages/ui/src/fields/FieldError/index.scss
@@ -1,16 +1,18 @@
 @import '../../scss/styles';
 
-.field-error.tooltip {
-  font-family: var(--font-body);
-  left: auto;
-  max-width: 75%;
-  right: 0;
-  transform: translateY(calc(var(--caret-size) * -1));
-  color: var(--theme-error-950);
-  background-color: var(--theme-error-300);
+@layer payload-default {
+  .field-error.tooltip {
+    font-family: var(--font-body);
+    left: auto;
+    max-width: 75%;
+    right: 0;
+    transform: translateY(calc(var(--caret-size) * -1));
+    color: var(--theme-error-950);
+    background-color: var(--theme-error-300);
 
-  &::after {
-    border-top-color: var(--theme-error-300);
-    border-bottom-color: var(--theme-error-300);
+    &::after {
+      border-top-color: var(--theme-error-300);
+      border-bottom-color: var(--theme-error-300);
+    }
   }
 }
diff --git a/packages/ui/src/fields/FieldLabel/index.scss b/packages/ui/src/fields/FieldLabel/index.scss
index 2fefeff55..778acb9ac 100644
--- a/packages/ui/src/fields/FieldLabel/index.scss
+++ b/packages/ui/src/fields/FieldLabel/index.scss
@@ -1,21 +1,23 @@
 @import '../../scss/styles.scss';
 
-label.field-label:not(.unstyled) {
-  @extend %body;
-  display: flex;
-  padding-bottom: base(0.25);
-  color: var(--theme-elevation-800);
-  font-family: var(--font-body);
+@layer payload-default {
+  label.field-label:not(.unstyled) {
+    @extend %body;
+    display: flex;
+    padding-bottom: base(0.25);
+    color: var(--theme-elevation-800);
+    font-family: var(--font-body);
 
-  .required {
-    color: var(--theme-error-500);
-    [dir='ltr'] & {
-      margin-left: base(0.25);
-      margin-right: auto;
-    }
-    [dir='rtl'] & {
-      margin-right: base(0.25);
-      margin-left: auto;
+    .required {
+      color: var(--theme-error-500);
+      [dir='ltr'] & {
+        margin-left: base(0.25);
+        margin-right: auto;
+      }
+      [dir='rtl'] & {
+        margin-right: base(0.25);
+        margin-left: auto;
+      }
     }
   }
 }
diff --git a/packages/ui/src/fields/Group/index.scss b/packages/ui/src/fields/Group/index.scss
index 635c505f9..a19e00b82 100644
--- a/packages/ui/src/fields/Group/index.scss
+++ b/packages/ui/src/fields/Group/index.scss
@@ -1,88 +1,14 @@
 @import '../../scss/styles.scss';
 
-.group-field {
-  margin-left: calc(var(--gutter-h) * -1);
-  margin-right: calc(var(--gutter-h) * -1);
-  border-bottom: 1px solid var(--theme-elevation-100);
-  border-top: 1px solid var(--theme-elevation-100);
+@layer payload-default {
+  .group-field {
+    margin-left: calc(var(--gutter-h) * -1);
+    margin-right: calc(var(--gutter-h) * -1);
+    border-bottom: 1px solid var(--theme-elevation-100);
+    border-top: 1px solid var(--theme-elevation-100);
 
-  &--top-level {
-    padding: base(2) var(--gutter-h);
-
-    &:first-child {
-      padding-top: 0;
-      border-top: 0;
-    }
-  }
-
-  &--within-collapsible {
-    margin-left: calc(var(--base) * -1);
-    margin-right: calc(var(--base) * -1);
-    padding: var(--base);
-
-    &:first-child {
-      border-top: 0;
-      padding-top: 0;
-      margin-top: 0;
-    }
-
-    &:last-child {
-      padding-bottom: 0;
-      border-bottom: 0;
-    }
-  }
-
-  &--within-group {
-    margin-left: 0;
-    margin-right: 0;
-    padding: 0;
-    border-top: 0;
-    border-bottom: 0;
-  }
-
-  &--within-row {
-    margin: 0;
-    border-top: 0;
-    border-bottom: 0;
-  }
-
-  &--within-tab:first-child {
-    margin-top: 0;
-    border-top: 0;
-    padding-top: 0;
-  }
-
-  &--within-tab:last-child {
-    margin-bottom: 0;
-    border-bottom: 0;
-    padding-bottom: 0;
-  }
-
-  &--gutter {
-    border-left: 1px solid var(--theme-elevation-100);
-    padding: 0 0 0 $baseline;
-  }
-
-  &__header {
-    margin-bottom: calc(var(--base) / 2);
-    display: flex;
-    align-items: center;
-    gap: base(0.5);
-
-    > header {
-      display: flex;
-      flex-direction: column;
-      gap: calc(var(--base) / 4);
-    }
-  }
-
-  &__title {
-    margin-bottom: 0;
-  }
-
-  @include small-break {
     &--top-level {
-      padding: var(--base) var(--gutter-h);
+      padding: base(2) var(--gutter-h);
 
       &:first-child {
         padding-top: 0;
@@ -90,55 +16,131 @@
       }
     }
 
-    &__header {
-      margin-bottom: calc(var(--base) / 2);
-    }
-
     &--within-collapsible {
-      margin-left: calc(var(--gutter-h) * -1);
-      margin-right: calc(var(--gutter-h) * -1);
+      margin-left: calc(var(--base) * -1);
+      margin-right: calc(var(--base) * -1);
+      padding: var(--base);
+
+      &:first-child {
+        border-top: 0;
+        padding-top: 0;
+        margin-top: 0;
+      }
+
+      &:last-child {
+        padding-bottom: 0;
+        border-bottom: 0;
+      }
     }
 
     &--within-group {
+      margin-left: 0;
+      margin-right: 0;
       padding: 0;
+      border-top: 0;
+      border-bottom: 0;
+    }
+
+    &--within-row {
+      margin: 0;
+      border-top: 0;
+      border-bottom: 0;
+    }
+
+    &--within-tab:first-child {
+      margin-top: 0;
+      border-top: 0;
+      padding-top: 0;
+    }
+
+    &--within-tab:last-child {
+      margin-bottom: 0;
+      border-bottom: 0;
+      padding-bottom: 0;
     }
 
     &--gutter {
-      padding-left: var(--gutter-h);
+      border-left: 1px solid var(--theme-elevation-100);
+      padding: 0 0 0 $baseline;
+    }
+
+    &__header {
+      margin-bottom: calc(var(--base) / 2);
+      display: flex;
+      align-items: center;
+      gap: base(0.5);
+
+      > header {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--base) / 4);
+      }
+    }
+
+    &__title {
+      margin-bottom: 0;
+    }
+
+    @include small-break {
+      &--top-level {
+        padding: var(--base) var(--gutter-h);
+
+        &:first-child {
+          padding-top: 0;
+          border-top: 0;
+        }
+      }
+
+      &__header {
+        margin-bottom: calc(var(--base) / 2);
+      }
+
+      &--within-collapsible {
+        margin-left: calc(var(--gutter-h) * -1);
+        margin-right: calc(var(--gutter-h) * -1);
+      }
+
+      &--within-group {
+        padding: 0;
+      }
+
+      &--gutter {
+        padding-left: var(--gutter-h);
+      }
     }
   }
-}
 
-.group-field + .group-field {
-  border-top: 0;
-  padding-top: 0;
-}
+  .group-field + .group-field {
+    border-top: 0;
+    padding-top: 0;
+  }
 
-.group-field--within-row + .group-field--within-row {
-  margin-top: 0;
-}
+  .group-field--within-row + .group-field--within-row {
+    margin-top: 0;
+  }
 
-.group-field--within-tab + .group-field--within-row {
-  padding-top: 0;
-}
+  .group-field--within-tab + .group-field--within-row {
+    padding-top: 0;
+  }
 
-html[data-theme='light'] {
-  .group-field {
-    &--has-error {
-      color: var(--theme-error-750);
-      &:after {
-        background: var(--theme-error-500);
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .group-field {
-    &--has-error {
-      color: var(--theme-error-500);
-      &:after {
-        background: var(--theme-error-500);
+  html[data-theme='light'] {
+    .group-field {
+      &--has-error {
+        color: var(--theme-error-750);
+        &:after {
+          background: var(--theme-error-500);
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .group-field {
+      &--has-error {
+        color: var(--theme-error-500);
+        &:after {
+          background: var(--theme-error-500);
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/JSON/index.scss b/packages/ui/src/fields/JSON/index.scss
index 3a6e04f14..bfd50ab80 100644
--- a/packages/ui/src/fields/JSON/index.scss
+++ b/packages/ui/src/fields/JSON/index.scss
@@ -1,16 +1,18 @@
 @import '../../scss/styles.scss';
 
-.json-field {
-  position: relative;
+@layer payload-default {
+  .json-field {
+    position: relative;
 
-  &.error {
-    .code-editor {
-      border-color: var(--theme-error-500);
-    }
+    &.error {
+      .code-editor {
+        border-color: var(--theme-error-500);
+      }
 
-    .monaco-editor-background,
-    .margin {
-      background-color: var(--theme-error-50);
+      .monaco-editor-background,
+      .margin {
+        background-color: var(--theme-error-50);
+      }
     }
   }
 }
diff --git a/packages/ui/src/fields/Number/index.scss b/packages/ui/src/fields/Number/index.scss
index ab294a5a1..50628f1ad 100644
--- a/packages/ui/src/fields/Number/index.scss
+++ b/packages/ui/src/fields/Number/index.scss
@@ -1,30 +1,32 @@
 @import '../../scss/styles.scss';
 
-.field-type.number {
-  position: relative;
+@layer payload-default {
+  .field-type.number {
+    position: relative;
 
-  &:not(.has-many) {
-    input {
-      @include formInput;
+    &:not(.has-many) {
+      input {
+        @include formInput;
+      }
     }
   }
-}
 
-html[data-theme='light'] {
-  .field-type.number {
-    &.error {
-      input {
-        @include lightInputError;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .field-type.number {
-    &.error {
-      input {
-        @include darkInputError;
+  html[data-theme='light'] {
+    .field-type.number {
+      &.error {
+        input {
+          @include lightInputError;
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .field-type.number {
+      &.error {
+        input {
+          @include darkInputError;
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/Password/index.scss b/packages/ui/src/fields/Password/index.scss
index 31f091b40..d10a77463 100644
--- a/packages/ui/src/fields/Password/index.scss
+++ b/packages/ui/src/fields/Password/index.scss
@@ -1,28 +1,30 @@
 @import '../../scss/styles.scss';
 
-.field-type.password {
-  position: relative;
-
-  input {
-    @include formInput;
-  }
-}
-
-html[data-theme='light'] {
+@layer payload-default {
   .field-type.password {
-    &.error {
-      input {
-        @include lightInputError;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .field-type.password {
-    &.error {
-      input {
-        @include darkInputError;
+    position: relative;
+
+    input {
+      @include formInput;
+    }
+  }
+
+  html[data-theme='light'] {
+    .field-type.password {
+      &.error {
+        input {
+          @include lightInputError;
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .field-type.password {
+      &.error {
+        input {
+          @include darkInputError;
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/Point/index.scss b/packages/ui/src/fields/Point/index.scss
index cbaf1e3d3..7bedfcddc 100644
--- a/packages/ui/src/fields/Point/index.scss
+++ b/packages/ui/src/fields/Point/index.scss
@@ -1,47 +1,49 @@
 @import '../../scss/styles.scss';
 
-.point {
-  position: relative;
-
-  & .input-wrapper {
+@layer payload-default {
+  .point {
     position: relative;
-  }
 
-  &__wrap {
-    display: flex;
-    width: calc(100% + #{base(1)});
-    margin: 0;
-    margin-left: base(-0.5);
-    margin-right: base(-0.5);
-    list-style: none;
-    padding: 0;
+    & .input-wrapper {
+      position: relative;
+    }
 
-    li {
-      padding: 0 base(0.5);
-      width: 50%;
+    &__wrap {
+      display: flex;
+      width: calc(100% + #{base(1)});
+      margin: 0;
+      margin-left: base(-0.5);
+      margin-right: base(-0.5);
+      list-style: none;
+      padding: 0;
+
+      li {
+        padding: 0 base(0.5);
+        width: 50%;
+      }
+    }
+
+    input {
+      @include formInput;
     }
   }
 
-  input {
-    @include formInput;
+  html[data-theme='light'] {
+    .point {
+      &.error {
+        input {
+          @include lightInputError;
+        }
+      }
+    }
   }
-}
 
-html[data-theme='light'] {
-  .point {
-    &.error {
-      input {
-        @include lightInputError;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .point {
-    &.error {
-      input {
-        @include darkInputError;
+  html[data-theme='dark'] {
+    .point {
+      &.error {
+        input {
+          @include darkInputError;
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/RadioGroup/Radio/index.scss b/packages/ui/src/fields/RadioGroup/Radio/index.scss
index af75ac13c..e61594317 100644
--- a/packages/ui/src/fields/RadioGroup/Radio/index.scss
+++ b/packages/ui/src/fields/RadioGroup/Radio/index.scss
@@ -1,77 +1,79 @@
 @import '../../../scss/styles.scss';
 
-.radio-input {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  margin: base(0.1) 0;
-  position: relative;
-
-  input[type='radio'] {
-    opacity: 0;
-    margin: 0;
-    position: absolute;
-  }
-
-  input[type='radio']:focus + .radio-input__styled-radio {
-    box-shadow: 0 0 3px 3px var(--theme-success-400);
-  }
-
-  &__styled-radio {
-    border: 1px solid var(--theme-border-color);
-    background-color: var(--theme-input-bg);
-    @include shadow-sm;
-    width: $baseline;
-    height: $baseline;
+@layer payload-default {
+  .radio-input {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin: base(0.1) 0;
     position: relative;
-    padding: 0;
-    display: inline-block;
-    border-radius: 50%;
 
-    &:before {
-      content: ' ';
-      display: block;
-      border-radius: 100%;
-      background-color: var(--theme-elevation-800);
-      width: calc(100% - 8px);
-      height: calc(100% - 8px);
-      border: 4px solid var(--theme-elevation-0);
+    input[type='radio'] {
       opacity: 0;
+      margin: 0;
+      position: absolute;
     }
 
-    &--disabled {
-      @include readOnly;
-      &::before {
-        border-color: var(--theme-elevation-100);
+    input[type='radio']:focus + .radio-input__styled-radio {
+      box-shadow: 0 0 3px 3px var(--theme-success-400);
+    }
+
+    &__styled-radio {
+      border: 1px solid var(--theme-border-color);
+      background-color: var(--theme-input-bg);
+      @include shadow-sm;
+      width: $baseline;
+      height: $baseline;
+      position: relative;
+      padding: 0;
+      display: inline-block;
+      border-radius: 50%;
+
+      &:before {
+        content: ' ';
+        display: block;
+        border-radius: 100%;
+        background-color: var(--theme-elevation-800);
+        width: calc(100% - 8px);
+        height: calc(100% - 8px);
+        border: 4px solid var(--theme-elevation-0);
+        opacity: 0;
       }
-    }
-  }
 
-  [dir='rtl'] &__label {
-    margin-left: 0;
-    margin-right: base(0.5);
-  }
-
-  &__label {
-    margin-left: base(0.5);
-  }
-
-  &--is-selected {
-    .radio-input {
-      &__styled-radio {
-        &:before {
-          opacity: 1;
+      &--disabled {
+        @include readOnly;
+        &::before {
+          border-color: var(--theme-elevation-100);
         }
       }
     }
-  }
 
-  &:not(&--is-selected) {
-    &:hover {
+    [dir='rtl'] &__label {
+      margin-left: 0;
+      margin-right: base(0.5);
+    }
+
+    &__label {
+      margin-left: base(0.5);
+    }
+
+    &--is-selected {
       .radio-input {
         &__styled-radio {
           &:before {
-            opacity: 0.2;
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    &:not(&--is-selected) {
+      &:hover {
+        .radio-input {
+          &__styled-radio {
+            &:before {
+              opacity: 0.2;
+            }
           }
         }
       }
diff --git a/packages/ui/src/fields/RadioGroup/index.scss b/packages/ui/src/fields/RadioGroup/index.scss
index 888e5a733..6862bfce7 100644
--- a/packages/ui/src/fields/RadioGroup/index.scss
+++ b/packages/ui/src/fields/RadioGroup/index.scss
@@ -1,84 +1,86 @@
 @import '../../scss/styles.scss';
 
-.radio-group {
-  .tooltip:not([aria-hidden='true']) {
-    right: auto;
-    position: static;
-    margin-bottom: 0.2em;
-    max-width: fit-content;
-  }
-
-  &--layout-horizontal {
-    ul {
-      display: flex;
-      flex-wrap: wrap;
+@layer payload-default {
+  .radio-group {
+    .tooltip:not([aria-hidden='true']) {
+      right: auto;
+      position: static;
+      margin-bottom: 0.2em;
+      max-width: fit-content;
     }
 
-    li {
-      flex-shrink: 0;
-      [dir='ltr'] & {
-        padding-right: $baseline;
+    &--layout-horizontal {
+      ul {
+        display: flex;
+        flex-wrap: wrap;
       }
-      [dir='rtl'] & {
-        padding-left: $baseline;
-      }
-    }
-  }
 
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-}
-
-.radio-group--read-only {
-  .radio-input {
-    cursor: default;
-
-    &:hover {
-      border-color: var(--theme-elevation-50);
-    }
-
-    &__label {
-      color: var(--theme-elevation-400);
-    }
-
-    &--is-selected {
-      .radio-input__styled-radio {
-        &:before {
-          background-color: var(--theme-elevation-250);
+      li {
+        flex-shrink: 0;
+        [dir='ltr'] & {
+          padding-right: $baseline;
+        }
+        [dir='rtl'] & {
+          padding-left: $baseline;
         }
       }
     }
 
-    &:not(.radio-input--is-selected) {
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  .radio-group--read-only {
+    .radio-input {
+      cursor: default;
+
       &:hover {
+        border-color: var(--theme-elevation-50);
+      }
+
+      &__label {
+        color: var(--theme-elevation-400);
+      }
+
+      &--is-selected {
         .radio-input__styled-radio {
           &:before {
-            opacity: 0;
+            background-color: var(--theme-elevation-250);
+          }
+        }
+      }
+
+      &:not(.radio-input--is-selected) {
+        &:hover {
+          .radio-input__styled-radio {
+            &:before {
+              opacity: 0;
+            }
           }
         }
       }
     }
   }
-}
 
-html[data-theme='light'] {
-  .radio-group {
-    &.error {
-      .radio-input__styled-radio {
-        @include lightInputError;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .radio-group {
-    &.error {
-      .radio-input__styled-radio {
-        @include darkInputError;
+  html[data-theme='light'] {
+    .radio-group {
+      &.error {
+        .radio-input__styled-radio {
+          @include lightInputError;
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .radio-group {
+      &.error {
+        .radio-input__styled-radio {
+          @include darkInputError;
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/Relationship/index.scss b/packages/ui/src/fields/Relationship/index.scss
index 5a0c9f273..cf087bd35 100644
--- a/packages/ui/src/fields/Relationship/index.scss
+++ b/packages/ui/src/fields/Relationship/index.scss
@@ -1,64 +1,66 @@
 @import '../../scss/styles.scss';
 
-.field-type.relationship {
-  position: relative;
-}
-
-.relationship {
-  &__wrap {
-    display: flex;
-    width: 100%;
-
-    div.react-select {
-      width: 100%;
-      min-width: 0;
-    }
+@layer payload-default {
+  .field-type.relationship {
+    position: relative;
   }
 
-  &__error-loading {
-    border: 1px solid var(--theme-error-500);
-    min-height: base(2);
-    padding: base(0.5) base(0.75);
-    background-color: var(--theme-error-500);
-    color: var(--theme-elevation-0);
-  }
-
-  &--allow-create {
-    .rs__control {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-}
-
-html[data-theme='light'] {
   .relationship {
-    &.error {
-      > .relationship__wrap {
-        .rs__control {
+    &__wrap {
+      display: flex;
+      width: 100%;
+
+      div.react-select {
+        width: 100%;
+        min-width: 0;
+      }
+    }
+
+    &__error-loading {
+      border: 1px solid var(--theme-error-500);
+      min-height: base(2);
+      padding: base(0.5) base(0.75);
+      background-color: var(--theme-error-500);
+      color: var(--theme-elevation-0);
+    }
+
+    &--allow-create {
+      .rs__control {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  html[data-theme='light'] {
+    .relationship {
+      &.error {
+        > .relationship__wrap {
+          .rs__control {
+            @include lightInputError;
+          }
+        }
+
+        button.relationship-add-new__add-button {
           @include lightInputError;
         }
       }
-
-      button.relationship-add-new__add-button {
-        @include lightInputError;
-      }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .relationship {
-    &.error {
-      > .relationship__wrap {
-        .rs__control {
+  html[data-theme='dark'] {
+    .relationship {
+      &.error {
+        > .relationship__wrap {
+          .rs__control {
+            @include darkInputError;
+          }
+        }
+
+        button.relationship-add-new__add-button {
           @include darkInputError;
         }
       }
-
-      button.relationship-add-new__add-button {
-        @include darkInputError;
-      }
     }
   }
 }
diff --git a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss
index 3bc489235..170fe8953 100644
--- a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss
+++ b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss
@@ -1,49 +1,51 @@
 @import '../../../../scss/styles.scss';
 
-.relationship--multi-value-label {
-  display: flex;
-  padding-inline-start: base(0.4);
-  gap: base(0.2);
-
-  &__content {
-    @extend %small;
-    line-height: base(1.1);
-    max-width: 150px;
-    color: currentColor;
+@layer payload-default {
+  .relationship--multi-value-label {
     display: flex;
-    align-items: center;
-  }
+    padding-inline-start: base(0.4);
+    gap: base(0.2);
 
-  &__text {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  &__drawer-toggler {
-    border: none;
-    background-color: transparent;
-    padding: 0;
-    cursor: pointer;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: base(0.2);
-    pointer-events: all;
-
-    .icon {
-      width: base(1);
-      height: base(1);
-      padding: base(0.1);
+    &__content {
+      @extend %small;
+      line-height: base(1.1);
+      max-width: 150px;
+      color: currentColor;
+      display: flex;
+      align-items: center;
     }
 
-    &:hover {
-      background-color: var(--theme-elevation-150);
+    &__text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
     }
 
-    &:focus-visible {
-      outline: var(--accessibility-outline);
+    &__drawer-toggler {
+      border: none;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: base(0.2);
+      pointer-events: all;
+
+      .icon {
+        width: base(1);
+        height: base(1);
+        padding: base(0.1);
+      }
+
+      &:hover {
+        background-color: var(--theme-elevation-150);
+      }
+
+      &:focus-visible {
+        outline: var(--accessibility-outline);
+      }
     }
   }
 }
diff --git a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.scss b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.scss
index 2fad7cc2a..321535ea0 100644
--- a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.scss
+++ b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.scss
@@ -1,52 +1,54 @@
 @import '../../../../scss/styles.scss';
 
-.relationship--single-value {
-  &.rs__single-value {
-    overflow: visible;
-    min-width: 0;
-  }
-
-  &__label-text {
-    max-width: unset;
-    display: flex;
-    align-items: center;
-    overflow: visible;
-    width: 100%;
-    flex-shrink: 1;
-  }
-
-  &__text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &__drawer-toggler {
-    border: none;
-    background-color: transparent;
-    padding: 0;
-    cursor: pointer;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: base(0.25);
-    pointer-events: all;
-
-    .icon {
-      width: base(0.75);
-      height: base(0.75);
+@layer payload-default {
+  .relationship--single-value {
+    &.rs__single-value {
+      overflow: visible;
+      min-width: 0;
     }
 
-    &:focus-visible {
-      outline: var(--accessibility-outline);
+    &__label-text {
+      max-width: unset;
+      display: flex;
+      align-items: center;
+      overflow: visible;
+      width: 100%;
+      flex-shrink: 1;
     }
 
-    &:hover {
-      background-color: var(--theme-elevation-100);
+    &__text {
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
-  }
 
-  &__label {
-    flex-grow: 1;
+    &__drawer-toggler {
+      border: none;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: base(0.25);
+      pointer-events: all;
+
+      .icon {
+        width: base(0.75);
+        height: base(0.75);
+      }
+
+      &:focus-visible {
+        outline: var(--accessibility-outline);
+      }
+
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+    }
+
+    &__label {
+      flex-grow: 1;
+    }
   }
 }
diff --git a/packages/ui/src/fields/Row/index.scss b/packages/ui/src/fields/Row/index.scss
index 5c0c573f8..b9df28886 100644
--- a/packages/ui/src/fields/Row/index.scss
+++ b/packages/ui/src/fields/Row/index.scss
@@ -1,42 +1,44 @@
 @import '../../scss/styles.scss';
 
-.field-type.row {
-  .row__fields {
-    display: flex;
-    flex-wrap: wrap;
-    row-gap: calc(var(--base) * 0.8);
-
-    > * {
-      flex: 0 1 var(--field-width);
+@layer payload-default {
+  .field-type.row {
+    .row__fields {
       display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-    }
-
-    // If there is more than one child, add inline-margins to space them out.
-    &:has(> *:nth-child(2)) {
-      margin-inline: calc(var(--base) / -4); // add negative margin to counteract the gap.
+      flex-wrap: wrap;
+      row-gap: calc(var(--base) * 0.8);
 
       > * {
-        flex: 0 1 calc(var(--field-width) - var(--base) * 0.5);
-        margin-inline: calc(var(--base) / 4);
+        flex: 0 1 var(--field-width);
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+      }
+
+      // If there is more than one child, add inline-margins to space them out.
+      &:has(> *:nth-child(2)) {
+        margin-inline: calc(var(--base) / -4); // add negative margin to counteract the gap.
+
+        > * {
+          flex: 0 1 calc(var(--field-width) - var(--base) * 0.5);
+          margin-inline: calc(var(--base) / 4);
+        }
       }
     }
-  }
 
-  @include mid-break {
-    .row__fields {
-      display: block;
-      margin-left: 0;
-      margin-right: 0;
-      width: 100%;
-
-      > * {
+    @include mid-break {
+      .row__fields {
+        display: block;
         margin-left: 0;
         margin-right: 0;
-        width: 100% !important;
-        padding-left: 0;
-        padding-right: 0;
+        width: 100%;
+
+        > * {
+          margin-left: 0;
+          margin-right: 0;
+          width: 100% !important;
+          padding-left: 0;
+          padding-right: 0;
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/Select/index.scss b/packages/ui/src/fields/Select/index.scss
index 9507c99ad..76f92c188 100644
--- a/packages/ui/src/fields/Select/index.scss
+++ b/packages/ui/src/fields/Select/index.scss
@@ -1,24 +1,26 @@
 @import '../../scss/styles.scss';
 
-.field-type.select {
-  position: relative;
-}
-
-html[data-theme='light'] {
+@layer payload-default {
   .field-type.select {
-    &.error {
-      .rs__control {
-        @include lightInputError;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .field-type.select {
-    &.error {
-      .rs__control {
-        @include darkInputError;
+    position: relative;
+  }
+
+  html[data-theme='light'] {
+    .field-type.select {
+      &.error {
+        .rs__control {
+          @include lightInputError;
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .field-type.select {
+      &.error {
+        .rs__control {
+          @include darkInputError;
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/Tabs/Tab/index.scss b/packages/ui/src/fields/Tabs/Tab/index.scss
index 2312a65f2..1adf725e2 100644
--- a/packages/ui/src/fields/Tabs/Tab/index.scss
+++ b/packages/ui/src/fields/Tabs/Tab/index.scss
@@ -1,78 +1,80 @@
 @import '../../../scss/styles.scss';
 
-.tabs-field__tab-button {
-  @extend %btn-reset;
-  @extend %h4;
-  display: flex;
-  padding-bottom: base(1);
-  margin: 0 $baseline 0 0;
-  cursor: pointer;
-  opacity: 0.5;
-  position: relative;
-  white-space: nowrap;
-  flex-shrink: 0;
-  gap: base(0.5);
-
-  &:last-child {
-    margin: 0;
-  }
-
-  &:after {
-    content: ' ';
-    position: absolute;
-    right: 0;
-    bottom: -1px;
-    left: 0;
-    height: 1px;
-    background: var(--theme-elevation-800);
-    opacity: 0;
-  }
-
-  &:hover {
-    opacity: 0.75;
-
-    &:after {
-      opacity: 0.2;
-    }
-  }
-
-  &--active {
-    opacity: 1 !important;
-
-    &:after {
-      opacity: 1 !important;
-      height: 2px;
-    }
-  }
-
-  &__description {
-    margin-bottom: calc(var(--base) / 2);
-  }
-
-  @include small-break {
-    margin: 0 base(0.75) 0 0;
-    padding-bottom: base(0.5);
+@layer payload-default {
+  .tabs-field__tab-button {
+    @extend %btn-reset;
+    @extend %h4;
+    display: flex;
+    padding-bottom: base(1);
+    margin: 0 $baseline 0 0;
+    cursor: pointer;
+    opacity: 0.5;
+    position: relative;
+    white-space: nowrap;
+    flex-shrink: 0;
+    gap: base(0.5);
 
     &:last-child {
       margin: 0;
     }
-  }
-}
 
-html[data-theme='light'] {
-  .tabs-field__tab-button--has-error {
-    color: var(--theme-error-750);
     &:after {
-      background: var(--theme-error-500);
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .tabs-field__tab-button--has-error {
-    color: var(--theme-error-500);
-    &:after {
-      background: var(--theme-error-500);
+      content: ' ';
+      position: absolute;
+      right: 0;
+      bottom: -1px;
+      left: 0;
+      height: 1px;
+      background: var(--theme-elevation-800);
+      opacity: 0;
+    }
+
+    &:hover {
+      opacity: 0.75;
+
+      &:after {
+        opacity: 0.2;
+      }
+    }
+
+    &--active {
+      opacity: 1 !important;
+
+      &:after {
+        opacity: 1 !important;
+        height: 2px;
+      }
+    }
+
+    &__description {
+      margin-bottom: calc(var(--base) / 2);
+    }
+
+    @include small-break {
+      margin: 0 base(0.75) 0 0;
+      padding-bottom: base(0.5);
+
+      &:last-child {
+        margin: 0;
+      }
+    }
+  }
+
+  html[data-theme='light'] {
+    .tabs-field__tab-button--has-error {
+      color: var(--theme-error-750);
+      &:after {
+        background: var(--theme-error-500);
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .tabs-field__tab-button--has-error {
+      color: var(--theme-error-500);
+      &:after {
+        background: var(--theme-error-500);
+      }
     }
   }
 }
diff --git a/packages/ui/src/fields/Tabs/index.scss b/packages/ui/src/fields/Tabs/index.scss
index 119d1107f..07682eb23 100644
--- a/packages/ui/src/fields/Tabs/index.scss
+++ b/packages/ui/src/fields/Tabs/index.scss
@@ -1,62 +1,64 @@
 @import '../../scss/styles.scss';
 
-.tabs-field {
-  margin-top: base(2);
-  margin-left: calc(var(--gutter-h) * -1);
-  margin-right: calc(var(--gutter-h) * -1);
+@layer payload-default {
+  .tabs-field {
+    margin-top: base(2);
+    margin-left: calc(var(--gutter-h) * -1);
+    margin-right: calc(var(--gutter-h) * -1);
 
-  &__content-wrap {
-    padding-left: var(--gutter-h);
-    padding-right: var(--gutter-h);
-  }
-
-  &--within-collapsible {
-    margin: 0 calc(#{$baseline} * -1);
-
-    .tabs-field__content-wrap {
-      padding-left: $baseline;
-      padding-right: $baseline;
+    &__content-wrap {
+      padding-left: var(--gutter-h);
+      padding-right: var(--gutter-h);
     }
 
-    .tabs-field__tabs {
+    &--within-collapsible {
+      margin: 0 calc(#{$baseline} * -1);
+
+      .tabs-field__content-wrap {
+        padding-left: $baseline;
+        padding-right: $baseline;
+      }
+
+      .tabs-field__tabs {
+        &:before,
+        &:after {
+          content: ' ';
+          display: block;
+          width: $baseline;
+        }
+      }
+    }
+
+    &__tabs-wrap {
+      overflow-x: auto;
+      overflow-y: hidden;
+      margin-bottom: $baseline;
+    }
+
+    &__tabs {
+      border-bottom: 1px solid var(--theme-elevation-100);
+      display: inline-flex;
+      min-width: 100%;
+      vertical-align: bottom;
+
       &:before,
       &:after {
         content: ' ';
         display: block;
-        width: $baseline;
+        width: var(--gutter-h);
+        flex-shrink: 0;
+      }
+    }
+
+    &__description {
+      margin-bottom: calc(var(--base) / 2);
+    }
+
+    @include small-break {
+      &--within-collapsible {
+        margin-left: calc(var(--gutter-h) * -1);
+        margin-right: calc(var(--gutter-h) * -1);
       }
     }
   }
-
-  &__tabs-wrap {
-    overflow-x: auto;
-    overflow-y: hidden;
-    margin-bottom: $baseline;
-  }
-
-  &__tabs {
-    border-bottom: 1px solid var(--theme-elevation-100);
-    display: inline-flex;
-    min-width: 100%;
-    vertical-align: bottom;
-
-    &:before,
-    &:after {
-      content: ' ';
-      display: block;
-      width: var(--gutter-h);
-      flex-shrink: 0;
-    }
-  }
-
-  &__description {
-    margin-bottom: calc(var(--base) / 2);
-  }
-
-  @include small-break {
-    &--within-collapsible {
-      margin-left: calc(var(--gutter-h) * -1);
-      margin-right: calc(var(--gutter-h) * -1);
-    }
-  }
 }
diff --git a/packages/ui/src/fields/Text/index.scss b/packages/ui/src/fields/Text/index.scss
index fe73e0abe..fcc03a753 100644
--- a/packages/ui/src/fields/Text/index.scss
+++ b/packages/ui/src/fields/Text/index.scss
@@ -1,36 +1,38 @@
 @import '../../scss/styles.scss';
 
-.field-type.text {
-  position: relative;
+@layer payload-default {
+  .field-type.text {
+    position: relative;
 
-  &:not(.has-many) {
-    input {
-      @include formInput;
+    &:not(.has-many) {
+      input {
+        @include formInput;
+      }
     }
   }
-}
 
-.has-many {
-  .rs__input-container {
-    overflow: hidden;
+  .has-many {
+    .rs__input-container {
+      overflow: hidden;
+    }
   }
-}
 
-html[data-theme='light'] {
-  .field-type.text {
-    &.error {
-      input {
-        @include lightInputError;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .field-type.text {
-    &.error {
-      input {
-        @include darkInputError;
+  html[data-theme='light'] {
+    .field-type.text {
+      &.error {
+        input {
+          @include lightInputError;
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .field-type.text {
+      &.error {
+        input {
+          @include darkInputError;
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/Textarea/index.scss b/packages/ui/src/fields/Textarea/index.scss
index 011f70cb1..751fcaefb 100644
--- a/packages/ui/src/fields/Textarea/index.scss
+++ b/packages/ui/src/fields/Textarea/index.scss
@@ -1,112 +1,114 @@
 @import '../../scss/styles.scss';
 
-.field-type.textarea {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  .textarea-outer {
-    @include formInput();
+@layer payload-default {
+  .field-type.textarea {
+    position: relative;
     display: flex;
-    resize: vertical;
-    min-height: base(3);
-    height: 100%;
+    flex-direction: column;
 
-    // Scrollbar for giant content
-    max-height: calc(100vh - $top-header-offset - calc(#{base(5)}));
-    overflow: hidden;
+    .textarea-outer {
+      @include formInput();
+      display: flex;
+      resize: vertical;
+      min-height: base(3);
+      height: 100%;
+
+      // Scrollbar for giant content
+      max-height: calc(100vh - $top-header-offset - calc(#{base(5)}));
+      overflow: hidden;
+
+      @include mid-break {
+        max-height: 60vh;
+      }
+    }
+
+    &.read-only {
+      .textarea-outer {
+        @include readOnly;
+      }
+    }
+
+    // This element takes exactly the same dimensions as the clone
+    .textarea-inner {
+      display: block;
+      position: relative;
+      line-height: inherit;
+      flex-grow: 1;
+      background: none;
+      outline: none;
+    }
+
+    // Unstyle the textarea, the border is rendered on .textarea-outer
+    .textarea-element {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: inherit;
+      padding: inherit;
+      font: inherit;
+      line-height: inherit;
+      color: inherit;
+      background: none;
+      overflow: auto;
+      resize: none;
+      outline: none;
+      text-transform: inherit;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      &[data-rtl='true'] {
+        direction: rtl;
+      }
+    }
+
+    // Clone of textarea with same height
+    .textarea-clone {
+      vertical-align: top;
+      display: inline-block;
+      flex-grow: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: pre-wrap;
+      pointer-events: none;
+    }
+
+    .textarea-clone::before {
+      content: attr(data-value) ' ';
+      visibility: hidden;
+      opacity: 0;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+    }
+
+    .textarea-clone::after {
+      content: attr(data-after);
+      opacity: 0.5;
+    }
 
     @include mid-break {
-      max-height: 60vh;
+      padding: 0;
     }
   }
 
-  &.read-only {
-    .textarea-outer {
-      @include readOnly;
+  html[data-theme='light'] {
+    .field-type.textarea {
+      &.error {
+        .textarea-outer {
+          @include lightInputError;
+        }
+      }
     }
   }
 
-  // This element takes exactly the same dimensions as the clone
-  .textarea-inner {
-    display: block;
-    position: relative;
-    line-height: inherit;
-    flex-grow: 1;
-    background: none;
-    outline: none;
-  }
-
-  // Unstyle the textarea, the border is rendered on .textarea-outer
-  .textarea-element {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: inherit;
-    padding: inherit;
-    font: inherit;
-    line-height: inherit;
-    color: inherit;
-    background: none;
-    overflow: auto;
-    resize: none;
-    outline: none;
-    text-transform: inherit;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    &[data-rtl='true'] {
-      direction: rtl;
-    }
-  }
-
-  // Clone of textarea with same height
-  .textarea-clone {
-    vertical-align: top;
-    display: inline-block;
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: pre-wrap;
-    pointer-events: none;
-  }
-
-  .textarea-clone::before {
-    content: attr(data-value) ' ';
-    visibility: hidden;
-    opacity: 0;
-    white-space: pre-wrap;
-    overflow-wrap: break-word;
-  }
-
-  .textarea-clone::after {
-    content: attr(data-after);
-    opacity: 0.5;
-  }
-
-  @include mid-break {
-    padding: 0;
-  }
-}
-
-html[data-theme='light'] {
-  .field-type.textarea {
-    &.error {
-      .textarea-outer {
-        @include lightInputError;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .field-type.textarea {
-    &.error {
-      .textarea-outer {
-        @include darkInputError;
+  html[data-theme='dark'] {
+    .field-type.textarea {
+      &.error {
+        .textarea-outer {
+          @include darkInputError;
+        }
       }
     }
   }
diff --git a/packages/ui/src/fields/Upload/HasMany/index.scss b/packages/ui/src/fields/Upload/HasMany/index.scss
index 4640ca966..d733f978c 100644
--- a/packages/ui/src/fields/Upload/HasMany/index.scss
+++ b/packages/ui/src/fields/Upload/HasMany/index.scss
@@ -1,27 +1,29 @@
 @import '../../../scss/styles.scss';
 
-.upload--has-many {
-  position: relative;
-  max-width: 100%;
+@layer payload-default {
+  .upload--has-many {
+    position: relative;
+    max-width: 100%;
 
-  &__draggable-rows {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 4);
-  }
-
-  &__dragItem {
-    .icon--drag-handle {
-      color: var(--theme-elevation-400);
+    &__draggable-rows {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
     }
 
-    .thumbnail {
-      width: 26px;
-      height: 26px;
-    }
+    &__dragItem {
+      .icon--drag-handle {
+        color: var(--theme-elevation-400);
+      }
 
-    .uploadDocRelationshipContent__details {
-      line-height: 1.2;
+      .thumbnail {
+        width: 26px;
+        height: 26px;
+      }
+
+      .uploadDocRelationshipContent__details {
+        line-height: 1.2;
+      }
     }
   }
 }
diff --git a/packages/ui/src/fields/Upload/HasOne/index.scss b/packages/ui/src/fields/Upload/HasOne/index.scss
index b07ac1a75..26754c689 100644
--- a/packages/ui/src/fields/Upload/HasOne/index.scss
+++ b/packages/ui/src/fields/Upload/HasOne/index.scss
@@ -1,6 +1,8 @@
 @import '../../../scss/styles.scss';
 
-.upload {
-  position: relative;
-  max-width: 100%;
+@layer payload-default {
+  .upload {
+    position: relative;
+    max-width: 100%;
+  }
 }
diff --git a/packages/ui/src/fields/Upload/RelationshipContent/index.scss b/packages/ui/src/fields/Upload/RelationshipContent/index.scss
index 9f8437d56..1ebac5511 100644
--- a/packages/ui/src/fields/Upload/RelationshipContent/index.scss
+++ b/packages/ui/src/fields/Upload/RelationshipContent/index.scss
@@ -1,54 +1,56 @@
-.upload-relationship-details {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  min-width: 0;
-
-  &__imageAndDetails {
+@layer payload-default {
+  .upload-relationship-details {
     display: flex;
-    gap: calc(var(--base) / 2);
+    justify-content: space-between;
     align-items: center;
+    width: 100%;
     min-width: 0;
-  }
 
-  &__thumbnail {
-    align-self: center;
-    border-radius: var(--style-radius-s);
-  }
+    &__imageAndDetails {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      align-items: center;
+      min-width: 0;
+    }
 
-  &__details {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-    overflow: hidden;
-    margin-right: calc(var(--base) * 2);
-  }
+    &__thumbnail {
+      align-self: center;
+      border-radius: var(--style-radius-s);
+    }
 
-  &__filename {
-    margin: 0;
-    text-wrap: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    a {
-      text-decoration: none;
+    &__details {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      overflow: hidden;
+      margin-right: calc(var(--base) * 2);
+    }
+
+    &__filename {
+      margin: 0;
+      text-wrap: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      a {
+        text-decoration: none;
+      }
+    }
+
+    &__meta {
+      margin: 0;
+      color: var(--theme-elevation-500);
+      text-wrap: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &__actions {
+      flex-shrink: 0;
+      display: flex;
+    }
+
+    .btn {
+      margin: 0;
     }
   }
-
-  &__meta {
-    margin: 0;
-    color: var(--theme-elevation-500);
-    text-wrap: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  &__actions {
-    flex-shrink: 0;
-    display: flex;
-  }
-
-  .btn {
-    margin: 0;
-  }
 }
diff --git a/packages/ui/src/fields/Upload/UploadCard/index.scss b/packages/ui/src/fields/Upload/UploadCard/index.scss
index d4a7f57cc..c1c7366a7 100644
--- a/packages/ui/src/fields/Upload/UploadCard/index.scss
+++ b/packages/ui/src/fields/Upload/UploadCard/index.scss
@@ -1,26 +1,28 @@
-.upload-field-card {
-  background: var(--theme-elevation-50);
-  border: 1px solid var(--theme-border-color);
-  border-radius: var(--style-radius-s);
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: calc(var(--base) / 2);
+@layer payload-default {
+  .upload-field-card {
+    background: var(--theme-elevation-50);
+    border: 1px solid var(--theme-border-color);
+    border-radius: var(--style-radius-s);
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: calc(var(--base) / 2);
 
-  &--size-medium {
-    padding: calc(var(--base) * 0.5);
+    &--size-medium {
+      padding: calc(var(--base) * 0.5);
 
-    .thumbnail {
-      width: 40px;
-      height: 40px;
+      .thumbnail {
+        width: 40px;
+        height: 40px;
+      }
     }
-  }
 
-  &--size-small {
-    padding: calc(var(--base) / 3) calc(var(--base) / 2);
-    .thumbnail {
-      width: 25px;
-      height: 25px;
+    &--size-small {
+      padding: calc(var(--base) / 3) calc(var(--base) / 2);
+      .thumbnail {
+        width: 25px;
+        height: 25px;
+      }
     }
   }
 }
diff --git a/packages/ui/src/fields/Upload/index.scss b/packages/ui/src/fields/Upload/index.scss
index 83a62beb5..bc351538d 100644
--- a/packages/ui/src/fields/Upload/index.scss
+++ b/packages/ui/src/fields/Upload/index.scss
@@ -1,62 +1,64 @@
 @import '../../scss/styles.scss';
 
-.upload {
-  &__dropzoneAndUpload {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 4);
-  }
-
-  &__dropzoneContent {
-    display: flex;
-    flex-wrap: wrap;
-    gap: base(0.4);
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  &__dropzoneContent__buttons {
-    display: flex;
-    gap: calc(var(--base) / 2);
-    position: relative;
-    left: -2px;
-
-    .btn .btn__content {
-      gap: calc(var(--base) / 5);
+@layer payload-default {
+  .upload {
+    &__dropzoneAndUpload {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
     }
 
-    .btn__label {
-      font-weight: 100;
+    &__dropzoneContent {
+      display: flex;
+      flex-wrap: wrap;
+      gap: base(0.4);
+      justify-content: space-between;
+      width: 100%;
     }
-  }
 
-  &__dropzoneContent__orText {
-    color: var(--theme-elevation-500);
-    text-transform: lowercase;
-  }
+    &__dropzoneContent__buttons {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      position: relative;
+      left: -2px;
 
-  &__dragAndDropText {
-    flex-shrink: 0;
-    margin: 0;
-    text-transform: lowercase;
-    align-self: center;
-    color: var(--theme-elevation-500);
-  }
+      .btn .btn__content {
+        gap: calc(var(--base) / 5);
+      }
 
-  &__loadingRows {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 4);
-  }
+      .btn__label {
+        font-weight: 100;
+      }
+    }
 
-  .shimmer-effect {
-    border-radius: var(--style-radius-s);
-    border: 1px solid var(--theme-border-color);
-  }
+    &__dropzoneContent__orText {
+      color: var(--theme-elevation-500);
+      text-transform: lowercase;
+    }
 
-  @include small-break {
     &__dragAndDropText {
-      display: none;
+      flex-shrink: 0;
+      margin: 0;
+      text-transform: lowercase;
+      align-self: center;
+      color: var(--theme-elevation-500);
+    }
+
+    &__loadingRows {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+    }
+
+    .shimmer-effect {
+      border-radius: var(--style-radius-s);
+      border: 1px solid var(--theme-border-color);
+    }
+
+    @include small-break {
+      &__dragAndDropText {
+        display: none;
+      }
     }
   }
 }
diff --git a/packages/ui/src/forms/Form/index.scss b/packages/ui/src/forms/Form/index.scss
index 6e73bcffb..87afc63f9 100644
--- a/packages/ui/src/forms/Form/index.scss
+++ b/packages/ui/src/forms/Form/index.scss
@@ -1,5 +1,7 @@
-.form {
-  > * {
-    width: 100%;
+@layer payload-default {
+  .form {
+    > * {
+      width: 100%;
+    }
   }
 }
diff --git a/packages/ui/src/forms/RenderFields/index.scss b/packages/ui/src/forms/RenderFields/index.scss
index f5411689e..767cf2a8f 100644
--- a/packages/ui/src/forms/RenderFields/index.scss
+++ b/packages/ui/src/forms/RenderFields/index.scss
@@ -1,63 +1,65 @@
 @import '../../scss/styles.scss';
 
-// Positioned field-type__wrap is needed for correct positioning of field tooltips.
-// This is set outside of .render-fields, so that manually rendered fields (e.g. in Auth/index.tsx)
-// outside RenderFields also receive this styling.
-.field-type__wrap {
-  position: relative;
-}
-
-.render-fields {
-  --spacing-field: var(--base);
-
-  &--margins-small {
-    --spacing-field: var(--base);
-  }
-
-  &--margins-none {
-    --spacing-field: 0;
-  }
-
-  & > .field-type {
-    margin-bottom: var(--spacing-field);
+@layer payload-default {
+  // Positioned field-type__wrap is needed for correct positioning of field tooltips.
+  // This is set outside of .render-fields, so that manually rendered fields (e.g. in Auth/index.tsx)
+  // outside RenderFields also receive this styling.
+  .field-type__wrap {
     position: relative;
-
-    &[type='hidden'] {
-      margin-bottom: 0;
-    }
-
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
   }
 
-  // at the top-level, add extra margins for the following field types
-  &:not(.render-fields--margins-small) {
+  .render-fields {
+    --spacing-field: var(--base);
+
+    &--margins-small {
+      --spacing-field: var(--base);
+    }
+
+    &--margins-none {
+      --spacing-field: 0;
+    }
+
     & > .field-type {
-      &.group-field,
-      &.blocks-field,
-      &.array-field,
-      &.collapsible-field,
-      &.rich-text {
-        margin-top: calc(var(--spacing-field) * 2);
-        margin-bottom: calc(var(--spacing-field) * 2);
+      margin-bottom: var(--spacing-field);
+      position: relative;
 
-        &:first-child {
-          margin-top: 0;
-        }
+      &[type='hidden'] {
+        margin-bottom: 0;
+      }
 
-        &:last-child {
-          margin-bottom: 0;
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    // at the top-level, add extra margins for the following field types
+    &:not(.render-fields--margins-small) {
+      & > .field-type {
+        &.group-field,
+        &.blocks-field,
+        &.array-field,
+        &.collapsible-field,
+        &.rich-text {
+          margin-top: calc(var(--spacing-field) * 2);
+          margin-bottom: calc(var(--spacing-field) * 2);
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          &:last-child {
+            margin-bottom: 0;
+          }
         }
       }
     }
-  }
 
-  @include small-break {
-    --spacing-field: calc(var(--base) / 2);
+    @include small-break {
+      --spacing-field: calc(var(--base) / 2);
+    }
   }
 }
diff --git a/packages/ui/src/forms/Submit/index.scss b/packages/ui/src/forms/Submit/index.scss
index 66aba3a89..14c7d9ddf 100644
--- a/packages/ui/src/forms/Submit/index.scss
+++ b/packages/ui/src/forms/Submit/index.scss
@@ -1,5 +1,7 @@
-form > .form-submit {
-  .btn {
-    width: 100%;
+@layer payload-default {
+  form > .form-submit {
+    .btn {
+      width: 100%;
+    }
   }
 }
diff --git a/packages/ui/src/graphics/Account/Default/index.scss b/packages/ui/src/graphics/Account/Default/index.scss
index ba39af22a..6901e313e 100644
--- a/packages/ui/src/graphics/Account/Default/index.scss
+++ b/packages/ui/src/graphics/Account/Default/index.scss
@@ -1,54 +1,38 @@
-.graphic-account {
-  vector-effect: non-scaling-stroke;
-  overflow: visible;
-  position: relative;
-
-  &__bg {
-    fill: var(--theme-elevation-50);
-    stroke: var(--theme-elevation-200);
-    stroke-width: 1px;
-  }
-
-  &__head,
-  &__body {
-    fill: var(--theme-elevation-200);
-  }
-
-  &--active {
-    .graphic-account {
-      &__bg {
-        fill: var(--theme-elevation-500);
-        stroke: var(--theme-text);
-      }
-
-      &__head,
-      &__body {
-        fill: var(--theme-text);
-      }
-    }
-  }
-
-  &:hover:not(.graphic-account--active) {
-    .graphic-account {
-      &__bg {
-        fill: var(--theme-elevation-200);
-        stroke: var(--theme-elevation-600);
-      }
-
-      &__head,
-      &__body {
-        fill: var(--theme-elevation-600);
-      }
-    }
-  }
-}
-
-[data-theme='light'] {
+@layer payload-default {
   .graphic-account {
+    vector-effect: non-scaling-stroke;
+    overflow: visible;
+    position: relative;
+
+    &__bg {
+      fill: var(--theme-elevation-50);
+      stroke: var(--theme-elevation-200);
+      stroke-width: 1px;
+    }
+
+    &__head,
+    &__body {
+      fill: var(--theme-elevation-200);
+    }
+
     &--active {
       .graphic-account {
         &__bg {
-          fill: var(--theme-elevation-300);
+          fill: var(--theme-elevation-500);
+          stroke: var(--theme-text);
+        }
+
+        &__head,
+        &__body {
+          fill: var(--theme-text);
+        }
+      }
+    }
+
+    &:hover:not(.graphic-account--active) {
+      .graphic-account {
+        &__bg {
+          fill: var(--theme-elevation-200);
           stroke: var(--theme-elevation-600);
         }
 
@@ -59,4 +43,22 @@
       }
     }
   }
+
+  [data-theme='light'] {
+    .graphic-account {
+      &--active {
+        .graphic-account {
+          &__bg {
+            fill: var(--theme-elevation-300);
+            stroke: var(--theme-elevation-600);
+          }
+
+          &__head,
+          &__body {
+            fill: var(--theme-elevation-600);
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/packages/ui/src/icons/Calendar/index.scss b/packages/ui/src/icons/Calendar/index.scss
index 7756ed466..a619e9fc2 100644
--- a/packages/ui/src/icons/Calendar/index.scss
+++ b/packages/ui/src/icons/Calendar/index.scss
@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--calendar {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--calendar {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+    }
   }
 }
diff --git a/packages/ui/src/icons/Check/index.scss b/packages/ui/src/icons/Check/index.scss
index b077a5f31..5ff197e17 100644
--- a/packages/ui/src/icons/Check/index.scss
+++ b/packages/ui/src/icons/Check/index.scss
@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--check {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--check {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-m;
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-m;
+    }
   }
 }
diff --git a/packages/ui/src/icons/Chevron/index.scss b/packages/ui/src/icons/Chevron/index.scss
index a826dd4e8..5cad750b5 100644
--- a/packages/ui/src/icons/Chevron/index.scss
+++ b/packages/ui/src/icons/Chevron/index.scss
@@ -1,23 +1,25 @@
 @import '../../scss/styles';
 
-.icon--chevron {
-  height: calc(var(--base) / 2);
-  width: calc(var(--base) / 2);
+@layer payload-default {
+  .icon--chevron {
+    height: calc(var(--base) / 2);
+    width: calc(var(--base) / 2);
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
-    vector-effect: non-scaling-stroke;
-  }
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+      vector-effect: non-scaling-stroke;
+    }
 
-  &.icon--size-large {
-    height: var(--base);
-    width: var(--base);
-  }
+    &.icon--size-large {
+      height: var(--base);
+      width: var(--base);
+    }
 
-  &.icon--size-small {
-    height: 8px;
-    width: 8px;
+    &.icon--size-small {
+      height: 8px;
+      width: 8px;
+    }
   }
 }
diff --git a/packages/ui/src/icons/CloseMenu/index.scss b/packages/ui/src/icons/CloseMenu/index.scss
index 638890ca3..1864ad450 100644
--- a/packages/ui/src/icons/CloseMenu/index.scss
+++ b/packages/ui/src/icons/CloseMenu/index.scss
@@ -1,10 +1,12 @@
 @import '../../scss/styles.scss';
 
-.icon--close-menu {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--close-menu {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    stroke: currentColor;
+    .stroke {
+      stroke: currentColor;
+    }
   }
 }
diff --git a/packages/ui/src/icons/Copy/index.scss b/packages/ui/src/icons/Copy/index.scss
index 5129cffd0..d2b287b2f 100644
--- a/packages/ui/src/icons/Copy/index.scss
+++ b/packages/ui/src/icons/Copy/index.scss
@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--copy {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--copy {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+    }
   }
 }
diff --git a/packages/ui/src/icons/DragHandle/index.scss b/packages/ui/src/icons/DragHandle/index.scss
index caf94c763..ea8ec9c78 100644
--- a/packages/ui/src/icons/DragHandle/index.scss
+++ b/packages/ui/src/icons/DragHandle/index.scss
@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--drag-handle {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--drag-handle {
+    height: $baseline;
+    width: $baseline;
 
-  .fill {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
-    fill: var(--theme-elevation-800);
+    .fill {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+      fill: var(--theme-elevation-800);
+    }
   }
 }
diff --git a/packages/ui/src/icons/Edit/index.scss b/packages/ui/src/icons/Edit/index.scss
index d997a5b14..5691783d6 100644
--- a/packages/ui/src/icons/Edit/index.scss
+++ b/packages/ui/src/icons/Edit/index.scss
@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--edit {
-  height: $baseline;
-  width: $baseline;
-  shape-rendering: auto;
+@layer payload-default {
+  .icon--edit {
+    height: $baseline;
+    width: $baseline;
+    shape-rendering: auto;
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+    }
   }
 }
diff --git a/packages/ui/src/icons/Line/index.scss b/packages/ui/src/icons/Line/index.scss
index 98c33bc08..0dfba36cd 100644
--- a/packages/ui/src/icons/Line/index.scss
+++ b/packages/ui/src/icons/Line/index.scss
@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--line {
-  width: $baseline;
-  height: $baseline;
+@layer payload-default {
+  .icon--line {
+    width: $baseline;
+    height: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width;
+    }
   }
 }
diff --git a/packages/ui/src/icons/Link/index.scss b/packages/ui/src/icons/Link/index.scss
index b8b9d3892..ce5d41417 100644
--- a/packages/ui/src/icons/Link/index.scss
+++ b/packages/ui/src/icons/Link/index.scss
@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--link {
-  width: $baseline;
-  height: $baseline;
+@layer payload-default {
+  .icon--link {
+    width: $baseline;
+    height: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width;
+    }
   }
 }
diff --git a/packages/ui/src/icons/Lock/index.scss b/packages/ui/src/icons/Lock/index.scss
index 55504a43d..2a887e655 100644
--- a/packages/ui/src/icons/Lock/index.scss
+++ b/packages/ui/src/icons/Lock/index.scss
@@ -1,8 +1,10 @@
 @import '../../scss/styles';
 
-.icon--lock {
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width;
+@layer payload-default {
+  .icon--lock {
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width;
+    }
   }
 }
diff --git a/packages/ui/src/icons/LogOut/index.scss b/packages/ui/src/icons/LogOut/index.scss
index 8bd3ac28d..a77eb88cb 100644
--- a/packages/ui/src/icons/LogOut/index.scss
+++ b/packages/ui/src/icons/LogOut/index.scss
@@ -1,11 +1,13 @@
 @import '../../scss/styles.scss';
 
-.icon--logout {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--logout {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: 2px;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: 2px;
+    }
   }
 }
diff --git a/packages/ui/src/icons/Menu/index.scss b/packages/ui/src/icons/Menu/index.scss
index c9e0182ba..25849b4d1 100644
--- a/packages/ui/src/icons/Menu/index.scss
+++ b/packages/ui/src/icons/Menu/index.scss
@@ -1,8 +1,10 @@
 @import '../../scss/styles.scss';
 
-.icon--menu {
-  .stroke {
-    stroke-width: $style-stroke-width-s;
-    stroke: currentColor;
+@layer payload-default {
+  .icon--menu {
+    .stroke {
+      stroke-width: $style-stroke-width-s;
+      stroke: currentColor;
+    }
   }
 }
diff --git a/packages/ui/src/icons/More/index.scss b/packages/ui/src/icons/More/index.scss
index 46c7807ee..09afad740 100644
--- a/packages/ui/src/icons/More/index.scss
+++ b/packages/ui/src/icons/More/index.scss
@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--more {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--more {
+    height: $baseline;
+    width: $baseline;
 
-  .fill {
-    fill: var(--theme-elevation-800);
-    stroke: currentColor;
+    .fill {
+      fill: var(--theme-elevation-800);
+      stroke: currentColor;
+    }
   }
 }
diff --git a/packages/ui/src/icons/Plus/index.scss b/packages/ui/src/icons/Plus/index.scss
index 71b58d54c..10348a339 100644
--- a/packages/ui/src/icons/Plus/index.scss
+++ b/packages/ui/src/icons/Plus/index.scss
@@ -1,8 +1,10 @@
 @import '../../scss/styles';
 
-.icon--plus {
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width;
+@layer payload-default {
+  .icon--plus {
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width;
+    }
   }
 }
diff --git a/packages/ui/src/icons/Search/index.scss b/packages/ui/src/icons/Search/index.scss
index 902016a44..697c3aa4f 100644
--- a/packages/ui/src/icons/Search/index.scss
+++ b/packages/ui/src/icons/Search/index.scss
@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--search {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--search {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+    }
   }
 }
diff --git a/packages/ui/src/icons/Swap/index.scss b/packages/ui/src/icons/Swap/index.scss
index 02706567f..5b33e0559 100644
--- a/packages/ui/src/icons/Swap/index.scss
+++ b/packages/ui/src/icons/Swap/index.scss
@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--swap {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--swap {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+    }
   }
 }
diff --git a/packages/ui/src/icons/X/index.scss b/packages/ui/src/icons/X/index.scss
index 80d4a4b0c..b85863a60 100644
--- a/packages/ui/src/icons/X/index.scss
+++ b/packages/ui/src/icons/X/index.scss
@@ -1,8 +1,10 @@
 @import '../../scss/styles';
 
-.icon--x {
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
+@layer payload-default {
+  .icon--x {
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+    }
   }
 }
diff --git a/packages/ui/src/scss/app.scss b/packages/ui/src/scss/app.scss
index 90254443b..b0c575df8 100644
--- a/packages/ui/src/scss/app.scss
+++ b/packages/ui/src/scss/app.scss
@@ -1,203 +1,207 @@
+@layer payload-default, payload;
+
 @import 'styles';
 @import './toasts.scss';
 @import './colors.scss';
 
-:root {
-  --base-px: 20;
-  --base-body-size: 13;
-  --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
+@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;
+    --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;
+    --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;
 
-    ::selection {
-      color: var(--color-base-1000);
+    --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);
     }
 
-    ::-moz-selection {
-      color: var(--color-base-1000);
+    @include small-break {
+      --gutter-h: #{base(0.8)};
+      --spacing-view-bottom: calc(var(--base) * 2);
+      --nav-width: 100vw;
     }
   }
 
-  @include mid-break {
-    font-size: 12px;
+  /////////////////////////////
+  // GLOBAL STYLES
+  /////////////////////////////
+
+  * {
+    box-sizing: border-box;
   }
-}
 
-html,
-body,
-#app {
-  height: 100%;
-}
+  html {
+    @extend %body;
+    background: var(--theme-bg);
+    -webkit-font-smoothing: antialiased;
 
-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;
-}
+    &[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 {
-  background: var(--color-success-250);
-  color: var(--theme-base-800);
-}
+      ::selection {
+        color: var(--color-base-1000);
+      }
 
-::-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;
+      ::-moz-selection {
+        color: var(--color-base-1000);
+      }
+    }
+
+    @include mid-break {
+      font-size: 12px;
     }
-    outline: none;
   }
 
-  &:active {
-    opacity: 0.7;
-    outline: none;
+  html,
+  body,
+  #app {
+    height: 100%;
   }
-}
 
-svg {
-  vertical-align: middle;
-}
+  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;
+  }
 
-dialog {
-  width: 100%;
-  border: 0;
-  padding: 0;
-  color: currentColor;
-}
+  ::selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-.payload__modal-item {
-  min-height: 100%;
-  background: transparent;
-}
+  ::-moz-selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-.payload__modal-container--enterDone {
-  overflow: auto;
-}
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
 
-.payload__modal-item--enter,
-.payload__modal-item--enterDone {
-  z-index: var(--z-modal);
-}
+  h1 {
+    @extend %h1;
+  }
 
-// @import '~payload-user-css'; TODO: re-enable this
+  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
+}
diff --git a/packages/ui/src/scss/colors.scss b/packages/ui/src/scss/colors.scss
index 42cea0585..1eaa88cb0 100644
--- a/packages/ui/src/scss/colors.scss
+++ b/packages/ui/src/scss/colors.scss
@@ -1,269 +1,271 @@
-: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);
+@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-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-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-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);
+    --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-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-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-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-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);
+    --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);
+  }
 }
diff --git a/packages/ui/src/scss/resets.scss b/packages/ui/src/scss/resets.scss
index eeda892c2..e73efa9c0 100644
--- a/packages/ui/src/scss/resets.scss
+++ b/packages/ui/src/scss/resets.scss
@@ -1,10 +1,12 @@
-%btn-reset {
-  border: 0;
-  background: none;
-  box-shadow: none;
-  border-radius: 0;
-  padding: 0;
-  color: currentColor;
+@layer payload-default {
+  %btn-reset {
+    border: 0;
+    background: none;
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0;
+    color: currentColor;
+  }
 }
 
 @mixin btn-reset {
diff --git a/packages/ui/src/scss/toastify.scss b/packages/ui/src/scss/toastify.scss
index a5bf4c35f..33192936a 100644
--- a/packages/ui/src/scss/toastify.scss
+++ b/packages/ui/src/scss/toastify.scss
@@ -1,59 +1,61 @@
 @import 'vars';
 @import 'queries';
 
-.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 {
+@layer payload-default {
+  .Toastify {
     .Toastify__toast-container {
-      left: $baseline;
-      right: $baseline;
+      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;
+      }
     }
   }
 }
diff --git a/packages/ui/src/scss/toasts.scss b/packages/ui/src/scss/toasts.scss
index 116845ac3..4d3b0bc37 100644
--- a/packages/ui/src/scss/toasts.scss
+++ b/packages/ui/src/scss/toasts.scss
@@ -1,140 +1,142 @@
 @import './styles.scss';
 
-.payload-toast-container {
-  padding: 0;
-  margin: 0;
+@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;
+    .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);
-    }
+      svg {
+        width: base(0.8);
+        height: base(0.8);
+      }
 
-    &:hover {
-      color: var(--theme-elevation-250);
-      background: none;
-    }
+      &: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;
+      [dir='RTL'] & {
+        right: unset;
+        left: 0.5rem;
       }
     }
 
-    &[data-expanded='true'] {
-      .toast-content {
-        opacity: 1;
-      }
+    .toast-title {
+      line-height: base(1);
+      margin-right: base(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 {
+    .payload-toast-item {
+      padding: base(0.8);
       color: var(--theme-elevation-800);
-      border-color: var(--theme-elevation-250);
-      background-color: var(--theme-elevation-100);
+      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);
 
-      .payload-toast-close-button {
-        color: var(--theme-elevation-600);
+      .toast-content {
+        transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        width: 100%;
+      }
 
-        &:hover {
-          color: var(--theme-elevation-250);
+      &[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);
+          }
         }
       }
     }
diff --git a/packages/ui/src/scss/type.scss b/packages/ui/src/scss/type.scss
index 997e43e24..652940b27 100644
--- a/packages/ui/src/scss/type.scss
+++ b/packages/ui/src/scss/type.scss
@@ -5,105 +5,107 @@
 // HEADINGS
 /////////////////////////////
 
-%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);
+@layer payload-default {
+  %h1,
+  %h2,
+  %h3,
+  %h4,
+  %h5,
+  %h6 {
+    font-family: var(--font-body);
+    font-weight: 500;
   }
-}
 
-%h2 {
-  margin: 0;
-  font-size: base(1.3);
-  line-height: base(1.6);
+  %h1 {
+    margin: 0;
+    font-size: base(1.6);
+    line-height: base(1.8);
 
-  @include small-break {
-    font-size: base(0.85);
+    @include small-break {
+      letter-spacing: -0.5px;
+      font-size: base(1.25);
+    }
   }
-}
 
-%h3 {
-  margin: 0;
-  font-size: base(1);
-  line-height: base(1.2);
+  %h2 {
+    margin: 0;
+    font-size: base(1.3);
+    line-height: base(1.6);
 
-  @include small-break {
-    font-size: base(0.65);
-    line-height: 1.25;
+    @include small-break {
+      font-size: base(0.85);
+    }
   }
-}
 
-%h4 {
-  margin: 0;
-  font-size: base(0.8);
-  line-height: base(1);
-  letter-spacing: -0.375px;
-}
+  %h3 {
+    margin: 0;
+    font-size: base(1);
+    line-height: base(1.2);
 
-%h5 {
-  margin: 0;
-  font-size: base(0.65);
-  line-height: base(0.8);
-}
+    @include small-break {
+      font-size: base(0.65);
+      line-height: 1.25;
+    }
+  }
 
-%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);
+  %h4 {
+    margin: 0;
+    font-size: base(0.8);
     line-height: base(1);
+    letter-spacing: -0.375px;
   }
 
-  @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);
+  %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);
+    }
   }
 }
diff --git a/test/admin-root/next-env.d.ts b/test/admin-root/next-env.d.ts
index 4f11a03dc..40c3d6809 100644
--- a/test/admin-root/next-env.d.ts
+++ b/test/admin-root/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/test/admin-root/payload-types.ts b/test/admin-root/payload-types.ts
index 9c7218106..38ca6e9ff 100644
--- a/test/admin-root/payload-types.ts
+++ b/test/admin-root/payload-types.ts
@@ -13,6 +13,7 @@ export interface Config {
   collections: {
     posts: Post;
     users: User;
+    'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
     'payload-migrations': PayloadMigration;
   };
@@ -73,6 +74,29 @@ export interface User {
   lockUntil?: string | null;
   password?: string | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-locked-documents".
+ */
+export interface PayloadLockedDocument {
+  id: string;
+  document?:
+    | ({
+        relationTo: 'posts';
+        value: string | Post;
+      } | null)
+    | ({
+        relationTo: 'users';
+        value: string | User;
+      } | null);
+  globalSlug?: string | null;
+  user: {
+    relationTo: 'users';
+    value: string | User;
+  };
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-preferences".