@tcn/ui 0.9.0 → 0.11.0

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

@@ -1 +1 @@
-@layer tcn-theme{:root{--ergo-primary: #ce6b2b;--ergo-secondary: #669eb4;--ergo-secondary-light: #ecf4fb;--ergo-secondary-dark: #497485;--ergo-tertiary: #dfd7cd;--ergo-tertiary-light: #f9f4ed;--ergo-tertiary-dark: #7e6c5d;--ergo-white: #ffffff;--ergo-accent-blue: #395578;--ergo-accent-blue-light: #f3f4f6;--ergo-accent-green: #97bba3;--ergo-accent-green-light: #eef8ef;--ergo-accent-green-dark: #4f785c;--ergo-accent-yellow: #dbc97e;--ergo-accent-yellow-light: #fef9e7;--ergo-grey: #aaaaaa;--ergo-grey-light: #d3d3d3;--ergo-grey-dark: #808080;--ergo-status-red: #ff6565;--ergo-status-red-dark: #c24848;--ergo-status-yellow: #ffd439;--ergo-status-yellow-dark: #dbb735;--ergo-status-blue: var(--ergo-secondary);--ergo-status-blue-dark: var(--ergo-secondary-dark);--ergo-status-green: #3fbc6a;--ergo-status-green-dark: #2d904f;--ergo-ink-primary: var(--ergo-accent-blue);--ergo-ink-inverse: var(--ergo-white);--scalar: 1;--accent-color: var(--ergo-primary);--font-color: var(--ergo-ink-primary);--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;--bar-xs: 16px;--bar-sm: 24px;--bar-md: 32px;--bar-lg: 40px;--bar-xl: 48px;--status-color-disabled: var(--ergo-grey-light);--status-color-info: var(--ergo-status-blue);--status-color-warning: var(--ergo-status-yellow);--status-color-positive: var(--ergo-status-green);--status-color-error: var(--ergo-status-red);--async-color-initial: var(--ergo-grey);--async-color-pending: var(--ergo-status-blue);--async-color-success: var(--ergo-status-green);--async-color-failed: var(--ergo-status-red);--action-severity-dangerous: var(--ergo-status-red);--action-severity-cautious: var(--ergo-status-yellow);--action-severity-neutral: var(--ergo-primary);--action-severity-suggested: var(--ergo-status-blue);--action-severity-encouraged: var(--ergo-status-green);--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: var(--ergo-grey-light);--on-material-disabled: var(--ergo-ink-inverse);--ink-disabled: var(--ergo-grey-light);--material-line: var(--ergo-grey);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--ink: var(--on-material);--act: var(--action);--mat: var(--material);--act-down: color-mix(in srgb, var(--mat), black 12%);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);--act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);--act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);background:var(--mat);color:var(--ink);transition:background .1s,color .1s}.tcn-interactive:focus-visible,.tcn-interactive[data-focus-visible]{background:var(--act-focus);outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-interactive:hover,.tcn-interactive[data-hover]{background:var(--act-raised)}.tcn-interactive:active,.tcn-interactive[data-active]{background:var(--act-down)}.tcn-interactive[data-is-disabled=true]{pointer-events:none}.tcn-base-button{--btn-size-base: 26px;--btn-pad-base: 12px;--btn-pad-delta: 4px;--btn-size-delta: 4px;--btn-font-size-delta: 2px;--btn-step: 1;--btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));--btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));border-radius:var(--shape-radius-medium);min-height:var(--btn-size);padding:var(--padding-small) var(--btn-pad)}.tcn-base-button[data-size=sm]{--btn-step: -1}.tcn-base-button[data-size=md]{--btn-step: 0}.tcn-base-button[data-size=lg]{--btn-step: 1}.tcn-base-button[data-is-utility=true]{height:auto;width:auto;min-width:var(--btn-size);padding:0;--util-ratio: .75;--btn-size-base: 18px;font-size:calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step))}.tcn-base-button[data-is-utility=true] .tcn-icon{min-height:min(2px,calc(var(--btn-size) * var(--util-ratio)));min-width:min(2px,calc(var(--btn-size) * var(--util-ratio)))}.tcn-button{--btn-primary: var(--action);--btn-on-primary: var(--on-action);--btn-variant: var(--on-material);transition:box-shadow .1s,transform .1s}.tcn-button[data-severity=dangerous]{--btn-primary: var(--action-severity-dangerous);--btn-variant: var(--ergo-status-red-dark)}.tcn-button[data-severity=cautious]{--btn-primary: var(--action-severity-cautious);--btn-on-primary: var(--ergo-accent-blue);--btn-variant: var(--ergo-status-yellow-dark)}.tcn-button[data-severity=suggested]{--btn-primary: var(--action-severity-suggested);--btn-variant: var(--ergo-status-blue-dark)}.tcn-button[data-severity=encouraged]{--btn-primary: var(--action-severity-encouraged);--btn-variant: var(--ergo-status-green-dark)}.tcn-button[data-hierarchy=primary]{--act: var(--ergo-white);--ink: var(--tcn-button-text-color, var(--btn-on-primary));--mat: var(--tcn-button-color, var(--btn-primary))}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary]{--act: var(--tcn-button-color, var(--btn-variant));--ink: var(--tcn-button-color, var(--btn-variant))}:is(.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary])[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-button[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}.tcn-button[data-hierarchy=tertiary]{border:1px solid transparent}.tcn-button[data-hierarchy=secondary]{border:1px solid var(--ink)}.tcn-button[data-hierarchy=primary]{border:1px solid var(--mat)}.tcn-button:hover,.tcn-button[data-hover]{transform:translateY(-1px);box-shadow:0 4px 4px #0000001f}:is(.tcn-button:hover,.tcn-button[data-hover]):before,:is(.tcn-button:hover,.tcn-button[data-hover]):after{content:"";position:absolute;left:0;right:0;height:4px}:is(.tcn-button:hover,.tcn-button[data-hover]):before{top:-2px}:is(.tcn-button:hover,.tcn-button[data-hover]):after{bottom:-2px}.tcn-button:active,.tcn-button[data-active]{transform:translateY(1px);box-shadow:inset 0 2px 2px #0000001f}.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-toggle{--tgl-false: var(--ergo-accent-blue);--tgl-true: var(--ergo-accent-blue);--on-tgl-true: var(--ergo-white);--ink: var(--tcn-button-color, var(--tgl-false));--act: var(--tcn-button-color, var(--tgl-false))}.tcn-toggle[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-toggle[data-is-selected=true]{--mat: var(--tcn-button-color, var(--tgl-true));--ink: var(--tcn-button-text-color, var(--ergo-white));--act: var(--ergo-white)}.tcn-toggle[data-is-selected=true][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.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 .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);border-radius:0}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{--mat: var(--tcn-button-color, var(--material));--ink: var(--tcn-button-text-color, var(--ergo-primary));--act: var(--ergo-primary)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item:focus-visible{z-index:2}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:hover:after,.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:focus-visible:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ergo-accent-blue);pointer-events:none;width:100%;z-index:3}.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:var(--ergo-primary);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;z-index:1}.tcn-tabs-bar[data-variant=inline]{min-width:min-content;width:auto;flex-grow:0;border-radius:var(--shape-radius-medium);border:1px solid 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)}.material{background-color:var(--material);color: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-footer,.tcn-header,.tcn-utility-bar{padding-inline:var(--pad-inline, var(--padding-medium));gap:var(--gap-medium)}.tcn-utility-bar{min-height:var(--bar-md)}.tcn-footer,.tcn-header{min-height:var(--bar-lg)}.tcn-scaffold{--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1);--pad-inline: var(--padding-large)}.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-body){gap:var(--gap-medium)}.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-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-modal :where(.tcn-header) :where(.tcn-typography){color:inherit}.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-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-window :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-pop-confirm{--divide-header: 0}.tcn-pop-confirm :where(.tcn-scaffold){--pad-inline: var(--padding-medium);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-header){min-height:var(--bar-md);--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-pop-confirm :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-confirm{background-color:var(--background-color-primary)}.tcn-panel{background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);overflow:hidden}.tcn-card{--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){min-height:var(--bar-md);--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-card :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-card :where(.tcn-utility-bar){min-height:var(--bar-sm)}.tcn-section{--max-section-depth: 4;--section-tab-width: 4px;--section-tab-start: var(--pad-inline, var(--padding-medium));--section-tab-depth: 0;--section-tab: calc( var(--section-tab-start) + (var(--section-tab-width) * var(--section-tab-depth)) );--section-action: var(--ergo-secondary);--section-mat: var(--ergo-secondary-light);--section-on-mat: var(--ergo-ink-primary)}.tcn-heading{background-color:#f1f1f1;padding-inline-start:8px;height:30px;z-index:5}.tcn-section>.tcn-heading{z-index:calc(var(--max-section-depth) - var(--section-tab-depth));padding-inline-start:var(--section-tab);--material: var(--section-mat);--on-material: var(--section-on-mat);--action: var(--section-action);background-color:var(--material);color:var(--on-material);gap:var(--gap-small)}.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:var(--section-tab)}.tcn-section>.tcn-section{--section-tab-depth: 1;--section-mat: var(--ergo-accent-blue-light);--section-action: var(--ergo-accent-blue)}.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 2;--section-mat: var(--ergo-accent-green-light);--section-action: var(--ergo-accent-green-dark)}.tcn-section>.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 3;--section-mat: var(--ergo-tertiary-light);--section-action: var(--ergo-tertiary-dark)}.tcn-caret{--caret-size: 12px;--caret-triangle-height: calc(var(--caret-size) / 2);--caret-triangle-width: var(--caret-size);--caret-triangle-base: var(--caret-triangle-height) solid transparent;--caret-triangle-peak: var(--caret-triangle-width) solid var(--material);width:0;height:0;flex-grow:0;display:inline-block}.tcn-caret[data-direction=top]{border-bottom:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=bottom]{border-top:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=start]{border-right:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-caret[data-direction=end]{border-left:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-table{--table-pad-inline: var(--pad-inline, var(--padding-medium));--material: var(--ergo-white);--on-material: var(--ergo-ink-primary);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material);border-collapse:separate;display:block}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:first-of-type{border-right:1px solid color-mix(in srgb,var(--material) 80%,black)}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:last-of-type{border-left:1px solid color-mix(in srgb,var(--material) 80%,black)}.tcn-td{text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tcn-thead .tcn-tr{height:var(--bar-md)}.tcn-thead .tcn-tr .tcn-th{border-bottom:1px solid var(--ergo-grey-light)}.tcn-thead .tcn-tr .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)){border-right:1px solid var(--ergo-grey)}.tcn-thead .tcn-tr .tcn-th:last-of-type{border-left:1px solid var(--ergo-grey)}.tcn-tfoot{font-weight:700}.tcn-tfoot .tcn-tr{height:var(--bar-sm)}.tcn-tfoot .tcn-tr .tcn-th,.tcn-tfoot .tcn-tr .tcn-td{border-top:1px solid var(--ergo-grey-light)}.tcn-thead,.tcn-tfoot{font-size:14px;--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-tr{height:var(--bar-sm);align-content:center}.tcn-td,.tcn-th{padding-inline:var(--padding-medium);vertical-align:middle;text-align:start;background:var(--material)}.tcn-table .tcn-tr>.tcn-th:first-child,.tcn-table .tcn-tr>.tcn-td:first-child{padding-inline-start:var(--table-pad-inline)}.tcn-table .tcn-tr>.tcn-th:last-child,.tcn-table .tcn-tr>.tcn-td:last-child{padding-inline-end:var(--table-pad-inline)}.tcn-tbody{font-size:12px}.tcn-tbody .tcn-tr:nth-of-type(2n){--material: var(--ergo-accent-blue-light)}.tcn-tbody .tcn-tr:nth-of-type(odd){--material: var(--ergo-white)}.tcn-tbody .tcn-tr:hover{--material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%)}.tcn-tbody .tcn-tr[data-is-selected=true]{--material: var(--ergo-secondary);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-accent-blue)}.tcn-tbody .tcn-tr{--material: var(--bg-row);--on-material: var(--ergo-accent-blue);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}}
+@layer tcn-theme{:root{--ergo-primary: #ce6b2b;--ergo-secondary: #669eb4;--ergo-secondary-light: #ecf4fb;--ergo-secondary-dark: #497485;--ergo-tertiary: #dfd7cd;--ergo-tertiary-light: #f9f4ed;--ergo-tertiary-dark: #7e6c5d;--ergo-white: #ffffff;--ergo-accent-blue: #395578;--ergo-accent-blue-light: #f3f4f6;--ergo-accent-green: #97bba3;--ergo-accent-green-light: #eef8ef;--ergo-accent-green-dark: #4f785c;--ergo-accent-yellow: #dbc97e;--ergo-accent-yellow-light: #fef9e7;--ergo-grey: #aaaaaa;--ergo-grey-light: #d3d3d3;--ergo-grey-dark: #808080;--ergo-status-red: #ff6565;--ergo-status-red-dark: #c24848;--ergo-status-yellow: #ffd439;--ergo-status-yellow-dark: #dbb735;--ergo-status-blue: var(--ergo-secondary);--ergo-status-blue-dark: var(--ergo-secondary-dark);--ergo-status-green: #3fbc6a;--ergo-status-green-dark: #2d904f;--ergo-ink-primary: var(--ergo-accent-blue);--ergo-ink-inverse: var(--ergo-white);--scalar: 1;--accent-color: var(--ergo-primary);--font-color: var(--ergo-ink-primary);--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;--bar-xs: 16px;--bar-sm: 24px;--bar-md: 32px;--bar-lg: 40px;--bar-xl: 48px;--action-sm: 20px;--action-md: 24px;--action-lg: 32px;--status-color-disabled: var(--ergo-grey-light);--status-color-info: var(--ergo-status-blue);--status-color-warning: var(--ergo-status-yellow);--status-color-positive: var(--ergo-status-green);--status-color-error: var(--ergo-status-red);--async-color-initial: var(--ergo-grey);--async-color-pending: var(--ergo-status-blue);--async-color-success: var(--ergo-status-green);--async-color-failed: var(--ergo-status-red);--action-severity-dangerous: var(--ergo-status-red);--action-severity-cautious: var(--ergo-status-yellow);--action-severity-neutral: var(--ergo-primary);--action-severity-suggested: var(--ergo-status-blue);--action-severity-encouraged: var(--ergo-status-green);--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: var(--ergo-grey-light);--on-material-disabled: var(--ergo-ink-inverse);--ink-disabled: var(--ergo-grey-light);--material-line: var(--ergo-grey);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--ink: var(--on-material);--act: var(--action);--mat: var(--material);--act-down: color-mix(in srgb, var(--mat), black 12%);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);--act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);--act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);background:var(--mat);color:var(--ink);transition:background .1s,color .1s}.tcn-interactive:focus-visible,.tcn-interactive[data-focus-visible]{background:var(--act-focus);outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-interactive:hover,.tcn-interactive[data-hover]{background:var(--act-raised)}.tcn-interactive:active,.tcn-interactive[data-active]{background:var(--act-down)}.tcn-interactive[data-is-disabled=true]{pointer-events:none}.tcn-base-button{--btn-size-base: 26px;--btn-pad-base: 12px;--btn-pad-delta: 4px;--btn-size-delta: 4px;--btn-font-size-delta: 2px;--btn-step: 1;--btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));--btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));border-radius:var(--shape-radius-medium);min-height:var(--btn-size);padding:var(--padding-small) var(--btn-pad)}.tcn-base-button[data-size=sm]{--btn-step: -1}.tcn-base-button[data-size=md]{--btn-step: 0}.tcn-base-button[data-size=lg]{--btn-step: 1}.tcn-base-button[data-is-utility=true]{height:auto;width:auto;min-width:var(--btn-size);padding:0;--util-ratio: .75;--btn-size-base: 18px;font-size:calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step))}.tcn-base-button[data-is-utility=true] .tcn-icon{min-height:min(2px,calc(var(--btn-size) * var(--util-ratio)));min-width:min(2px,calc(var(--btn-size) * var(--util-ratio)))}.tcn-button{--btn-primary: var(--action);--btn-on-primary: var(--on-action);--btn-variant: var(--on-material);transition:box-shadow .1s,transform .1s}.tcn-button[data-severity=dangerous]{--btn-primary: var(--action-severity-dangerous);--btn-variant: var(--ergo-status-red-dark)}.tcn-button[data-severity=cautious]{--btn-primary: var(--action-severity-cautious);--btn-on-primary: var(--ergo-accent-blue);--btn-variant: var(--ergo-status-yellow-dark)}.tcn-button[data-severity=suggested]{--btn-primary: var(--action-severity-suggested);--btn-variant: var(--ergo-status-blue-dark)}.tcn-button[data-severity=encouraged]{--btn-primary: var(--action-severity-encouraged);--btn-variant: var(--ergo-status-green-dark)}.tcn-button[data-hierarchy=primary]{--act: var(--ergo-white);--ink: var(--tcn-button-text-color, var(--btn-on-primary));--mat: var(--tcn-button-color, var(--btn-primary))}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary]{--act: var(--tcn-button-color, var(--btn-variant));--ink: var(--tcn-button-color, var(--btn-variant))}:is(.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary])[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-button[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}.tcn-button[data-hierarchy=tertiary]{border:1px solid transparent}.tcn-button[data-hierarchy=secondary]{border:1px solid var(--ink)}.tcn-button[data-hierarchy=primary]{border:1px solid var(--mat)}.tcn-button:hover,.tcn-button[data-hover]{transform:translateY(-1px);box-shadow:0 4px 4px #0000001f}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):before,:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):after{content:"";position:absolute;left:0;right:0;height:4px}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):before{top:-2px}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):after{bottom:-2px}.tcn-button:active,.tcn-button[data-active]{transform:translateY(1px);box-shadow:inset 0 2px 2px #0000001f}.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-toggle{--tgl-false: var(--ergo-accent-blue);--tgl-true: var(--ergo-accent-blue);--on-tgl-true: var(--ergo-white);--ink: var(--tcn-button-color, var(--tgl-false));--act: var(--tcn-button-color, var(--tgl-false))}.tcn-toggle[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-toggle[data-is-selected=true]{--mat: var(--tcn-button-color, var(--tgl-true));--ink: var(--tcn-button-text-color, var(--ergo-white));--act: var(--ergo-white)}.tcn-toggle[data-is-selected=true][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.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 .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);border-radius:0}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{--mat: var(--tcn-button-color, var(--material));--ink: var(--tcn-button-text-color, var(--ergo-primary));--act: var(--ergo-primary)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item:focus-visible{z-index:2}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:hover:after,.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:focus-visible:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ergo-accent-blue);pointer-events:none;width:100%;z-index:3}.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:var(--ergo-primary);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;z-index:1}.tcn-tabs-bar[data-variant=inline]{min-width:min-content;width:auto;flex-grow:0;border-radius:var(--shape-radius-medium);border:1px solid 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)}.material{background-color:var(--material);color:var(--on-material)}.tcn-divider-line,.tcn-divider-line[data-emphasis=normal]{background:var(--material-line)}.tcn-divider-line[data-emphasis=strong]{background:color-mix(in srgb,var(--material-line) 80%,black 20%)}.tcn-divider-line[data-emphasis=faint]{background:color-mix(in srgb,var(--material-line) 80%,white 20%)}.tcn-draggable[data-is-draggable=true] .tcn-drag-handle{cursor:move}.tcn-frame-dialog{border:inherit}.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-utility-strip{min-width:var(--bar-md)}.tcn-utility-strip,.tcn-side{padding-block:var(--padding-medium);gap:var(--gap-medium)}.tcn-rail :where(.tcn-body){gap:var(--gap-medium)}.tcn-footer,.tcn-header,.tcn-utility-bar{padding-inline:var(--pad-inline, var(--padding-medium));gap:var(--gap-medium)}.tcn-utility-bar{min-height:var(--bar-md)}.tcn-footer,.tcn-header{min-height:var(--bar-lg)}.tcn-scaffold{--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1);--pad-inline: var(--padding-large)}.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-body){gap:var(--gap-medium)}.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-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-modal :where(.tcn-header) :where(.tcn-typography){color:inherit}.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-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-window :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-pop-confirm{--divide-header: 0}.tcn-pop-confirm :where(.tcn-scaffold){--pad-inline: var(--padding-medium);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-header){min-height:var(--bar-md);--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-pop-confirm :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-confirm{background-color:var(--background-color-primary)}.tcn-panel{background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);overflow:hidden}.tcn-card{--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){min-height:var(--bar-md);--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-card :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-card :where(.tcn-utility-bar){min-height:var(--bar-sm)}.tcn-section{--max-section-depth: 4;--section-tab-width: 4px;--section-tab-start: var(--pad-inline, var(--padding-medium));--section-tab-depth: 0;--section-tab: calc( var(--section-tab-start) + (var(--section-tab-width) * var(--section-tab-depth)) );--section-action: var(--ergo-secondary);--section-mat: var(--ergo-secondary-light);--section-on-mat: var(--ergo-ink-primary)}.tcn-heading{background-color:#f1f1f1;padding-inline-start:8px;height:30px;z-index:5}.tcn-section>.tcn-heading{z-index:calc(var(--max-section-depth) - var(--section-tab-depth));padding-inline-start:var(--section-tab);--material: var(--section-mat);--on-material: var(--section-on-mat);--action: var(--section-action);background-color:var(--material);color:var(--on-material);gap:var(--gap-small)}.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:var(--section-tab)}.tcn-section>.tcn-section{--section-tab-depth: 1;--section-mat: var(--ergo-accent-blue-light);--section-action: var(--ergo-accent-blue)}.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 2;--section-mat: var(--ergo-accent-green-light);--section-action: var(--ergo-accent-green-dark)}.tcn-section>.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 3;--section-mat: var(--ergo-tertiary-light);--section-action: var(--ergo-tertiary-dark)}.tcn-caret{--caret-size: 12px;--caret-triangle-height: calc(var(--caret-size) / 2);--caret-triangle-width: var(--caret-size);--caret-triangle-base: var(--caret-triangle-height) solid transparent;--caret-triangle-peak: var(--caret-triangle-width) solid var(--material);width:0;height:0;flex-grow:0;display:inline-block}.tcn-caret[data-direction=top]{border-bottom:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=bottom]{border-top:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=start]{border-right:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-caret[data-direction=end]{border-left:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-table{--table-pad-inline: var(--pad-inline, var(--padding-medium));--material: var(--ergo-white);--on-material: var(--ergo-ink-primary);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material);border-collapse:separate;display:block}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:first-of-type{border-right:1px solid color-mix(in srgb,var(--material) 80%,black)}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:last-of-type{border-left:1px solid color-mix(in srgb,var(--material) 80%,black)}.tcn-td{text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tcn-thead .tcn-tr{height:var(--bar-md)}.tcn-thead .tcn-tr .tcn-th{border-bottom:1px solid var(--ergo-grey-light)}.tcn-thead .tcn-tr .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)){border-right:1px solid var(--ergo-grey)}.tcn-thead .tcn-tr .tcn-th:last-of-type{border-left:1px solid var(--ergo-grey)}.tcn-tfoot{font-weight:700}.tcn-tfoot .tcn-tr{height:var(--bar-sm)}.tcn-tfoot .tcn-tr .tcn-th,.tcn-tfoot .tcn-tr .tcn-td{border-top:1px solid var(--ergo-grey-light)}.tcn-thead,.tcn-tfoot{font-size:14px;--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-tr{height:var(--bar-sm);align-content:center}.tcn-td,.tcn-th{padding-inline:var(--padding-medium);vertical-align:middle;text-align:start;background:var(--material)}.tcn-table .tcn-tr>.tcn-th:first-child,.tcn-table .tcn-tr>.tcn-td:first-child{padding-inline-start:var(--table-pad-inline)}.tcn-table .tcn-tr>.tcn-th:last-child,.tcn-table .tcn-tr>.tcn-td:last-child{padding-inline-end:var(--table-pad-inline)}.tcn-tbody{font-size:12px}.tcn-tbody .tcn-tr:nth-of-type(2n){--material: var(--ergo-accent-blue-light)}.tcn-tbody .tcn-tr:nth-of-type(odd){--material: var(--ergo-white)}.tcn-tbody .tcn-tr:hover{--material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%)}.tcn-tbody .tcn-tr[data-is-selected=true]{--material: var(--ergo-secondary);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-accent-blue)}.tcn-tbody .tcn-tr{--material: var(--bg-row);--on-material: var(--ergo-accent-blue);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-control{--act: var(--action);--mat: var(--material);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);font-size:12px;border:1px solid var(--ergo-grey);box-sizing:border-box;min-height:var(--action-md);border-radius:var(--shape-radius-medium);padding-inline:4px}.tcn-control[data-is-disabled=false]:hover{background:var(--act-raised)}.tcn-control:focus-visible{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-control:focus{border:1px solid var(--act)}.tcn-control::placeholder{color:var(--ergo-grey)}.tcn-control[data-is-disabled=true]{cursor:not-allowed;background:var(--material-disabled);color:var(--on-material-disabled)}.tcn-control[data-is-disabled=true]::placeholder{color:var(--on-material-disabled)}.tcn-input{height:auto}.tcn-textarea,.tcn-input{cursor:text}.tcn-input-group{border-radius:var(--shape-radius-medium)}.tcn-input-group:focus-within{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-input-group .tcn-input-group-slot{z-index:1;border-radius:0;height:auto;min-height:var(--action-md);padding-block:0}.tcn-input-group .tcn-input-group-slot:focus,.tcn-input-group .tcn-input-group-slot:focus-visible{z-index:3;outline:none}.tcn-input-group .tcn-input-group-slot:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-input-group .tcn-input-group-slot:not(:last-child){margin-right:-1px}.tcn-input-group .tcn-input-group-slot:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy]{border:1px solid var(--ergo-grey);height:auto;min-height:var(--action-md);min-width:var(--action-md);box-sizing:border-box}:is(.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy]):hover,:is(.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy])[data-hover]{transform:none}.tcn-input-group .tcn-select:focus-visible,.tcn-input-group .tcn-button:focus-visible,.tcn-input-group .tcn-button[data-hierarchy]:focus-visible{border-color:var(--ergo-primary)}.tcn-slider[data-is-disabled=true]::-webkit-slider-runnable-track{background:var(--ergo-grey-light)}.tcn-slider[data-is-disabled=true]::-webkit-slider-thumb{background-color:var(--ergo-white);border:1px solid var(--ergo-grey-light)}.tcn-checkbox{border-color:var(--ergo-primary)}.tcn-checkbox:focus-visible,.tcn-checkbox:focus{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-checkbox[data-is-disabled=true]{cursor:not-allowed;border-color:var(--material-disabled)}.tcn-checkbox[data-checked=true][data-is-disabled=true]{background-color:var(--ergo-grey-light)}.tcn-checkbox[data-checked=false][data-is-disabled=true]{background:var(--material);border-color:var(--ergo-grey-light);color:var(--ergo-grey-light)}.tcn-switch-wrapper[data-focused=true][data-is-checked=false],.tcn-switch-wrapper[data-focused=true][data-is-checked=true]{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-input,.tcn-select,.tcn-slider,.tcn-checkbox,.tcn-switch-wrapper,.tcn-date-picker,.tcn-date-picker-year-selector,.tcn-radio{--accent-color: var(--ergo-primary)}}

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

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

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

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

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

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

package/dist/typography/body_text/body_text.js

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

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

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

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

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