@tcn/ui 0.3.2 → 0.3.3

package/dist/themes/theme.js

@@ -1,19 +1,29 @@
-import { useLayoutEffect as c } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { useLayoutEffect as r } from "react";
+import { Box as n } from "../stacks/box/box.js";
+import "../stacks/h_collapsible_box.js";
+import "../stacks/h_stack.js";
+import "../stacks/spacer.js";
+import "../stacks/v_collapsible_box.js";
+import "../stacks/v_stack.js";
+import "../stacks/z_stack.js";
+import { clsx as i } from "clsx";
 import './stylesheets/reset.css';/* empty css                      */
-const r = `@layer tcn-reset, tcn-system, tcn-theme;
+import { s } from "../theme_provider.module-ChZQ5Xsk.js";
+const p = `@layer tcn-reset, tcn-system, tcn-theme;
 `;
-function s({ styleSheets: t, children: n }) {
-  return c(() => {
-    document.adoptedStyleSheets = t;
-  }, [t]), c(() => {
+function I({ styleSheets: e, children: o, ...m }) {
+  return r(() => {
+    document.adoptedStyleSheets = e;
+  }, [e]), r(() => {
     if (document.getElementById("critical-css")) return;
-    const e = document.createElement("style");
-    return e.id = "critical-css", e.textContent = r, document.head.prepend(e), () => {
+    const t = document.createElement("style");
+    return t.id = "critical-css", t.textContent = p, document.head.prepend(t), () => {
       document.getElementById("critical-css")?.remove();
     };
-  }, []), n;
+  }, []), /* @__PURE__ */ c(n, { className: i("tcn-theme-root", s["tcn-theme-provider"]), ...m, children: o });
 }
 export {
-  s as Theme
+  I as Theme
 };
 //# sourceMappingURL=theme.js.map

package/dist/themes/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../src/css/layers.css?raw","../../src/themes/theme.tsx"],"sourcesContent":["export default \"@layer tcn-reset, tcn-system, tcn-theme;\\n\"","import React, { useLayoutEffect } from 'react';\nimport layers from '../css/layers.css?raw';\nimport './stylesheets/reset.css';\n\nexport interface ThemeProps {\n  styleSheets: CSSStyleSheet[];\n  children: React.ReactNode;\n}\n\nexport function Theme({ styleSheets, children }: ThemeProps) {\n  useLayoutEffect(() => {\n    document.adoptedStyleSheets = styleSheets;\n  }, [styleSheets]);\n\n  // I used this approach instead to guarantee the order of the stylesheets\n  useLayoutEffect(() => {\n    if (document.getElementById('critical-css')) return;\n\n    const style = document.createElement('style');\n    style.id = 'critical-css';\n    style.textContent = layers;\n\n    document.head.prepend(style);\n\n    return () => {\n      document.getElementById('critical-css')?.remove();\n    };\n  }, []);\n\n  return children;\n}\n"],"names":["layers","Theme","styleSheets","children","useLayoutEffect","style"],"mappings":";;AAAA,MAAAA,IAAe;AAAA;ACSR,SAASC,EAAM,EAAE,aAAAC,GAAa,UAAAC,KAAwB;AAC3D,SAAAC,EAAgB,MAAM;AACpB,aAAS,qBAAqBF;AAAA,EAChC,GAAG,CAACA,CAAW,CAAC,GAGhBE,EAAgB,MAAM;AACpB,QAAI,SAAS,eAAe,cAAc,EAAG;AAE7C,UAAMC,IAAQ,SAAS,cAAc,OAAO;AAC5C,WAAAA,EAAM,KAAK,gBACXA,EAAM,cAAcL,GAEpB,SAAS,KAAK,QAAQK,CAAK,GAEpB,MAAM;AACX,eAAS,eAAe,cAAc,GAAG,OAAA;AAAA,IAC3C;AAAA,EACF,GAAG,CAAA,CAAE,GAEEF;AACT;"}
+{"version":3,"file":"theme.js","sources":["../../src/css/layers.css?raw","../../src/themes/theme.tsx"],"sourcesContent":["export default \"@layer tcn-reset, tcn-system, tcn-theme;\\n\"","import React, { useLayoutEffect } from 'react';\nimport { Box, type BoxProps } from '../stacks/index.js';\nimport { clsx } from 'clsx';\n\n// Styles\nimport './stylesheets/reset.css';\nimport styles from './theme_provider.module.css';\nimport layers from '../css/layers.css?raw';\n\nexport interface ThemeProps extends BoxProps {\n  styleSheets: CSSStyleSheet[];\n  children: React.ReactNode;\n}\n\nexport function Theme({ styleSheets, children, ...boxProps }: ThemeProps) {\n  useLayoutEffect(() => {\n    document.adoptedStyleSheets = styleSheets;\n  }, [styleSheets]);\n\n  // I used this approach instead to guarantee the order of the stylesheets\n  useLayoutEffect(() => {\n    if (document.getElementById('critical-css')) return;\n\n    const style = document.createElement('style');\n    style.id = 'critical-css';\n    style.textContent = layers;\n\n    document.head.prepend(style);\n\n    return () => {\n      document.getElementById('critical-css')?.remove();\n    };\n  }, []);\n\n  return (\n    <Box className={clsx('tcn-theme-root', styles['tcn-theme-provider'])} {...boxProps}>\n      {children}\n    </Box>\n  );\n}\n"],"names":["layers","Theme","styleSheets","children","boxProps","useLayoutEffect","style","jsx","Box","clsx","styles"],"mappings":";;;;;;;;;;;;AAAA,MAAAA,IAAe;AAAA;ACcR,SAASC,EAAM,EAAE,aAAAC,GAAa,UAAAC,GAAU,GAAGC,KAAwB;AACxE,SAAAC,EAAgB,MAAM;AACpB,aAAS,qBAAqBH;AAAA,EAChC,GAAG,CAACA,CAAW,CAAC,GAGhBG,EAAgB,MAAM;AACpB,QAAI,SAAS,eAAe,cAAc,EAAG;AAE7C,UAAMC,IAAQ,SAAS,cAAc,OAAO;AAC5C,WAAAA,EAAM,KAAK,gBACXA,EAAM,cAAcN,GAEpB,SAAS,KAAK,QAAQM,CAAK,GAEpB,MAAM;AACX,eAAS,eAAe,cAAc,GAAG,OAAA;AAAA,IAC3C;AAAA,EACF,GAAG,CAAA,CAAE,GAGH,gBAAAC,EAACC,GAAA,EAAI,WAAWC,EAAK,kBAAkBC,EAAO,oBAAoB,CAAC,GAAI,GAAGN,GACvE,UAAAD,EAAA,CACH;AAEJ;"}

package/dist/themes/themes/ergo/ergo_theme.css

@@ -1 +1 @@
-@layer tcn-reset{*{position:relative;box-sizing:border-box}}@layer tcn-theme{:root{--scalar: 1;--accent-color: #cd6b2c;--font-color: #395578;--font-family: "Lato", sans-serif;--font-size: 12px;--gap-small: 4px;--gap-medium: 8px;--gap-large: 16px;--padding-small: 4px;--padding-medium: 8px;--padding-large: 16px;--status-color-disabled: #7f7f7f;--status-color-info: #008cff;--status-color-warning: #ffff00;--status-color-positive: #00ff00;--status-color-error: #ff0000;--async-color-initial: #c0c0c0;--async-color-pending: #008cff;--async-color-success: #00ff00;--async-color-failed: #ff0000;--shape-radius-small: 2px;--shape-radius-medium: 4px;--shape-radius-large: 8px;--primary-color-faint: #c0c0c0;--primary-color: #008cff;--primary-color-strong: #008cff;--secondary-color-faint: #c0c0c0;--secondary-color: #008cff;--secondary-color-strong: #008cff;--tertiary-color-faint: #c0c0c0;--tertiary-color: #008cff;--tertiary-color-strong: #008cff;--quaternary-color-faint: #c0c0c0;--quaternary-color: #008cff;--quaternary-color-strong: #008cff;--background-color-primary: #ffffff;--background-color-secondary: #ffffff;--background-color-tertiary: #ffffff;--background-color-quaternary: #ffffff;--foreground-color-primary: #aaa;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--material-disabled: #d3d3d3;--material-secondary-dark: 197 29.1% 40.4%;--material-tan: 33, 22%, 84%;--action: 23, 65%, 49%;--on-action: 0, 0%, 100%;--material: 0, 0%, 100%;--on-material: 213, 35.6%, 34.7%;--action-dangerous: 0, 90%, 50%;--action-cautious: 53, 90%, 60%;--on-action-cautious: 213, 35.6%, 34.7%;--action-neutral: var(--action);--action-suggested: 202, 90%, 40%;--action-encouraged: 120, 90%, 40%}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--act: hsl(var(--tcn-interactive-color, var(--action)));--on-act: hsl(var(--on-action));--act-down: color-mix(in srgb, var(--act), black 8%);--act-raised: color-mix(in srgb, var(--act), white 8%);--act-faint: hsla(var(--action), .2);--on-mat: hsl(var(--on-material));--on-mat-faint: hsla(var(--on-material), .2);--mat: hsl(var(--material));--mat-down: color-mix(in srgb, var(--mat), black 8%);--mat-raised: color-mix(in srgb, var(--mat), white 8%)}.tcn-interactive[data-is-disabled=true]{pointer-events:none;cursor:not-allowed}.tcn-interactive[data-hierarchy=primary]{background:var(--act);color:var(--on-act);border:1px solid var(--act)}.tcn-interactive[data-hierarchy=primary]:focus-visible{outline:2px dashed var(--act)}.tcn-interactive[data-hierarchy=primary][data-is-disabled=true]{background:var(--material-disabled);color:#fff;border:1px solid var(--material-disabled)}.tcn-interactive[data-hierarchy=primary]:hover{background:var(--act-raised)}.tcn-interactive[data-hierarchy=primary]:active{background:var(--act-down)}.tcn-interactive[data-hierarchy=secondary]{background:transparent;color:var(--on-mat);border:1px solid var(--on-mat)}.tcn-interactive[data-hierarchy=secondary]:focus-visible{outline:2px dashed var(--on-mat)}.tcn-interactive[data-hierarchy=secondary][data-is-disabled=true]{color:var(--material-disabled);border:1px solid var(--material-disabled)}.tcn-interactive[data-hierarchy=secondary]:hover{background:var(--on-mat-faint)}.tcn-interactive[data-hierarchy=secondary]:active{background:var(--mat-down)}.tcn-interactive[data-hierarchy=tertiary]{background:transparent;color:var(--on-mat);border:1px solid transparent}.tcn-interactive[data-hierarchy=tertiary]:focus-visible{outline:2px dashed var(--on-mat)}.tcn-interactive[data-hierarchy=tertiary][data-is-disabled=true]{color:var(--material-disabled)}.tcn-interactive[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--on-mat);text-decoration-thickness:1px;text-underline-offset:4px;color:var(--on-mat);background:var(--on-mat-faint)}.tcn-interactive[data-hierarchy=tertiary]:active{background:var(--mat-down)}.tcn-base-button{--action: var(var(--button-color), var(--action))}.tcn-base-button[data-severity=dangerous]{--action: var(--action-dangerous);--on-material: var(--action-dangerous)}.tcn-base-button[data-severity=cautious]{--action: var(--action-cautious);--on-action: var(--on-action-cautious);--on-material: var(--action-cautious)}.tcn-base-button[data-severity=suggested]{--action: var(--action-suggested);--on-material: var(--action-suggested)}.tcn-base-button[data-severity=encouraged]{--action: var(--action-encouraged);--on-material: var(--action-encouraged)}.tcn-button{border-radius:4px}.tcn-button[data-size=sm]{padding:0 8px;min-height:22px}.tcn-button[data-size=md]{padding:0 12px;min-height:26px}.tcn-button[data-size=lg]{padding:0 16px;min-height:32px}.tcn-button:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.tcn-button:active{transform:translateY(1px);box-shadow:inset 0 2px 4px #0000001a}.tcn-slim-button{height:auto;width:auto;padding:0}.tcn-slim-button[data-size=sm]{min-height:12px;min-width:12px;padding:0}.tcn-slim-button[data-size=sm] .tcn-icon{min-height:10px;min-width:10px}.tcn-slim-button[data-size=md]{min-height:18px;min-width:18px;padding:0}.tcn-slim-button[data-size=md] .tcn-icon{min-height:14px;min-width:14px}.tcn-slim-button[data-size=lg]{min-height:24px;min-width:24px;padding:0}.tcn-slim-button[data-size=lg] .tcn-icon{min-height:20px;min-width:20px}.tcn-button[data-size].tcn-select{padding-inline-end:26px}.tcn-button-group .tcn-button-group-button:hover,.tcn-button-group .tcn-button-group-button:active{transform:none}.tcn-button-group .tcn-button-group-button{border-radius:0}.tcn-button-group .tcn-button-group-button:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]{border:0}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:last-child){border-right:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:first-child){border-left:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:last-child){border-right:1px solid var(--act-down)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:first-child){border-left:1px solid var(--act-down)}.tcn-select-group{--action: var(--action-neutral)}.tcn-select-group .tcn-select-group-option:hover,.tcn-select-group .tcn-select-group-option:active{transform:none}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]{color:var(--act);border-color:var(--act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:hover{background:var(--act-faint)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:active{background:var(--act-down);color:var(--on-act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary][data-is-disabled=true]{color:var(--material-disabled);border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option[data-hierarchy=primary][data-is-disabled=true]{background:var(--material-disabled);color:#fff;border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option{border-radius:0}.tcn-select-group .tcn-select-group-option:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-select-group .tcn-select-group-option:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.material{background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-draggable[data-is-draggable=true] .tcn-drag-handle{cursor:move}.tcn-frame[data-is-veil=true]{background-color:#00000080}.tcn-tooltip{background:#395578d9;box-shadow:0 4px 7px #414141a8;color:#fff;border-radius:var(--shape-radius-medium);padding:var(--padding-medium)}.tcn-list{gap:var(--gap-medium)}.tcn-list .tcn-item{height:24px;padding:0px var(--padding-medium);border-radius:var(--shape-radius-medium)}.tcn-scaffold{--scaffold-v-inset: var(--v-inset, var(--padding-large));--scaffold-header-size: var(--header-size, 40px);--scaffold-footer-size: var(--footer-size, 40px);--scaffold-utility-bar-size: var(--utility-bar-size, 32px);--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1)}.tcn-scaffold :where(.tcn-header){min-height:var(--scaffold-header-size);padding:0 var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-header)+:where(.tcn-body),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-body){border-top:calc(var(--scaffold-divide-header) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body)+:where(.tcn-footer){border-top:calc(var(--scaffold-divide-footer) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-utility-bar){min-height:var(--scaffold-utility-bar-size);padding:0 var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-body){padding:0 var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-footer){gap:var(--gap-medium);min-height:var(--scaffold-footer-size);padding:0 var(--scaffold-v-inset)}.tcn-frame-veil[data-is-veil=true]{background-color:#00000080}.tcn-modal{--divide-header: 0}.tcn-modal :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:1px solid var(--foreground-color-primary)}.tcn-modal :where(.tcn-typography){color:inherit}.tcn-modal :where(.tcn-header){--material: var(--material-secondary-dark);--on-material: 0, 0%, 100%;--action: var(--material-tan);--on-action: 0, 0%, 100%;background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-modal :where(.tcn-utility-bar){--material: var(--material-secondary-dark);--on-material: 0, 0%, 100%;--action: var(--material-tan);--on-action: 0, 0%, 100%;background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-window{--divide-header: 0}.tcn-window :where(.tcn-scaffold){box-shadow:0 4px 34px #00000096;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:2px solid white}.tcn-window :where(.tcn-typography){color:inherit}.tcn-window :where(.tcn-header){--material: var(--material-secondary-dark);--on-material: 0, 0%, 100%;--action: var(--material-tan);--on-action: 0, 0%, 100%;background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-window :where(.tcn-utility-bar){--material: var(--material-secondary-dark);--on-material: 0, 0%, 100%;--action: var(--material-tan);--on-action: 0, 0%, 100%;background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-pop-confirm{--divide-header: 0;--v-inset: var(--padding-medium)}.tcn-pop-confirm :where(.tcn-scaffold){box-shadow:0 4px 8px #0006;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden}.tcn-pop-confirm :where(.tcn-typography){color:inherit}.tcn-pop-confirm :where(.tcn-header){min-height:32px;--material: var(--material-secondary-dark);--on-material: 0, 0%, 100%;--action: var(--material-tan);--on-action: 0, 0%, 100%;background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-pop-confirm :where(.tcn-utility-bar){--material: var(--material-secondary-dark);--on-material: 0, 0%, 100%;--action: var(--material-tan);--on-action: 0, 0%, 100%;background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-panel{background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);overflow:hidden}.tcn-card{--header-size: 32px;--footer-size: 32px;--utility-bar-size: 24px;--divide-header: 0;background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);border:1px solid var(--foreground-color-primary);overflow:hidden}.tcn-card :where(.tcn-header){background-color:#ecf4fb}.tcn-card :where(.tcn-utility-bar){background-color:#ecf4fb}}
+@layer tcn-reset{*{position:relative;box-sizing:border-box}}@layer tcn-theme{:root{--scalar: 1;--accent-color: #cd6b2c;--font-color: #395578;--font-family: "Lato", sans-serif;--font-size: 12px;--gap-small: 4px;--gap-medium: 8px;--gap-large: 16px;--padding-small: 4px;--padding-medium: 8px;--padding-large: 16px;--status-color-disabled: #7f7f7f;--status-color-info: #008cff;--status-color-warning: #ffff00;--status-color-positive: #00ff00;--status-color-error: #ff0000;--async-color-initial: #c0c0c0;--async-color-pending: #008cff;--async-color-success: #00ff00;--async-color-failed: #ff0000;--shape-radius-small: 2px;--shape-radius-medium: 4px;--shape-radius-large: 8px;--primary-color-faint: #c0c0c0;--primary-color: #008cff;--primary-color-strong: #008cff;--secondary-color-faint: #c0c0c0;--secondary-color: #008cff;--secondary-color-strong: #008cff;--tertiary-color-faint: #c0c0c0;--tertiary-color: #008cff;--tertiary-color-strong: #008cff;--quaternary-color-faint: #c0c0c0;--quaternary-color: #008cff;--quaternary-color-strong: #008cff;--background-color-primary: #ffffff;--background-color-secondary: #ffffff;--background-color-tertiary: #ffffff;--background-color-quaternary: #ffffff;--foreground-color-primary: #aaa;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--material-disabled: #d3d3d3;--material-line: #aaaaaa;--material-secondary-dark: 197 29.1% 40.4%;--material-tan: 33, 22%, 84%;--action: 23, 65%, 49%;--on-action: 0, 0%, 100%;--material: 0, 0%, 100%;--on-material: 213, 35.6%, 34.7%;--action-dangerous: 0, 90%, 50%;--action-cautious: 53, 90%, 60%;--on-action-cautious: 213, 35.6%, 34.7%;--action-neutral: var(--action);--action-suggested: 202, 90%, 40%;--action-encouraged: 120, 90%, 40%}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);background-color:var(--background-color-primary)}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--act: hsl(var(--tcn-interactive-color, var(--action)));--on-act: hsl(var(--on-action));--act-down: color-mix(in srgb, var(--act), black 8%);--act-raised: color-mix(in srgb, var(--act), white 8%);--act-faint: hsla(var(--action), .2);--on-mat: hsl(var(--on-material));--on-mat-faint: hsla(var(--on-material), .2);--on-mat-down: color-mix(in srgb, var(--on-mat), black 8%);--mat: hsl(var(--material));--mat-down: color-mix(in srgb, var(--mat), black 8%);--mat-raised: color-mix(in srgb, var(--mat), white 8%)}.tcn-interactive[data-is-disabled=true]{pointer-events:none;cursor:not-allowed}.tcn-interactive[data-hierarchy=primary]{background:var(--act);color:var(--on-act);border:1px solid var(--act)}.tcn-interactive[data-hierarchy=primary]:focus-visible{outline:2px dashed var(--act)}.tcn-interactive[data-hierarchy=primary][data-is-disabled=true]{background:var(--material-disabled);color:#fff;border:1px solid var(--material-disabled)}.tcn-interactive[data-hierarchy=primary]:hover{background:var(--act-raised)}.tcn-interactive[data-hierarchy=primary]:active{background:var(--act-down)}.tcn-interactive[data-hierarchy=secondary]{background:transparent;color:var(--on-mat);border:1px solid var(--on-mat)}.tcn-interactive[data-hierarchy=secondary]:focus-visible{outline:2px dashed var(--on-mat)}.tcn-interactive[data-hierarchy=secondary][data-is-disabled=true]{color:var(--material-disabled);border:1px solid var(--material-disabled)}.tcn-interactive[data-hierarchy=secondary]:hover{background:var(--on-mat-faint)}.tcn-interactive[data-hierarchy=secondary]:active{background:var(--mat-down)}.tcn-interactive[data-hierarchy=tertiary]{background:transparent;color:var(--on-mat);border:1px solid transparent}.tcn-interactive[data-hierarchy=tertiary]:focus-visible{outline:2px dashed var(--on-mat)}.tcn-interactive[data-hierarchy=tertiary][data-is-disabled=true]{color:var(--material-disabled)}.tcn-interactive[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--on-mat);text-decoration-thickness:1px;text-underline-offset:4px;color:var(--on-mat);background:var(--on-mat-faint)}.tcn-interactive[data-hierarchy=tertiary]:active{background:var(--mat-down)}.tcn-base-button{--action: var(var(--button-color), var(--action))}.tcn-base-button[data-severity=dangerous]{--action: var(--action-dangerous);--on-material: var(--action-dangerous)}.tcn-base-button[data-severity=cautious]{--action: var(--action-cautious);--on-action: var(--on-action-cautious);--on-material: var(--action-cautious)}.tcn-base-button[data-severity=suggested]{--action: var(--action-suggested);--on-material: var(--action-suggested)}.tcn-base-button[data-severity=encouraged]{--action: var(--action-encouraged);--on-material: var(--action-encouraged)}.tcn-button{border-radius:4px}.tcn-button[data-size=sm]{padding:0 8px;min-height:22px}.tcn-button[data-size=md]{padding:0 12px;min-height:26px}.tcn-button[data-size=lg]{padding:0 16px;min-height:32px}.tcn-button:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.tcn-button:active{transform:translateY(1px);box-shadow:inset 0 2px 4px #0000001a}.tcn-slim-button{height:auto;width:auto;padding:0}.tcn-slim-button[data-size=sm]{min-height:12px;min-width:12px;padding:0}.tcn-slim-button[data-size=sm] .tcn-icon{min-height:10px;min-width:10px}.tcn-slim-button[data-size=md]{min-height:18px;min-width:18px;padding:0}.tcn-slim-button[data-size=md] .tcn-icon{min-height:14px;min-width:14px}.tcn-slim-button[data-size=lg]{min-height:24px;min-width:24px;padding:0}.tcn-slim-button[data-size=lg] .tcn-icon{min-height:20px;min-width:20px}.tcn-button[data-size].tcn-select{padding-inline-end:26px}.tcn-button-group .tcn-button-group-button:hover,.tcn-button-group .tcn-button-group-button:active{transform:none}.tcn-button-group .tcn-button-group-button{border-radius:0}.tcn-button-group .tcn-button-group-button:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]{border:0}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:last-child){border-right:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:first-child){border-left:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:last-child){border-right:1px solid var(--act-down)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:first-child){border-left:1px solid var(--act-down)}.tcn-select-group{--action: var(--action-neutral)}.tcn-select-group .tcn-select-group-option:hover,.tcn-select-group .tcn-select-group-option:active{transform:none}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]{color:var(--act);border-color:var(--act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:hover{background:var(--act-faint)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:active{background:var(--act-down);color:var(--on-act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary][data-is-disabled=true]{color:var(--material-disabled);border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option[data-hierarchy=primary][data-is-disabled=true]{background:var(--material-disabled);color:#fff;border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option{border-radius:0}.tcn-select-group .tcn-select-group-option:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-select-group .tcn-select-group-option:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-tabs-bar .tcn-tabs-list .tcn-tab-item{min-height:24px;padding:0px var(--padding-medium);text-decoration:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item{box-sizing:border-box;border:none;padding:0px var(--padding-medium)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{--on-material: var(--action)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:hover:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--on-mat);pointer-events:none;z-index:2;width:100%}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list:after{content:"";position:absolute;bottom:-1px;left:0;min-height:2px;transform:translate(var(--tabs-active-rectangle-position-x, 0));width:var(--tabs-active-rectangle-width, 0);background:hsl(var(--action));pointer-events:none;border-bottom-left-radius:2px;border-bottom-right-radius:2px;transition:transform .3s ease-in-out,width .3s ease-in-out;will-change:transform,width;z-index:2}.tcn-tabs-bar[data-variant=default]:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--material-line);pointer-events:none}.tcn-tabs-bar[data-variant=inline]{min-width:min-content;width:auto;flex-grow:0;border-radius:var(--shape-radius-medium);border:1px solid hsl(var(--on-material));--action: var(--on-material)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list{gap:var(--gap-small);padding:var(--padding-small)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item{border-radius:var(--shape-radius-medium)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{background:var(--on-mat);color:var(--mat)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]:hover{background:color-mix(in srgb,var(--on-mat),white 8%)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]:active{background:color-mix(in srgb,var(--on-mat),black 8%)}.material{background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-draggable[data-is-draggable=true] .tcn-drag-handle{cursor:move}.tcn-frame[data-is-veil=true]{background-color:#00000080}.tcn-tooltip{background:#395578d9;box-shadow:0 4px 7px #414141a8;color:#fff;border-radius:var(--shape-radius-medium);padding:var(--padding-medium)}.tcn-list{gap:var(--gap-medium)}.tcn-list .tcn-item{height:24px;padding:0px var(--padding-medium);border-radius:var(--shape-radius-medium)}.tcn-scaffold{--scaffold-v-inset: var(--v-inset, var(--padding-large));--scaffold-header-size: var(--header-size, 40px);--scaffold-footer-size: var(--footer-size, 40px);--scaffold-utility-bar-size: var(--utility-bar-size, 32px);--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1)}.tcn-scaffold :where(.tcn-header){min-height:var(--scaffold-header-size);padding:0 var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-header)+:where(.tcn-body),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-body){border-top:calc(var(--scaffold-divide-header) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body)+:where(.tcn-footer){border-top:calc(var(--scaffold-divide-footer) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-utility-bar){min-height:var(--scaffold-utility-bar-size);padding:0 var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-body){padding:0 var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-footer){gap:var(--gap-medium);min-height:var(--scaffold-footer-size);padding:0 var(--scaffold-v-inset)}.tcn-frame-veil[data-is-veil=true]{background-color:#00000080}.tcn-modal{--divide-header: 0}.tcn-modal :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:1px solid var(--foreground-color-primary)}.tcn-modal :where(.tcn-typography){color:inherit}.tcn-modal :where(.tcn-header){--material: var(--material-secondary-dark);--on-material: 0, 0%, 100%;--action: var(--material-tan);--on-action: 0, 0%, 100%;background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-modal :where(.tcn-utility-bar){--material: var(--material-secondary-dark);--on-material: 0, 0%, 100%;--action: var(--material-tan);--on-action: 0, 0%, 100%;background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-window{--divide-header: 0}.tcn-window :where(.tcn-scaffold){box-shadow:0 4px 34px #00000096;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:2px solid white}.tcn-window :where(.tcn-typography){color:inherit}.tcn-window :where(.tcn-header){--material: var(--material-secondary-dark);--on-material: 0, 0%, 100%;--action: var(--material-tan);--on-action: 0, 0%, 100%;background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-window :where(.tcn-utility-bar){--material: var(--material-secondary-dark);--on-material: 0, 0%, 100%;--action: var(--material-tan);--on-action: 0, 0%, 100%;background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-pop-confirm{--divide-header: 0;--v-inset: var(--padding-medium)}.tcn-pop-confirm :where(.tcn-scaffold){box-shadow:0 4px 8px #0006;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden}.tcn-pop-confirm :where(.tcn-typography){color:inherit}.tcn-pop-confirm :where(.tcn-header){min-height:32px;--material: var(--material-secondary-dark);--on-material: 0, 0%, 100%;--action: var(--material-tan);--on-action: 0, 0%, 100%;background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-pop-confirm :where(.tcn-utility-bar){--material: var(--material-secondary-dark);--on-material: 0, 0%, 100%;--action: var(--material-tan);--on-action: 0, 0%, 100%;background-color:hsl(var(--material));color:hsl(var(--on-material))}.tcn-panel{background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);overflow:hidden}.tcn-card{--header-size: 32px;--footer-size: 32px;--utility-bar-size: 24px;--divide-header: 0;background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);border:1px solid var(--foreground-color-primary);overflow:hidden}.tcn-card :where(.tcn-header){background-color:#ecf4fb}.tcn-card :where(.tcn-utility-bar){background-color:#ecf4fb}}

package/dist/themes/themes/ergo/ergo_theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ergo_theme.d.ts","sourceRoot":"","sources":["../../../../src/themes/themes/ergo/ergo_theme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,eAAsB,CAAC"}
+{"version":3,"file":"ergo_theme.d.ts","sourceRoot":"","sources":["../../../../src/themes/themes/ergo/ergo_theme.ts"],"names":[],"mappings":"AACA,OAAO,kBAAkB,CAAC;AAE1B,eAAO,MAAM,cAAc,eAAsB,CAAC"}

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

@@ -1,3 +1,4 @@
+import "@fontsource/lato";
 const n = `@layer tcn-reset {
   * {
     position: relative;
@@ -70,6 +71,7 @@ const n = `@layer tcn-reset {
     --foreground-color-quaternary: #222222;
 
     --material-disabled: #d3d3d3;
+    --material-line: #aaaaaa;
     --material-secondary-dark: 197 29.1% 40.4%;
     --material-tan: 33, 22%, 84%;
 
@@ -87,6 +89,12 @@ const n = `@layer tcn-reset {
     --action-encouraged: 120, 90%, 40%;
   }
 
+  .tcn-theme-root {
+    font-family: var(--font-family);
+    color: var(--font-color);
+    background-color: var(--background-color-primary);
+  }
+
   /* ===== Actions ===== */
 
   .tcn-interactive {
@@ -105,6 +113,7 @@ const n = `@layer tcn-reset {
     --act-faint: hsla(var(--action), 0.2);
     --on-mat: hsl(var(--on-material));
     --on-mat-faint: hsla(var(--on-material), 0.2);
+    --on-mat-down: color-mix(in srgb, var(--on-mat), black 8%);
     --mat: hsl(var(--material));
     --mat-down: color-mix(in srgb, var(--mat), black 8%);
     --mat-raised: color-mix(in srgb, var(--mat), white 8%);
@@ -368,6 +377,107 @@ const n = `@layer tcn-reset {
     }
   }
 
+  /* ===== Tabs ===== */
+  .tcn-tabs-bar {
+    .tcn-tabs-list {
+      .tcn-tab-item {
+        min-height: 24px;
+        padding: 0px var(--padding-medium);
+        text-decoration: none;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  /* Default */
+  .tcn-tabs-bar[data-variant="default"] {
+    .tcn-tabs-list {
+      .tcn-tab-item {
+        box-sizing: border-box;
+        border: none;
+        padding: 0px var(--padding-medium);
+      }
+      .tcn-tab-item[data-is-selected="true"] {
+        --on-material: var(--action);
+      }
+      .tcn-tab-item[data-is-selected="false"]:hover::after {
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0px;
+        height: 1px;
+        background: var(--on-mat);
+        pointer-events: none;
+        z-index: 2;
+        width: 100%;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        min-height: 2px;
+        transform: translateX(var(--tabs-active-rectangle-position-x, 0));
+        width: var(--tabs-active-rectangle-width, 0);
+        background: hsl(var(--action));
+        pointer-events: none;
+        border-bottom-left-radius: 2px;
+        border-bottom-right-radius: 2px;
+        transition:
+          transform 300ms ease-in-out,
+          width 300ms ease-in-out;
+        will-change: transform, width;
+        z-index: 2;
+      }
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: var(--material-line);
+      pointer-events: none;
+    }
+  }
+
+  /* Inline  */
+  .tcn-tabs-bar[data-variant="inline"] {
+    min-width: min-content;
+    width: auto;
+    flex-grow: 0;
+    border-radius: var(--shape-radius-medium);
+    border: 1px solid hsl(var(--on-material));
+    --action: var(--on-material);
+
+    .tcn-tabs-list {
+      gap: var(--gap-small);
+      padding: var(--padding-small);
+      .tcn-tab-item {
+        border-radius: var(--shape-radius-medium);
+      }
+      .tcn-tab-item[data-is-selected="true"] {
+        background: var(--on-mat);
+        color: var(--mat);
+      }
+      .tcn-tab-item[data-is-selected="true"]:hover {
+        background: color-mix(in srgb, var(--on-mat), white 8%);
+      }
+      .tcn-tab-item[data-is-selected="true"]:active {
+        background: color-mix(in srgb, var(--on-mat), black 8%);
+      }
+    }
+  }
+
+  /* ===== MATERIAL ===== */
+
   .material {
     background-color: hsl(var(--material));
     color: hsl(var(--on-material));

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

@@ -1 +1 @@
-{"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"@layer tcn-reset {\\n  * {\\n    position: relative;\\n    box-sizing: border-box;\\n  }\\n}\\n\\n@layer tcn-theme {\\n  /* ===== CSS VARIABLES ===== */\\n  :root {\\n    --scalar: 1;\\n    --accent-color: #cd6b2c;\\n\\n    /* Typography */\\n    --font-color: #395578;\\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    /* Status Colors */\\n    --status-color-disabled: #7f7f7f;\\n    --status-color-info: #008cff;\\n    --status-color-warning: #ffff00;\\n    --status-color-positive: #00ff00;\\n    --status-color-error: #ff0000;\\n\\n    --async-color-initial: #c0c0c0;\\n    --async-color-pending: #008cff;\\n    --async-color-success: #00ff00;\\n    --async-color-failed: #ff0000;\\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: #d3d3d3;\\n    --material-secondary-dark: 197 29.1% 40.4%;\\n    --material-tan: 33, 22%, 84%;\\n\\n    /* Default Material */\\n    --action: 23, 65%, 49%;\\n    --on-action: 0, 0%, 100%;\\n    --material: 0, 0%, 100%;\\n    --on-material: 213, 35.6%, 34.7%;\\n\\n    --action-dangerous: 0, 90%, 50%;\\n    --action-cautious: 53, 90%, 60%;\\n    --on-action-cautious: 213, 35.6%, 34.7%;\\n    --action-neutral: var(--action);\\n    --action-suggested: 202, 90%, 40%;\\n    --action-encouraged: 120, 90%, 40%;\\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    --act: hsl(var(--tcn-interactive-color, var(--action)));\\n    --on-act: hsl(var(--on-action));\\n    /* Could use hsl here if we made three color variables for each of the hsl values */\\n    --act-down: color-mix(in srgb, var(--act), black 8%);\\n    --act-raised: color-mix(in srgb, var(--act), white 8%);\\n    --act-faint: hsla(var(--action), 0.2);\\n    --on-mat: hsl(var(--on-material));\\n    --on-mat-faint: hsla(var(--on-material), 0.2);\\n    --mat: hsl(var(--material));\\n    --mat-down: color-mix(in srgb, var(--mat), black 8%);\\n    --mat-raised: color-mix(in srgb, var(--mat), white 8%);\\n  }\\n\\n  .tcn-interactive[data-is-disabled=\\\"true\\\"] {\\n    pointer-events: none;\\n    cursor: not-allowed;\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"primary\\\"] {\\n    background: var(--act);\\n    color: var(--on-act);\\n    border: 1px solid var(--act);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"primary\\\"]:focus-visible {\\n    outline: 2px dashed var(--act);\\n  }\\n\\n  .tcn-interactive[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-interactive[data-hierarchy=\\\"primary\\\"]:hover {\\n    background: var(--act-raised);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"primary\\\"]:active {\\n    background: var(--act-down);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"secondary\\\"] {\\n    background: transparent;\\n    color: var(--on-mat);\\n    border: 1px solid var(--on-mat);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"secondary\\\"]:focus-visible {\\n    outline: 2px dashed var(--on-mat);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n    color: var(--material-disabled);\\n    border: 1px solid var(--material-disabled);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"secondary\\\"]:hover {\\n    background: var(--on-mat-faint);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"secondary\\\"]:active {\\n    background: var(--mat-down);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"tertiary\\\"] {\\n    background: transparent;\\n    color: var(--on-mat);\\n    border: 1px solid transparent;\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:focus-visible {\\n    outline: 2px dashed var(--on-mat);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n    color: var(--material-disabled);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:hover {\\n    text-decoration: underline;\\n    text-decoration-color: var(--on-mat);\\n    text-decoration-thickness: 1px;\\n    text-underline-offset: 4px;\\n    color: var(--on-mat);\\n    background: var(--on-mat-faint);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:active {\\n    background: var(--mat-down);\\n  }\\n\\n  /* Button */\\n\\n  .tcn-base-button {\\n    --action: var(var(--button-color), var(--action));\\n  }\\n\\n  .tcn-base-button[data-severity=\\\"dangerous\\\"] {\\n    --action: var(--action-dangerous);\\n    --on-material: var(--action-dangerous);\\n  }\\n\\n  .tcn-base-button[data-severity=\\\"cautious\\\"] {\\n    --action: var(--action-cautious);\\n    --on-action: var(--on-action-cautious);\\n    --on-material: var(--action-cautious);\\n  }\\n\\n  /* .tcn-base-button[data-severity=\\\"neutral\\\"] {\\n  --action: var(--action-neutral);\\n} */\\n\\n  .tcn-base-button[data-severity=\\\"suggested\\\"] {\\n    --action: var(--action-suggested);\\n    --on-material: var(--action-suggested);\\n  }\\n\\n  .tcn-base-button[data-severity=\\\"encouraged\\\"] {\\n    --action: var(--action-encouraged);\\n    --on-material: var(--action-encouraged);\\n  }\\n\\n  .tcn-button {\\n    border-radius: 4px;\\n  }\\n\\n  .tcn-button[data-size=\\\"sm\\\"] {\\n    padding: 0px 8px;\\n    min-height: 22px;\\n  }\\n\\n  .tcn-button[data-size=\\\"md\\\"] {\\n    padding: 0px 12px;\\n    min-height: 26px;\\n  }\\n\\n  .tcn-button[data-size=\\\"lg\\\"] {\\n    padding: 0px 16px;\\n    min-height: 32px;\\n  }\\n\\n  .tcn-button:hover {\\n    transform: translateY(-1px);\\n    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);\\n  }\\n\\n  .tcn-button:active {\\n    transform: translateY(1px);\\n    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);\\n  }\\n\\n  .tcn-slim-button {\\n    height: auto;\\n    width: auto;\\n    padding: 0;\\n  }\\n\\n  .tcn-slim-button[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\\n  .tcn-slim-button[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  .tcn-slim-button[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  .tcn-button[data-size].tcn-select {\\n    padding-inline-end: 26px;\\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    --action: var(--action-neutral);\\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  .material {\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\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\\n  /* Scaffold: */\\n  .tcn-scaffold {\\n    --scaffold-v-inset: var(--v-inset, var(--padding-large));\\n    --scaffold-header-size: var(--header-size, 40px);\\n    --scaffold-footer-size: var(--footer-size, 40px);\\n    --scaffold-utility-bar-size: var(--utility-bar-size, 32px);\\n    --scaffold-divide-footer: var(--divide-footer, 1);\\n    --scaffold-divide-header: var(--divide-header, 1);\\n\\n    :where(.tcn-header) {\\n      min-height: var(--scaffold-header-size);\\n      padding: 0 var(--scaffold-v-inset);\\n      gap: var(--gap-medium);\\n    }\\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-utility-bar) {\\n      min-height: var(--scaffold-utility-bar-size);\\n      padding: 0 var(--scaffold-v-inset);\\n      gap: var(--gap-medium);\\n    }\\n\\n    :where(.tcn-body) {\\n      padding: 0 var(--scaffold-v-inset);\\n      gap: var(--gap-medium);\\n    }\\n\\n    :where(.tcn-footer) {\\n      gap: var(--gap-medium);\\n      min-height: var(--scaffold-footer-size);\\n      padding: 0 var(--scaffold-v-inset);\\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-typography) {\\n      color: inherit;\\n    }\\n\\n    :where(.tcn-header) {\\n      --material: var(--material-secondary-dark);\\n      --on-material: 0, 0%, 100%;\\n      --action: var(--material-tan);\\n      --on-action: 0, 0%, 100%;\\n      background-color: hsl(var(--material));\\n      color: hsl(var(--on-material));\\n    }\\n\\n    :where(.tcn-utility-bar) {\\n      --material: var(--material-secondary-dark);\\n      --on-material: 0, 0%, 100%;\\n      --action: var(--material-tan);\\n      --on-action: 0, 0%, 100%;\\n      background-color: hsl(var(--material));\\n      color: hsl(var(--on-material));\\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-typography) {\\n      color: inherit;\\n    }\\n\\n    :where(.tcn-header) {\\n      --material: var(--material-secondary-dark);\\n      --on-material: 0, 0%, 100%;\\n      --action: var(--material-tan);\\n      --on-action: 0, 0%, 100%;\\n      background-color: hsl(var(--material));\\n      color: hsl(var(--on-material));\\n    }\\n\\n    :where(.tcn-utility-bar) {\\n      --material: var(--material-secondary-dark);\\n      --on-material: 0, 0%, 100%;\\n      --action: var(--material-tan);\\n      --on-action: 0, 0%, 100%;\\n      background-color: hsl(var(--material));\\n      color: hsl(var(--on-material));\\n    }\\n  }\\n\\n  .tcn-pop-confirm {\\n    --divide-header: 0;\\n    --v-inset: var(--padding-medium);\\n\\n    :where(.tcn-scaffold) {\\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-typography) {\\n      color: inherit;\\n    }\\n\\n    :where(.tcn-header) {\\n      min-height: 32px;\\n      --material: var(--material-secondary-dark);\\n      --on-material: 0, 0%, 100%;\\n      --action: var(--material-tan);\\n      --on-action: 0, 0%, 100%;\\n      background-color: hsl(var(--material));\\n      color: hsl(var(--on-material));\\n    }\\n\\n    :where(.tcn-utility-bar) {\\n      --material: var(--material-secondary-dark);\\n      --on-material: 0, 0%, 100%;\\n      --action: var(--material-tan);\\n      --on-action: 0, 0%, 100%;\\n      background-color: hsl(var(--material));\\n      color: hsl(var(--on-material));\\n    }\\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    --header-size: 32px;\\n    --footer-size: 32px;\\n    --utility-bar-size: 24px;\\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      /* TODO: This should be a variable */\\n      background-color: #ecf4fb;\\n    }\\n\\n    :where(.tcn-utility-bar) {\\n      /* TODO: This should be a variable */\\n      background-color: #ecf4fb;\\n    }\\n  }\\n}\\n\"","import css from './ergo_theme.css?raw';\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,GCEFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}
+{"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"@layer tcn-reset {\\n  * {\\n    position: relative;\\n    box-sizing: border-box;\\n  }\\n}\\n\\n@layer tcn-theme {\\n  /* ===== CSS VARIABLES ===== */\\n  :root {\\n    --scalar: 1;\\n    --accent-color: #cd6b2c;\\n\\n    /* Typography */\\n    --font-color: #395578;\\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    /* Status Colors */\\n    --status-color-disabled: #7f7f7f;\\n    --status-color-info: #008cff;\\n    --status-color-warning: #ffff00;\\n    --status-color-positive: #00ff00;\\n    --status-color-error: #ff0000;\\n\\n    --async-color-initial: #c0c0c0;\\n    --async-color-pending: #008cff;\\n    --async-color-success: #00ff00;\\n    --async-color-failed: #ff0000;\\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: #d3d3d3;\\n    --material-line: #aaaaaa;\\n    --material-secondary-dark: 197 29.1% 40.4%;\\n    --material-tan: 33, 22%, 84%;\\n\\n    /* Default Material */\\n    --action: 23, 65%, 49%;\\n    --on-action: 0, 0%, 100%;\\n    --material: 0, 0%, 100%;\\n    --on-material: 213, 35.6%, 34.7%;\\n\\n    --action-dangerous: 0, 90%, 50%;\\n    --action-cautious: 53, 90%, 60%;\\n    --on-action-cautious: 213, 35.6%, 34.7%;\\n    --action-neutral: var(--action);\\n    --action-suggested: 202, 90%, 40%;\\n    --action-encouraged: 120, 90%, 40%;\\n  }\\n\\n  .tcn-theme-root {\\n    font-family: var(--font-family);\\n    color: var(--font-color);\\n    background-color: var(--background-color-primary);\\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    --act: hsl(var(--tcn-interactive-color, var(--action)));\\n    --on-act: hsl(var(--on-action));\\n    /* Could use hsl here if we made three color variables for each of the hsl values */\\n    --act-down: color-mix(in srgb, var(--act), black 8%);\\n    --act-raised: color-mix(in srgb, var(--act), white 8%);\\n    --act-faint: hsla(var(--action), 0.2);\\n    --on-mat: hsl(var(--on-material));\\n    --on-mat-faint: hsla(var(--on-material), 0.2);\\n    --on-mat-down: color-mix(in srgb, var(--on-mat), black 8%);\\n    --mat: hsl(var(--material));\\n    --mat-down: color-mix(in srgb, var(--mat), black 8%);\\n    --mat-raised: color-mix(in srgb, var(--mat), white 8%);\\n  }\\n\\n  .tcn-interactive[data-is-disabled=\\\"true\\\"] {\\n    pointer-events: none;\\n    cursor: not-allowed;\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"primary\\\"] {\\n    background: var(--act);\\n    color: var(--on-act);\\n    border: 1px solid var(--act);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"primary\\\"]:focus-visible {\\n    outline: 2px dashed var(--act);\\n  }\\n\\n  .tcn-interactive[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-interactive[data-hierarchy=\\\"primary\\\"]:hover {\\n    background: var(--act-raised);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"primary\\\"]:active {\\n    background: var(--act-down);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"secondary\\\"] {\\n    background: transparent;\\n    color: var(--on-mat);\\n    border: 1px solid var(--on-mat);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"secondary\\\"]:focus-visible {\\n    outline: 2px dashed var(--on-mat);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n    color: var(--material-disabled);\\n    border: 1px solid var(--material-disabled);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"secondary\\\"]:hover {\\n    background: var(--on-mat-faint);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"secondary\\\"]:active {\\n    background: var(--mat-down);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"tertiary\\\"] {\\n    background: transparent;\\n    color: var(--on-mat);\\n    border: 1px solid transparent;\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:focus-visible {\\n    outline: 2px dashed var(--on-mat);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n    color: var(--material-disabled);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:hover {\\n    text-decoration: underline;\\n    text-decoration-color: var(--on-mat);\\n    text-decoration-thickness: 1px;\\n    text-underline-offset: 4px;\\n    color: var(--on-mat);\\n    background: var(--on-mat-faint);\\n  }\\n\\n  .tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:active {\\n    background: var(--mat-down);\\n  }\\n\\n  /* Button */\\n\\n  .tcn-base-button {\\n    --action: var(var(--button-color), var(--action));\\n  }\\n\\n  .tcn-base-button[data-severity=\\\"dangerous\\\"] {\\n    --action: var(--action-dangerous);\\n    --on-material: var(--action-dangerous);\\n  }\\n\\n  .tcn-base-button[data-severity=\\\"cautious\\\"] {\\n    --action: var(--action-cautious);\\n    --on-action: var(--on-action-cautious);\\n    --on-material: var(--action-cautious);\\n  }\\n\\n  /* .tcn-base-button[data-severity=\\\"neutral\\\"] {\\n  --action: var(--action-neutral);\\n} */\\n\\n  .tcn-base-button[data-severity=\\\"suggested\\\"] {\\n    --action: var(--action-suggested);\\n    --on-material: var(--action-suggested);\\n  }\\n\\n  .tcn-base-button[data-severity=\\\"encouraged\\\"] {\\n    --action: var(--action-encouraged);\\n    --on-material: var(--action-encouraged);\\n  }\\n\\n  .tcn-button {\\n    border-radius: 4px;\\n  }\\n\\n  .tcn-button[data-size=\\\"sm\\\"] {\\n    padding: 0px 8px;\\n    min-height: 22px;\\n  }\\n\\n  .tcn-button[data-size=\\\"md\\\"] {\\n    padding: 0px 12px;\\n    min-height: 26px;\\n  }\\n\\n  .tcn-button[data-size=\\\"lg\\\"] {\\n    padding: 0px 16px;\\n    min-height: 32px;\\n  }\\n\\n  .tcn-button:hover {\\n    transform: translateY(-1px);\\n    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);\\n  }\\n\\n  .tcn-button:active {\\n    transform: translateY(1px);\\n    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);\\n  }\\n\\n  .tcn-slim-button {\\n    height: auto;\\n    width: auto;\\n    padding: 0;\\n  }\\n\\n  .tcn-slim-button[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\\n  .tcn-slim-button[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  .tcn-slim-button[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  .tcn-button[data-size].tcn-select {\\n    padding-inline-end: 26px;\\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    --action: var(--action-neutral);\\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      }\\n      .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n        --on-material: var(--action);\\n      }\\n      .tcn-tab-item[data-is-selected=\\\"false\\\"]:hover::after {\\n        content: \\\"\\\";\\n        display: block;\\n        position: absolute;\\n        left: 0;\\n        right: 0;\\n        bottom: 0px;\\n        height: 1px;\\n        background: var(--on-mat);\\n        pointer-events: none;\\n        z-index: 2;\\n        width: 100%;\\n      }\\n\\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: hsl(var(--action));\\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    &::before {\\n      content: \\\"\\\";\\n      position: absolute;\\n      bottom: 0;\\n      left: 0;\\n      width: 100%;\\n      height: 1px;\\n      background: var(--material-line);\\n      pointer-events: none;\\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 hsl(var(--on-material));\\n    --action: 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      .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n        background: var(--on-mat);\\n        color: var(--mat);\\n      }\\n      .tcn-tab-item[data-is-selected=\\\"true\\\"]:hover {\\n        background: color-mix(in srgb, var(--on-mat), white 8%);\\n      }\\n      .tcn-tab-item[data-is-selected=\\\"true\\\"]:active {\\n        background: color-mix(in srgb, var(--on-mat), black 8%);\\n      }\\n    }\\n  }\\n\\n  /* ===== MATERIAL ===== */\\n\\n  .material {\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\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\\n  /* Scaffold: */\\n  .tcn-scaffold {\\n    --scaffold-v-inset: var(--v-inset, var(--padding-large));\\n    --scaffold-header-size: var(--header-size, 40px);\\n    --scaffold-footer-size: var(--footer-size, 40px);\\n    --scaffold-utility-bar-size: var(--utility-bar-size, 32px);\\n    --scaffold-divide-footer: var(--divide-footer, 1);\\n    --scaffold-divide-header: var(--divide-header, 1);\\n\\n    :where(.tcn-header) {\\n      min-height: var(--scaffold-header-size);\\n      padding: 0 var(--scaffold-v-inset);\\n      gap: var(--gap-medium);\\n    }\\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-utility-bar) {\\n      min-height: var(--scaffold-utility-bar-size);\\n      padding: 0 var(--scaffold-v-inset);\\n      gap: var(--gap-medium);\\n    }\\n\\n    :where(.tcn-body) {\\n      padding: 0 var(--scaffold-v-inset);\\n      gap: var(--gap-medium);\\n    }\\n\\n    :where(.tcn-footer) {\\n      gap: var(--gap-medium);\\n      min-height: var(--scaffold-footer-size);\\n      padding: 0 var(--scaffold-v-inset);\\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-typography) {\\n      color: inherit;\\n    }\\n\\n    :where(.tcn-header) {\\n      --material: var(--material-secondary-dark);\\n      --on-material: 0, 0%, 100%;\\n      --action: var(--material-tan);\\n      --on-action: 0, 0%, 100%;\\n      background-color: hsl(var(--material));\\n      color: hsl(var(--on-material));\\n    }\\n\\n    :where(.tcn-utility-bar) {\\n      --material: var(--material-secondary-dark);\\n      --on-material: 0, 0%, 100%;\\n      --action: var(--material-tan);\\n      --on-action: 0, 0%, 100%;\\n      background-color: hsl(var(--material));\\n      color: hsl(var(--on-material));\\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-typography) {\\n      color: inherit;\\n    }\\n\\n    :where(.tcn-header) {\\n      --material: var(--material-secondary-dark);\\n      --on-material: 0, 0%, 100%;\\n      --action: var(--material-tan);\\n      --on-action: 0, 0%, 100%;\\n      background-color: hsl(var(--material));\\n      color: hsl(var(--on-material));\\n    }\\n\\n    :where(.tcn-utility-bar) {\\n      --material: var(--material-secondary-dark);\\n      --on-material: 0, 0%, 100%;\\n      --action: var(--material-tan);\\n      --on-action: 0, 0%, 100%;\\n      background-color: hsl(var(--material));\\n      color: hsl(var(--on-material));\\n    }\\n  }\\n\\n  .tcn-pop-confirm {\\n    --divide-header: 0;\\n    --v-inset: var(--padding-medium);\\n\\n    :where(.tcn-scaffold) {\\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-typography) {\\n      color: inherit;\\n    }\\n\\n    :where(.tcn-header) {\\n      min-height: 32px;\\n      --material: var(--material-secondary-dark);\\n      --on-material: 0, 0%, 100%;\\n      --action: var(--material-tan);\\n      --on-action: 0, 0%, 100%;\\n      background-color: hsl(var(--material));\\n      color: hsl(var(--on-material));\\n    }\\n\\n    :where(.tcn-utility-bar) {\\n      --material: var(--material-secondary-dark);\\n      --on-material: 0, 0%, 100%;\\n      --action: var(--material-tan);\\n      --on-action: 0, 0%, 100%;\\n      background-color: hsl(var(--material));\\n      color: hsl(var(--on-material));\\n    }\\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    --header-size: 32px;\\n    --footer-size: 32px;\\n    --utility-bar-size: 24px;\\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      /* TODO: This should be a variable */\\n      background-color: #ecf4fb;\\n    }\\n\\n    :where(.tcn-utility-bar) {\\n      /* TODO: This should be a variable */\\n      background-color: #ecf4fb;\\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,GCGFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}

package/dist/themes/themes/windows_98/windows_98.css

@@ -1 +1 @@
-@layer tcn-theme{:root{--scalar: 1;--gap-small: 2px;--gap-medium: 4px;--gap-large: 8px;--padding-small: 2px;--padding-medium: 4px;--padding-large: 8px;--status-color-disabled: #7f7f7f;--status-color-info: #000080;--status-color-warning: #000080;--status-color-error: #be0000;--async-color-initial: #c0c0c0;--async-color-pending: #000080;--async-color-success: #00ff00;--async-color-failed: #be0000;--primary-color-faint: #c0c0c0;--primary-color: #000080;--primary-color-strong: #000080;--secondary-color-faint: #c0c0c0;--secondary-color: #000080;--secondary-color-strong: #000080;--tertiary-color-faint: #c0c0c0;--tertiary-color: #000080;--tertiary-color-strong: #000080;--quaternary-color-faint: #c0c0c0;--quaternary-color: #000080;--quaternary-color-strong: #000080;--font-color: #222222;--font-family: "Pixelated MS Sans Serif", Arial;--font-size: 12px;--background-color-primary: #c0c0c0;--background-color-secondary: #c0c0c0;--background-color-tertiary: #c0c0c0;--background-color-quaternary: #c0c0c0;--foreground-color-primary: #222222;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--accent-color: #000080}.tcn-title[data-size=sm]{font-size:10px}.tcn-title[data-size=md]{font-size:12px}.tcn-title[data-size=lg]{font-size:14px}.tcn-body-text[data-size=sm]{font-size:10px}.tcn-body-text[data-size=md]{font-size:11px}.tcn-body-text[data-size=lg]{font-size:12px}.tcn-button-text{position:relative;opacity:1;font-size:12px!important}.tcn-button,.tcn-button[data-hierarchy=primary],.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=primary]:hover,.tcn-button[data-hierarchy=secondary]:hover{background:silver;border:none;border-radius:0;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;box-sizing:border-box;color:#222;min-height:23px;min-width:0;padding:0 12px;font-size:12px;text-decoration:none;outline:none}.tcn-button[data-is-disabled=true]{text-shadow:1px 1px 0 #fff}.tcn-button[data-hierarchy=primary]>*,.tcn-button[data-hierarchy=secondary]>*{position:relative}.tcn-button[data-hierarchy=primary]:active>*,.tcn-button[data-hierarchy=secondary]:active>*{position:relative;top:0;left:1px}.tcn-button[data-hierarchy=primary]:focus:not(:active):before,.tcn-button[data-hierarchy=secondary]:focus:not(:active):before{content:"";position:absolute;inset:1px 2px 2px 1px;outline:1px dotted #222;outline-offset:-3px}.tcn-button[data-hierarchy=primary],.tcn-button[data-hierarchy=primary]:hover{box-shadow:inset -2px -2px #0a0a0a,inset 1px 1px #0a0a0a,inset -3px -3px gray,inset 2px 2px #fff,inset 3px 3px silver}.tcn-button[data-hierarchy=primary]:active,.tcn-button[data-hierarchy=secondary]:active{background:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px silver,inset 2px 2px gray;color:#222;border:none;text-decoration:none}.tcn-button[data-hierarchy=primary]:focus,.tcn-button[data-hierarchy=secondary]:focus,.tcn-button[data-hierarchy=primary]:focus:not(:active),.tcn-button[data-hierarchy=secondary]:focus:not(:active){background:silver;border:none;text-decoration:none}.tcn-button[data-hierarchy=tertiary]{padding:0 4px;background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:navy;min-height:auto;min-width:auto;text-decoration:none}.tcn-button[data-hierarchy=tertiary]:hover{background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:navy;min-height:auto;min-width:auto;text-decoration:none}.tcn-button[data-hierarchy=tertiary]:active{background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:#00008099;min-height:auto;min-width:auto;text-decoration:none}.tcn-button[data-hierarchy=tertiary]:focus,.tcn-button[data-hierarchy=tertiary]:focus:not(:active){background:none;outline:1px dotted #000080;outline-offset:0;border:none;text-decoration:none}.tcn-button[data-hierarchy=secondary][data-is-disabled=true]{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{box-shadow:inset -2px -2px #717171,inset 1px 1px #717171,inset -3px -3px #999,inset 2px 2px #fff,inset 3px 3px silver}.tcn-button[data-hierarchy=primary][data-is-disabled=true],.tcn-button[data-hierarchy=secondary][data-is-disabled=true],.tcn-button[data-hierarchy=tertiary][data-is-disabled=true]{color:#7f7f7f;cursor:not-allowed}.tcn-button.select,.tcn-button.select:hover{position:relative;padding-inline-end:20px;padding-inline-start:4px}.tcn-button.select:dir(ltr):after{content:"";position:absolute;right:calc(4px * var(--scalar, 1));top:50%;transform:translateY(-50%);width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.tcn-button.select:dir(rtl):after{content:"";position:absolute;left:calc(4px * var(--scalar, 1));top:50%;transform:translateY(-50%);width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));background-color:#222;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.tcn-slim-button,.tcn-slim-button[data-hierarchy=primary],.tcn-slim-button[data-hierarchy=secondary],.tcn-slim-button[data-hierarchy=primary]:hover,.tcn-slim-button[data-hierarchy=secondary]:hover{padding:2px;min-width:0;min-height:0;height:auto;width:auto}.tcn-slim-button[data-size=sm],.tcn-slim-button[data-hierarchy=primary][data-size=sm],.tcn-slim-button[data-hierarchy=secondary][data-size=sm],.tcn-slim-button[data-hierarchy=primary][data-size=sm]:hover,.tcn-slim-button[data-hierarchy=secondary][data-size=sm]:hover{padding:1px}.tcn-slim-button[data-size=md],.tcn-slim-button[data-hierarchy=primary][data-size=md],.tcn-slim-button[data-hierarchy=secondary][data-size=md],.tcn-slim-button[data-hierarchy=primary][data-size=md]:hover,.tcn-slim-button[data-hierarchy=secondary][data-size=md]:hover{padding:2px}.tcn-slim-button[data-size=lg],.tcn-slim-button[data-hierarchy=primary][data-size=lg],.tcn-slim-button[data-hierarchy=secondary][data-size=lg],.tcn-slim-button[data-hierarchy=primary][data-size=lg]:hover,.tcn-slim-button[data-hierarchy=secondary][data-size=lg]:hover{padding:4px}.tcn-select-group .tcn-button[data-hierarchy=primary],.tcn-select-group .tcn-button[data-hierarchy=primary]:hover,.tcn-select-group .tcn-button[data-hierarchy=primary]:focus{background-color:navy;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;color:#fff}.tcn-select-group .tcn-button:hover,.tcn-select-group .tcn-button:focus,.tcn-button-group .tcn-button:hover,.tcn-button-group .tcn-button:focus{z-index:1}.tcn-input,.tcn-textarea,.tcn-suggestion-list-search-input,.tcn-multi-combo-box-values-container,.tcn-multiselect-values-container{border-radius:0;outline:none;border:none;background-color:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;padding:3px 4px}.tcn-suggestion-list-search-input{box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a,0 -2px 0 2px silver}.tcn-input,.tcn-textarea,.tcn-suggestion-list-search-input{height:23px}.tcn-input:is(:focus,:focus-visible,:active,:hover),.tcn-input:is(:focus,:focus-visible,:active,:hover)[data-is-disabled=false],.tcn-textarea:is(:focus,:focus-visible,:active,:hover),.tcn-textarea:is(:focus,:focus-visible,:active,:hover)[data-is-disabled=false]{outline:none;border:none}.tcn-input[data-is-disabled=true],.tcn-textarea[data-is-disabled=true],.tcn-suggestion-list-search-input[data-is-disabled=true],.tcn-multiselect-values-container[data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.tcn-input[data-is-disabled=true],.tcn-textarea[data-is-disabled=true],.tcn-suggestion-list-search-input[data-is-disabled=true],.tcn-multiselect-values-container[data-is-disabled=true],.tcn-input[data-is-disabled=true]::placeholder,.tcn-textarea[data-is-disabled=true]::placeholder,.tcn-suggestion-list-search-input[data-is-disabled=true]::placeholder,.tcn-multiselect-values-container[data-is-disabled=true]::placeholder{color:#7f7f7f;cursor:not-allowed;background-color:silver}.tcn-select-group .tcn-button[data-hierarchy=primary]:active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px silver,inset 2px 2px gray;color:#fff}.tcn-select-group .tcn-button[data-hierarchy=primary]:focus:not(:active):before{outline:1px dotted #fcfcfc}.tcn-suggestion-list{padding:2px}.tcn-suggestion-item{padding:0;background:transparent;border:none;min-height:0}.tcn-suggestion-item:hover{background:navy;color:#fff}.tcn-suggestion-item[data-is-selected=true],.tcn-suggestion-item[data-is-focused=true]{padding:0;background:navy;color:#fff;border:none}.tcn-suggestion-list-search-input{border-radius:0;padding:4px;height:24px;min-height:24px}.tcn-title{color:#000}.header .tcn-title{color:#fff}.header[data-kind=window]{padding:4px;background:linear-gradient(90deg,navy,#1084d0);border:none;color:#fff}.header[data-kind=window]>.tcn-button{color:#222}.header[data-kind=toolbar],.header[data-kind=app],.header[data-kind=nav]{padding:4px 0;background:silver;color:#222;border-bottom:1px solid #808080;border-top:1px solid #f5f5f5;border-right:1px solid #808080;border-left:1px solid #f5f5f5;padding-inline-start:4px}.header[data-kind=panel]{padding:4px;background:linear-gradient(90deg,#7c7c7c,#aeaeae);border:none;color:#fff}.tcn-main[data-kind=window],.tcn-main[data-kind=app],.tcn-main[data-kind=nav],.tcn-main[data-kind=toolbar],.tcn-main[data-kind=section],.tcn-main[data-kind=panel],.tcn-main[data-kind=drawer],.tcn-main[data-kind=card],.tcn-panel,.tcn-h-panel,.tcn-v-panel,.tcn-sidebar-start[data-hierarchy],.tcn-sidebar-end[data-hierarchy]{border-radius:0;background:silver;color:#222;border-bottom:1px solid #808080;border-top:1px solid #f5f5f5;border-right:1px solid #808080;border-left:1px solid #f5f5f5}.tcn-column:after{content:"";position:absolute;bottom:var(--padding);top:var(--padding);right:0;width:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-column:last-child:after{display:none}.tcn-main[data-kind=panel],.tcn-sidebar-start[data-kind=panel],.tcn-sidebar-end[data-kind=panel]{padding:0}.tcn-sidebar-start[data-hierarchy=tertiary],.tcn-sidebar-start[data-hierarchy=secondary]{background:silver;color:#222}.tcn-sidebar-start[data-kind=nav],.tcn-v-nav{background:#fff;padding:2px;border-top:1px solid #808080;border-bottom:1px solid #f5f5f5;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-sidebar-end[data-hierarchy=tertiary],.tcn-sidebar-end[data-hierarchy=secondary]{background:silver;color:#222}.tcn-sidebar-end[data-hierarchy=primary],.tcn-sidebar-start[data-hierarchy=primary]{background:#fff;color:#222}.tcn-footer[data-kind=window]{padding:4px;background:silver;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver;color:#222}.tcn-window,.tcn-date-picker-popover,.tcn-date-picker-year-selector,.tcn-menu,.tcn-suggestion-list{border-radius:0;background:silver;padding:4px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #f5f5f5,inset -2px -2px gray,inset 2px 2px silver}.tcn-suggestion-list-header{background:silver}.tcn-date-picker-box{background:silver;padding:0}.tcn-date-picker-date,.tcn-date-picker-year-button{box-shadow:none!important}.tcn-date-picker-header{height:20px}.tcn-button.tcn-phone-number-input-select,.tcn-button.tcn-phone-number-input-select:hover{min-width:0}.tcn-phone-number-input[data-has-phone-book=false]{border-end-end-radius:0px;border-start-end-radius:0px}.tcn-button.tcn-phone-number-input-phone-book{max-width:23px!important;max-height:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important}.tcn-button.tcn-date-picker-year-select{padding-inline-end:20px}.tcn-button.tcn-date-picker-year-select:dir(ltr):after{width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E")}.tcn-button.tcn-date-picker-year-select:dir(rtl):after{width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E")}.tcn-time-box{border-radius:0;background:#fff;border:none;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver}.tcn-time-box-title-container{min-height:25px;height:25px}.tcn-field-set{padding:8px 12px 12px;margin-top:10px;border-radius:0;background:silver;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #f5f5f5,inset -2px -2px gray}.tcn-field-set>.tcn-field-set-body{background:transparent;padding:0;gap:8px}.tcn-field-set>.tcn-field-set-legend{position:relative;top:-7px;left:-4px;height:0}.tcn-field-set-legend-text{background:silver;padding:0;font-size:12px}.tcn-chip{background:silver;border-radius:0;color:#222;border:none;font-size:12px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-checkbox{outline:none;border-radius:0;background:#fff;border:none;background-position:center;background-repeat:no-repeat;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver}.tcn-checkbox:focus{outline:none}.tcn-checkbox[data-checked=true]{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E")}.tcn-checkbox[data-is-disabled=false]:active{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E")}.tcn-checkbox[data-is-disabled=true]{background-color:silver}.tcn-checkbox[data-checked=true][data-is-disabled=true]{background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23707070' stroke-width='2'/%3E%3C/svg%3E")}.tcn-radio,.tcn-radio[data-checked=true],.tcn-radio[checked=true]{width:14px;height:14px;min-width:14px;min-height:14px;border-inline-end:1px solid #fff;border-inline-start:1px solid #222;border-block-end:1px solid #fff;border-block-start:1px solid #222}.tcn-radio:focus{outline:none}.tcn-radio:before{content:"";background:transparent;position:absolute;border-radius:50%;inset:0;border-inline-end:1px solid #dfdfdf;border-inline-start:1px solid #808080;border-block-end:1px solid #dfdfdf;border-block-start:1px solid #808080}.tcn-radio[data-checked=true]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40%;height:40%;background:#222;border-radius:50%}.tcn-switch:focus,.tcn-switch:focus-visible,.tcn-switch-wrapper[data-focused=true][data-is-checked=false],.tcn-switch-wrapper[data-focused=true][data-is-checked=true]{outline:none}.tcn-switch-wrapper{border-radius:0;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;border-color:silver;background-color:#fff;transition:background-color .2s ease-out;margin-top:2px;margin-bottom:3px}.tcn-switch-wrapper[data-is-checked=false]>.tcn-switch-icon{color:#222}.tcn-switch:after{content:"";cursor:pointer;position:absolute;top:0;transition:transform .2s ease-out;width:calc(16px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-switch-wrapper[data-is-checked=true][data-is-disabled=false]{background-color:var(--accent-color);border-color:silver}.tcn-switch-wrapper[data-is-disabled=true]{background-color:silver;border-color:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #7f7f7f}.tcn-switch[data-is-disabled=true]:after{box-shadow:inset -1px -1px #666,inset 1px 1px #fff,inset -2px -2px #949494,inset 2px 2px silver}.tcn-switch-wrapper[data-is-disabled=true]>.tcn-switch-icon{color:#707070}.tcn-slider::-webkit-slider-runnable-track{border-radius:0;height:5px;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}.tcn-slider::-webkit-slider-runnable-track [data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.tcn-slider::-webkit-slider-thumb{outline:none;width:calc(12px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;border:none;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-slider[data-is-disabled=false]:active::-webkit-slider-thumb{background-color:silver}.tcn-slider[data-is-disabled=true]::-webkit-slider-thumb{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver}.tcn-slider::-moz-range-track{border-radius:0;height:5px;border:none;background:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}.tcn-slider::-moz-range-track [data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.tcn-slider::-moz-range-thumb{outline:none;width:calc(12px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;border:none;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;cursor:pointer}.tcn-slider[data-is-disabled=false]:active::-moz-range-thumb,.tcn-slider[data-is-disabled=false]:focus::-moz-range-thumb{background-color:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;outline:none}.tcn-slider[data-is-disabled=true]::-moz-range-thumb{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver;cursor:not-allowed}.tcn-nav-item,.tcn-nav-item[data-is-selected],.tcn-menu-item{border-radius:0;font-size:12px}.tcn-nav-item,.tcn-menu-item .tcn-body-text{font-size:12px}.tcn-main[data-hierarchy=primary],.tcn-main[data-hierarchy=secondary],.tcn-main[data-hierarchy=tertiary]{background:silver;padding:0}.tcn-h-nav{border:none}.tcn-h-nav:after{content:"";position:absolute;left:0;right:0;bottom:0;height:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-footer{border:none}.tcn-footer:after{content:"";position:absolute;left:0;right:0;top:0;height:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}}
+@layer tcn-theme{:root{--scalar: 1;--gap-small: 2px;--gap-medium: 4px;--gap-large: 8px;--padding-small: 2px;--padding-medium: 4px;--padding-large: 8px;--status-color-disabled: #7f7f7f;--status-color-info: #000080;--status-color-warning: #000080;--status-color-error: #be0000;--async-color-initial: #c0c0c0;--async-color-pending: #000080;--async-color-success: #00ff00;--async-color-failed: #be0000;--primary-color-faint: #c0c0c0;--primary-color: #000080;--primary-color-strong: #000080;--secondary-color-faint: #c0c0c0;--secondary-color: #000080;--secondary-color-strong: #000080;--tertiary-color-faint: #c0c0c0;--tertiary-color: #000080;--tertiary-color-strong: #000080;--quaternary-color-faint: #c0c0c0;--quaternary-color: #000080;--quaternary-color-strong: #000080;--background-color-primary: #c0c0c0;--background-color-secondary: #c0c0c0;--background-color-tertiary: #c0c0c0;--background-color-quaternary: #c0c0c0;--foreground-color-primary: #222222;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--accent-color: #000080;--font-color: #222222;--font-family: "Microsoft Sans Serif", "Arial", sans-serif;--font-size: 12px}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);-webkit-font-smoothing:none;background-color:var(--background-color-primary)}.tcn-title[data-size=sm]{font-size:10px}.tcn-title[data-size=md]{font-size:12px}.tcn-title[data-size=lg]{font-size:14px}.tcn-body-text[data-size=sm]{font-size:10px}.tcn-body-text[data-size=md]{font-size:11px}.tcn-body-text[data-size=lg]{font-size:12px}.tcn-button-text{position:relative;opacity:1;font-size:12px!important}.tcn-base-button,.tcn-button,.tcn-button[data-hierarchy=primary],.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=primary]:hover,.tcn-button[data-hierarchy=secondary]:hover{background:silver;border:none;border-radius:0;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;box-sizing:border-box;color:#222;min-height:23px;min-width:0;padding:0 12px;font-size:12px;text-decoration:none;outline:none}.tcn-button[data-is-disabled=true]{text-shadow:1px 1px 0 #fff}.tcn-button[data-hierarchy=primary]>*,.tcn-button[data-hierarchy=secondary]>*{position:relative}.tcn-button[data-hierarchy=primary]:active>*,.tcn-button[data-hierarchy=secondary]:active>*{position:relative;top:0;left:1px}.tcn-button[data-hierarchy=primary]:focus:not(:active):before,.tcn-button[data-hierarchy=secondary]:focus:not(:active):before{content:"";position:absolute;inset:1px 2px 2px 1px;outline:1px dotted #222;outline-offset:-3px}.tcn-button[data-hierarchy=primary],.tcn-button[data-hierarchy=primary]:hover{box-shadow:inset -2px -2px #0a0a0a,inset 1px 1px #0a0a0a,inset -3px -3px gray,inset 2px 2px #fff,inset 3px 3px silver}.tcn-button[data-hierarchy=primary]:active,.tcn-button[data-hierarchy=secondary]:active{background:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px silver,inset 2px 2px gray;color:#222;border:none;text-decoration:none}.tcn-button[data-hierarchy=primary]:focus,.tcn-button[data-hierarchy=secondary]:focus,.tcn-button[data-hierarchy=primary]:focus:not(:active),.tcn-button[data-hierarchy=secondary]:focus:not(:active){background:silver;border:none;text-decoration:none}.tcn-button[data-hierarchy=tertiary]{padding:0 4px;background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:navy;min-height:auto;min-width:auto;text-decoration:none}.tcn-button[data-hierarchy=tertiary]:hover{background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:navy;min-height:auto;min-width:auto;text-decoration:none}.tcn-button[data-hierarchy=tertiary]:active{background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:#00008099;min-height:auto;min-width:auto;text-decoration:none}.tcn-button[data-hierarchy=tertiary]:focus,.tcn-button[data-hierarchy=tertiary]:focus:not(:active){background:none;outline:1px dotted #000080;outline-offset:0;border:none;text-decoration:none}.tcn-button[data-hierarchy=secondary][data-is-disabled=true]{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{box-shadow:inset -2px -2px #717171,inset 1px 1px #717171,inset -3px -3px #999,inset 2px 2px #fff,inset 3px 3px silver}.tcn-button[data-hierarchy=primary][data-is-disabled=true],.tcn-button[data-hierarchy=secondary][data-is-disabled=true],.tcn-button[data-hierarchy=tertiary][data-is-disabled=true]{color:#7f7f7f;cursor:not-allowed}.tcn-button.select,.tcn-button.select:hover{position:relative;padding-inline-end:20px;padding-inline-start:4px}.tcn-button.select:dir(ltr):after{content:"";position:absolute;right:calc(4px * var(--scalar, 1));top:50%;transform:translateY(-50%);width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.tcn-button.select:dir(rtl):after{content:"";position:absolute;left:calc(4px * var(--scalar, 1));top:50%;transform:translateY(-50%);width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));background-color:#222;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.tcn-slim-button,.tcn-slim-button[data-hierarchy=primary],.tcn-slim-button[data-hierarchy=secondary],.tcn-slim-button[data-hierarchy=primary]:hover,.tcn-slim-button[data-hierarchy=secondary]:hover{padding:2px;min-width:0;min-height:0;height:auto;width:auto}.tcn-slim-button[data-size=sm],.tcn-slim-button[data-hierarchy=primary][data-size=sm],.tcn-slim-button[data-hierarchy=secondary][data-size=sm],.tcn-slim-button[data-hierarchy=primary][data-size=sm]:hover,.tcn-slim-button[data-hierarchy=secondary][data-size=sm]:hover{padding:1px}.tcn-slim-button[data-size=md],.tcn-slim-button[data-hierarchy=primary][data-size=md],.tcn-slim-button[data-hierarchy=secondary][data-size=md],.tcn-slim-button[data-hierarchy=primary][data-size=md]:hover,.tcn-slim-button[data-hierarchy=secondary][data-size=md]:hover{padding:2px}.tcn-slim-button[data-size=lg],.tcn-slim-button[data-hierarchy=primary][data-size=lg],.tcn-slim-button[data-hierarchy=secondary][data-size=lg],.tcn-slim-button[data-hierarchy=primary][data-size=lg]:hover,.tcn-slim-button[data-hierarchy=secondary][data-size=lg]:hover{padding:4px}.tcn-select-group .tcn-button[data-hierarchy=primary],.tcn-select-group .tcn-button[data-hierarchy=primary]:hover,.tcn-select-group .tcn-button[data-hierarchy=primary]:focus{background-color:navy;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;color:#fff}.tcn-select-group .tcn-button:hover,.tcn-select-group .tcn-button:focus,.tcn-button-group .tcn-button:hover,.tcn-button-group .tcn-button:focus{z-index:1}.tcn-input,.tcn-textarea,.tcn-suggestion-list-search-input,.tcn-multi-combo-box-values-container,.tcn-multiselect-values-container{border-radius:0;outline:none;border:none;background-color:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;padding:3px 4px}.tcn-suggestion-list-search-input{box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a,0 -2px 0 2px silver}.tcn-input,.tcn-textarea,.tcn-suggestion-list-search-input{height:23px}.tcn-input:is(:focus,:focus-visible,:active,:hover),.tcn-input:is(:focus,:focus-visible,:active,:hover)[data-is-disabled=false],.tcn-textarea:is(:focus,:focus-visible,:active,:hover),.tcn-textarea:is(:focus,:focus-visible,:active,:hover)[data-is-disabled=false]{outline:none;border:none}.tcn-input[data-is-disabled=true],.tcn-textarea[data-is-disabled=true],.tcn-suggestion-list-search-input[data-is-disabled=true],.tcn-multiselect-values-container[data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.tcn-input[data-is-disabled=true],.tcn-textarea[data-is-disabled=true],.tcn-suggestion-list-search-input[data-is-disabled=true],.tcn-multiselect-values-container[data-is-disabled=true],.tcn-input[data-is-disabled=true]::placeholder,.tcn-textarea[data-is-disabled=true]::placeholder,.tcn-suggestion-list-search-input[data-is-disabled=true]::placeholder,.tcn-multiselect-values-container[data-is-disabled=true]::placeholder{color:#7f7f7f;cursor:not-allowed;background-color:silver}.tcn-select-group .tcn-button[data-hierarchy=primary]:active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px silver,inset 2px 2px gray;color:#fff}.tcn-select-group .tcn-button[data-hierarchy=primary]:focus:not(:active):before{outline:1px dotted #fcfcfc}.tcn-suggestion-list{padding:2px}.tcn-suggestion-item{padding:0;background:transparent;border:none;min-height:0}.tcn-suggestion-item:hover{background:navy;color:#fff}.tcn-suggestion-item[data-is-selected=true],.tcn-suggestion-item[data-is-focused=true]{padding:0;background:navy;color:#fff;border:none}.tcn-suggestion-list-search-input{border-radius:0;padding:4px;height:24px;min-height:24px}.tcn-title{color:#000}.header .tcn-title{color:#fff}.header[data-kind=window]{padding:4px;background:linear-gradient(90deg,navy,#1084d0);border:none;color:#fff}.header[data-kind=window]>.tcn-button{color:#222}.header[data-kind=toolbar],.header[data-kind=app],.header[data-kind=nav]{padding:4px 0;background:silver;color:#222;border-bottom:1px solid #808080;border-top:1px solid #f5f5f5;border-right:1px solid #808080;border-left:1px solid #f5f5f5;padding-inline-start:4px}.header[data-kind=panel]{padding:4px;background:linear-gradient(90deg,#7c7c7c,#aeaeae);border:none;color:#fff}.tcn-main[data-kind=window],.tcn-main[data-kind=app],.tcn-main[data-kind=nav],.tcn-main[data-kind=toolbar],.tcn-main[data-kind=section],.tcn-main[data-kind=panel],.tcn-main[data-kind=drawer],.tcn-main[data-kind=card],.tcn-panel,.tcn-h-panel,.tcn-v-panel,.tcn-sidebar-start[data-hierarchy],.tcn-sidebar-end[data-hierarchy]{border-radius:0;background:silver;color:#222;border-bottom:1px solid #808080;border-top:1px solid #f5f5f5;border-right:1px solid #808080;border-left:1px solid #f5f5f5}.tcn-column:after{content:"";position:absolute;bottom:var(--padding);top:var(--padding);right:0;width:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-column:last-child:after{display:none}.tcn-main[data-kind=panel],.tcn-sidebar-start[data-kind=panel],.tcn-sidebar-end[data-kind=panel]{padding:0}.tcn-sidebar-start[data-hierarchy=tertiary],.tcn-sidebar-start[data-hierarchy=secondary]{background:silver;color:#222}.tcn-sidebar-start[data-kind=nav],.tcn-v-nav{background:#fff;padding:2px;border-top:1px solid #808080;border-bottom:1px solid #f5f5f5;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-sidebar-end[data-hierarchy=tertiary],.tcn-sidebar-end[data-hierarchy=secondary]{background:silver;color:#222}.tcn-sidebar-end[data-hierarchy=primary],.tcn-sidebar-start[data-hierarchy=primary]{background:#fff;color:#222}.tcn-footer[data-kind=window]{padding:4px;background:silver;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver;color:#222}.tcn-window,.tcn-date-picker-popover,.tcn-date-picker-year-selector,.tcn-menu,.tcn-suggestion-list{border-radius:0;background:silver;padding:4px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #f5f5f5,inset -2px -2px gray,inset 2px 2px silver}.tcn-suggestion-list-header{background:silver}.tcn-date-picker-box{background:silver;padding:0}.tcn-date-picker-date,.tcn-date-picker-year-button{box-shadow:none!important}.tcn-date-picker-header{height:20px}.tcn-button.tcn-phone-number-input-select,.tcn-button.tcn-phone-number-input-select:hover{min-width:0}.tcn-phone-number-input[data-has-phone-book=false]{border-end-end-radius:0px;border-start-end-radius:0px}.tcn-button.tcn-phone-number-input-phone-book{max-width:23px!important;max-height:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important}.tcn-button.tcn-date-picker-year-select{padding-inline-end:20px}.tcn-button.tcn-date-picker-year-select:dir(ltr):after{width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E")}.tcn-button.tcn-date-picker-year-select:dir(rtl):after{width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E")}.tcn-time-box{border-radius:0;background:#fff;border:none;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver}.tcn-time-box-title-container{min-height:25px;height:25px}.tcn-field-set{padding:8px 12px 12px;margin-top:10px;border-radius:0;background:silver;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #f5f5f5,inset -2px -2px gray}.tcn-field-set>.tcn-field-set-body{background:transparent;padding:0;gap:8px}.tcn-field-set>.tcn-field-set-legend{position:relative;top:-7px;left:-4px;height:0}.tcn-field-set-legend-text{background:silver;padding:0;font-size:12px}.tcn-chip{background:silver;border-radius:0;color:#222;border:none;font-size:12px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-checkbox{outline:none;border-radius:0;background:#fff;border:none;background-position:center;background-repeat:no-repeat;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver}.tcn-checkbox:focus{outline:none}.tcn-checkbox[data-checked=true]{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E")}.tcn-checkbox[data-is-disabled=false]:active{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E")}.tcn-checkbox[data-is-disabled=true]{background-color:silver}.tcn-checkbox[data-checked=true][data-is-disabled=true]{background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23707070' stroke-width='2'/%3E%3C/svg%3E")}.tcn-radio,.tcn-radio[data-checked=true],.tcn-radio[checked=true]{width:14px;height:14px;min-width:14px;min-height:14px;border-inline-end:1px solid #fff;border-inline-start:1px solid #222;border-block-end:1px solid #fff;border-block-start:1px solid #222}.tcn-radio:focus{outline:none}.tcn-radio:before{content:"";background:transparent;position:absolute;border-radius:50%;inset:0;border-inline-end:1px solid #dfdfdf;border-inline-start:1px solid #808080;border-block-end:1px solid #dfdfdf;border-block-start:1px solid #808080}.tcn-radio[data-checked=true]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40%;height:40%;background:#222;border-radius:50%}.tcn-switch:focus,.tcn-switch:focus-visible,.tcn-switch-wrapper[data-focused=true][data-is-checked=false],.tcn-switch-wrapper[data-focused=true][data-is-checked=true]{outline:none}.tcn-switch-wrapper{border-radius:0;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;border-color:silver;background-color:#fff;transition:background-color .2s ease-out;margin-top:2px;margin-bottom:3px}.tcn-switch-wrapper[data-is-checked=false]>.tcn-switch-icon{color:#222}.tcn-switch:after{content:"";cursor:pointer;position:absolute;top:0;transition:transform .2s ease-out;width:calc(16px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-switch-wrapper[data-is-checked=true][data-is-disabled=false]{background-color:var(--accent-color);border-color:silver}.tcn-switch-wrapper[data-is-disabled=true]{background-color:silver;border-color:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #7f7f7f}.tcn-switch[data-is-disabled=true]:after{box-shadow:inset -1px -1px #666,inset 1px 1px #fff,inset -2px -2px #949494,inset 2px 2px silver}.tcn-switch-wrapper[data-is-disabled=true]>.tcn-switch-icon{color:#707070}.tcn-slider::-webkit-slider-runnable-track{border-radius:0;height:5px;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}.tcn-slider::-webkit-slider-runnable-track [data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.tcn-slider::-webkit-slider-thumb{outline:none;width:calc(12px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;border:none;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-slider[data-is-disabled=false]:active::-webkit-slider-thumb{background-color:silver}.tcn-slider[data-is-disabled=true]::-webkit-slider-thumb{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver}.tcn-slider::-moz-range-track{border-radius:0;height:5px;border:none;background:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}.tcn-slider::-moz-range-track [data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.tcn-slider::-moz-range-thumb{outline:none;width:calc(12px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;border:none;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;cursor:pointer}.tcn-slider[data-is-disabled=false]:active::-moz-range-thumb,.tcn-slider[data-is-disabled=false]:focus::-moz-range-thumb{background-color:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;outline:none}.tcn-slider[data-is-disabled=true]::-moz-range-thumb{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver;cursor:not-allowed}.tcn-nav-item,.tcn-nav-item[data-is-selected],.tcn-menu-item{border-radius:0;font-size:12px}.tcn-nav-item,.tcn-menu-item .tcn-body-text{font-size:12px}.tcn-main[data-hierarchy=primary],.tcn-main[data-hierarchy=secondary],.tcn-main[data-hierarchy=tertiary]{background:silver;padding:0}.tcn-h-nav{border:none}.tcn-h-nav:after{content:"";position:absolute;left:0;right:0;bottom:0;height:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-footer{border:none}.tcn-footer:after{content:"";position:absolute;left:0;right:0;top:0;height:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}}.tcn-tabs-list{display:flex;list-style-type:none;margin:0 0 -2px;padding-left:3px;position:relative;text-indent:0}.tcn-tabs-list .tcn-tab-item{border-top-left-radius:3px;border-top-right-radius:3px;box-shadow:inset -1px 0 #0a0a0a,inset 1px 1px #dfdfdf,inset -2px 0 gray,inset 2px 2px #fff}.tcn-tabs-list .tcn-tab-item[data-is-selected=true]{background-color:silver;margin-left:-3px;margin-top:-2px;padding-bottom:2px;position:relative;z-index:8}

package/dist/themes/themes/windows_98/windows_98_theme.js

@@ -36,10 +36,6 @@ const n = `@layer tcn-theme {
     --quaternary-color: #000080;
     --quaternary-color-strong: #000080;
 
-    --font-color: #222222;
-    --font-family: "Pixelated MS Sans Serif", Arial;
-    --font-size: 12px;
-
     --background-color-primary: #c0c0c0;
     --background-color-secondary: #c0c0c0;
     --background-color-tertiary: #c0c0c0;
@@ -51,6 +47,17 @@ const n = `@layer tcn-theme {
     --foreground-color-quaternary: #222222;
 
     --accent-color: #000080;
+
+    --font-color: #222222;
+    --font-family: "Microsoft Sans Serif", "Arial", sans-serif;
+    --font-size: 12px;
+  }
+
+  .tcn-theme-root {
+    font-family: var(--font-family);
+    color: var(--font-color);
+    -webkit-font-smoothing: none;
+    background-color: var(--background-color-primary);
   }
 
   /* ===== TYPOGRAPHY ===== */
@@ -82,6 +89,7 @@ const n = `@layer tcn-theme {
 
   /* ===== BUTTONS ===== */
   /* Base button styles */
+  .tcn-base-button,
   .tcn-button,
   .tcn-button[data-hierarchy="primary"],
   .tcn-button[data-hierarchy="secondary"],
@@ -1029,6 +1037,36 @@ const n = `@layer tcn-theme {
     border-left: 1px solid #808080;
   }
 }
+
+/* ===== TABS ===== */
+
+.tcn-tabs-list {
+  display: flex;
+  list-style-type: none;
+  margin: 0 0 -2px;
+  padding-left: 3px;
+  position: relative;
+  text-indent: 0;
+
+  .tcn-tab-item {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    box-shadow:
+      inset -1px 0 #0a0a0a,
+      inset 1px 1px #dfdfdf,
+      inset -2px 0 grey,
+      inset 2px 2px #fff;
+  }
+
+  .tcn-tab-item[data-is-selected="true"] {
+    background-color: silver;
+    margin-left: -3px;
+    margin-top: -2px;
+    padding-bottom: 2px;
+    position: relative;
+    z-index: 8;
+  }
+}
 `, t = new CSSStyleSheet();
 t.replaceSync(n);
 export {