@sebgroup/green-core 2.35.1 → 2.37.0

package/components/table/table.styles.js

@@ -24,6 +24,7 @@ const TableStyles = css`
     --table-gap: var(--gds-sys-space-m);
     --table-border-spacing: 0 var(--gds-sys-space-5xs);
     --table-data-padding: var(--gds-sys-space-5xs) var(--gds-sys-space-4xs);
+    --table-data-padding-x: var(--gds-sys-space-4xs);
   }
 
   /* Comfortable default */
@@ -37,6 +38,7 @@ const TableStyles = css`
     --table-gap: var(--gds-sys-space-l);
     --table-border-spacing: 0 var(--gds-sys-space-4xs);
     --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-2xs);
+    --table-data-padding-x: var(--gds-sys-space-2xs);
   }
 
   /* Spacious density */
@@ -50,6 +52,7 @@ const TableStyles = css`
     --table-gap: var(--gds-sys-space-xl);
     --table-border-spacing: 0 var(--gds-sys-space-3xs);
     --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-xs);
+    --table-data-padding-x: var(--gds-sys-space-xs);
   }
 
   /* Secondary and Tertiary */
@@ -61,6 +64,7 @@ const TableStyles = css`
     --_table-row-hover: var(--gds-sys-color-l2-neutral-01);
     --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03);
     --_table-row-striped: var(--gds-sys-color-l2-neutral-01);
+    --_table-card-bg: var(--gds-sys-color-l1-neutral-01);
   }
 
   /* Primary variant */
@@ -75,6 +79,7 @@ const TableStyles = css`
     );
     --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03);
     --_table-row-striped: var(--gds-sys-color-l2-neutral-01);
+    --_table-card-bg: var(--gds-sys-color-l2-neutral-01);
   }
 
   /* Apply density variables */
@@ -360,6 +365,152 @@ const TableStyles = css`
     justify-content: flex-end;
   }
 
+  /* Sticky actions column */
+  th.actions.sticky,
+  td.actions-cell.sticky {
+    position: sticky;
+    right: calc(-1 * var(--table-data-padding-x, 0px));
+    z-index: 1;
+    width: max-content;
+    padding-right: calc(
+      var(--table-cell-padding-x) + var(--table-data-padding-x, 0px)
+    );
+  }
+
+  th.actions.sticky {
+    z-index: 2;
+    background: var(--_table-header-bg);
+  }
+
+  th.actions.sticky .column-header {
+    justify-content: flex-end;
+  }
+
+  td.actions-cell.sticky {
+    background: var(--_table-card-bg);
+  }
+
+  td.actions-cell.sticky .cell-content {
+    justify-content: flex-end;
+    position: relative;
+  }
+
+  /* Left gradient fade on sticky action cells */
+  td.actions-cell.sticky::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    right: 100%;
+    width: var(--gds-sys-space-4xl);
+    pointer-events: none;
+    background: linear-gradient(to right, transparent, var(--_table-card-bg));
+  }
+
+  th.actions.sticky::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    right: 100%;
+    width: var(--gds-sys-space-4xl);
+    pointer-events: none;
+    background: linear-gradient(to right, transparent, var(--_table-header-bg));
+  }
+
+  /* Sticky action inherits row hover/selected/striped backgrounds */
+  tbody tr:hover td.actions-cell.sticky {
+    background: var(--_table-row-hover);
+  }
+
+  tbody tr:hover td.actions-cell.sticky::before {
+    background: linear-gradient(to right, transparent, var(--_table-row-hover));
+  }
+
+  tbody tr.selected td.actions-cell.sticky {
+    background: var(--gds-sys-color-l3-neutral-02);
+  }
+
+  tbody tr.selected td.actions-cell.sticky::before {
+    background: linear-gradient(
+      to right,
+      transparent,
+      var(--gds-sys-color-l3-neutral-02)
+    );
+  }
+
+  .striped
+    tbody
+    tr:not(.selected, :hover):nth-child(even)
+    td.actions-cell.sticky {
+    background: var(--_table-row-striped);
+  }
+
+  .striped
+    tbody
+    tr:not(.selected, :hover):nth-child(even)
+    td.actions-cell.sticky::before {
+    background: linear-gradient(
+      to right,
+      transparent,
+      var(--_table-row-striped)
+    );
+  }
+
+  /* Table Footer Row */
+
+  tfoot.tablefoot tr td,
+  tfoot.tablefoot tr th[scope='row'] {
+    padding-block: var(--table-cell-padding-y);
+    padding-inline: var(--table-cell-padding-x);
+    background: var(--_table-header-bg);
+    font-weight: normal;
+    border-top: var(--_table-border-width) solid var(--_table-border-color);
+  }
+
+  tfoot.tablefoot tr th[scope='row'] {
+    font-weight: var(--gds-sys-text-weight-book);
+  }
+
+  tfoot.tablefoot tr td:first-child,
+  tfoot.tablefoot tr th:first-child {
+    border-top-left-radius: var(--gds-sys-radius-s);
+    border-bottom-left-radius: var(--gds-sys-radius-s);
+  }
+
+  tfoot.tablefoot tr td:last-child,
+  tfoot.tablefoot tr th:last-child {
+    border-top-right-radius: var(--gds-sys-radius-s);
+    border-bottom-right-radius: var(--gds-sys-radius-s);
+  }
+
+  .tablefoot-label {
+    font-weight: var(--gds-sys-text-weight-book);
+    white-space: nowrap;
+  }
+
+  tfoot.tablefoot.sticky {
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    will-change: transform;
+  }
+
+  /* When sticky tablefoot: move padding from .data to table, keep tfoot edge-to-edge */
+  .data:has(tfoot.tablefoot.sticky) {
+    padding: 0;
+  }
+
+  .data:has(tfoot.tablefoot.sticky) table {
+    padding-top: var(--table-data-padding-x);
+    padding-inline: var(--table-data-padding-x);
+  }
+
+  tfoot.tablefoot.sticky tr td,
+  tfoot.tablefoot.sticky tr th[scope='row'] {
+    border-radius: 0;
+    background: var(--_table-card-bg);
+    border-top: var(--_table-border-width) solid var(--_table-border-color);
+  }
+
   /* Align utilities */
   td {
     height: 100%;
@@ -400,6 +551,10 @@ const TableStyles = css`
       display: contents;
     }
 
+    .responsive table {
+      max-width: 100%;
+    }
+
     .responsive thead {
       position: sticky;
       top: var(--gds-sys-space-s);
@@ -449,11 +604,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 +628,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;
@@ -661,6 +825,16 @@ const TableStyles = css`
         }
       }
 
+      /* Sticky table footer */
+      tfoot.tablefoot.sticky {
+        background-color: var(--_table-card-bg);
+      }
+
+      tfoot.tablefoot.sticky tr td,
+      tfoot.tablefoot.sticky tr th[scope='row'] {
+        background: var(--_table-card-bg);
+      }
+
       /* Horizontal scroll */
       @property --_start-fade {
         syntax: '<length>';
@@ -676,18 +850,20 @@ const TableStyles = css`
 
       @keyframes scroll-fade {
         0% {
-          --_start-fade: 0;
+          --_start-fade: 0px;
+          --_end-fade: var(--gds-sys-space-4xl);
         }
-        10%,
-        100% {
+        1% {
           --_start-fade: var(--gds-sys-space-4xl);
+          --_end-fade: var(--gds-sys-space-4xl);
         }
-        0%,
-        90% {
+        99% {
+          --_start-fade: var(--gds-sys-space-4xl);
           --_end-fade: var(--gds-sys-space-4xl);
         }
         100% {
-          --_end-fade: 0;
+          --_start-fade: var(--gds-sys-space-4xl);
+          --_end-fade: 0px;
         }
       }
 
@@ -699,9 +875,18 @@ const TableStyles = css`
           #ffff var(--_start-fade) calc(100% - var(--_end-fade)),
           #0000
         );
-        animation: scroll-fade;
-        animation-timeline: --scroll-fade;
-        scroll-timeline: --scroll-fade x;
+        animation: scroll-fade both linear;
+        animation-timeline: scroll(self inline);
+      }
+
+      /* When sticky actions are present, remove the right fade.*/
+      .data:has(td.actions-cell.sticky) {
+        mask: linear-gradient(
+          to right,
+          #0000,
+          #ffff var(--_start-fade),
+          #ffff 100%
+        );
       }
     }
   }

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,17 @@ 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;
+    sticky?: boolean;
+}
+export interface Tfoot {
+    label?: string;
+    sticky?: boolean;
 }
 export interface Row {
     [key: string]: any;
@@ -49,28 +46,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 +74,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 +90,9 @@ export type TableState = State;
 export type TableRequest = Request;
 export type TableResponse<T> = Response<T>;
 export type TableDensity = Density;
-export type TableDensityConfig = DensityConfig;
+export type TableTfoot = Tfoot;
+/** @deprecated Use `TableTfoot` instead */
+export type TableTotals = Tfoot;
 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;