@tcn/ui 0.12.5 → 0.13.0

package/dist/themes/themes/ergo/ergo_theme.js

@@ -111,8 +111,8 @@ const n = `@layer tcn-theme {
     --quaternary-color-strong: #008cff;
 
     --background-color-primary: #ffffff;
-    --background-color-secondary: #ffffff;
-    --background-color-tertiary: #ffffff;
+    --background-color-secondary: #fafafa;
+    --background-color-tertiary: #f1f1f1;
     --background-color-quaternary: #ffffff;
 
     --foreground-color-primary: #aaa;
@@ -717,14 +717,6 @@ const n = `@layer tcn-theme {
     gap: var(--gap-medium);
   }
 
-  .tcn-rail {
-    :where(.tcn-rail-stack) {
-      gap: var(--gap-medium);
-    }
-    :where(.tcn-body) {
-      gap: var(--gap-medium);
-    }
-  }
   /* Scaffold: */
   .tcn-footer,
   .tcn-header,
@@ -759,27 +751,60 @@ const n = `@layer tcn-theme {
       border-top: calc(var(--scaffold-divide-footer) * 1px) solid
         var(--foreground-color-primary);
     }
-
-    :where(.tcn-body) {
-      gap: var(--gap-medium);
-    }
   }
 
+  /* .tcn-body > .tcn-scaffold > .tcn-scaffold-stack,
+  .tcn-body > .tcn-rail > .tcn-rail-stack {
+    gap: var(--gap-medium);
+  } */
+
   .tcn-frame-veil[data-is-veil="true"] {
     background-color: rgba(0, 0, 0, 0.5);
   }
 
+  /* PAGE: */
+  .tcn-page {
+    --divide-header: 0;
+    --divide-footer: 0;
+    --material: var(--background-color-tertiary);
+    background-color: var(--material);
+    padding: var(--padding-medium);
+  }
+
+  .tcn-body > .tcn-scaffold > .tcn-scaffold-stack,
+  .tcn-body > .tcn-rail > .tcn-rail-stack {
+    gap: var(--gap-medium);
+  }
+
   /* MODAL: */
   .tcn-modal {
     --divide-header: 0;
     box-shadow: 0px 4px 34px 0px #00000096;
+    border-radius: var(--shape-radius-medium);
+    background-color: var(--background-color-primary);
+    overflow: hidden;
+    border: 1px solid var(--foreground-color-primary);
 
-    :where(.tcn-scaffold) {
-      border-radius: var(--shape-radius-medium);
-      background-color: var(--background-color-primary);
-      overflow: hidden;
-      border: 1px solid var(--foreground-color-primary);
+    :where(.tcn-header) {
+      --material: var(--ergo-secondary-dark);
+      --on-material: var(--ergo-white);
+      --action: var(--ergo-tertiary);
+      --on-action: var(--ergo-secondary-dark);
+
+      background-color: var(--material);
+      color: var(--on-material);
+      :where(.tcn-typography) {
+        color: inherit;
+      }
     }
+  }
+
+  /* DRAWER: */
+  .tcn-drawer {
+    --divide-header: 0;
+    box-shadow: 0px 4px 34px 0px #00000096;
+    background-color: var(--background-color-primary);
+    overflow: hidden;
 
     :where(.tcn-header) {
       --material: var(--ergo-secondary-dark);
@@ -798,15 +823,11 @@ const n = `@layer tcn-theme {
   /* WINDOW: */
   .tcn-window {
     box-shadow: 0px 4px 34px 0px #00000096;
-
     --divide-header: 0;
-
-    :where(.tcn-scaffold) {
-      border-radius: var(--shape-radius-medium);
-      background-color: var(--background-color-primary);
-      overflow: hidden;
-      border: 2px solid white;
-    }
+    border-radius: var(--shape-radius-medium);
+    background-color: var(--background-color-primary);
+    overflow: hidden;
+    border: 2px solid white;
 
     :where(.tcn-header) {
       --material: var(--ergo-secondary-dark);
@@ -825,6 +846,14 @@ const n = `@layer tcn-theme {
   .tcn-pop-confirm {
     --divide-header: 0;
     --tether-pad-size: 16px;
+    --pad-inline: var(--padding-medium);
+
+    .tcn-pop-confirm-scaffold > .tcn-scaffold-stack {
+      border-radius: var(--shape-radius-medium);
+      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
+      background-color: var(--background-color-primary);
+    }
+
     :where(.tcn-tethered-origin-indicator) {
       --material: var(--ergo-white);
     }
@@ -836,15 +865,6 @@ const n = `@layer tcn-theme {
       }
     }
 
-    :where(.tcn-scaffold) {
-      --pad-inline: var(--padding-medium);
-
-      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
-      border-radius: var(--shape-radius-medium);
-      background-color: var(--background-color-primary);
-      overflow: hidden;
-    }
-
     :where(.tcn-header) {
       min-height: var(--bar-md);
 
@@ -862,7 +882,8 @@ const n = `@layer tcn-theme {
   }
 
   .tcn-confirm {
-    background-color: var(--background-color-primary);
+    --material: var(--background-color-primary);
+    background-color: var(--material);
   }
 
   .tcn-bar {
@@ -882,15 +903,44 @@ const n = `@layer tcn-theme {
 
   /* PANEL */
   .tcn-panel {
+    --divide-header: 1;
+    --divide-footer: 1;
     --material: var(--background-color-primary);
     background-color: var(--material);
     border-radius: var(--shape-radius-medium);
     overflow: hidden;
+
+    :where(.tcn-title) {
+      font-size: 18px;
+    }
+  }
+
+  /* Aside */
+  .tcn-aside {
+    --divide-header: 1;
+    --divide-footer: 1;
+
+    --material: var(--background-color-secondary);
+    background-color: var(--material);
+    overflow: hidden;
+
+    :where(.tcn-header) {
+      min-height: var(--bar-md);
+    }
+
+    :where(.tcn-footer) {
+      min-height: var(--bar-md);
+    }
+
+    :where(.tcn-title) {
+      font-size: 16px;
+    }
   }
 
   /* Card */
   .tcn-card {
     --divide-header: 0;
+    --divide-footer: 1;
 
     background-color: var(--background-color-primary);
     border-radius: var(--shape-radius-medium);
@@ -934,7 +984,7 @@ const n = `@layer tcn-theme {
 
   .tcn-heading {
     background-color: #f1f1f1;
-    padding-inline-start: 8px;
+    padding-inline-start: var(--pad-inline, var(--padding-medium));
     height: 30px;
     z-index: 5;
   }
@@ -1149,6 +1199,7 @@ const n = `@layer tcn-theme {
   }
 
   /* ===== INPUTS ===== */
+  .tcn-entry,
   .tcn-control {
     --act: var(--action);
     --mat: var(--material);
@@ -1166,7 +1217,7 @@ const n = `@layer tcn-theme {
     background: var(--act-raised);
   }
 
-  .tcn-control:focus-visible {
+  .tcn-control:focus-within {
     outline: 2px solid var(--ergo-primary);
     outline-offset: 2px;
   }
@@ -1189,6 +1240,43 @@ const n = `@layer tcn-theme {
     color: var(--on-material-disabled);
   }
 
+  .tcn-control {
+    display: flex;
+    justify-content: center;
+    gap: var(--gap-small);
+  }
+
+  .tcn-control-row {
+    min-height: 22px;
+    height: auto;
+    align-items: center;
+    gap: var(--gap-small);
+    padding-block: 2px;
+  }
+
+  .tcn-control-row > .tcn-icon {
+    color: var(--ergo-grey);
+  }
+
+  .tcn-control .tcn-entry {
+    border: none;
+    background: transparent;
+    padding: 0;
+    min-height: unset;
+    border-radius: 0;
+    height: 100%;
+    flex-grow: 1;
+
+    &:hover,
+    &:active,
+    &:focus-visible,
+    &:focus {
+      outline: none;
+      border: none;
+      background: transparent;
+    }
+  }
+
   .tcn-input {
     height: auto;
   }
@@ -1198,7 +1286,7 @@ const n = `@layer tcn-theme {
     cursor: text;
   }
 
-  .tcn-input-group {
+  .tcn-control-set {
     border-radius: var(--shape-radius-medium);
 
     &:focus-within {
@@ -1206,7 +1294,7 @@ const n = `@layer tcn-theme {
       outline-offset: 2px;
     }
 
-    .tcn-input-group-slot {
+    .tcn-control-set-item {
       z-index: 1;
       border-radius: 0;
       height: auto;
@@ -1219,16 +1307,16 @@ const n = `@layer tcn-theme {
       }
     }
 
-    .tcn-input-group-slot:first-child {
+    .tcn-control-set-item:first-child {
       border-top-left-radius: var(--shape-radius-medium);
       border-bottom-left-radius: var(--shape-radius-medium);
     }
 
-    .tcn-input-group-slot:not(:last-child) {
+    .tcn-control-set-item:not(:last-child) {
       margin-right: -1px;
     }
 
-    .tcn-input-group-slot:last-child {
+    .tcn-control-set-item:last-child {
       border-top-right-radius: var(--shape-radius-medium);
       border-bottom-right-radius: var(--shape-radius-medium);
     }
@@ -1300,11 +1388,13 @@ const n = `@layer tcn-theme {
   .tcn-input,
   .tcn-select,
   .tcn-slider,
+  .tcn-textarea,
   .tcn-checkbox,
   .tcn-switch-wrapper,
   .tcn-date-picker,
   .tcn-date-picker-year-selector,
   .tcn-radio,
+  .tcn-date-picker-input,
   .tcn-suggestion-list-search-input,
   .tcn-suggestion-list {
     --accent-color: var(--ergo-primary);

package/dist/themes/themes/ergo/ergo_theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"@layer tcn-theme {\\n  /* ===== CSS VARIABLES ===== */\\n  :root {\\n    /* ========== Ergo Brand Palette ========== */\\n    --ergo-primary: #ce6b2b;\\n    --ergo-secondary: #669eb4;\\n    --ergo-secondary-light: #ecf4fb;\\n    --ergo-secondary-dark: #497485;\\n    --ergo-tertiary: #dfd7cd;\\n    --ergo-tertiary-light: #f9f4ed;\\n    --ergo-tertiary-dark: #7e6c5d;\\n    --ergo-white: #ffffff;\\n\\n    --ergo-accent-blue: #395578;\\n    --ergo-accent-blue-light: #f3f4f6;\\n    --ergo-accent-green: #97bba3;\\n    --ergo-accent-green-light: #eef8ef;\\n    --ergo-accent-green-dark: #4f785c;\\n    --ergo-accent-yellow: #dbc97e;\\n    --ergo-accent-yellow-light: #fef9e7;\\n\\n    --ergo-grey: #aaaaaa;\\n    --ergo-grey-light: #d3d3d3;\\n    --ergo-grey-dark: #808080;\\n\\n    --ergo-status-red: #ff6565;\\n    --ergo-status-red-dark: #c24848;\\n\\n    --ergo-status-yellow: #ffd439;\\n    --ergo-status-yellow-dark: #dbb735;\\n\\n    --ergo-status-blue: var(--ergo-secondary);\\n    --ergo-status-blue-dark: var(--ergo-secondary-dark);\\n\\n    --ergo-status-green: #3fbc6a;\\n    --ergo-status-green-dark: #2d904f;\\n\\n    --ergo-ink-primary: var(--ergo-accent-blue);\\n    --ergo-ink-inverse: var(--ergo-white);\\n\\n    /* ========== Blackcat System Tokens ========== */\\n    --scalar: 1;\\n    --accent-color: var(--ergo-primary);\\n\\n    /* Typography */\\n    --font-color: var(--ergo-ink-primary);\\n    --font-family: \\\"Lato\\\", sans-serif;\\n    --font-size: 12px;\\n\\n    /* Spacing */\\n    --gap-xs: 2px;\\n    --gap-small: 4px;\\n    --gap-medium: 8px;\\n    --gap-large: 16px;\\n\\n    --padding-small: 4px;\\n    --padding-medium: 8px;\\n    --padding-large: 16px;\\n\\n    /* Sizing */\\n    --bar-xs: 16px;\\n    --bar-sm: 24px;\\n    --bar-md: 32px;\\n    --bar-lg: 40px;\\n    --bar-xl: 48px;\\n\\n    --action-sm: 20px;\\n    --action-md: 24px;\\n    --action-lg: 32px;\\n\\n    /* Status Colors */\\n    --status-color-disabled: var(--ergo-grey-light);\\n    --status-color-info: var(--ergo-status-blue);\\n    --status-color-warning: var(--ergo-status-yellow);\\n    --status-color-positive: var(--ergo-status-green);\\n    --status-color-error: var(--ergo-status-red);\\n\\n    --async-color-initial: var(--ergo-grey);\\n    --async-color-pending: var(--ergo-status-blue);\\n    --async-color-success: var(--ergo-status-green);\\n    --async-color-failed: var(--ergo-status-red);\\n\\n    --action-severity-dangerous: var(--ergo-status-red);\\n    --action-severity-cautious: var(--ergo-status-yellow);\\n    --action-severity-neutral: var(--ergo-primary);\\n    --action-severity-suggested: var(--ergo-status-blue);\\n    --action-severity-encouraged: var(--ergo-status-green);\\n\\n    /* Shape */\\n    --shape-radius-small: 2px;\\n    --shape-radius-medium: 4px;\\n    --shape-radius-large: 8px;\\n    --shape-triangle-medium: 12px;\\n\\n    /* Palette */\\n    --primary-color-faint: #c0c0c0;\\n    --primary-color: #008cff;\\n    --primary-color-strong: #008cff;\\n\\n    --secondary-color-faint: #c0c0c0;\\n    --secondary-color: #008cff;\\n    --secondary-color-strong: #008cff;\\n\\n    --tertiary-color-faint: #c0c0c0;\\n    --tertiary-color: #008cff;\\n    --tertiary-color-strong: #008cff;\\n\\n    --quaternary-color-faint: #c0c0c0;\\n    --quaternary-color: #008cff;\\n    --quaternary-color-strong: #008cff;\\n\\n    --background-color-primary: #ffffff;\\n    --background-color-secondary: #ffffff;\\n    --background-color-tertiary: #ffffff;\\n    --background-color-quaternary: #ffffff;\\n\\n    --foreground-color-primary: #aaa;\\n    --foreground-color-secondary: #222222;\\n    --foreground-color-tertiary: #222222;\\n    --foreground-color-quaternary: #222222;\\n\\n    --material-disabled: var(--ergo-grey-light);\\n    --on-material-disabled: var(--ergo-ink-inverse);\\n    --ink-disabled: var(--ergo-grey-light);\\n\\n    --material-line: var(--ergo-grey);\\n\\n    /* Default Material */\\n    --action: var(--ergo-primary);\\n    --on-action: var(--ergo-white);\\n    --material: var(--ergo-white);\\n    --on-material: var(--ergo-accent-blue);\\n  }\\n\\n  .tcn-theme-root {\\n    font-family: var(--font-family);\\n    color: var(--font-color);\\n    --action: var(--ergo-primary);\\n    --on-action: var(--ergo-white);\\n    --material: var(--ergo-white);\\n    --on-material: var(--ergo-accent-blue);\\n  }\\n\\n  /* ===== Actions ===== */\\n\\n  .tcn-interactive {\\n    cursor: pointer;\\n    user-select: none;\\n    transition:\\n      transform 0.1s,\\n      background 0.1s,\\n      color 0.1s;\\n\\n    --ink: var(--on-material);\\n    --act: var(--action);\\n    --mat: var(--material);\\n\\n    --act-down: color-mix(in srgb, var(--mat), black 12%);\\n    --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n    --act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);\\n    --act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);\\n\\n    background: var(--mat);\\n    color: var(--ink);\\n    transition:\\n      background 0.1s,\\n      color 0.1s;\\n\\n    &:focus-visible,\\n    &[data-focus-visible] {\\n      background: var(--act-focus);\\n      outline: 2px solid var(--ergo-primary);\\n      outline-offset: 2px;\\n    }\\n\\n    &:hover,\\n    &[data-hover] {\\n      background: var(--act-raised);\\n    }\\n\\n    &:active,\\n    &[data-active] {\\n      background: var(--act-down);\\n    }\\n\\n    &[data-is-disabled=\\\"true\\\"] {\\n      pointer-events: none;\\n    }\\n  }\\n\\n  /* ===== Base Button ===== \\n  * Shared between Button and Toggle.\\n  * Primarily manages button dimensions and sizing ratios.\\n  */\\n  .tcn-base-button {\\n    --btn-size-base: 26px;\\n    --btn-pad-base: 12px;\\n\\n    --btn-pad-delta: 4px;\\n    --btn-size-delta: 4px;\\n    --btn-font-size-delta: 2px;\\n    --btn-step: 1;\\n\\n    /* Increase size and pad by 4px for each size \\\"step\\\" from medium */\\n    --btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));\\n    --btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));\\n\\n    border-radius: var(--shape-radius-medium);\\n    min-height: var(--btn-size);\\n    padding: var(--padding-small) var(--btn-pad);\\n\\n    &[data-size=\\\"sm\\\"] {\\n      --btn-step: -1;\\n    }\\n    &[data-size=\\\"md\\\"] {\\n      --btn-step: 0;\\n    }\\n    &[data-size=\\\"lg\\\"] {\\n      --btn-step: 1;\\n    }\\n\\n    &[data-is-utility=\\\"true\\\"] {\\n      height: auto;\\n      width: auto;\\n      min-width: var(--btn-size);\\n      padding: 0;\\n\\n      /* Icon is 75% of the button size but minimum of 2px to account for border and 1px offset */\\n      --util-ratio: 0.75;\\n      --btn-size-base: 18px;\\n\\n      font-size: calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step));\\n      .tcn-icon {\\n        min-height: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n        min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n      }\\n    }\\n  }\\n\\n  /* ===== Button ===== \\n  * Manages Hierarchy and Severity.\\n  */\\n  .tcn-button {\\n    --btn-primary: var(--action);\\n    --btn-on-primary: var(--on-action);\\n    --btn-variant: var(--on-material);\\n\\n    &[data-severity=\\\"dangerous\\\"] {\\n      --btn-primary: var(--action-severity-dangerous);\\n      --btn-variant: var(--ergo-status-red-dark);\\n    }\\n    &[data-severity=\\\"cautious\\\"] {\\n      --btn-primary: var(--action-severity-cautious);\\n      --btn-on-primary: var(--ergo-accent-blue);\\n      --btn-variant: var(--ergo-status-yellow-dark);\\n    }\\n    &[data-severity=\\\"suggested\\\"] {\\n      --btn-primary: var(--action-severity-suggested);\\n      --btn-variant: var(--ergo-status-blue-dark);\\n    }\\n    &[data-severity=\\\"encouraged\\\"] {\\n      --btn-primary: var(--action-severity-encouraged);\\n      --btn-variant: var(--ergo-status-green-dark);\\n    }\\n\\n    &[data-hierarchy=\\\"primary\\\"] {\\n      --act: var(--ergo-white);\\n      --ink: var(--tcn-button-text-color, var(--btn-on-primary));\\n      --mat: var(--tcn-button-color, var(--btn-primary));\\n      &[data-is-disabled=\\\"true\\\"] {\\n        --ink: var(--ergo-white);\\n        --mat: var(--ergo-grey-light);\\n      }\\n    }\\n\\n    &[data-hierarchy=\\\"secondary\\\"],\\n    &[data-hierarchy=\\\"tertiary\\\"] {\\n      --act: var(--tcn-button-color, var(--btn-variant));\\n      --ink: var(--tcn-button-color, var(--btn-variant));\\n      &[data-is-disabled=\\\"true\\\"] {\\n        --ink: var(--ergo-grey-light);\\n      }\\n    }\\n\\n    /* Decorations */\\n    &[data-hierarchy=\\\"tertiary\\\"]:hover {\\n      text-decoration: underline;\\n      text-decoration-color: var(--ink);\\n      text-decoration-thickness: 1px;\\n      text-underline-offset: 4px;\\n    }\\n\\n    &[data-hierarchy=\\\"tertiary\\\"] {\\n      border: 1px solid transparent;\\n    }\\n\\n    &[data-hierarchy=\\\"secondary\\\"] {\\n      border: 1px solid var(--ink);\\n    }\\n\\n    &[data-hierarchy=\\\"primary\\\"] {\\n      border: 1px solid var(--mat);\\n    }\\n\\n    transition:\\n      box-shadow 0.1s,\\n      transform 0.1s;\\n\\n    &:hover,\\n    &[data-hover] {\\n      transform: translateY(-1px);\\n      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);\\n\\n      /* Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles */\\n      :not(.tcn-select) {\\n        &::before,\\n        &::after {\\n          content: \\\"\\\";\\n          position: absolute;\\n          left: 0;\\n          right: 0;\\n          height: 4px;\\n        }\\n\\n        &::before {\\n          top: -2px;\\n        }\\n\\n        &::after {\\n          bottom: -2px;\\n        }\\n      }\\n    }\\n\\n    &:active,\\n    &[data-active] {\\n      transform: translateY(1px);\\n      box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.12);\\n    }\\n  }\\n\\n  /* @deprecated - use Button with utility prop instead */\\n  .tcn-slim-button {\\n    height: auto;\\n    width: auto;\\n    padding: 0;\\n\\n    &[data-size=\\\"sm\\\"] {\\n      min-height: 12px;\\n      min-width: 12px;\\n      padding: 0;\\n      .tcn-icon {\\n        min-height: 10px;\\n        min-width: 10px;\\n      }\\n    }\\n    &[data-size=\\\"md\\\"] {\\n      min-height: 18px;\\n      min-width: 18px;\\n      padding: 0;\\n      .tcn-icon {\\n        min-height: 14px;\\n        min-width: 14px;\\n      }\\n    }\\n\\n    &[data-size=\\\"lg\\\"] {\\n      min-height: 24px;\\n      min-width: 24px;\\n      padding: 0;\\n      .tcn-icon {\\n        min-height: 20px;\\n        min-width: 20px;\\n      }\\n    }\\n  }\\n\\n  .tcn-button[data-size].tcn-select {\\n    padding-inline-end: 26px;\\n  }\\n\\n  /* Toggle */\\n  .tcn-toggle {\\n    --tgl-false: var(--ergo-accent-blue);\\n    --tgl-true: var(--ergo-accent-blue);\\n    --on-tgl-true: var(--ergo-white);\\n\\n    --ink: var(--tcn-button-color, var(--tgl-false));\\n    --act: var(--tcn-button-color, var(--tgl-false));\\n    &[data-is-disabled=\\\"true\\\"] {\\n      --ink: var(--ergo-grey-light);\\n    }\\n    &[data-is-selected=\\\"true\\\"] {\\n      --mat: var(--tcn-button-color, var(--tgl-true));\\n      --ink: var(--tcn-button-text-color, var(--ergo-white));\\n      --act: var(--ergo-white);\\n      &[data-is-disabled=\\\"true\\\"] {\\n        --ink: var(--ergo-white);\\n        --mat: var(--ergo-grey-light);\\n      }\\n    }\\n  }\\n\\n  .tcn-button-group {\\n    .tcn-button-group-button:hover,\\n    .tcn-button-group-button:active {\\n      transform: none;\\n    }\\n\\n    .tcn-button-group-button {\\n      border-radius: 0;\\n    }\\n    .tcn-button-group-button:first-child {\\n      border-top-left-radius: var(--shape-radius-medium);\\n      border-bottom-left-radius: var(--shape-radius-medium);\\n    }\\n    .tcn-button-group-button:last-child {\\n      border-top-right-radius: var(--shape-radius-medium);\\n      border-bottom-right-radius: var(--shape-radius-medium);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"] {\\n      border: 0;\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:last-child) {\\n      border-right: 1px solid var(--on-mat-faint);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:first-child) {\\n      border-left: 1px solid var(--on-mat-faint);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:last-child) {\\n      border-right: 1px solid var(--act-down);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:first-child) {\\n      border-left: 1px solid var(--act-down);\\n    }\\n  }\\n\\n  .tcn-select-group {\\n    .tcn-select-group-option:hover,\\n    .tcn-select-group-option:active {\\n      transform: none;\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"] {\\n      color: var(--act);\\n      border-color: var(--act);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:hover {\\n      background: var(--act-faint);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:active {\\n      background: var(--act-down);\\n      color: var(--on-act);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n      color: var(--material-disabled);\\n      border: 1px solid var(--material-disabled);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n      background: var(--material-disabled);\\n      color: white;\\n      border: 1px solid var(--material-disabled);\\n    }\\n\\n    .tcn-select-group-option {\\n      border-radius: 0;\\n    }\\n    .tcn-select-group-option:first-child {\\n      border-top-left-radius: var(--shape-radius-medium);\\n      border-bottom-left-radius: var(--shape-radius-medium);\\n    }\\n    .tcn-select-group-option:last-child {\\n      border-top-right-radius: var(--shape-radius-medium);\\n      border-bottom-right-radius: var(--shape-radius-medium);\\n    }\\n  }\\n\\n  /* ===== Tabs ===== */\\n  .tcn-tabs-bar {\\n    .tcn-tabs-list {\\n      .tcn-tab-item {\\n        min-height: 24px;\\n        padding: 0px var(--padding-medium);\\n        text-decoration: none;\\n        text-overflow: ellipsis;\\n        overflow: hidden;\\n        white-space: nowrap;\\n      }\\n    }\\n  }\\n\\n  /* Default */\\n  .tcn-tabs-bar[data-variant=\\\"default\\\"] {\\n    .tcn-tabs-list {\\n      .tcn-tab-item {\\n        box-sizing: border-box;\\n        border: none;\\n        padding: 0px var(--padding-medium);\\n        border-radius: 0;\\n      }\\n      .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n        --mat: var(--tcn-button-color, var(--material));\\n        --ink: var(--tcn-button-text-color, var(--ergo-primary));\\n        --act: var(--ergo-primary);\\n      }\\n\\n      .tcn-tab-item:focus-visible {\\n        z-index: 2;\\n      }\\n      /* Hover Indicator */\\n      .tcn-tab-item[data-is-selected=\\\"false\\\"]:hover::after,\\n      .tcn-tab-item[data-is-selected=\\\"false\\\"]:focus-visible::after {\\n        content: \\\"\\\";\\n        display: block;\\n        position: absolute;\\n        left: 0;\\n        right: 0;\\n        bottom: 0px;\\n        height: 1px;\\n        background: var(--ergo-accent-blue);\\n        pointer-events: none;\\n        width: 100%;\\n        z-index: 3;\\n      }\\n\\n      /* Indicator */\\n      &::after {\\n        content: \\\"\\\";\\n        position: absolute;\\n        bottom: -1px;\\n        left: 0;\\n        min-height: 2px;\\n        transform: translateX(var(--tabs-active-rectangle-position-x, 0));\\n        width: var(--tabs-active-rectangle-width, 0);\\n        background: var(--ergo-primary);\\n        pointer-events: none;\\n        border-bottom-left-radius: 2px;\\n        border-bottom-right-radius: 2px;\\n        transition:\\n          transform 300ms ease-in-out,\\n          width 300ms ease-in-out;\\n        will-change: transform, width;\\n        z-index: 2;\\n      }\\n    }\\n\\n    /* Rail */\\n    &::before {\\n      content: \\\"\\\";\\n      position: absolute;\\n      bottom: 0px;\\n      left: 0;\\n      width: 100%;\\n      height: 1px;\\n      background: var(--material-line);\\n      pointer-events: none;\\n      z-index: 1;\\n    }\\n  }\\n\\n  /* Inline  */\\n  .tcn-tabs-bar[data-variant=\\\"inline\\\"] {\\n    font-size: 12px;\\n    min-width: min-content;\\n    width: auto;\\n    flex-grow: 0;\\n    border-radius: var(--shape-radius-medium);\\n    border: 1px solid var(--on-material);\\n    padding-block: 1px;\\n    padding-inline: 2px;\\n\\n    .tcn-tabs-list {\\n      height: 20px;\\n      gap: var(--gap-xs);\\n      .tcn-tab-item {\\n        border-radius: var(--shape-radius-medium);\\n        min-height: 20px;\\n      }\\n    }\\n  }\\n\\n  /* ===== MATERIAL ===== */\\n\\n  .material {\\n    background-color: var(--material);\\n    color: var(--on-material);\\n  }\\n\\n  /* Divider: use material-line; emphasis variants for strong/faint */\\n  .tcn-divider-line,\\n  .tcn-divider-line[data-emphasis=\\\"normal\\\"] {\\n    background: var(--material-line);\\n  }\\n  .tcn-divider-line[data-emphasis=\\\"strong\\\"] {\\n    background: color-mix(in srgb, var(--material-line) 80%, black 20%);\\n  }\\n  .tcn-divider-line[data-emphasis=\\\"faint\\\"] {\\n    background: color-mix(in srgb, var(--material-line) 80%, white 20%);\\n  }\\n\\n  /* ===== SURFACES ===== */\\n  .tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n    .tcn-drag-handle {\\n      cursor: move;\\n    }\\n  }\\n\\n  .tcn-frame-dialog {\\n    border: inherit;\\n  }\\n\\n  .tcn-tethered {\\n    /* Managing offset of the indicator in relation for the tethered element\\n    pad defaults to 0, but should be set depending on the surface */\\n\\n    --tether-pad-x: 0px;\\n    --tether-pad-y: 0px;\\n    --indicator-pad-x: 0px;\\n    --indicator-pad-y: 0px;\\n    --tether-pad-size: 0px;\\n    --tether-pad-pos: var(--tether-pad-size);\\n    --tether-pad-neg: calc(-1 * var(--tether-pad-size));\\n    left: calc(\\n      var(--tether-pad-x, 0) -\\n      var(--indicator-pad-x, 0) +\\n      var(--tethered-left, 0)\\n    );\\n    top: calc(var(--tether-pad-y, 0) + var(--tethered-top, 0));\\n\\n    :where(.tcn-tethered-origin-indicator) {\\n      left: calc(var(--indicator-pad-x, 0) + var(--tethered-origin-delta-x, 0));\\n      top: calc(var(--indicator-pad-y, 0) + var(--tethered-origin-delta-y, 0));\\n    }\\n\\n    &[data-h-anchor=\\\"start\\\"] {\\n      --tether-pad-x: var(--tether-pad-pos);\\n    }\\n\\n    &[data-h-anchor=\\\"end\\\"] {\\n      --tether-pad-x: var(--tether-pad-neg);\\n    }\\n\\n    &[data-h-origin=\\\"start\\\"] {\\n      --indicator-pad-x: var(--tether-pad-pos);\\n    }\\n\\n    &[data-h-origin=\\\"end\\\"] {\\n      --indicator-pad-x: var(--tether-pad-neg);\\n    }\\n\\n    &[data-v-origin=\\\"center\\\"] {\\n      --indicator-pad-x: 0px;\\n      --tether-pad-x: 0px;\\n      &[data-v-anchor=\\\"top\\\"] {\\n        --tether-pad-y: var(--tether-pad-pos);\\n      }\\n\\n      &[data-v-anchor=\\\"bottom\\\"] {\\n        --tether-pad-y: var(--tether-pad-neg);\\n      }\\n    }\\n\\n    &[data-anchor-direction=\\\"bottom\\\"] {\\n      padding-bottom: var(--shape-triangle-medium);\\n    }\\n\\n    &[data-anchor-direction=\\\"top\\\"] {\\n      padding-top: var(--shape-triangle-medium);\\n    }\\n\\n    &[data-anchor-direction=\\\"start\\\"] {\\n      padding-left: var(--shape-triangle-medium);\\n    }\\n\\n    &[data-anchor-direction=\\\"end\\\"] {\\n      padding-right: var(--shape-triangle-medium);\\n    }\\n  }\\n\\n  .tcn-tooltip {\\n    --tether-pad-size: 16px;\\n    background: transparent;\\n    --material: var(--ergo-secondary-dark);\\n    --on-material: var(--ergo-white);\\n    --action: var(--ergo-tertiary);\\n    --on-action: var(--ergo-secondary-dark);\\n    .tcn-tooltip-label {\\n      box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n      color: var(--on-material);\\n      background: var(--material);\\n      border-radius: var(--shape-radius-medium);\\n      padding: var(--padding-medium);\\n    }\\n  }\\n\\n  .tcn-list {\\n    gap: var(--gap-medium);\\n    .tcn-item {\\n      height: 24px;\\n      padding: 0px var(--padding-medium);\\n      border-radius: var(--shape-radius-medium);\\n    }\\n  }\\n  /* Rail: */\\n  .tcn-utility-strip {\\n    min-width: var(--bar-md);\\n  }\\n\\n  .tcn-utility-strip,\\n  .tcn-side {\\n    padding-block: var(--padding-medium);\\n    gap: var(--gap-medium);\\n  }\\n\\n  .tcn-rail {\\n    :where(.tcn-rail-stack) {\\n      gap: var(--gap-medium);\\n    }\\n    :where(.tcn-body) {\\n      gap: var(--gap-medium);\\n    }\\n  }\\n  /* Scaffold: */\\n  .tcn-footer,\\n  .tcn-header,\\n  .tcn-utility-bar {\\n    padding-inline: var(--pad-inline, var(--padding-medium));\\n    gap: var(--gap-medium);\\n  }\\n\\n  .tcn-utility-bar {\\n    min-height: var(--bar-md);\\n  }\\n\\n  .tcn-footer,\\n  .tcn-header {\\n    min-height: var(--bar-lg);\\n  }\\n\\n  .tcn-scaffold {\\n    --scaffold-divide-footer: var(--divide-footer, 1);\\n    --scaffold-divide-header: var(--divide-header, 1);\\n    --pad-inline: var(--padding-large);\\n\\n    /* Border appears on body only when it follows header or utility-bar */\\n    :where(.tcn-header) + :where(.tcn-body),\\n    :where(.tcn-utility-bar) + :where(.tcn-body) {\\n      border-top: calc(var(--scaffold-divide-header) * 1px) solid\\n        var(--foreground-color-primary);\\n    }\\n\\n    /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 */\\n    :where(.tcn-body) + :where(.tcn-footer) {\\n      border-top: calc(var(--scaffold-divide-footer) * 1px) solid\\n        var(--foreground-color-primary);\\n    }\\n\\n    :where(.tcn-body) {\\n      gap: var(--gap-medium);\\n    }\\n  }\\n\\n  .tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n    background-color: rgba(0, 0, 0, 0.5);\\n  }\\n\\n  /* MODAL: */\\n  .tcn-modal {\\n    --divide-header: 0;\\n    box-shadow: 0px 4px 34px 0px #00000096;\\n\\n    :where(.tcn-scaffold) {\\n      border-radius: var(--shape-radius-medium);\\n      background-color: var(--background-color-primary);\\n      overflow: hidden;\\n      border: 1px solid var(--foreground-color-primary);\\n    }\\n\\n    :where(.tcn-header) {\\n      --material: var(--ergo-secondary-dark);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-secondary-dark);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  /* WINDOW: */\\n  .tcn-window {\\n    box-shadow: 0px 4px 34px 0px #00000096;\\n\\n    --divide-header: 0;\\n\\n    :where(.tcn-scaffold) {\\n      border-radius: var(--shape-radius-medium);\\n      background-color: var(--background-color-primary);\\n      overflow: hidden;\\n      border: 2px solid white;\\n    }\\n\\n    :where(.tcn-header) {\\n      --material: var(--ergo-secondary-dark);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-secondary-dark);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  .tcn-pop-confirm {\\n    --divide-header: 0;\\n    --tether-pad-size: 16px;\\n    :where(.tcn-tethered-origin-indicator) {\\n      --material: var(--ergo-white);\\n    }\\n\\n    /* Set the indicator to match the header color */\\n    &[data-v-origin=\\\"top\\\"] {\\n      :where(.tcn-tethered-origin-indicator) {\\n        --material: var(--ergo-secondary-dark);\\n      }\\n    }\\n\\n    :where(.tcn-scaffold) {\\n      --pad-inline: var(--padding-medium);\\n\\n      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n      border-radius: var(--shape-radius-medium);\\n      background-color: var(--background-color-primary);\\n      overflow: hidden;\\n    }\\n\\n    :where(.tcn-header) {\\n      min-height: var(--bar-md);\\n\\n      --material: var(--ergo-secondary-dark);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-secondary-dark);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  .tcn-confirm {\\n    background-color: var(--background-color-primary);\\n  }\\n\\n  .tcn-bar {\\n    gap: var(--gap-medium);\\n\\n    /* Add a divider between groups unless there is a spacer after a group */\\n    :where(.tcn-group:not(:last-child):not(:has(+ .tcn-spacer)))::after {\\n      content: \\\"\\\";\\n      display: block;\\n      min-width: 2px;\\n      height: 18px;\\n      background: var(--ergo-grey);\\n      border-radius: var(--shape-radius-small);\\n      align-self: center;\\n    }\\n  }\\n\\n  /* PANEL */\\n  .tcn-panel {\\n    --material: var(--background-color-primary);\\n    background-color: var(--material);\\n    border-radius: var(--shape-radius-medium);\\n    overflow: hidden;\\n  }\\n\\n  /* Card */\\n  .tcn-card {\\n    --divide-header: 0;\\n\\n    background-color: var(--background-color-primary);\\n    border-radius: var(--shape-radius-medium);\\n    border: 1px solid var(--foreground-color-primary);\\n    overflow: hidden;\\n\\n    :where(.tcn-header) {\\n      min-height: var(--bar-md);\\n\\n      --material: var(--ergo-secondary-light);\\n      --on-material: var(--ergo-accent-blue);\\n      --action: var(--ergo-secondary);\\n      --on-action: var(--ergo-white);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n\\n    :where(.tcn-utility-bar) {\\n      min-height: var(--bar-sm);\\n    }\\n  }\\n\\n  /* SECTION */\\n  .tcn-section {\\n    --max-section-depth: 4;\\n    --section-tab-width: 4px;\\n    --section-tab-start: var(--pad-inline, var(--padding-medium));\\n    --section-tab-depth: 0;\\n    --section-tab: calc(\\n      var(--section-tab-start) +\\n      (var(--section-tab-width) * var(--section-tab-depth))\\n    );\\n    --section-action: var(--ergo-secondary);\\n    --section-mat: var(--ergo-secondary-light);\\n    --section-on-mat: var(--ergo-ink-primary);\\n  }\\n\\n  .tcn-heading {\\n    background-color: #f1f1f1;\\n    padding-inline-start: 8px;\\n    height: 30px;\\n    z-index: 5;\\n  }\\n\\n  .tcn-section > .tcn-heading {\\n    z-index: calc(var(--max-section-depth) - var(--section-tab-depth));\\n    padding-inline-start: var(--section-tab);\\n    --material: var(--section-mat);\\n    --on-material: var(--section-on-mat);\\n    --action: var(--section-action);\\n    background-color: var(--material);\\n    color: var(--on-material);\\n    gap: var(--gap-small);\\n  }\\n\\n  .tcn-section > :not(.tcn-heading, .tcn-section) {\\n    padding-inline-start: var(--section-tab);\\n  }\\n\\n  .tcn-section > .tcn-section {\\n    --section-tab-depth: 1;\\n    --section-mat: var(--ergo-accent-blue-light);\\n    --section-action: var(--ergo-accent-blue);\\n  }\\n\\n  .tcn-section > .tcn-section > .tcn-section {\\n    --section-tab-depth: 2;\\n    --section-mat: var(--ergo-accent-green-light);\\n    --section-action: var(--ergo-accent-green-dark);\\n  }\\n\\n  .tcn-section > .tcn-section > .tcn-section > .tcn-section {\\n    --section-tab-depth: 3;\\n    --section-mat: var(--ergo-tertiary-light);\\n    --section-action: var(--ergo-tertiary-dark);\\n  }\\n\\n  .tcn-caret {\\n    --caret-size: var(--shape-triangle-medium);\\n    --caret-triangle-height: calc(var(--caret-size) / 2);\\n    --caret-triangle-width: var(--caret-size);\\n    --caret-triangle-base: var(--caret-triangle-height) solid transparent;\\n    --caret-triangle-peak: var(--caret-triangle-width) solid var(--material);\\n\\n    width: var(--caret-size);\\n    height: var(--caret-size);\\n    min-width: var(--caret-size);\\n    min-height: var(--caret-size);\\n    flex-grow: 0;\\n    display: inline-block;\\n\\n    &[data-direction=\\\"top\\\"] {\\n      border-bottom: var(--caret-triangle-peak);\\n      border-left: var(--caret-triangle-base);\\n      border-right: var(--caret-triangle-base);\\n    }\\n\\n    &[data-direction=\\\"bottom\\\"] {\\n      border-top: var(--caret-triangle-peak);\\n      border-left: var(--caret-triangle-base);\\n      border-right: var(--caret-triangle-base);\\n    }\\n\\n    &[data-direction=\\\"start\\\"] {\\n      border-right: var(--caret-triangle-peak);\\n      border-top: var(--caret-triangle-base);\\n      border-bottom: var(--caret-triangle-base);\\n    }\\n\\n    &[data-direction=\\\"end\\\"] {\\n      border-left: var(--caret-triangle-peak);\\n      border-top: var(--caret-triangle-base);\\n      border-bottom: var(--caret-triangle-base);\\n    }\\n  }\\n\\n  /* ===== TABLE ===== */\\n  .tcn-table {\\n    --table-pad-inline: var(--pad-inline, var(--padding-medium));\\n\\n    --material: var(--ergo-white);\\n    --on-material: var(--ergo-ink-primary);\\n    --action: var(--ergo-accent-blue);\\n    --on-action: var(--ergo-white);\\n    background-color: var(--material);\\n    color: var(--on-material);\\n    border-collapse: separate;\\n    display: block;\\n  }\\n\\n  /* TODO: cleanup  - this needs merged with ui-table sticky logic/styles */\\n  .tcn-table[data-is-sticky=\\\"true\\\"] {\\n    .tcn-tbody {\\n      th:first-of-type {\\n        border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n      }\\n\\n      th:last-of-type {\\n        border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n      }\\n    }\\n    .tcn-thead {\\n      th:first-of-type {\\n        border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n      }\\n\\n      th:last-of-type {\\n        border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n      }\\n    }\\n  }\\n\\n  .tcn-td {\\n    text-align: start;\\n    overflow: hidden;\\n    white-space: nowrap;\\n    text-overflow: ellipsis;\\n  }\\n\\n  .tcn-thead {\\n    /* Border for header row */\\n    .tcn-tr {\\n      height: var(--bar-md);\\n      .tcn-th {\\n        border-bottom: 1px solid var(--ergo-grey-light);\\n      }\\n      .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)) {\\n        border-right: 1px solid var(--ergo-grey);\\n      }\\n      .tcn-th:last-of-type {\\n        border-left: 1px solid var(--ergo-grey);\\n      }\\n    }\\n  }\\n\\n  .tcn-tfoot {\\n    font-weight: bold;\\n    /* Border for footer row */\\n    .tcn-tr {\\n      height: var(--bar-sm);\\n      .tcn-th,\\n      .tcn-td {\\n        border-top: 1px solid var(--ergo-grey-light);\\n      }\\n    }\\n  }\\n\\n  /* Header and footer - both are light blue  */\\n  .tcn-thead,\\n  .tcn-tfoot {\\n    font-size: 14px;\\n    --material: var(--ergo-secondary-light);\\n    --on-material: var(--ergo-accent-blue);\\n    --action: var(--ergo-secondary);\\n    --on-action: var(--ergo-white);\\n\\n    background-color: var(--material);\\n    color: var(--on-material);\\n  }\\n\\n  .tcn-tr {\\n    height: var(--bar-sm);\\n    align-content: center;\\n  }\\n\\n  .tcn-td,\\n  .tcn-th {\\n    padding-inline: var(--padding-medium);\\n    vertical-align: middle;\\n    text-align: start;\\n    background: var(--material);\\n  }\\n\\n  /* First column (header, body, footer): use context for pad inline or default 8px */\\n  .tcn-table .tcn-tr > .tcn-th:first-child,\\n  .tcn-table .tcn-tr > .tcn-td:first-child {\\n    padding-inline-start: var(--table-pad-inline);\\n  }\\n\\n  /* Last column (header, body, footer): use context for pad inline or default 8px */\\n  .tcn-table .tcn-tr > .tcn-th:last-child,\\n  .tcn-table .tcn-tr > .tcn-td:last-child {\\n    padding-inline-end: var(--table-pad-inline);\\n  }\\n\\n  .tcn-tbody {\\n    font-size: 12px;\\n    .tcn-tr:nth-of-type(even) {\\n      --material: var(--ergo-accent-blue-light);\\n    }\\n    .tcn-tr:nth-of-type(odd) {\\n      --material: var(--ergo-white);\\n    }\\n    .tcn-tr:hover {\\n      --material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%);\\n    }\\n    .tcn-tr[data-is-selected=\\\"true\\\"] {\\n      --material: var(--ergo-secondary);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-accent-blue);\\n    }\\n\\n    .tcn-tr {\\n      --material: var(--bg-row);\\n      --on-material: var(--ergo-accent-blue);\\n      --action: var(--ergo-accent-blue);\\n      --on-action: var(--ergo-white);\\n      background-color: var(--material);\\n      color: var(--on-material);\\n    }\\n  }\\n\\n  /* ===== INPUTS ===== */\\n  .tcn-control {\\n    --act: var(--action);\\n    --mat: var(--material);\\n    --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n\\n    font-size: 12px;\\n    border: 1px solid var(--ergo-grey);\\n    box-sizing: border-box;\\n    min-height: var(--action-md);\\n    border-radius: var(--shape-radius-medium);\\n    padding-inline: 4px;\\n  }\\n\\n  .tcn-control[data-is-disabled=\\\"false\\\"]:hover {\\n    background: var(--act-raised);\\n  }\\n\\n  .tcn-control:focus-visible {\\n    outline: 2px solid var(--ergo-primary);\\n    outline-offset: 2px;\\n  }\\n\\n  .tcn-control:focus {\\n    border: 1px solid var(--act);\\n  }\\n\\n  .tcn-control::placeholder {\\n    color: var(--ergo-grey);\\n  }\\n\\n  .tcn-control[data-is-disabled=\\\"true\\\"] {\\n    cursor: not-allowed;\\n    background: var(--material-disabled);\\n    color: var(--on-material-disabled);\\n  }\\n\\n  .tcn-control[data-is-disabled=\\\"true\\\"]::placeholder {\\n    color: var(--on-material-disabled);\\n  }\\n\\n  .tcn-input {\\n    height: auto;\\n  }\\n\\n  .tcn-textarea,\\n  .tcn-input {\\n    cursor: text;\\n  }\\n\\n  .tcn-input-group {\\n    border-radius: var(--shape-radius-medium);\\n\\n    &:focus-within {\\n      outline: 2px solid var(--ergo-primary);\\n      outline-offset: 2px;\\n    }\\n\\n    .tcn-input-group-slot {\\n      z-index: 1;\\n      border-radius: 0;\\n      height: auto;\\n      min-height: var(--action-md);\\n      padding-block: 0;\\n      &:focus,\\n      &:focus-visible {\\n        z-index: 3;\\n        outline: none;\\n      }\\n    }\\n\\n    .tcn-input-group-slot:first-child {\\n      border-top-left-radius: var(--shape-radius-medium);\\n      border-bottom-left-radius: var(--shape-radius-medium);\\n    }\\n\\n    .tcn-input-group-slot:not(:last-child) {\\n      margin-right: -1px;\\n    }\\n\\n    .tcn-input-group-slot:last-child {\\n      border-top-right-radius: var(--shape-radius-medium);\\n      border-bottom-right-radius: var(--shape-radius-medium);\\n    }\\n\\n    .tcn-select,\\n    .tcn-button,\\n    .tcn-button[data-hierarchy] {\\n      border: 1px solid var(--ergo-grey);\\n      height: auto;\\n      min-height: var(--action-md);\\n      min-width: var(--action-md);\\n      box-sizing: border-box;\\n      &:hover,\\n      &[data-hover] {\\n        transform: none;\\n      }\\n    }\\n\\n    .tcn-select:focus-visible,\\n    .tcn-button:focus-visible,\\n    .tcn-button[data-hierarchy]:focus-visible {\\n      border-color: var(--ergo-primary);\\n    }\\n  }\\n\\n  .tcn-slider[data-is-disabled=\\\"true\\\"] {\\n    &::-webkit-slider-runnable-track {\\n      background: var(--ergo-grey-light);\\n    }\\n\\n    &::-webkit-slider-thumb {\\n      background-color: var(--ergo-white);\\n      border: 1px solid var(--ergo-grey-light);\\n    }\\n  }\\n\\n  .tcn-checkbox {\\n    border-color: var(--ergo-primary);\\n\\n    &:focus-visible,\\n    &:focus {\\n      outline: 2px solid var(--ergo-primary);\\n      outline-offset: 2px;\\n    }\\n\\n    &[data-is-disabled=\\\"true\\\"] {\\n      cursor: not-allowed;\\n      border-color: var(--material-disabled);\\n    }\\n\\n    &[data-checked=\\\"true\\\"][data-is-disabled=\\\"true\\\"] {\\n      background-color: var(--ergo-grey-light);\\n    }\\n\\n    &[data-checked=\\\"false\\\"][data-is-disabled=\\\"true\\\"] {\\n      background: var(--material);\\n      border-color: var(--ergo-grey-light);\\n      color: var(--ergo-grey-light);\\n    }\\n  }\\n\\n  .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"false\\\"],\\n  .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"true\\\"] {\\n    outline: 2px solid var(--ergo-primary);\\n    outline-offset: 2px;\\n  }\\n\\n  /* Quick fix to use some of the default module styles.*/\\n  .tcn-input,\\n  .tcn-select,\\n  .tcn-slider,\\n  .tcn-checkbox,\\n  .tcn-switch-wrapper,\\n  .tcn-date-picker,\\n  .tcn-date-picker-year-selector,\\n  .tcn-radio,\\n  .tcn-suggestion-list-search-input,\\n  .tcn-suggestion-list {\\n    --accent-color: var(--ergo-primary);\\n  }\\n}\\n\"","import css from './ergo_theme.css?raw';\nimport '@fontsource/lato';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":";AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCGFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}
+{"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"@layer tcn-theme {\\n  /* ===== CSS VARIABLES ===== */\\n  :root {\\n    /* ========== Ergo Brand Palette ========== */\\n    --ergo-primary: #ce6b2b;\\n    --ergo-secondary: #669eb4;\\n    --ergo-secondary-light: #ecf4fb;\\n    --ergo-secondary-dark: #497485;\\n    --ergo-tertiary: #dfd7cd;\\n    --ergo-tertiary-light: #f9f4ed;\\n    --ergo-tertiary-dark: #7e6c5d;\\n    --ergo-white: #ffffff;\\n\\n    --ergo-accent-blue: #395578;\\n    --ergo-accent-blue-light: #f3f4f6;\\n    --ergo-accent-green: #97bba3;\\n    --ergo-accent-green-light: #eef8ef;\\n    --ergo-accent-green-dark: #4f785c;\\n    --ergo-accent-yellow: #dbc97e;\\n    --ergo-accent-yellow-light: #fef9e7;\\n\\n    --ergo-grey: #aaaaaa;\\n    --ergo-grey-light: #d3d3d3;\\n    --ergo-grey-dark: #808080;\\n\\n    --ergo-status-red: #ff6565;\\n    --ergo-status-red-dark: #c24848;\\n\\n    --ergo-status-yellow: #ffd439;\\n    --ergo-status-yellow-dark: #dbb735;\\n\\n    --ergo-status-blue: var(--ergo-secondary);\\n    --ergo-status-blue-dark: var(--ergo-secondary-dark);\\n\\n    --ergo-status-green: #3fbc6a;\\n    --ergo-status-green-dark: #2d904f;\\n\\n    --ergo-ink-primary: var(--ergo-accent-blue);\\n    --ergo-ink-inverse: var(--ergo-white);\\n\\n    /* ========== Blackcat System Tokens ========== */\\n    --scalar: 1;\\n    --accent-color: var(--ergo-primary);\\n\\n    /* Typography */\\n    --font-color: var(--ergo-ink-primary);\\n    --font-family: \\\"Lato\\\", sans-serif;\\n    --font-size: 12px;\\n\\n    /* Spacing */\\n    --gap-xs: 2px;\\n    --gap-small: 4px;\\n    --gap-medium: 8px;\\n    --gap-large: 16px;\\n\\n    --padding-small: 4px;\\n    --padding-medium: 8px;\\n    --padding-large: 16px;\\n\\n    /* Sizing */\\n    --bar-xs: 16px;\\n    --bar-sm: 24px;\\n    --bar-md: 32px;\\n    --bar-lg: 40px;\\n    --bar-xl: 48px;\\n\\n    --action-sm: 20px;\\n    --action-md: 24px;\\n    --action-lg: 32px;\\n\\n    /* Status Colors */\\n    --status-color-disabled: var(--ergo-grey-light);\\n    --status-color-info: var(--ergo-status-blue);\\n    --status-color-warning: var(--ergo-status-yellow);\\n    --status-color-positive: var(--ergo-status-green);\\n    --status-color-error: var(--ergo-status-red);\\n\\n    --async-color-initial: var(--ergo-grey);\\n    --async-color-pending: var(--ergo-status-blue);\\n    --async-color-success: var(--ergo-status-green);\\n    --async-color-failed: var(--ergo-status-red);\\n\\n    --action-severity-dangerous: var(--ergo-status-red);\\n    --action-severity-cautious: var(--ergo-status-yellow);\\n    --action-severity-neutral: var(--ergo-primary);\\n    --action-severity-suggested: var(--ergo-status-blue);\\n    --action-severity-encouraged: var(--ergo-status-green);\\n\\n    /* Shape */\\n    --shape-radius-small: 2px;\\n    --shape-radius-medium: 4px;\\n    --shape-radius-large: 8px;\\n    --shape-triangle-medium: 12px;\\n\\n    /* Palette */\\n    --primary-color-faint: #c0c0c0;\\n    --primary-color: #008cff;\\n    --primary-color-strong: #008cff;\\n\\n    --secondary-color-faint: #c0c0c0;\\n    --secondary-color: #008cff;\\n    --secondary-color-strong: #008cff;\\n\\n    --tertiary-color-faint: #c0c0c0;\\n    --tertiary-color: #008cff;\\n    --tertiary-color-strong: #008cff;\\n\\n    --quaternary-color-faint: #c0c0c0;\\n    --quaternary-color: #008cff;\\n    --quaternary-color-strong: #008cff;\\n\\n    --background-color-primary: #ffffff;\\n    --background-color-secondary: #fafafa;\\n    --background-color-tertiary: #f1f1f1;\\n    --background-color-quaternary: #ffffff;\\n\\n    --foreground-color-primary: #aaa;\\n    --foreground-color-secondary: #222222;\\n    --foreground-color-tertiary: #222222;\\n    --foreground-color-quaternary: #222222;\\n\\n    --material-disabled: var(--ergo-grey-light);\\n    --on-material-disabled: var(--ergo-ink-inverse);\\n    --ink-disabled: var(--ergo-grey-light);\\n\\n    --material-line: var(--ergo-grey);\\n\\n    /* Default Material */\\n    --action: var(--ergo-primary);\\n    --on-action: var(--ergo-white);\\n    --material: var(--ergo-white);\\n    --on-material: var(--ergo-accent-blue);\\n  }\\n\\n  .tcn-theme-root {\\n    font-family: var(--font-family);\\n    color: var(--font-color);\\n    --action: var(--ergo-primary);\\n    --on-action: var(--ergo-white);\\n    --material: var(--ergo-white);\\n    --on-material: var(--ergo-accent-blue);\\n  }\\n\\n  /* ===== Actions ===== */\\n\\n  .tcn-interactive {\\n    cursor: pointer;\\n    user-select: none;\\n    transition:\\n      transform 0.1s,\\n      background 0.1s,\\n      color 0.1s;\\n\\n    --ink: var(--on-material);\\n    --act: var(--action);\\n    --mat: var(--material);\\n\\n    --act-down: color-mix(in srgb, var(--mat), black 12%);\\n    --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n    --act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);\\n    --act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);\\n\\n    background: var(--mat);\\n    color: var(--ink);\\n    transition:\\n      background 0.1s,\\n      color 0.1s;\\n\\n    &:focus-visible,\\n    &[data-focus-visible] {\\n      background: var(--act-focus);\\n      outline: 2px solid var(--ergo-primary);\\n      outline-offset: 2px;\\n    }\\n\\n    &:hover,\\n    &[data-hover] {\\n      background: var(--act-raised);\\n    }\\n\\n    &:active,\\n    &[data-active] {\\n      background: var(--act-down);\\n    }\\n\\n    &[data-is-disabled=\\\"true\\\"] {\\n      pointer-events: none;\\n    }\\n  }\\n\\n  /* ===== Base Button ===== \\n  * Shared between Button and Toggle.\\n  * Primarily manages button dimensions and sizing ratios.\\n  */\\n  .tcn-base-button {\\n    --btn-size-base: 26px;\\n    --btn-pad-base: 12px;\\n\\n    --btn-pad-delta: 4px;\\n    --btn-size-delta: 4px;\\n    --btn-font-size-delta: 2px;\\n    --btn-step: 1;\\n\\n    /* Increase size and pad by 4px for each size \\\"step\\\" from medium */\\n    --btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));\\n    --btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));\\n\\n    border-radius: var(--shape-radius-medium);\\n    min-height: var(--btn-size);\\n    padding: var(--padding-small) var(--btn-pad);\\n\\n    &[data-size=\\\"sm\\\"] {\\n      --btn-step: -1;\\n    }\\n    &[data-size=\\\"md\\\"] {\\n      --btn-step: 0;\\n    }\\n    &[data-size=\\\"lg\\\"] {\\n      --btn-step: 1;\\n    }\\n\\n    &[data-is-utility=\\\"true\\\"] {\\n      height: auto;\\n      width: auto;\\n      min-width: var(--btn-size);\\n      padding: 0;\\n\\n      /* Icon is 75% of the button size but minimum of 2px to account for border and 1px offset */\\n      --util-ratio: 0.75;\\n      --btn-size-base: 18px;\\n\\n      font-size: calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step));\\n      .tcn-icon {\\n        min-height: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n        min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n      }\\n    }\\n  }\\n\\n  /* ===== Button ===== \\n  * Manages Hierarchy and Severity.\\n  */\\n  .tcn-button {\\n    --btn-primary: var(--action);\\n    --btn-on-primary: var(--on-action);\\n    --btn-variant: var(--on-material);\\n\\n    &[data-severity=\\\"dangerous\\\"] {\\n      --btn-primary: var(--action-severity-dangerous);\\n      --btn-variant: var(--ergo-status-red-dark);\\n    }\\n    &[data-severity=\\\"cautious\\\"] {\\n      --btn-primary: var(--action-severity-cautious);\\n      --btn-on-primary: var(--ergo-accent-blue);\\n      --btn-variant: var(--ergo-status-yellow-dark);\\n    }\\n    &[data-severity=\\\"suggested\\\"] {\\n      --btn-primary: var(--action-severity-suggested);\\n      --btn-variant: var(--ergo-status-blue-dark);\\n    }\\n    &[data-severity=\\\"encouraged\\\"] {\\n      --btn-primary: var(--action-severity-encouraged);\\n      --btn-variant: var(--ergo-status-green-dark);\\n    }\\n\\n    &[data-hierarchy=\\\"primary\\\"] {\\n      --act: var(--ergo-white);\\n      --ink: var(--tcn-button-text-color, var(--btn-on-primary));\\n      --mat: var(--tcn-button-color, var(--btn-primary));\\n      &[data-is-disabled=\\\"true\\\"] {\\n        --ink: var(--ergo-white);\\n        --mat: var(--ergo-grey-light);\\n      }\\n    }\\n\\n    &[data-hierarchy=\\\"secondary\\\"],\\n    &[data-hierarchy=\\\"tertiary\\\"] {\\n      --act: var(--tcn-button-color, var(--btn-variant));\\n      --ink: var(--tcn-button-color, var(--btn-variant));\\n      &[data-is-disabled=\\\"true\\\"] {\\n        --ink: var(--ergo-grey-light);\\n      }\\n    }\\n\\n    /* Decorations */\\n    &[data-hierarchy=\\\"tertiary\\\"]:hover {\\n      text-decoration: underline;\\n      text-decoration-color: var(--ink);\\n      text-decoration-thickness: 1px;\\n      text-underline-offset: 4px;\\n    }\\n\\n    &[data-hierarchy=\\\"tertiary\\\"] {\\n      border: 1px solid transparent;\\n    }\\n\\n    &[data-hierarchy=\\\"secondary\\\"] {\\n      border: 1px solid var(--ink);\\n    }\\n\\n    &[data-hierarchy=\\\"primary\\\"] {\\n      border: 1px solid var(--mat);\\n    }\\n\\n    transition:\\n      box-shadow 0.1s,\\n      transform 0.1s;\\n\\n    &:hover,\\n    &[data-hover] {\\n      transform: translateY(-1px);\\n      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);\\n\\n      /* Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles */\\n      :not(.tcn-select) {\\n        &::before,\\n        &::after {\\n          content: \\\"\\\";\\n          position: absolute;\\n          left: 0;\\n          right: 0;\\n          height: 4px;\\n        }\\n\\n        &::before {\\n          top: -2px;\\n        }\\n\\n        &::after {\\n          bottom: -2px;\\n        }\\n      }\\n    }\\n\\n    &:active,\\n    &[data-active] {\\n      transform: translateY(1px);\\n      box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.12);\\n    }\\n  }\\n\\n  /* @deprecated - use Button with utility prop instead */\\n  .tcn-slim-button {\\n    height: auto;\\n    width: auto;\\n    padding: 0;\\n\\n    &[data-size=\\\"sm\\\"] {\\n      min-height: 12px;\\n      min-width: 12px;\\n      padding: 0;\\n      .tcn-icon {\\n        min-height: 10px;\\n        min-width: 10px;\\n      }\\n    }\\n    &[data-size=\\\"md\\\"] {\\n      min-height: 18px;\\n      min-width: 18px;\\n      padding: 0;\\n      .tcn-icon {\\n        min-height: 14px;\\n        min-width: 14px;\\n      }\\n    }\\n\\n    &[data-size=\\\"lg\\\"] {\\n      min-height: 24px;\\n      min-width: 24px;\\n      padding: 0;\\n      .tcn-icon {\\n        min-height: 20px;\\n        min-width: 20px;\\n      }\\n    }\\n  }\\n\\n  .tcn-button[data-size].tcn-select {\\n    padding-inline-end: 26px;\\n  }\\n\\n  /* Toggle */\\n  .tcn-toggle {\\n    --tgl-false: var(--ergo-accent-blue);\\n    --tgl-true: var(--ergo-accent-blue);\\n    --on-tgl-true: var(--ergo-white);\\n\\n    --ink: var(--tcn-button-color, var(--tgl-false));\\n    --act: var(--tcn-button-color, var(--tgl-false));\\n    &[data-is-disabled=\\\"true\\\"] {\\n      --ink: var(--ergo-grey-light);\\n    }\\n    &[data-is-selected=\\\"true\\\"] {\\n      --mat: var(--tcn-button-color, var(--tgl-true));\\n      --ink: var(--tcn-button-text-color, var(--ergo-white));\\n      --act: var(--ergo-white);\\n      &[data-is-disabled=\\\"true\\\"] {\\n        --ink: var(--ergo-white);\\n        --mat: var(--ergo-grey-light);\\n      }\\n    }\\n  }\\n\\n  .tcn-button-group {\\n    .tcn-button-group-button:hover,\\n    .tcn-button-group-button:active {\\n      transform: none;\\n    }\\n\\n    .tcn-button-group-button {\\n      border-radius: 0;\\n    }\\n    .tcn-button-group-button:first-child {\\n      border-top-left-radius: var(--shape-radius-medium);\\n      border-bottom-left-radius: var(--shape-radius-medium);\\n    }\\n    .tcn-button-group-button:last-child {\\n      border-top-right-radius: var(--shape-radius-medium);\\n      border-bottom-right-radius: var(--shape-radius-medium);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"] {\\n      border: 0;\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:last-child) {\\n      border-right: 1px solid var(--on-mat-faint);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:first-child) {\\n      border-left: 1px solid var(--on-mat-faint);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:last-child) {\\n      border-right: 1px solid var(--act-down);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:first-child) {\\n      border-left: 1px solid var(--act-down);\\n    }\\n  }\\n\\n  .tcn-select-group {\\n    .tcn-select-group-option:hover,\\n    .tcn-select-group-option:active {\\n      transform: none;\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"] {\\n      color: var(--act);\\n      border-color: var(--act);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:hover {\\n      background: var(--act-faint);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:active {\\n      background: var(--act-down);\\n      color: var(--on-act);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n      color: var(--material-disabled);\\n      border: 1px solid var(--material-disabled);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n      background: var(--material-disabled);\\n      color: white;\\n      border: 1px solid var(--material-disabled);\\n    }\\n\\n    .tcn-select-group-option {\\n      border-radius: 0;\\n    }\\n    .tcn-select-group-option:first-child {\\n      border-top-left-radius: var(--shape-radius-medium);\\n      border-bottom-left-radius: var(--shape-radius-medium);\\n    }\\n    .tcn-select-group-option:last-child {\\n      border-top-right-radius: var(--shape-radius-medium);\\n      border-bottom-right-radius: var(--shape-radius-medium);\\n    }\\n  }\\n\\n  /* ===== Tabs ===== */\\n  .tcn-tabs-bar {\\n    .tcn-tabs-list {\\n      .tcn-tab-item {\\n        min-height: 24px;\\n        padding: 0px var(--padding-medium);\\n        text-decoration: none;\\n        text-overflow: ellipsis;\\n        overflow: hidden;\\n        white-space: nowrap;\\n      }\\n    }\\n  }\\n\\n  /* Default */\\n  .tcn-tabs-bar[data-variant=\\\"default\\\"] {\\n    .tcn-tabs-list {\\n      .tcn-tab-item {\\n        box-sizing: border-box;\\n        border: none;\\n        padding: 0px var(--padding-medium);\\n        border-radius: 0;\\n      }\\n      .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n        --mat: var(--tcn-button-color, var(--material));\\n        --ink: var(--tcn-button-text-color, var(--ergo-primary));\\n        --act: var(--ergo-primary);\\n      }\\n\\n      .tcn-tab-item:focus-visible {\\n        z-index: 2;\\n      }\\n      /* Hover Indicator */\\n      .tcn-tab-item[data-is-selected=\\\"false\\\"]:hover::after,\\n      .tcn-tab-item[data-is-selected=\\\"false\\\"]:focus-visible::after {\\n        content: \\\"\\\";\\n        display: block;\\n        position: absolute;\\n        left: 0;\\n        right: 0;\\n        bottom: 0px;\\n        height: 1px;\\n        background: var(--ergo-accent-blue);\\n        pointer-events: none;\\n        width: 100%;\\n        z-index: 3;\\n      }\\n\\n      /* Indicator */\\n      &::after {\\n        content: \\\"\\\";\\n        position: absolute;\\n        bottom: -1px;\\n        left: 0;\\n        min-height: 2px;\\n        transform: translateX(var(--tabs-active-rectangle-position-x, 0));\\n        width: var(--tabs-active-rectangle-width, 0);\\n        background: var(--ergo-primary);\\n        pointer-events: none;\\n        border-bottom-left-radius: 2px;\\n        border-bottom-right-radius: 2px;\\n        transition:\\n          transform 300ms ease-in-out,\\n          width 300ms ease-in-out;\\n        will-change: transform, width;\\n        z-index: 2;\\n      }\\n    }\\n\\n    /* Rail */\\n    &::before {\\n      content: \\\"\\\";\\n      position: absolute;\\n      bottom: 0px;\\n      left: 0;\\n      width: 100%;\\n      height: 1px;\\n      background: var(--material-line);\\n      pointer-events: none;\\n      z-index: 1;\\n    }\\n  }\\n\\n  /* Inline  */\\n  .tcn-tabs-bar[data-variant=\\\"inline\\\"] {\\n    font-size: 12px;\\n    min-width: min-content;\\n    width: auto;\\n    flex-grow: 0;\\n    border-radius: var(--shape-radius-medium);\\n    border: 1px solid var(--on-material);\\n    padding-block: 1px;\\n    padding-inline: 2px;\\n\\n    .tcn-tabs-list {\\n      height: 20px;\\n      gap: var(--gap-xs);\\n      .tcn-tab-item {\\n        border-radius: var(--shape-radius-medium);\\n        min-height: 20px;\\n      }\\n    }\\n  }\\n\\n  /* ===== MATERIAL ===== */\\n\\n  .material {\\n    background-color: var(--material);\\n    color: var(--on-material);\\n  }\\n\\n  /* Divider: use material-line; emphasis variants for strong/faint */\\n  .tcn-divider-line,\\n  .tcn-divider-line[data-emphasis=\\\"normal\\\"] {\\n    background: var(--material-line);\\n  }\\n  .tcn-divider-line[data-emphasis=\\\"strong\\\"] {\\n    background: color-mix(in srgb, var(--material-line) 80%, black 20%);\\n  }\\n  .tcn-divider-line[data-emphasis=\\\"faint\\\"] {\\n    background: color-mix(in srgb, var(--material-line) 80%, white 20%);\\n  }\\n\\n  /* ===== SURFACES ===== */\\n  .tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n    .tcn-drag-handle {\\n      cursor: move;\\n    }\\n  }\\n\\n  .tcn-frame-dialog {\\n    border: inherit;\\n  }\\n\\n  .tcn-tethered {\\n    /* Managing offset of the indicator in relation for the tethered element\\n    pad defaults to 0, but should be set depending on the surface */\\n\\n    --tether-pad-x: 0px;\\n    --tether-pad-y: 0px;\\n    --indicator-pad-x: 0px;\\n    --indicator-pad-y: 0px;\\n    --tether-pad-size: 0px;\\n    --tether-pad-pos: var(--tether-pad-size);\\n    --tether-pad-neg: calc(-1 * var(--tether-pad-size));\\n    left: calc(\\n      var(--tether-pad-x, 0) -\\n      var(--indicator-pad-x, 0) +\\n      var(--tethered-left, 0)\\n    );\\n    top: calc(var(--tether-pad-y, 0) + var(--tethered-top, 0));\\n\\n    :where(.tcn-tethered-origin-indicator) {\\n      left: calc(var(--indicator-pad-x, 0) + var(--tethered-origin-delta-x, 0));\\n      top: calc(var(--indicator-pad-y, 0) + var(--tethered-origin-delta-y, 0));\\n    }\\n\\n    &[data-h-anchor=\\\"start\\\"] {\\n      --tether-pad-x: var(--tether-pad-pos);\\n    }\\n\\n    &[data-h-anchor=\\\"end\\\"] {\\n      --tether-pad-x: var(--tether-pad-neg);\\n    }\\n\\n    &[data-h-origin=\\\"start\\\"] {\\n      --indicator-pad-x: var(--tether-pad-pos);\\n    }\\n\\n    &[data-h-origin=\\\"end\\\"] {\\n      --indicator-pad-x: var(--tether-pad-neg);\\n    }\\n\\n    &[data-v-origin=\\\"center\\\"] {\\n      --indicator-pad-x: 0px;\\n      --tether-pad-x: 0px;\\n      &[data-v-anchor=\\\"top\\\"] {\\n        --tether-pad-y: var(--tether-pad-pos);\\n      }\\n\\n      &[data-v-anchor=\\\"bottom\\\"] {\\n        --tether-pad-y: var(--tether-pad-neg);\\n      }\\n    }\\n\\n    &[data-anchor-direction=\\\"bottom\\\"] {\\n      padding-bottom: var(--shape-triangle-medium);\\n    }\\n\\n    &[data-anchor-direction=\\\"top\\\"] {\\n      padding-top: var(--shape-triangle-medium);\\n    }\\n\\n    &[data-anchor-direction=\\\"start\\\"] {\\n      padding-left: var(--shape-triangle-medium);\\n    }\\n\\n    &[data-anchor-direction=\\\"end\\\"] {\\n      padding-right: var(--shape-triangle-medium);\\n    }\\n  }\\n\\n  .tcn-tooltip {\\n    --tether-pad-size: 16px;\\n    background: transparent;\\n    --material: var(--ergo-secondary-dark);\\n    --on-material: var(--ergo-white);\\n    --action: var(--ergo-tertiary);\\n    --on-action: var(--ergo-secondary-dark);\\n    .tcn-tooltip-label {\\n      box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n      color: var(--on-material);\\n      background: var(--material);\\n      border-radius: var(--shape-radius-medium);\\n      padding: var(--padding-medium);\\n    }\\n  }\\n\\n  .tcn-list {\\n    gap: var(--gap-medium);\\n    .tcn-item {\\n      height: 24px;\\n      padding: 0px var(--padding-medium);\\n      border-radius: var(--shape-radius-medium);\\n    }\\n  }\\n  /* Rail: */\\n  .tcn-utility-strip {\\n    min-width: var(--bar-md);\\n  }\\n\\n  .tcn-utility-strip,\\n  .tcn-side {\\n    padding-block: var(--padding-medium);\\n    gap: var(--gap-medium);\\n  }\\n\\n  /* Scaffold: */\\n  .tcn-footer,\\n  .tcn-header,\\n  .tcn-utility-bar {\\n    padding-inline: var(--pad-inline, var(--padding-medium));\\n    gap: var(--gap-medium);\\n  }\\n\\n  .tcn-utility-bar {\\n    min-height: var(--bar-md);\\n  }\\n\\n  .tcn-footer,\\n  .tcn-header {\\n    min-height: var(--bar-lg);\\n  }\\n\\n  .tcn-scaffold {\\n    --scaffold-divide-footer: var(--divide-footer, 1);\\n    --scaffold-divide-header: var(--divide-header, 1);\\n    --pad-inline: var(--padding-large);\\n\\n    /* Border appears on body only when it follows header or utility-bar */\\n    :where(.tcn-header) + :where(.tcn-body),\\n    :where(.tcn-utility-bar) + :where(.tcn-body) {\\n      border-top: calc(var(--scaffold-divide-header) * 1px) solid\\n        var(--foreground-color-primary);\\n    }\\n\\n    /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 */\\n    :where(.tcn-body) + :where(.tcn-footer) {\\n      border-top: calc(var(--scaffold-divide-footer) * 1px) solid\\n        var(--foreground-color-primary);\\n    }\\n  }\\n\\n  /* .tcn-body > .tcn-scaffold > .tcn-scaffold-stack,\\n  .tcn-body > .tcn-rail > .tcn-rail-stack {\\n    gap: var(--gap-medium);\\n  } */\\n\\n  .tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n    background-color: rgba(0, 0, 0, 0.5);\\n  }\\n\\n  /* PAGE: */\\n  .tcn-page {\\n    --divide-header: 0;\\n    --divide-footer: 0;\\n    --material: var(--background-color-tertiary);\\n    background-color: var(--material);\\n    padding: var(--padding-medium);\\n  }\\n\\n  .tcn-body > .tcn-scaffold > .tcn-scaffold-stack,\\n  .tcn-body > .tcn-rail > .tcn-rail-stack {\\n    gap: var(--gap-medium);\\n  }\\n\\n  /* MODAL: */\\n  .tcn-modal {\\n    --divide-header: 0;\\n    box-shadow: 0px 4px 34px 0px #00000096;\\n    border-radius: var(--shape-radius-medium);\\n    background-color: var(--background-color-primary);\\n    overflow: hidden;\\n    border: 1px solid var(--foreground-color-primary);\\n\\n    :where(.tcn-header) {\\n      --material: var(--ergo-secondary-dark);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-secondary-dark);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  /* DRAWER: */\\n  .tcn-drawer {\\n    --divide-header: 0;\\n    box-shadow: 0px 4px 34px 0px #00000096;\\n    background-color: var(--background-color-primary);\\n    overflow: hidden;\\n\\n    :where(.tcn-header) {\\n      --material: var(--ergo-secondary-dark);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-secondary-dark);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  /* WINDOW: */\\n  .tcn-window {\\n    box-shadow: 0px 4px 34px 0px #00000096;\\n    --divide-header: 0;\\n    border-radius: var(--shape-radius-medium);\\n    background-color: var(--background-color-primary);\\n    overflow: hidden;\\n    border: 2px solid white;\\n\\n    :where(.tcn-header) {\\n      --material: var(--ergo-secondary-dark);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-secondary-dark);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  .tcn-pop-confirm {\\n    --divide-header: 0;\\n    --tether-pad-size: 16px;\\n    --pad-inline: var(--padding-medium);\\n\\n    .tcn-pop-confirm-scaffold > .tcn-scaffold-stack {\\n      border-radius: var(--shape-radius-medium);\\n      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n      background-color: var(--background-color-primary);\\n    }\\n\\n    :where(.tcn-tethered-origin-indicator) {\\n      --material: var(--ergo-white);\\n    }\\n\\n    /* Set the indicator to match the header color */\\n    &[data-v-origin=\\\"top\\\"] {\\n      :where(.tcn-tethered-origin-indicator) {\\n        --material: var(--ergo-secondary-dark);\\n      }\\n    }\\n\\n    :where(.tcn-header) {\\n      min-height: var(--bar-md);\\n\\n      --material: var(--ergo-secondary-dark);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-secondary-dark);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  .tcn-confirm {\\n    --material: var(--background-color-primary);\\n    background-color: var(--material);\\n  }\\n\\n  .tcn-bar {\\n    gap: var(--gap-medium);\\n\\n    /* Add a divider between groups unless there is a spacer after a group */\\n    :where(.tcn-group:not(:last-child):not(:has(+ .tcn-spacer)))::after {\\n      content: \\\"\\\";\\n      display: block;\\n      min-width: 2px;\\n      height: 18px;\\n      background: var(--ergo-grey);\\n      border-radius: var(--shape-radius-small);\\n      align-self: center;\\n    }\\n  }\\n\\n  /* PANEL */\\n  .tcn-panel {\\n    --divide-header: 1;\\n    --divide-footer: 1;\\n    --material: var(--background-color-primary);\\n    background-color: var(--material);\\n    border-radius: var(--shape-radius-medium);\\n    overflow: hidden;\\n\\n    :where(.tcn-title) {\\n      font-size: 18px;\\n    }\\n  }\\n\\n  /* Aside */\\n  .tcn-aside {\\n    --divide-header: 1;\\n    --divide-footer: 1;\\n\\n    --material: var(--background-color-secondary);\\n    background-color: var(--material);\\n    overflow: hidden;\\n\\n    :where(.tcn-header) {\\n      min-height: var(--bar-md);\\n    }\\n\\n    :where(.tcn-footer) {\\n      min-height: var(--bar-md);\\n    }\\n\\n    :where(.tcn-title) {\\n      font-size: 16px;\\n    }\\n  }\\n\\n  /* Card */\\n  .tcn-card {\\n    --divide-header: 0;\\n    --divide-footer: 1;\\n\\n    background-color: var(--background-color-primary);\\n    border-radius: var(--shape-radius-medium);\\n    border: 1px solid var(--foreground-color-primary);\\n    overflow: hidden;\\n\\n    :where(.tcn-header) {\\n      min-height: var(--bar-md);\\n\\n      --material: var(--ergo-secondary-light);\\n      --on-material: var(--ergo-accent-blue);\\n      --action: var(--ergo-secondary);\\n      --on-action: var(--ergo-white);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n\\n    :where(.tcn-utility-bar) {\\n      min-height: var(--bar-sm);\\n    }\\n  }\\n\\n  /* SECTION */\\n  .tcn-section {\\n    --max-section-depth: 4;\\n    --section-tab-width: 4px;\\n    --section-tab-start: var(--pad-inline, var(--padding-medium));\\n    --section-tab-depth: 0;\\n    --section-tab: calc(\\n      var(--section-tab-start) +\\n      (var(--section-tab-width) * var(--section-tab-depth))\\n    );\\n    --section-action: var(--ergo-secondary);\\n    --section-mat: var(--ergo-secondary-light);\\n    --section-on-mat: var(--ergo-ink-primary);\\n  }\\n\\n  .tcn-heading {\\n    background-color: #f1f1f1;\\n    padding-inline-start: var(--pad-inline, var(--padding-medium));\\n    height: 30px;\\n    z-index: 5;\\n  }\\n\\n  .tcn-section > .tcn-heading {\\n    z-index: calc(var(--max-section-depth) - var(--section-tab-depth));\\n    padding-inline-start: var(--section-tab);\\n    --material: var(--section-mat);\\n    --on-material: var(--section-on-mat);\\n    --action: var(--section-action);\\n    background-color: var(--material);\\n    color: var(--on-material);\\n    gap: var(--gap-small);\\n  }\\n\\n  .tcn-section > :not(.tcn-heading, .tcn-section) {\\n    padding-inline-start: var(--section-tab);\\n  }\\n\\n  .tcn-section > .tcn-section {\\n    --section-tab-depth: 1;\\n    --section-mat: var(--ergo-accent-blue-light);\\n    --section-action: var(--ergo-accent-blue);\\n  }\\n\\n  .tcn-section > .tcn-section > .tcn-section {\\n    --section-tab-depth: 2;\\n    --section-mat: var(--ergo-accent-green-light);\\n    --section-action: var(--ergo-accent-green-dark);\\n  }\\n\\n  .tcn-section > .tcn-section > .tcn-section > .tcn-section {\\n    --section-tab-depth: 3;\\n    --section-mat: var(--ergo-tertiary-light);\\n    --section-action: var(--ergo-tertiary-dark);\\n  }\\n\\n  .tcn-caret {\\n    --caret-size: var(--shape-triangle-medium);\\n    --caret-triangle-height: calc(var(--caret-size) / 2);\\n    --caret-triangle-width: var(--caret-size);\\n    --caret-triangle-base: var(--caret-triangle-height) solid transparent;\\n    --caret-triangle-peak: var(--caret-triangle-width) solid var(--material);\\n\\n    width: var(--caret-size);\\n    height: var(--caret-size);\\n    min-width: var(--caret-size);\\n    min-height: var(--caret-size);\\n    flex-grow: 0;\\n    display: inline-block;\\n\\n    &[data-direction=\\\"top\\\"] {\\n      border-bottom: var(--caret-triangle-peak);\\n      border-left: var(--caret-triangle-base);\\n      border-right: var(--caret-triangle-base);\\n    }\\n\\n    &[data-direction=\\\"bottom\\\"] {\\n      border-top: var(--caret-triangle-peak);\\n      border-left: var(--caret-triangle-base);\\n      border-right: var(--caret-triangle-base);\\n    }\\n\\n    &[data-direction=\\\"start\\\"] {\\n      border-right: var(--caret-triangle-peak);\\n      border-top: var(--caret-triangle-base);\\n      border-bottom: var(--caret-triangle-base);\\n    }\\n\\n    &[data-direction=\\\"end\\\"] {\\n      border-left: var(--caret-triangle-peak);\\n      border-top: var(--caret-triangle-base);\\n      border-bottom: var(--caret-triangle-base);\\n    }\\n  }\\n\\n  /* ===== TABLE ===== */\\n  .tcn-table {\\n    --table-pad-inline: var(--pad-inline, var(--padding-medium));\\n\\n    --material: var(--ergo-white);\\n    --on-material: var(--ergo-ink-primary);\\n    --action: var(--ergo-accent-blue);\\n    --on-action: var(--ergo-white);\\n    background-color: var(--material);\\n    color: var(--on-material);\\n    border-collapse: separate;\\n    display: block;\\n  }\\n\\n  /* TODO: cleanup  - this needs merged with ui-table sticky logic/styles */\\n  .tcn-table[data-is-sticky=\\\"true\\\"] {\\n    .tcn-tbody {\\n      th:first-of-type {\\n        border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n      }\\n\\n      th:last-of-type {\\n        border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n      }\\n    }\\n    .tcn-thead {\\n      th:first-of-type {\\n        border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n      }\\n\\n      th:last-of-type {\\n        border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n      }\\n    }\\n  }\\n\\n  .tcn-td {\\n    text-align: start;\\n    overflow: hidden;\\n    white-space: nowrap;\\n    text-overflow: ellipsis;\\n  }\\n\\n  .tcn-thead {\\n    /* Border for header row */\\n    .tcn-tr {\\n      height: var(--bar-md);\\n      .tcn-th {\\n        border-bottom: 1px solid var(--ergo-grey-light);\\n      }\\n      .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)) {\\n        border-right: 1px solid var(--ergo-grey);\\n      }\\n      .tcn-th:last-of-type {\\n        border-left: 1px solid var(--ergo-grey);\\n      }\\n    }\\n  }\\n\\n  .tcn-tfoot {\\n    font-weight: bold;\\n    /* Border for footer row */\\n    .tcn-tr {\\n      height: var(--bar-sm);\\n      .tcn-th,\\n      .tcn-td {\\n        border-top: 1px solid var(--ergo-grey-light);\\n      }\\n    }\\n  }\\n\\n  /* Header and footer - both are light blue  */\\n  .tcn-thead,\\n  .tcn-tfoot {\\n    font-size: 14px;\\n    --material: var(--ergo-secondary-light);\\n    --on-material: var(--ergo-accent-blue);\\n    --action: var(--ergo-secondary);\\n    --on-action: var(--ergo-white);\\n\\n    background-color: var(--material);\\n    color: var(--on-material);\\n  }\\n\\n  .tcn-tr {\\n    height: var(--bar-sm);\\n    align-content: center;\\n  }\\n\\n  .tcn-td,\\n  .tcn-th {\\n    padding-inline: var(--padding-medium);\\n    vertical-align: middle;\\n    text-align: start;\\n    background: var(--material);\\n  }\\n\\n  /* First column (header, body, footer): use context for pad inline or default 8px */\\n  .tcn-table .tcn-tr > .tcn-th:first-child,\\n  .tcn-table .tcn-tr > .tcn-td:first-child {\\n    padding-inline-start: var(--table-pad-inline);\\n  }\\n\\n  /* Last column (header, body, footer): use context for pad inline or default 8px */\\n  .tcn-table .tcn-tr > .tcn-th:last-child,\\n  .tcn-table .tcn-tr > .tcn-td:last-child {\\n    padding-inline-end: var(--table-pad-inline);\\n  }\\n\\n  .tcn-tbody {\\n    font-size: 12px;\\n    .tcn-tr:nth-of-type(even) {\\n      --material: var(--ergo-accent-blue-light);\\n    }\\n    .tcn-tr:nth-of-type(odd) {\\n      --material: var(--ergo-white);\\n    }\\n    .tcn-tr:hover {\\n      --material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%);\\n    }\\n    .tcn-tr[data-is-selected=\\\"true\\\"] {\\n      --material: var(--ergo-secondary);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-accent-blue);\\n    }\\n\\n    .tcn-tr {\\n      --material: var(--bg-row);\\n      --on-material: var(--ergo-accent-blue);\\n      --action: var(--ergo-accent-blue);\\n      --on-action: var(--ergo-white);\\n      background-color: var(--material);\\n      color: var(--on-material);\\n    }\\n  }\\n\\n  /* ===== INPUTS ===== */\\n  .tcn-entry,\\n  .tcn-control {\\n    --act: var(--action);\\n    --mat: var(--material);\\n    --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n\\n    font-size: 12px;\\n    border: 1px solid var(--ergo-grey);\\n    box-sizing: border-box;\\n    min-height: var(--action-md);\\n    border-radius: var(--shape-radius-medium);\\n    padding-inline: 4px;\\n  }\\n\\n  .tcn-control[data-is-disabled=\\\"false\\\"]:hover {\\n    background: var(--act-raised);\\n  }\\n\\n  .tcn-control:focus-within {\\n    outline: 2px solid var(--ergo-primary);\\n    outline-offset: 2px;\\n  }\\n\\n  .tcn-control:focus {\\n    border: 1px solid var(--act);\\n  }\\n\\n  .tcn-control::placeholder {\\n    color: var(--ergo-grey);\\n  }\\n\\n  .tcn-control[data-is-disabled=\\\"true\\\"] {\\n    cursor: not-allowed;\\n    background: var(--material-disabled);\\n    color: var(--on-material-disabled);\\n  }\\n\\n  .tcn-control[data-is-disabled=\\\"true\\\"]::placeholder {\\n    color: var(--on-material-disabled);\\n  }\\n\\n  .tcn-control {\\n    display: flex;\\n    justify-content: center;\\n    gap: var(--gap-small);\\n  }\\n\\n  .tcn-control-row {\\n    min-height: 22px;\\n    height: auto;\\n    align-items: center;\\n    gap: var(--gap-small);\\n    padding-block: 2px;\\n  }\\n\\n  .tcn-control-row > .tcn-icon {\\n    color: var(--ergo-grey);\\n  }\\n\\n  .tcn-control .tcn-entry {\\n    border: none;\\n    background: transparent;\\n    padding: 0;\\n    min-height: unset;\\n    border-radius: 0;\\n    height: 100%;\\n    flex-grow: 1;\\n\\n    &:hover,\\n    &:active,\\n    &:focus-visible,\\n    &:focus {\\n      outline: none;\\n      border: none;\\n      background: transparent;\\n    }\\n  }\\n\\n  .tcn-input {\\n    height: auto;\\n  }\\n\\n  .tcn-textarea,\\n  .tcn-input {\\n    cursor: text;\\n  }\\n\\n  .tcn-control-set {\\n    border-radius: var(--shape-radius-medium);\\n\\n    &:focus-within {\\n      outline: 2px solid var(--ergo-primary);\\n      outline-offset: 2px;\\n    }\\n\\n    .tcn-control-set-item {\\n      z-index: 1;\\n      border-radius: 0;\\n      height: auto;\\n      min-height: var(--action-md);\\n      padding-block: 0;\\n      &:focus,\\n      &:focus-visible {\\n        z-index: 3;\\n        outline: none;\\n      }\\n    }\\n\\n    .tcn-control-set-item:first-child {\\n      border-top-left-radius: var(--shape-radius-medium);\\n      border-bottom-left-radius: var(--shape-radius-medium);\\n    }\\n\\n    .tcn-control-set-item:not(:last-child) {\\n      margin-right: -1px;\\n    }\\n\\n    .tcn-control-set-item:last-child {\\n      border-top-right-radius: var(--shape-radius-medium);\\n      border-bottom-right-radius: var(--shape-radius-medium);\\n    }\\n\\n    .tcn-select,\\n    .tcn-button,\\n    .tcn-button[data-hierarchy] {\\n      border: 1px solid var(--ergo-grey);\\n      height: auto;\\n      min-height: var(--action-md);\\n      min-width: var(--action-md);\\n      box-sizing: border-box;\\n      &:hover,\\n      &[data-hover] {\\n        transform: none;\\n      }\\n    }\\n\\n    .tcn-select:focus-visible,\\n    .tcn-button:focus-visible,\\n    .tcn-button[data-hierarchy]:focus-visible {\\n      border-color: var(--ergo-primary);\\n    }\\n  }\\n\\n  .tcn-slider[data-is-disabled=\\\"true\\\"] {\\n    &::-webkit-slider-runnable-track {\\n      background: var(--ergo-grey-light);\\n    }\\n\\n    &::-webkit-slider-thumb {\\n      background-color: var(--ergo-white);\\n      border: 1px solid var(--ergo-grey-light);\\n    }\\n  }\\n\\n  .tcn-checkbox {\\n    border-color: var(--ergo-primary);\\n\\n    &:focus-visible,\\n    &:focus {\\n      outline: 2px solid var(--ergo-primary);\\n      outline-offset: 2px;\\n    }\\n\\n    &[data-is-disabled=\\\"true\\\"] {\\n      cursor: not-allowed;\\n      border-color: var(--material-disabled);\\n    }\\n\\n    &[data-checked=\\\"true\\\"][data-is-disabled=\\\"true\\\"] {\\n      background-color: var(--ergo-grey-light);\\n    }\\n\\n    &[data-checked=\\\"false\\\"][data-is-disabled=\\\"true\\\"] {\\n      background: var(--material);\\n      border-color: var(--ergo-grey-light);\\n      color: var(--ergo-grey-light);\\n    }\\n  }\\n\\n  .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"false\\\"],\\n  .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"true\\\"] {\\n    outline: 2px solid var(--ergo-primary);\\n    outline-offset: 2px;\\n  }\\n\\n  /* Quick fix to use some of the default module styles.*/\\n  .tcn-input,\\n  .tcn-select,\\n  .tcn-slider,\\n  .tcn-textarea,\\n  .tcn-checkbox,\\n  .tcn-switch-wrapper,\\n  .tcn-date-picker,\\n  .tcn-date-picker-year-selector,\\n  .tcn-radio,\\n  .tcn-date-picker-input,\\n  .tcn-suggestion-list-search-input,\\n  .tcn-suggestion-list {\\n    --accent-color: var(--ergo-primary);\\n  }\\n}\\n\"","import css from './ergo_theme.css?raw';\nimport '@fontsource/lato';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":";AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCGFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}

package/dist/utils/dnd/hooks/use_drag_container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use_drag_container.d.ts","sourceRoot":"","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,MAAM,WAAW,uBAAuB;IACtC,eAAe,CAAC,EAAE,QAAQ,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,uBAAuB,GAAG,aAAa,CA2DpF"}
+{"version":3,"file":"use_drag_container.d.ts","sourceRoot":"","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,MAAM,WAAW,uBAAuB;IACtC,eAAe,CAAC,EAAE,QAAQ,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,uBAAuB,GAAG,aAAa,CAoDpF"}

package/dist/utils/dnd/hooks/use_drag_container.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_drag_container.js","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport type { Position } from '../../index.js';\nimport type { DragContainer } from '../types.js';\nimport { useDraggable } from './use_draggable.js';\n\nexport interface UseDragContainerOptions {\n  initialPosition?: Position;\n}\n\nexport function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {\n  const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);\n  const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });\n  /**\n   *  The value that triggers re-renders. It’s updated in dragCallback so the UI\n   *  moves while dragging, and it’s what the hook returns so the consumer can\n   *  render the element at that position\n   *  (e.g. style={{ left: position.x, top: position.y }}).\n   */\n  const [position, setPosition] = useState(positionRef.current);\n\n  const [isDragging, setIsDragging] = useState(false);\n\n  useDraggable({\n    handles: handles,\n    startDragCallback: () => {\n      setIsDragging(true);\n    },\n    dragCallback: (deltaX, deltaY) => {\n      setPosition({\n        x: positionRef.current.x + deltaX,\n        y: positionRef.current.y + deltaY,\n      });\n    },\n    endDragCallback: (deltaX, deltaY) => {\n      positionRef.current = {\n        x: positionRef.current.x + deltaX,\n        y: positionRef.current.y + deltaY,\n      };\n      setIsDragging(false);\n    },\n  });\n\n  const setPositionState = useCallback(\n    (value: Position | ((prev: Position) => Position)) => {\n      setPosition(prev => {\n        const next = typeof value === 'function' ? value(prev) : value;\n        positionRef.current = next;\n        return next;\n      });\n    },\n    []\n  );\n\n  const registerHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => [...prev, handle]);\n  }, []);\n\n  const unregisterHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => prev.filter(h => h !== handle));\n  }, []);\n\n  return {\n    registerHandle,\n    unregisterHandle,\n    position,\n    isDragging,\n    setPosition: setPositionState,\n  };\n}\n"],"names":["useMakeDragContainer","options","handles","setHandles","useState","positionRef","useRef","position","setPosition","isDragging","setIsDragging","useDraggable","deltaX","deltaY","setPositionState","useCallback","value","prev","next","registerHandle","handle","unregisterHandle","h"],"mappings":";;AASO,SAASA,EAAqBC,GAAiD;AACpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAyC,CAAA,CAAE,GACnEC,IAAcC,EAAiBL,EAAQ,mBAAmB,EAAE,GAAG,GAAG,GAAG,GAAG,GAOxE,CAACM,GAAUC,CAAW,IAAIJ,EAASC,EAAY,OAAO,GAEtD,CAACI,GAAYC,CAAa,IAAIN,EAAS,EAAK;AAElD,EAAAO,EAAa;AAAA,IACX,SAAAT;AAAA,IACA,mBAAmB,MAAM;AACvB,MAAAQ,EAAc,EAAI;AAAA,IACpB;AAAA,IACA,cAAc,CAACE,GAAQC,MAAW;AAChC,MAAAL,EAAY;AAAA,QACV,GAAGH,EAAY,QAAQ,IAAIO;AAAA,QAC3B,GAAGP,EAAY,QAAQ,IAAIQ;AAAA,MAAA,CAC5B;AAAA,IACH;AAAA,IACA,iBAAiB,CAACD,GAAQC,MAAW;AACnC,MAAAR,EAAY,UAAU;AAAA,QACpB,GAAGA,EAAY,QAAQ,IAAIO;AAAA,QAC3B,GAAGP,EAAY,QAAQ,IAAIQ;AAAA,MAAA,GAE7BH,EAAc,EAAK;AAAA,IACrB;AAAA,EAAA,CACD;AAED,QAAMI,IAAmBC;AAAA,IACvB,CAACC,MAAqD;AACpD,MAAAR,EAAY,CAAAS,MAAQ;AAClB,cAAMC,IAAO,OAAOF,KAAU,aAAaA,EAAMC,CAAI,IAAID;AACzD,eAAAX,EAAY,UAAUa,GACfA;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAA;AAAA,EAAC,GAGGC,IAAiBJ,EAAY,CAACK,MAAyC;AAC3E,IAAAjB,EAAW,CAAAc,MAAQ,CAAC,GAAGA,GAAMG,CAAM,CAAC;AAAA,EACtC,GAAG,CAAA,CAAE,GAECC,IAAmBN,EAAY,CAACK,MAAyC;AAC7E,IAAAjB,EAAW,OAAQc,EAAK,OAAO,CAAAK,MAAKA,MAAMF,CAAM,CAAC;AAAA,EACnD,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL,gBAAAD;AAAA,IACA,kBAAAE;AAAA,IACA,UAAAd;AAAA,IACA,YAAAE;AAAA,IACA,aAAaK;AAAA,EAAA;AAEjB;"}
+{"version":3,"file":"use_drag_container.js","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport type { Position } from '../../index.js';\nimport type { DragContainer } from '../types.js';\nimport { useDraggable } from './use_draggable.js';\n\nexport interface UseDragContainerOptions {\n  initialPosition?: Position;\n}\n\nexport function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {\n  const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);\n  const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });\n  const [position, setPosition] = useState(positionRef.current);\n  const [isDragging, setIsDragging] = useState(false);\n\n  useDraggable({\n    handles: handles,\n    startDragCallback: () => {\n      setIsDragging(true);\n    },\n    dragCallback: (deltaX, deltaY) => {\n      setPosition({\n        x: positionRef.current.x + deltaX,\n        y: positionRef.current.y + deltaY,\n      });\n    },\n    endDragCallback: (deltaX, deltaY) => {\n      positionRef.current = {\n        x: positionRef.current.x + deltaX,\n        y: positionRef.current.y + deltaY,\n      };\n      setIsDragging(false);\n    },\n  });\n\n  const setPositionState = useCallback(\n    (value: Position | ((prev: Position) => Position)) => {\n      setPosition(prev => {\n        const next = typeof value === 'function' ? value(prev) : value;\n        positionRef.current = next;\n        return next;\n      });\n    },\n    []\n  );\n\n  const registerHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => [...prev, handle]);\n  }, []);\n\n  const unregisterHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => prev.filter(h => h !== handle));\n  }, []);\n\n  return {\n    registerHandle,\n    unregisterHandle,\n    position,\n    isDragging,\n    setPosition: setPositionState,\n  };\n}\n"],"names":["useMakeDragContainer","options","handles","setHandles","useState","positionRef","useRef","position","setPosition","isDragging","setIsDragging","useDraggable","deltaX","deltaY","setPositionState","useCallback","value","prev","next","registerHandle","handle","unregisterHandle","h"],"mappings":";;AASO,SAASA,EAAqBC,GAAiD;AACpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAyC,CAAA,CAAE,GACnEC,IAAcC,EAAiBL,EAAQ,mBAAmB,EAAE,GAAG,GAAG,GAAG,GAAG,GACxE,CAACM,GAAUC,CAAW,IAAIJ,EAASC,EAAY,OAAO,GACtD,CAACI,GAAYC,CAAa,IAAIN,EAAS,EAAK;AAElD,EAAAO,EAAa;AAAA,IACX,SAAAT;AAAA,IACA,mBAAmB,MAAM;AACvB,MAAAQ,EAAc,EAAI;AAAA,IACpB;AAAA,IACA,cAAc,CAACE,GAAQC,MAAW;AAChC,MAAAL,EAAY;AAAA,QACV,GAAGH,EAAY,QAAQ,IAAIO;AAAA,QAC3B,GAAGP,EAAY,QAAQ,IAAIQ;AAAA,MAAA,CAC5B;AAAA,IACH;AAAA,IACA,iBAAiB,CAACD,GAAQC,MAAW;AACnC,MAAAR,EAAY,UAAU;AAAA,QACpB,GAAGA,EAAY,QAAQ,IAAIO;AAAA,QAC3B,GAAGP,EAAY,QAAQ,IAAIQ;AAAA,MAAA,GAE7BH,EAAc,EAAK;AAAA,IACrB;AAAA,EAAA,CACD;AAED,QAAMI,IAAmBC;AAAA,IACvB,CAACC,MAAqD;AACpD,MAAAR,EAAY,CAAAS,MAAQ;AAClB,cAAMC,IAAO,OAAOF,KAAU,aAAaA,EAAMC,CAAI,IAAID;AACzD,eAAAX,EAAY,UAAUa,GACfA;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAA;AAAA,EAAC,GAGGC,IAAiBJ,EAAY,CAACK,MAAyC;AAC3E,IAAAjB,EAAW,CAAAc,MAAQ,CAAC,GAAGA,GAAMG,CAAM,CAAC;AAAA,EACtC,GAAG,CAAA,CAAE,GAECC,IAAmBN,EAAY,CAACK,MAAyC;AAC7E,IAAAjB,EAAW,OAAQc,EAAK,OAAO,CAAAK,MAAKA,MAAMF,CAAM,CAAC;AAAA,EACnD,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL,gBAAAD;AAAA,IACA,kBAAAE;AAAA,IACA,UAAAd;AAAA,IACA,YAAAE;AAAA,IACA,aAAaK;AAAA,EAAA;AAEjB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.12.5",
+  "version": "0.13.0",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -144,7 +144,7 @@
     "react-color": "^2.19.3",
     "react-phone-number-input": "^3.4.16",
     "@tcn/icons": "2.3.0",
-    "@tcn/state": "1.3.0"
+    "@tcn/state": "1.3.2"
   },
   "scripts": {
     "build": "vite build",

package/src/inputs/color_input/color_input.tsx

@@ -11,7 +11,7 @@ import { Input } from '../input/input.js';
 import styles from './color_input.module.css';
 
 import { Popper } from '../../overlay/popper/legacy/popper.js';
-import { InputGroup } from '../input_group/input_group.js';
+import { ControlSet } from '../control_set/control_set.js';
 
 export interface ColorInputProps
   extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {
@@ -77,7 +77,7 @@ export function ColorInput({
 
   return (
     <>
-      <InputGroup
+      <ControlSet
         height="auto"
         width={width}
         minWidth={minWidth}
@@ -133,7 +133,7 @@ export function ColorInput({
           </HStack>
           <Spacer width="4px" />
         </Button>
-      </InputGroup>
+      </ControlSet>
       <Popper
         anchorElement={anchorElement}
         onClose={closePicker}