@wordpress/boot 0.1.1-next.2f1c7c01b.0

package/build-style/style.css

@@ -0,0 +1,612 @@
+@charset "UTF-8";
+/* -------------------------------------------
+ *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+ * ------------------------------------------- */
+:root {
+  --wpds-border-radius-large: 8px; /* Large radius */
+  --wpds-border-radius-medium: 4px; /* Medium radius */
+  --wpds-border-radius-small: 2px; /* Small radius */
+  --wpds-border-radius-x-small: 1px; /* Extra small radius */
+  --wpds-border-width-focus: 2px; /* Border width for focus ring */
+  --wpds-color-bg-interactive-brand: #00000000; /* Background color for interactive elements with brand tone and normal emphasis. */
+  --wpds-color-bg-interactive-brand-active: var(
+  	--wpds-color-private-primary-surface2
+  ); /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-brand-disabled: var(
+  	--wpds-color-private-bg-surface5
+  ); /* Background color for interactive elements with brand tone and normal emphasis, in their disabled state. */
+  --wpds-color-bg-interactive-brand-strong: var(
+  	--wpds-color-private-primary-bg-fill1
+  ); /* Background color for interactive elements with brand tone and strong emphasis. */
+  --wpds-color-bg-interactive-brand-strong-active: var(
+  	--wpds-color-private-primary-bg-fill2
+  ); /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-brand-strong-disabled: var(
+  	--wpds-color-private-bg-surface6
+  ); /* Background color for interactive elements with brand tone and strong emphasis, in their disabled state. */
+  --wpds-color-bg-interactive-brand-weak: #00000000; /* Background color for interactive elements with brand tone and weak emphasis. */
+  --wpds-color-bg-interactive-brand-weak-active: var(
+  	--wpds-color-private-primary-surface4
+  ); /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-brand-weak-disabled: var(
+  	--wpds-color-private-bg-surface5
+  ); /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */
+  --wpds-color-bg-interactive-neutral: #00000000; /* Background color for interactive elements with neutral tone and normal emphasis. */
+  --wpds-color-bg-interactive-neutral-active: var(
+  	--wpds-color-private-bg-surface4
+  ); /* Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-neutral-disabled: var(
+  	--wpds-color-private-bg-surface5
+  ); /* Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
+  --wpds-color-bg-interactive-neutral-strong: var(
+  	--wpds-color-private-bg-bg-fill-inverted1
+  ); /* Background color for interactive elements with neutral tone and strong emphasis. */
+  --wpds-color-bg-interactive-neutral-strong-active: var(
+  	--wpds-color-private-bg-bg-fill-inverted2
+  ); /* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-neutral-strong-disabled: var(
+  	--wpds-color-private-bg-surface6
+  ); /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
+  --wpds-color-bg-interactive-neutral-weak: #00000000; /* Background color for interactive elements with neutral tone and weak emphasis. */
+  --wpds-color-bg-interactive-neutral-weak-active: var(
+  	--wpds-color-private-bg-surface4
+  ); /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-neutral-weak-disabled: var(
+  	--wpds-color-private-bg-surface5
+  ); /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
+  --wpds-color-bg-surface-brand: var(
+  	--wpds-color-private-primary-surface1
+  ); /* Background color for surfaces with brand tone and normal emphasis. */
+  --wpds-color-bg-surface-caution: var(
+  	--wpds-color-private-caution-surface4
+  ); /* Background color for surfaces with caution tone and normal emphasis. */
+  --wpds-color-bg-surface-caution-weak: var(
+  	--wpds-color-private-caution-surface2
+  ); /* Background color for surfaces with caution tone and weak emphasis. */
+  --wpds-color-bg-surface-error: var(
+  	--wpds-color-private-error-surface4
+  ); /* Background color for surfaces with error tone and normal emphasis. */
+  --wpds-color-bg-surface-error-weak: var(
+  	--wpds-color-private-error-surface2
+  ); /* Background color for surfaces with error tone and weak emphasis. */
+  --wpds-color-bg-surface-info: var(
+  	--wpds-color-private-info-surface4
+  ); /* Background color for surfaces with info tone and normal emphasis. */
+  --wpds-color-bg-surface-info-weak: var(
+  	--wpds-color-private-info-surface2
+  ); /* Background color for surfaces with info tone and weak emphasis. */
+  --wpds-color-bg-surface-neutral: var(
+  	--wpds-color-private-bg-surface2
+  ); /* Background color for surfaces with normal emphasis. */
+  --wpds-color-bg-surface-neutral-strong: var(
+  	--wpds-color-private-bg-surface3
+  ); /* Background color for surfaces with strong emphasis. */
+  --wpds-color-bg-surface-neutral-weak: var(
+  	--wpds-color-private-bg-surface1
+  ); /* Background color for surfaces with weak emphasis. */
+  --wpds-color-bg-surface-success: var(
+  	--wpds-color-private-success-surface4
+  ); /* Background color for surfaces with success tone and normal emphasis. */
+  --wpds-color-bg-surface-success-weak: var(
+  	--wpds-color-private-success-surface2
+  ); /* Background color for surfaces with success tone and weak emphasis. */
+  --wpds-color-bg-surface-warning: var(
+  	--wpds-color-private-warning-surface4
+  ); /* Background color for surfaces with warning tone and normal emphasis. */
+  --wpds-color-bg-surface-warning-weak: var(
+  	--wpds-color-private-warning-surface2
+  ); /* Background color for surfaces with warning tone and weak emphasis. */
+  --wpds-color-bg-thumb-brand: var(
+  	--wpds-color-private-primary-stroke3
+  ); /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */
+  --wpds-color-bg-thumb-brand-active: var(
+  	--wpds-color-private-primary-stroke3
+  ); /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. */
+  --wpds-color-bg-thumb-brand-disabled: var(
+  	--wpds-color-private-bg-stroke2
+  ); /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. */
+  --wpds-color-bg-thumb-neutral-weak: var(
+  	--wpds-color-private-bg-stroke3
+  ); /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */
+  --wpds-color-bg-thumb-neutral-weak-active: var(
+  	--wpds-color-private-bg-stroke4
+  ); /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active. */
+  --wpds-color-bg-track-neutral: var(
+  	--wpds-color-private-bg-stroke2
+  ); /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
+  --wpds-color-bg-track-neutral-weak: var(
+  	--wpds-color-private-bg-stroke1
+  ); /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
+  --wpds-color-fg-content-caution: var(
+  	--wpds-color-private-caution-fg-surface4
+  ); /* Foreground color for content like text with caution tone and normal emphasis. */
+  --wpds-color-fg-content-caution-weak: var(
+  	--wpds-color-private-caution-fg-surface3
+  ); /* Foreground color for content like text with caution tone and weak emphasis. */
+  --wpds-color-fg-content-error: var(
+  	--wpds-color-private-error-fg-surface4
+  ); /* Foreground color for content like text with error tone and normal emphasis. */
+  --wpds-color-fg-content-error-weak: var(
+  	--wpds-color-private-error-fg-surface3
+  ); /* Foreground color for content like text with error tone and weak emphasis. */
+  --wpds-color-fg-content-info: var(
+  	--wpds-color-private-info-fg-surface4
+  ); /* Foreground color for content like text with info tone and normal emphasis. */
+  --wpds-color-fg-content-info-weak: var(
+  	--wpds-color-private-info-fg-surface3
+  ); /* Foreground color for content like text with info tone and weak emphasis. */
+  --wpds-color-fg-content-neutral: var(
+  	--wpds-color-private-bg-fg-surface4
+  ); /* Foreground color for content like text with normal emphasis. */
+  --wpds-color-fg-content-neutral-weak: var(
+  	--wpds-color-private-bg-fg-surface3
+  ); /* Foreground color for content like text with weak emphasis. */
+  --wpds-color-fg-content-success: var(
+  	--wpds-color-private-success-fg-surface4
+  ); /* Foreground color for content like text with success tone and normal emphasis. */
+  --wpds-color-fg-content-success-weak: var(
+  	--wpds-color-private-success-fg-surface3
+  ); /* Foreground color for content like text with success tone and weak emphasis. */
+  --wpds-color-fg-content-warning: var(
+  	--wpds-color-private-warning-fg-surface4
+  ); /* Foreground color for content like text with warning tone and normal emphasis. */
+  --wpds-color-fg-content-warning-weak: var(
+  	--wpds-color-private-warning-fg-surface3
+  ); /* Foreground color for content like text with warning tone and weak emphasis. */
+  --wpds-color-fg-interactive-brand: var(
+  	--wpds-color-private-primary-fg-surface3
+  ); /* Foreground color for interactive elements with brand tone and normal emphasis. */
+  --wpds-color-fg-interactive-brand-active: var(
+  	--wpds-color-private-primary-fg-surface3
+  ); /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
+  --wpds-color-fg-interactive-brand-disabled: var(
+  	--wpds-color-private-bg-fg-surface2
+  ); /* Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. */
+  --wpds-color-fg-interactive-brand-strong: var(
+  	--wpds-color-private-primary-fg-fill
+  ); /* Foreground color for interactive elements with brand tone and strong emphasis. */
+  --wpds-color-fg-interactive-brand-strong-active: var(
+  	--wpds-color-private-primary-fg-fill
+  ); /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
+  --wpds-color-fg-interactive-brand-strong-disabled: var(
+  	--wpds-color-private-bg-fg-surface3
+  ); /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */
+  --wpds-color-fg-interactive-neutral: var(
+  	--wpds-color-private-bg-fg-surface4
+  ); /* Foreground color for interactive elements with neutral tone and normal emphasis. */
+  --wpds-color-fg-interactive-neutral-active: var(
+  	--wpds-color-private-bg-fg-surface4
+  ); /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
+  --wpds-color-fg-interactive-neutral-disabled: var(
+  	--wpds-color-private-bg-fg-surface2
+  ); /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
+  --wpds-color-fg-interactive-neutral-strong: var(
+  	--wpds-color-private-bg-fg-fill-inverted
+  ); /* Foreground color for interactive elements with neutral tone and strong emphasis. */
+  --wpds-color-fg-interactive-neutral-strong-active: var(
+  	--wpds-color-private-bg-fg-fill-inverted
+  ); /* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
+  --wpds-color-fg-interactive-neutral-strong-disabled: var(
+  	--wpds-color-private-bg-fg-surface3
+  ); /* Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
+  --wpds-color-fg-interactive-neutral-weak: var(
+  	--wpds-color-private-bg-fg-surface3
+  ); /* Foreground color for interactive elements with neutral tone and weak emphasis. */
+  --wpds-color-fg-interactive-neutral-weak-disabled: var(
+  	--wpds-color-private-bg-fg-surface2
+  ); /* Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
+  --wpds-color-private-bg-bg-fill-dark: #1e1e1e;
+  --wpds-color-private-bg-bg-fill-inverted1: #2f2f2f;
+  --wpds-color-private-bg-bg-fill-inverted2: #1e1e1e;
+  --wpds-color-private-bg-bg-fill1: #555555;
+  --wpds-color-private-bg-bg-fill2: #474747;
+  --wpds-color-private-bg-fg-fill: #f0f0f0;
+  --wpds-color-private-bg-fg-fill-dark: #f0f0f0;
+  --wpds-color-private-bg-fg-fill-inverted: #f0f0f0;
+  --wpds-color-private-bg-fg-surface1: #a9a9a9;
+  --wpds-color-private-bg-fg-surface2: #898989;
+  --wpds-color-private-bg-fg-surface3: #6d6d6d;
+  --wpds-color-private-bg-fg-surface4: #1e1e1e;
+  --wpds-color-private-bg-stroke1: #d0d0d0;
+  --wpds-color-private-bg-stroke2: #adadad;
+  --wpds-color-private-bg-stroke3: #898989;
+  --wpds-color-private-bg-stroke4: #6a6a6a;
+  --wpds-color-private-bg-surface1: #f0f0f0;
+  --wpds-color-private-bg-surface2: #f8f8f8;
+  --wpds-color-private-bg-surface3: #ffffff;
+  --wpds-color-private-bg-surface4: #eaeaea;
+  --wpds-color-private-bg-surface5: #dfdfdf;
+  --wpds-color-private-bg-surface6: #d0d0d0;
+  --wpds-color-private-caution-bg-fill-dark: #1f1e1b;
+  --wpds-color-private-caution-bg-fill-inverted1: #3d2d00;
+  --wpds-color-private-caution-bg-fill-inverted2: #1f1e1b;
+  --wpds-color-private-caution-bg-fill1: #f0d149;
+  --wpds-color-private-caution-bg-fill2: #dabb2b;
+  --wpds-color-private-caution-fg-fill: #1f1e1b;
+  --wpds-color-private-caution-fg-fill-dark: #f6f1da;
+  --wpds-color-private-caution-fg-fill-inverted: #f6f1da;
+  --wpds-color-private-caution-fg-surface1: #c6a800;
+  --wpds-color-private-caution-fg-surface2: #a58700;
+  --wpds-color-private-caution-fg-surface3: #866a00;
+  --wpds-color-private-caution-fg-surface4: #291d00;
+  --wpds-color-private-caution-stroke1: #b8ab76;
+  --wpds-color-private-caution-stroke2: #988d60;
+  --wpds-color-private-caution-stroke3: #866a00;
+  --wpds-color-private-caution-stroke4: #644e00;
+  --wpds-color-private-caution-surface1: #faf1cb;
+  --wpds-color-private-caution-surface2: #fdf9e7;
+  --wpds-color-private-caution-surface3: #ffffff;
+  --wpds-color-private-caution-surface4: #f8ebb6;
+  --wpds-color-private-caution-surface5: #f4e08c;
+  --wpds-color-private-caution-surface6: #e7d070;
+  --wpds-color-private-error-bg-fill-dark: #231c1b;
+  --wpds-color-private-error-bg-fill-inverted1: #6d0000;
+  --wpds-color-private-error-bg-fill-inverted2: #231c1b;
+  --wpds-color-private-error-bg-fill1: #cc1818;
+  --wpds-color-private-error-bg-fill2: #b90000;
+  --wpds-color-private-error-fg-fill: #f2efef;
+  --wpds-color-private-error-fg-fill-dark: #f2efef;
+  --wpds-color-private-error-fg-fill-inverted: #f2efef;
+  --wpds-color-private-error-fg-surface1: #ff8070;
+  --wpds-color-private-error-fg-surface2: #f64b40;
+  --wpds-color-private-error-fg-surface3: #cc1818;
+  --wpds-color-private-error-fg-surface4: #4a0000;
+  --wpds-color-private-error-stroke1: #dc9085;
+  --wpds-color-private-error-stroke2: #cd695d;
+  --wpds-color-private-error-stroke3: #cc1818;
+  --wpds-color-private-error-stroke4: #a40000;
+  --wpds-color-private-error-surface1: #fcecea;
+  --wpds-color-private-error-surface2: #fdf6f5;
+  --wpds-color-private-error-surface3: #ffffff;
+  --wpds-color-private-error-surface4: #fae6e2;
+  --wpds-color-private-error-surface5: #f8d8d3;
+  --wpds-color-private-error-surface6: #f5c5be;
+  --wpds-color-private-info-bg-fill-dark: #1b1e23;
+  --wpds-color-private-info-bg-fill-inverted1: #00297a;
+  --wpds-color-private-info-bg-fill-inverted2: #1b1e23;
+  --wpds-color-private-info-bg-fill1: #0090ff;
+  --wpds-color-private-info-bg-fill2: #007eec;
+  --wpds-color-private-info-fg-fill: #1b1e23;
+  --wpds-color-private-info-fg-fill-dark: #eff0f2;
+  --wpds-color-private-info-fg-fill-inverted: #eff0f2;
+  --wpds-color-private-info-fg-surface1: #4dafff;
+  --wpds-color-private-info-fg-surface2: #008bfa;
+  --wpds-color-private-info-fg-surface3: #006cd8;
+  --wpds-color-private-info-fg-surface4: #001758;
+  --wpds-color-private-info-stroke1: #8baed6;
+  --wpds-color-private-info-stroke2: #5e90c7;
+  --wpds-color-private-info-stroke3: #006cd8;
+  --wpds-color-private-info-stroke4: #004bb5;
+  --wpds-color-private-info-surface1: #e9f1fa;
+  --wpds-color-private-info-surface2: #f5f9fd;
+  --wpds-color-private-info-surface3: #ffffff;
+  --wpds-color-private-info-surface4: #e1ecf8;
+  --wpds-color-private-info-surface5: #d1e1f5;
+  --wpds-color-private-info-surface6: #bad3f0;
+  --wpds-color-private-primary-bg-fill-dark: #1b1e26;
+  --wpds-color-private-primary-bg-fill-inverted1: #1401a4;
+  --wpds-color-private-primary-bg-fill-inverted2: #1b1e26;
+  --wpds-color-private-primary-bg-fill1: #3858e9;
+  --wpds-color-private-primary-bg-fill2: #2c47d7;
+  --wpds-color-private-primary-fg-fill: #eff0f2;
+  --wpds-color-private-primary-fg-fill-dark: #eff0f2;
+  --wpds-color-private-primary-fg-fill-inverted: #eff0f2;
+  --wpds-color-private-primary-fg-surface1: #81a7ff;
+  --wpds-color-private-primary-fg-surface2: #5780ff;
+  --wpds-color-private-primary-fg-surface3: #3858e9;
+  --wpds-color-private-primary-fg-surface4: #080071;
+  --wpds-color-private-primary-stroke1: #92a4cf;
+  --wpds-color-private-primary-stroke2: #6f85c0;
+  --wpds-color-private-primary-stroke3: #3858e9;
+  --wpds-color-private-primary-stroke4: #2236c7;
+  --wpds-color-private-primary-surface1: #ecf0f9;
+  --wpds-color-private-primary-surface2: #f6f8fc;
+  --wpds-color-private-primary-surface3: #ffffff;
+  --wpds-color-private-primary-surface4: #e5eaf7;
+  --wpds-color-private-primary-surface5: #d8e0f3;
+  --wpds-color-private-primary-surface6: #c4d0ee;
+  --wpds-color-private-success-bg-fill-dark: #1b1f1c;
+  --wpds-color-private-success-bg-fill-inverted1: #003a00;
+  --wpds-color-private-success-bg-fill-inverted2: #1b1f1c;
+  --wpds-color-private-success-bg-fill1: #4ab866;
+  --wpds-color-private-success-bg-fill2: #34a554;
+  --wpds-color-private-success-fg-fill: #1b1f1c;
+  --wpds-color-private-success-fg-fill-dark: #edf2ed;
+  --wpds-color-private-success-fg-fill-inverted: #edf2ed;
+  --wpds-color-private-success-fg-surface1: #52bf6d;
+  --wpds-color-private-success-fg-surface2: #2a9e4d;
+  --wpds-color-private-success-fg-surface3: #008030;
+  --wpds-color-private-success-fg-surface4: #002b00;
+  --wpds-color-private-success-stroke1: #78ba84;
+  --wpds-color-private-success-stroke2: #62996c;
+  --wpds-color-private-success-stroke3: #008030;
+  --wpds-color-private-success-stroke4: #006113;
+  --wpds-color-private-success-surface1: #ddf8e0;
+  --wpds-color-private-success-surface2: #f0fcf2;
+  --wpds-color-private-success-surface3: #ffffff;
+  --wpds-color-private-success-surface4: #cdf5d3;
+  --wpds-color-private-success-surface5: #acf0b7;
+  --wpds-color-private-success-surface6: #7be792;
+  --wpds-color-private-warning-bg-fill-dark: #1f1e1b;
+  --wpds-color-private-warning-bg-fill-inverted1: #472900;
+  --wpds-color-private-warning-bg-fill-inverted2: #1f1e1b;
+  --wpds-color-private-warning-bg-fill1: #f0b849;
+  --wpds-color-private-warning-bg-fill2: #dba430;
+  --wpds-color-private-warning-fg-fill: #1f1e1b;
+  --wpds-color-private-warning-fg-fill-dark: #f3f0e9;
+  --wpds-color-private-warning-fg-fill-inverted: #f3f0e9;
+  --wpds-color-private-warning-fg-surface1: #d7a02b;
+  --wpds-color-private-warning-fg-surface2: #b58000;
+  --wpds-color-private-warning-fg-surface3: #966200;
+  --wpds-color-private-warning-fg-surface4: #2f1800;
+  --wpds-color-private-warning-stroke1: #c2a777;
+  --wpds-color-private-warning-stroke2: #a08961;
+  --wpds-color-private-warning-stroke3: #966200;
+  --wpds-color-private-warning-stroke4: #724700;
+  --wpds-color-private-warning-surface1: #faefdb;
+  --wpds-color-private-warning-surface2: #fdf7ee;
+  --wpds-color-private-warning-surface3: #ffffff;
+  --wpds-color-private-warning-surface4: #f8e9cd;
+  --wpds-color-private-warning-surface5: #f5ddb2;
+  --wpds-color-private-warning-surface6: #f0cb89;
+  --wpds-color-stroke-focus-brand: var(
+  	--wpds-color-private-primary-stroke3
+  ); /* Accessible stroke color applied to focus rings. */
+  --wpds-color-stroke-interactive-brand: var(
+  	--wpds-color-private-primary-stroke3
+  ); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
+  --wpds-color-stroke-interactive-brand-active: var(
+  	--wpds-color-private-primary-stroke4
+  ); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
+  --wpds-color-stroke-interactive-brand-disabled: var(
+  	--wpds-color-private-bg-stroke2
+  ); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */
+  --wpds-color-stroke-interactive-error-strong: var(
+  	--wpds-color-private-error-stroke3
+  ); /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
+  --wpds-color-stroke-interactive-neutral: var(
+  	--wpds-color-private-bg-stroke3
+  ); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
+  --wpds-color-stroke-interactive-neutral-active: var(
+  	--wpds-color-private-bg-stroke4
+  ); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
+  --wpds-color-stroke-interactive-neutral-disabled: var(
+  	--wpds-color-private-bg-stroke2
+  ); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */
+  --wpds-color-stroke-interactive-neutral-strong: var(
+  	--wpds-color-private-bg-stroke4
+  ); /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
+  --wpds-color-stroke-surface-brand: var(
+  	--wpds-color-private-primary-stroke1
+  ); /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-brand-strong: var(
+  	--wpds-color-private-primary-stroke3
+  ); /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
+  --wpds-color-stroke-surface-error: var(
+  	--wpds-color-private-error-stroke1
+  ); /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-error-strong: var(
+  	--wpds-color-private-error-stroke3
+  ); /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
+  --wpds-color-stroke-surface-info: var(
+  	--wpds-color-private-info-stroke1
+  ); /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-info-strong: var(
+  	--wpds-color-private-info-stroke3
+  ); /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
+  --wpds-color-stroke-surface-neutral: var(
+  	--wpds-color-private-bg-stroke2
+  ); /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-neutral-strong: var(
+  	--wpds-color-private-bg-stroke3
+  ); /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
+  --wpds-color-stroke-surface-neutral-weak: var(
+  	--wpds-color-private-bg-stroke1
+  ); /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
+  --wpds-color-stroke-surface-success: var(
+  	--wpds-color-private-success-stroke1
+  ); /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-success-strong: var(
+  	--wpds-color-private-success-stroke3
+  ); /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
+  --wpds-color-stroke-surface-warning: var(
+  	--wpds-color-private-warning-stroke1
+  ); /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-warning-strong: var(
+  	--wpds-color-private-warning-stroke3
+  ); /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
+  --wpds-elevation-large: 0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012,
+  	0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005; /* For components that confirm decisions or handle necessary interruptions. Example: Modals. */
+  --wpds-elevation-medium: 0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a,
+  	0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005; /* For components that offer additional actions. Example: Menus, Command Palette */
+  --wpds-elevation-small: 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a,
+  	0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005; /* For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar. */
+  --wpds-elevation-x-small: 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005,
+  	0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003; /* For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame. */
+  --wpds-font-family-body: -apple-system, system-ui, "Segoe UI", "Roboto",
+  	"Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; /* Body font family */
+  --wpds-font-family-heading: -apple-system, system-ui, "Segoe UI", "Roboto",
+  	"Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; /* Headings font family */
+  --wpds-font-family-mono: "Menlo", "Consolas", monaco, monospace; /* Monospace font family */
+  --wpds-font-line-height-2x-large: 40px; /* 2X large line height */
+  --wpds-font-line-height-large: 28px; /* Large line height */
+  --wpds-font-line-height-medium: 24px; /* Medium line height */
+  --wpds-font-line-height-small: 20px; /* Small line height */
+  --wpds-font-line-height-x-large: 32px; /* Extra large line height */
+  --wpds-font-line-height-x-small: 16px; /* Extra small line height */
+  --wpds-font-size-2x-large: 32px; /* 2X large font size */
+  --wpds-font-size-large: 15px; /* Large font size */
+  --wpds-font-size-medium: 13px; /* Medium font size */
+  --wpds-font-size-small: 12px; /* Small font size */
+  --wpds-font-size-x-large: 20px; /* Extra large font size */
+  --wpds-font-size-x-small: 11px; /* Extra small font size */
+  --wpds-spacing-05: 4px; /* Extra small spacing */
+  --wpds-spacing-10: 8px; /* Small spacing */
+  --wpds-spacing-15: 12px; /* Medium spacing */
+  --wpds-spacing-20: 16px; /* Large spacing */
+  --wpds-spacing-30: 24px; /* Extra large spacing */
+  --wpds-spacing-40: 32px; /* 2X large spacing */
+  --wpds-spacing-50: 40px; /* 3X large spacing */
+  --wpds-spacing-60: 48px; /* 4X large spacing */
+  --wpds-spacing-70: 56px; /* 5X large spacing */
+  --wpds-spacing-80: 64px; /* 6X large spacing */
+}
+
+@media (min-resolution: 192dpi) {
+  :root {
+    --wpds-border-width-focus: 1.5px; /* Border width for focus ring */
+  }
+}
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Typography
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+.admin-ui-page {
+  display: flex;
+  height: 100%;
+  background-color: #fff;
+  color: #2f2f2f;
+  position: relative;
+  z-index: 1;
+  flex-flow: column;
+  container: admin-ui-page/inline-size;
+}
+
+@media not (prefers-reduced-motion) {
+  .admin-ui-page {
+    transition: width ease-out 0.2s;
+  }
+}
+.admin-ui-page__header {
+  padding: 16px 48px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fff;
+  position: sticky;
+  top: 0;
+}
+
+@container (max-width: 430px) {
+  .admin-ui-page__header {
+    padding: 16px 24px;
+  }
+}
+.admin-ui-page__header-subtitle {
+  padding-block-end: 8px;
+  color: #757575;
+  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  margin: 0;
+}
+
+.admin-ui-page__content {
+  flex-grow: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.admin-ui-page__content.has-padding {
+  padding: 16px 20px;
+}
+
+@container (max-width: 430px) {
+  .admin-ui-page__content.has-padding {
+    padding: 16px 24px;
+  }
+}
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
+  width: auto;
+  padding: 0 8px;
+}
+
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
+  display: none;
+}
+
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
+  content: attr(aria-label);
+  font-size: 12px;
+}

package/build-types/components/app/index.d.ts

@@ -0,0 +1,6 @@
+import type { MenuItem, Route } from '../../store/types';
+export declare function init({ menuItems, routes, }: {
+    menuItems?: MenuItem[];
+    routes?: Route[];
+}): Promise<void>;
+//# sourceMappingURL=index.d.ts.map

package/build-types/components/app/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAQzD,wBAAsB,IAAI,CAAE,EAC3B,SAAS,EACT,MAAM,GACN,EAAE;IACF,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CACjB,iBAmBA"}

package/build-types/components/app/router.d.ts

@@ -0,0 +1,7 @@
+import type { Route } from '../../store/types';
+interface RouterProps {
+    routes: Route[];
+}
+export default function Router({ routes }: RouterProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=router.d.ts.map

package/build-types/components/app/router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../src/components/app/router.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,KAAK,EAAsB,MAAM,mBAAmB,CAAC;AAwInE,UAAU,WAAW;IACpB,MAAM,EAAE,KAAK,EAAE,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAE,EAAE,MAAM,EAAE,EAAE,WAAW,+BAgCtD"}

package/build-types/components/navigation/drilldown-item/index.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import type { IconType } from '../../../store/types';
+interface DrilldownItemProps {
+    /**
+     * Optional CSS class name.
+     */
+    className?: string;
+    /**
+     * Identifier of the navigation item.
+     */
+    id: string;
+    /**
+     * Icon to display with the navigation item.
+     */
+    icon?: IconType;
+    /**
+     * Whether to show placeholder icons for alignment.
+     */
+    shouldShowPlaceholder?: boolean;
+    /**
+     * Content to display inside the navigation item.
+     */
+    children: ReactNode;
+    /**
+     * Function to handle sidebar navigation when the item is clicked.
+     */
+    onNavigate: ({ id, direction, }: {
+        id?: string;
+        direction: 'forward' | 'backward';
+    }) => void;
+}
+export default function DrilldownItem({ className, id, icon, shouldShowPlaceholder, children, onNavigate, }: DrilldownItemProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build-types/components/navigation/drilldown-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/drilldown-item/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,UAAU,kBAAkB;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,EAAE,CAAE,EACb,EAAE,EACF,SAAS,GACT,EAAE;QACF,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC;KAClC,KAAM,IAAI,CAAC;CACZ;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAE,EACtC,SAAS,EACT,EAAE,EACF,IAAI,EACJ,qBAA4B,EAC5B,QAAQ,EACR,UAAU,GACV,EAAE,kBAAkB,+BAsBpB"}