@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.2

package/cjs/masthead/sgds-night.css

@@ -0,0 +1,476 @@
+:root {
+  /* Primitive - Product Primary Color */
+  --sgds-product-primary-100: #f4f2fe;
+  --sgds-product-primary-200: #e1dbfb;
+  --sgds-product-primary-300: #c8bdf7;
+  --sgds-product-primary-400: #a999f3;
+  --sgds-product-primary-500: #8a72ef;
+  --sgds-product-primary-600: #6b4feb;
+  --sgds-product-primary-700: #523abc;
+  --sgds-product-primary-800: #3c2b8a;
+  --sgds-product-primary-900: #2a1e61;
+
+  /* Primitive - Purple Color */
+  --sgds-purple-100: #fbf0fe;
+  --sgds-purple-200: #f2d6fc;
+  --sgds-purple-300: #e6adf9;
+  --sgds-purple-400: #d983f6;
+  --sgds-purple-500: #c94cf2;
+  --sgds-purple-600: #ac1cdb;
+  --sgds-purple-700: #8516a9;
+  --sgds-purple-800: #641180;
+  --sgds-purple-900: #460c5a;
+
+  /* Primitive - Cyan Color */
+  --sgds-cyan-100: #DBf9fd;
+  --sgds-cyan-200: #94edfa;
+  --sgds-cyan-300: #24d5ee;
+  --sgds-cyan-400: #1fb5ca;
+  --sgds-cyan-500: #1993a4;
+  --sgds-cyan-600: #147583;
+  --sgds-cyan-700: #0f5a65;
+  --sgds-cyan-800: #0b434b;
+  --sgds-cyan-900: #082e34;
+
+  /* Primitive - Green Color */
+  --sgds-green-100: #e3f9ed;
+  --sgds-green-200: #b1edcb;
+  --sgds-green-300: #62db96;
+  --sgds-green-400: #16bd5e;
+  --sgds-green-500: #129a4d;
+  --sgds-green-600: #0e7c3d;
+  --sgds-green-700: #0b5e2f;
+  --sgds-green-800: #084523;
+  --sgds-green-900: #063119;
+
+  /* Primitive - Blue Color */
+  --sgds-blue-100: #ecf5fe;
+  --sgds-blue-200: #c8e2fb;
+  --sgds-blue-300: #96c7f7;
+  --sgds-blue-400: #60aaf4;
+  --sgds-blue-500: #1e87ef;
+  --sgds-blue-600: #0269d0;
+  --sgds-blue-700: #0151a0;
+  --sgds-blue-800: #013c77;
+  --sgds-blue-900: #012a54;
+
+  /* Primitive - Yellow Color */
+  --sgds-yellow-100: #fef4cb;
+  --sgds-yellow-200: #fcde63;
+  --sgds-yellow-300: #e5bf29;
+  --sgds-yellow-400: #c2a223;
+  --sgds-yellow-500: #9d841c;
+  --sgds-yellow-600: #7e6917;
+  --sgds-yellow-700: #605111;
+  --sgds-yellow-800: #483c0d;
+  --sgds-yellow-900: #322909;
+
+  /* Primitive - Red Color */
+  --sgds-red-100: #fcf1f1;
+  --sgds-red-200: #f8d7d7;
+  --sgds-red-300: #f1b2b2;
+  --sgds-red-400: #e98b8b;
+  --sgds-red-500: #e05959;
+  --sgds-red-600: #cf2323;
+  --sgds-red-700: #a11b1b;
+  --sgds-red-800: #791414;
+  --sgds-red-900: #550e0e;
+
+  /* Primitive - Gray Color */
+  --sgds-gray-000: #ffffff;
+  --sgds-gray-100: #f3f3f3;
+  --sgds-gray-200: #dfdfdf;
+  --sgds-gray-300: #c6c6c6;
+  --sgds-gray-400: #a5a5a5;
+  --sgds-gray-500: #868686;
+  --sgds-gray-600: #6b6b6b;
+  --sgds-gray-700: #525252;
+  --sgds-gray-800: #3b3b3b;
+  --sgds-gray-900: #2a2a2a;
+  --sgds-gray-1000: #1a1a1a;
+  --sgds-gray-1100: #0e0e0e;
+
+  /* Primitive - Border Width */
+  --sgds-border-width-0: 0px;
+  --sgds-border-width-1: 1px;
+  --sgds-border-width-2: 2px;
+  --sgds-border-width-3: 3px;
+  --sgds-border-width-4: 4px;
+  --sgds-form-border-width-default: var(--sgds-border-width-1);
+  --sgds-form-border-width-thick: var(--sgds-border-width-2);
+
+  /* Primitive - Border Radius */
+  --sgds-border-radius-none: 0px;
+  --sgds-border-radius-xs: 2px;
+  --sgds-border-radius-sm: 4px;
+  --sgds-border-radius-md: 8px;
+  --sgds-border-radius-lg: 12px;
+  --sgds-border-radius-xl: 16px;
+  --sgds-border-radius-2-xl: 24px;
+  --sgds-border-radius-full: 999px;
+  --sgds-form-border-radius-none: var(--sgds-border-radius-none);
+  --sgds-form-border-radius-xs: var(--sgds-border-radius-xs);
+  --sgds-form-border-radius-sm: var(--sgds-border-radius-sm);
+  --sgds-form-border-radius-md: var(--sgds-border-radius-md);
+  --sgds-form-border-radius-full: var(--sgds-border-radius-full);
+
+  /* Primitive - Breakpoint */
+  --sgds-breakpoint-xs: var(--sgds-dimension-320);
+  --sgds-breakpoint-sm: var(--sgds-dimension-512);
+  --sgds-breakpoint-md: var(--sgds-dimension-768);
+  --sgds-breakpoint-lg: var(--sgds-dimension-1024);
+  --sgds-breakpoint-xl: var(--sgds-dimension-1280);
+  --sgds-breakpoint-2-xl: var(--sgds-dimension-1440);
+
+  /* Primitive - Font Family */
+  --sgds-font-family-brand: "Inter", system-ui, sans-serif;
+
+  /* Primitive - Font Weight */
+  --sgds-font-weight-light: 300;
+  --sgds-font-weight-regular: 400;
+  --sgds-font-weight-semibold: 600;
+  --sgds-font-weight-bold: 700;
+
+  /* Primitive - Font Size */
+  --sgds-font-size-1: 0.875rem;
+  --sgds-font-size-2: 1rem;
+  --sgds-font-size-3: 1.25rem;
+  --sgds-font-size-4: 1.5rem;
+  --sgds-font-size-5: 1.75rem;
+  --sgds-font-size-6: 2rem;
+  --sgds-font-size-7: 2.5rem;
+  --sgds-font-size-8: 3rem;
+  --sgds-font-size-9: 3.5rem;
+
+  /* Primitive - Icon Size */
+  --sgds-icon-size-sm: 1rem;
+  --sgds-icon-size-md: 1.25rem;
+  --sgds-icon-size-lg: 1.5rem;
+  --sgds-icon-size-xl: 2rem;
+  --sgds-icon-size-2-xl: 3rem;
+  --sgds-icon-size-3-xl: 4rem;
+
+  /* Primitive - Letter Spacing */
+  --sgds-letter-spacing-tighter: -1px;
+  --sgds-letter-spacing-tight: -0.4px;
+  --sgds-letter-spacing-normal: 0px;
+  --sgds-letter-spacing-wide: 1px;
+  --sgds-letter-spacing-wider: 2px;
+
+  /* Primitive - Line Height */
+  --sgds-line-height-body: 1.5;
+  --sgds-line-height-heading: 1.2;
+  --sgds-line-height-min: 20px;
+
+  /* Primitive - Opacity */
+  --sgds-opacity-0: 0;
+  --sgds-opacity-5: 0.05;
+  --sgds-opacity-10: 0.1;
+  --sgds-opacity-20: 0.2;
+  --sgds-opacity-30: 0.3;
+  --sgds-opacity-40: 0.4;
+  --sgds-opacity-50: 0.5;
+  --sgds-opacity-60: 0.6;
+  --sgds-opacity-70: 0.7;
+  --sgds-opacity-80: 0.8;
+  --sgds-opacity-90: 0.9;
+  --sgds-opacity-100: 1;
+
+  /* Primitive - Paragraph Spacing */
+  --sgds-paragraph-spacing-none: 0;
+  --sgds-paragraph-spacing-sm: 0.5rem;
+  --sgds-paragraph-spacing-md: 1rem;
+  --sgds-paragraph-spacing-lg: 1.5rem;
+  --sgds-paragraph-spacing-xl: 2rem;
+
+  /* Primitive - Spacer */
+  --sgds-spacer-0: 0rem;
+  --sgds-spacer-1: 0.125rem;
+  --sgds-spacer-2: 0.25rem;
+  --sgds-spacer-3: 0.5rem;
+  --sgds-spacer-4: 0.75rem;
+  --sgds-spacer-5: 1rem;
+  --sgds-spacer-6: 1.25rem;
+  --sgds-spacer-7: 1.5rem;
+  --sgds-spacer-8: 2rem;
+  --sgds-spacer-9: 3rem;
+  --sgds-spacer-10: 4rem;
+  --sgds-spacer-11: 6rem;
+  --sgds-spacer-12: 8rem;
+
+  /* Primitive - Dimension */
+  --sgds-dimension-0: 0px;
+  --sgds-dimension-1: 1px;
+  --sgds-dimension-2: 2px;
+  --sgds-dimension-4: 4px;
+  --sgds-dimension-8: 8px;
+  --sgds-dimension-12: 12px;
+  --sgds-dimension-16: 16px;
+  --sgds-dimension-20: 20px;
+  --sgds-dimension-24: 24px;
+  --sgds-dimension-32: 32px;
+  --sgds-dimension-40: 40px;
+  --sgds-dimension-48: 48px;
+  --sgds-dimension-52: 52px;
+  --sgds-dimension-56: 56px;
+  --sgds-dimension-60: 60px;
+  --sgds-dimension-64: 64px;
+  --sgds-dimension-72: 72px;
+  --sgds-dimension-76: 76px;
+  --sgds-dimension-80: 80px;
+  --sgds-dimension-88: 88px;
+  --sgds-dimension-96: 96px;
+  --sgds-dimension-112: 112px;
+  --sgds-dimension-120: 120px;
+  --sgds-dimension-128: 128px;
+  --sgds-dimension-132: 132px;
+  --sgds-dimension-136: 136px;
+  --sgds-dimension-144: 144px;
+  --sgds-dimension-168: 168px;
+  --sgds-dimension-192: 192px;
+  --sgds-dimension-224: 224px;
+  --sgds-dimension-256: 256px;
+  --sgds-dimension-280: 280px;
+  --sgds-dimension-288: 288px;
+  --sgds-dimension-320: 320px;
+  --sgds-dimension-328: 328px;
+  --sgds-dimension-340: 340px;
+  --sgds-dimension-384: 384px;
+  --sgds-dimension-480: 480px;
+  --sgds-dimension-512: 512px;
+  --sgds-dimension-688: 688px;
+  --sgds-dimension-768: 768px;
+  --sgds-dimension-1024: 1024px;
+  --sgds-dimension-1280: 1280px;
+  --sgds-dimension-1440: 1440px;
+
+  /* Semantic - Padding */
+  --sgds-padding-none: var(--sgds-spacer-0);
+  --sgds-padding-3-xs: var(--sgds-spacer-1);
+  --sgds-padding-2-xs: var(--sgds-spacer-2);
+  --sgds-padding-xs: var(--sgds-spacer-3);
+  --sgds-padding-sm: var(--sgds-spacer-4);
+  --sgds-padding-md: var(--sgds-spacer-5);
+  --sgds-padding-lg: var(--sgds-spacer-6);
+  --sgds-padding-xl: var(--sgds-spacer-7);
+  --sgds-padding-2-xl: var(--sgds-spacer-8);
+  --sgds-padding-3-xl: var(--sgds-spacer-9);
+  --sgds-padding-4-xl: var(--sgds-spacer-10);
+  --sgds-padding-5-xl: var(--sgds-spacer-11);
+  --sgds-form-padding-x: var(--sgds-padding-md);
+  --sgds-form-padding-y: var(--sgds-padding-sm);
+  --sgds-form-padding-inline-xs: var(--sgds-padding-3-xs);
+  --sgds-form-padding-inline-sm: var(--sgds-padding-2-xs);
+  --sgds-form-padding-inline-md: var(--sgds-padding-xs);
+  --sgds-form-padding-inline-lg: var(--sgds-padding-sm);
+  --sgds-form-padding-inline-xl: var(--sgds-padding-md);
+
+  --sgds-margin-none: var(--sgds-spacer-0);
+  --sgds-margin-3-xs: var(--sgds-spacer-3);
+  --sgds-margin-2-xs: var(--sgds-spacer-5);
+  --sgds-margin-xs: var(--sgds-spacer-6);
+  --sgds-margin-sm: var(--sgds-spacer-7);
+  --sgds-margin-md: var(--sgds-spacer-8);
+  --sgds-margin-lg: var(--sgds-spacer-9);
+  --sgds-margin-xl: var(--sgds-spacer-10);
+  --sgds-margin-2-xl: var(--sgds-spacer-11);
+  --sgds-margin-3-xl: var(--sgds-spacer-12);
+
+  --sgds-gap-none: var(--sgds-spacer-0);
+  --sgds-gap-2-xs: var(--sgds-spacer-2);
+  --sgds-gap-xs: var(--sgds-spacer-3);
+  --sgds-gap-sm: var(--sgds-spacer-4);
+  --sgds-gap-md: var(--sgds-spacer-5);
+  --sgds-gap-lg: var(--sgds-spacer-6);
+  --sgds-gap-xl: var(--sgds-spacer-7);
+  --sgds-gap-2-xl: var(--sgds-spacer-8);
+  --sgds-form-gap-sm: var(--sgds-gap-2-xs);
+  --sgds-form-gap-md: var(--sgds-gap-xs);
+  --sgds-form-gap-lg: var(--sgds-gap-sm);
+  --sgds-form-gap-xl: var(--sgds-gap-md);
+  --sgds-form-gap-2-xl: var(--sgds-gap-xl);
+
+  --sgds-form-height-3-xs: var(--sgds-dimension-12);
+  --sgds-form-height-2-xs: var(--sgds-dimension-16);
+  --sgds-form-height-xs: var(--sgds-dimension-20);
+  --sgds-form-height-sm: var(--sgds-dimension-24);
+  --sgds-form-height-md: var(--sgds-dimension-32);
+  --sgds-form-height-lg: var(--sgds-dimension-40);
+  --sgds-form-height-xl: var(--sgds-dimension-48);
+  --sgds-form-height-2-xl: var(--sgds-dimension-56);
+
+  --sgds-form-width-3-xs: var(--sgds-dimension-12);
+  --sgds-form-width-2-xs: var(--sgds-dimension-16);
+  --sgds-form-width-xs: var(--sgds-dimension-24);
+  --sgds-form-width-sm: var(--sgds-dimension-32);
+  --sgds-form-width-md: var(--sgds-dimension-40);
+  --sgds-form-width-lg: var(--sgds-dimension-48);
+  --sgds-form-width-xl: var(--sgds-dimension-56);
+  --sgds-form-width-2-xl: var(--sgds-dimension-64);
+  --sgds-form-width-3-xl: var(--sgds-dimension-72);
+  --sgds-form-width-4-xl: var(--sgds-dimension-80);
+
+  /* Semantic - Form Icon Size */
+  --sgds-form-icon-size-sm: var(--sgds-icon-size-sm);
+  --sgds-form-icon-size-md: var(--sgds-icon-size-md);
+  --sgds-form-icon-size-lg: var(--sgds-icon-size-lg);
+
+  --sgds-box-shadow-focus: 0px 0px 0px 4px var(--sgds-blue-400);
+  --sgds-form-box-shadow-focus: var(--sgds-box-shadow-focus);
+
+  /* Masthead and Mainnav Max Width and Padding */
+  --sgds-mainnav-max-width: 1440px;
+  --sgds-mainnav-padding-x: 2rem;
+  --sgds-mainnav-mobile-padding-x: 1.25rem;
+}
+:root.sgds-night-theme {
+  color-scheme: only dark;
+
+  /* Semantic - Default Colors */
+  --sgds-bg-default: var(--sgds-gray-1100);
+  --sgds-bg-alternate: var(--sgds-gray-1000);
+  --sgds-bg-fixed-light: var(--sgds-gray-000);
+  --sgds-bg-fixed-dark: var(--sgds-gray-1100);
+  --sgds-bg-overlay: oklch(from var(--sgds-gray-1100) l c h / 0.4);
+  --sgds-bg-translucent: oklch(from var(--sgds-gray-000) l c h / 0.1);
+  --sgds-bg-translucent-subtle: oklch(from var(--sgds-gray-000) l c h / 0.1);
+  --sgds-bg-transparent: transparent;
+  --sgds-surface-default: var(--sgds-gray-900);
+  --sgds-surface-raised: var(--sgds-gray-800);
+  --sgds-surface-inverse: var(--sgds-gray-000);
+  --sgds-surface-fixed-light: var(--sgds-gray-000);
+  --sgds-surface-fixed-dark: var(--sgds-gray-900);
+  --sgds-color-default: var(--sgds-gray-100);
+  --sgds-color-subtle: var(--sgds-gray-400);
+  --sgds-color-muted: var(--sgds-gray-800);
+  --sgds-color-inverse: var(--sgds-gray-1000);
+  --sgds-color-fixed-light: var(--sgds-gray-100);
+  --sgds-color-fixed-dark: var(--sgds-gray-1000);
+  --sgds-color-transparent: transparent;
+  --sgds-border-color-default: var(--sgds-gray-500);
+  --sgds-border-color-emphasis: var(--sgds-gray-200);
+  --sgds-border-color-muted: var(--sgds-gray-800);
+  --sgds-border-color-fixed-light: var(--sgds-gray-000);
+  --sgds-border-color-fixed-dark: var(--sgds-gray-1000);
+  --sgds-border-color-translucent: oklch(from var(--sgds-gray-000) l c h / 0.1);
+  --sgds-border-color-transparent: transparent;
+
+  /* Semantic - Primary Colors */
+  --sgds-primary-bg-default: var(--sgds-product-primary-600);
+  --sgds-primary-bg-muted: var(--sgds-product-primary-200);
+  --sgds-primary-bg-translucent: oklch(from var(--sgds-product-primary-100) l c h / 0.05);
+  --sgds-primary-surface-default: var(--sgds-product-primary-600);
+  --sgds-primary-surface-emphasis: var(--sgds-product-primary-700);
+  --sgds-primary-surface-muted: var(--sgds-product-primary-200);
+  --sgds-primary-surface-translucent: oklch(from var(--sgds-product-primary-100) l c h / 0.1);
+  --sgds-primary-color-default: var(--sgds-product-primary-400);
+  --sgds-primary-color-emphasis: var(--sgds-product-primary-300);
+  --sgds-primary-color-fixed-light: var(--sgds-product-primary-400);
+  --sgds-primary-color-fixed-dark: var(--sgds-product-primary-700);
+  --sgds-primary-border-color-default: var(--sgds-product-primary-500);
+  --sgds-primary-border-color-emphasis: var(--sgds-product-primary-300);
+  --sgds-primary-border-color-muted: var(--sgds-product-primary-700);
+
+  /* Semantic - Success Colors */
+  --sgds-success-bg-default: var(--sgds-green-600);
+  --sgds-success-bg-muted: var(--sgds-green-200);
+  --sgds-success-surface-default: var(--sgds-green-600);
+  --sgds-success-surface-emphasis: var(--sgds-green-700);
+  --sgds-success-surface-muted: var(--sgds-green-200);
+  --sgds-success-color-default: var(--sgds-green-400);
+  --sgds-success-color-emphasis: var(--sgds-green-300);
+  --sgds-success-color-fixed-light: var(--sgds-green-400);
+  --sgds-success-color-fixed-dark: var(--sgds-green-700);
+  --sgds-success-border-color-default: var(--sgds-green-500);
+  --sgds-success-border-color-emphasis: var(--sgds-green-300);
+  --sgds-success-border-color-muted: var(--sgds-green-700);
+
+  /* Semantic - Danger Colors */
+  --sgds-danger-bg-default: var(--sgds-red-600);
+  --sgds-danger-bg-muted: var(--sgds-red-200);
+  --sgds-danger-surface-default: var(--sgds-red-600);
+  --sgds-danger-surface-emphasis: var(--sgds-red-700);
+  --sgds-danger-surface-muted: var(--sgds-red-200);
+  --sgds-danger-color-default: var(--sgds-red-400);
+  --sgds-danger-color-emphasis: var(--sgds-red-300);
+  --sgds-danger-color-fixed-light: var(--sgds-red-400);
+  --sgds-danger-color-fixed-dark: var(--sgds-red-700);
+  --sgds-danger-border-color-default: var(--sgds-red-500);
+  --sgds-danger-border-color-emphasis: var(--sgds-red-300);
+  --sgds-danger-border-color-subtle: var(--sgds-red-700);
+
+  /* Semantic - Warning Colors */
+  --sgds-warning-bg-default: var(--sgds-yellow-300);
+  --sgds-warning-bg-muted: var(--sgds-yellow-200);
+  --sgds-warning-surface-default: var(--sgds-yellow-300);
+  --sgds-warning-surface-emphasis: var(--sgds-yellow-600);
+  --sgds-warning-surface-muted: var(--sgds-yellow-100);
+  --sgds-warning-color-default: var(--sgds-yellow-300);
+  --sgds-warning-color-emphasis: var(--sgds-yellow-200);
+  --sgds-warning-color-fixed-light: var(--sgds-yellow-300);
+  --sgds-warning-color-fixed-dark: var(--sgds-yellow-700);
+  --sgds-warning-border-color-default: var(--sgds-yellow-500);
+  --sgds-warning-border-color-emphasis: var(--sgds-yellow-300);
+  --sgds-warning-border-color-subtle: var(--sgds-yellow-700);
+
+  /* Semantic - Neutral Colors */
+  --sgds-neutral-bg-default: var(--sgds-gray-600);
+  --sgds-neutral-bg-muted: var(--sgds-gray-200);
+  --sgds-neutral-surface-default: var(--sgds-gray-700);
+  --sgds-neutral-surface-emphasis: var(--sgds-gray-700);
+  --sgds-neutral-surface-muted: var(--sgds-gray-200);
+  --sgds-neutral-color-default: var(--sgds-gray-400);
+  --sgds-neutral-color-emphasis: var(--sgds-gray-300);
+  --sgds-neutral-color-fixed-light: var(--sgds-gray-400);
+  --sgds-neutral-color-fixed-dark: var(--sgds-gray-700);
+  --sgds-neutral-border-color-default: var(--sgds-gray-500);
+  --sgds-neutral-border-color-emphasis: var(--sgds-gray-300);
+  --sgds-neutral-border-color-subtle: var(--sgds-gray-700);
+
+  /* Semantic - Display Colors */
+  --sgds-display-color-default: var(--sgds-gray-000);
+  --sgds-display-color-subtle: var(--sgds-gray-200);
+
+  /* Semantic - Header Colors */
+  --sgds-header-color-default: var(--sgds-gray-100);
+  --sgds-header-color-subtle: var(--sgds-gray-200);
+
+  /* Semantic - Body Colors */
+  --sgds-body-color-default: var(--sgds-gray-000);
+  --sgds-body-color-subtle: var(--sgds-gray-300);
+
+  /* Semantic - Label Colors */
+  --sgds-label-color-default: var(--sgds-gray-100);
+  --sgds-label-color-subtle: var(--sgds-gray-300);
+
+  /* Semantic - Caption Color */
+  --sgds-caption-color: var(--sgds-gray-300);
+
+  /* Semantic - Link Color */
+  --sgds-link-color-default: var(--sgds-blue-400);
+  --sgds-link-color-emphasis: var(--sgds-blue-300);
+
+  /* Semantic - Form Color */
+  --sgds-form-surface-default: var(--sgds-gray-900);
+  --sgds-form-surface-emphasis: var(--sgds-gray-200);
+  --sgds-form-surface-subtle: var(--sgds-gray-500);
+  --sgds-form-surface-muted: var(--sgds-gray-700);
+  --sgds-form-surface-inverse: var(--sgds-gray-000);
+  --sgds-form-surface-fixed-light: var(--sgds-gray-000);
+  --sgds-form-surface-fixed-dark: var(--sgds-gray-900);
+  --sgds-form-color-default: var(--sgds-gray-100);
+  --sgds-form-color-subtle: var(--sgds-gray-300);
+  --sgds-form-color-muted: var(--sgds-gray-700);
+  --sgds-form-color-inverse: var(--sgds-gray-900);
+  --sgds-form-color-fixed-light: var(--sgds-gray-000);
+  --sgds-form-color-fixed-dark: var(--sgds-gray-1100);
+  --sgds-form-primary-surface-default: var(--sgds-product-primary-600);
+  --sgds-form-primary-surface-emphasis: var(--sgds-product-primary-700);
+  --sgds-form-primary-color-default: var(--sgds-product-primary-400);
+  --sgds-form-success-surface-default: var(--sgds-green-600);
+  --sgds-form-success-color-default: var(--sgds-green-500);
+  --sgds-form-success-border-color-default: var(--sgds-green-500);
+  --sgds-form-danger-surface-default: var(--sgds-red-600);
+  --sgds-form-danger-color-default: var(--sgds-red-500);
+  --sgds-form-danger-border-color-default: var(--sgds-red-500);
+}

package/cjs/menu/menu-content.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("./menu-content.styles.js");const n=n=>{var{children:o,"data-testid":i="menu-content",overflow:a,maxHeight:s}=n,l=e.__rest(n,["children","data-testid","overflow","maxHeight"]);return t.jsx(r.MenuPanel,Object.assign({$overflow:a,$maxHeight:s,"data-testid":i,tabIndex:-1,onKeyDown:e=>{var t;const r="ArrowDown"===e.key||"ArrowRight"===e.key,n="ArrowUp"===e.key||"ArrowLeft"===e.key;if(!r&&!n)return;const o=(e=>Array.from(e.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((e=>!e.hasAttribute("disabled"))))(e.currentTarget);if(!o.length)return;const i=document.activeElement,a=i?o.indexOf(i):-1;e.preventDefault();const s=r?1:-1;null===(t=o[-1===a?r?0:o.length-1:(a+s+o.length)%o.length])||void 0===t||t.focus()}},l,{children:o}))};n.displayName="Menu.Content",exports.MenuContent=n;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),n=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var s=require("../theme/utils/use-apply-styles.js"),o=require("./menu-content.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(r);const a=r=>{var{children:i,className:a,"data-testid":u="menu-content",overflow:d,maxHeight:c}=r,m=e.__rest(r,["children","className","data-testid","overflow","maxHeight"]);const h=n.useRef(null);s.useApplyStyle(h,{[o.tokens.panel.maxHeight]:void 0!==c?`${c}px`:null,[o.tokens.panel.overflow]:d||null});return t.jsx("div",Object.assign({ref:h,"data-testid":u,tabIndex:-1,onKeyDown:e=>{var t;const r="ArrowDown"===e.key||"ArrowRight"===e.key,n="ArrowUp"===e.key||"ArrowLeft"===e.key;if(!r&&!n)return;const s=(e=>Array.from(e.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((e=>!e.hasAttribute("disabled"))))(e.currentTarget);if(!s.length)return;const o=document.activeElement,i=o?s.indexOf(o):-1;e.preventDefault();const l=r?1:-1;null===(t=s[-1===i?r?0:s.length-1:(i+l+s.length)%s.length])||void 0===t||t.focus()},className:l.default(o.panel,a)},m,{children:i}))};a.displayName="Menu.Content",exports.MenuContent=a;
 //# sourceMappingURL=menu-content.js.map

package/cjs/menu/menu-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-content.js","sources":["../../../src/menu/menu-content.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { MenuPanel } from \"./menu-content.styles\";\nimport type { MenuContentProps } from \"./types\";\n\n// =============================================================================\n// HELPERS\n// =============================================================================\nconst getFocusables = (container: HTMLElement) => {\n    return Array.from(\n        container.querySelectorAll<HTMLElement>(\n            'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n        )\n    ).filter((el) => !el.hasAttribute(\"disabled\"));\n};\n\nexport const MenuContent = ({\n    children,\n    \"data-testid\": testId = \"menu-content\",\n    overflow,\n    maxHeight,\n    ...otherProps\n}: MenuContentProps): JSX.Element => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const isNextKey = e.key === \"ArrowDown\" || e.key === \"ArrowRight\";\n        const isPrevKey = e.key === \"ArrowUp\" || e.key === \"ArrowLeft\";\n\n        if (!isNextKey && !isPrevKey) return;\n\n        const container = e.currentTarget as HTMLElement;\n        const focusables = getFocusables(container);\n        if (!focusables.length) return;\n\n        const active = document.activeElement as HTMLElement | null;\n        const idx = active ? focusables.indexOf(active) : -1;\n\n        e.preventDefault();\n\n        const delta = isNextKey ? 1 : -1;\n\n        const nextIndex =\n            idx === -1\n                ? isNextKey\n                    ? 0\n                    : focusables.length - 1\n                : (idx + delta + focusables.length) % focusables.length;\n\n        focusables[nextIndex]?.focus();\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <MenuPanel\n            $overflow={overflow}\n            $maxHeight={maxHeight}\n            data-testid={testId}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            {...otherProps}\n        >\n            {children}\n        </MenuPanel>\n    );\n};\n\nMenuContent.displayName = \"Menu.Content\";\n"],"names":["MenuContent","_a","children","testId","overflow","maxHeight","otherProps","__rest","_jsx","MenuPanel","Object","assign","$overflow","tabIndex","onKeyDown","e","isNextKey","key","isPrevKey","focusables","container","Array","from","querySelectorAll","filter","el","hasAttribute","getFocusables","currentTarget","length","active","document","activeElement","idx","indexOf","preventDefault","delta","focus","displayName"],"mappings":"yHAQA,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALW,mDAuCxB,OACIO,EAAAA,IAACC,EAAAA,UAASC,OAAAC,OAAA,CAAAC,UACKR,aACCC,EAAS,cACRF,EACbU,YACAC,UAnCeC,UACnB,MAAMC,EAAsB,cAAVD,EAAEE,KAAiC,eAAVF,EAAEE,IACvCC,EAAsB,YAAVH,EAAEE,KAA+B,cAAVF,EAAEE,IAE3C,IAAKD,IAAcE,EAAW,OAE9B,MACMC,EAzBQ,CAACC,GACZC,MAAMC,KACTF,EAAUG,iBACN,qEAENC,QAAQC,IAAQA,EAAGC,aAAa,cAoBXC,CADDZ,EAAEa,eAEpB,IAAKT,EAAWU,OAAQ,OAExB,MAAMC,EAASC,SAASC,cAClBC,EAAMH,EAASX,EAAWe,QAAQJ,IAAU,EAElDf,EAAEoB,iBAEF,MAAMC,EAAQpB,EAAY,GAAI,EAST,QAArBf,EAAAkB,GANY,IAARc,EACMjB,EACI,EACAG,EAAWU,OAAS,GACvBI,EAAMG,EAAQjB,EAAWU,QAAUV,EAAWU,eAEpC,IAAA5B,GAAAA,EAAEoC,OAAO,GAYtB/B,EAAU,CAAAJ,SAEbA,IACO,EAIpBF,EAAYsC,YAAc"}
+{"version":3,"file":"menu-content.js","sources":["../../../src/menu/menu-content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./menu-content.styles\";\nimport type { MenuContentProps } from \"./types\";\n\n// =============================================================================\n// HELPERS\n// =============================================================================\nconst getFocusables = (container: HTMLElement) => {\n    return Array.from(\n        container.querySelectorAll<HTMLElement>(\n            'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n        )\n    ).filter((el) => !el.hasAttribute(\"disabled\"));\n};\n\nexport const MenuContent = ({\n    children,\n    className,\n    \"data-testid\": testId = \"menu-content\",\n    overflow,\n    maxHeight,\n    ...otherProps\n}: MenuContentProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const panelRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(panelRef, {\n        [styles.tokens.panel.maxHeight]:\n            maxHeight !== undefined ? `${maxHeight}px` : null,\n        [styles.tokens.panel.overflow]: overflow || null,\n    });\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const isNextKey = e.key === \"ArrowDown\" || e.key === \"ArrowRight\";\n        const isPrevKey = e.key === \"ArrowUp\" || e.key === \"ArrowLeft\";\n\n        if (!isNextKey && !isPrevKey) return;\n\n        const container = e.currentTarget as HTMLElement;\n        const focusables = getFocusables(container);\n        if (!focusables.length) return;\n\n        const active = document.activeElement as HTMLElement | null;\n        const idx = active ? focusables.indexOf(active) : -1;\n\n        e.preventDefault();\n\n        const delta = isNextKey ? 1 : -1;\n\n        const nextIndex =\n            idx === -1\n                ? isNextKey\n                    ? 0\n                    : focusables.length - 1\n                : (idx + delta + focusables.length) % focusables.length;\n\n        focusables[nextIndex]?.focus();\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            ref={panelRef}\n            data-testid={testId}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            className={clsx(styles.panel, className)}\n            {...otherProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nMenuContent.displayName = \"Menu.Content\";\n"],"names":["MenuContent","_a","children","className","testId","overflow","maxHeight","otherProps","__rest","panelRef","useRef","useApplyStyle","styles.tokens","panel","undefined","_jsx","Object","assign","ref","tabIndex","onKeyDown","e","isNextKey","key","isPrevKey","focusables","container","Array","from","querySelectorAll","filter","el","hasAttribute","getFocusables","currentTarget","length","active","document","activeElement","idx","indexOf","preventDefault","delta","focus","clsx","styles.panel","displayName"],"mappings":"shBAWA,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,UACRA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EANW,+DAWxB,MAAMQ,EAAWC,EAAAA,OAAuB,MAExCC,EAAAA,cAAcF,EAAU,CACpB,CAACG,EAAAA,OAAcC,MAAMP,gBACHQ,IAAdR,EAA0B,GAAGA,MAAgB,KACjD,CAACM,SAAcC,MAAMR,UAAWA,GAAY,OAkChD,OACIU,MAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKT,EAAQ,cACAL,EACbe,UAAU,EACVC,UAlCeC,UACnB,MAAMC,EAAsB,cAAVD,EAAEE,KAAiC,eAAVF,EAAEE,IACvCC,EAAsB,YAAVH,EAAEE,KAA+B,cAAVF,EAAEE,IAE3C,IAAKD,IAAcE,EAAW,OAE9B,MACMC,EApCQ,CAACC,GACZC,MAAMC,KACTF,EAAUG,iBACN,qEAENC,QAAQC,IAAQA,EAAGC,aAAa,cA+BXC,CADDZ,EAAEa,eAEpB,IAAKT,EAAWU,OAAQ,OAExB,MAAMC,EAASC,SAASC,cAClBC,EAAMH,EAASX,EAAWe,QAAQJ,IAAU,EAElDf,EAAEoB,iBAEF,MAAMC,EAAQpB,EAAY,GAAI,EAST,QAArBrB,EAAAwB,GANY,IAARc,EACMjB,EACI,EACAG,EAAWU,OAAS,GACvBI,EAAMG,EAAQjB,EAAWU,QAAUV,EAAWU,eAEpC,IAAAlC,GAAAA,EAAE0C,OAAO,EAW1BxC,UAAWyC,UAAKC,EAAAA,MAAc1C,IAC1BI,EAAU,CAAAL,SAEbA,IACC,EAIdF,EAAY8C,YAAc"}

package/cjs/menu/menu-content.styles.js

@@ -1,49 +1,2 @@
-"use strict";var r=require("styled-components"),a=require("../v3_theme/index.js");function e(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}const i=e(r).default.div`
-    border-radius: ${a.V3_Radius.md};
-    border: ${a.V3_Border["width-010"]} ${a.V3_Border.solid}
-        ${a.V3_Colour.border};
-    background: ${a.V3_Colour.bg};
-    box-shadow: ${a.V3_Shadow["md-subtle"]};
-
-    --x-spacing: 0px;
-    --available-width: calc(100vw - var(--x-spacing) * 2);
-
-    ${a.V3_MediaQuery.MaxWidth.sm} {
-        --x-spacing: ${a.V3_Breakpoint["sm-margin"]}px;
-    }
-
-    ${a.V3_MediaQuery.MaxWidth.xs} {
-        --x-spacing: ${a.V3_Breakpoint["xs-margin"]}px;
-    }
-
-    ${a.V3_MediaQuery.MaxWidth.xxs} {
-        --x-spacing: ${a.V3_Breakpoint["xxs-margin"]}px;
-    }
-
-    min-width: min(15rem, var(--available-width));
-    max-width: min(24rem, var(--available-width));
-
-    ${({$maxHeight:r})=>void 0!==r&&`\n        max-height: ${r}px;\n    `}
-
-    ${({$overflow:r})=>r&&`\n        overflow-y: ${r};\n    `}
-
-    &:focus {
-        outline: none;
-    }
-
-    &::-webkit-scrollbar {
-        width: 14px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: ${a.V3_Colour["bg-inverse-subtlest"]};
-        border: 5px solid transparent;
-        border-radius: ${a.V3_Radius.full};
-        background-clip: padding-box;
-    }
-`;exports.MenuPanel=i;
+"use strict";require("./menu-content.styles_1b7d6qf.css");exports.panel="pmssexq",exports.tokens={panel:{maxHeight:"--fds-internal-menu-panel-maxHeight",overflow:"--fds-internal-menu-panel-overflow"}};
 //# sourceMappingURL=menu-content.styles.js.map

package/cjs/menu/menu-content.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-content.styles.js","sources":["../../../src/menu/menu-content.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport type { PopoverOverflowType } from \"../popover-v2/types\";\nimport {\n    V3_Border,\n    V3_Breakpoint,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLES INTERFACE\n// =============================================================================\ninterface MenuPanelStylesProps {\n    $overflow?: PopoverOverflowType | undefined;\n    $maxHeight?: number | undefined;\n}\n\n// =============================================================================\n// MENU CONTENT STYLES\n// =============================================================================\nexport const MenuPanel = styled.div<MenuPanelStylesProps>`\n    border-radius: ${V3_Radius[\"md\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    background: ${V3_Colour[\"bg\"]};\n    box-shadow: ${V3_Shadow[\"md-subtle\"]};\n\n    --x-spacing: 0px;\n    --available-width: calc(100vw - var(--x-spacing) * 2);\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        --x-spacing: ${V3_Breakpoint[\"sm-margin\"]}px;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xs} {\n        --x-spacing: ${V3_Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        --x-spacing: ${V3_Breakpoint[\"xxs-margin\"]}px;\n    }\n\n    min-width: min(15rem, var(--available-width));\n    max-width: min(24rem, var(--available-width));\n\n    ${({ $maxHeight }) =>\n        $maxHeight !== undefined &&\n        `\n        max-height: ${$maxHeight}px;\n    `}\n\n    ${({ $overflow }) =>\n        $overflow &&\n        `\n        overflow-y: ${$overflow};\n    `}\n\n    &:focus {\n        outline: none;\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${V3_Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${V3_Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n"],"names":["MenuPanel","styled","div","V3_Radius","V3_Border","V3_Colour","V3_Shadow","V3_MediaQuery","MaxWidth","sm","V3_Breakpoint","xs","xxs","$maxHeight","undefined","$overflow"],"mappings":"0JAuBO,MAAMA,OAAYC,QAAOC,GAAyB;qBACpCC,EAAAA,UAAc;cACrBC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CC,EAAAA,UAAkB;kBACVA,EAAAA,UAAc;kBACdC,EAAAA,UAAU;;;;;MAKtBC,EAAAA,cAAcC,SAASC;uBACNC,EAAAA,cAAc;;;MAG/BH,EAAAA,cAAcC,SAASG;uBACND,EAAAA,cAAc;;;MAG/BH,EAAAA,cAAcC,SAASI;uBACNF,EAAAA,cAAc;;;;;;MAM/B,EAAGG,qBACcC,IAAfD,GACA,yBACcA;;MAGhB,EAAGE,eACDA,GACA,yBACcA;;;;;;;;;;;;;;;sBAgBAV,EAAAA,UAAU;;yBAEPF,EAAAA,UAAgB;;;"}
+{"version":3,"file":"menu-content.styles.js","sources":["../../../src/menu/menu-content.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    MediaQuery,\n    Radius,\n    Shadow,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n    panel: {\n        availableWidth: \"--fds-internal-menu-panel-availableWidth\",\n        maxHeight: \"--fds-internal-menu-panel-maxHeight\",\n        overflow: \"--fds-internal-menu-panel-overflow\",\n        xSpacing: \"--fds-internal-menu-panel-xSpacing\",\n    },\n} as const;\n\nexport const panel = css`\n    border-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n    box-shadow: ${Shadow[\"md-subtle\"]};\n\n    ${tokens.panel.maxHeight}: initial;\n    ${tokens.panel.overflow}: initial;\n    ${tokens.panel.xSpacing}: 0px;\n    ${tokens.panel.availableWidth}: calc(100vw - var(${tokens.panel\n        .xSpacing}) * 2);\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"sm-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xxs-margin\"]}px;\n    }\n\n    min-width: min(15rem, var(${tokens.panel.availableWidth}));\n    max-width: min(24rem, var(${tokens.panel.availableWidth}));\n    max-height: var(${tokens.panel.maxHeight});\n    overflow-y: var(${tokens.panel.overflow});\n\n    &:focus {\n        outline: none;\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n"],"names":["panel","maxHeight","overflow"],"mappings":"4FAoBkB,yBATI,CAClBA,MAAO,CAEHC,UAAW,sCACXC,SAAU"}

package/cjs/menu/menu-content.styles_1b7d6qf.css

@@ -0,0 +1,2 @@
+.pmssexq{border-radius:var(--fds-radius-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-md-subtle);--fds-internal-menu-panel-maxHeight:initial;--fds-internal-menu-panel-overflow:initial;--fds-internal-menu-panel-xSpacing:0px;--fds-internal-menu-panel-availableWidth:calc(100vw - var(--fds-internal-menu-panel-xSpacing
+              ) * 2);min-width:min(15rem, var(--fds-internal-menu-panel-availableWidth));max-width:min(24rem, var(--fds-internal-menu-panel-availableWidth));max-height:var(--fds-internal-menu-panel-maxHeight);overflow-y:var(--fds-internal-menu-panel-overflow);}:where(body.fds-breakpoint-sm-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-sm)px;}:where(body.fds-breakpoint-xs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xs)px;}:where(body.fds-breakpoint-xxs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xxs)px;}.pmssexq:focus{outline:none;}.pmssexq::-webkit-scrollbar{width:14px;}.pmssexq::-webkit-scrollbar-track{background:transparent;}.pmssexq::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}

package/cjs/menu/menu-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("../typography/index.js"),s=require("./menu-item.styles.js");const i=i=>{var{label:a,subLabel:l,children:u,"data-testid":d="menu-item"}=i,n=e.__rest(i,["label","subLabel","children","data-testid"]);return t.jsxs(s.MenuItemDiv,Object.assign({"data-testid":d},n,{children:[a&&t.jsx(r.Typography.BodyMD,{weight:"semibold",children:a}),l&&t.jsx(s.SubLabel,{children:l}),u]}))};i.displayName="Menu.Item",exports.MenuItem=i;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),s=require("clsx"),a=require("../typography/index.js"),r=require("./menu-item.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(s);const u=s=>{var{label:i,subLabel:u,children:d,className:n,"data-testid":c="menu-item"}=s,m=e.__rest(s,["label","subLabel","children","className","data-testid"]);return t.jsxs("li",Object.assign({"data-testid":c,className:l.default(r.menuItemDiv,r.text,n)},m,{children:[i&&t.jsx(a.Typography.BodyMD,{className:r.text,weight:"semibold",children:i}),u&&t.jsx(a.Typography.BodySM,{className:r.subLabel,children:u}),d]}))};u.displayName="Menu.Item",exports.MenuItem=u;
 //# sourceMappingURL=menu-item.js.map

package/cjs/menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sources":["../../../src/menu/menu-item.tsx"],"sourcesContent":["import { Typography } from \"../typography\";\nimport { MenuItemDiv, SubLabel } from \"./menu-item.styles\";\nimport type { MenuItemProps } from \"./types\";\n\nexport const MenuItem = ({\n    label,\n    subLabel,\n    children,\n    \"data-testid\": testId = \"menu-item\",\n    ...otherProps\n}: MenuItemProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <MenuItemDiv data-testid={testId} {...otherProps}>\n            {label && (\n                <Typography.BodyMD weight=\"semibold\">{label}</Typography.BodyMD>\n            )}\n            {subLabel && <SubLabel>{subLabel}</SubLabel>}\n            {children}\n        </MenuItemDiv>\n    );\n};\n\nMenuItem.displayName = \"Menu.Item\";\n"],"names":["MenuItem","_a","label","subLabel","children","testId","otherProps","__rest","_jsxs","MenuItemDiv","Object","assign","_jsx","Typography","BodyMD","weight","SubLabel","displayName"],"mappings":"0JAIO,MAAMA,EAAYC,IAAA,IAAAC,MACrBA,EAAKC,SACLA,EAAQC,SACRA,EACA,cAAeC,EAAS,aAAWJ,EAChCK,EAAUC,EAAAA,OAAAN,EALQ,+CAUrB,OACIO,EAAAA,KAACC,EAAAA,YAAWC,OAAAC,OAAA,CAAA,cAAcN,GAAYC,EAAU,CAAAF,SAAA,CAC3CF,GACGU,EAAAA,IAACC,EAAAA,WAAWC,OAAM,CAACC,OAAO,oBAAYb,IAEzCC,GAAYS,EAAAA,IAACI,EAAAA,SAAQ,CAAAZ,SAAED,IACvBC,KACS,EAItBJ,EAASiB,YAAc"}
+{"version":3,"file":"menu-item.js","sources":["../../../src/menu/menu-item.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./menu-item.styles\";\nimport type { MenuItemProps } from \"./types\";\n\nexport const MenuItem = ({\n    label,\n    subLabel,\n    children,\n    className,\n    \"data-testid\": testId = \"menu-item\",\n    ...otherProps\n}: MenuItemProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <li\n            data-testid={testId}\n            className={clsx(styles.menuItemDiv, styles.text, className)}\n            {...otherProps}\n        >\n            {label && (\n                <Typography.BodyMD className={styles.text} weight=\"semibold\">\n                    {label}\n                </Typography.BodyMD>\n            )}\n            {subLabel && (\n                <Typography.BodySM className={styles.subLabel}>\n                    {subLabel}\n                </Typography.BodySM>\n            )}\n            {children}\n        </li>\n    );\n};\n\nMenuItem.displayName = \"Menu.Item\";\n"],"names":["MenuItem","_a","label","subLabel","children","className","testId","otherProps","__rest","_jsxs","Object","assign","clsx","styles.menuItemDiv","styles.text","_jsx","Typography","BodyMD","weight","BodySM","styles.subLabel","displayName"],"mappings":"+PAMO,MAAMA,EAAYC,IAAA,IAAAC,MACrBA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,UACRA,EACA,cAAeC,EAAS,aAAWL,EAChCM,EAAUC,EAAAA,OAAAP,EANQ,2DAWrB,OACIQ,EAAAA,KAAA,KAAAC,OAAAC,OAAA,CAAA,cACiBL,EACbD,UAAWO,UAAKC,EAAAA,YAAoBC,EAAAA,KAAaT,IAC7CE,EAAU,CAAAH,SAAA,CAEbF,GACGa,MAACC,EAAAA,WAAWC,OAAM,CAACZ,UAAWS,EAAAA,KAAaI,OAAO,WAAUd,SACvDF,IAGRC,GACGY,MAACC,EAAAA,WAAWG,OAAM,CAACd,UAAWe,EAAAA,SAAehB,SACxCD,IAGRC,KACA,EAIbJ,EAASqB,YAAc"}

package/cjs/menu/menu-item.styles.js

@@ -1,8 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../typography/index.js"),r=require("../v3_theme/index.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(e);const o=n.default.li`
-    display: flex;
-    flex-direction: column;
-    padding: ${r.V3_Spacing["spacing-8"]} ${r.V3_Spacing["spacing-16"]};
-`,a=n.default(t.Typography.BodySM)`
-    color: ${r.V3_Colour["text-subtler"]};
-`;exports.MenuItemDiv=o,exports.SubLabel=a;
+"use strict";require("./menu-item.styles_liyed8.css");exports.menuItemDiv="m1ddqpur",exports.subLabel="s12tso9",exports.text="tor9xcz";
 //# sourceMappingURL=menu-item.styles.js.map

package/cjs/menu/menu-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.js","sources":["../../../src/menu/menu-item.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// MENU ITEM STYLES\n// =============================================================================\nexport const MenuItemDiv = styled.li`\n    display: flex;\n    flex-direction: column;\n    padding: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const SubLabel = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n"],"names":["MenuItemDiv","styled","li","V3_Spacing","SubLabel","Typography","BodySM","V3_Colour"],"mappings":"yMAQO,MAAMA,EAAcC,EAAAA,QAAOC,EAAE;;;eAGrBC,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;EAGxCC,EAAWH,EAAAA,QAAOI,aAAWC,OAAO;aACpCC,EAAAA,UAAU;"}
+{"version":3,"file":"menu-item.styles.js","sources":["../../../src/menu/menu-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme/tokens\";\n\nexport const menuItemDiv = css`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const text = css`\n    color: ${Colour[\"text\"]};\n`;\n\nexport const subLabel = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"8FAIwB,4BAUH,uBAJJ"}

package/cjs/menu/menu-item.styles_liyed8.css

@@ -0,0 +1,3 @@
+.m1ddqpur{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--fds-spacing-8) var(--fds-spacing-16);}
+.tor9xcz{color:var(--fds-colour-text);}
+.s12tso9{color:var(--fds-colour-text-subtler);}

package/cjs/menu/menu-link.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),n=require("./menu-link.styles.js");const t=t=>{var{children:r,"data-testid":s="menu-link"}=t,a=e.__rest(t,["children","data-testid"]);return i.jsx(n.MenuLinkDiv,{children:i.jsx(n.Link,Object.assign({"data-testid":s,underlineStyle:"none"},a,{children:r}))})};t.displayName="Menu.Link",exports.MenuLink=t;
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),r=require("clsx"),t=require("../typography/index.js"),n=require("./menu-link.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=s(r);const l=r=>{var{children:s,className:l,"data-testid":u="menu-link"}=r,d=e.__rest(r,["children","className","data-testid"]);return i.jsx("li",{className:n.menuLinkDiv,children:i.jsx(t.Typography.LinkMD,Object.assign({"data-testid":u,underlineStyle:"none",className:a.default(n.link,l)},d,{children:s}))})};l.displayName="Menu.Link",exports.MenuLink=l;
 //# sourceMappingURL=menu-link.js.map

package/cjs/menu/menu-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-link.js","sources":["../../../src/menu/menu-link.tsx"],"sourcesContent":["import { Link, MenuLinkDiv } from \"./menu-link.styles\";\nimport type { MenuLinkProps } from \"./types\";\n\nexport const MenuLink = ({\n    children,\n    \"data-testid\": testId = \"menu-link\",\n    ...otherProps\n}: MenuLinkProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <MenuLinkDiv>\n            <Link data-testid={testId} underlineStyle=\"none\" {...otherProps}>\n                {children}\n            </Link>\n        </MenuLinkDiv>\n    );\n};\n\nMenuLink.displayName = \"Menu.Link\";\n"],"names":["MenuLink","_a","children","testId","otherProps","__rest","_jsx","MenuLinkDiv","Link","underlineStyle","displayName"],"mappings":"sHAGO,MAAMA,EAAYC,IAAA,IAAAC,SACrBA,EACA,cAAeC,EAAS,aAAWF,EAChCG,EAAUC,EAAAA,OAAAJ,EAHQ,CAAA,WAAA,gBAQrB,OACIK,EAAAA,IAACC,EAAAA,sBACGD,EAAAA,IAACE,oCAAkBL,EAAQM,eAAe,QAAWL,EAAU,CAAAF,SAC1DA,MAEK,EAItBF,EAASU,YAAc"}
+{"version":3,"file":"menu-link.js","sources":["../../../src/menu/menu-link.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./menu-link.styles\";\nimport type { MenuLinkProps } from \"./types\";\n\nexport const MenuLink = ({\n    children,\n    className,\n    \"data-testid\": testId = \"menu-link\",\n    ...otherProps\n}: MenuLinkProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <li className={styles.menuLinkDiv}>\n            <Typography.LinkMD\n                data-testid={testId}\n                underlineStyle=\"none\"\n                className={clsx(styles.link, className)}\n                {...otherProps}\n            >\n                {children}\n            </Typography.LinkMD>\n        </li>\n    );\n};\n\nMenuLink.displayName = \"Menu.Link\";\n"],"names":["MenuLink","_a","children","className","testId","otherProps","__rest","_jsx","styles.menuLinkDiv","Typography","LinkMD","Object","assign","underlineStyle","clsx","styles.link","displayName"],"mappings":"+PAMO,MAAMA,EAAYC,IAAA,IAAAC,SACrBA,EAAQC,UACRA,EACA,cAAeC,EAAS,aAAWH,EAChCI,EAAUC,EAAAA,OAAAL,EAJQ,wCASrB,OACIM,MAAA,KAAA,CAAIJ,UAAWK,EAAAA,YAAkBN,SAC7BK,EAAAA,IAACE,EAAAA,WAAWC,OAAMC,OAAAC,OAAA,CAAA,cACDR,EACbS,eAAe,OACfV,UAAWW,EAAAA,QAAKC,EAAAA,KAAaZ,IACzBE,EAAU,CAAAH,SAEbA,MAEJ,EAIbF,EAASgB,YAAc"}