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

package/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/menu/menu-content.d.ts

@@ -1,5 +1,5 @@
 import type { MenuContentProps } from "./types";
 export declare const MenuContent: {
-    ({ children, "data-testid": testId, overflow, maxHeight, ...otherProps }: MenuContentProps): JSX.Element;
+    ({ children, className, "data-testid": testId, overflow, maxHeight, ...otherProps }: MenuContentProps): JSX.Element;
     displayName: string;
 };

package/menu/menu-content.js

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

package/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":"4IAQA,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASJ,EACNK,EAAUC,EAAAN,EALW,mDAuCxB,OACIO,EAACC,EAASC,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":"mhBAWA,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,UACRA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAP,EANW,+DAWxB,MAAMQ,EAAWC,EAAuB,MAExCC,EAAcF,EAAU,CACpB,CAACG,EAAcC,MAAMP,gBACHQ,IAAdR,EAA0B,GAAGA,MAAgB,KACjD,CAACM,EAAcC,MAAMR,UAAWA,GAAY,OAkChD,OACIU,EAAA,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,EAAKC,EAAc1C,IAC1BI,EAAU,CAAAL,SAEbA,IACC,EAIdF,EAAY8C,YAAc"}

package/menu/menu-content.styles.d.ts

@@ -1,7 +1,9 @@
-import type { PopoverOverflowType } from "../popover-v2/types";
-interface MenuPanelStylesProps {
-    $overflow?: PopoverOverflowType | undefined;
-    $maxHeight?: number | undefined;
-}
-export declare const MenuPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, MenuPanelStylesProps>> & string;
-export {};
+export declare const tokens: {
+    readonly panel: {
+        readonly availableWidth: "--fds-internal-menu-panel-availableWidth";
+        readonly maxHeight: "--fds-internal-menu-panel-maxHeight";
+        readonly overflow: "--fds-internal-menu-panel-overflow";
+        readonly xSpacing: "--fds-internal-menu-panel-xSpacing";
+    };
+};
+export declare const panel: import("@linaria/core").LinariaClassName;

package/menu/menu-content.styles.js

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

package/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":"qKAuBO,MAAMA,EAAYC,EAAOC,GAAyB;qBACpCC,EAAc;cACrBC,EAAU,gBAAgBA,EAAiB;UAC/CC,EAAkB;kBACVA,EAAc;kBACdC,EAAU;;;;;MAKtBC,EAAcC,SAASC;uBACNC,EAAc;;;MAG/BH,EAAcC,SAASG;uBACND,EAAc;;;MAG/BH,EAAcC,SAASI;uBACNF,EAAc;;;;;;MAM/B,EAAGG,qBACcC,IAAfD,GACA,yBACcA;;MAGhB,EAAGE,eACDA,GACA,yBACcA;;;;;;;;;;;;;;;sBAgBAV,EAAU;;yBAEPF,EAAgB;;;"}
+{"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\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xs-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xxs-margin\"]};\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":["tokens","panel","maxHeight","overflow"],"mappings":"6DAWO,MAAMA,EAAS,CAClBC,MAAO,CAEHC,UAAW,sCACXC,SAAU,uCAKLF,EAAK"}

package/menu/menu-content.styles_p7ijll.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);}:where(body.fds-breakpoint-xs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xxs);}.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/menu/menu-item.d.ts

@@ -1,5 +1,5 @@
 import type { MenuItemProps } from "./types";
 export declare const MenuItem: {
-    ({ label, subLabel, children, "data-testid": testId, ...otherProps }: MenuItemProps): JSX.Element;
+    ({ label, subLabel, children, className, "data-testid": testId, ...otherProps }: MenuItemProps): JSX.Element;
     displayName: string;
 };

package/menu/menu-item.js

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

package/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":"uNAIO,MAAMA,EAAYC,IAAA,IAAAC,MACrBA,EAAKC,SACLA,EAAQC,SACRA,EACA,cAAeC,EAAS,aAAWJ,EAChCK,EAAUC,EAAAN,EALQ,+CAUrB,OACIO,EAACC,EAAWC,OAAAC,OAAA,CAAA,cAAcN,GAAYC,EAAU,CAAAF,SAAA,CAC3CF,GACGU,EAACC,EAAWC,OAAM,CAACC,OAAO,oBAAYb,IAEzCC,GAAYS,EAACI,EAAQ,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":"qPAMO,MAAMA,EAAYC,IAAA,IAAAC,MACrBA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,UACRA,EACA,cAAeC,EAAS,aAAWL,EAChCM,EAAUC,EAAAP,EANQ,2DAWrB,OACIQ,EAAA,KAAAC,OAAAC,OAAA,CAAA,cACiBL,EACbD,UAAWO,EAAKC,EAAoBC,EAAaT,IAC7CE,EAAU,CAAAH,SAAA,CAEbF,GACGa,EAACC,EAAWC,OAAM,CAACZ,UAAWS,EAAaI,OAAO,WAAUd,SACvDF,IAGRC,GACGY,EAACC,EAAWG,OAAM,CAACd,UAAWe,EAAehB,SACxCD,IAGRC,KACA,EAIbJ,EAASqB,YAAc"}

package/menu/menu-item.styles.d.ts

@@ -1,4 +1,3 @@
-export declare const MenuItemDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export declare const SubLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
+export declare const menuItemDiv: import("@linaria/core").LinariaClassName;
+export declare const text: import("@linaria/core").LinariaClassName;
+export declare const subLabel: import("@linaria/core").LinariaClassName;