@dmsi/wedgekit-react 0.0.550 → 0.0.552

package/src/index.css

@@ -1,800 +0,0 @@
-@import "tailwindcss" source("./");
-@source inline("{compact:,desktop:,}grid-cols-{1..12}");
-
-@theme static {
-  /* ── Breakpoints ────────────────────────── */
-  --breakpoint-sm: 320px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 1024px;
-  --breakpoint-xl: 1280px;
-  --breakpoint-2xl: 1536px;
-
-  --font-open-sans: "Open Sans", sans-serif;
-  --font-sans: var(--font-open-sans);
-
-  /* ── Disable Default Colors ────────────── */
-  --color-*: initial;
-
-  --color-white: #ffffff;
-
-  --color-transparent: transparent;
-
-  --radius-px: 1px;
-
-  /* ── Brand ─────────────────────────────── */
-  --color-brand-100: var(--color-brand-100-user-selected, #fcece6);
-  --color-brand-200: var(--color-brand-200-user-selected, #f0a98c);
-  --color-brand-300: var(--color-brand-300-user-selected, #e56937);
-  --color-brand-400: var(--color-brand-400-user-selected, #df4405);
-  --color-brand-500: var(--color-brand-500-user-selected, #9e3004);
-
-  /* ── Action ────────────────────────────── */
-  --color-action-000: var(--color-action-000-user-selected, #ffffff);
-  --color-action-100: var(--color-action-100-user-selected, #e7f2f9);
-  --color-action-200: var(--color-action-200-user-selected, #d0e5f4);
-  --color-action-300: var(--color-action-300-user-selected, #459ad4);
-  --color-action-400: var(--color-action-400-user-selected, #0077c8);
-  --color-action-500: var(--color-action-500-user-selected, #00365a);
-
-  /* ── Link ────────────────────────────── */
-  --color-link-000: var(
-    --color-link-000-user-selected,
-    var(--color-action-000)
-  );
-  --color-link-100: var(
-    --color-link-100-user-selected,
-    var(--color-action-100)
-  );
-  --color-link-200: var(
-    --color-link-200-user-selected,
-    var(--color-action-200)
-  );
-  --color-link-300: var(
-    --color-link-300-user-selected,
-    var(--color-action-300)
-  );
-  --color-link-400: var(
-    --color-link-400-user-selected,
-    var(--color-action-400)
-  );
-  --color-link-500: var(
-    --color-link-500-user-selected,
-    var(--color-action-500)
-  );
-
-  /* ── Neutral ───────────────────────────── */
-  --color-neutral-000: #ffffff;
-  --color-neutral-100: #f7f7f7;
-  --color-neutral-200: #ebebeb;
-  --color-neutral-300: #c1c1c1;
-  --color-neutral-400: #6b6d6d;
-  --color-neutral-450: #3a3a3a;
-  --color-neutral-500: #1d1e1e;
-  --color-neutral-600: #000000;
-
-  /* ── Success ───────────────────────────── */
-  --color-success-100: #eefbf6;
-  --color-success-200: #d7f7e9;
-  --color-success-300: #61e1aa;
-  --color-success-400: #27d68b;
-  --color-success-500: #126240;
-
-  /* ── Warning ───────────────────────────── */
-  --color-warning-100: #fcefd4;
-  --color-warning-200: #f9dfa9;
-  --color-warning-300: #f4c053;
-  --color-warning-400: #f0a913;
-  --color-warning-500: #91670c;
-
-  /* ── Critical ──────────────────────────── */
-  --color-critical-100: #fbedea;
-  --color-critical-200: #f0b7ad;
-  --color-critical-300: #dd5e48;
-  --color-critical-400: #cc391f;
-  --color-critical-500: #892615;
-
-  /* ── Teal ──────────────────────────────── */
-  --color-teal-400: #40c1ac;
-
-  /* ── Purple ────────────────────────────── */
-  --color-purple-400: #8d267a;
-
-  /* ── Orange ────────────────────────────── */
-  --color-orange-400: #cc391f;
-
-  /* ── Chart ─────────────────────────────── */
-  --color-chart-0: var(--color-action-400);
-  --color-chart-1: var(--color-brand-400);
-  --color-chart-2: var(--color-teal-400);
-  --color-chart-3: var(--color-warning-400);
-  --color-chart-4: var(--color-neutral-400);
-  --color-chart-5: var(--color-purple-400);
-  --color-chart-6: var(--color-orange-400);
-
-  /* ── Radius ────────────────────────────── */
-  --radius-base: 4px;
-
-  /* ── Shadows ───────────────────────────── */
-  --shadow-*: initial;
-  --shadow-2:
-    0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.12);
-  --shadow-4:
-    0px 0px 4px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
-  --shadow-16:
-    0px 0px 16px 0px rgba(0, 0, 0, 0.12), 0px 16px 16px 0px rgba(0, 0, 0, 0.12);
-  --shadow-nav-tab: 0px -4px 4px -4px rgba(0, 0, 0, 0.32) inset;
-
-  /* ── Decoration ────────────────────────── */
-
-  --color-decoration-underline: transparent;
-
-  /* ── Text ──────────────────────────────── */
-  --text-*: initial;
-  --text-display-1-desktop: 32px;
-  --text-display-1-mobile: 32px;
-  --text-display-1-desktop-compact: 32px;
-  --leading-display-1-desktop: 1.125;
-  --leading-display-1-mobile: 1.125;
-
-  --text-display-2-desktop: 28px;
-  --text-display-2-mobile: 28px;
-  --text-display-2-desktop-compact: 28px;
-  --leading-display-2-desktop: 1.143;
-  --leading-display-2-mobile: 1.143;
-
-  --text-heading-1-desktop: 24px;
-  --text-heading-1-mobile: 24px;
-  --text-heading-1-desktop-compact: 24px;
-  --leading-heading-1-desktop: 1.167;
-  --leading-heading-1-mobile: 1.167;
-
-  --text-heading-2-desktop: 20px;
-  --text-heading-2-mobile: 20px;
-  --text-heading-2-desktop-compact: 20px;
-  --leading-heading-2-desktop: 1.2;
-  --leading-heading-2-mobile: 1.2;
-
-  --text-heading-3-desktop: 16px;
-  --text-heading-3-mobile: 18px;
-  --text-heading-3-desktop-compact: 16px;
-  --leading-heading-3-desktop: 1.25;
-  --leading-heading-3-mobile: 1.25;
-
-  --text-subheader-desktop: 14px;
-  --text-subheader-mobile: 16px;
-  --text-subheader-desktop-compact: 14px;
-  --leading-subheader-desktop: 1.286;
-  --leading-subheader-mobile: 1.286;
-
-  --text-link-desktop: 14px;
-  --text-link-mobile: 16px;
-  --text-link-desktop-compact: 14px;
-  --leading-link-desktop: 1.286;
-  --leading-link-mobile: 1.286;
-
-  --text-label-desktop: 14px;
-  --text-label-mobile: 16px;
-  --text-label-desktop-compact: 14px;
-  --leading-label-desktop: 1;
-  --leading-label-mobile: 1;
-
-  --text-paragraph-desktop: 14px;
-  --text-paragraph-mobile: 16px;
-  --text-paragraph-desktop-compact: 14px;
-  --leading-paragraph-desktop: 1.286;
-  --leading-paragraph-mobile: 1.286;
-
-  --text-caption-desktop: 12px;
-  --text-caption-mobile: 16px;
-  --text-caption-desktop-compact: 12px;
-  --leading-caption-desktop: 1.333;
-  --leading-caption-mobile: 1.333;
-
-  /* ── Spacing ───────────────────────────── */
-  --spacing-mobile-breadcrumb: 24px;
-  --spacing-desktop-breadcrumb: 24px;
-
-  --spacing-desktop-container-gap: 16px;
-  --spacing-mobile-container-gap: 16px;
-  --spacing-desktop-compact-container-gap: 16px;
-
-  --spacing-desktop-container-padding: 24px;
-  --spacing-mobile-container-padding: 8px;
-  --spacing-desktop-compact-container-padding: 16px;
-
-  --spacing-desktop-layout-gap: 16px;
-  --spacing-mobile-layout-gap: 16px;
-  --spacing-desktop-compact-layout-gap: 12px;
-
-  --spacing-desktop-layout-group-gap: 8px;
-  --spacing-mobile-layout-group-gap: 8px;
-  --spacing-desktop-compact-layout-group-gap: 8px;
-
-  --spacing-desktop-layout-padding: 16px;
-  --spacing-mobile-layout-padding: 16px;
-  --spacing-desktop-compact-layout-padding: 12px;
-
-  --spacing-desktop-component-gap: 4px;
-  --spacing-mobile-component-gap: 4px;
-  --spacing-desktop-compact-component-gap: 2px;
-
-  --spacing-desktop-component-padding: 8px;
-  --spacing-mobile-component-padding: 12px;
-  --spacing-desktop-compact-component-padding: 4px;
-
-  /** Max Width Full Container **/
-
-  --spacing-full-container: 1536px;
-
-  /** Color Token Aliases */
-
-  --color-text-primary-normal: var(--color-neutral-500);
-  --color-text-primary-active: var(--color-neutral-400);
-  --color-text-primary-disabled: var(--color-neutral-300);
-  --color-text-primary-error: var(--color-critical-400);
-
-  --color-text-secondary-normal: var(--color-neutral-400);
-  --color-text-secondary-disabled: var(--color-neutral-300);
-  --color-text-secondary-error: var(--color-critical-400);
-
-  --color-text-success-normal: var(--color-success-500);
-  --color-text-success-disabled: var(--color-neutral-400);
-  --color-text-success-error: var(--color-critical-400);
-
-  --color-text-warning-normal: var(--color-warning-500);
-  --color-text-warning-disabled: var(--color-neutral-400);
-  --color-text-warning-error: var(--color-critical-400);
-
-  --color-text-brand-primary-normal: var(--color-neutral-000);
-
-  --color-text-link-normal: var(--color-link-400);
-  --color-text-link-hover: var(--color-link-500);
-  --color-text-link-active: var(--color-link-300);
-  --color-text-link-disabled: var(--color-neutral-400);
-
-  --color-border-primary-normal: var(--color-neutral-300);
-  --color-border-primary-focus: var(--color-action-400);
-  --color-border-primary-error: var(--color-critical-400);
-  --color-border-primary-normal: var(--color-neutral-300);
-
-  --color-icon-primary-normal: var(--color-neutral-400);
-  --color-icon-primary-disabled: var(--color-neutral-300);
-
-  --color-icon-success-normal: var(--color-success-400);
-  --color-icon-success-disabled: var(--color-neutral-400);
-
-  --color-icon-warning-normal: var(--color-warning-400);
-  --color-icon-warning-disabled: var(--color-neutral-400);
-
-  --color-icon-critical-normal: var(--color-critical-400);
-  --color-icon-critical-disabled: var(--color-neutral-400);
-
-  --color-background-primary-normal: var(--color-neutral-000);
-  --color-background-grouped-primary-normal: var(--color-neutral-000);
-  --color-background-secondary-normal: var(--color-neutral-300);
-  --color-background-grouped-secondary-normal: var(--color-neutral-100);
-  --color-background-success-normal: var(--color-success-400);
-  --color-background-warning-normal: var(--color-warning-400);
-  --color-background-critical-normal: var(--color-critical-400);
-
-  --color-text-action-normal: var(--color-action-400);
-  --color-text-action-hover: var(--color-action-500);
-  --color-text-action-active: var(--color-action-300);
-  --color-text-action-disabled: var(--color-neutral-400);
-
-  --color-text-action-primary-normal: var(--color-action-400);
-  --color-text-action-primary-hover: var(--color-action-500);
-  --color-text-action-primary-active: var(--color-action-300);
-  --color-text-action-primary-disabled: var(--color-neutral-400);
-
-  --color-brand-text-action-primary-normal: var(
-    --color-neutral-000
-  ); /* Created for Navigation Button as no token was added for it on Figma */
-  --color-brand-text-action-primary-hover: var(
-    --color-brand-200
-  ); /* Created for Navigation Button as no token was added for it on Figma */
-  --color-brand-text-action-primary-active: var(
-    --color-brand-200
-  ); /* Created for Navigation Button as no token was added for it on Figma */
-
-  --color-brand-text-on-action-primary-normal: var(
-    --color-neutral-000
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-brand-text-on-action-primary-hover: var(
-    --color-brand-500
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-brand-text-on-action-primary-active: var(
-    --color-brand-300
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-
-  --color-text-on-action-primary-normal: var(--color-neutral-000);
-  --color-text-on-action-primary-hover: var(--color-neutral-000);
-  --color-text-on-action-primary-active: var(--color-neutral-000);
-  --color-text-on-action-primary-disabled: var(--color-neutral-400);
-
-  --color-text-action-critical-normal: var(--color-critical-400);
-  --color-text-action-critical-hover: var(--color-critical-500);
-  --color-text-action-critical-active: var(--color-critical-300);
-  --color-text-action-critical-disabled: var(--color-neutral-400);
-
-  --color-border-action-normal: var(--color-action-400);
-  --color-border-action-hover: var(--color-action-500);
-  --color-border-action-active: var(--color-action-300);
-  --color-border-action-disabled: var(--color-neutral-200);
-
-  --color-text-critical-normal: var(--color-critical-400);
-  --color-text-critical-disabled: var(--color-neutral-400);
-  --color-text-critical-error: var(--color-critical-400);
-
-  --color-border-action-critical-normal: var(--color-critical-400);
-  --color-border-action-critical-hover: var(--color-critical-500);
-  --color-border-action-critical-active: var(--color-critical-300);
-  --color-border-action-critical-disabled: var(--color-neutral-200);
-
-  --color-background-action-normal: var(--color-action-400);
-  --color-background-action-hover: var(--color-action-500);
-  --color-background-action-active: var(--color-action-300);
-  --color-background-action-disabled: var(--color-neutral-200);
-
-  --color-background-action-critical-normal: var(--color-critical-400);
-  --color-background-action-critical-hover: var(--color-critical-500);
-  --color-background-action-critical-active: var(--color-critical-300);
-  --color-background-action-critical-disabled: var(--color-neutral-200);
-
-  --color-icon-action-primary-normal: var(--color-neutral-500);
-  --color-icon-action-primary-hover: var(--color-action-500);
-  --color-icon-action-primary-active: var(--color-action-300);
-  --color-icon-action-primary-disabled: var(--color-neutral-300);
-
-  --color-icon-action-secondary-normal: var(--color-action-400);
-  --color-icon-action-secondary-hover: var(--color-action-500);
-  --color-icon-action-secondary-active: var(--color-action-300);
-  --color-icon-action-secondary-disabled: var(--color-neutral-400);
-
-  --color-icon-on-action-primary-normal: var(--color-neutral-000);
-  --color-icon-on-action-primary-hover: var(--color-neutral-000);
-  --color-icon-on-action-primary-active: var(--color-neutral-000);
-  --color-icon-on-action-primary-disabled: var(--color-neutral-400);
-
-  --color-icon-on-action-secondary-normal: var(--color-action-400);
-  --color-icon-on-action-secondary-hover: var(--color-action-500);
-  --color-icon-on-action-secondary-active: var(--color-action-300);
-  --color-icon-on-action-secondary-disabled: var(--color-neutral-400);
-
-  --color-icon-action-critical-normal: var(--color-critical-400);
-  --color-icon-action-critical-hover: var(--color-critical-500);
-  --color-icon-action-critical-active: var(--color-critical-300);
-  --color-icon-action-critical-disabled: var(--color-neutral-400);
-
-  --color-icon-action-critical-secondary-normal: var(--color-critical-400);
-  --color-icon-action-critical-secondary-hover: var(--color-critical-500);
-  --color-icon-action-critical-secondary-active: var(--color-critical-300);
-  --color-icon-action-critical-secondary-disabled: var(--color-neutral-400);
-
-  --color-icon-brand-primary-normal: var(--color-brand-400);
-  --color-icon-brand-primary-hover: var(--color-brand-500);
-  --color-icon-brand-primary-active: var(--color-brand-300);
-  --color-icon-brand-primary-disabled: var(--color-neutral-300);
-
-  --color-background-action-primary-normal: var(--color-action-400);
-  --color-background-action-primary-hover: var(--color-action-500);
-  --color-background-action-primary-active: var(--color-action-300);
-  --color-background-action-primary-disabled: var(--color-neutral-200);
-
-  --color-background-action-secondary-normal: var(--color-neutral-000);
-  --color-background-action-secondary-hover: var(--color-action-100);
-  --color-background-action-secondary-active: var(--color-neutral-000);
-  --color-background-action-secondary-disabled: var(--color-neutral-200);
-
-  --color-background-brand-normal: var(--color-brand-400);
-
-  --color-background-on-action-primary-normal: var(
-    --color-neutral-000
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-background-on-action-primary-hover: var(
-    --color-neutral-000
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-background-on-action-primary-active: var(
-    --color-neutral-000
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-background-on-action-primary-disabled: var(
-    --color-neutral-200
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-
-  --color-background-on-action-secondary-normal: var(
-    --color-neutral-100
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-background-on-action-secondary-hover: var(
-    --color-brand-500
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-background-on-action-secondary-active: var(
-    --color-brand-400
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-background-on-action-secondary-disabled: var(
-    --color-neutral-200
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-
-  --color-background-action-critical-primary-normal: var(--color-critical-400);
-  --color-background-action-critical-primary-hover: var(--color-critical-500);
-  --color-background-action-critical-primary-active: var(--color-critical-300);
-  --color-background-action-critical-primary-disabled: var(--color-neutral-200);
-
-  --color-background-action-critical-secondary-normal: var(--color-neutral-000);
-  --color-background-action-critical-secondary-hover: var(--color-critical-100);
-  --color-background-action-critical-secondary-active: var(--color-neutral-000);
-  --color-background-action-critical-secondary-disabled: var(
-    --color-neutral-200
-  );
-  --color-background-brand-normal: var(
-    --color-brand-400
-  ); /* Created for Main Navigation */
-}
-
-[data-theme="light"] {
-  /** Color Token Aliases */
-
-  --color-text-primary-normal: var(--color-neutral-500);
-  --color-text-primary-active: var(--color-neutral-400);
-  --color-text-primary-disabled: var(--color-neutral-300);
-  --color-text-primary-error: var(--color-critical-400);
-
-  --color-text-secondary-normal: var(--color-neutral-400);
-  --color-text-secondary-disabled: var(--color-neutral-300);
-  --color-text-secondary-error: var(--color-critical-400);
-
-  --color-text-success-normal: var(--color-success-500);
-  --color-text-success-disabled: var(--color-neutral-400);
-  --color-text-success-error: var(--color-critical-400);
-
-  --color-text-warning-normal: var(--color-warning-500);
-  --color-text-warning-disabled: var(--color-neutral-400);
-  --color-text-warning-error: var(--color-critical-400);
-
-  --color-text-brand-primary-normal: var(--color-neutral-000);
-
-  --color-text-link-normal: var(--color-link-400);
-  --color-text-link-hover: var(--color-link-500);
-  --color-text-link-active: var(--color-link-300);
-  --color-text-link-disabled: var(--color-neutral-400);
-
-  --color-border-primary-normal: var(--color-neutral-300);
-  --color-border-primary-focus: var(--color-action-400);
-  --color-border-primary-error: var(--color-critical-400);
-  --color-border-primary-normal: var(--color-neutral-300);
-
-  --color-icon-primary-normal: var(--color-neutral-400);
-  --color-icon-primary-disabled: var(--color-neutral-300);
-
-  --color-icon-success-normal: var(--color-success-400);
-  --color-icon-success-disabled: var(--color-neutral-400);
-
-  --color-icon-warning-normal: var(--color-warning-400);
-  --color-icon-warning-disabled: var(--color-neutral-400);
-
-  --color-icon-critical-normal: var(--color-critical-400);
-  --color-icon-critical-disabled: var(--color-neutral-400);
-
-  --color-background-primary-normal: var(--color-neutral-000);
-  --color-background-grouped-primary-normal: var(--color-neutral-000);
-  --color-background-secondary-normal: var(--color-neutral-300);
-  --color-background-grouped-secondary-normal: var(--color-neutral-100);
-  --color-background-success-normal: var(--color-success-400);
-  --color-background-warning-normal: var(--color-warning-400);
-  --color-background-critical-normal: var(--color-critical-400);
-
-  --color-text-action-normal: var(--color-action-400);
-  --color-text-action-hover: var(--color-action-500);
-  --color-text-action-active: var(--color-action-300);
-  --color-text-action-disabled: var(--color-neutral-400);
-
-  --color-text-action-primary-normal: var(--color-action-400);
-  --color-text-action-primary-hover: var(--color-action-500);
-  --color-text-action-primary-active: var(--color-action-300);
-  --color-text-action-primary-disabled: var(--color-neutral-400);
-
-  --color-brand-text-action-primary-normal: var(
-    --color-neutral-000
-  ); /* Created for Navigation Button as no token was added for it on Figma */
-  --color-brand-text-action-primary-hover: var(
-    --color-brand-200
-  ); /* Created for Navigation Button as no token was added for it on Figma */
-  --color-brand-text-action-primary-active: var(
-    --color-brand-200
-  ); /* Created for Navigation Button as no token was added for it on Figma */
-
-  --color-brand-text-on-action-primary-normal: var(
-    --color-neutral-000
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-brand-text-on-action-primary-hover: var(
-    --color-brand-500
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-brand-text-on-action-primary-active: var(
-    --color-brand-300
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-
-  --color-text-on-action-primary-normal: var(--color-neutral-000);
-  --color-text-on-action-primary-hover: var(--color-neutral-000);
-  --color-text-on-action-primary-active: var(--color-neutral-000);
-  --color-text-on-action-primary-disabled: var(--color-neutral-400);
-
-  --color-text-action-critical-normal: var(--color-critical-400);
-  --color-text-action-critical-hover: var(--color-critical-500);
-  --color-text-action-critical-active: var(--color-critical-300);
-  --color-text-action-critical-disabled: var(--color-neutral-400);
-
-  --color-border-action-normal: var(--color-action-400);
-  --color-border-action-hover: var(--color-action-500);
-  --color-border-action-active: var(--color-action-300);
-  --color-border-action-disabled: var(--color-neutral-200);
-
-  --color-text-critical-normal: var(--color-critical-400);
-  --color-text-critical-disabled: var(--color-neutral-400);
-  --color-text-critical-error: var(--color-critical-400);
-
-  --color-border-action-critical-normal: var(--color-critical-400);
-  --color-border-action-critical-hover: var(--color-critical-500);
-  --color-border-action-critical-active: var(--color-critical-300);
-  --color-border-action-critical-disabled: var(--color-neutral-200);
-
-  --color-background-action-normal: var(--color-action-400);
-  --color-background-action-hover: var(--color-action-500);
-  --color-background-action-active: var(--color-action-300);
-  --color-background-action-disabled: var(--color-neutral-200);
-
-  --color-background-action-critical-normal: var(--color-critical-400);
-  --color-background-action-critical-hover: var(--color-critical-500);
-  --color-background-action-critical-active: var(--color-critical-300);
-  --color-background-action-critical-disabled: var(--color-neutral-200);
-
-  --color-icon-action-primary-normal: var(--color-neutral-500);
-  --color-icon-action-primary-hover: var(--color-action-500);
-  --color-icon-action-primary-active: var(--color-action-300);
-  --color-icon-action-primary-disabled: var(--color-neutral-300);
-
-  --color-icon-action-secondary-normal: var(--color-action-400);
-  --color-icon-action-secondary-hover: var(--color-action-500);
-  --color-icon-action-secondary-active: var(--color-action-300);
-  --color-icon-action-secondary-disabled: var(--color-neutral-400);
-
-  --color-icon-on-action-primary-normal: var(--color-neutral-000);
-  --color-icon-on-action-primary-hover: var(--color-neutral-000);
-  --color-icon-on-action-primary-active: var(--color-neutral-000);
-  --color-icon-on-action-primary-disabled: var(--color-neutral-400);
-
-  --color-icon-on-action-secondary-normal: var(--color-action-400);
-  --color-icon-on-action-secondary-hover: var(--color-action-500);
-  --color-icon-on-action-secondary-active: var(--color-action-300);
-  --color-icon-on-action-secondary-disabled: var(--color-neutral-400);
-
-  --color-icon-action-critical-normal: var(--color-critical-400);
-  --color-icon-action-critical-hover: var(--color-critical-500);
-  --color-icon-action-critical-active: var(--color-critical-300);
-  --color-icon-action-critical-disabled: var(--color-neutral-400);
-
-  --color-icon-action-critical-secondary-normal: var(--color-critical-400);
-  --color-icon-action-critical-secondary-hover: var(--color-critical-500);
-  --color-icon-action-critical-secondary-active: var(--color-critical-300);
-  --color-icon-action-critical-secondary-disabled: var(--color-neutral-400);
-
-  --color-icon-brand-primary-normal: var(--color-brand-400);
-  --color-icon-brand-primary-hover: var(--color-brand-500);
-  --color-icon-brand-primary-active: var(--color-brand-300);
-  --color-icon-brand-primary-disabled: var(--color-neutral-300);
-
-  --color-background-action-primary-normal: var(--color-action-400);
-  --color-background-action-primary-hover: var(--color-action-500);
-  --color-background-action-primary-active: var(--color-action-300);
-  --color-background-action-primary-disabled: var(--color-neutral-200);
-
-  --color-background-action-secondary-normal: var(--color-neutral-000);
-  --color-background-action-secondary-hover: var(--color-action-100);
-  --color-background-action-secondary-active: var(--color-neutral-000);
-  --color-background-action-secondary-disabled: var(--color-neutral-200);
-
-  --color-background-brand-normal: var(--color-brand-400);
-
-  --color-background-on-action-primary-normal: var(
-    --color-neutral-000
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-background-on-action-primary-hover: var(
-    --color-neutral-000
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-background-on-action-primary-active: var(
-    --color-neutral-000
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-background-on-action-primary-disabled: var(
-    --color-neutral-200
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-
-  --color-background-on-action-secondary-normal: var(
-    --color-neutral-100
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-background-on-action-secondary-hover: var(
-    --color-brand-500
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-background-on-action-secondary-active: var(
-    --color-brand-400
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-  --color-background-on-action-secondary-disabled: var(
-    --color-neutral-200
-  ); /* Created for Navigation Tab as no token was added for it on Figma */
-
-  --color-background-action-critical-primary-normal: var(--color-critical-400);
-  --color-background-action-critical-primary-hover: var(--color-critical-500);
-  --color-background-action-critical-primary-active: var(--color-critical-300);
-  --color-background-action-critical-primary-disabled: var(--color-neutral-200);
-
-  --color-background-action-critical-secondary-normal: var(--color-neutral-000);
-  --color-background-action-critical-secondary-hover: var(--color-critical-100);
-  --color-background-action-critical-secondary-active: var(--color-neutral-000);
-  --color-background-action-critical-secondary-disabled: var(
-    --color-neutral-200
-  );
-  --color-background-brand-normal: var(
-    --color-brand-400
-  ); /* Created for Main Navigation */
-}
-
-/* Skeleton / Shimmer */
-.skeleton-paragraph {
-  position: relative;
-  overflow: hidden;
-  background-color: theme("colors.neutral.100");
-  opacity: 0.85;
-}
-
-.skeleton-paragraph::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  transform: translateX(-100%);
-  background-image: linear-gradient(
-    90deg,
-    transparent 0%,
-    color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
-    transparent 100%
-  );
-  animation: skeleton-shimmer 1.4s ease-in-out infinite;
-}
-
-@keyframes skeleton-shimmer {
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-@import "./darkmode.css";
-@import "./brand.css";
-
-body {
-  @apply bg-background-primary-normal;
-  @apply text-text-primary-normal;
-}
-
-@custom-variant compact {
-  &:where([data-compact]) {
-    @slot;
-  }
-}
-
-@custom-variant desktop {
-  @container root (width >= 48rem) {
-    @slot;
-  }
-}
-
-@utility scrollbar-thin {
-  scrollbar-width: thin;
-}
-
-@utility scrollbar-stable {
-  scrollbar-gutter: stable;
-}
-
-@utility scrollbar-thumb-* {
-  & {
-    --dmsi-scrollbar-thumb-color: --value(--color-*);
-    @apply scrollbar;
-  }
-}
-
-@utility scrollbar-track-* {
-  & {
-    --dmsi-scrollbar-track-color: --value(--color-*);
-    @apply scrollbar;
-  }
-}
-
-@utility scrollbar {
-  & {
-    scrollbar-color: var(--dmsi-scrollbar-thumb-color, var(--color-gray-400))
-      var(--dmsi-scrollbar-track-color, var(--color-gray-100));
-  }
-}
-
-:root {
-  container-type: inline-size;
-  container-name: root;
-}
-
-@layer components {
-  .icon {
-    font-family: "Icons";
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-    direction: ltr;
-  }
-
-  .icon-24 {
-    font-size: 24px;
-  }
-
-  .icon-16 {
-    font-size: 16px;
-  }
-
-  .icon-32 {
-    font-size: 32px;
-  }
-
-  .no-scrollbar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-/* Spinner */
-
-.spinner circle {
-  /* Apply the animation to all circles within the spinner */
-  animation: spinner-fade 1s infinite;
-}
-
-/* Define the fade animation */
-@keyframes spinner-fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-/* Set a negative animation-delay to start each circle's animation
-  partway through its cycle. This creates the initial staggered look.
-*/
-.spinner circle:nth-child(1) {
-  animation-delay: 0s;
-}
-.spinner circle:nth-child(2) {
-  animation-delay: -0.875s;
-}
-.spinner circle:nth-child(3) {
-  animation-delay: -0.75s;
-}
-.spinner circle:nth-child(4) {
-  animation-delay: -0.625s;
-}
-.spinner circle:nth-child(5) {
-  animation-delay: -0.5s;
-}
-.spinner circle:nth-child(6) {
-  animation-delay: -0.375s;
-}
-.spinner circle:nth-child(7) {
-  animation-delay: -0.25s;
-}
-.spinner circle:nth-child(8) {
-  animation-delay: -0.125s;
-}