@sebgroup/green-core 2.35.1 → 2.36.0

package/components/table/table.styles.js

@@ -400,6 +400,10 @@ const TableStyles = css`
       display: contents;
     }
 
+    .responsive table {
+      max-width: 100%;
+    }
+
     .responsive thead {
       position: sticky;
       top: var(--gds-sys-space-s);
@@ -449,11 +453,21 @@ const TableStyles = css`
 
     .responsive td .column-label {
       text-align: left;
-      margin-right: auto;
+      flex: 1;
+      min-width: 0;
     }
 
     .responsive td .cell-content {
+      justify-content: flex-start;
+      flex: 1;
+      width: 100%;
+      gap: var(--gds-sys-space-s);
+    }
+
+    .responsive td .cell-wrapped-content {
       flex: 1;
+      justify-content: flex-end;
+      text-align: right;
     }
 
     .responsive tr:hover,
@@ -463,7 +477,6 @@ const TableStyles = css`
   }
 
   /* Medium screens: input and dropdown side by side */
-  /* Medium screens: side by side layout */
   @media (max-width: 760px) and (min-width: 480px) {
     .header {
       display: grid;

package/components/table/table.types.d.ts

@@ -1,6 +1,3 @@
-import type { GdsElement } from '../../gds-element';
-import type { GdsBadge, GdsButton, GdsContextMenu, GdsIcon, GdsImg, GdsLink } from '../../pure';
-import type { AccountFormats, DateTimeFormat, NumberFormats } from '../formatted-text/formatters';
 /**
  * ============================================================================
  *  TABLE TYPES
@@ -15,17 +12,12 @@ export interface Column {
     justify?: 'start' | 'center' | 'space-between' | 'end';
     visible?: boolean;
     width?: string;
-    cell?: {
-        lead?: Cell | Cell[];
-        value?: Cell | Cell[];
-        trail?: Cell | Cell[];
-    };
 }
 export interface Actions {
     label?: string;
     align?: 'start' | 'center' | 'stretch' | 'end';
     justify?: 'start' | 'center' | 'space-between' | 'end';
-    cell: Cell | Cell[];
+    width?: string;
 }
 export interface Row {
     [key: string]: any;
@@ -49,28 +41,26 @@ export interface Response<T> {
     rows: T[];
     total: number;
 }
+/**
+ * Internal density configuration for the table's built-in UI controls
+ * (search input, column settings dropdown). Does not affect user-provided
+ * slot content — size your own components to match the chosen density.
+ */
 export declare const DENSITY_CONFIG: {
     readonly compact: {
-        readonly button: "small";
         readonly input: "small";
         readonly dropdown: "small";
-        readonly badge: "small";
     };
     readonly comfortable: {
-        readonly button: "small";
         readonly input: "small";
         readonly dropdown: "small";
-        readonly badge: "small";
     };
     readonly spacious: {
-        readonly button: "medium";
         readonly input: "large";
         readonly dropdown: "medium";
-        readonly badge: "default";
     };
 };
 export type Density = 'comfortable' | 'compact' | 'spacious';
-export type DensityConfig = (typeof DENSITY_CONFIG)[Density];
 export interface CacheEntry<T> {
     rows: T[];
     total: number;
@@ -79,6 +69,15 @@ export interface CacheEntry<T> {
 export interface Cache<T> {
     [key: string]: CacheEntry<T>;
 }
+export type SlotValue = {
+    value?: unknown;
+    slots: string[];
+    key?: string | number;
+};
+export declare const isSlotValue: (value: unknown) => value is SlotValue;
+export declare function Slot(config: SlotValue): SlotValue;
+export declare function Slot(value?: unknown, slots?: string[], key?: string | number): SlotValue;
+export declare function Slot(value?: unknown, key?: string | number, slots?: string[]): SlotValue;
 export type TableActions = Actions;
 export type TableColumn = Column;
 export type TableRow = Row;
@@ -86,70 +85,6 @@ export type TableState = State;
 export type TableRequest = Request;
 export type TableResponse<T> = Response<T>;
 export type TableDensity = Density;
-export type TableDensityConfig = DensityConfig;
 export type TableCache<T> = Cache<T>;
 export type TableCacheEntry<T> = CacheEntry<T>;
-/**
- * ============================================================================
- *  CELL COMPONENT TYPES
- * ============================================================================
- */
-type CellProps<T> = {
-    [K in keyof T]?: T[K] | ((row: any) => T[K]);
-};
-export interface Badge extends CellProps<Pick<GdsBadge, 'variant' | 'size'>> {
-    type: 'badge';
-    value: string | ((row: any) => string);
-}
-export interface Image extends CellProps<Omit<GdsImg, keyof GdsElement>> {
-    type: 'image';
-    src: string | ((row: any) => string);
-}
-export interface Icon extends CellProps<Omit<GdsIcon, keyof GdsElement>> {
-    type: 'icon';
-    template: string | ((row: any) => string);
-}
-export interface Button extends CellProps<Omit<GdsButton, keyof GdsElement>> {
-    type: 'button';
-    template?: string | ((row: any) => string);
-    onClick: (row: any) => void;
-}
-export interface Link extends CellProps<Omit<GdsLink, keyof GdsElement>> {
-    type: 'link';
-    template?: string | ((row: any) => string);
-    onClick?: (row: any) => void;
-}
-export interface ContextMenu extends CellProps<Omit<GdsContextMenu, keyof GdsElement>> {
-    type: 'context-menu';
-    items: Array<{
-        label: string | ((row: any) => string);
-        divider?: boolean;
-        onClick: (row: any) => void;
-    }>;
-}
-export interface FormattedNumber {
-    type: 'formatted-number';
-    value: number | string | ((row: any) => number | string);
-    locale?: string;
-    currency?: string;
-    decimals?: number;
-    format?: NumberFormats;
-}
-export interface FormattedAccount {
-    type: 'formatted-account';
-    value: string | ((row: any) => string);
-    format?: AccountFormats;
-}
-export interface FormattedDate {
-    type: 'formatted-date';
-    value: string | Date | ((row: any) => string | Date);
-    locale?: string;
-    format?: DateTimeFormat;
-}
-export type Cell = Image | Icon | Button | Link | Badge | ContextMenu | FormattedNumber | FormattedAccount | FormattedDate;
-export interface CellConfig {
-    lead?: Cell;
-    value?: Cell;
-    trail?: Cell;
-}
-export {};
+export type TableSlotValue = SlotValue;

package/components/table/table.types.js

@@ -1,24 +1,54 @@
 import "../../chunks/chunk.QU3DSPNU.js";
 const DENSITY_CONFIG = {
   compact: {
-    button: "small",
     input: "small",
-    dropdown: "small",
-    badge: "small"
+    dropdown: "small"
   },
   comfortable: {
-    button: "small",
     input: "small",
-    dropdown: "small",
-    badge: "small"
+    dropdown: "small"
   },
   spacious: {
-    button: "medium",
     input: "large",
-    dropdown: "medium",
-    badge: "default"
+    dropdown: "medium"
   }
 };
+const isSlotValue = (value) => typeof value === "object" && value !== null && Array.isArray(value.slots);
+const slotPrototype = {
+  toString() {
+    return String(this.value ?? "");
+  },
+  valueOf() {
+    return this.value;
+  },
+  [Symbol.toPrimitive](hint) {
+    if (hint === "number") return Number(this.value);
+    return String(this.value ?? "");
+  }
+};
+function Slot(valueOrConfig, slotsOrKey = ["value"], keyOrSlots) {
+  if (isSlotValue(valueOrConfig)) return valueOrConfig;
+  let slots = ["value"];
+  let key;
+  if (Array.isArray(slotsOrKey)) {
+    slots = slotsOrKey;
+  } else if (typeof slotsOrKey === "string" || typeof slotsOrKey === "number") {
+    key = slotsOrKey;
+  }
+  if (Array.isArray(keyOrSlots)) {
+    slots = keyOrSlots;
+  } else if (typeof keyOrSlots === "string" || typeof keyOrSlots === "number") {
+    key = keyOrSlots;
+  }
+  const slotValue = Object.assign(Object.create(slotPrototype), {
+    value: valueOrConfig,
+    slots,
+    ...typeof key !== "undefined" ? { key } : {}
+  });
+  return slotValue;
+}
 export {
-  DENSITY_CONFIG
+  DENSITY_CONFIG,
+  Slot,
+  isSlotValue
 };

package/components/theme/chlorophyll-tokens.scss.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* Mixin for adding themes,\nThemes such as dark-mode, high-contrast mode etc.\nValues for light mode are used by default.\n*/\n/* mixin for generating css variables from map with optional prefix */\n/**\n * Do not edit directly, this file was auto-generated.\n */\n/**\n * Do not edit directly, this file was auto-generated.\n */\n:host {\n  display: contents;\n  --gds-sys-shape-corner-none: 0;\n  --gds-sys-shape-corner-small: 0.125rem;\n  --gds-sys-shape-corner-medium: 0.25rem;\n  --gds-sys-shape-corner-round: 50%;\n  --gds-comp-checkbox-container-height: 1rem;\n  --gds-comp-checkbox-container-width: 1rem;\n  --gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);\n  --gds-comp-checkbox-container-color-disabled: var(--gds-sys-color-base-300);\n  --gds-comp-checkbox-border-color: var(--gds-sys-color-base-900);\n  --gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);\n  --gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base-600);\n  --gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base-900);\n  --gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);\n  --gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2);\n}\n\n:host([color-scheme=light]) {\n  --gds-ref-color-white: #ffffff;\n  --gds-ref-color-black: #000000;\n  --gds-ref-pallet-base000: hsl(0 0% 100%);\n  --gds-ref-pallet-base100: hsl(0, 0%, 97%);\n  --gds-ref-pallet-base200: hsl(0, 0%, 91%);\n  --gds-ref-pallet-base300: hsl(0, 0%, 87%);\n  --gds-ref-pallet-base400: hsl(0, 0%, 81%);\n  --gds-ref-pallet-base500: hsl(0, 0%, 68%);\n  --gds-ref-pallet-base600: hsl(0, 0%, 53%);\n  --gds-ref-pallet-base700: hsl(0, 0%, 29%);\n  --gds-ref-pallet-base800: hsl(0, 0%, 20%);\n  --gds-ref-pallet-base900: hsl(0, 0%, 10%);\n  --gds-ref-pallet-base1000: hsl(0 0% 0%);\n  --gds-sys-color-blue: #41b0ee;\n  --gds-sys-color-blue-dark-1: #0092e1;\n  --gds-sys-color-blue-dark-2: #007ac7;\n  --gds-sys-color-surface: var(--gds-ref-pallet-base000);\n  --gds-sys-color-base: var(--gds-ref-pallet-base800);\n  --gds-sys-color-font: var(--gds-ref-pallet-base800);\n  --gds-sys-color-base-container: var(--gds-ref-pallet-base500);\n  --gds-sys-color-focus-outline: var(--gds-ref-pallet-base1000);\n  --gds-sys-color-blue: #41b0ee;\n  --gds-sys-color-dark-blue-1: #41b0ee;\n  --gds-sys-color-dark-blue-2: #007ac7;\n  --gds-sys-color-green: #60cd18;\n  --gds-sys-color-dark-green-1: #45b400;\n  --gds-sys-color-dark-green-2: #308800;\n  --gds-sys-color-yellow: #ffc500;\n  --gds-sys-color-dark-yellow-1: #ffb400;\n  --gds-sys-color-dark-yellow-2: #f8a000;\n  --gds-sys-color-text-primary: #333333;\n  --gds-sys-color-text-secondary: #ababab;\n  --gds-sys-color-text-white: #ffffff;\n  --gds-sys-color-text-black: #333333;\n  --gds-sys-color-text-inverted: #ffffff;\n  --gds-sys-color-text-link: #0062bc;\n  --gds-sys-color-text-error: #9f000a;\n  --gds-sys-color-text-disabled: #adadad;\n  --gds-sys-color-red: #f03529;\n  --gds-sys-color-dark-red-1: #d81a1a;\n  --gds-sys-color-dark-red-2: #bb000c;\n  --gds-sys-color-purple: #673ab6;\n  --gds-sys-color-dark-purple-1: #4f2c99;\n  --gds-sys-color-dark-purple-2: #3f2587;\n  --gds-sys-color-white: #ffffff;\n  --gds-sys-color-black: #000000;\n  --gds-sys-color-background-primary: #ffffff;\n  --gds-sys-color-background-secondary: #eeeeee;\n  --gds-sys-color-base-100: #f8f8f8;\n  --gds-sys-color-base-200: #e9e9e9;\n  --gds-sys-color-base-300: #dedede;\n  --gds-sys-color-base-400: #cecece;\n  --gds-sys-color-base-500: #adadad;\n  --gds-sys-color-base-600: #868686;\n  --gds-sys-color-base-700: #494949;\n  --gds-sys-color-base-800: #333333;\n  --gds-sys-color-base-900: #1a1a1a;\n  --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n  --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n  --heading-primary-color: rgb(0, 0, 0);\n  --text-primary-color: rgb(51, 51, 51);\n  --text-secondary-color: rgb(134, 134, 134);\n  --text-disabled-color: var(--gds-sys-color-base-600);\n  --text-primary-disabled-color: var(--gds-sys-color-base-600);\n  --border-color: rgba(0, 0, 0, 0.17);\n  --border-secondary-color: rgba(0, 0, 0, 0.1);\n  --border-disabled-color: var(--gds-sys-color-base-500);\n  --border-primary-disabled-color: var(--gds-sys-color-base-500);\n  --border-color-invalid: rgb(159, 0, 10);\n  --border-color-valid: rgb(55, 157, 0);\n  --checkbox-checkmark-disabled-color: rgb(255, 255, 255);\n  --form-control-primary-bg-disabled: var(--gds-sys-color-base-200);\n  --link-color-dark: rgb(51, 51, 51);\n  --link-color-dark-visited: rgb(73, 73, 73);\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-primary-background: rgb(0, 122, 199);\n  --intent-primary-color: #fff;\n  --intent-primary-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-secondary-background: rgb(222, 222, 222);\n  --intent-secondary-color: black;\n  --intent-secondary-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-info-background: rgb(0, 122, 199);\n  --intent-info-color: #fff;\n  --intent-info-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-success-background: rgb(48.4503158901, 133.9460147801, 2.3496939396);\n  --intent-success-color: #fff;\n  --intent-success-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-warning-background: rgb(255, 197, 0);\n  --intent-warning-color: black;\n  --intent-warning-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-danger-background: rgb(159, 0, 10);\n  --intent-danger-color: #fff;\n  --intent-danger-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-light-background: rgb(238, 238, 238);\n  --intent-light-color: black;\n  --intent-light-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-dark-background: rgb(51, 51, 51);\n  --intent-dark-color: #fff;\n  --intent-dark-fadable-color: 255, 255, 255;\n  --grey-1100: rgb(26, 26, 26);\n  --grey-1000: rgb(51, 51, 51);\n  --grey-900: rgb(73, 73, 73);\n  --grey-800: rgb(134, 134, 134);\n  --grey-700: rgb(173, 173, 173);\n  --grey-600: rgb(206, 206, 206);\n  --grey-500: rgb(222, 222, 222);\n  --grey-400: rgb(233, 233, 233);\n  --grey-300: rgb(238, 238, 238);\n  --grey-200: rgb(248, 248, 248);\n  --grey-100: rgb(255, 255, 255);\n  color: var(--text-primary-color);\n  --gds-sys-outline-color: #333333;\n  --gds-comp-chips-fr-color: #333333;\n  --gds-comp-chips-bg-color: #ffffff;\n  --gds-comp-chips-br-color: #333333;\n  --gds-comp-chips-fr-color-hover: #ffffff;\n  --gds-comp-chips-bg-color-hover: #494949;\n  --gds-comp-chips-br-color-hover: #494949;\n  --gds-comp-chips-bg-color-active: #333333;\n  --gds-comp-chips-bg-color-action: #333333;\n  /* generate css variables */\n  --sg-z-index-datepicker: 995;\n  --sg-z-index-dropdown-backdrop: 990;\n  --sg-z-index-dropdown: 2000;\n  --sg-z-index-sticky: 1020;\n  --sg-z-index-fixed: 1030;\n  --sg-z-index-modal-backdrop: 1040;\n  --sg-z-index-modal: 1050;\n  --sg-z-index-popover: 1060;\n  --sg-z-index-tooltip: 1070;\n  --sg-text-primary: #333333;\n  --sg-text-secondary: #333333;\n  --sg-form-control-bg: #fff;\n  --sg-form-control-bg-disabled: #eeeeee;\n  --sg-border-color: var(--gds-sys-color-base-600);\n  --sg-border-width: 1px;\n  --sg-border-width-50: 0.5px;\n  --sg-border-radius: 0.25rem;\n  --sg-hsl-contrast: 0deg, 0%, 0%;\n  --sg-hsl-light: 0deg, 0%, 97.2549019608%;\n  --sg-hsl-light-contrast: 0deg, 0%, 0%;\n  --sg-hsl-dark: 0deg, 0%, 10.1960784314%;\n  --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n  --sg-hsl-black: 0deg, 0%, 0%;\n  --sg-hsl-white: 0deg, 0%, 100%;\n  --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n  --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n  --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n  --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n  --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n  --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n  --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n  --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n  --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n  --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n  --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n  --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n  --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n  --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n  --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n  --sg-grey-100: #f8f8f8;\n  --sg-grey-200: #e9e9e9;\n  --sg-grey-300: #dedede;\n  --sg-grey-400: #cecece;\n  --sg-grey-500: #adadad;\n  --sg-grey-600: #868686;\n  --sg-grey-700: #494949;\n  --sg-grey-800: #333333;\n  --sg-grey-900: #1a1a1a;\n  --sg-intent-neutral-hsl: 0deg, 0%, 91.3725490196%;\n  --sg-intent-neutral-hsl-contrast: 0deg, 0%, 0%;\n  --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n  --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n  --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n  --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n  --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n  --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n  --sg-hsl-disabled-background: 0deg, 0%, 97.2549019608%;\n  --sg-hsl-disabled-color: 0deg, 0%, 67.8431372549%;\n  --sg-bg-level-0: #eeeeee;\n  --sg-bg-level-1: #fff;\n  --sg-bg-level-2: #fff;\n  --sg-bg-level-3: #fff;\n  --sg-table-header-background: #1a1a1a;\n  --sg-table-header-color: #fff;\n  --sg-table-cell-padding-x: 0.5rem;\n  --sg-table-cell-padding-y: 0.6875rem;\n  --sg-table-border-width: 1px;\n  --sg-table-border-color: var(--gds-sys-color-base-600);\n  --sg-table-sort-icon-color: var(--gds-sys-color-base-600);\n  --sg-table-sort-icon-color-active: #fff;\n  --sg-skeleton-loader-highlight-color: #dedede;\n  --sg-skeleton-loader-background-color: #f8f8f8;\n  --sg-modal-background: #fff;\n  --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n  --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-popover-background: #fff;\n  --sg-popover-border-color: #007ac7;\n  --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-card-background: #fff;\n  --sg-card-heading-color: #333333;\n  --sg-card-color: #333333;\n  --sg-card-border: solid 1px #fff;\n  --sg-card-border-radius: 4px;\n  --gds-sys-color-blue: #41b0ee;\n  --gds-sys-color-dark-blue-1: #0092e1;\n  --gds-sys-color-dark-blue-2: #007ac7;\n  --gds-sys-color-green: #60cd18;\n  --gds-sys-color-dark-green-1: #45b400;\n  --gds-sys-color-dark-green-2: #308800;\n  --gds-sys-color-yellow: #ffc500;\n  --gds-sys-color-dark-yellow-1: #ffb400;\n  --gds-sys-color-dark-yellow-2: #f8a000;\n  --gds-sys-color-text-primary: #333333;\n  --gds-sys-color-text-secondary: #ababab;\n  --gds-sys-color-text-white: #ffffff;\n  --gds-sys-color-text-black: #333333;\n  --gds-sys-color-text-inverted: #ffffff;\n  --gds-sys-color-text-link: #0062bc;\n  --gds-sys-color-text-error: #9f000a;\n  --gds-sys-color-text-disabled: #adadad;\n  --gds-sys-color-red: #f03529;\n  --gds-sys-color-dark-red-1: #d81a1a;\n  --gds-sys-color-dark-red-2: #bb000c;\n  --gds-sys-color-purple: #673ab6;\n  --gds-sys-color-dark-purple-1: #4f2c99;\n  --gds-sys-color-dark-purple-2: #3f2587;\n  --gds-sys-color-white: #ffffff;\n  --gds-sys-color-black: #000000;\n  --gds-sys-color-background-primary: #ffffff;\n  --gds-sys-color-background-secondary: #eeeeee;\n  --gds-sys-color-base-100: #f8f8f8;\n  --gds-sys-color-base-200: #e9e9e9;\n  --gds-sys-color-base-300: #dedede;\n  --gds-sys-color-base-400: #cecece;\n  --gds-sys-color-base-500: #adadad;\n  --gds-sys-color-base-600: #868686;\n  --gds-sys-color-base-700: #494949;\n  --gds-sys-color-base-800: #333333;\n  --gds-sys-color-base-900: #1a1a1a;\n  --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n  --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n}\n\n/* force dark mode */\n:host([color-scheme=dark]) {\n  --heading-primary-color: rgb(255, 255, 255);\n  --text-primary-color: rgba(255, 255, 255, 0.9);\n  --text-secondary-color: rgba(255, 255, 255, 0.6);\n  --text-disabled-color: rgba(255, 255, 255, 0.07);\n  --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n  --border-color: rgb(51, 51, 51);\n  --border-secondary-color: rgb(51, 51, 51);\n  --border-disabled-color: rgb(44, 44, 44);\n  --border-primary-disabled-color: rgb(44, 44, 44);\n  --border-color-invalid: rgb(255, 89, 79);\n  --border-color-valid: rgb(48, 136, 0);\n  --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n  --link-color-dark: rgb(179, 179, 179);\n  --link-color-dark-visited: rgb(171, 171, 171);\n  --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-primary-background: rgb(44, 156, 217);\n  --intent-primary-color: #000;\n  --intent-primary-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-secondary-background: rgb(51, 51, 51);\n  --intent-secondary-color: #fff;\n  --intent-secondary-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-info-background: rgb(44, 156, 217);\n  --intent-info-color: #000;\n  --intent-info-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-success-background: rgb(48, 136, 0);\n  --intent-success-color: #000;\n  --intent-success-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-warning-background: rgb(255, 225, 130);\n  --intent-warning-color: #000;\n  --intent-warning-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-danger-background: rgb(255, 89, 79);\n  --intent-danger-color: #000;\n  --intent-danger-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-light-background: rgb(39, 39, 39);\n  --intent-light-color: #fff;\n  --intent-light-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-dark-background: rgb(171, 171, 171);\n  --intent-dark-color: #000;\n  --intent-dark-fadable-color: 0, 0, 0;\n  --grey-100: rgb(18, 18, 18);\n  --grey-200: rgb(34, 34, 34);\n  --grey-300: rgb(39, 39, 39);\n  --grey-400: rgb(44, 44, 44);\n  --grey-500: rgb(51, 51, 51);\n  --grey-600: rgb(60, 60, 60);\n  --grey-700: rgb(67, 67, 67);\n  --grey-800: rgb(73, 73, 73);\n  --grey-900: rgb(117, 117, 117);\n  --grey-1000: rgb(171, 171, 171);\n  --grey-1100: rgb(179, 179, 179);\n  color: var(--text-primary-color);\n  --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n  --gds-comp-chips-fr-color: #dedede;\n  --gds-comp-chips-bg-color: #2c2c2c;\n  --gds-comp-chips-br-color: #2c2c2c;\n  --gds-comp-chips-fr-color-hover: #dedede;\n  --gds-comp-chips-bg-color-hover: #2c2c2c;\n  --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n  --gds-comp-chips-bg-color-active: #222222;\n  --gds-comp-chips-bg-color-action: #2c2c2c;\n  --gds-sys-color-focus-outline: white;\n  --gds-sys-color-font: var(--gds-sys-color-base-300);\n  /* generate css variables */\n  --sg-z-index-datepicker: 995;\n  --sg-z-index-dropdown-backdrop: 990;\n  --sg-z-index-dropdown: 2000;\n  --sg-z-index-sticky: 1020;\n  --sg-z-index-fixed: 1030;\n  --sg-z-index-modal-backdrop: 1040;\n  --sg-z-index-modal: 1050;\n  --sg-z-index-popover: 1060;\n  --sg-z-index-tooltip: 1070;\n  --sg-text-primary: #dedede;\n  --sg-text-secondary: #ababab;\n  --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n  --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n  --sg-border-color: #ababab;\n  --sg-border-width: 1px;\n  --sg-border-width-50: 0.5px;\n  --sg-border-radius: 0.25rem;\n  --sg-hsl-contrast: 0deg, 0%, 100%;\n  --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n  --sg-hsl-light-contrast: 0deg, 0%, 0%;\n  --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n  --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n  --sg-hsl-black: 0deg, 0%, 0%;\n  --sg-hsl-white: 0deg, 0%, 100%;\n  --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n  --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n  --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n  --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n  --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n  --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n  --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n  --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n  --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n  --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n  --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n  --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n  --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n  --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n  --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n  --sg-grey-100: #dedede;\n  --sg-grey-200: #ababab;\n  --sg-grey-300: #757575;\n  --sg-grey-400: #494949;\n  --sg-grey-500: #333333;\n  --sg-grey-600: #2c2c2c;\n  --sg-grey-700: #272727;\n  --sg-grey-800: #222222;\n  --sg-grey-900: #121212;\n  --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n  --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n  --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n  --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n  --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n  --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n  --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n  --sg-hsl-disabled-background: 0deg, 0%, 20%;\n  --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n  --sg-bg-level-0: #121212;\n  --sg-bg-level-1: #222222;\n  --sg-bg-level-2: #272727;\n  --sg-bg-level-3: #2c2c2c;\n  --sg-table-header-background: #121212;\n  --sg-table-header-color: #fff;\n  --sg-table-cell-padding-x: 0.5rem;\n  --sg-table-cell-padding-y: 0.6875rem;\n  --sg-table-border-width: 1px;\n  --sg-table-border-color: #ababab;\n  --sg-table-sort-icon-color: #ababab;\n  --sg-table-sort-icon-color-active: #fff;\n  --sg-skeleton-loader-highlight-color: #494949;\n  --sg-skeleton-loader-background-color: #2c2c2c;\n  --sg-modal-background: #272727;\n  --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n  --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-popover-background: #222222;\n  --sg-popover-border-color: #007ac7;\n  --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-card-background: #222222;\n  --sg-card-heading-color: #dedede;\n  --sg-card-color: #dedede;\n  --sg-card-border: solid 1px #222222;\n  --sg-card-border-radius: 4px;\n  --gds-sys-color-blue: #58b8ee;\n  --gds-sys-color-dark-blue-1: #00adff;\n  --gds-sys-color-dark-blue-2: #2c9cd9;\n  --gds-sys-color-green: #60cd18;\n  --gds-sys-color-dark-green-1: #75b44a;\n  --gds-sys-color-dark-green-2: #308800;\n  --gds-sys-color-yellow: #ffe182;\n  --gds-sys-color-dark-yellow-1: #f0be47;\n  --gds-sys-color-dark-yellow-2: #ebab39;\n  --gds-sys-color-text-primary: #dedede;\n  --gds-sys-color-text-secondary: #ababab;\n  --gds-sys-color-text-white: #ffffff;\n  --gds-sys-color-text-black: #333333;\n  --gds-sys-color-text-inverted: #333333;\n  --gds-sys-color-text-link: #2c9cd9;\n  --gds-sys-color-text-error: #ff594f;\n  --gds-sys-color-text-disabled: #464646;\n  --gds-sys-color-red: #f7706d;\n  --gds-sys-color-dark-red-1: #c82a29;\n  --gds-sys-color-dark-red-2: #9e2120;\n  --gds-sys-color-purple: #ad91dc;\n  --gds-sys-color-dark-purple-1: #7e52cc;\n  --gds-sys-color-dark-purple-2: #4a328f;\n  --gds-sys-color-white: #ffffff;\n  --gds-sys-color-black: #000000;\n  --gds-sys-color-background-primary: #222222;\n  --gds-sys-color-background-secondary: #1a1a1a;\n  --gds-sys-color-base-100: #121212;\n  --gds-sys-color-base-200: #222222;\n  --gds-sys-color-base-300: #272727;\n  --gds-sys-color-base-400: #2c2c2c;\n  --gds-sys-color-base-500: #333333;\n  --gds-sys-color-base-600: #494949;\n  --gds-sys-color-base-700: #757575;\n  --gds-sys-color-base-800: #ababab;\n  --gds-sys-color-base-900: #dedede;\n  --gds-sys-color-hover-10: rgba(0, 0, 0, 0.1);\n  --gds-sys-color-hover-20: rgba(0, 0, 0, 0.2);\n}\n\n/* use preferred color scheme */\n@media (prefers-color-scheme: dark) {\n  :host,\n  :host([color-scheme=auto]) {\n    --heading-primary-color: rgb(255, 255, 255);\n    --text-primary-color: rgba(255, 255, 255, 0.9);\n    --text-secondary-color: rgba(255, 255, 255, 0.6);\n    --text-disabled-color: rgba(255, 255, 255, 0.07);\n    --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n    --border-color: rgb(51, 51, 51);\n    --border-secondary-color: rgb(51, 51, 51);\n    --border-disabled-color: rgb(44, 44, 44);\n    --border-primary-disabled-color: rgb(44, 44, 44);\n    --border-color-invalid: rgb(255, 89, 79);\n    --border-color-valid: rgb(48, 136, 0);\n    --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n    --link-color-dark: rgb(179, 179, 179);\n    --link-color-dark-visited: rgb(171, 171, 171);\n    --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-primary-background: rgb(44, 156, 217);\n    --intent-primary-color: #000;\n    --intent-primary-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-secondary-background: rgb(51, 51, 51);\n    --intent-secondary-color: #fff;\n    --intent-secondary-fadable-color: 255, 255, 255;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-info-background: rgb(44, 156, 217);\n    --intent-info-color: #000;\n    --intent-info-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-success-background: rgb(48, 136, 0);\n    --intent-success-color: #000;\n    --intent-success-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-warning-background: rgb(255, 225, 130);\n    --intent-warning-color: #000;\n    --intent-warning-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-danger-background: rgb(255, 89, 79);\n    --intent-danger-color: #000;\n    --intent-danger-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-light-background: rgb(39, 39, 39);\n    --intent-light-color: #fff;\n    --intent-light-fadable-color: 255, 255, 255;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-dark-background: rgb(171, 171, 171);\n    --intent-dark-color: #000;\n    --intent-dark-fadable-color: 0, 0, 0;\n    --grey-100: rgb(18, 18, 18);\n    --grey-200: rgb(34, 34, 34);\n    --grey-300: rgb(39, 39, 39);\n    --grey-400: rgb(44, 44, 44);\n    --grey-500: rgb(51, 51, 51);\n    --grey-600: rgb(60, 60, 60);\n    --grey-700: rgb(67, 67, 67);\n    --grey-800: rgb(73, 73, 73);\n    --grey-900: rgb(117, 117, 117);\n    --grey-1000: rgb(171, 171, 171);\n    --grey-1100: rgb(179, 179, 179);\n    color: var(--text-primary-color);\n    --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n    --gds-comp-chips-fr-color: #dedede;\n    --gds-comp-chips-bg-color: #2c2c2c;\n    --gds-comp-chips-br-color: #2c2c2c;\n    --gds-comp-chips-fr-color-hover: #dedede;\n    --gds-comp-chips-bg-color-hover: #2c2c2c;\n    --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n    --gds-comp-chips-bg-color-active: #222222;\n    --gds-comp-chips-bg-color-action: #2c2c2c;\n    --gds-sys-color-focus-outline: white;\n    --gds-sys-color-font: var(--gds-sys-color-base-300);\n    /* generate css variables */\n    --sg-z-index-datepicker: 995;\n    --sg-z-index-dropdown-backdrop: 990;\n    --sg-z-index-dropdown: 2000;\n    --sg-z-index-sticky: 1020;\n    --sg-z-index-fixed: 1030;\n    --sg-z-index-modal-backdrop: 1040;\n    --sg-z-index-modal: 1050;\n    --sg-z-index-popover: 1060;\n    --sg-z-index-tooltip: 1070;\n    --sg-text-primary: #dedede;\n    --sg-text-secondary: #ababab;\n    --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n    --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n    --sg-border-color: #ababab;\n    --sg-border-width: 1px;\n    --sg-border-width-50: 0.5px;\n    --sg-border-radius: 0.25rem;\n    --sg-hsl-contrast: 0deg, 0%, 100%;\n    --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n    --sg-hsl-light-contrast: 0deg, 0%, 0%;\n    --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n    --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n    --sg-hsl-black: 0deg, 0%, 0%;\n    --sg-hsl-white: 0deg, 0%, 100%;\n    --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n    --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n    --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n    --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n    --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n    --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n    --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n    --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n    --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n    --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n    --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n    --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n    --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n    --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n    --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n    --sg-grey-100: #dedede;\n    --sg-grey-200: #ababab;\n    --sg-grey-300: #757575;\n    --sg-grey-400: #494949;\n    --sg-grey-500: #333333;\n    --sg-grey-600: #2c2c2c;\n    --sg-grey-700: #272727;\n    --sg-grey-800: #222222;\n    --sg-grey-900: #121212;\n    --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n    --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n    --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n    --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n    --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n    --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n    --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n    --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n    --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n    --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n    --sg-hsl-disabled-background: 0deg, 0%, 20%;\n    --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n    --sg-bg-level-0: #121212;\n    --sg-bg-level-1: #222222;\n    --sg-bg-level-2: #272727;\n    --sg-bg-level-3: #2c2c2c;\n    --sg-table-header-background: #121212;\n    --sg-table-header-color: #fff;\n    --sg-table-cell-padding-x: 0.5rem;\n    --sg-table-cell-padding-y: 0.6875rem;\n    --sg-table-border-width: 1px;\n    --sg-table-border-color: #ababab;\n    --sg-table-sort-icon-color: #ababab;\n    --sg-table-sort-icon-color-active: #fff;\n    --sg-skeleton-loader-highlight-color: #494949;\n    --sg-skeleton-loader-background-color: #2c2c2c;\n    --sg-modal-background: #272727;\n    --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n    --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n    --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n    --sg-popover-background: #222222;\n    --sg-popover-border-color: #007ac7;\n    --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n    --sg-card-background: #222222;\n    --sg-card-heading-color: #dedede;\n    --sg-card-color: #dedede;\n    --sg-card-border: solid 1px #222222;\n    --sg-card-border-radius: 4px;\n  }\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Thu, 06 Feb 2025 18:59:50 GMT\n */\n/**\n * Do not edit directly\n * Generated on Thu, 06 Feb 2025 18:59:50 GMT\n */\n:host {\n  display: contents;\n  --gds-sys-shape-corner-none: 0;\n  --gds-sys-shape-corner-small: 0.125rem;\n  --gds-sys-shape-corner-medium: 0.25rem;\n  --gds-sys-shape-corner-round: 50%;\n}\n\n:host([color-scheme=light]) {\n  --gds-sys-color-blue: #41b0ee;\n  --gds-sys-color-dark-blue-1: #0092e1;\n  --gds-sys-color-dark-blue-2: #007ac7;\n  --gds-sys-color-green: #60cd18;\n  --gds-sys-color-dark-green-1: #45b400;\n  --gds-sys-color-dark-green-2: #308800;\n  --gds-sys-color-yellow: #ffc500;\n  --gds-sys-color-dark-yellow-1: #ffb400;\n  --gds-sys-color-dark-yellow-2: #f8a000;\n  --gds-sys-color-text-primary: #333333;\n  --gds-sys-color-text-secondary: #ababab;\n  --gds-sys-color-text-white: #ffffff;\n  --gds-sys-color-text-black: #333333;\n  --gds-sys-color-text-inverted: #ffffff;\n  --gds-sys-color-text-link: #0062bc;\n  --gds-sys-color-text-error: #9f000a;\n  --gds-sys-color-text-disabled: #adadad;\n  --gds-sys-color-red: #f03529;\n  --gds-sys-color-dark-red-1: #d81a1a;\n  --gds-sys-color-dark-red-2: #bb000c;\n  --gds-sys-color-purple: #673ab6;\n  --gds-sys-color-dark-purple-1: #4f2C99;\n  --gds-sys-color-dark-purple-2: #3f2587;\n  --gds-sys-color-white: #ffffff;\n  --gds-sys-color-black: #000000;\n  --gds-sys-color-background-primary: #ffffff;\n  --gds-sys-color-background-secondary: #eeeeee;\n  --gds-sys-color-base-100: #f8f8f8;\n  --gds-sys-color-base-200: #e9e9e9;\n  --gds-sys-color-base-300: #dedede;\n  --gds-sys-color-base-400: #cecece;\n  --gds-sys-color-base-500: #adadad;\n  --gds-sys-color-base-600: #868686;\n  --gds-sys-color-base-700: #494949;\n  --gds-sys-color-base-800: #333333;\n  --gds-sys-color-base-900: #1a1a1a;\n  --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n  --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n}\n\n/* force dark mode */\n:host([color-scheme=dark]) {\n  --gds-sys-color-blue: #58b8ee;\n  --gds-sys-color-dark-blue-1: #58b8ee;\n  --gds-sys-color-dark-blue-2: #2c9cd9;\n  --gds-sys-color-green: #60cd18;\n  --gds-sys-color-dark-green-1: #75b44a;\n  --gds-sys-color-dark-green-2: #308800;\n  --gds-sys-color-yellow: #ffe182;\n  --gds-sys-color-dark-yellow-1: #f0be47;\n  --gds-sys-color-dark-yellow-2: #ebab39;\n  --gds-sys-color-text-primary: #dedede;\n  --gds-sys-color-text-secondary: #ababab;\n  --gds-sys-color-text-white: #ffffff;\n  --gds-sys-color-text-black: #333333;\n  --gds-sys-color-text-inverted: #333333;\n  --gds-sys-color-text-link: #2c9cd9;\n  --gds-sys-color-text-error: #ff594f;\n  --gds-sys-color-text-disabled: #464646;\n  --gds-sys-color-red: #f7706d;\n  --gds-sys-color-dark-red-1: #c82a29;\n  --gds-sys-color-dark-red-2: #9e2120;\n  --gds-sys-color-purple: #ad91dc;\n  --gds-sys-color-dark-purple-1: #7e52cc;\n  --gds-sys-color-dark-purple-2: #4a328f;\n  --gds-sys-color-white: #ffffff;\n  --gds-sys-color-black: #000000;\n  --gds-sys-color-background-primary: #222222;\n  --gds-sys-color-background-secondary: #1a1a1a;\n  --gds-sys-color-base-100: #121212;\n  --gds-sys-color-base-200: #222222;\n  --gds-sys-color-base-300: #272727;\n  --gds-sys-color-base-400: #2c2c2c;\n  --gds-sys-color-base-500: #333333;\n  --gds-sys-color-base-600: #494949;\n  --gds-sys-color-base-700: #757575;\n  --gds-sys-color-base-800: #ababab;\n  --gds-sys-color-base-900: #dedede;\n  --gds-sys-color-hover-10: rgba(0, 0, 0, 0.1);\n  --gds-sys-color-hover-20: rgba(0, 0, 0, 0.2);\n}\n\n/* use preferred color scheme */\n@media (prefers-color-scheme: dark) {\n  :host,\n  :host([color-scheme=auto]) {\n    --gds-sys-color-blue: #58b8ee;\n    --gds-sys-color-dark-blue-1: #58b8ee;\n    --gds-sys-color-dark-blue-2: #2c9cd9;\n    --gds-sys-color-green: #60cd18;\n    --gds-sys-color-dark-green-1: #75b44a;\n    --gds-sys-color-dark-green-2: #308800;\n    --gds-sys-color-yellow: #ffe182;\n    --gds-sys-color-dark-yellow-1: #f0be47;\n    --gds-sys-color-dark-yellow-2: #ebab39;\n    --gds-sys-color-text-primary: #dedede;\n    --gds-sys-color-text-secondary: #ababab;\n    --gds-sys-color-text-white: #ffffff;\n    --gds-sys-color-text-black: #333333;\n    --gds-sys-color-text-inverted: #333333;\n    --gds-sys-color-text-link: #2c9cd9;\n    --gds-sys-color-text-error: #ff594f;\n    --gds-sys-color-text-disabled: #464646;\n    --gds-sys-color-red: #f7706d;\n    --gds-sys-color-dark-red-1: #c82a29;\n    --gds-sys-color-dark-red-2: #9e2120;\n    --gds-sys-color-purple: #ad91dc;\n    --gds-sys-color-dark-purple-1: #7e52cc;\n    --gds-sys-color-dark-purple-2: #4a328f;\n    --gds-sys-color-white: #ffffff;\n    --gds-sys-color-black: #000000;\n    --gds-sys-color-background-primary: #222222;\n    --gds-sys-color-background-secondary: #1a1a1a;\n    --gds-sys-color-base-100: #121212;\n    --gds-sys-color-base-200: #222222;\n    --gds-sys-color-base-300: #272727;\n    --gds-sys-color-base-400: #2c2c2c;\n    --gds-sys-color-base-500: #333333;\n    --gds-sys-color-base-600: #494949;\n    --gds-sys-color-base-700: #757575;\n    --gds-sys-color-base-800: #ababab;\n    --gds-sys-color-base-900: #dedede;\n    --gds-sys-color-hover-10: rgba(0, 0, 0, 0.1);\n    --gds-sys-color-hover-20: rgba(0, 0, 0, 0.2);\n  }\n}";
 export default styles;