@puckeditor/core 0.22.0-canary.faffb521 → 0.22.0

package/dist/index.css

@@ -1,140 +1,220 @@
 @import "https://rsms.me/inter/inter.css";
 
 /* styles/color.css */
-:root {
-  --puck-color-rose-01: #4a001c;
-  --puck-color-rose-02: #670833;
-  --puck-color-rose-03: #87114c;
-  --puck-color-rose-04: #a81a66;
-  --puck-color-rose-05: #bc5089;
-  --puck-color-rose-06: #cc7ca5;
-  --puck-color-rose-07: #d89aba;
-  --puck-color-rose-08: #e3b8cf;
-  --puck-color-rose-09: #efd6e3;
-  --puck-color-rose-10: #f6eaf1;
-  --puck-color-rose-11: #faf4f8;
-  --puck-color-rose-12: #fef8fc;
-  --puck-color-azure-01: #00175d;
-  --puck-color-azure-02: #002c77;
-  --puck-color-azure-03: #014292;
-  --puck-color-azure-04: #0158ad;
-  --puck-color-azure-05: #3479be;
-  --puck-color-azure-06: #6499cf;
-  --puck-color-azure-07: #88b0da;
-  --puck-color-azure-08: #abc7e5;
-  --puck-color-azure-09: #cfdff0;
-  --puck-color-azure-10: #e7eef7;
-  --puck-color-azure-11: #f3f6fb;
-  --puck-color-azure-12: #f7faff;
-  --puck-color-green-01: #002000;
-  --puck-color-green-02: #043604;
-  --puck-color-green-03: #084e08;
-  --puck-color-green-04: #0c680c;
-  --puck-color-green-05: #1d882f;
-  --puck-color-green-06: #2faa53;
-  --puck-color-green-07: #56c16f;
-  --puck-color-green-08: #7dd78b;
-  --puck-color-green-09: #b8e8bf;
-  --puck-color-green-10: #ddf3e0;
-  --puck-color-green-11: #eff8f0;
-  --puck-color-green-12: #f3fcf4;
-  --puck-color-yellow-01: #211000;
-  --puck-color-yellow-02: #362700;
-  --puck-color-yellow-03: #4c4000;
-  --puck-color-yellow-04: #645a00;
-  --puck-color-yellow-05: #877614;
-  --puck-color-yellow-06: #ab9429;
-  --puck-color-yellow-07: #bfac4e;
-  --puck-color-yellow-08: #d4c474;
-  --puck-color-yellow-09: #e6deb1;
-  --puck-color-yellow-10: #f3efd9;
-  --puck-color-yellow-11: #f9f7ed;
-  --puck-color-yellow-12: #fcfaf0;
-  --puck-color-red-01: #4c0000;
-  --puck-color-red-02: #6a0a10;
-  --puck-color-red-03: #8a1422;
-  --puck-color-red-04: #ac1f35;
-  --puck-color-red-05: #bf5366;
-  --puck-color-red-06: #ce7e8e;
-  --puck-color-red-07: #d99ca8;
-  --puck-color-red-08: #e4b9c2;
-  --puck-color-red-09: #efd7db;
-  --puck-color-red-10: #f6eaec;
-  --puck-color-red-11: #faf4f5;
-  --puck-color-red-12: #fff9fa;
-  --puck-color-grey-01: #181818;
-  --puck-color-grey-02: #292929;
-  --puck-color-grey-03: #404040;
-  --puck-color-grey-04: #5a5a5a;
-  --puck-color-grey-05: #767676;
-  --puck-color-grey-06: #949494;
-  --puck-color-grey-07: #ababab;
-  --puck-color-grey-08: #c3c3c3;
-  --puck-color-grey-09: #dcdcdc;
-  --puck-color-grey-10: #efefef;
-  --puck-color-grey-11: #f5f5f5;
-  --puck-color-grey-12: #fafafa;
-  --puck-color-black: #000000;
-  --puck-color-white: #ffffff;
+@layer puck-tokens {
+  :root {
+    --puck-color-rose-01: #4a001c;
+    --puck-color-rose-02: #670833;
+    --puck-color-rose-03: #87114c;
+    --puck-color-rose-04: #a81a66;
+    --puck-color-rose-05: #bc5089;
+    --puck-color-rose-06: #cc7ca5;
+    --puck-color-rose-07: #d89aba;
+    --puck-color-rose-08: #e3b8cf;
+    --puck-color-rose-09: #efd6e3;
+    --puck-color-rose-10: #f6eaf1;
+    --puck-color-rose-11: #faf4f8;
+    --puck-color-rose-12: #fef8fc;
+    --puck-color-azure-01: #00175d;
+    --puck-color-azure-02: #002c77;
+    --puck-color-azure-03: #014292;
+    --puck-color-azure-04: #0158ad;
+    --puck-color-azure-05: #3479be;
+    --puck-color-azure-06: #6499cf;
+    --puck-color-azure-07: #88b0da;
+    --puck-color-azure-08: #abc7e5;
+    --puck-color-azure-09: #cfdff0;
+    --puck-color-azure-10: #e7eef7;
+    --puck-color-azure-11: #f3f6fb;
+    --puck-color-azure-12: #f7faff;
+    --puck-color-green-01: #002000;
+    --puck-color-green-02: #043604;
+    --puck-color-green-03: #084e08;
+    --puck-color-green-04: #0c680c;
+    --puck-color-green-05: #1d882f;
+    --puck-color-green-06: #2faa53;
+    --puck-color-green-07: #56c16f;
+    --puck-color-green-08: #7dd78b;
+    --puck-color-green-09: #b8e8bf;
+    --puck-color-green-10: #ddf3e0;
+    --puck-color-green-11: #eff8f0;
+    --puck-color-green-12: #f3fcf4;
+    --puck-color-yellow-01: #211000;
+    --puck-color-yellow-02: #362700;
+    --puck-color-yellow-03: #4c4000;
+    --puck-color-yellow-04: #645a00;
+    --puck-color-yellow-05: #877614;
+    --puck-color-yellow-06: #ab9429;
+    --puck-color-yellow-07: #bfac4e;
+    --puck-color-yellow-08: #d4c474;
+    --puck-color-yellow-09: #e6deb1;
+    --puck-color-yellow-10: #f3efd9;
+    --puck-color-yellow-11: #f9f7ed;
+    --puck-color-yellow-12: #fcfaf0;
+    --puck-color-red-01: #4c0000;
+    --puck-color-red-02: #6a0a10;
+    --puck-color-red-03: #8a1422;
+    --puck-color-red-04: #ac1f35;
+    --puck-color-red-05: #bf5366;
+    --puck-color-red-06: #ce7e8e;
+    --puck-color-red-07: #d99ca8;
+    --puck-color-red-08: #e4b9c2;
+    --puck-color-red-09: #efd7db;
+    --puck-color-red-10: #f6eaec;
+    --puck-color-red-11: #faf4f5;
+    --puck-color-red-12: #fff9fa;
+    --puck-color-grey-01: #181818;
+    --puck-color-grey-02: #292929;
+    --puck-color-grey-03: #404040;
+    --puck-color-grey-04: #5a5a5a;
+    --puck-color-grey-05: #767676;
+    --puck-color-grey-06: #949494;
+    --puck-color-grey-07: #ababab;
+    --puck-color-grey-08: #c3c3c3;
+    --puck-color-grey-09: #dcdcdc;
+    --puck-color-grey-10: #efefef;
+    --puck-color-grey-11: #f5f5f5;
+    --puck-color-grey-12: #fafafa;
+    --puck-color-black: #000000;
+    --puck-color-white: #ffffff;
+  }
+}
+
+/* styles/tokens.css */
+@layer puck-tokens {
+  :root {
+    --puck-color-surface: var(--puck-color-white);
+    --puck-color-surface-muted: var(--puck-color-grey-11);
+    --puck-color-surface-subtle: var(--puck-color-grey-12);
+    --puck-color-surface-inverse: var(--puck-color-grey-01);
+    --puck-color-border: var(--puck-color-grey-09);
+    --puck-color-border-hover: var(--puck-color-grey-05);
+    --puck-color-border-muted: var(--puck-color-grey-10);
+    --puck-color-border-inverse: var(--puck-color-grey-05);
+    --puck-color-text: var(--puck-color-black);
+    --puck-color-text-secondary: var(--puck-color-grey-04);
+    --puck-color-text-muted: var(--puck-color-grey-05);
+    --puck-color-text-subtle: var(--puck-color-grey-07);
+    --puck-color-text-inverse: var(--puck-color-white);
+    --puck-opacity-text-inverse: 0.75;
+    --puck-color-interactive: var(--puck-color-azure-04);
+    --puck-color-interactive-hover: var(--puck-color-azure-03);
+    --puck-color-interactive-active: var(--puck-color-azure-02);
+    --puck-color-interactive-subtle: var(--puck-color-azure-10);
+    --puck-color-interactive-soft: var(--puck-color-azure-11);
+    --puck-color-interactive-soft-hover: var(--puck-color-azure-12);
+    --puck-color-interactive-neutral-hover: var(--puck-color-grey-10);
+    --puck-color-interactive-inverse-hover: var(--puck-color-azure-06);
+    --puck-color-interactive-inverse-active: var(--puck-color-azure-07);
+    --puck-color-focus-ring: var(--puck-color-azure-05);
+    --puck-color-selection-bg: color-mix( in srgb, var(--puck-color-azure-09) 30%, transparent );
+    --puck-color-selection-border: var(--puck-color-azure-08);
+    --puck-color-highlight: var(--puck-color-rose-07);
+    --puck-color-bg-disabled: var(--puck-color-grey-07);
+    --puck-color-text-disabled: var(--puck-color-grey-03);
+    --puck-color-overlay-backdrop: color-mix( in srgb, var(--puck-color-black) 75%, transparent );
+    --puck-space-1: 4px;
+    --puck-space-2: 8px;
+    --puck-space-3: 12px;
+    --puck-space-4: 16px;
+    --puck-space-5: 24px;
+    --puck-space-chrome-gutter: var(--puck-space-4);
+    --puck-radius-none: 0;
+    --puck-radius-xs: 2px;
+    --puck-radius-s: 3px;
+    --puck-radius-m: 4px;
+    --puck-radius-l: 8px;
+    --puck-radius-pill: 30px;
+    --puck-radius-round: 100%;
+    --puck-border-width-hairline: 0.5px;
+    --puck-border-width-regular: 1px;
+    --puck-border-width-focus: 2px;
+    --puck-border-width-strong: 4px;
+    --puck-duration-fast: 50ms;
+    --puck-duration-medium: 150ms;
+    --puck-duration-slow: 250ms;
+    --puck-ease-exit: ease-in;
+    --puck-ease-emphasized: ease-in-out;
+    --puck-ease-entrance: ease-out;
+    --puck-font-weight-regular: 400;
+    --puck-font-weight-medium: 500;
+    --puck-font-weight-semibold: 600;
+    --puck-font-weight-bold: 700;
+    --puck-font-weight-heavy: 800;
+    --puck-letter-spacing-ui: 0.05ch;
+    --puck-letter-spacing-heading: 0.08ch;
+    --puck-icon-size-s: 16px;
+    --puck-icon-size-m: 18px;
+    --puck-icon-size-l: 24px;
+    --puck-space-m-unitless: 24;
+    --puck-user-sidebar-left-width: var(--puck-sidebar-width);
+    --puck-user-sidebar-right-width: var(--puck-sidebar-width);
+    --puck-slot-min-empty-height: 128px;
+  }
 }
 
 /* styles/typography.css */
-:root {
-  --puck-font-size-scale-base-unitless: 12;
-  --puck-font-size-xxxs-unitless: 12;
-  --puck-font-size-xxs-unitless: 14;
-  --puck-font-size-xs-unitless: 16;
-  --puck-font-size-s-unitless: 18;
-  --puck-font-size-m-unitless: 21;
-  --puck-font-size-l-unitless: 24;
-  --puck-font-size-xl-unitless: 28;
-  --puck-font-size-xxl-unitless: 36;
-  --puck-font-size-xxxl-unitless: 48;
-  --puck-font-size-xxxxl-unitless: 56;
-  --puck-font-size-xxxs: calc(1rem * var(--puck-font-size-xxxs-unitless) / 16);
-  --puck-font-size-xxs: calc(1rem * var(--puck-font-size-xxs-unitless) / 16);
-  --puck-font-size-xs: calc(1rem * var(--puck-font-size-xs-unitless) / 16);
-  --puck-font-size-s: calc(1rem * var(--puck-font-size-s-unitless) / 16);
-  --puck-font-size-m: calc(1rem * var(--puck-font-size-m-unitless) / 16);
-  --puck-font-size-l: calc(1rem * var(--puck-font-size-l-unitless) / 16);
-  --puck-font-size-xl: calc(1rem * var(--puck-font-size-xl-unitless) / 16);
-  --puck-font-size-xxl: calc(1rem * var(--puck-font-size-xxl-unitless) / 16);
-  --puck-font-size-xxxl: calc(1rem * var(--puck-font-size-xxxl-unitless) / 16);
-  --puck-font-size-xxxxl: calc( 1rem * var(--puck-font-size-xxxxl-unitless) / 16 );
-  --puck-font-size-base: var(--puck-font-size-xs);
-  --line-height-reset: 1;
-  --line-height-xs: calc( var(--space-m-unitless) / var(--puck-font-size-m-unitless) );
-  --line-height-s: calc( var(--space-m-unitless) / var(--puck-font-size-s-unitless) );
-  --line-height-m: calc( var(--space-m-unitless) / var(--puck-font-size-xs-unitless) );
-  --line-height-l: calc( var(--space-m-unitless) / var(--puck-font-size-xxs-unitless) );
-  --line-height-xl: calc( var(--space-m-unitless) / var(--puck-font-size-scale-base-unitless) );
-  --line-height-base: var(--line-height-m);
-  --fallback-font-stack:
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Helvetica Neue,
-    sans-serif,
-    Apple Color Emoji,
-    Segoe UI Emoji,
-    Segoe UI Symbol;
-  --puck-font-family: Inter, var(--fallback-font-stack);
-  --puck-font-family-monospaced:
-    ui-monospace,
-    "Cascadia Code",
-    "Source Code Pro",
-    Menlo,
-    Consolas,
-    "DejaVu Sans Mono",
-    monospace;
-}
-@supports (font-variation-settings: normal) {
+@layer puck-tokens {
   :root {
-    --puck-font-family: InterVariable, var(--fallback-font-stack);
+    --puck-font-size-scale-base-unitless: 12;
+    --puck-font-size-xxxs-unitless: 12;
+    --puck-font-size-xxs-unitless: 14;
+    --puck-font-size-xs-unitless: 16;
+    --puck-font-size-s-unitless: 18;
+    --puck-font-size-m-unitless: 21;
+    --puck-font-size-l-unitless: 24;
+    --puck-font-size-xl-unitless: 28;
+    --puck-font-size-xxl-unitless: 36;
+    --puck-font-size-xxxl-unitless: 48;
+    --puck-font-size-xxxxl-unitless: 56;
+    --puck-font-size-xxxs: calc( 1rem * var(--puck-font-size-xxxs-unitless) / 16 );
+    --puck-font-size-xxs: calc(1rem * var(--puck-font-size-xxs-unitless) / 16);
+    --puck-font-size-xs: calc(1rem * var(--puck-font-size-xs-unitless) / 16);
+    --puck-font-size-s: calc(1rem * var(--puck-font-size-s-unitless) / 16);
+    --puck-font-size-m: calc(1rem * var(--puck-font-size-m-unitless) / 16);
+    --puck-font-size-l: calc(1rem * var(--puck-font-size-l-unitless) / 16);
+    --puck-font-size-xl: calc(1rem * var(--puck-font-size-xl-unitless) / 16);
+    --puck-font-size-xxl: calc(1rem * var(--puck-font-size-xxl-unitless) / 16);
+    --puck-font-size-xxxl: calc( 1rem * var(--puck-font-size-xxxl-unitless) / 16 );
+    --puck-font-size-xxxxl: calc( 1rem * var(--puck-font-size-xxxxl-unitless) / 16 );
+    --puck-font-size-base: var(--puck-font-size-xs);
+    --puck-line-height-reset: 1;
+    --puck-line-height-xs: calc( var(--puck-space-m-unitless) / var(--puck-font-size-m-unitless) );
+    --puck-line-height-s: calc( var(--puck-space-m-unitless) / var(--puck-font-size-s-unitless) );
+    --puck-line-height-m: calc( var(--puck-space-m-unitless) / var(--puck-font-size-xs-unitless) );
+    --puck-line-height-l: calc( var(--puck-space-m-unitless) / var(--puck-font-size-xxs-unitless) );
+    --puck-line-height-xl: calc( var(--puck-space-m-unitless) / var(--puck-font-size-scale-base-unitless) );
+    --puck-line-height-base: var(--puck-line-height-m);
+    --puck-fallback-font-stack:
+      -apple-system,
+      BlinkMacSystemFont,
+      Segoe UI,
+      Helvetica Neue,
+      sans-serif,
+      Apple Color Emoji,
+      Segoe UI Emoji,
+      Segoe UI Symbol;
+    --puck-font-family: Inter, var(--puck-fallback-font-stack);
+    --puck-font-family-monospaced:
+      ui-monospace,
+      "Cascadia Code",
+      "Source Code Pro",
+      Menlo,
+      Consolas,
+      "DejaVu Sans Mono",
+      monospace;
+  }
+  @supports (font-variation-settings: normal) {
+    :root {
+      --puck-font-family: InterVariable, var(--puck-fallback-font-stack);
+    }
   }
 }
 
 /* bundle/core.css */
+:root {
+  --_puck-styles-loaded: "true";
+}
 #frame-root {
   height: 1px;
   min-height: 100vh;
@@ -147,243 +227,276 @@
 /* bundle/index.css */
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
-._ActionBar_1nmyk_1 {
+._ActionBar_5vdfr_1 {
   align-items: center;
   cursor: default;
   display: flex;
   width: auto;
-  padding: 4px;
-  padding-inline-start: 0;
-  padding-inline-end: 0;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  border-radius: 8px;
-  background: var(--puck-color-grey-01);
-  color: var(--puck-color-white);
+  padding-top: var(--puck-actionbar-space-y, var(--puck-space-1));
+  padding-bottom: var(--puck-actionbar-space-y, var(--puck-space-1));
+  padding-inline-start: var(--puck-actionbar-space-x, 0);
+  padding-inline-end: var(--puck-actionbar-space-x, 0);
+  border-radius: var(--puck-actionbar-radius, var(--puck-radius-l));
+  background: var(--puck-actionbar-color-bg, var(--puck-color-surface-inverse));
+  color: var(--puck-color-text-inverse);
   font-family: var(--puck-font-family);
   min-height: 26px;
 }
-._ActionBar-label_1nmyk_18 {
-  color: var(--puck-color-grey-08);
-  font-size: var(--puck-font-size-xxxs);
-  font-weight: 500;
-  padding-inline-start: 8px;
-  padding-inline-end: 8px;
-  margin-inline-start: 4px;
-  margin-inline-end: 4px;
+._ActionBar-label_5vdfr_17 {
+  color: var(--puck-actionbar-color-text, var(--puck-color-text-inverse));
+  font-size: var(--puck-actionbar-font-size, var(--puck-font-size-xxxs));
+  opacity: var(--puck-actionbar-opacity-text, var(--puck-opacity-text-inverse));
+  font-weight: var(--puck-font-weight-medium);
+  padding-inline-start: var(--puck-space-2);
+  padding-inline-end: var(--puck-space-2);
+  margin-inline-start: var(--puck-space-1);
+  margin-inline-end: var(--puck-space-1);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._ActionBarAction_1nmyk_30 + ._ActionBar-label_1nmyk_18 {
+._ActionBarAction_5vdfr_30 + ._ActionBar-label_5vdfr_17 {
   padding-inline-start: 0;
 }
-._ActionBar-label_1nmyk_18 + ._ActionBarAction_1nmyk_30 {
-  margin-inline-start: -4px;
+._ActionBar-label_5vdfr_17 + ._ActionBarAction_5vdfr_30 {
+  margin-inline-start: calc(var(--puck-space-1) * -1);
 }
-._ActionBar-group_1nmyk_38 {
+._ActionBar-group_5vdfr_38 {
   align-items: center;
-  border-inline-start: 0.5px solid var(--puck-color-grey-05);
+  border-inline-start: var(--puck-border-width-hairline) solid var(--puck-actionbar-color-separator, var(--puck-color-border-inverse));
   display: flex;
   height: 100%;
-  padding-inline-start: 4px;
-  padding-inline-end: 4px;
+  padding-inline-start: var(--puck-space-1);
+  padding-inline-end: var(--puck-space-1);
 }
-._ActionBar-group_1nmyk_38:first-of-type {
+._ActionBar-group_5vdfr_38:first-of-type {
   border-inline-start: 0;
 }
-._ActionBar-group_1nmyk_38:empty {
+._ActionBar-group_5vdfr_38:empty {
   display: none;
 }
-._ActionBarAction_1nmyk_30 {
+._ActionBarAction_5vdfr_30 {
   background: transparent;
   border: none;
-  color: var(--puck-color-grey-08);
+  color: var(--puck-actionbar-color-text, var(--puck-color-text-inverse));
   cursor: pointer;
-  padding: 6px;
-  margin-inline-start: 4px;
-  margin-inline-end: 4px;
-  border-radius: 4px;
+  padding: var(--puck-actionbar-action-space, 6px);
+  margin-inline-start: var(--puck-space-1);
+  margin-inline-end: var(--puck-space-1);
+  border-radius: var(--puck-radius-m);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: color 50ms ease-in;
+  opacity: var(--puck-actionbar-opacity-text, var(--puck-opacity-text-inverse));
+  transition: color var(--puck-duration-fast) var(--puck-ease-exit), opacity var(--puck-duration-fast) var(--puck-ease-exit);
 }
-._ActionBarAction--disabled_1nmyk_71 {
+._ActionBarAction--disabled_5vdfr_74 {
   cursor: auto;
-  color: var(--puck-color-grey-06);
+  color: var( --puck-actionbar-color-action-disabled, var(--puck-color-text-inverse) );
+  opacity: var(--puck-actionbar-opacity-action-disabled, 0.54);
 }
-._ActionBarAction_1nmyk_30 svg {
+._ActionBarAction_5vdfr_30 svg {
   max-width: none !important;
 }
-._ActionBarAction_1nmyk_30:focus-visible {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: -2px;
+._ActionBarAction_5vdfr_30:focus-visible {
+  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
+  outline-offset: calc(var(--puck-border-width-focus) * -1);
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ActionBarAction_1nmyk_30:hover:not(._ActionBarAction--disabled_1nmyk_71) {
-    color: var(--puck-color-azure-06);
+  ._ActionBarAction_5vdfr_30:hover:not(._ActionBarAction--disabled_5vdfr_74) {
+    color: var( --puck-actionbar-color-action-hover, var(--puck-color-interactive-inverse-hover) );
+    opacity: 1;
     transition: none;
   }
 }
-._ActionBarAction_1nmyk_30:active:not(._ActionBarAction--disabled_1nmyk_71),
-._ActionBarAction--active_1nmyk_93 {
-  color: var(--puck-color-azure-07);
+._ActionBarAction_5vdfr_30:active:not(._ActionBarAction--disabled_5vdfr_74),
+._ActionBarAction--active_5vdfr_104 {
+  color: var( --puck-actionbar-color-action-active, var(--puck-color-interactive-inverse-active) );
+  opacity: 1;
   transition: none;
 }
-._ActionBar-group_1nmyk_38 * {
+._ActionBar-group_5vdfr_38 * {
   margin: 0;
 }
-._ActionBar-separator_1nmyk_102 {
-  background: var(--puck-color-grey-05);
-  margin-inline: 4px;
-  width: 0.5px;
+._ActionBar-separator_5vdfr_117 {
+  background: var( --puck-actionbar-color-separator, var(--puck-color-border-inverse) );
+  margin-inline: var(--puck-space-1);
+  width: var( --puck-border-width-hairline );
   height: 100%;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
-._InputWrapper_bsxfo_1 + ._InputWrapper_bsxfo_1 {
-  margin-top: 12px;
+._InputWrapper_qyenz_1 + ._InputWrapper_qyenz_1 {
+  margin-top: var(--puck-space-3);
 }
-._Input-label_bsxfo_5 {
+._Input-label_qyenz_5 {
   align-items: center;
-  color: var(--puck-color-grey-04);
+  color: var(--puck-field-label-color-text, var(--puck-color-text-secondary));
   display: flex;
-  padding-bottom: 12px;
-  font-size: var(--puck-font-size-xxs);
-  font-weight: 600;
+  padding-bottom: var(--puck-field-label-space-y, var(--puck-space-3));
+  font-size: var(--puck-field-label-font-size, var(--puck-font-size-xxs));
+  font-weight: var( --puck-field-label-font-weight, var(--puck-font-weight-semibold) );
 }
-._Input-labelIcon_bsxfo_14 {
-  color: var(--puck-color-grey-07);
+._Input-labelIcon_qyenz_17 {
+  color: var(--puck-field-label-color-icon, var(--puck-color-text-subtle));
   display: flex;
-  margin-inline-end: 4px;
-  padding-inline-start: 4px;
+  margin-inline-end: var(--puck-space-1);
+  padding-inline-start: var(--puck-space-1);
 }
-._Input-disabledIcon_bsxfo_21 {
-  color: var(--puck-color-grey-05);
+._Input-disabledIcon_qyenz_24 {
+  color: var(--puck-color-text-muted);
   margin-inline-start: auto;
 }
-._Input-input_bsxfo_26 {
-  background: var(--puck-color-white);
-  border-width: 1px;
+._Input-input_qyenz_29 {
+  background: var(--puck-field-color-bg, var(--puck-color-surface));
+  border-width: var( --puck-field-border-width, var(--puck-border-width-regular) );
   border-style: solid;
-  border-color: var(--puck-color-grey-09);
-  border-radius: 4px;
+  border-color: var(--puck-field-color-border, var(--puck-color-border));
+  border-radius: var(--puck-field-radius, var(--puck-radius-m));
   box-sizing: border-box;
+  color: var(--puck-field-color-text, var(--puck-color-text));
   font-family: inherit;
-  font-size: 16px;
-  padding: 12px 15px;
-  transition: border-color 50ms ease-in;
+  font-size: var(--puck-font-size-xs);
+  padding: var(--puck-field-space-y, var(--puck-space-3)) var( --puck-field-space-x, calc( var(--puck-space-4) - var(--puck-field-border-width, var(--puck-border-width-regular)) ) );
+  transition: border-color var(--puck-duration-fast) var(--puck-ease-exit);
   width: 100%;
   max-width: 100%;
 }
 @media (min-width: 458px) {
-  ._Input-input_bsxfo_26 {
-    font-size: 14px;
+  ._Input-input_qyenz_29 {
+    font-size: var(--puck-field-font-size, var(--puck-font-size-xxs));
   }
 }
-select._Input-input_bsxfo_26 {
+._Input-select_qyenz_61 {
+  position: relative;
+  width: 100%;
+}
+select._Input-input_qyenz_29 {
   appearance: none;
-  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
-  background-size: 12px;
-  background-position: calc(100% - 12px) calc(50% + 3px);
-  background-repeat: no-repeat;
-  background-color: var(--puck-color-white);
   cursor: pointer;
 }
-select._Input-input_bsxfo_26:dir(rtl) {
-  background-position: 12px calc(50% + 3px);
+._Input-selectIcon_qyenz_71 {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  fill: var(--puck-field-color-border, var(--puck-color-border));
+  stroke-width: 0;
+}
+._Input-selectIcon_qyenz_71:dir(rtl) {
+  right: auto;
+  left: 12px;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input_bsxfo_1:has(> input):hover ._Input-input_bsxfo_26:not([readonly]),
-  ._Input_bsxfo_1:has(> textarea):hover ._Input-input_bsxfo_26:not([readonly]) {
-    border-color: var(--puck-color-grey-05);
+  ._Input_qyenz_1:has(> input):hover ._Input-input_qyenz_29:not([readonly]),
+  ._Input_qyenz_1:has(> textarea):hover ._Input-input_qyenz_29:not([readonly]) {
+    border-color: var( --puck-field-color-border-hover, var(--puck-color-border-hover) );
     transition: none;
   }
-  ._Input_bsxfo_1:has(> select):hover ._Input-input_bsxfo_26:not([disabled]) {
-    background-color: var(--puck-color-azure-12);
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a5a5a'><polygon points='0,0 100,0 50,50'/></svg>");
-    border-color: var(--puck-color-grey-05);
+  ._Input_qyenz_1:has(> ._Input-select_qyenz_61):hover ._Input-input_qyenz_29:not([disabled]) {
+    color: var( --puck-field-color-text-hover, var(--puck-field-color-text, var(--puck-color-text)) );
+    background-color: var( --puck-field-color-bg-hover, var(--puck-color-interactive-soft-hover) );
+    border-color: var( --puck-field-color-border-hover, var(--puck-color-border-hover) );
     transition: none;
   }
+  ._Input_qyenz_1:not(._Input--readOnly_qyenz_111):has(> ._Input-select_qyenz_61):hover ._Input-selectIcon_qyenz_71 {
+    fill: var(--puck-field-color-border-hover, var(--puck-color-border-hover));
+  }
 }
-._Input-input_bsxfo_26:focus {
-  border-color: var(--puck-color-grey-05);
-  outline: 2px solid var(--puck-color-azure-05);
+._Input-input_qyenz_29:focus {
+  border-color: var( --puck-field-color-border-hover, var(--puck-color-border-hover) );
+  outline: var(--puck-border-width-focus) solid var(--puck-field-color-border-focus, var(--puck-color-focus-ring));
   transition: none;
 }
-._Input--readOnly_bsxfo_82 > ._Input-input_bsxfo_26,
-._Input--readOnly_bsxfo_82 > select._Input-input_bsxfo_26 {
-  background-color: var(--puck-color-grey-11);
-  border-color: var(--puck-color-grey-09);
-  color: var(--puck-color-grey-04);
+._Input--readOnly_qyenz_111 > ._Input-input_qyenz_29,
+._Input--readOnly_qyenz_111 > ._Input-select_qyenz_61 > select._Input-input_qyenz_29 {
+  background-color: var( --puck-field-color-bg-disabled, var(--puck-color-surface-muted) );
+  border-color: var( --puck-field-color-border-disabled, var(--puck-color-border) );
+  color: var( --puck-field-color-text-disabled, var(--puck-color-text-secondary) );
   cursor: default;
   opacity: 1;
   outline: 0;
   transition: none;
 }
-._Input-radioGroupItems_bsxfo_93 {
+._Input--readOnly_qyenz_111 > ._Input-select_qyenz_61 > select._Input-input_qyenz_29 ~ ._Input-selectIcon_qyenz_71 {
+  fill: var(--puck-field-color-text-disabled, var(--puck-color-text-secondary));
+}
+._Input-radioGroupItems_qyenz_150 {
+  --_puck-field-radio-radius: var(--puck-field-radius, var(--puck-radius-m));
+  --_puck-field-radio-border-width: var( --puck-field-border-width, var(--puck-border-width-regular) );
+  --_puck-field-radio-border-color: var( --puck-field-color-border, var(--puck-color-border) );
   display: flex;
-  border: 1px solid var(--puck-color-grey-09);
-  border-radius: 4px;
+  border: var(--_puck-field-radio-border-width) solid var(--_puck-field-radio-border-color);
+  border-radius: var(--_puck-field-radio-radius);
   flex-wrap: wrap;
 }
-._Input-radio_bsxfo_93 {
-  border-inline-end: 1px solid var(--puck-color-grey-09);
+._Input-radio_qyenz_150 {
+  border-inline-end: var(--_puck-field-radio-border-width) solid var(--_puck-field-radio-border-color);
   flex-grow: 1;
 }
-._Input-radio_bsxfo_93:first-of-type {
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
+._Input-radio_qyenz_150:first-of-type {
+  border-bottom-left-radius: var(--_puck-field-radio-radius);
+  border-top-left-radius: var(--_puck-field-radio-radius);
 }
-._Input-radio_bsxfo_93:first-of-type ._Input-radioInner_bsxfo_110 {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
+._Input-radio_qyenz_150:first-of-type ._Input-radioInner_qyenz_179 {
+  border-bottom-left-radius: calc(var(--_puck-field-radio-radius) - var(--_puck-field-radio-border-width));
+  border-top-left-radius: calc(var(--_puck-field-radio-radius) - var(--_puck-field-radio-border-width));
 }
-._Input-radio_bsxfo_93:last-of-type {
-  border-bottom-right-radius: 4px;
+._Input-radio_qyenz_150:last-of-type {
+  border-bottom-right-radius: var(--_puck-field-radio-radius);
   border-inline-end: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: var(--_puck-field-radio-radius);
 }
-._Input-radio_bsxfo_93:last-of-type ._Input-radioInner_bsxfo_110 {
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
+._Input-radio_qyenz_150:last-of-type ._Input-radioInner_qyenz_179 {
+  border-bottom-right-radius: calc(var(--_puck-field-radio-radius) - var(--_puck-field-radio-border-width));
+  border-top-right-radius: calc(var(--_puck-field-radio-radius) - var(--_puck-field-radio-border-width));
 }
-._Input-radioInner_bsxfo_110 {
-  background-color: var(--puck-color-white);
-  color: var(--puck-color-grey-04);
+._Input-radioInner_qyenz_179 {
+  background-color: var(--puck-field-color-bg, var(--puck-color-surface));
+  color: var(--puck-field-color-text, var(--puck-color-text));
   cursor: pointer;
-  font-size: var(--puck-font-size-xxxs);
-  padding: 8px 12px;
+  font-size: var(--puck-field-font-size, var(--puck-font-size-xxs));
+  padding: var(--puck-field-space-y, var(--puck-space-3)) var( --puck-field-space-x, calc(var(--puck-space-4) - var(--_puck-field-radio-border-width)) );
   text-align: center;
-  transition: background-color 50ms ease-in;
+  transition: background-color var(--puck-duration-fast) var(--puck-ease-exit), color var(--puck-duration-fast) var(--puck-ease-exit);
 }
-._Input-radio_bsxfo_93:has(:focus-visible) {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: 2px;
+._Input-radio_qyenz_150:has(:focus-visible) {
+  outline: var(--puck-border-width-focus) solid var(--puck-field-color-border-focus, var(--puck-color-focus-ring));
+  outline-offset: var(--puck-border-width-focus);
   position: relative;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input-radioInner_bsxfo_110:hover {
-    background-color: var(--puck-color-azure-12);
+  ._Input-radioInner_qyenz_179:hover {
+    background-color: var( --puck-field-color-bg-hover, var(--puck-color-interactive-soft-hover) );
+    color: var( --puck-field-color-text-hover, var(--puck-field-color-text, var(--puck-color-text)) );
     transition: none;
   }
 }
-._Input--readOnly_bsxfo_82 ._Input-radioInner_bsxfo_110 {
-  background-color: var(--puck-color-white);
-  color: var(--puck-color-grey-04);
+._Input--readOnly_qyenz_111 ._Input-radioGroupItems_qyenz_150 {
+  border-color: var( --puck-field-color-border-disabled, var(--puck-color-border) );
+}
+._Input--readOnly_qyenz_111 ._Input-radioInner_qyenz_179 {
+  background-color: var(--puck-field-color-bg, var(--puck-color-surface));
+  color: var(--puck-field-color-text, var(--puck-color-text-secondary));
   cursor: default;
 }
-._Input-radio_bsxfo_93 ._Input-radioInput_bsxfo_155:checked ~ ._Input-radioInner_bsxfo_110 {
-  background-color: var(--puck-color-azure-11);
-  color: var(--puck-color-azure-04);
-  font-weight: 500;
+._Input--readOnly_qyenz_111 ._Input-radio_qyenz_150 {
+  border-inline-end: var(--_puck-field-radio-border-width) solid var(--puck-field-color-border-disabled, var(--puck-color-border));
+}
+._Input--readOnly_qyenz_111 ._Input-radio_qyenz_150:last-of-type {
+  border-inline-end: 0;
 }
-._Input--readOnly_bsxfo_82 ._Input-radioInput_bsxfo_155:checked ~ ._Input-radioInner_bsxfo_110 {
-  background-color: var(--puck-color-grey-11);
-  color: var(--puck-color-grey-04);
+._Input-radio_qyenz_150 ._Input-radioInput_qyenz_261:checked ~ ._Input-radioInner_qyenz_179 {
+  background-color: var( --puck-field-color-bg-active, var(--puck-color-interactive-soft) );
+  color: var(--puck-field-color-text-active, var(--puck-color-interactive));
+  font-weight: var(--puck-font-weight-medium);
 }
-._Input-radio_bsxfo_93 ._Input-radioInput_bsxfo_155 {
+._Input--readOnly_qyenz_111 ._Input-radioInput_qyenz_261:checked ~ ._Input-radioInner_qyenz_179 {
+  background-color: var( --puck-field-color-bg-disabled, var(--puck-color-surface-muted) );
+  color: var( --puck-field-color-text-disabled, var(--puck-color-text-secondary) );
+}
+._Input-radio_qyenz_150 ._Input-radioInput_qyenz_261 {
   clip: rect(0 0 0 0);
   clip-path: inset(100%);
   height: 1px;
@@ -392,219 +505,214 @@ select._Input-input_bsxfo_26:dir(rtl) {
   white-space: nowrap;
   width: 1px;
 }
-textarea._Input-input_bsxfo_26 {
-  margin-bottom: -4px;
+textarea._Input-input_qyenz_29 {
+  margin-bottom: calc(var(--puck-space-1) * -1);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/fields/ArrayField/styles.module.css/#css-module-data */
-._ArrayField_1vaho_5 {
+._ArrayField_62huh_5 {
+  --_puck-field-array-border-color: var( --puck-field-color-border, var(--puck-color-border) );
+  --_puck-field-array-border-width: var( --puck-field-border-width, var(--puck-border-width-regular) );
+  --_puck-field-array-radius: var(--puck-field-radius, var(--puck-radius-m));
+  --_puck-field-array-radius-inner: calc( var(--_puck-field-array-radius) - var(--_puck-field-array-border-width) );
   display: flex;
   flex-direction: column;
-  background: var(--puck-color-azure-11);
-  border: 1px solid var(--puck-color-grey-09);
-  border-radius: 4px;
+  background: var( --puck-field-color-bg-active, var(--puck-color-interactive-soft) );
+  border: var(--_puck-field-array-border-width) solid var(--_puck-field-array-border-color);
+  border-radius: var(--_puck-field-array-radius);
 }
-._ArrayField--isDraggingFrom_1vaho_13 {
-  background-color: var(--puck-color-azure-11);
+._ArrayField--isDraggingFrom_62huh_30 {
+  background-color: var( --puck-field-color-bg-active, var(--puck-color-interactive-soft) );
   overflow: hidden;
 }
-._ArrayField-addButton_1vaho_18 {
-  background-color: var(--puck-color-white);
+._ArrayField-addButton_62huh_38 {
+  background-color: var(--puck-field-color-bg, var(--puck-color-surface));
   border: none;
-  border-radius: 3px;
+  border-radius: var(--_puck-field-array-radius-inner);
   display: flex;
-  color: var(--puck-color-azure-05);
+  color: var(--puck-field-array-add-color-icon, var(--puck-color-interactive));
   justify-content: center;
   cursor: pointer;
   width: 100%;
   margin: 0;
-  padding: 14px;
+  padding: calc(var(--puck-field-space-y, var(--puck-space-3)) + 2px) var( --puck-field-space-x, calc(var(--puck-space-4) - var(--_puck-field-array-border-width)) );
   text-align: left;
-  transition: background-color 50ms ease-in;
+  transition: background-color var(--puck-duration-fast) var(--puck-ease-exit);
 }
-._ArrayField--hasItems_1vaho_33 > ._ArrayField-addButton_1vaho_18 {
-  border-top: 1px solid var(--puck-color-grey-09);
+._ArrayField--hasItems_62huh_58 > ._ArrayField-addButton_62huh_38 {
+  border-top: var(--_puck-field-array-border-width) solid var(--_puck-field-array-border-color);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-._ArrayField-addButton_1vaho_18:focus-visible {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: 2px;
+._ArrayField-addButton_62huh_38:focus-visible {
+  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
+  outline-offset: var(--puck-border-width-focus);
   position: relative;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ArrayField_1vaho_5:not(._ArrayField--isDraggingFrom_1vaho_13) > ._ArrayField-addButton_1vaho_18:hover {
-    background: var(--puck-color-azure-12);
-    color: var(--puck-color-azure-04);
+  ._ArrayField_62huh_5:not(._ArrayField--isDraggingFrom_62huh_30) > ._ArrayField-addButton_62huh_38:hover {
+    background: var( --puck-field-color-bg-hover, var(--puck-color-interactive-soft-hover) );
+    color: var( --puck-field-color-text-hover, var(--puck-field-color-text, var(--puck-color-text)) );
     transition: none;
   }
 }
-._ArrayField_1vaho_5:not(._ArrayField--isDraggingFrom_1vaho_13) > ._ArrayField-addButton_1vaho_18:active {
-  background: var(--puck-color-azure-11);
-  color: var(--puck-color-azure-04);
+._ArrayField_62huh_5:not(._ArrayField--isDraggingFrom_62huh_30) > ._ArrayField-addButton_62huh_38:active {
+  background: var( --puck-field-color-bg-hover, var(--puck-color-interactive-soft-hover) );
   transition: none;
 }
-._ArrayField-inner_1vaho_59 {
+._ArrayField-inner_62huh_93 {
   margin-top: -1px;
 }
-._ArrayFieldItem_1vaho_67 {
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
+._ArrayFieldItem_62huh_101 {
   display: block;
   position: relative;
+  border-top-left-radius: var(--_puck-field-array-radius-inner);
+  border-top-right-radius: var(--_puck-field-array-radius-inner);
+  border-top: var(--_puck-field-array-border-width) solid var(--_puck-field-array-border-color);
 }
-._ArrayFieldItem_1vaho_67 {
-  border-top: 1px solid var(--puck-color-grey-09);
-}
-._ArrayFieldItem--isDragging_1vaho_78 {
+._ArrayFieldItem--isDragging_62huh_110 {
   border-top: transparent;
 }
-._ArrayFieldItem--isExpanded_1vaho_82::before {
+._ArrayFieldItem--isExpanded_62huh_114::before {
   display: none;
 }
-._ArrayFieldItem--isExpanded_1vaho_82 {
+._ArrayFieldItem--isExpanded_62huh_114 {
   border-bottom: 0;
   outline-offset: 0px !important;
-  outline: 1px solid var(--puck-color-azure-07) !important;
+  outline: var(--_puck-field-array-border-width) solid var(--puck-field-color-border-focus, var(--puck-color-focus-ring)) !important;
   z-index: 2;
 }
-._ArrayFieldItem--isDragging_1vaho_78 {
-  outline: 2px var(--puck-color-azure-09) solid !important;
+._ArrayFieldItem--isDragging_62huh_110 {
+  outline: var(--puck-border-width-focus) var(--puck-field-color-border-dragging, var(--puck-color-selection-border)) solid !important;
 }
-._ArrayFieldItem--isDragging_1vaho_78 ._ArrayFieldItem-summary_1vaho_97:active {
-  background-color: var(--puck-color-white);
+._ArrayFieldItem--isDragging_62huh_110 ._ArrayFieldItem-summary_62huh_132:active {
+  background-color: var(--puck-field-color-bg, var(--puck-color-surface));
 }
-._ArrayFieldItem_1vaho_67 + ._ArrayFieldItem_1vaho_67 {
+._ArrayFieldItem_62huh_101 + ._ArrayFieldItem_62huh_101 {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-._ArrayFieldItem-summary_1vaho_97 {
-  background: var(--puck-color-white);
-  color: var(--puck-color-grey-04);
+._ArrayFieldItem-summary_62huh_132 {
+  --_puck-drag-icon-color: var(--puck-field-color-text, var(--puck-color-text));
+  --_puck-drag-icon-color-hover: var( --puck-field-color-text-hover, var(--puck-field-color-text, var(--puck-color-text)) );
+  background: var(--puck-field-color-bg, var(--puck-color-surface));
+  color: var(--puck-field-color-text, var(--puck-color-text));
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 2px;
   justify-content: space-between;
-  font-size: var(--puck-font-size-xxs);
+  font-size: var(--puck-field-font-size, var(--puck-font-size-xxs));
   list-style: none;
-  padding: 12px 15px;
+  padding: var(--puck-field-space-y, var(--puck-space-3)) var( --puck-field-space-x, calc(var(--puck-space-4) - var(--_puck-field-array-border-width)) );
   position: relative;
   overflow: hidden;
-  transition: background-color 50ms ease-in;
+  transition: background-color var(--puck-duration-fast) var(--puck-ease-exit);
 }
-._ArrayFieldItem--noFields_1vaho_122 > ._ArrayFieldItem-summary_1vaho_97 {
+._ArrayFieldItem--noFields_62huh_167 > ._ArrayFieldItem-summary_62huh_132 {
   cursor: grab;
 }
-._ArrayFieldItem_1vaho_67:first-of-type > ._ArrayFieldItem-summary_1vaho_97 {
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
+._ArrayFieldItem_62huh_101:first-of-type > ._ArrayFieldItem-summary_62huh_132 {
+  border-top-left-radius: var(--_puck-field-array-radius-inner);
+  border-top-right-radius: var(--_puck-field-array-radius-inner);
 }
-._ArrayField--addDisabled_1vaho_131 > ._ArrayField-inner_1vaho_59 > ._ArrayFieldItem_1vaho_67:last-of-type:not(._ArrayFieldItem--isExpanded_1vaho_82) > ._ArrayFieldItem-summary_1vaho_97 {
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
+._ArrayField--addDisabled_62huh_176 > ._ArrayField-inner_62huh_93 > ._ArrayFieldItem_62huh_101:last-of-type:not(._ArrayFieldItem--isExpanded_62huh_114) > ._ArrayFieldItem-summary_62huh_132 {
+  border-bottom-left-radius: var(--_puck-field-array-radius-inner);
+  border-bottom-right-radius: var(--_puck-field-array-radius-inner);
 }
-._ArrayField--addDisabled_1vaho_131 > ._ArrayField-inner_1vaho_59 > ._ArrayFieldItem--isExpanded_1vaho_82:last-of-type {
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
+._ArrayField--addDisabled_62huh_176 > ._ArrayField-inner_62huh_93 > ._ArrayFieldItem--isExpanded_62huh_114:last-of-type {
+  border-bottom-left-radius: var(--_puck-field-array-radius-inner);
+  border-bottom-right-radius: var(--_puck-field-array-radius-inner);
 }
-._ArrayFieldItem-summary_1vaho_97:focus-visible {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: 2px;
+._ArrayFieldItem-summary_62huh_132:focus-visible {
+  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
+  outline-offset: var(--puck-border-width-focus);
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ArrayFieldItem-summary_1vaho_97:hover {
-    background-color: var(--puck-color-azure-12);
+  ._ArrayFieldItem-summary_62huh_132:hover {
+    background-color: var( --puck-field-color-bg-hover, var(--puck-color-interactive-soft-hover) );
+    color: var( --puck-field-color-text-hover, var(--puck-field-color-text, var(--puck-color-text)) );
     transition: none;
   }
 }
-._ArrayFieldItem-summary_1vaho_97:active {
-  background-color: var(--puck-color-azure-11);
+._ArrayFieldItem-summary_62huh_132:active {
+  background-color: var( --puck-field-color-bg-hover, var(--puck-color-interactive-soft-hover) );
   transition: none;
 }
-._ArrayFieldItem--isExpanded_1vaho_82 > ._ArrayFieldItem-summary_1vaho_97 {
-  background: var(--puck-color-azure-11);
-  color: var(--puck-color-azure-04);
-  font-weight: 600;
+._ArrayFieldItem--isExpanded_62huh_114 > ._ArrayFieldItem-summary_62huh_132 {
+  background: var( --puck-field-color-bg-active, var(--puck-color-interactive-soft) );
+  color: var(--puck-field-color-text-active, var(--puck-color-interactive));
+  font-weight: var(--puck-font-weight-semibold);
   transition: none;
 }
-._ArrayFieldItem-body_1vaho_170 {
-  background: var(--puck-color-white);
+._ArrayFieldItem-body_62huh_228 {
+  background: var(--puck-field-color-surface, var(--puck-color-surface));
   display: none;
 }
-._ArrayFieldItem--isExpanded_1vaho_82 > ._ArrayFieldItem-body_1vaho_170 {
+._ArrayFieldItem--isExpanded_62huh_114 > ._ArrayFieldItem-body_62huh_228 {
   display: block;
 }
-._ArrayFieldItem-fieldset_1vaho_179 {
+._ArrayFieldItem-fieldset_62huh_237 {
   border: none;
-  border-top: 1px solid var(--puck-color-grey-09);
+  border-top: var(--_puck-field-array-border-width) solid var(--_puck-field-array-border-color);
   margin: 0;
   min-width: 0;
-  padding: 16px 15px;
+  padding: var(--puck-field-space-surface-y, var(--puck-space-4)) var( --puck-field-space-surface-x, calc(var(--puck-space-4) - var(--_puck-field-array-border-width)) );
 }
-._ArrayFieldItem-rhs_1vaho_187 {
+._ArrayFieldItem-rhs_62huh_250 {
   display: flex;
-  gap: 4px;
+  gap: var(--puck-space-1);
   align-items: center;
 }
-._ArrayFieldItem-actions_1vaho_193 {
-  color: var(--puck-color-grey-04);
+._ArrayFieldItem-actions_62huh_256 {
+  color: var(--puck-color-text-secondary);
   display: flex;
-  gap: 4px;
+  gap: var(--puck-space-1);
   opacity: 0;
 }
-._ArrayFieldItem-summary_1vaho_97:focus-within > ._ArrayFieldItem-rhs_1vaho_187 > ._ArrayFieldItem-actions_1vaho_193,
-._ArrayFieldItem-summary_1vaho_97:hover > ._ArrayFieldItem-rhs_1vaho_187 > ._ArrayFieldItem-actions_1vaho_193 {
+._ArrayFieldItem-summary_62huh_132:focus-within > ._ArrayFieldItem-rhs_62huh_250 > ._ArrayFieldItem-actions_62huh_256,
+._ArrayFieldItem-summary_62huh_132:hover > ._ArrayFieldItem-rhs_62huh_250 > ._ArrayFieldItem-actions_62huh_256 {
   opacity: 1;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
-._IconButton_ffob9_1 {
+._IconButton_yuha3_1 {
   align-items: center;
-  background: transparent;
+  background: var(--puck-iconbutton-color-bg, transparent);
   border: none;
-  border-radius: 4px;
-  color: currentColor;
+  border-radius: var(--puck-iconbutton-radius, var(--puck-radius-m));
+  color: var(--puck-iconbutton-color-icon, currentColor);
   display: flex;
   font-family: var(--puck-font-family);
   justify-content: center;
-  padding: 4px;
-  transition: background-color 50ms ease-in, color 50ms ease-in;
+  padding: var(--puck-iconbutton-space, var(--puck-space-1));
+  transition: background-color var(--puck-duration-fast) var(--puck-ease-exit), color var(--puck-duration-fast) var(--puck-ease-exit);
 }
-._IconButton--active_ffob9_14 {
-  color: var(--puck-color-azure-04);
+._IconButton--active_yuha3_15 {
+  color: var( --puck-iconbutton-color-icon-active, var(--puck-color-interactive) );
 }
-._IconButton_ffob9_1:focus-visible {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: -2px;
+._IconButton_yuha3_1:focus-visible {
+  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
+  outline-offset: calc(var(--puck-border-width-focus) * -1);
 }
 @media (hover: hover) and (pointer: fine) {
-  ._IconButton_ffob9_1:hover:not(._IconButton--disabled_ffob9_24) {
-    background: var(--puck-color-grey-10);
-    color: var(--puck-color-azure-04);
+  ._IconButton_yuha3_1:hover:not(._IconButton--disabled_yuha3_28) {
+    background: var( --puck-iconbutton-color-bg-hover, var(--puck-color-interactive-neutral-hover) );
+    color: var( --puck-iconbutton-color-icon-hover, var(--puck-color-interactive) );
     cursor: pointer;
     transition: none;
   }
 }
-._IconButton_ffob9_1:active {
-  background: var(--puck-color-azure-11);
+._IconButton_yuha3_1:active {
+  background: var( --puck-iconbutton-color-bg-active, var(--puck-color-interactive-soft) );
   transition: none;
 }
-._IconButton-title_ffob9_37 {
-  clip: rect(0 0 0 0);
-  clip-path: inset(100%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-._IconButton--disabled_ffob9_24 {
-  color: var(--puck-color-grey-07);
+._IconButton--disabled_yuha3_28 {
+  color: var( --puck-iconbutton-color-icon-disabled, var(--puck-color-text-subtle) );
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css/#css-module-data */
-@keyframes _loader-animation_nacdm_1 {
+@keyframes _loader-animation_1w5zn_1 {
   0% {
     transform: rotate(0deg) scale(1);
   }
@@ -615,30 +723,29 @@ textarea._Input-input_bsxfo_26 {
     transform: rotate(360deg) scale(1);
   }
 }
-._Loader_nacdm_13 {
+._Loader_1w5zn_13 {
   background: transparent;
-  border-radius: 100%;
-  border: 2px solid currentColor;
+  border-radius: var(--puck-radius-round);
+  border: var(--puck-border-width-focus) solid currentColor;
   border-bottom-color: transparent;
   display: inline-block;
-  animation: _loader-animation_nacdm_1 1s 0s infinite linear;
+  animation: _loader-animation_1w5zn_1 1s 0s infinite linear;
   animation-fill-mode: both;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
-._DragIcon_17p8x_1 {
-  color: var(--puck-color-grey-05);
+._DragIcon_5e515_1 {
+  color: var(--_puck-drag-icon-color, var(--puck-color-text-muted));
   cursor: grab;
-  padding: 4px;
-  border-radius: 4px;
+  padding: var(--puck-space-1);
+  border-radius: var(--puck-radius-m);
 }
-._DragIcon--disabled_17p8x_8 {
+._DragIcon--disabled_5e515_10 {
   cursor: no-drop;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._DragIcon_17p8x_1:not(._DragIcon--disabled_17p8x_8):hover {
-    color: var(--puck-color-azure-05);
-    background-color: var(--puck-color-azure-12);
+  ._DragIcon_5e515_1:not(._DragIcon--disabled_5e515_10):hover {
+    color: var(--_puck-drag-icon-color-hover, var(--puck-color-focus-ring));
   }
 }
 
@@ -647,83 +754,89 @@ textarea._Input-input_bsxfo_26 {
   opacity: 0 !important;
 }
 [data-dnd-placeholder] {
-  background: var(--puck-color-azure-09) !important;
+  background: var( --_puck-field-array-color-placeholder, var(--puck-color-azure-06) ) !important;
   border: none !important;
-  color: #00000000 !important;
+  color: transparent !important;
   opacity: 0.3 !important;
   outline: none !important;
   transition: none !important;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
-._ExternalInput-actions_91ls0_1 {
+._ExternalInput-actions_143vl_1 {
   display: flex;
 }
-._ExternalInput-button_91ls0_5 {
+._ExternalInput-button_143vl_5 {
   display: flex;
-  gap: 8px;
+  gap: var(--puck-space-2);
   align-items: center;
   justify-content: center;
-  background-color: var(--puck-color-white);
-  border: 1px solid var(--puck-color-grey-09);
-  border-radius: 4px;
-  color: var(--puck-color-azure-04);
-  padding: 12px 16px;
-  font-weight: 500;
+  background-color: var(--puck-field-color-bg, var(--puck-color-surface));
+  border: var(--puck-field-border-width, var(--puck-border-width-regular)) solid var(--puck-field-color-border, var(--puck-color-border));
+  border-radius: var(--puck-field-radius, var(--puck-radius-m));
+  color: var(--puck-field-color-text-active, var(--puck-color-interactive));
+  padding: var(--puck-field-space-y, var(--puck-space-3)) var( --puck-field-space-x, calc( var(--puck-space-4) - var(--puck-field-border-width, var(--puck-border-width-regular)) ) );
+  font-size: var(--puck-field-font-size, var(--puck-font-size-xxs));
+  font-weight: var(--puck-font-weight-medium);
   white-space: nowrap;
   text-overflow: ellipsis;
-  transition: background-color 50ms ease-in;
+  transition: background-color var(--puck-duration-fast) var(--puck-ease-exit);
   position: relative;
   overflow: hidden;
   flex-grow: 1;
+  cursor: pointer;
 }
-._ExternalInput--dataSelected_91ls0_24 ._ExternalInput-button_91ls0_5 {
-  color: var(--puck-color-grey-03);
+._ExternalInput--dataSelected_143vl_34 ._ExternalInput-button_143vl_5 {
+  color: var(--puck-field-color-text, var(--puck-color-text));
   display: block;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
-._ExternalInput--readOnly_91ls0_31 ._ExternalInput-button_91ls0_5 {
-  background-color: var(--puck-color-grey-11);
+._ExternalInput--readOnly_143vl_41 ._ExternalInput-button_143vl_5 {
+  background-color: var( --puck-field-color-bg-disabled, var(--puck-color-surface-muted) );
 }
-._ExternalInput-detachButton_91ls0_35 {
-  border: 1px solid var(--puck-color-grey-09);
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-  background-color: var(--puck-color-grey-12);
-  color: var(--puck-color-grey-05);
+._ExternalInput-detachButton_143vl_48 {
+  border: var(--puck-field-border-width, var(--puck-border-width-regular)) solid var(--puck-field-color-border, var(--puck-color-border));
+  border-top-right-radius: var(--puck-field-radius, var(--puck-radius-m));
+  border-bottom-right-radius: var(--puck-field-radius, var(--puck-radius-m));
+  background-color: var( --puck-field-external-detach-color-bg, var(--puck-color-surface-subtle) );
+  color: var( --puck-field-external-detach-color-text, var(--puck-color-text-muted) );
   display: flex;
-  gap: 8px;
+  gap: var(--puck-space-2);
   align-items: center;
   justify-content: center;
-  padding: 8px 12px;
+  padding: var(--puck-space-2) var(--puck-space-3);
   position: relative;
-  transition: background-color 50ms ease-in, color 50ms ease-in;
+  transition: background-color var(--puck-duration-fast) var(--puck-ease-exit), color var(--puck-duration-fast) var(--puck-ease-exit);
   margin-inline-start: -1px;
+  cursor: pointer;
 }
-._ExternalInput-button_91ls0_5:focus-visible,
-._ExternalInput-detachButton_91ls0_35:focus-visible {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: 2px;
+._ExternalInput-button_143vl_5:focus-visible,
+._ExternalInput-detachButton_143vl_48:focus-visible {
+  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
+  outline-offset: var(--puck-border-width-focus);
   z-index: 1;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-button_91ls0_5:hover,
-  ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:hover {
-    background: var(--puck-color-azure-12);
+  ._ExternalInput_143vl_1:not(._ExternalInput--readOnly_143vl_41) ._ExternalInput-button_143vl_5:hover,
+  ._ExternalInput_143vl_1:not(._ExternalInput--readOnly_143vl_41) ._ExternalInput-detachButton_143vl_48:hover {
+    background: var( --puck-field-color-bg-hover, var(--puck-color-interactive-soft-hover) );
     transition: none;
   }
-  ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:hover {
-    color: var(--puck-color-azure-04);
+  ._ExternalInput_143vl_1:not(._ExternalInput--readOnly_143vl_41) ._ExternalInput-detachButton_143vl_48:hover {
+    color: var( --puck-field-color-text-hover, var(--puck-field-external-detach-color-text, var(--puck-color-text-muted)) );
+  }
+  ._ExternalInput--dataSelected_143vl_34:not(._ExternalInput--readOnly_143vl_41) ._ExternalInput-button_143vl_5:hover {
+    color: var( --puck-field-color-text-hover, var(--puck-field-color-text, var(--puck-color-text)) );
   }
 }
-._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-button_91ls0_5:active,
-._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:active {
-  background: var(--puck-color-azure-11);
+._ExternalInput_143vl_1:not(._ExternalInput--readOnly_143vl_41) ._ExternalInput-button_143vl_5:active,
+._ExternalInput_143vl_1:not(._ExternalInput--readOnly_143vl_41) ._ExternalInput-detachButton_143vl_48:active {
+  background: var( --puck-field-color-bg-hover, var(--puck-color-interactive-soft-hover) );
   transition: none;
 }
-._ExternalInputModal_91ls0_79 {
-  color: var(--puck-color-black);
+._ExternalInputModal_143vl_118 {
+  color: var(--puck-color-text);
   display: grid;
   grid-template-rows: min-content minmax(128px, 100%) min-content;
   grid-template-columns: 100%;
@@ -731,103 +844,103 @@ textarea._Input-input_bsxfo_26 {
   min-height: 50dvh;
   max-height: 90dvh;
 }
-._ExternalInputModal-grid_91ls0_89 {
+._ExternalInputModal-grid_143vl_128 {
   display: flex;
   flex-direction: column;
 }
 @media (min-width: 458px) {
-  ._ExternalInputModal-grid_91ls0_89 {
+  ._ExternalInputModal-grid_143vl_128 {
     display: grid;
     grid-template-columns: 100%;
   }
-  ._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-grid_91ls0_89 {
+  ._ExternalInputModal--filtersToggled_143vl_139 ._ExternalInputModal-grid_143vl_128 {
     grid-template-columns: 25% 75%;
   }
 }
-._ExternalInputModal-filters_91ls0_105 {
-  border-bottom: 1px solid var(--puck-color-grey-09);
+._ExternalInputModal-filters_143vl_144 {
+  border-bottom: var(--puck-border-width-regular) solid var(--puck-color-border);
 }
-._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-filters_91ls0_105 {
+._ExternalInputModal--filtersToggled_143vl_139 ._ExternalInputModal-filters_143vl_144 {
   display: none;
 }
 @media (min-width: 458px) {
-  ._ExternalInputModal-filters_91ls0_105 {
-    border-inline-end: 1px solid var(--puck-color-grey-09);
+  ._ExternalInputModal-filters_143vl_144 {
+    border-inline-end: var(--puck-border-width-regular) solid var(--puck-color-border);
     display: none;
   }
-  ._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-filters_91ls0_105 {
+  ._ExternalInputModal--filtersToggled_143vl_139 ._ExternalInputModal-filters_143vl_144 {
     display: block;
   }
 }
-._ExternalInputModal-masthead_91ls0_124 {
-  background-color: var(--puck-color-grey-12);
-  border-bottom: 1px solid var(--puck-color-grey-09);
+._ExternalInputModal-masthead_143vl_164 {
+  background-color: var(--puck-color-surface-subtle);
+  border-bottom: var(--puck-border-width-regular) solid var(--puck-color-border);
   display: flex;
   flex-wrap: wrap;
-  gap: 24px;
-  padding: 24px;
+  gap: var(--puck-space-5);
+  padding: var(--puck-space-5);
 }
-._ExternalInputModal-tableWrapper_91ls0_133 {
+._ExternalInputModal-tableWrapper_143vl_173 {
   position: relative;
   overflow-x: auto;
   overflow-y: auto;
   flex-grow: 1;
 }
-._ExternalInputModal-table_91ls0_133 {
+._ExternalInputModal-table_143vl_173 {
   border-collapse: unset;
   border-spacing: 0px;
-  color: var(--puck-color-grey-02);
+  color: var(--puck-color-text);
   position: relative;
   z-index: 0;
   min-width: 100%;
 }
-._ExternalInputModal-thead_91ls0_149 {
-  background-color: var(--puck-color-white);
+._ExternalInputModal-thead_143vl_189 {
+  background-color: var(--puck-color-surface);
   position: sticky;
   top: 0;
   z-index: 1;
 }
-._ExternalInputModal-th_91ls0_149 {
-  border-bottom: 1px solid var(--puck-color-grey-09);
-  color: var(--puck-color-grey-04);
-  font-weight: 500;
-  font-size: 14px;
-  padding: 16px 24px;
+._ExternalInputModal-th_143vl_189 {
+  border-bottom: var(--puck-border-width-regular) solid var(--puck-color-border);
+  color: var(--puck-color-text-secondary);
+  font-weight: var(--puck-font-weight-medium);
+  font-size: var(--puck-font-size-xxs);
+  padding: var(--puck-space-4) var(--puck-space-5);
 }
-._ExternalInputModal-td_91ls0_164 {
-  border-bottom: 1px solid var(--puck-color-grey-10);
-  padding: 16px 24px;
+._ExternalInputModal-td_143vl_204 {
+  border-bottom: var(--puck-border-width-regular) solid var(--puck-color-border-muted);
+  padding: var(--puck-space-4) var(--puck-space-5);
 }
-._ExternalInputModal-tr_91ls0_169 ._ExternalInputModal-td_91ls0_164:first-of-type {
-  font-weight: 500;
+._ExternalInputModal-tr_143vl_210 ._ExternalInputModal-td_143vl_204:first-of-type {
+  font-weight: var(--puck-font-weight-medium);
   width: 1%;
   white-space: nowrap;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:hover {
-    background: var(--puck-color-azure-12);
-    color: var(--puck-color-azure-04);
+  ._ExternalInputModal-tbody_143vl_217 ._ExternalInputModal-tr_143vl_210:hover {
+    background: var(--puck-color-interactive-soft-hover);
+    color: var(--puck-color-interactive);
     cursor: pointer;
     position: relative;
     margin-inline-start: -5px;
   }
-  ._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:hover ._ExternalInputModal-td_91ls0_164:first-of-type {
-    border-inline-start: 4px solid var(--puck-color-azure-04);
+  ._ExternalInputModal-tbody_143vl_217 ._ExternalInputModal-tr_143vl_210:hover ._ExternalInputModal-td_143vl_204:first-of-type {
+    border-inline-start: var(--puck-border-width-strong) solid var(--puck-color-interactive);
     padding-inline-start: 20px;
   }
 }
-._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:last-of-type ._ExternalInputModal-td_91ls0_164 {
+._ExternalInputModal-tbody_143vl_217 ._ExternalInputModal-tr_143vl_210:last-of-type ._ExternalInputModal-td_143vl_204 {
   border-bottom: none;
 }
-._ExternalInputModal-tableWrapper_91ls0_133 {
+._ExternalInputModal-tableWrapper_143vl_173 {
   display: none;
 }
-._ExternalInputModal--hasData_91ls0_202 ._ExternalInputModal-tableWrapper_91ls0_133 {
+._ExternalInputModal--hasData_143vl_244 ._ExternalInputModal-tableWrapper_143vl_173 {
   display: block;
 }
-._ExternalInputModal-loadingBanner_91ls0_206 {
+._ExternalInputModal-loadingBanner_143vl_248 {
   display: none;
-  background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
+  background-color: color-mix(in srgb, var(--puck-color-surface) 90%, transparent);
   padding: 64px;
   align-items: center;
   justify-content: center;
@@ -837,64 +950,64 @@ textarea._Input-input_bsxfo_26 {
   right: 0;
   bottom: 0;
 }
-._ExternalInputModal--isLoading_91ls0_223 ._ExternalInputModal-loadingBanner_91ls0_206 {
+._ExternalInputModal--isLoading_143vl_265 ._ExternalInputModal-loadingBanner_143vl_248 {
   display: flex;
 }
-._ExternalInputModal-searchForm_91ls0_227 {
+._ExternalInputModal-searchForm_143vl_269 {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: var(--puck-space-3);
   flex-grow: 1;
 }
 @media (min-width: 458px) {
-  ._ExternalInputModal-searchForm_91ls0_227 {
+  ._ExternalInputModal-searchForm_143vl_269 {
     flex-wrap: nowrap;
   }
 }
-._ExternalInputModal-search_91ls0_227 {
+._ExternalInputModal-search_143vl_269 {
   display: flex;
-  background: var(--puck-color-white);
-  border-width: 1px;
+  background: var(--puck-color-surface);
+  border-width: var(--puck-border-width-regular);
   border-style: solid;
-  border-color: var(--puck-color-grey-09);
-  border-radius: 4px;
+  border-color: var(--puck-color-border);
+  border-radius: var(--puck-radius-m);
   flex-grow: 1;
-  transition: border-color 50ms ease-in;
+  transition: border-color var(--puck-duration-fast) var(--puck-ease-exit);
 }
-._ExternalInputModal-search_91ls0_227:focus-within {
-  border-color: var(--puck-color-grey-05);
-  outline: 2px solid var(--puck-color-azure-05);
+._ExternalInputModal-search_143vl_269:focus-within {
+  border-color: var(--puck-color-border-hover);
+  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
   transition: none;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ExternalInputModal-search_91ls0_227:hover {
-    border-color: var(--puck-color-grey-05);
+  ._ExternalInputModal-search_143vl_269:hover {
+    border-color: var(--puck-color-border-hover);
     transition: none;
   }
 }
-._ExternalInputModal-searchIcon_91ls0_264 {
+._ExternalInputModal-searchIcon_143vl_306 {
   align-items: center;
-  background: var(--puck-color-grey-12);
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
-  border-inline-end: 1px solid var(--puck-color-grey-09);
-  color: var(--puck-color-grey-07);
+  background: var(--puck-color-surface-subtle);
+  border-bottom-left-radius: var(--puck-radius-m);
+  border-top-left-radius: var(--puck-radius-m);
+  border-inline-end: var(--puck-border-width-regular) solid var(--puck-color-border);
+  color: var(--puck-color-text-subtle);
   display: flex;
   justify-content: center;
-  padding: 12px 15px;
-  transition: color 50ms ease-in;
+  padding: var(--puck-space-3) calc(var(--puck-space-4) - var(--puck-border-width-regular));
+  transition: color var(--puck-duration-fast) var(--puck-ease-exit);
 }
-._ExternalInputModal-search_91ls0_227:focus-within ._ExternalInputModal-searchIcon_91ls0_264 {
-  color: var(--puck-color-grey-04);
+._ExternalInputModal-search_143vl_269:focus-within ._ExternalInputModal-searchIcon_143vl_306 {
+  color: var(--puck-color-text-secondary);
   transition: none;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ExternalInputModal-search_91ls0_227:hover ._ExternalInputModal-searchIcon_91ls0_264 {
-    color: var(--puck-color-grey-04);
+  ._ExternalInputModal-search_143vl_269:hover ._ExternalInputModal-searchIcon_143vl_306 {
+    color: var(--puck-color-text-secondary);
     transition: none;
   }
 }
-._ExternalInputModal-searchIconText_91ls0_289 {
+._ExternalInputModal-searchIconText_143vl_333 {
   clip: rect(0 0 0 0);
   clip-path: inset(100%);
   height: 1px;
@@ -903,53 +1016,53 @@ textarea._Input-input_bsxfo_26 {
   white-space: nowrap;
   width: 1px;
 }
-._ExternalInputModal-searchInput_91ls0_299 {
+._ExternalInputModal-searchInput_143vl_343 {
   border: none;
-  border-radius: 4px;
-  background: var(--puck-color-white);
+  border-radius: var(--puck-radius-m);
+  background: var(--puck-color-surface);
   font-family: inherit;
-  font-size: 14px;
-  padding: 12px 15px;
+  font-size: var(--puck-font-size-xxs);
+  padding: var(--puck-space-3) calc(var(--puck-space-4) - var(--puck-border-width-regular));
   width: 100%;
 }
-._ExternalInputModal-searchInput_91ls0_299:focus {
+._ExternalInputModal-searchInput_143vl_343:focus {
   outline: 0;
 }
-._ExternalInputModal-searchActions_91ls0_313 {
+._ExternalInputModal-searchActions_143vl_358 {
   display: flex;
-  gap: 8px;
+  gap: var(--puck-space-2);
   height: 44px;
   width: 100%;
 }
 @media (min-width: 458px) {
-  ._ExternalInputModal-searchActions_91ls0_313 {
+  ._ExternalInputModal-searchActions_143vl_358 {
     width: auto;
   }
 }
-._ExternalInputModal-searchActionIcon_91ls0_326 {
+._ExternalInputModal-searchActionIcon_143vl_371 {
   align-self: center;
 }
-._ExternalInputModal-footerContainer_91ls0_330 {
-  background-color: var(--puck-color-grey-12);
-  border-top: 1px solid var(--puck-color-grey-09);
-  color: var(--puck-color-grey-04);
-  padding: 16px;
+._ExternalInputModal-footerContainer_143vl_375 {
+  background-color: var(--puck-color-surface-subtle);
+  border-top: var(--puck-border-width-regular) solid var(--puck-color-border);
+  color: var(--puck-color-text-secondary);
+  padding: var(--puck-space-4);
 }
-._ExternalInputModal-footer_91ls0_330 {
-  font-weight: 500;
-  font-size: 14px;
+._ExternalInputModal-footer_143vl_375 {
+  font-weight: var(--puck-font-weight-medium);
+  font-size: var(--puck-font-size-xxs);
   text-align: right;
 }
-._ExternalInputModal-field_91ls0_343 {
-  color: var(--puck-color-grey-04);
-  margin: 16px;
-  margin-bottom: 12px;
+._ExternalInputModal-field_143vl_388 {
+  color: var(--puck-color-text-secondary);
+  margin: var(--puck-space-4);
+  margin-bottom: var(--puck-space-3);
   display: block;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */
-._Modal_ikbaj_1 {
-  background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
+._Modal_g5xob_1 {
+  background: var(--puck-color-overlay-backdrop);
   display: none;
   justify-content: center;
   align-items: center;
@@ -961,162 +1074,179 @@ textarea._Input-input_bsxfo_26 {
   z-index: 1;
   padding: 32px;
 }
-._Modal--isOpen_ikbaj_15 {
+._Modal--isOpen_g5xob_15 {
   display: flex;
 }
-._Modal-inner_ikbaj_19 {
+._Modal-inner_g5xob_19 {
   width: 100%;
   max-width: 1024px;
-  border-radius: 8px;
+  border-radius: var(--puck-radius-l);
   overflow: hidden;
-  background: var(--puck-color-white);
+  background: var(--puck-color-surface);
   display: flex;
   flex-direction: column;
   max-height: 90dvh;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
-._Heading_qxrry_1 {
+._Heading_97eh4_1 {
   display: block;
-  color: var(--puck-color-black);
-  font-weight: 700;
+  color: var(--_puck-heading-color, var(--puck-color-text));
+  font-weight: var(--puck-font-weight-bold);
   margin: 0;
 }
-._Heading_qxrry_1 b {
-  font-weight: 700;
+._Heading_97eh4_1 b {
+  font-weight: var(--puck-font-weight-bold);
 }
-._Heading--xxxxl_qxrry_12 {
+._Heading--xxxxl_97eh4_12 {
   font-size: var(--puck-font-size-xxxxl);
-  letter-spacing: 0.08ch;
-  font-weight: 800;
+  letter-spacing: var(--puck-letter-spacing-heading);
+  font-weight: var(--puck-font-weight-heavy);
 }
-._Heading--xxxl_qxrry_18 {
+._Heading--xxxl_97eh4_18 {
   font-size: var(--puck-font-size-xxxl);
 }
-._Heading--xxl_qxrry_22 {
+._Heading--xxl_97eh4_22 {
   font-size: var(--puck-font-size-xxl);
 }
-._Heading--xl_qxrry_26 {
+._Heading--xl_97eh4_26 {
   font-size: var(--puck-font-size-xl);
 }
-._Heading--l_qxrry_30 {
+._Heading--l_97eh4_30 {
   font-size: var(--puck-font-size-l);
 }
-._Heading--m_qxrry_34 {
+._Heading--m_97eh4_34 {
   font-size: var(--puck-font-size-m);
 }
-._Heading--s_qxrry_38 {
+._Heading--s_97eh4_38 {
   font-size: var(--puck-font-size-s);
 }
-._Heading--xs_qxrry_42 {
+._Heading--xs_97eh4_42 {
   font-size: var(--puck-font-size-xs);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
-._Button_10byl_1 {
+._Button_oe4qj_1 {
+  --_puck-button-default-space-x: 20px;
+  --_puck-button-default-font-size: var(--puck-font-size-xxs);
+  --_puck-button-default-font-weight: var(--puck-font-weight-regular);
+  --_puck-button-default-color-bg-disabled: var(--puck-color-bg-disabled);
+  --_puck-button-default-color-text-disabled: var(--puck-color-text-disabled);
   appearance: none;
   background: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: var(--puck-color-white);
+  border: var(--puck-border-width-regular) solid transparent;
+  border-radius: var(--puck-button-radius, var(--puck-radius-m));
+  color: var(--puck-color-text-inverse);
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  letter-spacing: 0.05ch;
+  gap: var(--puck-space-2);
+  letter-spacing: var(--puck-letter-spacing-ui);
   font-family: var(--puck-font-family);
-  font-size: 14px;
-  font-weight: 400;
   box-sizing: border-box;
   line-height: 1;
   text-align: center;
   text-decoration: none;
-  transition: background-color 50ms ease-in;
+  transition: background-color var(--puck-duration-fast) var(--puck-ease-exit), color var(--puck-duration-fast) var(--puck-ease-exit);
   cursor: pointer;
   white-space: nowrap;
   margin: 0;
 }
-._Button_10byl_1:hover,
-._Button_10byl_1:active {
+._Button_oe4qj_1:hover,
+._Button_oe4qj_1:active {
   transition: none;
 }
-._Button--medium_10byl_29 {
+._Button--medium_oe4qj_34 {
   min-height: 34px;
-  padding-bottom: 7px;
-  padding-inline-start: 19px;
-  padding-inline-end: 19px;
-  padding-top: 7px;
-}
-._Button--large_10byl_37 {
-  padding-bottom: 11px;
-  padding-inline-start: 19px;
-  padding-inline-end: 19px;
-  padding-top: 11px;
-}
-._Button-icon_10byl_44 {
+  padding-bottom: var( --puck-button-medium-space-y, calc(var(--puck-space-2) - var(--puck-border-width-regular)) );
+  padding-inline-start: var( --puck-button-medium-space-x, calc(var(--_puck-button-default-space-x) - var(--puck-border-width-regular)) );
+  padding-inline-end: var( --puck-button-medium-space-x, calc(var(--_puck-button-default-space-x) - var(--puck-border-width-regular)) );
+  padding-top: var( --puck-button-medium-space-y, calc(var(--puck-space-2) - var(--puck-border-width-regular)) );
+  font-weight: var( --puck-button-medium-font-weight, var(--_puck-button-default-font-weight) );
+  font-size: var( --puck-button-medium-font-size, var(--_puck-button-default-font-size) );
+}
+._Button--large_oe4qj_62 {
+  padding-bottom: var( --puck-button-large-space-y, calc(var(--puck-space-3) - var(--puck-border-width-regular)) );
+  padding-inline-start: var( --puck-button-large-space-x, calc(var(--_puck-button-default-space-x) - var(--puck-border-width-regular)) );
+  padding-inline-end: var( --puck-button-large-space-x, calc(var(--_puck-button-default-space-x) - var(--puck-border-width-regular)) );
+  padding-top: var( --puck-button-large-space-y, calc(var(--puck-space-3) - var(--puck-border-width-regular)) );
+  font-weight: var( --puck-button-large-font-weight, var(--_puck-button-default-font-weight) );
+  font-size: var( --puck-button-large-font-size, var(--_puck-button-default-font-size) );
+}
+._Button-icon_oe4qj_89 {
   margin-top: 2px;
 }
-._Button--primary_10byl_48 {
-  background: var(--puck-color-azure-04);
+._Button--primary_oe4qj_93 {
+  background: var( --puck-button-primary-color-bg, var(--puck-color-interactive) );
+  border-color: var(--puck-button-primary-color-border, transparent);
+  color: var(--puck-button-primary-color-text, var(--puck-color-text-inverse));
 }
-._Button_10byl_1:focus-visible {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: 2px;
+._Button_oe4qj_1:focus-visible {
+  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
+  outline-offset: var(--puck-border-width-focus);
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Button--primary_10byl_48:hover {
-    background-color: var(--puck-color-azure-03);
+  ._Button--primary_oe4qj_93:hover {
+    background-color: var( --puck-button-primary-color-bg-hover, var(--puck-color-interactive-hover) );
   }
 }
-._Button--primary_10byl_48:active {
-  background-color: var(--puck-color-azure-02);
+._Button--primary_oe4qj_93:active {
+  background-color: var( --puck-button-primary-color-bg-active, var(--puck-color-interactive-active) );
 }
-._Button--secondary_10byl_67 {
-  border: 1px solid currentColor;
-  color: currentColor;
+._Button--primary_oe4qj_93._Button--disabled_oe4qj_123,
+._Button--primary_oe4qj_93._Button--disabled_oe4qj_123:hover {
+  background-color: var( --puck-button-primary-color-bg-disabled, var(--_puck-button-default-color-bg-disabled) );
+  color: var( --puck-button-primary-color-text-disabled, var(--_puck-button-default-color-text-disabled) );
+}
+._Button--secondary_oe4qj_135 {
+  background: var(--puck-button-secondary-color-bg, transparent);
+  border-color: var(--puck-button-secondary-color-border, currentColor);
+  color: var(--puck-button-secondary-color-text, currentColor);
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Button--secondary_10byl_67:hover {
-    background-color: var(--puck-color-azure-12);
-    color: var(--puck-color-black);
+  ._Button--secondary_oe4qj_135:hover {
+    background-color: var( --puck-button-secondary-color-bg-hover, var(--puck-color-interactive-soft) );
+    color: var(--puck-button-secondary-color-text, var(--puck-color-text));
   }
 }
-._Button--secondary_10byl_67:active {
-  background-color: var(--puck-color-azure-11);
-  color: var(--puck-color-black);
+._Button--secondary_oe4qj_135:active {
+  background-color: var( --puck-button-secondary-color-bg-active, var(--puck-color-interactive-soft) );
+  color: var(--puck-button-secondary-color-text, var(--puck-color-text));
 }
-._Button--flush_10byl_84 {
-  border-radius: 0;
+._Button--secondary_oe4qj_135._Button--disabled_oe4qj_123,
+._Button--secondary_oe4qj_135._Button--disabled_oe4qj_123:hover {
+  background-color: var( --puck-button-secondary-color-bg-disabled, var(--_puck-button-default-color-bg-disabled) );
+  color: var( --puck-button-secondary-color-text-disabled, var(--_puck-button-default-color-text-disabled) );
 }
-._Button--disabled_10byl_88,
-._Button--disabled_10byl_88:hover {
-  background-color: var(--puck-color-grey-07);
-  color: var(--puck-color-grey-03);
+._Button--flush_oe4qj_171 {
+  border-radius: var(--puck-radius-none);
+}
+._Button--disabled_oe4qj_123:hover {
   cursor: not-allowed;
 }
-._Button--fullWidth_10byl_95 {
+._Button--fullWidth_oe4qj_179 {
   justify-content: center;
   width: 100%;
 }
-._Button-spinner_10byl_100 {
-  padding-inline-start: 8px;
+._Button-spinner_oe4qj_184 {
+  padding-inline-start: var(--puck-space-2);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextMenu/styles.module.css/#css-module-data */
-._RichTextMenu_k97eh_1 {
+._RichTextMenu_1ve2j_1 {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
 }
-._RichTextMenu--form_k97eh_7 {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  padding: 6px 6px;
-  background-color: var(--puck-color-grey-12);
+._RichTextMenu--form_1ve2j_7 {
+  border-top-left-radius: var(--puck-field-radius, var(--puck-radius-m));
+  border-top-right-radius: var(--puck-field-radius, var(--puck-radius-m));
+  padding: var(--puck-field-richtext-menu-space-y, 6px) var(--puck-field-richtext-menu-space-x, 6px);
+  background-color: var( --puck-field-richtext-menu-color-bg, var(--puck-color-surface-subtle) );
   position: relative;
   scrollbar-width: none;
   overflow-x: auto;
 }
-._RichTextMenu-group_k97eh_17 {
+._RichTextMenu-group_1ve2j_21 {
   display: flex;
   align-items: space-between;
   flex-direction: row;
@@ -1125,251 +1255,237 @@ textarea._Input-input_bsxfo_26 {
   gap: 2px;
   position: relative;
 }
-._RichTextMenu-group_k97eh_17:first-of-type {
+._RichTextMenu-group_1ve2j_21:first-of-type {
   padding-left: 0;
 }
-._RichTextMenu-group_k97eh_17:last-of-type {
+._RichTextMenu-group_1ve2j_21:last-of-type {
   padding-right: 0;
 }
-._RichTextMenu--inline_k97eh_35 ._RichTextMenu-group_k97eh_17 {
-  color: var(--puck-color-grey-08);
+._RichTextMenu--inline_1ve2j_39 ._RichTextMenu-group_1ve2j_21 {
+  color: var(--puck-color-text-inverse);
   gap: 0px;
   flex-wrap: nowrap;
 }
-._RichTextMenu-group_k97eh_17 + ._RichTextMenu-group_k97eh_17 {
-  border-left: 1px solid var(--puck-color-grey-10);
+._RichTextMenu-group_1ve2j_21 + ._RichTextMenu-group_1ve2j_21 {
+  border-left: var(--puck-border-width-regular) solid var( --puck-field-richtext-menu-color-separator, var(--puck-color-border-muted) );
 }
-._RichTextMenu--inline_k97eh_35 ._RichTextMenu-group_k97eh_17 + ._RichTextMenu-group_k97eh_17 {
-  border-left: 0.5px solid var(--puck-color-grey-05);
+._RichTextMenu--inline_1ve2j_39 ._RichTextMenu-group_1ve2j_21 + ._RichTextMenu-group_1ve2j_21 {
+  border-left: var(--puck-border-width-hairline) solid var(--puck-color-border-inverse);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextMenu/components/Control/styles.module.css/#css-module-data */
-._Control_1aveu_1 .lucide {
-  height: 18px;
-  width: 18px;
+._Control_id4pm_1 .lucide {
+  height: var(--puck-icon-size-m);
+  width: var(--puck-icon-size-m);
 }
-._Control--inline_1aveu_6 .lucide {
-  height: 16px;
-  width: 16px;
+._Control--inline_id4pm_6 .lucide {
+  height: var(--puck-actionbar-action-size, var(--puck-icon-size-s));
+  width: var(--puck-actionbar-action-size, var(--puck-icon-size-s));
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Select/styles.module.css/#css-module-data */
-._Select_xjbef_1 {
+._Select_1n4iv_1 {
   position: relative;
   z-index: 1;
 }
-._Select-button_xjbef_6 {
+._Select-buttonInner_1n4iv_6 {
   align-items: center;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
   display: flex;
-  justify-content: center;
-  gap: 0px;
-  height: 100%;
-  padding: 4px;
-  padding-right: 2px;
 }
-._Select--hasOptions_xjbef_19 ._Select-button_xjbef_6 {
-  color: currentColor;
-}
-._Select--hasOptions_xjbef_19:not(._Select--disabled_xjbef_23) ._Select-button_xjbef_6 {
-  cursor: pointer;
-}
-._Select-buttonIcon_xjbef_27 {
+._Select-buttonIcon_1n4iv_11 {
   align-items: center;
   display: flex;
   justify-content: center;
 }
-._Select--standalone_xjbef_33 ._Select-buttonIcon_xjbef_27 .lucide {
-  height: 18px;
-  width: 18px;
-}
-._Select--actionBar_xjbef_38 ._Select-buttonIcon_xjbef_27 .lucide {
-  height: 16px;
-  width: 16px;
-}
-._Select--hasOptions_xjbef_19:not(._Select--disabled_xjbef_23) ._Select-button_xjbef_6:hover,
-._Select--hasValue_xjbef_44 ._Select-button_xjbef_6 {
-  background: var(--puck-color-grey-10);
-  color: var(--puck-color-azure-04);
+._Select--standalone_1n4iv_17 ._Select-buttonIcon_1n4iv_11 .lucide {
+  height: var(--puck-icon-size-m);
+  width: var(--puck-icon-size-m);
 }
-._Select--disabled_xjbef_23 ._Select-button_xjbef_6 {
-  color: var(--puck-color-grey-07);
+._Select--actionBar_1n4iv_22 ._Select-buttonIcon_1n4iv_11 .lucide {
+  height: var(--puck-actionbar-action-size, var(--puck-icon-size-s));
+  width: var(--puck-actionbar-action-size, var(--puck-icon-size-s));
 }
-._Select--actionBar_xjbef_38 {
-  &._Select--hasOptions_xjbef_19 ._Select-button_xjbef_6:hover,
-  &._Select--hasValue_xjbef_44 ._Select-button_xjbef_6 {
-    background: none;
-    color: var(--puck-color-azure-07);
-  }
-}
-._Select-items_xjbef_61 {
-  background: white;
-  border: 1px solid var(--puck-color-grey-09);
-  border-radius: 8px;
+._Select-items_1n4iv_27 {
+  background: var(--puck-color-surface);
+  border: var(--puck-border-width-regular) solid var(--puck-color-border);
+  border-radius: var(--puck-radius-l);
   margin: 10px 8px;
   margin-left: 0;
-  padding: 4px;
+  padding: var(--puck-space-1);
   z-index: 2;
   list-style: none;
 }
-._SelectItem_xjbef_72 {
+._SelectItem_1n4iv_38 {
   background: transparent;
-  border-radius: 4px;
+  border-radius: var(--puck-radius-m);
   border: none;
-  color: var(--puck-color-grey-04);
+  color: var(--puck-color-text-secondary);
   cursor: pointer;
   display: flex;
-  gap: 8px;
+  gap: var(--puck-space-2);
   align-items: center;
   font-size: var(--puck-font-size-xxs);
   margin: 0;
-  padding: 8px 12px;
+  padding: var(--puck-space-2) var(--puck-space-3);
   width: 100%;
 }
-._SelectItem--isSelected_xjbef_87 {
-  background: var(--puck-color-azure-11);
-  color: var(--puck-color-azure-04);
-  font-weight: 500;
+._SelectItem--isSelected_1n4iv_53 {
+  background: var(--puck-color-interactive-soft);
+  color: var(--puck-color-interactive);
+  font-weight: var(--puck-font-weight-medium);
 }
-._SelectItem--isSelected_xjbef_87 ._SelectItem-icon_xjbef_93 {
-  color: var(--puck-color-azure-04);
+._SelectItem--isSelected_1n4iv_53 ._SelectItem-icon_1n4iv_59 {
+  color: var(--puck-color-interactive);
 }
-._SelectItem_xjbef_72:hover {
-  background: var(--puck-color-azure-11);
-  color: var(--puck-color-azure-04);
+._SelectItem_1n4iv_38:hover {
+  background: var(--puck-color-interactive-soft);
+  color: var(--puck-color-interactive);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextEditor/styles.module.css/#css-module-data */
-._RichTextEditor_z25h4_1 .ProseMirror {
+._RichTextEditor_5wzos_1 .ProseMirror {
   white-space: pre-wrap;
   word-wrap: break-word;
   cursor: text;
   outline: none;
   position: relative;
 }
-._RichTextEditor_z25h4_1 .rich-text * {
+._RichTextEditor_5wzos_1 .rich-text * {
   white-space: pre-wrap;
   user-select: auto;
   -webkit-user-select: auto;
 }
-._RichTextEditor_z25h4_1 .rich-text blockquote {
+._RichTextEditor_5wzos_1 .rich-text blockquote {
   margin: 1em 0;
   padding: 0 1em;
-  border-left: 4px solid var(--puck-color-grey-09);
+  border-left: var(--puck-border-width-strong) solid var(--puck-color-border);
 }
-._RichTextEditor_z25h4_1 .rich-text code {
-  background-color: var(--puck-color-grey-11);
-  padding: 4px 8px;
-  border-radius: 4px;
+._RichTextEditor_5wzos_1 .rich-text code {
+  background-color: var(--puck-color-surface-muted);
+  padding: var(--puck-space-1) var(--puck-space-2);
+  border-radius: var(--puck-radius-m);
 }
-._RichTextEditor_z25h4_1 .rich-text p:empty::before {
+._RichTextEditor_5wzos_1 .rich-text p:empty::before {
   content: "\a0";
 }
-._RichTextEditor_z25h4_1 .rich-text pre code {
+._RichTextEditor_5wzos_1 .rich-text pre code {
   display: block;
-  padding: 8px 12px;
+  padding: var(--puck-space-2) var(--puck-space-3);
 }
-._RichTextEditor_z25h4_1 .rich-text > *:first-child,
-._RichTextEditor_z25h4_1 .ProseMirror > *:first-child,
-._RichTextEditor_z25h4_1 .rich-text * p:first-of-type {
+._RichTextEditor_5wzos_1 .rich-text > *:first-child,
+._RichTextEditor_5wzos_1 .ProseMirror > *:first-child,
+._RichTextEditor_5wzos_1 .rich-text * p:first-of-type {
   margin-top: 0;
 }
-._RichTextEditor_z25h4_1 .rich-text > *:last-child,
-._RichTextEditor_z25h4_1 .ProseMirror > *:last-child,
-._RichTextEditor_z25h4_1 .rich-text * p:last-of-type {
+._RichTextEditor_5wzos_1 .rich-text > *:last-child,
+._RichTextEditor_5wzos_1 .ProseMirror > *:last-child,
+._RichTextEditor_5wzos_1 .rich-text * p:last-of-type {
   margin-bottom: 0;
 }
-._RichTextEditor--editor_z25h4_50 {
-  background: var(--puck-color-white);
-  border-width: 1px;
+._RichTextEditor--editor_5wzos_50 {
+  color: var(--puck-field-color-text, var(--puck-color-text));
+  background: var(--puck-field-color-bg, var(--puck-color-surface));
+  border-width: var( --puck-field-border-width, var(--puck-border-width-regular) );
   border-style: solid;
-  border-color: var(--puck-color-grey-09);
-  border-radius: 4px;
+  border-color: var(--puck-field-color-border, var(--puck-color-border));
+  border-radius: var(--puck-field-radius, var(--puck-radius-m));
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   font-family: inherit;
-  font-size: var(--puck-font-size-xxs);
+  font-size: var(--puck-field-font-size, var(--puck-font-size-xxs));
   resize: vertical;
   text-align: initial;
-  transition: border-color 50ms ease-in;
+  transition: border-color var(--puck-duration-fast) var(--puck-ease-exit);
   width: 100%;
   max-width: 100%;
   min-height: 128px;
 }
-._RichTextEditor--editor_z25h4_50 .rich-text {
+._RichTextEditor--editor_5wzos_50 .rich-text {
   flex-grow: 1;
 }
-._RichTextEditor--editor_z25h4_50 .rich-text:not(:has(.ProseMirror)),
-._RichTextEditor--editor_z25h4_50 .rich-text .ProseMirror {
+._RichTextEditor--editor_5wzos_50 .rich-text:not(:has(.ProseMirror)),
+._RichTextEditor--editor_5wzos_50 .rich-text .ProseMirror {
   height: 100%;
-  padding: 12px 15px;
+  padding: var(--puck-field-space-y, var(--puck-space-3)) var( --puck-field-space-x, calc( var(--puck-space-4) - var(--puck-field-border-width, var(--puck-border-width-regular)) ) );
 }
-._RichTextEditor--editor_z25h4_50 .rich-text ul,
-._RichTextEditor--editor_z25h4_50 .rich-text ol {
-  padding-left: 24px;
+._RichTextEditor--editor_5wzos_50 .rich-text ul,
+._RichTextEditor--editor_5wzos_50 .rich-text ol {
+  padding-left: var(--puck-space-5);
 }
-._RichTextEditor--editor_z25h4_50 .rich-text li {
+._RichTextEditor--editor_5wzos_50 .rich-text li {
   line-height: 1.5;
 }
-._RichTextEditor--editor_z25h4_50 .rich-text p {
-  margin-block: 12px;
+._RichTextEditor--editor_5wzos_50 .rich-text p {
+  margin-block: var(--puck-space-3);
 }
-._RichTextEditor--editor_z25h4_50 .rich-text ul {
+._RichTextEditor--editor_5wzos_50 .rich-text ul {
   list-style: disc;
 }
-._RichTextEditor--editor_z25h4_50 .rich-text ol {
+._RichTextEditor--editor_5wzos_50 .rich-text ol {
   list-style: decimal;
 }
-._RichTextEditor--editor_z25h4_50:focus-within {
-  border-color: var(--puck-color-grey-05);
-  outline: 2px solid var(--puck-color-azure-05);
+._RichTextEditor--editor_5wzos_50:focus-within {
+  border-color: var( --puck-field-color-border-hover, var(--puck-color-border-hover) );
+  outline: var(--puck-border-width-focus) solid var(--puck-field-color-border-focus, var(--puck-color-focus-ring));
   transition: none;
 }
-._RichTextEditor--editor_z25h4_50._RichTextEditor--disabled_z25h4_107 {
-  background: var(--puck-color-grey-11);
+@media (hover: hover) and (pointer: fine) {
+  ._RichTextEditor--editor_5wzos_50:hover:not(._RichTextEditor--disabled_5wzos_123) {
+    border-color: var( --puck-field-color-border-hover, var(--puck-color-border-hover) );
+    transition: none;
+  }
+}
+._RichTextEditor--editor_5wzos_50._RichTextEditor--disabled_5wzos_123 {
+  background: var( --puck-field-color-bg-disabled, var(--puck-color-surface-muted) );
+  border-color: var( --puck-field-color-border-disabled, var(--puck-color-border) );
+}
+._RichTextEditor--editor_5wzos_50._RichTextEditor--disabled_5wzos_123 .rich-text:not(:has(.ProseMirror)),
+._RichTextEditor--editor_5wzos_50._RichTextEditor--disabled_5wzos_123 .rich-text .ProseMirror {
+  color: var( --puck-field-color-text-disabled, var(--puck-color-text-secondary) );
+}
+._RichTextEditor--editor_5wzos_50._RichTextEditor--disabled_5wzos_123 .ProseMirror[contenteditable=false] {
+  cursor: default;
 }
-._RichTextEditor_z25h4_1:not(:focus-within):not(._RichTextEditor--isActive_z25h4_111) .ProseMirror ::selection {
+._RichTextEditor_5wzos_1:not(:focus-within):not(._RichTextEditor--isActive_5wzos_159) .ProseMirror ::selection {
   background-color: transparent;
 }
-._RichTextEditor-menu_z25h4_117 {
-  border-bottom: 1px solid var(--puck-color-grey-10);
+._RichTextEditor-menu_5wzos_165 {
+  border-bottom: var(--puck-border-width-regular) solid var(--puck-color-border-muted);
   position: sticky;
   top: 0;
   z-index: 1;
 }
-._RichTextEditor--disabled_z25h4_107 ._RichTextEditor-menu_z25h4_117 {
-  border-bottom: 1px solid var(--puck-color-grey-09);
+._RichTextEditor--disabled_5wzos_123 ._RichTextEditor-menu_5wzos_165 {
+  border-bottom: var(--puck-border-width-regular) solid var(--puck-color-border);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/fields/ObjectField/styles.module.css/#css-module-data */
-._ObjectField_1ua3y_5 {
+._ObjectField_c5reb_1 {
   display: flex;
   flex-direction: column;
-  background-color: var(--puck-color-white);
-  border: 1px solid var(--puck-color-grey-09);
-  border-radius: 4px;
+  background-color: var(--puck-field-color-surface, var(--puck-color-surface));
+  border: var(--puck-field-border-width, var(--puck-border-width-regular)) solid var(--puck-field-color-border, var(--puck-color-border));
+  border-radius: var(--puck-field-radius, var(--puck-radius-m));
 }
-._ObjectField-fieldset_1ua3y_13 {
+._ObjectField-fieldset_c5reb_10 {
   border: none;
   margin: 0;
   min-width: 0;
-  padding: 16px 15px;
+  padding: var(--puck-field-space-surface-y, var(--puck-space-4)) var( --puck-field-space-surface-x, calc( var(--puck-space-4) - var(--puck-field-border-width, var(--puck-border-width-regular)) ) );
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
-._Drawer_pl7z0_1 {
+._Drawer_1n90m_1 {
   display: flex;
   flex-direction: column;
   font-family: var(--puck-font-family);
-  gap: 12px;
+  gap: var(--puck-space-3);
 }
-._Drawer-draggable_pl7z0_8 {
+._Drawer-draggable_1n90m_8 {
   position: relative;
 }
-._Drawer-draggableBg_pl7z0_12 {
+._Drawer-draggableBg_1n90m_12 {
   position: absolute;
   top: 0;
   right: 0;
@@ -1378,51 +1494,51 @@ textarea._Input-input_bsxfo_26 {
   pointer-events: none;
   z-index: -1;
 }
-._DrawerItem-draggable_pl7z0_22 {
-  background: var(--puck-color-white);
+._DrawerItem-draggable_1n90m_22 {
+  background: var(--puck-drawer-item-color-bg, var(--puck-color-surface));
+  color: var(--puck-drawer-item-color-text, var(--puck-color-text));
   cursor: grab;
-  padding: 12px;
+  padding: var(--puck-drawer-item-space, var(--puck-space-3));
   display: flex;
-  border: 1px var(--puck-color-grey-09) solid;
-  border-radius: 4px;
-  font-size: var(--puck-font-size-xxs);
+  border: var(--puck-drawer-item-border-width, var(--puck-border-width-regular)) var(--puck-drawer-item-color-border, var(--puck-color-border)) solid;
+  border-radius: var(--puck-drawer-item-radius, var(--puck-radius-m));
+  font-size: var(--puck-drawer-item-font-size, var(--puck-font-size-xxs));
   justify-content: space-between;
   align-items: center;
-  transition: background-color 50ms ease-in, color 50ms ease-in;
+  transition: background-color var(--puck-duration-fast) var(--puck-ease-exit), color var(--puck-duration-fast) var(--puck-ease-exit);
 }
-._DrawerItem--disabled_pl7z0_35 ._DrawerItem-draggable_pl7z0_22 {
-  background: var(--puck-color-grey-11);
-  color: var(--puck-color-grey-05);
+._DrawerItem--disabled_1n90m_38 ._DrawerItem-draggable_1n90m_22 {
+  background: var(--puck-color-surface-muted);
+  color: var(--puck-color-text-muted);
   cursor: not-allowed;
 }
-._DrawerItem_pl7z0_22:focus-visible {
+._DrawerItem_1n90m_22:focus-visible {
   outline: 0;
 }
-._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:focus-visible ._DrawerItem-draggable_pl7z0_22 {
-  border-radius: 4px;
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: 2px;
+._Drawer_1n90m_1:not(._Drawer--isDraggingFrom_1n90m_48) ._DrawerItem_1n90m_22:focus-visible ._DrawerItem-draggable_1n90m_22 {
+  border-radius: var(--puck-radius-m);
+  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
+  outline-offset: var(--puck-border-width-focus);
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:not(._DrawerItem--disabled_pl7z0_35) ._DrawerItem-draggable_pl7z0_22:hover {
-    background-color: var(--puck-color-azure-12);
-    color: var(--puck-color-azure-04);
+  ._Drawer_1n90m_1:not(._Drawer--isDraggingFrom_1n90m_48) ._DrawerItem_1n90m_22:not(._DrawerItem--disabled_1n90m_38) ._DrawerItem-draggable_1n90m_22:hover {
+    background-color: var( --puck-drawer-item-color-bg-hover, var(--puck-color-interactive-soft-hover) );
+    color: var( --puck-drawer-item-color-text-hover, var(--puck-color-interactive) );
     transition: none;
   }
 }
-._DrawerItem-name_pl7z0_63 {
+._DrawerItem-name_1n90m_72 {
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
-._DraggableComponent_1vaqy_1 {
+._DraggableComponent_1627v_1 {
   position: absolute;
   pointer-events: none;
-  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
 }
-._DraggableComponent-overlayWrapper_1vaqy_12 {
+._DraggableComponent-overlayWrapper_1627v_6 {
   height: 100%;
   width: 100%;
   top: 0;
@@ -1431,24 +1547,24 @@ textarea._Input-input_bsxfo_26 {
   box-sizing: border-box;
   z-index: 1;
 }
-._DraggableComponent-overlay_1vaqy_12 {
+._DraggableComponent-overlay_1627v_6 {
   cursor: pointer;
   height: 100%;
-  outline: 2px var(--puck-color-azure-09) solid;
-  outline-offset: -2px;
+  outline: var( --puck-slot-component-border-width, var(--puck-border-width-focus) ) var( --puck-slot-component-color-overlay-border, var(--puck-color-selection-border) ) solid;
+  outline-offset: calc(var(--puck-slot-component-border-width, var(--puck-border-width-focus)) * -1);
   width: 100%;
 }
-._DraggableComponent_1vaqy_1:focus-visible > ._DraggableComponent-overlayWrapper_1vaqy_12 {
-  outline: 1px solid var(--puck-color-azure-05);
+._DraggableComponent_1627v_1:focus-visible > ._DraggableComponent-overlayWrapper_1627v_6 {
+  outline: var(--puck-border-width-regular) solid var(--puck-color-focus-ring);
 }
-._DraggableComponent-loadingOverlay_1vaqy_34 {
-  background: var(--puck-color-white);
-  color: var(--puck-color-grey-03);
-  border-radius: 4px;
+._DraggableComponent-loadingOverlay_1627v_38 {
+  background: var(--puck-color-surface);
+  color: var(--puck-color-text);
+  border-radius: var(--puck-radius-m);
   display: flex;
-  padding: 8px;
-  top: 8px;
-  right: 8px;
+  padding: var(--puck-space-2);
+  top: var(--puck-space-2);
+  right: var(--puck-space-2);
   position: absolute;
   z-index: 1;
   pointer-events: all;
@@ -1456,27 +1572,27 @@ textarea._Input-input_bsxfo_26 {
   opacity: 0.8;
   z-index: 1;
 }
-._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
-  background: var(--overlay-background);
-  outline: 2px var(--puck-color-azure-09) solid;
+._DraggableComponent--hover_1627v_54 > ._DraggableComponent-overlayWrapper_1627v_6 > ._DraggableComponent-overlay_1627v_6 {
+  background: var( --puck-slot-component-color-overlay, var(--puck-color-selection-bg) );
+  outline: var( --puck-slot-component-border-width, var(--puck-border-width-focus) ) var( --puck-slot-component-color-overlay-border, var(--puck-color-selection-border) ) solid;
 }
-._DraggableComponent--isSelected_1vaqy_57 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
-  outline-color: var(--puck-color-azure-07);
+._DraggableComponent--isSelected_1627v_72 > ._DraggableComponent-overlayWrapper_1627v_6 > ._DraggableComponent-overlay_1627v_6 {
+  outline-color: var( --puck-slot-component-color-border-selected, var(--puck-color-selection-border) );
 }
-._DraggableComponent_1vaqy_1:has(._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12) > ._DraggableComponent-overlayWrapper_1vaqy_12 {
+._DraggableComponent_1627v_1:has(._DraggableComponent--hover_1627v_54 > ._DraggableComponent-overlayWrapper_1627v_6) > ._DraggableComponent-overlayWrapper_1627v_6 {
   display: none;
 }
-._DraggableComponent-actionsOverlay_1vaqy_71 {
+._DraggableComponent-actionsOverlay_1627v_89 {
   position: sticky;
   opacity: 0;
   pointer-events: none;
   z-index: 2;
 }
-._DraggableComponent--isSelected_1vaqy_57 ._DraggableComponent-actionsOverlay_1vaqy_71 {
+._DraggableComponent--isSelected_1627v_72 ._DraggableComponent-actionsOverlay_1627v_89 {
   opacity: 1;
   pointer-events: auto;
 }
-._DraggableComponent-actions_1vaqy_71 {
+._DraggableComponent-actions_1627v_89 {
   position: absolute;
   width: auto;
   cursor: grab;
@@ -1485,6 +1601,10 @@ textarea._Input-input_bsxfo_26 {
   transform-origin: right top;
   min-height: 36px;
 }
+._DraggableComponent-actionsAction_1627v_111 {
+  height: var(--puck-actionbar-action-size, var(--puck-icon-size-s));
+  width: var(--puck-actionbar-action-size, var(--puck-icon-size-s));
+}
 
 /* components/DraggableComponent/styles.css */
 [data-puck-component] * {
@@ -1505,9 +1625,9 @@ textarea._Input-input_bsxfo_26 {
   cursor: pointer;
 }
 [data-dnd-placeholder] {
-  background: var(--puck-color-azure-06, #6499cf) !important;
+  background: var( --puck-slot-component-color-placeholder, var(--puck-color-azure-06) ) !important;
   border: none !important;
-  color: #00000000 !important;
+  color: transparent !important;
   opacity: 0.3 !important;
   outline: none !important;
   transition: none !important;
@@ -1519,8 +1639,8 @@ textarea._Input-input_bsxfo_26 {
 }
 [data-dnd-dragging][data-puck-component] {
   pointer-events: none !important;
-  outline: 2px var(--puck-color-azure-09, #cfdff0) solid !important;
-  outline-offset: -2px !important;
+  outline: var( --puck-slot-component-border-width, var(--puck-border-width-focus) ) var(--puck-slot-component-color-border-dragging, var(--puck-color-azure-09)) solid !important;
+  outline-offset: calc(var(--puck-slot-component-border-width, var(--puck-border-width-focus)) * -1) !important;
 }
 [data-dnd-dragging][data-puck-component] > :first-child {
   margin-top: 0 !important;
@@ -1530,55 +1650,48 @@ textarea._Input-input_bsxfo_26 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
-._DropZone_1i2sv_1 {
-  --resize-animation-ms: 150ms;
+._DropZone_ybznu_1 {
   position: relative;
   height: 100%;
-  min-height: var(--min-empty-height);
-  outline-offset: -2px;
+  min-height: var(--puck-slot-min-empty-height);
+  outline-offset: calc(var(--puck-slot-border-width, var(--puck-border-width-focus)) * -1);
   width: 100%;
 }
-._DropZone--hasChildren_1i2sv_11 {
+._DropZone--hasChildren_ybznu_11 {
   min-height: 0;
 }
-._DropZone_1i2sv_1:empty {
-  min-height: var(--min-empty-height);
+._DropZone_ybznu_1:empty {
+  min-height: var(--puck-slot-min-empty-height);
 }
-[data-puck-entry]:not([data-puck-dragging]) ._DropZone_1i2sv_1 {
-  transition: min-height var(--resize-animation-ms) ease-in;
+[data-puck-entry]:not([data-puck-dragging]) ._DropZone_ybznu_1 {
+  transition: min-height var(--puck-duration-medium) var(--puck-ease-exit);
 }
-._DropZone--isAreaSelected_1i2sv_24,
-._DropZone--hoveringOverArea_1i2sv_25:not(._DropZone--isRootZone_1i2sv_25) {
-  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
-  outline: 2px dashed var(--puck-color-azure-08);
+._DropZone--isAreaSelected_ybznu_24,
+._DropZone--hoveringOverArea_ybznu_25:not(._DropZone--isRootZone_ybznu_25) {
+  background: var(--puck-slot-color-bg, var(--puck-color-selection-bg));
+  outline: var(--puck-slot-border-width, var(--puck-border-width-focus)) var(--puck-slot-border-style, dashed) var(--puck-slot-color-border, var(--puck-color-selection-border));
 }
-._DropZone_1i2sv_1:empty {
-  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
-  outline: 2px dashed var(--puck-color-azure-08);
+._DropZone_ybznu_1:empty {
+  background: var(--puck-slot-color-bg, var(--puck-color-selection-bg));
+  outline: var(--puck-slot-border-width, var(--puck-border-width-focus)) var(--puck-slot-border-style, dashed) var(--puck-slot-color-border, var(--puck-color-selection-border));
 }
-._DropZone--isDestination_1i2sv_35 {
-  outline: 2px dashed var(--puck-color-azure-04) !important;
-}
-._DropZone--isDestination_1i2sv_35:not(._DropZone--isRootZone_1i2sv_25) {
-  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
-}
-._DropZone-item_1i2sv_47 {
+._DropZone-item_ybznu_39 {
   position: relative;
 }
-._DropZone-hitbox_1i2sv_51 {
+._DropZone-hitbox_ybznu_43 {
   position: absolute;
-  bottom: -12px;
-  height: 24px;
+  bottom: calc(var(--puck-space-3) * -1);
+  height: var(--puck-space-5);
   width: 100%;
   z-index: 1;
 }
-[data-puck-dragging] ._DropZone--isEnabled_1i2sv_59 {
-  outline: 2px dashed var(--puck-color-azure-06);
+[data-puck-dragging] ._DropZone--isEnabled_ybznu_51 {
+  outline: var(--puck-slot-border-width, var(--puck-border-width-focus)) var(--puck-slot-border-style, dashed) var(--puck-slot-color-border, var(--puck-color-selection-border));
 }
-._DropZone_1i2sv_1 > *:not([data-puck-component]) {
+._DropZone_ybznu_1 > *:not([data-puck-component]) {
   opacity: 0;
 }
-body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
+body:has(._DropZone--isAnimating_ybznu_62:empty) [data-puck-overlay] {
   opacity: 0 !important;
 }
 
@@ -1587,11 +1700,11 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
 [data-puck-overlay-portal] * {
   pointer-events: auto !important;
 }
-[data-puck-overlay-portal]:hover {
+[data-puck-entry][data-puck-preview-mode=edit] [data-puck-overlay-portal]:hover {
   outline: 2px var(--puck-color-azure-09, #cfdff0) dashed;
   outline-offset: 2px;
 }
-[data-puck-overlay-portal]:focus-within {
+[data-puck-entry][data-puck-preview-mode=edit] [data-puck-overlay-portal]:focus-within {
   outline: 2px var(--puck-color-azure-07, #88b0da) dashed;
   outline-offset: 2px;
 }
@@ -1612,15 +1725,15 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
-._PuckFields_10bh7_1 {
+._PuckFields_wnj25_1 {
   position: relative;
   font-family: var(--puck-font-family);
 }
-._PuckFields--isLoading_10bh7_6 {
+._PuckFields--isLoading_wnj25_6 {
   min-height: 48px;
 }
-._PuckFields-loadingOverlay_10bh7_10 {
-  background: var(--puck-color-white);
+._PuckFields-loadingOverlay_wnj25_10 {
+  background: var(--puck-color-surface);
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
@@ -1633,72 +1746,72 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
   box-sizing: border-box;
   opacity: 0.8;
 }
-._PuckFields-loadingOverlayInner_10bh7_25 {
+._PuckFields-loadingOverlayInner_wnj25_25 {
   display: flex;
-  padding: 16px;
+  padding: var(--puck-space-4);
   position: sticky;
   top: 0;
 }
-._PuckFields-field_10bh7_32 * {
+._PuckFields-field_wnj25_32 * {
   box-sizing: border-box;
 }
-._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 {
-  color: var(--puck-color-grey-04);
-  padding: 16px;
-  padding-bottom: 12px;
+._PuckFields--wrapFields_wnj25_36 ._PuckFields-field_wnj25_32 {
+  color: var(--puck-color-text-secondary);
+  padding: var(--puck-space-4);
+  padding-bottom: var(--puck-space-3);
   display: block;
 }
-._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 + ._PuckFields-field_10bh7_32 {
-  border-top: 1px solid var(--puck-color-grey-09);
-  margin-top: 8px;
+._PuckFields--wrapFields_wnj25_36 ._PuckFields-field_wnj25_32 + ._PuckFields-field_wnj25_32 {
+  border-top: var(--puck-border-width-regular) solid var(--puck-color-border);
+  margin-top: var(--puck-space-2);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
-._ComponentList_1rrlt_1 {
+._ComponentList_htktj_1 {
   max-width: 100%;
 }
-._ComponentList--isExpanded_1rrlt_5 + ._ComponentList_1rrlt_1 {
-  margin-top: 12px;
+._ComponentList--isExpanded_htktj_5 + ._ComponentList_htktj_1 {
+  margin-top: var(--puck-space-3);
 }
-._ComponentList-content_1rrlt_9 {
+._ComponentList-content_htktj_9 {
   display: none;
 }
-._ComponentList--isExpanded_1rrlt_5 > ._ComponentList-content_1rrlt_9 {
+._ComponentList--isExpanded_htktj_5 > ._ComponentList-content_htktj_9 {
   display: block;
 }
-._ComponentList-title_1rrlt_17 {
+._ComponentList-title_htktj_17 {
   background-color: transparent;
   border: 0;
-  color: var(--puck-color-grey-05);
+  color: var(--puck-drawer-category-color-text, var(--puck-color-text-muted));
   cursor: pointer;
   display: flex;
   font: inherit;
-  font-size: var(--puck-font-size-xxxs);
+  font-size: var(--puck-drawer-category-font-size, var(--puck-font-size-xxxs));
   list-style: none;
   margin-bottom: 6px;
-  padding: 8px;
+  padding: var(--puck-drawer-category-space, var(--puck-space-2));
   text-transform: uppercase;
-  transition: background-color 50ms ease-in, color 50ms ease-in;
-  gap: 4px;
-  border-radius: 4px;
+  transition: background-color var(--puck-duration-fast) var(--puck-ease-exit), color var(--puck-duration-fast) var(--puck-ease-exit);
+  gap: var(--puck-space-1);
+  border-radius: var(--puck-radius-m);
   width: 100%;
 }
-._ComponentList-title_1rrlt_17:focus-visible {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: 2px;
+._ComponentList-title_htktj_17:focus-visible {
+  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
+  outline-offset: var(--puck-border-width-focus);
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ComponentList-title_1rrlt_17:hover {
-    background-color: var(--puck-color-azure-11);
-    color: var(--puck-color-azure-04);
+  ._ComponentList-title_htktj_17:hover {
+    background-color: var( --puck-drawer-category-color-bg-hover, var(--puck-color-interactive-soft) );
+    color: var( --puck-drawer-category-color-text-hover, var(--puck-color-interactive) );
     transition: none;
   }
 }
-._ComponentList-title_1rrlt_17:active {
-  background-color: var(--puck-color-azure-10);
+._ComponentList-title_htktj_17:active {
+  background-color: var( --puck-drawer-category-color-bg-active, var(--puck-color-interactive-subtle) );
   transition: none;
 }
-._ComponentList-titleIcon_1rrlt_53 {
+._ComponentList-titleIcon_htktj_63 {
   margin-inline-start: auto;
 }
 
@@ -1714,285 +1827,286 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
-._LayerTree_7rx04_1 {
-  color: var(--puck-color-grey-03);
+._LayerTree_1vltj_1 {
+  color: var(--puck-outline-color-text, var(--puck-color-text-secondary));
   font-family: var(--puck-font-family);
-  font-size: var(--puck-font-size-xxs);
+  font-size: var(--puck-outline-font-size, var(--puck-font-size-xxs));
   margin: 0;
   position: relative;
   list-style: none;
   padding: 0;
 }
-._LayerTree-zoneTitle_7rx04_11 {
-  color: var(--puck-color-grey-05);
-  font-size: var(--puck-font-size-xxxs);
+._LayerTree-zoneTitle_1vltj_11 {
+  color: var(--puck-outline-zone-color-text, var(--puck-color-text-muted));
+  font-size: var(--puck-outline-zone-font-size, var(--puck-font-size-xxxs));
   text-transform: uppercase;
 }
-._LayerTree-helper_7rx04_17 {
+._LayerTree-helper_1vltj_17 {
   text-align: center;
-  color: var(--puck-color-grey-07);
-  margin: 8px 4px;
+  color: var(--puck-color-text-subtle);
+  margin: var(--puck-space-2) var(--puck-space-1);
 }
-._Layer_7rx04_1 {
+._Layer_1vltj_1 {
   position: relative;
-  border: 1px solid transparent;
-  border-radius: 4px;
+  border: var(--puck-outline-border-width, var(--puck-border-width-regular)) solid transparent;
+  border-radius: var(--puck-outline-radius, var(--puck-radius-m));
 }
-._Layer-inner_7rx04_29 {
-  border: 1px solid transparent;
-  border-radius: 4px;
-  transition: color 50ms ease-in;
+._Layer-inner_1vltj_30 {
+  border: var(--puck-outline-border-width, var(--puck-border-width-regular)) solid transparent;
+  border-radius: var(--puck-outline-radius, var(--puck-radius-m));
+  transition: color var(--puck-duration-fast) var(--puck-ease-exit);
 }
-._Layer--containsZone_7rx04_35 > ._Layer-inner_7rx04_29 {
+._Layer--containsZone_1vltj_37 > ._Layer-inner_1vltj_30 {
   padding-inline-start: 0;
 }
-._Layer-clickable_7rx04_39 {
+._Layer-clickable_1vltj_41 {
   align-items: center;
   background: none;
   border: 0;
-  border-radius: 4px;
+  border-radius: var(--puck-outline-radius, var(--puck-radius-m));
   color: inherit;
   cursor: pointer;
   display: flex;
   font: inherit;
-  padding-inline-start: 12px;
-  padding-inline-end: 4px;
+  padding-inline-start: var(--puck-space-3);
+  padding-inline-end: var(--puck-space-1);
   width: 100%;
 }
-._Layer-clickable_7rx04_39:focus-visible {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: 2px;
+._Layer-clickable_1vltj_41:focus-visible {
+  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
+  outline-offset: var(--puck-border-width-focus);
   position: relative;
   z-index: 1;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Layer_7rx04_1:not(._Layer--isSelected_7rx04_61) > ._Layer-inner_7rx04_29:hover {
-    border-color: var(--puck-color-azure-10);
-    background: var(--puck-color-azure-11);
-    color: var(--puck-color-azure-04);
+  ._Layer_1vltj_1:not(._Layer--isSelected_1vltj_63) > ._Layer-inner_1vltj_30:hover {
+    border-color: var( --puck-outline-color-border-hover, var(--puck-color-interactive-subtle) );
+    background: var( --puck-outline-color-bg-hover, var(--puck-color-interactive-soft) );
+    color: var(--puck-outline-color-text-hover, var(--puck-color-interactive));
     transition: none;
   }
 }
-._Layer--isSelected_7rx04_61 {
-  border-color: var(--puck-color-azure-08);
+._Layer--isSelected_1vltj_63 {
+  border-color: var( --puck-outline-color-border-selected, var(--puck-color-selection-border) );
 }
-._Layer--isSelected_7rx04_61 > ._Layer-inner_7rx04_29 {
-  background: var(--puck-color-azure-10);
+._Layer--isSelected_1vltj_63 > ._Layer-inner_1vltj_30 {
+  background: var( --puck-outline-color-bg-selected, var(--puck-color-interactive-subtle) );
 }
-._Layer--isSelected_7rx04_61 > ._Layer-inner_7rx04_29 > ._Layer-clickable_7rx04_39 > ._Layer-chevron_7rx04_77,
-._Layer--childIsSelected_7rx04_78 > ._Layer-inner_7rx04_29 > ._Layer-clickable_7rx04_39 > ._Layer-chevron_7rx04_77 {
+._Layer--isSelected_1vltj_63 > ._Layer-inner_1vltj_30 > ._Layer-clickable_1vltj_41 > ._Layer-chevron_1vltj_91,
+._Layer--childIsSelected_1vltj_92 > ._Layer-inner_1vltj_30 > ._Layer-clickable_1vltj_41 > ._Layer-chevron_1vltj_91 {
   transform: scaleY(-1);
 }
-._Layer-zones_7rx04_82 {
+._Layer-zones_1vltj_96 {
   display: none;
-  margin-inline-start: 12px;
+  margin-inline-start: var(--puck-space-3);
 }
-._Layer--isSelected_7rx04_61 > ._Layer-zones_7rx04_82,
-._Layer--childIsSelected_7rx04_78 > ._Layer-zones_7rx04_82 {
+._Layer--isSelected_1vltj_63 > ._Layer-zones_1vltj_96,
+._Layer--childIsSelected_1vltj_92 > ._Layer-zones_1vltj_96 {
   display: block;
 }
-._Layer-zones_7rx04_82 > ._LayerTree_7rx04_1 {
-  margin-inline-start: 12px;
+._Layer-zones_1vltj_96 > ._LayerTree_1vltj_1 {
+  margin-inline-start: var(--puck-space-3);
 }
-._Layer-title_7rx04_96,
-._LayerTree-zoneTitle_7rx04_11 {
+._Layer-title_1vltj_110,
+._LayerTree-zoneTitle_1vltj_11 {
   display: flex;
-  gap: 8px;
+  gap: var(--puck-space-2);
   align-items: center;
-  margin: 8px 4px;
+  margin: var(--puck-space-2) var(--puck-space-1);
   overflow-x: hidden;
 }
-._Layer-name_7rx04_105 {
+._Layer-name_1vltj_119 {
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._Layer-icon_7rx04_111 {
-  color: var(--puck-color-rose-07);
-  margin-top: 4px;
+._Layer-icon_1vltj_125 {
+  color: var(--puck-outline-color-icon, var(--puck-color-highlight));
+  margin-top: var(--puck-space-1);
 }
-._Layer-zoneIcon_7rx04_116 {
-  color: var(--puck-color-grey-08);
-  margin-top: 4px;
+._Layer-zoneIcon_1vltj_130 {
+  color: var(--puck-outline-zone-color-text, var(--puck-color-text-muted));
+  margin-top: var(--puck-space-1);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css/#css-module-data */
-._Puck_cgc86_19 {
-  --puck-space-px: 16px;
+._Puck_mr27u_19 {
   font-family: var(--puck-font-family);
   overflow-x: hidden;
   visibility: visible !important;
 }
 @media (min-width: 766px) {
-  ._Puck_cgc86_19 {
+  ._Puck_mr27u_19 {
     overflow-x: auto;
   }
 }
-._Puck-portal_cgc86_32 {
+._Puck-portal_mr27u_31 {
   position: relative;
   z-index: 2;
 }
-._PuckLayout_cgc86_37 {
+._PuckLayout_mr27u_36 {
   height: 100dvh;
 }
-._PuckLayout-inner_cgc86_41 {
+._PuckLayout-inner_mr27u_40 {
   --puck-frame-width: auto;
-  --puck-side-nav-width: min-content;
-  --puck-side-bar-width: 0px;
-  --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, var(--puck-side-bar-width) );
-  --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, var(--puck-side-bar-width) );
-  background-color: var(--puck-color-grey-12);
+  --puck-pluginbar-width: min-content;
+  --puck-sidebar-width: 0px;
+  --puck-sidebar-left-width: var( --puck-user-sidebar-left-width, var(--puck-sidebar-width) );
+  --puck-sidebar-right-width: var( --puck-user-sidebar-right-width, var(--puck-sidebar-width) );
+  background-color: var(--puck-color-surface-subtle);
   display: grid;
   grid-template-areas: "header" "editor" "left" "right" "sidenav";
   grid-template-columns: var(--puck-frame-width);
-  grid-template-rows: min-content auto 0 0 var(--puck-side-nav-width);
+  grid-template-rows: min-content auto 0 0 var(--puck-pluginbar-width);
   height: 100%;
   position: relative;
-  transition: grid-template-rows 150ms ease-in;
+  transition: grid-template-rows var(--puck-duration-medium) var(--puck-ease-exit);
   z-index: 0;
   overflow: hidden;
 }
 @media (min-width: 638px) {
-  ._PuckLayout-inner_cgc86_41 {
-    --puck-side-nav-width: 68px;
+  ._PuckLayout-inner_mr27u_40 {
+    --puck-pluginbar-width: 68px;
     grid-template-areas: "header header header header" "sidenav left editor right";
-    grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) 0;
+    grid-template-columns: var(--puck-pluginbar-width) 0 var(--puck-frame-width) 0;
     grid-template-rows: min-content auto;
   }
-  ._Puck--hidePlugins_cgc86_73 ._PuckLayout-inner_cgc86_41 {
-    --puck-side-nav-width: 0;
+  ._Puck--hidePlugins_mr27u_73 ._PuckLayout-inner_mr27u_40 {
+    --puck-pluginbar-width: 0;
   }
 }
-._PuckLayout--mounted_cgc86_78 ._PuckLayout-inner_cgc86_41 {
-  --puck-side-bar-width: 186px;
+._PuckLayout--mounted_mr27u_78 ._PuckLayout-inner_mr27u_40 {
+  --puck-sidebar-width: 186px;
 }
-._PuckLayout--mobilePanelHeightToggle_cgc86_82._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-inner_cgc86_41 {
-  grid-template-rows: 0 auto 30% 0 var(--puck-side-nav-width);
+._PuckLayout--mobilePanelHeightToggle_mr27u_82._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-inner_mr27u_40 {
+  grid-template-rows: 0 auto 30% 0 var(--puck-pluginbar-width);
+  transition: grid-template-rows var(--puck-duration-medium) var(--puck-ease-entrance);
 }
-._PuckLayout--mobilePanelHeightToggle_cgc86_82._PuckLayout--leftSideBarVisible_cgc86_82._PuckLayout--isExpanded_cgc86_88 ._PuckLayout-inner_cgc86_41 {
-  grid-template-rows: 0 auto 55% 0 var(--puck-side-nav-width);
+._PuckLayout--mobilePanelHeightToggle_mr27u_82._PuckLayout--leftSideBarVisible_mr27u_82._PuckLayout--isExpanded_mr27u_90 ._PuckLayout-inner_mr27u_40 {
+  grid-template-rows: 0 auto 55% 0 var(--puck-pluginbar-width);
+  transition: grid-template-rows var(--puck-duration-medium) var(--puck-ease-entrance);
 }
 @media (min-width: 638px) {
-  ._PuckLayout--mobilePanelHeightToggle_cgc86_82._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-inner_cgc86_41 {
-    grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
+  ._PuckLayout--mobilePanelHeightToggle_mr27u_82._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-inner_mr27u_40 {
+    grid-template-columns: var(--puck-pluginbar-width) var(--puck-sidebar-left-width) var( --puck-frame-width ) 0;
     grid-template-rows: min-content auto;
   }
 }
-._PuckLayout--mobilePanelHeightMinContent_cgc86_106._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-inner_cgc86_41,
-._PuckLayout--mobilePanelHeightMinContent_cgc86_106._PuckLayout--leftSideBarVisible_cgc86_82._PuckLayout--isExpanded_cgc86_88 ._PuckLayout-inner_cgc86_41 {
-  grid-template-rows: 0 auto min-content 0 var(--puck-side-nav-width);
+._PuckLayout--mobilePanelHeightMinContent_mr27u_110._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-inner_mr27u_40,
+._PuckLayout--mobilePanelHeightMinContent_mr27u_110._PuckLayout--leftSideBarVisible_mr27u_82._PuckLayout--isExpanded_mr27u_90 ._PuckLayout-inner_mr27u_40 {
+  grid-template-rows: 0 auto min-content 0 var(--puck-pluginbar-width);
 }
 @media (min-width: 638px) {
-  ._PuckLayout--mobilePanelHeightToggle_cgc86_82._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-inner_cgc86_41,
-  ._PuckLayout--mobilePanelHeightToggle_cgc86_82._PuckLayout--leftSideBarVisible_cgc86_82._PuckLayout--isExpanded_cgc86_88 ._PuckLayout-inner_cgc86_41,
-  ._PuckLayout--mobilePanelHeightMinContent_cgc86_106._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-inner_cgc86_41,
-  ._PuckLayout--mobilePanelHeightMinContent_cgc86_106._PuckLayout--leftSideBarVisible_cgc86_82._PuckLayout--isExpanded_cgc86_88 ._PuckLayout-inner_cgc86_41 {
-    grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
+  ._PuckLayout--mobilePanelHeightToggle_mr27u_82._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-inner_mr27u_40,
+  ._PuckLayout--mobilePanelHeightToggle_mr27u_82._PuckLayout--leftSideBarVisible_mr27u_82._PuckLayout--isExpanded_mr27u_90 ._PuckLayout-inner_mr27u_40,
+  ._PuckLayout--mobilePanelHeightMinContent_mr27u_110._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-inner_mr27u_40,
+  ._PuckLayout--mobilePanelHeightMinContent_mr27u_110._PuckLayout--leftSideBarVisible_mr27u_82._PuckLayout--isExpanded_mr27u_90 ._PuckLayout-inner_mr27u_40 {
+    grid-template-columns: var(--puck-pluginbar-width) var(--puck-sidebar-left-width) var( --puck-frame-width ) 0;
     grid-template-rows: min-content auto;
   }
 }
 @media (min-width: 638px) {
-  ._PuckLayout--rightSideBarVisible_cgc86_133 ._PuckLayout-inner_cgc86_41 {
-    grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) var(--puck-right-side-bar-width);
+  ._PuckLayout--rightSideBarVisible_mr27u_137 ._PuckLayout-inner_mr27u_40 {
+    grid-template-columns: var(--puck-pluginbar-width) 0 var(--puck-frame-width) var(--puck-sidebar-right-width);
   }
 }
 @media (min-width: 638px) {
-  ._PuckLayout--leftSideBarVisible_cgc86_82._PuckLayout--rightSideBarVisible_cgc86_133 ._PuckLayout-inner_cgc86_41 {
-    grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) var(--puck-right-side-bar-width);
+  ._PuckLayout--leftSideBarVisible_mr27u_82._PuckLayout--rightSideBarVisible_mr27u_137 ._PuckLayout-inner_mr27u_40 {
+    grid-template-columns: var(--puck-pluginbar-width) var(--puck-sidebar-left-width) var( --puck-frame-width ) var(--puck-sidebar-right-width);
   }
 }
 @media (min-width: 458px) {
-  ._PuckLayout-mounted_cgc86_152 ._PuckLayout-inner_cgc86_41 {
+  ._PuckLayout-mounted_mr27u_156 ._PuckLayout-inner_mr27u_40 {
     --puck-frame-width: minmax(266px, auto);
   }
 }
 @media (min-width: 638px) {
-  ._PuckLayout_cgc86_37 ._PuckLayout-inner_cgc86_41 {
-    --puck-side-bar-width: minmax(186px, 250px);
+  ._PuckLayout_mr27u_36 ._PuckLayout-inner_mr27u_40 {
+    --puck-sidebar-width: minmax(186px, 250px);
   }
 }
 @media (min-width: 766px) {
-  ._PuckLayout_cgc86_37 ._PuckLayout-inner_cgc86_41 {
+  ._PuckLayout_mr27u_36 ._PuckLayout-inner_mr27u_40 {
     --puck-frame-width: auto;
   }
 }
 @media (min-width: 990px) {
-  ._PuckLayout_cgc86_37 ._PuckLayout-inner_cgc86_41 {
-    --puck-side-bar-width: 256px;
+  ._PuckLayout_mr27u_36 ._PuckLayout-inner_mr27u_40 {
+    --puck-sidebar-width: 256px;
   }
 }
 @media (min-width: 1198px) {
-  ._PuckLayout_cgc86_37 ._PuckLayout-inner_cgc86_41 {
-    --puck-side-bar-width: 274px;
+  ._PuckLayout_mr27u_36 ._PuckLayout-inner_mr27u_40 {
+    --puck-sidebar-width: 274px;
   }
 }
 @media (min-width: 1398px) {
-  ._PuckLayout_cgc86_37 ._PuckLayout-inner_cgc86_41 {
-    --puck-side-bar-width: 290px;
+  ._PuckLayout_mr27u_36 ._PuckLayout-inner_mr27u_40 {
+    --puck-sidebar-width: 290px;
   }
 }
 @media (min-width: 1598px) {
-  ._PuckLayout_cgc86_37 ._PuckLayout-inner_cgc86_41 {
-    --puck-side-bar-width: 320px;
+  ._PuckLayout_mr27u_36 ._PuckLayout-inner_mr27u_40 {
+    --puck-sidebar-width: 320px;
   }
 }
-._PuckLayout-nav_cgc86_193 {
-  border-top: 1px solid var(--puck-color-grey-09);
-  background-color: var(--puck-color-grey-12);
+._PuckLayout-nav_mr27u_197 {
+  border-top: var(--puck-border-width-regular) solid var(--puck-color-border);
+  background-color: var( --puck-pluginbar-color-bg, var(--puck-color-surface-subtle) );
   grid-area: sidenav;
   overflow: hidden;
   width: 100%;
 }
 @media (min-width: 638px) {
-  ._PuckLayout-nav_cgc86_193 {
+  ._PuckLayout-nav_mr27u_197 {
     border-top: 0;
-    border-right: 1px solid var(--puck-color-grey-09);
+    border-right: var(--puck-border-width-regular) solid var(--puck-color-border);
     box-sizing: border-box;
   }
 }
-._PuckLayout-header_cgc86_209 {
+._PuckLayout-header_mr27u_217 {
   grid-area: header;
 }
-._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-header_cgc86_209 {
+._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-header_mr27u_217 {
   overflow: hidden;
 }
 @media (min-width: 638px) {
-  ._PuckLayout--leftSideBarVisible_cgc86_82 ._PuckLayout-header_cgc86_209 {
+  ._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-header_mr27u_217 {
     overflow: auto;
   }
 }
-._PuckPluginTab_cgc86_223 {
+._PuckPluginTab_mr27u_231 {
   display: none;
   flex-grow: 1;
   max-height: 100%;
 }
-._PuckPluginTab--visible_cgc86_229 {
+._PuckPluginTab--visible_mr27u_237 {
   display: flex;
   flex-direction: column;
 }
-._PuckPluginTab-body_cgc86_234 {
+._PuckPluginTab-body_mr27u_242 {
   flex-grow: 1;
   max-height: 100%;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
-._MenuBar_8pf8c_1 {
-  background-color: var(--puck-color-white);
-  border-bottom: 1px solid var(--puck-color-grey-09);
+._MenuBar_1hxnj_1 {
+  background-color: var(--_puck-menu-bar-color-bg, var(--puck-color-surface));
+  border-bottom: var(--puck-border-width-regular) solid var(--puck-color-border);
   display: none;
   left: 0;
   margin-top: 1px;
-  padding: 8px 16px;
+  padding: var(--puck-space-2) var(--puck-space-4);
   position: absolute;
   right: 0;
   top: 100%;
   z-index: 2;
 }
-._MenuBar--menuOpen_8pf8c_14 {
+._MenuBar--menuOpen_1hxnj_14 {
   display: block;
 }
 @media (min-width: 638px) {
-  ._MenuBar_8pf8c_1 {
+  ._MenuBar_1hxnj_1 {
     border: none;
     display: block;
     margin-top: 0;
@@ -2001,172 +2115,169 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
     position: static;
   }
 }
-._MenuBar-inner_8pf8c_29 {
+._MenuBar-inner_1hxnj_29 {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  gap: 8px 16px;
+  gap: var(--puck-space-2) var(--puck-space-4);
   justify-content: flex-end;
 }
 @media (min-width: 638px) {
-  ._MenuBar-inner_8pf8c_29 {
+  ._MenuBar-inner_1hxnj_29 {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
   }
 }
-._MenuBar-history_8pf8c_45 {
+._MenuBar-history_1hxnj_45 {
   display: flex;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
-._PuckHeader_63pti_1 {
-  background: var(--puck-color-white);
-  border-bottom: 1px solid var(--puck-color-grey-09);
-  color: var(--puck-color-black);
+._PuckHeader_c2nei_1 {
+  --_puck-menu-bar-color-bg: var( --puck-header-color-bg, var(--puck-color-surface) );
+  background: var(--puck-header-color-bg, var(--puck-color-surface));
+  border-bottom: var(--puck-border-width-regular) solid var(--puck-color-border);
+  color: var(--puck-header-color-text, var(--puck-color-text));
+  --_puck-heading-color: var(--puck-header-color-text, var(--puck-color-text));
   grid-area: header;
   position: relative;
   max-width: 100vw;
 }
 @media (min-width: 638px) {
-  ._PuckHeader_63pti_1 {
+  ._PuckHeader_c2nei_1 {
     padding-left: 67px;
   }
-  ._PuckHeader--hidePlugins_63pti_15 {
+  ._PuckHeader--hidePlugins_c2nei_21 {
     padding-left: 0;
   }
 }
-._PuckHeader-inner_63pti_20 {
+._PuckHeader-inner_c2nei_26 {
   align-items: end;
   display: grid;
-  gap: var(--puck-space-px);
+  gap: var(--puck-space-chrome-gutter);
   grid-template-areas: "left middle right";
   grid-template-columns: 1fr auto 1fr;
   grid-template-rows: auto;
-  padding: var(--puck-space-px);
+  padding: var(--puck-space-chrome-gutter);
 }
 @media (min-width: 638px) {
-  ._PuckHeader-inner_63pti_20 {
-    border-left: 1px solid var(--puck-color-grey-09);
+  ._PuckHeader-inner_c2nei_26 {
+    border-left: var(--puck-border-width-regular) solid var(--puck-color-border);
   }
-  ._PuckHeader--hidePlugins_63pti_15 ._PuckHeader-inner_63pti_20 {
+  ._PuckHeader--hidePlugins_c2nei_21 ._PuckHeader-inner_c2nei_26 {
     border-left: none;
   }
 }
-._PuckHeader-toggle_63pti_40 {
-  color: var(--puck-color-grey-05);
+._PuckHeader-toggle_c2nei_46 {
   display: flex;
-  margin-inline-start: -4px;
+  margin-inline-start: calc(var(--puck-space-1) * -1);
   padding-top: 2px;
 }
-._PuckHeader--rightSideBarVisible_63pti_47 ._PuckHeader-rightSideBarToggle_63pti_47,
-._PuckHeader--leftSideBarVisible_63pti_48 ._PuckHeader-leftSideBarToggle_63pti_48 {
-  color: var(--puck-color-black);
-}
-._PuckHeader-rightSideBarToggle_63pti_47,
-._PuckHeader-leftSideBarToggle_63pti_48 {
+._PuckHeader-rightSideBarToggle_c2nei_52,
+._PuckHeader-leftSideBarToggle_c2nei_53 {
   display: none;
 }
 @media (min-width: 638px) {
-  ._PuckHeader-rightSideBarToggle_63pti_47,
-  ._PuckHeader-leftSideBarToggle_63pti_48 {
+  ._PuckHeader-rightSideBarToggle_c2nei_52,
+  ._PuckHeader-leftSideBarToggle_c2nei_53 {
     display: block;
   }
 }
-._PuckHeader-title_63pti_64 {
+._PuckHeader-title_c2nei_64 {
   align-self: center;
 }
-._PuckHeader-path_63pti_68 {
+._PuckHeader-path_c2nei_68 {
   font-family: var(--puck-font-family-monospaced);
   font-size: var(--puck-font-size-xxs);
   font-weight: normal;
   word-break: break-all;
 }
-._PuckHeader-tools_63pti_75 {
+._PuckHeader-tools_c2nei_75 {
   display: flex;
-  gap: 16px;
+  gap: var(--puck-space-4);
   justify-content: flex-end;
 }
-._PuckHeader-menuButton_63pti_81 {
-  color: var(--puck-color-grey-05);
-  margin-inline-start: -4px;
+._PuckHeader-menuButton_c2nei_81 {
+  color: var(--puck-color-text-muted);
+  margin-inline-start: calc(var(--puck-space-1) * -1);
 }
-._PuckHeader--menuOpen_63pti_86 ._PuckHeader-menuButton_63pti_81 {
-  color: var(--puck-color-black);
+._PuckHeader--menuOpen_c2nei_86 ._PuckHeader-menuButton_c2nei_81 {
+  color: var(--puck-color-text);
 }
 @media (min-width: 638px) {
-  ._PuckHeader-menuButton_63pti_81 {
+  ._PuckHeader-menuButton_c2nei_81 {
     display: none;
   }
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
-._SidebarSection_5otpt_1 {
+._SidebarSection_1uv88_1 {
   display: flex;
   position: relative;
   flex-direction: column;
-  color: var(--puck-color-black);
+  color: var(--puck-color-text);
 }
-._SidebarSection_5otpt_1:last-of-type {
+._SidebarSection_1uv88_1:last-of-type {
   flex-grow: 1;
 }
-._SidebarSection-title_5otpt_12 {
-  background: var(--puck-color-white);
-  padding: 16px;
-  border-bottom: 1px solid var(--puck-color-grey-09);
-  border-top: 1px solid var(--puck-color-grey-09);
+._SidebarSection-title_1uv88_12 {
+  background: var(--_puck-sidebar-section-color-bg, var(--puck-color-surface));
+  padding: var(--puck-space-4);
+  border-bottom: var(--puck-border-width-regular) solid var(--puck-color-border);
+  border-top: var(--puck-border-width-regular) solid var(--puck-color-border);
   overflow-x: auto;
 }
-._SidebarSection--noBorderTop_5otpt_20 > ._SidebarSection-title_5otpt_12 {
+._SidebarSection--noBorderTop_1uv88_20 > ._SidebarSection-title_1uv88_12 {
   border-top: 0px;
 }
-._SidebarSection-content_5otpt_24:last-child {
-  padding-bottom: 4px;
+._SidebarSection-content_1uv88_24:last-child {
+  padding-bottom: var(--puck-space-1);
 }
-._SidebarSection_5otpt_1:last-of-type ._SidebarSection-content_5otpt_24 {
+._SidebarSection_1uv88_1:last-of-type ._SidebarSection-content_1uv88_24 {
   border-bottom: none;
   flex-grow: 1;
 }
-._SidebarSection-breadcrumbLabel_5otpt_33 {
+._SidebarSection-breadcrumbLabel_1uv88_33 {
   background: none;
   border: 0;
-  border-radius: 2px;
-  color: var(--puck-color-azure-04);
+  border-radius: var(--puck-radius-xs);
+  color: var(--puck-color-interactive);
   cursor: pointer;
   font: inherit;
   flex-shrink: 0;
   padding: 0;
-  transition: color 50ms ease-in;
+  transition: color var(--puck-duration-fast) var(--puck-ease-exit);
 }
-._SidebarSection-breadcrumbLabel_5otpt_33:focus-visible {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: 2px;
+._SidebarSection-breadcrumbLabel_1uv88_33:focus-visible {
+  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
+  outline-offset: var(--puck-border-width-focus);
 }
 @media (hover: hover) and (pointer: fine) {
-  ._SidebarSection-breadcrumbLabel_5otpt_33:hover {
-    color: var(--puck-color-azure-03);
+  ._SidebarSection-breadcrumbLabel_1uv88_33:hover {
+    color: var(--puck-color-interactive-hover);
     transition: none;
   }
 }
-._SidebarSection-breadcrumbLabel_5otpt_33:active {
-  color: var(--puck-color-azure-02);
+._SidebarSection-breadcrumbLabel_1uv88_33:active {
+  color: var(--puck-color-interactive-active);
   transition: none;
 }
-._SidebarSection-breadcrumbs_5otpt_62 {
+._SidebarSection-breadcrumbs_1uv88_62 {
   align-items: center;
   display: flex;
-  gap: 4px;
+  gap: var(--puck-space-1);
 }
-._SidebarSection-breadcrumb_5otpt_33 {
+._SidebarSection-breadcrumb_1uv88_33 {
   align-items: center;
   display: flex;
-  gap: 4px;
+  gap: var(--puck-space-1);
 }
-._SidebarSection-heading_5otpt_74 {
-  padding-inline-end: 16px;
+._SidebarSection-heading_1uv88_74 {
+  padding-inline-end: var(--puck-space-4);
 }
-._SidebarSection-loadingOverlay_5otpt_78 {
-  background: var(--puck-color-white);
+._SidebarSection-loadingOverlay_1uv88_78 {
+  background: var(--puck-color-surface);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -2181,82 +2292,78 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Breadcrumbs/styles.module.css/#css-module-data */
-._Breadcrumbs_1c9yh_1 {
+._Breadcrumbs_8c6w5_1 {
   align-items: center;
   display: flex;
-  gap: 4px;
+  gap: var(--puck-space-1);
 }
-._Breadcrumbs-breadcrumbLabel_1c9yh_7 {
+._Breadcrumbs-breadcrumbLabel_8c6w5_7 {
   background: none;
   border: 0;
-  border-radius: 2px;
-  color: var(--puck-color-azure-04);
+  border-radius: var(--puck-radius-xs);
+  color: var(--puck-color-interactive);
   cursor: pointer;
   font: inherit;
   flex-shrink: 0;
   padding: 0;
-  transition: color 50ms ease-in;
+  transition: color var(--puck-duration-fast) var(--puck-ease-exit);
 }
-._Breadcrumbs-breadcrumbLabel_1c9yh_7:focus-visible {
-  outline: 2px solid var(--puck-color-azure-05);
-  outline-offset: 2px;
+._Breadcrumbs-breadcrumbLabel_8c6w5_7:focus-visible {
+  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
+  outline-offset: var(--puck-border-width-focus);
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Breadcrumbs-breadcrumbLabel_1c9yh_7:hover {
-    color: var(--puck-color-azure-03);
+  ._Breadcrumbs-breadcrumbLabel_8c6w5_7:hover {
+    color: var(--puck-color-interactive-hover);
     transition: none;
   }
 }
-._Breadcrumbs-breadcrumbLabel_1c9yh_7:active {
-  color: var(--puck-color-azure-02);
+._Breadcrumbs-breadcrumbLabel_8c6w5_7:active {
+  color: var(--puck-color-interactive-active);
   transition: none;
 }
-._Breadcrumbs-breadcrumb_1c9yh_7 {
+._Breadcrumbs-breadcrumb_8c6w5_7 {
   align-items: center;
   display: flex;
-  gap: 4px;
+  gap: var(--puck-space-1);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
-._ViewportControls_e3unb_1 {
+._ViewportControls_v26yb_1 {
   position: relative;
 }
-._ViewportControls--fullScreen_e3unb_5 {
+._ViewportControls--fullScreen_v26yb_5 {
   border-radius: 32px;
   display: flex;
   position: absolute;
-  bottom: 12px;
-  right: 12px;
+  bottom: var(--puck-space-3);
+  right: var(--puck-space-3);
   overflow: hidden;
 }
-._ViewportControls-toggleButton_e3unb_14 {
+._ViewportControls-toggleButton_v26yb_14 {
   display: none;
 }
-._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-toggleButton_e3unb_14 {
+._ViewportControls--fullScreen_v26yb_5 ._ViewportControls-toggleButton_v26yb_14 {
   align-items: center;
-  background-color: var(--puck-color-grey-02);
-  border: 1px solid var(--puck-color-grey-04);
-  border-radius: 30px;
+  background-color: var(--puck-color-surface-inverse);
+  border: var(--puck-border-width-regular) solid var(--puck-color-border-inverse);
+  border-radius: var(--puck-radius-pill);
   cursor: pointer;
-  color: var(--puck-color-grey-11);
+  color: var(--puck-color-text-inverse);
   display: flex;
   justify-content: center;
   width: 42px;
   height: 42px;
   z-index: 1;
 }
-._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-toggleButton_e3unb_14:hover {
-  background-color: var(--puck-color-grey-02);
-  border: 1px solid var(--puck-color-azure-04);
-  color: var(--puck-color-azure-07);
-}
-._ViewportControls--isExpanded_e3unb_38 ._ViewportControls-toggleButton_e3unb_14 {
-  background-color: var(--puck-color-grey-03);
+._ViewportControls--fullScreen_v26yb_5 ._ViewportControls-toggleButton_v26yb_14:hover {
+  color: var(--puck-color-interactive-inverse-hover);
+  border: var(--puck-border-width-regular) solid var(--puck-color-interactive-inverse-hover);
 }
-._ViewportControls-actions_e3unb_42 {
+._ViewportControls-actions_v26yb_39 {
   display: flex;
 }
-._ViewportControls-actionsInner_e3unb_46 {
+._ViewportControls-actionsInner_v26yb_43 {
   display: flex;
   box-sizing: border-box;
   justify-content: center;
@@ -2265,91 +2372,93 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
   z-index: 0;
   overflow: hidden;
 }
-._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-actionsInner_e3unb_46 {
-  background: var(--puck-color-grey-11);
-  border: 1px solid var(--puck-color-grey-09);
-  border-radius: 30px;
+._ViewportControls--fullScreen_v26yb_5 ._ViewportControls-actionsInner_v26yb_43 {
+  background: var(--puck-color-surface-muted);
+  border: var(--puck-border-width-regular) solid var(--puck-color-border);
+  border-radius: var(--puck-radius-pill);
   margin-left: none;
   margin-right: none;
   padding-right: 42px;
 }
-._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-actionsInner_e3unb_46 {
+._ViewportControls--fullScreen_v26yb_5 ._ViewportControls-actionsInner_v26yb_43 {
   transform: translateX(100%);
-  transition: transform 150ms ease-in-out;
+  transition: transform var(--puck-duration-medium) var(--puck-ease-emphasized);
 }
-._ViewportControls--fullScreen_e3unb_5._ViewportControls--isExpanded_e3unb_38 ._ViewportControls-actionsInner_e3unb_46 {
+._ViewportControls--fullScreen_v26yb_5._ViewportControls--isExpanded_v26yb_67 ._ViewportControls-actionsInner_v26yb_43 {
   transform: translateX(42px);
 }
-._ViewportControls-divider_e3unb_75 {
-  border-inline-end: 1px solid var(--puck-color-grey-09);
-  margin-bottom: 8px;
-  margin-top: 8px;
+._ViewportControls-divider_v26yb_72 {
+  border-inline-end: var(--puck-border-width-regular) solid var(--puck-color-border);
+  margin-bottom: var(--puck-space-2);
+  margin-top: var(--puck-space-2);
 }
-._ViewportControls-zoomSelect_e3unb_81 {
+._ViewportControls-zoomSelect_v26yb_79 {
   appearance: none;
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
   background-size: 10px;
+  color: currentColor;
   background-position: calc(100% - 12px) calc(50% + 3px);
   background-repeat: no-repeat;
   border: 0;
   font-size: var(--puck-font-size-xxxs);
   padding: 0;
-  padding-left: 8px;
+  padding-left: var(--puck-space-2);
   width: 96px;
 }
-._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-zoom_e3unb_81 {
+._ViewportControls--fullScreen_v26yb_5 ._ViewportControls-zoom_v26yb_79 {
   display: none;
 }
 @media (min-width: 638px) {
-  ._ViewportControls-zoom_e3unb_81,
-  ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-zoom_e3unb_81 {
+  ._ViewportControls-zoom_v26yb_79,
+  ._ViewportControls--fullScreen_v26yb_5 ._ViewportControls-zoom_v26yb_79 {
     display: flex;
     justify-content: center;
   }
 }
-._ViewportControls-zoomSelect_e3unb_81:dir(rtl) {
+._ViewportControls-zoomSelect_v26yb_79:dir(rtl) {
   background-position: 12px calc(50% + 3px);
 }
-._ViewportButton-inner_e3unb_111 {
+._ViewportButton-inner_v26yb_110 {
   align-items: center;
   display: flex;
   justify-content: center;
   height: 32px;
   width: 32px;
 }
-._ViewportButton--isActive_e3unb_119 ._ViewportButton-inner_e3unb_111 {
-  color: var(--puck-color-azure-04);
+._ViewportButton--isActive_v26yb_118 ._ViewportButton-inner_v26yb_110 {
+  color: var(--puck-color-interactive);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
-._PuckCanvas_t6s9b_1 {
-  background: var(--puck-color-grey-11);
+._PuckCanvas_zw9iy_1 {
+  color: var(--puck-canvas-color-text, var(--puck-color-text));
+  background: var(--puck-canvas-color-bg, var(--puck-color-surface-muted));
   display: flex;
   grid-area: editor;
   flex-direction: column;
-  padding: var(--puck-space-px);
+  padding: var(--puck-space-chrome-gutter);
   position: relative;
   overflow: auto;
 }
 @media (min-width: 1198px) {
-  ._PuckCanvas_t6s9b_1 {
-    padding: calc(var(--puck-space-px) * 1.5);
-    padding-top: calc(var(--puck-space-px) * 0.5);
+  ._PuckCanvas_zw9iy_1 {
+    padding: calc(var(--puck-space-chrome-gutter) * 1.5);
+    padding-top: calc(var(--puck-space-chrome-gutter) * 0.5);
   }
-  ._PuckCanvas_t6s9b_1:not(._PuckCanvas_t6s9b_1:has(._PuckCanvas-controls_t6s9b_17)) {
-    padding-top: calc(var(--puck-space-px) * 1.5);
+  ._PuckCanvas_zw9iy_1:not(._PuckCanvas_zw9iy_1:has(._PuckCanvas-controls_zw9iy_18)) {
+    padding-top: calc(var(--puck-space-chrome-gutter) * 1.5);
   }
 }
-._PuckCanvas--fullScreen_t6s9b_22 {
+._PuckCanvas--fullScreen_zw9iy_23 {
   padding: 0;
   overflow: hidden;
 }
 @media (min-width: 1198px) {
-  ._PuckCanvas--fullScreen_t6s9b_22 {
+  ._PuckCanvas--fullScreen_zw9iy_23 {
     padding: 0;
   }
 }
-._PuckCanvas-inner_t6s9b_33 {
+._PuckCanvas-inner_zw9iy_34 {
   display: flex;
   height: 100%;
   justify-content: center;
@@ -2357,9 +2466,9 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
   position: relative;
   width: 100%;
 }
-._PuckCanvas-root_t6s9b_42 {
-  background: white;
-  outline: 1px solid var(--puck-color-grey-09);
+._PuckCanvas-root_zw9iy_43 {
+  background: var(--puck-canvas-preview-color-bg, var(--puck-color-surface));
+  outline: var(--puck-border-width-regular) solid var(--puck-color-border);
   box-sizing: content-box;
   min-width: 321px;
   position: absolute;
@@ -2370,40 +2479,41 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
   opacity: 0;
 }
 @media (min-width: 1198px) {
-  ._PuckCanvas-root_t6s9b_42 {
+  ._PuckCanvas-root_zw9iy_43 {
     min-width: unset;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  ._PuckCanvas-root_t6s9b_42 {
+  ._PuckCanvas-root_zw9iy_43 {
     transition: none !important;
   }
 }
-._PuckCanvas--ready_t6s9b_67 ._PuckCanvas-root_t6s9b_42 {
+._PuckCanvas--ready_zw9iy_68 ._PuckCanvas-root_zw9iy_43 {
   pointer-events: unset;
   opacity: 1;
 }
-._PuckCanvas-loader_t6s9b_72 {
+._PuckCanvas-loader_zw9iy_73 {
   align-items: center;
-  color: var(--puck-color-grey-06);
+  color: var(--puck-color-text-subtle);
   display: flex;
   height: 100%;
   justify-content: center;
-  transition: opacity 250ms ease-out;
+  transition: opacity var(--puck-duration-slow) var(--puck-ease-entrance);
   opacity: 0;
+  pointer-events: none;
 }
-._PuckCanvas--showLoader_t6s9b_82 ._PuckCanvas-loader_t6s9b_72 {
+._PuckCanvas--showLoader_zw9iy_84 ._PuckCanvas-loader_zw9iy_73 {
   opacity: 1;
 }
-._PuckCanvas--showLoader_t6s9b_82._PuckCanvas--ready_t6s9b_67 ._PuckCanvas-loader_t6s9b_72 {
+._PuckCanvas--showLoader_zw9iy_84._PuckCanvas--ready_zw9iy_68 ._PuckCanvas-loader_zw9iy_73 {
   opacity: 0;
   height: 0;
   transition: none;
 }
-._PuckCanvas-controls_t6s9b_17 {
-  padding-bottom: calc(var(--puck-space-px) * 0.5);
+._PuckCanvas-controls_zw9iy_18 {
+  padding-bottom: calc(var(--puck-space-chrome-gutter) * 0.5);
 }
-._PuckCanvas--fullScreen_t6s9b_22 ._PuckCanvas-controls_t6s9b_17 {
+._PuckCanvas--fullScreen_zw9iy_23 ._PuckCanvas-controls_zw9iy_18 {
   padding-bottom: 0;
   z-index: 1;
 }
@@ -2442,198 +2552,204 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css/#css-module-data */
-._Sidebar_o396p_1 {
-  border-block-start: 1px solid var(--puck-color-grey-09);
+._Sidebar_16oed_1 {
+  border-block-start: var(--puck-border-width-regular) solid var(--puck-color-border);
   position: relative;
   display: none;
   flex-direction: column;
   overflow-y: auto;
 }
-._Sidebar--isVisible_o396p_9 {
+._Sidebar--isVisible_16oed_10 {
   display: flex;
 }
-._Sidebar--left_o396p_13 {
-  background: var(--puck-color-grey-12);
+._Sidebar--left_16oed_14 {
+  --_puck-sidebar-section-color-bg: var( --puck-sidebar-left-color-bg, var(--puck-color-surface) );
+  background: var( --puck-sidebar-left-color-bg, var(--puck-color-surface-subtle) );
   grid-area: left;
 }
 @media (min-width: 766px) {
-  ._Sidebar--left_o396p_13 {
+  ._Sidebar--left_16oed_14 {
     border-block-start: 0;
-    border-inline-end: 1px solid var(--puck-color-grey-09);
+    border-inline-end: var(--puck-border-width-regular) solid var(--puck-color-border);
   }
 }
-._Sidebar--right_o396p_25 {
-  background: var(--puck-color-white);
+._Sidebar--right_16oed_34 {
+  --_puck-sidebar-section-color-bg: var( --puck-sidebar-right-color-bg, var(--puck-color-surface) );
+  background: var(--puck-sidebar-right-color-bg, var(--puck-color-surface));
   grid-area: right;
 }
 @media (min-width: 766px) {
-  ._Sidebar--right_o396p_25 {
+  ._Sidebar--right_16oed_34 {
     border-block-start: 0;
-    border-inline-start: 1px solid var(--puck-color-grey-09);
+    border-inline-start: var(--puck-border-width-regular) solid var(--puck-color-border);
   }
 }
-._Sidebar-resizeHandle_o396p_37 {
+._Sidebar-resizeHandle_16oed_51 {
   position: absolute;
   height: 100%;
 }
-._Sidebar--left_o396p_13 + ._Sidebar-resizeHandle_o396p_37 {
+._Sidebar--left_16oed_14 + ._Sidebar-resizeHandle_16oed_51 {
   grid-area: left;
   justify-self: end;
 }
-._Sidebar--right_o396p_25 + ._Sidebar-resizeHandle_o396p_37 {
+._Sidebar--right_16oed_34 + ._Sidebar-resizeHandle_16oed_51 {
   grid-area: right;
   justify-self: start;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Nav/styles.module.css/#css-module-data */
-._Nav_1tvxq_1 {
+._Nav_vll2r_1 {
   display: flex;
 }
-._Nav-list_1tvxq_5 {
+._Nav-list_vll2r_5 {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
   overflow-x: auto;
-  gap: 8px;
+  gap: var(--puck-space-2);
 }
 @media (min-width: 638px) {
-  ._Nav-list_1tvxq_5 {
+  ._Nav-list_vll2r_5 {
     padding-top: 32px;
     flex-direction: column;
-    gap: 16px;
+    gap: var(--puck-space-4);
     width: 100%;
   }
 }
-._Nav-mobileActions_1tvxq_23 {
+._Nav-mobileActions_vll2r_23 {
   align-items: center;
   display: flex;
   justify-content: center;
   margin-inline-start: auto;
-  padding: 4px 16px;
-  border-inline-start: 1px solid var(--puck-color-grey-09);
+  padding: var(--puck-space-1) var(--puck-space-4);
+  border-inline-start: var(--puck-border-width-regular) solid var(--puck-color-border);
 }
 @media (min-width: 638px) {
-  ._Nav-mobileActions_1tvxq_23 {
+  ._Nav-mobileActions_vll2r_23 {
     display: none;
   }
 }
-._NavItem-link_1tvxq_38 {
+._NavItem-link_vll2r_39 {
   text-align: center;
   align-items: center;
-  color: var(--puck-color-grey-03);
+  color: var(--puck-pluginbar-color-text, var(--puck-color-text-secondary));
   display: flex;
-  gap: 8px;
+  gap: var(--puck-space-2);
   text-decoration: none;
   cursor: pointer;
-  border-radius: 4px;
-  padding: 8px 4px;
+  border-radius: var(--puck-radius-m);
+  padding: var(--puck-space-2) var(--puck-space-1);
   width: 64px;
   box-sizing: border-box;
 }
 @media (min-width: 638px) {
-  ._NavItem-link_1tvxq_38 {
+  ._NavItem-link_vll2r_39 {
     width: auto;
   }
 }
-._NavItem_1tvxq_38:first-of-type {
-  padding-left: 16px;
+._NavItem_vll2r_39:first-of-type {
+  padding-left: var(--puck-space-4);
 }
-._NavItem_1tvxq_38:last-of-type {
-  padding-right: 16px;
+._NavItem_vll2r_39:last-of-type {
+  padding-right: var(--puck-space-4);
 }
 @media (min-width: 638px) {
-  ._NavItem_1tvxq_38:first-of-type,
-  ._NavItem_1tvxq_38:last-of-type {
+  ._NavItem_vll2r_39:first-of-type,
+  ._NavItem_vll2r_39:last-of-type {
     padding: 0;
   }
 }
-._NavItem-link_1tvxq_38 {
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-radius: 0;
+._NavItem-link_vll2r_39 {
+  border-top: var(--puck-border-width-strong) solid transparent;
+  border-bottom: var(--puck-border-width-strong) solid transparent;
+  border-radius: var(--puck-radius-none);
   flex-direction: column;
-  font-size: var(--puck-font-size-xxxs);
+  font-size: var(--puck-pluginbar-font-size, var(--puck-font-size-xxxs));
 }
 @media (min-width: 638px) {
-  ._NavItem-link_1tvxq_38 {
+  ._NavItem-link_vll2r_39 {
     border: 0;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
+    border-left: var(--puck-border-width-strong) solid transparent;
+    border-right: var(--puck-border-width-strong) solid transparent;
   }
 }
-._NavItem-linkIcon_1tvxq_89 {
-  height: 24px;
-  width: 24px;
+._NavItem-linkIcon_vll2r_90 {
+  height: 2em;
+  width: 2em;
+}
+._NavItem-linkIcon_vll2r_90 svg {
+  height: 100%;
+  width: 100%;
 }
-._NavItem--active_1tvxq_94 > ._NavItem-link_1tvxq_38 {
-  background-color: var(--puck-color-azure-10);
-  color: var(--puck-color-azure-04);
-  font-weight: 600;
+._NavItem--active_vll2r_100 > ._NavItem-link_vll2r_39 {
+  background-color: var(--puck-color-interactive-subtle);
+  color: var( --puck-pluginbar-color-text-selected, var(--puck-color-interactive) );
+  font-weight: var(--puck-font-weight-semibold);
 }
-._NavItem--active_1tvxq_94 > ._NavItem-link_1tvxq_38 {
+._NavItem--active_vll2r_100 > ._NavItem-link_vll2r_39 {
   background-color: transparent;
-  border-top-color: var(--puck-color-azure-04);
+  border-top-color: var(--puck-color-interactive);
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  font-weight: 600;
+  font-weight: var(--puck-font-weight-semibold);
 }
 @media (min-width: 638px) {
-  ._NavItem--active_1tvxq_94 > ._NavItem-link_1tvxq_38 {
+  ._NavItem--active_vll2r_100 > ._NavItem-link_vll2r_39 {
     border-top-color: transparent;
-    border-right-color: var(--puck-color-azure-04);
+    border-right-color: var( --puck-pluginbar-color-text-selected, var(--puck-color-interactive) );
   }
 }
-._NavItem_1tvxq_38:not(._NavItem--active_1tvxq_94) > ._NavItem-link_1tvxq_38:hover {
-  background-color: var(--puck-color-azure-11);
-  color: var(--puck-color-azure-04);
+._NavItem_vll2r_39:not(._NavItem--active_vll2r_100) > ._NavItem-link_vll2r_39:hover {
+  background-color: var( --puck-pluginbar-color-bg-hover, var(--puck-color-interactive-soft) );
+  color: var(--puck-pluginbar-color-text-hover, var(--puck-color-interactive));
 }
 @media (min-width: 638px) {
-  ._NavItem--mobileOnly_1tvxq_121 {
+  ._NavItem--mobileOnly_vll2r_136 {
     display: none;
   }
 }
-._NavItem--desktopOnly_1tvxq_126 {
+._NavItem--desktopOnly_vll2r_141 {
   display: none;
 }
 @media (min-width: 638px) {
-  ._NavItem--desktopOnly_1tvxq_126 {
+  ._NavItem--desktopOnly_vll2r_141 {
     display: block;
   }
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/plugins/blocks/styles.module.css/#css-module-data */
-._BlocksPlugin_1ey1i_1 {
-  padding: 16px;
+._BlocksPlugin_9af19_1 {
+  padding: var(--puck-drawer-space, var(--puck-space-4));
   height: 100%;
   overflow-y: auto;
   box-sizing: border-box;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/plugins/outline/styles.module.css/#css-module-data */
-._OutlinePlugin_q92j6_1 {
-  padding: 16px;
+._OutlinePlugin_16k03_1 {
+  padding: var(--puck-space-4);
   height: 100%;
   overflow-y: auto;
   box-sizing: border-box;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/plugins/fields/styles.module.css/#css-module-data */
-._FieldsPlugin_nd930_1 {
-  background: white;
+._FieldsPlugin_18cj3_1 {
+  background: var(--puck-color-surface);
   height: 100%;
   overflow-y: auto;
 }
-._FieldsPlugin-header_nd930_7 {
-  border-bottom: 1px solid var(--puck-color-grey-09);
-  font-weight: 600;
-  padding-bottom: 8px;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 8px;
+._FieldsPlugin-header_18cj3_7 {
+  border-bottom: var(--puck-border-width-regular) solid var(--puck-color-border);
+  font-weight: var(--puck-font-weight-semibold);
+  padding-bottom: var(--puck-space-2);
+  padding-left: var(--puck-space-4);
+  padding-right: var(--puck-space-4);
+  padding-top: var(--puck-space-2);
 }
 @media (min-width: 638px) {
-  ._FieldsPlugin-header_nd930_7 {
-    padding: 16px;
+  ._FieldsPlugin-header_18cj3_7 {
+    padding: var(--puck-space-4);
   }
 }