npm - @tcn/ui - Versions diffs - 0.10.0 → 0.11.0 - Mend

@tcn/ui 0.10.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (165) hide show

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

@@ -64,6 +64,10 @@ const n = `@layer tcn-theme {
     --bar-lg: 40px;
     --bar-xl: 48px;
+    --action-sm: 20px;
+    --action-md: 24px;
+    --action-lg: 32px;
     /* Status Colors */
     --status-color-disabled: var(--ergo-grey-light);
     --status-color-info: var(--ergo-status-blue);
@@ -188,7 +192,6 @@ const n = `@layer tcn-theme {
   * Primarily manages button dimensions and sizing ratios.
   */
   .tcn-base-button {
-    /* TODO: btn size should look for "--tcn-action-size" variable before defaulting. */
     --btn-size-base: 26px;
     --btn-pad-base: 12px;
@@ -308,21 +311,23 @@ const n = `@layer tcn-theme {
       box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
       /* Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles */
-      &::before,
-      &::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 4px;
-      }
-      &::before {
-        top: -2px;
-      }
-      &::after {
-        bottom: -2px;
+      :not(.tcn-select) {
+        &::before,
+        &::after {
+          content: "";
+          position: absolute;
+          left: 0;
+          right: 0;
+          height: 4px;
+        }
+        &::before {
+          top: -2px;
+        }
+        &::after {
+          bottom: -2px;
+        }
       }
     }
@@ -599,8 +604,8 @@ const n = `@layer tcn-theme {
     }
   }
-  .tcn-frame[data-is-veil="true"] {
-    background-color: rgba(0, 0, 0, 0.5);
+  .tcn-frame-dialog {
+    border: inherit;
   }
   .tcn-tooltip {
@@ -1026,6 +1031,166 @@ const n = `@layer tcn-theme {
       color: var(--on-material);
     }
   }
+  /* ===== INPUTS ===== */
+  .tcn-control {
+    --act: var(--action);
+    --mat: var(--material);
+    --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);
+    font-size: 12px;
+    border: 1px solid var(--ergo-grey);
+    box-sizing: border-box;
+    min-height: var(--action-md);
+    border-radius: var(--shape-radius-medium);
+    padding-inline: 4px;
+  }
+  .tcn-control[data-is-disabled="false"]:hover {
+    background: var(--act-raised);
+  }
+  .tcn-control:focus-visible {
+    outline: 2px solid var(--ergo-primary);
+    outline-offset: 2px;
+  }
+  .tcn-control:focus {
+    border: 1px solid var(--act);
+  }
+  .tcn-control::placeholder {
+    color: var(--ergo-grey);
+  }
+  .tcn-control[data-is-disabled="true"] {
+    cursor: not-allowed;
+    background: var(--material-disabled);
+    color: var(--on-material-disabled);
+  }
+  .tcn-control[data-is-disabled="true"]::placeholder {
+    color: var(--on-material-disabled);
+  }
+  .tcn-input {
+    height: auto;
+  }
+  .tcn-textarea,
+  .tcn-input {
+    cursor: text;
+  }
+  .tcn-input-group {
+    border-radius: var(--shape-radius-medium);
+    &:focus-within {
+      outline: 2px solid var(--ergo-primary);
+      outline-offset: 2px;
+    }
+    .tcn-input-group-slot {
+      z-index: 1;
+      border-radius: 0;
+      height: auto;
+      min-height: var(--action-md);
+      padding-block: 0;
+      &:focus,
+      &:focus-visible {
+        z-index: 3;
+        outline: none;
+      }
+    }
+    .tcn-input-group-slot: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) {
+      margin-right: -1px;
+    }
+    .tcn-input-group-slot:last-child {
+      border-top-right-radius: var(--shape-radius-medium);
+      border-bottom-right-radius: var(--shape-radius-medium);
+    }
+    .tcn-select,
+    .tcn-button,
+    .tcn-button[data-hierarchy] {
+      border: 1px solid var(--ergo-grey);
+      height: auto;
+      min-height: var(--action-md);
+      min-width: var(--action-md);
+      box-sizing: border-box;
+      &:hover,
+      &[data-hover] {
+        transform: none;
+      }
+    }
+    .tcn-select:focus-visible,
+    .tcn-button:focus-visible,
+    .tcn-button[data-hierarchy]:focus-visible {
+      border-color: var(--ergo-primary);
+    }
+  }
+  .tcn-slider[data-is-disabled="true"] {
+    &::-webkit-slider-runnable-track {
+      background: var(--ergo-grey-light);
+    }
+    &::-webkit-slider-thumb {
+      background-color: var(--ergo-white);
+      border: 1px solid var(--ergo-grey-light);
+    }
+  }
+  .tcn-checkbox {
+    border-color: var(--ergo-primary);
+    &:focus-visible,
+    &:focus {
+      outline: 2px solid var(--ergo-primary);
+      outline-offset: 2px;
+    }
+    &[data-is-disabled="true"] {
+      cursor: not-allowed;
+      border-color: var(--material-disabled);
+    }
+    &[data-checked="true"][data-is-disabled="true"] {
+      background-color: var(--ergo-grey-light);
+    }
+    &[data-checked="false"][data-is-disabled="true"] {
+      background: var(--material);
+      border-color: var(--ergo-grey-light);
+      color: var(--ergo-grey-light);
+    }
+  }
+  .tcn-switch-wrapper[data-focused="true"][data-is-checked="false"],
+  .tcn-switch-wrapper[data-focused="true"][data-is-checked="true"] {
+    outline: 2px solid var(--ergo-primary);
+    outline-offset: 2px;
+  }
+  /* Quick fix to use some of the default module styles.*/
+  .tcn-input,
+  .tcn-select,
+  .tcn-slider,
+  .tcn-checkbox,
+  .tcn-switch-wrapper,
+  .tcn-date-picker,
+  .tcn-date-picker-year-selector,
+  .tcn-radio {
+    --accent-color: var(--ergo-primary);
+  }
 }
 `, r = new CSSStyleSheet();
 r.replaceSync(n);

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

	@@ -1 +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-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 / 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\\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 / TODO: btn size should look for \\\"--tcn-action-size\\\" variable before defaulting. /\\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 &::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 &: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 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\\n .tcn-tabs-list {\\n gap: var(--gap-small);\\n padding: var(--padding-small);\\n .tcn-tab-item {\\n border-radius: var(--shape-radius-medium);\\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[data-is-veil=\\\"true\\\"] {\\n background-color: rgba(0, 0, 0, 0.5);\\n }\\n\\n .tcn-tooltip {\\n background: rgba(57, 85, 120, 0.85);\\n box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n color: rgba(255, 255, 255, 1);\\n border-radius: var(--shape-radius-medium);\\n padding: var(--padding-medium);\\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-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\\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 --divide-header: 0;\\n\\n :where(.tcn-scaffold) {\\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: 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\\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 / PANEL /\\n .tcn-panel {\\n background-color: var(--background-color-primary);\\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: 12px;\\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: 0;\\n height: 0;\\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\"","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,GCGFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}
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-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\\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 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\\n .tcn-tabs-list {\\n gap: var(--gap-small);\\n padding: var(--padding-small);\\n .tcn-tab-item {\\n border-radius: var(--shape-radius-medium);\\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-tooltip {\\n background: rgba(57, 85, 120, 0.85);\\n box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n color: rgba(255, 255, 255, 1);\\n border-radius: var(--shape-radius-medium);\\n padding: var(--padding-medium);\\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-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\\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 --divide-header: 0;\\n\\n :where(.tcn-scaffold) {\\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: 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\\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 / PANEL /\\n .tcn-panel {\\n background-color: var(--background-color-primary);\\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: 12px;\\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: 0;\\n height: 0;\\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 --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,GCGFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}

package/dist/typography/body_text/body_text.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"body_text.d.ts","sourceRoot":"","sources":["../../../src/typography/body_text/body_text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAItE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;AAE3E,eAAO,MAAM,QAAQ,~~mGAyDnB~~,CAAC"}
1	+ {"version":3,"file":"body_text.d.ts","sourceRoot":"","sources":["../../../src/typography/body_text/body_text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAItE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;AAE3E,eAAO,MAAM,QAAQ,mGA2DnB,CAAC"}

package/dist/typography/body_text/body_text.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { jsx as g } from "react/jsx-runtime";
-import l from "react";
-import { clsx as u } from "clsx";
-import '../../body_text.css';const _ = "_body-text_ee60621", h = { "body-text": _ }, R = l.forwardRef(function({
+import { jsx as l } from "react/jsx-runtime";
+import u from "react";
+import { clsx as _ } from "clsx";
+import '../../body_text.css';const h = "_body-text_ee60621", y = { "body-text": h }, T = u.forwardRef(function({
   size: n = "md",
   emphasis: f = "normal",
   hierarchy: m = "primary",
@@ -15,24 +15,26 @@ import '../../body_text.css';const _ = "_body-text_ee60621", h = { "body-text":
   padTop: o,
   pad: r,
   selectable: s = !0,
-  breakWords: b = !1
-}, p) {
-  return r && (t.padding = r), i && (t.paddingInlineStart = i), d && (t.paddingInlineEnd = d), o && (t.paddingTop = o), e && (t.paddingBottom = e), a && (t.color = a), /* @__PURE__ */ g(
+  breakWords: b = !1,
+  ...p
+}, g) {
+  return r && (t.padding = r), i && (t.paddingInlineStart = i), d && (t.paddingInlineEnd = d), o && (t.paddingTop = o), e && (t.paddingBottom = e), a && (t.color = a), /* @__PURE__ */ l(
     "div",
     {
-      ref: p,
+      ref: g,
       "data-hierarchy": m,
       "data-emphasis": f,
       "data-selectable": s,
-      className: u(h["body-text"], x, "tcn-body-text"),
+      className: _(y["body-text"], x, "tcn-body-text"),
       style: t,
       "data-size": n,
       "data-word-break": b,
+      ...p,
       children: c
     }
   );
 });
 export {
-  R as BodyText
+  T as BodyText
 };
 //# sourceMappingURL=body_text.js.map

package/dist/typography/body_text/body_text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"body_text.js","sources":["../../../src/typography/body_text/body_text.tsx"],"sourcesContent":["import React from 'react';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport styles from './body_text.module.css';\n\nexport interface BodyTextOwnProps {\n size?: Size;\n emphasis?: Emphasis;\n hierarchy?: Hierarchy;\n color?: string;\n pad?: string;\n padStart?: string;\n padEnd?: string;\n padTop?: string;\n padBottom?: string;\n selectable?: boolean;\n breakWords?: boolean;\n}\n\nexport type BodyTextProps = WithDetailedHTMLProps<BodyTextOwnProps, 'div'>;\n\nexport const BodyText = React.forwardRef<HTMLDivElement, BodyTextProps>(function (\n {\n size = 'md',\n emphasis = 'normal',\n hierarchy = 'primary',\n color,\n children,\n className,\n style = {},\n padStart,\n padEnd,\n padBottom,\n padTop,\n pad,\n selectable = true,\n breakWords = false,\n }: BodyTextProps,\n ref\n) {\n if (pad) {\n style.padding = pad;\n }\n\n if (padStart) {\n style.paddingInlineStart = padStart;\n }\n\n if (padEnd) {\n style.paddingInlineEnd = padEnd;\n }\n\n if (padTop) {\n style.paddingTop = padTop;\n }\n\n if (padBottom) {\n style.paddingBottom = padBottom;\n }\n\n if (color) {\n style.color = color;\n }\n\n return (\n <div\n ref={ref}\n data-hierarchy={hierarchy}\n data-emphasis={emphasis}\n data-selectable={selectable}\n className={clsx(styles['body-text'], className, 'tcn-body-text')}\n style={style}\n data-size={size}\n data-word-break={breakWords}\n >\n {children}\n </div>\n );\n});\n"],"names":["BodyText","React","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","breakWords","ref","jsx","clsx","styles"],"mappings":";;;wDAsBaA,IAAWC,EAAM,WAA0C,SACtE;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;~~AACf~~,GACAC,GACA;AACA,~~SAAIH~~,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,~~gBAAAY~~;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,~~kBAAgBZ~~;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,~~WAAWI~~,EAAKC,EAAO,WAAW,~~GAAGZ~~,GAAW,eAAe;AAAA,MAC/D,OAAAC;AAAA,MACA,aAAWN;AAAA,MACX,mBAAiBa;AAAA,~~MAEhB~~,~~UAAAT~~;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
1	+ {"version":3,"file":"body_text.js","sources":["../../../src/typography/body_text/body_text.tsx"],"sourcesContent":["import React from 'react';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport styles from './body_text.module.css';\n\nexport interface BodyTextOwnProps {\n size?: Size;\n emphasis?: Emphasis;\n hierarchy?: Hierarchy;\n color?: string;\n pad?: string;\n padStart?: string;\n padEnd?: string;\n padTop?: string;\n padBottom?: string;\n selectable?: boolean;\n breakWords?: boolean;\n}\n\nexport type BodyTextProps = WithDetailedHTMLProps<BodyTextOwnProps, 'div'>;\n\nexport const BodyText = React.forwardRef<HTMLDivElement, BodyTextProps>(function (\n {\n size = 'md',\n emphasis = 'normal',\n hierarchy = 'primary',\n color,\n children,\n className,\n style = {},\n padStart,\n padEnd,\n padBottom,\n padTop,\n pad,\n selectable = true,\n breakWords = false,\n ...props\n }: BodyTextProps,\n ref\n) {\n if (pad) {\n style.padding = pad;\n }\n\n if (padStart) {\n style.paddingInlineStart = padStart;\n }\n\n if (padEnd) {\n style.paddingInlineEnd = padEnd;\n }\n\n if (padTop) {\n style.paddingTop = padTop;\n }\n\n if (padBottom) {\n style.paddingBottom = padBottom;\n }\n\n if (color) {\n style.color = color;\n }\n\n return (\n <div\n ref={ref}\n data-hierarchy={hierarchy}\n data-emphasis={emphasis}\n data-selectable={selectable}\n className={clsx(styles['body-text'], className, 'tcn-body-text')}\n style={style}\n data-size={size}\n data-word-break={breakWords}\n {...props}\n >\n {children}\n </div>\n );\n});\n"],"names":["BodyText","React","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","breakWords","props","ref","jsx","clsx","styles"],"mappings":";;;wDAsBaA,IAAWC,EAAM,WAA0C,SACtE;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,GAAGC;AACL,GACAC,GACA;AACA,SAAIJ,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,kBAAgBb;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWK,EAAKC,EAAO,WAAW,GAAGb,GAAW,eAAe;AAAA,MAC/D,OAAAC;AAAA,MACA,aAAWN;AAAA,MACX,mBAAiBa;AAAA,MAChB,GAAGC;AAAA,MAEH,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use_drag_container.d.ts","sourceRoot":"","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"names":[],"mappings":"~~AAEA~~,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;~~AAEjD~~,MAAM,WAAW,uBAAuB;IACtC,eAAe,CAAC,EAAE,QAAQ,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,uBAAuB,GAAG,aAAa,~~CAiDpF~~"}
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"}

package/dist/utils/dnd/hooks/use_drag_container.js CHANGED Viewed

@@ -1,44 +1,47 @@
-import { useState as s, useRef as b, useCallback as o } from "react";
-import { useDraggable as k } from "./use_draggable.js";
-function m(g) {
-  const [u, a] = s([]), n = b(g.initialPosition ?? { x: 0, y: 0 }), [i, c] = s(n.current), [f, l] = s(!1);
-  k({
-    handles: u,
+import { useState as s, useRef as y, useCallback as o } from "react";
+import { useDraggable as D } from "./use_draggable.js";
+function C(u) {
+  const [l, a] = s([]), n = y(u.initialPosition ?? { x: 0, y: 0 }), [g, i] = s(n.current), [f, c] = s(!1);
+  D({
+    handles: l,
     startDragCallback: () => {
-      l(!0);
+      c(!0);
     },
     dragCallback: (t, e) => {
-      c({
+      i({
         x: n.current.x + t,
         y: n.current.y + e
       });
     },
-    endDragCallback: () => {
-      l(!1), n.current = i;
+    endDragCallback: (t, e) => {
+      n.current = {
+        x: n.current.x + t,
+        y: n.current.y + e
+      }, c(!1);
     }
   });
-  const d = o(
+  const x = o(
     (t) => {
-      c((e) => {
+      i((e) => {
         const r = typeof t == "function" ? t(e) : t;
         return n.current = r, r;
       });
     },
     []
-  ), p = o((t) => {
+  ), d = o((t) => {
     a((e) => [...e, t]);
-  }, []), D = o((t) => {
+  }, []), p = o((t) => {
     a((e) => e.filter((r) => r !== t));
   }, []);
   return {
-    registerHandle: p,
-    unregisterHandle: D,
-    position: i,
+    registerHandle: d,
+    unregisterHandle: p,
+    position: g,
     isDragging: f,
-    setPosition: d
+    setPosition: x
   };
 }
 export {
-  m as useMakeDragContainer
+  C as useMakeDragContainer
 };
 //# sourceMappingURL=use_drag_container.js.map

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

	@@ -1 +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 { ~~useDraggable~~ } from '~~./use_draggable~~.js';\nimport type { ~~Position~~ } from '~~../../index~~.js';\nimport ~~type~~ { ~~DragContainer~~ } from '~~../types~~.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: () => {\n ~~setIsDragging(false);\n~~ positionRef.current = ~~position~~;\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,~~MAAM~~;~~AACrB~~,~~MAAAH~~,~~EAAc~~,~~EAAK~~,~~GACnBL~~,EAAY,~~UAAUE~~;AAAA,~~IACxB~~;AAAA,EAAA,CACD;AAED,~~QAAMO~~,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;"}
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;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -140,8 +140,10 @@
   "dependencies": {
     "@fontsource/lato": "^5.2.7",
     "clsx": "^2.1.1",
+    "libphonenumber-js": "^1.12.38",
     "react-color": "^2.19.3",
-    "@tcn/icons": "2.2.1",
+    "react-phone-number-input": "^3.4.16",
+    "@tcn/icons": "2.3.0",
     "@tcn/state": "1.2.0"
   },
   "scripts": {

package/src/form/field/h_field/h_field.tsx CHANGED Viewed

@@ -33,8 +33,6 @@ export const HField = React.forwardRef(function HField(
   ref: React.Ref<HTMLDivElement>
 ) {
   const [finalId] = useState(() => id || `h-field-${idIndex++}`);
-  const labelId = `${finalId}-label`;
-  const descriptionId = `${finalId}-description`;
   const hasError = errorMessage ? true : false;
   const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';
@@ -42,8 +40,6 @@ export const HField = React.forwardRef(function HField(
     <HStack
       ref={ref}
       as="div"
-      aria-labelledby={labelId}
-      aria-describedby={descriptionId}
       data-locked={locked}
       data-error={hasError}
       data-loading={loading}

package/src/form/field/v_field/v_field.stories.tsx CHANGED Viewed

@@ -94,6 +94,14 @@ export function Baseline() {
       >
         <Input defaultValue="Disabled value" />
       </VField>
+      <Divider horizontal />
+      <VField
+        label="Aria enabled"
+        description="This field demonstrates the use of aria-labelledby and aria-describedby."
+        id="field-8"
+      >
+        <Input aria-labelledby="field-8-label" aria-describedby="field-8-description" />
+      </VField>
     </FieldSet>
   );
 }