@tcn/ui 0.3.2 → 0.3.3

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

@@ -1 +1 @@
-{"version":3,"file":"windows_98_theme.js","sources":["../../../../src/themes/themes/windows_98/windows_98.css?raw","../../../../src/themes/themes/windows_98/windows_98_theme.ts"],"sourcesContent":["export default \"@layer tcn-theme {\\n  /* ===== CSS VARIABLES ===== */\\n  :root {\\n    --scalar: 1;\\n    --gap-small: 2px;\\n    --gap-medium: 4px;\\n    --gap-large: 8px;\\n\\n    --padding-small: 2px;\\n    --padding-medium: 4px;\\n    --padding-large: 8px;\\n\\n    --status-color-disabled: #7f7f7f;\\n    --status-color-info: #000080;\\n    --status-color-warning: #000080;\\n    --status-color-error: #be0000;\\n\\n    --async-color-initial: #c0c0c0;\\n    --async-color-pending: #000080;\\n    --async-color-success: #00ff00;\\n    --async-color-failed: #be0000;\\n\\n    --primary-color-faint: #c0c0c0;\\n    --primary-color: #000080;\\n    --primary-color-strong: #000080;\\n\\n    --secondary-color-faint: #c0c0c0;\\n    --secondary-color: #000080;\\n    --secondary-color-strong: #000080;\\n\\n    --tertiary-color-faint: #c0c0c0;\\n    --tertiary-color: #000080;\\n    --tertiary-color-strong: #000080;\\n\\n    --quaternary-color-faint: #c0c0c0;\\n    --quaternary-color: #000080;\\n    --quaternary-color-strong: #000080;\\n\\n    --font-color: #222222;\\n    --font-family: \\\"Pixelated MS Sans Serif\\\", Arial;\\n    --font-size: 12px;\\n\\n    --background-color-primary: #c0c0c0;\\n    --background-color-secondary: #c0c0c0;\\n    --background-color-tertiary: #c0c0c0;\\n    --background-color-quaternary: #c0c0c0;\\n\\n    --foreground-color-primary: #222222;\\n    --foreground-color-secondary: #222222;\\n    --foreground-color-tertiary: #222222;\\n    --foreground-color-quaternary: #222222;\\n\\n    --accent-color: #000080;\\n  }\\n\\n  /* ===== TYPOGRAPHY ===== */\\n  .tcn-title[data-size=\\\"sm\\\"] {\\n    font-size: 10px;\\n  }\\n  .tcn-title[data-size=\\\"md\\\"] {\\n    font-size: 12px;\\n  }\\n  .tcn-title[data-size=\\\"lg\\\"] {\\n    font-size: 14px;\\n  }\\n\\n  .tcn-body-text[data-size=\\\"sm\\\"] {\\n    font-size: 10px;\\n  }\\n  .tcn-body-text[data-size=\\\"md\\\"] {\\n    font-size: 11px;\\n  }\\n  .tcn-body-text[data-size=\\\"lg\\\"] {\\n    font-size: 12px;\\n  }\\n\\n  .tcn-button-text {\\n    position: relative;\\n    opacity: 1;\\n    font-size: 12px !important;\\n  }\\n\\n  /* ===== BUTTONS ===== */\\n  /* Base button styles */\\n  .tcn-button,\\n  .tcn-button[data-hierarchy=\\\"primary\\\"],\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"],\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:hover,\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"]:hover {\\n    background: silver;\\n    border: none;\\n    border-radius: 0;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n    box-sizing: border-box;\\n    color: #222;\\n    min-height: 23px;\\n    min-width: 0;\\n    padding: 0 12px;\\n    font-size: 12px;\\n    text-decoration: none;\\n    outline: none;\\n  }\\n\\n  .tcn-button[data-is-disabled=\\\"true\\\"] {\\n    text-shadow: 1px 1px 0 #fff;\\n  }\\n\\n  /* Button content positioning */\\n  .tcn-button[data-hierarchy=\\\"primary\\\"] > *,\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"] > * {\\n    position: relative;\\n  }\\n\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:active > *,\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"]:active > * {\\n    position: relative;\\n    top: 0;\\n    left: 1px;\\n  }\\n\\n  /* Button focus states */\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:focus:not(:active)::before,\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"]:focus:not(:active)::before {\\n    content: \\\"\\\";\\n    position: absolute;\\n    top: 1px;\\n    bottom: 2px;\\n    left: 1px;\\n    right: 2px;\\n    outline: 1px dotted #222;\\n    outline-offset: -3px;\\n  }\\n\\n  /* Primary button specific styles */\\n  .tcn-button[data-hierarchy=\\\"primary\\\"],\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:hover {\\n    box-shadow:\\n      inset -2px -2px #0a0a0a,\\n      inset 1px 1px #0a0a0a,\\n      inset -3px -3px grey,\\n      inset 2px 2px #fff,\\n      inset 3px 3px #c0c0c0;\\n  }\\n\\n  /* Active states */\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:active,\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"]:active {\\n    background: silver;\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px #0a0a0a,\\n      inset -2px -2px #c0c0c0,\\n      inset 2px 2px grey;\\n    color: #222;\\n    border: none;\\n    text-decoration: none;\\n  }\\n\\n  /* Focus states */\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:focus,\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"]:focus,\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:focus:not(:active),\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"]:focus:not(:active) {\\n    background: silver;\\n    border: none;\\n    text-decoration: none;\\n  }\\n\\n  /* Tertiary button styles */\\n  .tcn-button[data-hierarchy=\\\"tertiary\\\"] {\\n    padding: 0 4px;\\n    background: none;\\n    border: none;\\n    border-radius: 0;\\n    box-shadow: none;\\n    box-sizing: border-box;\\n    color: #000080;\\n    min-height: auto;\\n    min-width: auto;\\n    text-decoration: none;\\n  }\\n\\n  .tcn-button[data-hierarchy=\\\"tertiary\\\"]:hover {\\n    background: none;\\n    border: none;\\n    border-radius: 0;\\n    box-shadow: none;\\n    box-sizing: border-box;\\n    color: #000080;\\n    min-height: auto;\\n    min-width: auto;\\n    text-decoration: none;\\n  }\\n\\n  .tcn-button[data-hierarchy=\\\"tertiary\\\"]:active {\\n    background: none;\\n    border: none;\\n    border-radius: 0;\\n    box-shadow: none;\\n    box-sizing: border-box;\\n    color: rgba(0, 0, 128, 0.6);\\n    min-height: auto;\\n    min-width: auto;\\n    text-decoration: none;\\n  }\\n\\n  .tcn-button[data-hierarchy=\\\"tertiary\\\"]:focus,\\n  .tcn-button[data-hierarchy=\\\"tertiary\\\"]:focus:not(:active) {\\n    background: none;\\n    outline: 1px dotted #000080;\\n    outline-offset: 0;\\n    border: none;\\n    text-decoration: none;\\n  }\\n\\n  /* Disabled states */\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n    box-shadow:\\n      inset -1px -1px #717171,\\n      inset 1px 1px #fff,\\n      inset -2px -2px #999,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  .tcn-button[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n    box-shadow:\\n      inset -2px -2px #717171,\\n      inset 1px 1px #717171,\\n      inset -3px -3px #999,\\n      inset 2px 2px #fff,\\n      inset 3px 3px #c0c0c0;\\n  }\\n\\n  .tcn-button[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"],\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"],\\n  .tcn-button[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n    color: #7f7f7f;\\n    cursor: not-allowed;\\n  }\\n\\n  /* Select button styles */\\n  .tcn-button.select,\\n  .tcn-button.select:hover {\\n    position: relative;\\n    padding-inline-end: 20px;\\n    padding-inline-start: 4px;\\n  }\\n\\n  .tcn-button.select:dir(ltr)::after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    right: calc(4px * var(--scalar, 1));\\n    top: 50%;\\n    transform: translateY(-50%);\\n    width: calc(12px * var(--scalar, 1));\\n    height: calc(12px * var(--scalar, 1));\\n    background-color: currentColor;\\n    mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E\\\");\\n    mask-repeat: no-repeat;\\n    mask-position: center;\\n    mask-size: contain;\\n    pointer-events: none;\\n  }\\n\\n  .tcn-button.select:dir(rtl)::after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    left: calc(4px * var(--scalar, 1));\\n    top: 50%;\\n    transform: translateY(-50%);\\n    width: calc(12px * var(--scalar, 1));\\n    height: calc(12px * var(--scalar, 1));\\n    background-color: #222;\\n    mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E\\\");\\n    mask-repeat: no-repeat;\\n    mask-position: center;\\n    mask-size: contain;\\n    pointer-events: none;\\n  }\\n\\n  /* Slim button styles */\\n  .tcn-slim-button,\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"]:hover,\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"]:hover {\\n    padding: 2px;\\n    min-width: 0;\\n    min-height: 0;\\n    height: auto;\\n    width: auto;\\n  }\\n\\n  .tcn-slim-button[data-size=\\\"sm\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"sm\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"sm\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"sm\\\"]:hover,\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"sm\\\"]:hover {\\n    padding: 1px;\\n  }\\n\\n  .tcn-slim-button[data-size=\\\"md\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"md\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"md\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"md\\\"]:hover,\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"md\\\"]:hover {\\n    padding: 2px;\\n  }\\n\\n  .tcn-slim-button[data-size=\\\"lg\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"lg\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"lg\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"lg\\\"]:hover,\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"lg\\\"]:hover {\\n    padding: 4px;\\n  }\\n\\n  /* Select group styles */\\n  .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"],\\n  .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:hover,\\n  .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:focus {\\n    background-color: #000080;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n    color: #fff;\\n  }\\n\\n  .tcn-select-group .tcn-button:hover,\\n  .tcn-select-group .tcn-button:focus,\\n  .tcn-button-group .tcn-button:hover,\\n  .tcn-button-group .tcn-button:focus {\\n    z-index: 1;\\n  }\\n\\n  /* ===== INPUT FIELDS ===== */\\n  .tcn-input,\\n  .tcn-textarea,\\n  .tcn-suggestion-list-search-input,\\n  .tcn-multi-combo-box-values-container,\\n  .tcn-multiselect-values-container {\\n    border-radius: 0;\\n    outline: none;\\n    border: none;\\n    background-color: #fff;\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px grey,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #0a0a0a;\\n    box-sizing: border-box;\\n    padding: 3px 4px;\\n  }\\n\\n  .tcn-suggestion-list-search-input {\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px grey,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #0a0a0a,\\n      0px -2px 0px 2px #c0c0c0;\\n  }\\n\\n  .tcn-input,\\n  .tcn-textarea,\\n  .tcn-suggestion-list-search-input {\\n    height: 23px;\\n  }\\n\\n  .tcn-input:is(:focus, :focus-visible, :active, :hover),\\n  .tcn-input:is(:focus, :focus-visible, :active, :hover)[data-is-disabled=\\\"false\\\"],\\n  .tcn-textarea:is(:focus, :focus-visible, :active, :hover),\\n  .tcn-textarea:is(:focus, :focus-visible, :active, :hover)[data-is-disabled=\\\"false\\\"] {\\n    outline: none;\\n    border: none;\\n  }\\n\\n  .tcn-input[data-is-disabled=\\\"true\\\"],\\n  .tcn-textarea[data-is-disabled=\\\"true\\\"],\\n  .tcn-suggestion-list-search-input[data-is-disabled=\\\"true\\\"],\\n  .tcn-multiselect-values-container[data-is-disabled=\\\"true\\\"] {\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px #999,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #717171;\\n  }\\n\\n  .tcn-input[data-is-disabled=\\\"true\\\"],\\n  .tcn-textarea[data-is-disabled=\\\"true\\\"],\\n  .tcn-suggestion-list-search-input[data-is-disabled=\\\"true\\\"],\\n  .tcn-multiselect-values-container[data-is-disabled=\\\"true\\\"],\\n  .tcn-input[data-is-disabled=\\\"true\\\"]::placeholder,\\n  .tcn-textarea[data-is-disabled=\\\"true\\\"]::placeholder,\\n  .tcn-suggestion-list-search-input[data-is-disabled=\\\"true\\\"]::placeholder,\\n  .tcn-multiselect-values-container[data-is-disabled=\\\"true\\\"]::placeholder {\\n    color: #7f7f7f;\\n    cursor: not-allowed;\\n    background-color: #c0c0c0;\\n  }\\n\\n  /* Select group active and focus states */\\n  .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:active {\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px #0a0a0a,\\n      inset -2px -2px #c0c0c0,\\n      inset 2px 2px grey;\\n    color: #fff;\\n  }\\n\\n  .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:focus:not(:active)::before {\\n    outline: 1px dotted #fcfcfc;\\n  }\\n\\n  /* ===== SUGGESTION LISTS ===== */\\n  .tcn-suggestion-list {\\n    padding: 2px;\\n  }\\n\\n  .tcn-suggestion-item {\\n    padding: 0;\\n    background: transparent;\\n    border: none;\\n    min-height: 0;\\n  }\\n\\n  .tcn-suggestion-item:hover {\\n    background: #000080;\\n    color: #fff;\\n  }\\n\\n  .tcn-suggestion-item[data-is-selected=\\\"true\\\"],\\n  .tcn-suggestion-item[data-is-focused=\\\"true\\\"] {\\n    padding: 0;\\n    background: #000080;\\n    color: #fff;\\n    border: none;\\n  }\\n\\n  .tcn-suggestion-list-search-input {\\n    border-radius: 0;\\n    padding: 4px;\\n    height: 24px;\\n    min-height: 24px;\\n  }\\n\\n  /* ===== LAYOUT COMPONENTS ===== */\\n\\n  .tcn-title {\\n    color: black;\\n  }\\n\\n  .header .tcn-title {\\n    color: #fff;\\n  }\\n  /* Headers */\\n  .header[data-kind=\\\"window\\\"] {\\n    padding: 4px;\\n    background: linear-gradient(90deg, #000080, #1084d0);\\n    border: none;\\n    color: #fff;\\n  }\\n\\n  .header[data-kind=\\\"window\\\"] > .tcn-button {\\n    color: #222;\\n  }\\n\\n  .header[data-kind=\\\"toolbar\\\"],\\n  .header[data-kind=\\\"app\\\"],\\n  .header[data-kind=\\\"nav\\\"] {\\n    padding: 4px 0;\\n    background: #c0c0c0;\\n    color: #222222;\\n    border-bottom: 1px solid #808080;\\n    border-top: 1px solid #f5f5f5;\\n    border-right: 1px solid #808080;\\n    border-left: 1px solid #f5f5f5;\\n    padding-inline-start: 4px;\\n  }\\n\\n  .header[data-kind=\\\"panel\\\"] {\\n    padding: 4px;\\n    background: linear-gradient(90deg, #7c7c7c, #aeaeae);\\n    border: none;\\n    color: #fff;\\n  }\\n\\n  /* Main content areas */\\n  .tcn-main[data-kind=\\\"window\\\"],\\n  .tcn-main[data-kind=\\\"app\\\"],\\n  .tcn-main[data-kind=\\\"nav\\\"],\\n  .tcn-main[data-kind=\\\"toolbar\\\"],\\n  .tcn-main[data-kind=\\\"section\\\"],\\n  .tcn-main[data-kind=\\\"panel\\\"],\\n  .tcn-main[data-kind=\\\"panel\\\"],\\n  .tcn-main[data-kind=\\\"drawer\\\"],\\n  .tcn-main[data-kind=\\\"card\\\"],\\n  .tcn-panel,\\n  .tcn-h-panel,\\n  .tcn-v-panel,\\n  .tcn-sidebar-start[data-hierarchy],\\n  .tcn-sidebar-end[data-hierarchy] {\\n    border-radius: 0;\\n    background: #c0c0c0;\\n    color: #222222;\\n    border-bottom: 1px solid #808080;\\n    border-top: 1px solid #f5f5f5;\\n    border-right: 1px solid #808080;\\n    border-left: 1px solid #f5f5f5;\\n  }\\n\\n  .tcn-column:after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    bottom: var(--padding);\\n    top: var(--padding);\\n    right: 0;\\n    width: 0px;\\n    border-bottom: 1px solid #f5f5f5;\\n    border-top: 1px solid #808080;\\n    border-right: 1px solid #f5f5f5;\\n    border-left: 1px solid #808080;\\n  }\\n\\n  .tcn-column:last-child:after {\\n    display: none;\\n  }\\n\\n  .tcn-main[data-kind=\\\"panel\\\"],\\n  .tcn-sidebar-start[data-kind=\\\"panel\\\"],\\n  .tcn-sidebar-end[data-kind=\\\"panel\\\"] {\\n    padding: 0;\\n  }\\n\\n  /* Sidebar styles */\\n  .tcn-sidebar-start[data-hierarchy=\\\"tertiary\\\"],\\n  .tcn-sidebar-start[data-hierarchy=\\\"secondary\\\"] {\\n    background: #c0c0c0;\\n    color: #222222;\\n  }\\n\\n  .tcn-sidebar-start[data-kind=\\\"nav\\\"],\\n  .tcn-v-nav {\\n    background: #fff;\\n    padding: 2px;\\n    border-top: 1px solid #808080;\\n    border-bottom: 1px solid #f5f5f5;\\n    border-right: 1px solid #f5f5f5;\\n    border-left: 1px solid #808080;\\n  }\\n\\n  .tcn-sidebar-end[data-hierarchy=\\\"tertiary\\\"],\\n  .tcn-sidebar-end[data-hierarchy=\\\"secondary\\\"] {\\n    background: #c0c0c0;\\n    color: #222222;\\n  }\\n\\n  .tcn-sidebar-end[data-hierarchy=\\\"primary\\\"],\\n  .tcn-sidebar-start[data-hierarchy=\\\"primary\\\"] {\\n    background: #fff;\\n    color: #222222;\\n  }\\n\\n  /* Footer */\\n  .tcn-footer[data-kind=\\\"window\\\"] {\\n    padding: 4px;\\n    background: #c0c0c0;\\n    box-shadow:\\n      inset 1px 1px #808080,\\n      inset -1px -1px #f5f5f5,\\n      inset 2px 2px #c1c1c1,\\n      inset -2px -2px #c0c0c0;\\n    color: #222222;\\n  }\\n\\n  /* ===== WINDOWS AND POPOVERS ===== */\\n  .tcn-window,\\n  .tcn-date-picker-popover,\\n  .tcn-date-picker-year-selector,\\n  .tcn-menu,\\n  .tcn-suggestion-list {\\n    border-radius: 0;\\n    background: #c0c0c0;\\n    padding: 4px;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #f5f5f5,\\n      inset -2px -2px #808080,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  .tcn-suggestion-list-header {\\n    background: #c0c0c0;\\n  }\\n\\n  /* ===== DATE PICKER COMPONENTS ===== */\\n  .tcn-date-picker-box {\\n    background: #c0c0c0;\\n    padding: 0;\\n  }\\n\\n  .tcn-date-picker-date {\\n    box-shadow: none !important;\\n  }\\n\\n  .tcn-date-picker-year-button {\\n    box-shadow: none !important;\\n  }\\n\\n  .tcn-date-picker-header {\\n    height: 20px;\\n  }\\n\\n  .tcn-button.tcn-phone-number-input-select,\\n  .tcn-button.tcn-phone-number-input-select:hover {\\n    min-width: 0;\\n  }\\n\\n  .tcn-phone-number-input[data-has-phone-book=\\\"false\\\"] {\\n    border-end-end-radius: 0px;\\n    border-start-end-radius: 0px;\\n  }\\n\\n  .tcn-button.tcn-phone-number-input-phone-book {\\n    max-width: 23px !important;\\n    max-height: 23px !important;\\n    height: 23px !important;\\n    min-width: 23px !important;\\n    min-height: 23px !important;\\n  }\\n\\n  .tcn-button.tcn-date-picker-year-select {\\n    padding-inline-end: 20px;\\n  }\\n\\n  .tcn-button.tcn-date-picker-year-select:dir(ltr)::after {\\n    width: calc(12px * var(--scalar, 1));\\n    height: calc(12px * var(--scalar, 1));\\n    mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E\\\");\\n  }\\n\\n  .tcn-button.tcn-date-picker-year-select:dir(rtl)::after {\\n    width: calc(12px * var(--scalar, 1));\\n    height: calc(12px * var(--scalar, 1));\\n    mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E\\\");\\n  }\\n\\n  /* ===== TIME BOX ===== */\\n  .tcn-time-box {\\n    border-radius: 0;\\n    background: #fff;\\n    border: none;\\n    box-shadow:\\n      inset 1px 1px #808080,\\n      inset -1px -1px #f5f5f5,\\n      inset 2px 2px #c1c1c1,\\n      inset -2px -2px #c0c0c0;\\n  }\\n\\n  .tcn-time-box-title-container {\\n    min-height: 25px;\\n    height: 25px;\\n  }\\n\\n  /* ===== FORM COMPONENTS ===== */\\n  .tcn-field-set {\\n    padding: 8px 12px 12px 12px;\\n    margin-top: 10px;\\n    border-radius: 0;\\n    background: #c0c0c0;\\n    box-shadow:\\n      inset 1px 1px #808080,\\n      inset -1px -1px #f5f5f5,\\n      inset 2px 2px #f5f5f5,\\n      inset -2px -2px #808080;\\n  }\\n\\n  .tcn-field-set > .tcn-field-set-body {\\n    background: transparent;\\n    padding: 0;\\n    gap: 8px;\\n  }\\n\\n  .tcn-field-set > .tcn-field-set-legend {\\n    position: relative;\\n    top: -7px;\\n    left: -4px;\\n    height: 0;\\n  }\\n\\n  .tcn-field-set-legend-text {\\n    background: #c0c0c0;\\n    padding: 0;\\n    font-size: 12px;\\n  }\\n\\n  /* ===== CHIPS ===== */\\n  .tcn-chip {\\n    background: #c0c0c0;\\n    border-radius: 0;\\n    color: #222222;\\n    border: none;\\n    font-size: 12px;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  /* ===== CHECKBOXES ===== */\\n  .tcn-checkbox {\\n    outline: none;\\n    border-radius: 0;\\n    background: #fff;\\n    border: none;\\n    background-position: center;\\n    background-repeat: no-repeat;\\n    box-shadow:\\n      inset 1px 1px #808080,\\n      inset -1px -1px #f5f5f5,\\n      inset 2px 2px #c1c1c1,\\n      inset -2px -2px #c0c0c0;\\n  }\\n\\n  .tcn-checkbox:focus {\\n    outline: none;\\n  }\\n\\n  .tcn-checkbox[data-checked=\\\"true\\\"] {\\n    background-color: #fff;\\n    background-image: url(\\\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E\\\");\\n  }\\n\\n  .tcn-checkbox[data-is-disabled=\\\"false\\\"]:active {\\n    background-color: #fff;\\n    background-image: url(\\\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E\\\");\\n  }\\n\\n  .tcn-checkbox[data-is-disabled=\\\"true\\\"] {\\n    background-color: #c0c0c0;\\n  }\\n\\n  .tcn-checkbox[data-checked=\\\"true\\\"][data-is-disabled=\\\"true\\\"] {\\n    background-image: url(\\\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23707070' stroke-width='2'/%3E%3C/svg%3E\\\");\\n  }\\n\\n  /* ===== RADIO BUTTONS ===== */\\n  .tcn-radio,\\n  .tcn-radio[data-checked=\\\"true\\\"],\\n  .tcn-radio[checked=\\\"true\\\"] {\\n    width: 14px;\\n    height: 14px;\\n    min-width: 14px;\\n    min-height: 14px;\\n    border-inline-end: 1px solid #fff;\\n    border-inline-start: 1px solid #222;\\n    border-block-end: 1px solid #fff;\\n    border-block-start: 1px solid #222;\\n  }\\n\\n  .tcn-radio:focus {\\n    outline: none;\\n  }\\n\\n  .tcn-radio::before {\\n    content: \\\"\\\";\\n    background: transparent;\\n    position: absolute;\\n    border-radius: 50%;\\n    inset: 0;\\n    border-inline-end: 1px solid #dfdfdf;\\n    border-inline-start: 1px solid #808080;\\n    border-block-end: 1px solid #dfdfdf;\\n    border-block-start: 1px solid #808080;\\n  }\\n\\n  .tcn-radio[data-checked=\\\"true\\\"]::after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    top: 50%;\\n    left: 50%;\\n    transform: translate(-50%, -50%);\\n    width: 40%;\\n    height: 40%;\\n    background: #222;\\n    border-radius: 50%;\\n  }\\n\\n  /* ===== SWITCHES ===== */\\n  .tcn-switch:focus,\\n  .tcn-switch:focus-visible,\\n  .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"false\\\"],\\n  .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"true\\\"] {\\n    outline: none;\\n  }\\n\\n  .tcn-switch-wrapper {\\n    border-radius: 0;\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px grey,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #0a0a0a;\\n    border-color: #c0c0c0;\\n    background-color: #fff;\\n    transition: background-color 200ms ease-out;\\n    margin-top: 2px;\\n    margin-bottom: 3px;\\n  }\\n\\n  .tcn-switch-wrapper[data-is-checked=\\\"false\\\"] > .tcn-switch-icon {\\n    color: #222;\\n  }\\n\\n  .tcn-switch::after {\\n    content: \\\"\\\";\\n    cursor: pointer;\\n    position: absolute;\\n    top: 0;\\n    transition: transform 200ms ease-out;\\n    width: calc(16px * var(--scalar, 1));\\n    height: calc(16px * var(--scalar, 1));\\n    border-radius: 0;\\n    background-color: #c0c0c0;\\n    box-sizing: border-box;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  .tcn-switch-wrapper[data-is-checked=\\\"true\\\"][data-is-disabled=\\\"false\\\"] {\\n    background-color: var(--accent-color);\\n    border-color: #c0c0c0;\\n  }\\n\\n  .tcn-switch-wrapper[data-is-disabled=\\\"true\\\"] {\\n    background-color: #c0c0c0;\\n    border-color: #c0c0c0;\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px #999,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #7f7f7f;\\n  }\\n\\n  .tcn-switch[data-is-disabled=\\\"true\\\"]:after {\\n    box-shadow:\\n      inset -1px -1px #666666,\\n      inset 1px 1px #fff,\\n      inset -2px -2px #949494,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  .tcn-switch-wrapper[data-is-disabled=\\\"true\\\"] > .tcn-switch-icon {\\n    color: #707070;\\n  }\\n\\n  /* ===== SLIDERS ===== */\\n  .tcn-slider::-webkit-slider-runnable-track {\\n    border-radius: 0;\\n    height: 5px;\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px grey,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #0a0a0a;\\n  }\\n\\n  .tcn-slider::-webkit-slider-runnable-track[data-is-disabled=\\\"true\\\"] {\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px #999,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #717171;\\n  }\\n\\n  .tcn-slider::-webkit-slider-thumb {\\n    outline: none;\\n    width: calc(12px * var(--scalar, 1));\\n    height: calc(16px * var(--scalar, 1));\\n    border-radius: 0;\\n    border: none;\\n    background-color: #c0c0c0;\\n    box-sizing: border-box;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  .tcn-slider[data-is-disabled=\\\"false\\\"]:active::-webkit-slider-thumb {\\n    background-color: #c0c0c0;\\n  }\\n\\n  .tcn-slider[data-is-disabled=\\\"true\\\"]::-webkit-slider-thumb {\\n    box-shadow:\\n      inset -1px -1px #717171,\\n      inset 1px 1px #fff,\\n      inset -2px -2px #999,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  /* Mozilla slider styles */\\n  .tcn-slider::-moz-range-track {\\n    border-radius: 0;\\n    height: 5px;\\n    border: none;\\n    background: #c0c0c0;\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px grey,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #0a0a0a;\\n  }\\n\\n  .tcn-slider::-moz-range-track[data-is-disabled=\\\"true\\\"] {\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px #999,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #717171;\\n  }\\n\\n  .tcn-slider::-moz-range-thumb {\\n    outline: none;\\n    width: calc(12px * var(--scalar, 1));\\n    height: calc(16px * var(--scalar, 1));\\n    border-radius: 0;\\n    border: none;\\n    background-color: #c0c0c0;\\n    box-sizing: border-box;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n    cursor: pointer;\\n  }\\n\\n  .tcn-slider[data-is-disabled=\\\"false\\\"]:active::-moz-range-thumb,\\n  .tcn-slider[data-is-disabled=\\\"false\\\"]:focus::-moz-range-thumb {\\n    background-color: #c0c0c0;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n    outline: none;\\n  }\\n\\n  .tcn-slider[data-is-disabled=\\\"true\\\"]::-moz-range-thumb {\\n    box-shadow:\\n      inset -1px -1px #717171,\\n      inset 1px 1px #fff,\\n      inset -2px -2px #999,\\n      inset 2px 2px #c0c0c0;\\n    cursor: not-allowed;\\n  }\\n\\n  .tcn-nav-item,\\n  .tcn-nav-item[data-is-selected],\\n  .tcn-menu-item {\\n    border-radius: 0;\\n    font-size: 12px;\\n  }\\n\\n  .tcn-nav-item,\\n  .tcn-menu-item .tcn-body-text {\\n    font-size: 12px;\\n  }\\n\\n  .tcn-main[data-hierarchy=\\\"primary\\\"] {\\n    background: #c0c0c0;\\n    padding: 0px;\\n  }\\n\\n  .tcn-main[data-hierarchy=\\\"secondary\\\"] {\\n    background: #c0c0c0;\\n    padding: 0px;\\n  }\\n\\n  .tcn-main[data-hierarchy=\\\"tertiary\\\"] {\\n    background: #c0c0c0;\\n    padding: 0px;\\n  }\\n\\n  .tcn-h-nav {\\n    border: none;\\n  }\\n\\n  .tcn-h-nav:after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    left: 0;\\n    right: 0;\\n    bottom: 0;\\n    height: 0px;\\n    border-bottom: 1px solid #f5f5f5;\\n    border-top: 1px solid #808080;\\n    border-right: 1px solid #f5f5f5;\\n    border-left: 1px solid #808080;\\n  }\\n\\n  .tcn-footer {\\n    border: none;\\n  }\\n\\n  .tcn-footer:after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    left: 0;\\n    right: 0;\\n    top: 0;\\n    height: 0px;\\n    border-bottom: 1px solid #f5f5f5;\\n    border-top: 1px solid #808080;\\n    border-right: 1px solid #f5f5f5;\\n    border-left: 1px solid #808080;\\n  }\\n}\\n\"","import css from './windows_98.css?raw';\n\nexport const windows98StyleSheet = new CSSStyleSheet();\nwindows98StyleSheet.replaceSync(css);\n"],"names":["css","windows98StyleSheet"],"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,GCEFC,IAAsB,IAAI,cAAA;AACvCA,EAAoB,YAAYD,CAAG;"}
+{"version":3,"file":"windows_98_theme.js","sources":["../../../../src/themes/themes/windows_98/windows_98.css?raw","../../../../src/themes/themes/windows_98/windows_98_theme.ts"],"sourcesContent":["export default \"@layer tcn-theme {\\n  /* ===== CSS VARIABLES ===== */\\n  :root {\\n    --scalar: 1;\\n    --gap-small: 2px;\\n    --gap-medium: 4px;\\n    --gap-large: 8px;\\n\\n    --padding-small: 2px;\\n    --padding-medium: 4px;\\n    --padding-large: 8px;\\n\\n    --status-color-disabled: #7f7f7f;\\n    --status-color-info: #000080;\\n    --status-color-warning: #000080;\\n    --status-color-error: #be0000;\\n\\n    --async-color-initial: #c0c0c0;\\n    --async-color-pending: #000080;\\n    --async-color-success: #00ff00;\\n    --async-color-failed: #be0000;\\n\\n    --primary-color-faint: #c0c0c0;\\n    --primary-color: #000080;\\n    --primary-color-strong: #000080;\\n\\n    --secondary-color-faint: #c0c0c0;\\n    --secondary-color: #000080;\\n    --secondary-color-strong: #000080;\\n\\n    --tertiary-color-faint: #c0c0c0;\\n    --tertiary-color: #000080;\\n    --tertiary-color-strong: #000080;\\n\\n    --quaternary-color-faint: #c0c0c0;\\n    --quaternary-color: #000080;\\n    --quaternary-color-strong: #000080;\\n\\n    --background-color-primary: #c0c0c0;\\n    --background-color-secondary: #c0c0c0;\\n    --background-color-tertiary: #c0c0c0;\\n    --background-color-quaternary: #c0c0c0;\\n\\n    --foreground-color-primary: #222222;\\n    --foreground-color-secondary: #222222;\\n    --foreground-color-tertiary: #222222;\\n    --foreground-color-quaternary: #222222;\\n\\n    --accent-color: #000080;\\n\\n    --font-color: #222222;\\n    --font-family: \\\"Microsoft Sans Serif\\\", \\\"Arial\\\", sans-serif;\\n    --font-size: 12px;\\n  }\\n\\n  .tcn-theme-root {\\n    font-family: var(--font-family);\\n    color: var(--font-color);\\n    -webkit-font-smoothing: none;\\n    background-color: var(--background-color-primary);\\n  }\\n\\n  /* ===== TYPOGRAPHY ===== */\\n  .tcn-title[data-size=\\\"sm\\\"] {\\n    font-size: 10px;\\n  }\\n  .tcn-title[data-size=\\\"md\\\"] {\\n    font-size: 12px;\\n  }\\n  .tcn-title[data-size=\\\"lg\\\"] {\\n    font-size: 14px;\\n  }\\n\\n  .tcn-body-text[data-size=\\\"sm\\\"] {\\n    font-size: 10px;\\n  }\\n  .tcn-body-text[data-size=\\\"md\\\"] {\\n    font-size: 11px;\\n  }\\n  .tcn-body-text[data-size=\\\"lg\\\"] {\\n    font-size: 12px;\\n  }\\n\\n  .tcn-button-text {\\n    position: relative;\\n    opacity: 1;\\n    font-size: 12px !important;\\n  }\\n\\n  /* ===== BUTTONS ===== */\\n  /* Base button styles */\\n  .tcn-base-button,\\n  .tcn-button,\\n  .tcn-button[data-hierarchy=\\\"primary\\\"],\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"],\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:hover,\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"]:hover {\\n    background: silver;\\n    border: none;\\n    border-radius: 0;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n    box-sizing: border-box;\\n    color: #222;\\n    min-height: 23px;\\n    min-width: 0;\\n    padding: 0 12px;\\n    font-size: 12px;\\n    text-decoration: none;\\n    outline: none;\\n  }\\n\\n  .tcn-button[data-is-disabled=\\\"true\\\"] {\\n    text-shadow: 1px 1px 0 #fff;\\n  }\\n\\n  /* Button content positioning */\\n  .tcn-button[data-hierarchy=\\\"primary\\\"] > *,\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"] > * {\\n    position: relative;\\n  }\\n\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:active > *,\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"]:active > * {\\n    position: relative;\\n    top: 0;\\n    left: 1px;\\n  }\\n\\n  /* Button focus states */\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:focus:not(:active)::before,\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"]:focus:not(:active)::before {\\n    content: \\\"\\\";\\n    position: absolute;\\n    top: 1px;\\n    bottom: 2px;\\n    left: 1px;\\n    right: 2px;\\n    outline: 1px dotted #222;\\n    outline-offset: -3px;\\n  }\\n\\n  /* Primary button specific styles */\\n  .tcn-button[data-hierarchy=\\\"primary\\\"],\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:hover {\\n    box-shadow:\\n      inset -2px -2px #0a0a0a,\\n      inset 1px 1px #0a0a0a,\\n      inset -3px -3px grey,\\n      inset 2px 2px #fff,\\n      inset 3px 3px #c0c0c0;\\n  }\\n\\n  /* Active states */\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:active,\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"]:active {\\n    background: silver;\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px #0a0a0a,\\n      inset -2px -2px #c0c0c0,\\n      inset 2px 2px grey;\\n    color: #222;\\n    border: none;\\n    text-decoration: none;\\n  }\\n\\n  /* Focus states */\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:focus,\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"]:focus,\\n  .tcn-button[data-hierarchy=\\\"primary\\\"]:focus:not(:active),\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"]:focus:not(:active) {\\n    background: silver;\\n    border: none;\\n    text-decoration: none;\\n  }\\n\\n  /* Tertiary button styles */\\n  .tcn-button[data-hierarchy=\\\"tertiary\\\"] {\\n    padding: 0 4px;\\n    background: none;\\n    border: none;\\n    border-radius: 0;\\n    box-shadow: none;\\n    box-sizing: border-box;\\n    color: #000080;\\n    min-height: auto;\\n    min-width: auto;\\n    text-decoration: none;\\n  }\\n\\n  .tcn-button[data-hierarchy=\\\"tertiary\\\"]:hover {\\n    background: none;\\n    border: none;\\n    border-radius: 0;\\n    box-shadow: none;\\n    box-sizing: border-box;\\n    color: #000080;\\n    min-height: auto;\\n    min-width: auto;\\n    text-decoration: none;\\n  }\\n\\n  .tcn-button[data-hierarchy=\\\"tertiary\\\"]:active {\\n    background: none;\\n    border: none;\\n    border-radius: 0;\\n    box-shadow: none;\\n    box-sizing: border-box;\\n    color: rgba(0, 0, 128, 0.6);\\n    min-height: auto;\\n    min-width: auto;\\n    text-decoration: none;\\n  }\\n\\n  .tcn-button[data-hierarchy=\\\"tertiary\\\"]:focus,\\n  .tcn-button[data-hierarchy=\\\"tertiary\\\"]:focus:not(:active) {\\n    background: none;\\n    outline: 1px dotted #000080;\\n    outline-offset: 0;\\n    border: none;\\n    text-decoration: none;\\n  }\\n\\n  /* Disabled states */\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n    box-shadow:\\n      inset -1px -1px #717171,\\n      inset 1px 1px #fff,\\n      inset -2px -2px #999,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  .tcn-button[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n    box-shadow:\\n      inset -2px -2px #717171,\\n      inset 1px 1px #717171,\\n      inset -3px -3px #999,\\n      inset 2px 2px #fff,\\n      inset 3px 3px #c0c0c0;\\n  }\\n\\n  .tcn-button[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"],\\n  .tcn-button[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"],\\n  .tcn-button[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n    color: #7f7f7f;\\n    cursor: not-allowed;\\n  }\\n\\n  /* Select button styles */\\n  .tcn-button.select,\\n  .tcn-button.select:hover {\\n    position: relative;\\n    padding-inline-end: 20px;\\n    padding-inline-start: 4px;\\n  }\\n\\n  .tcn-button.select:dir(ltr)::after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    right: calc(4px * var(--scalar, 1));\\n    top: 50%;\\n    transform: translateY(-50%);\\n    width: calc(12px * var(--scalar, 1));\\n    height: calc(12px * var(--scalar, 1));\\n    background-color: currentColor;\\n    mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E\\\");\\n    mask-repeat: no-repeat;\\n    mask-position: center;\\n    mask-size: contain;\\n    pointer-events: none;\\n  }\\n\\n  .tcn-button.select:dir(rtl)::after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    left: calc(4px * var(--scalar, 1));\\n    top: 50%;\\n    transform: translateY(-50%);\\n    width: calc(12px * var(--scalar, 1));\\n    height: calc(12px * var(--scalar, 1));\\n    background-color: #222;\\n    mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E\\\");\\n    mask-repeat: no-repeat;\\n    mask-position: center;\\n    mask-size: contain;\\n    pointer-events: none;\\n  }\\n\\n  /* Slim button styles */\\n  .tcn-slim-button,\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"]:hover,\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"]:hover {\\n    padding: 2px;\\n    min-width: 0;\\n    min-height: 0;\\n    height: auto;\\n    width: auto;\\n  }\\n\\n  .tcn-slim-button[data-size=\\\"sm\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"sm\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"sm\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"sm\\\"]:hover,\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"sm\\\"]:hover {\\n    padding: 1px;\\n  }\\n\\n  .tcn-slim-button[data-size=\\\"md\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"md\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"md\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"md\\\"]:hover,\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"md\\\"]:hover {\\n    padding: 2px;\\n  }\\n\\n  .tcn-slim-button[data-size=\\\"lg\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"lg\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"lg\\\"],\\n  .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"lg\\\"]:hover,\\n  .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"lg\\\"]:hover {\\n    padding: 4px;\\n  }\\n\\n  /* Select group styles */\\n  .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"],\\n  .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:hover,\\n  .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:focus {\\n    background-color: #000080;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n    color: #fff;\\n  }\\n\\n  .tcn-select-group .tcn-button:hover,\\n  .tcn-select-group .tcn-button:focus,\\n  .tcn-button-group .tcn-button:hover,\\n  .tcn-button-group .tcn-button:focus {\\n    z-index: 1;\\n  }\\n\\n  /* ===== INPUT FIELDS ===== */\\n  .tcn-input,\\n  .tcn-textarea,\\n  .tcn-suggestion-list-search-input,\\n  .tcn-multi-combo-box-values-container,\\n  .tcn-multiselect-values-container {\\n    border-radius: 0;\\n    outline: none;\\n    border: none;\\n    background-color: #fff;\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px grey,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #0a0a0a;\\n    box-sizing: border-box;\\n    padding: 3px 4px;\\n  }\\n\\n  .tcn-suggestion-list-search-input {\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px grey,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #0a0a0a,\\n      0px -2px 0px 2px #c0c0c0;\\n  }\\n\\n  .tcn-input,\\n  .tcn-textarea,\\n  .tcn-suggestion-list-search-input {\\n    height: 23px;\\n  }\\n\\n  .tcn-input:is(:focus, :focus-visible, :active, :hover),\\n  .tcn-input:is(:focus, :focus-visible, :active, :hover)[data-is-disabled=\\\"false\\\"],\\n  .tcn-textarea:is(:focus, :focus-visible, :active, :hover),\\n  .tcn-textarea:is(:focus, :focus-visible, :active, :hover)[data-is-disabled=\\\"false\\\"] {\\n    outline: none;\\n    border: none;\\n  }\\n\\n  .tcn-input[data-is-disabled=\\\"true\\\"],\\n  .tcn-textarea[data-is-disabled=\\\"true\\\"],\\n  .tcn-suggestion-list-search-input[data-is-disabled=\\\"true\\\"],\\n  .tcn-multiselect-values-container[data-is-disabled=\\\"true\\\"] {\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px #999,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #717171;\\n  }\\n\\n  .tcn-input[data-is-disabled=\\\"true\\\"],\\n  .tcn-textarea[data-is-disabled=\\\"true\\\"],\\n  .tcn-suggestion-list-search-input[data-is-disabled=\\\"true\\\"],\\n  .tcn-multiselect-values-container[data-is-disabled=\\\"true\\\"],\\n  .tcn-input[data-is-disabled=\\\"true\\\"]::placeholder,\\n  .tcn-textarea[data-is-disabled=\\\"true\\\"]::placeholder,\\n  .tcn-suggestion-list-search-input[data-is-disabled=\\\"true\\\"]::placeholder,\\n  .tcn-multiselect-values-container[data-is-disabled=\\\"true\\\"]::placeholder {\\n    color: #7f7f7f;\\n    cursor: not-allowed;\\n    background-color: #c0c0c0;\\n  }\\n\\n  /* Select group active and focus states */\\n  .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:active {\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px #0a0a0a,\\n      inset -2px -2px #c0c0c0,\\n      inset 2px 2px grey;\\n    color: #fff;\\n  }\\n\\n  .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:focus:not(:active)::before {\\n    outline: 1px dotted #fcfcfc;\\n  }\\n\\n  /* ===== SUGGESTION LISTS ===== */\\n  .tcn-suggestion-list {\\n    padding: 2px;\\n  }\\n\\n  .tcn-suggestion-item {\\n    padding: 0;\\n    background: transparent;\\n    border: none;\\n    min-height: 0;\\n  }\\n\\n  .tcn-suggestion-item:hover {\\n    background: #000080;\\n    color: #fff;\\n  }\\n\\n  .tcn-suggestion-item[data-is-selected=\\\"true\\\"],\\n  .tcn-suggestion-item[data-is-focused=\\\"true\\\"] {\\n    padding: 0;\\n    background: #000080;\\n    color: #fff;\\n    border: none;\\n  }\\n\\n  .tcn-suggestion-list-search-input {\\n    border-radius: 0;\\n    padding: 4px;\\n    height: 24px;\\n    min-height: 24px;\\n  }\\n\\n  /* ===== LAYOUT COMPONENTS ===== */\\n\\n  .tcn-title {\\n    color: black;\\n  }\\n\\n  .header .tcn-title {\\n    color: #fff;\\n  }\\n  /* Headers */\\n  .header[data-kind=\\\"window\\\"] {\\n    padding: 4px;\\n    background: linear-gradient(90deg, #000080, #1084d0);\\n    border: none;\\n    color: #fff;\\n  }\\n\\n  .header[data-kind=\\\"window\\\"] > .tcn-button {\\n    color: #222;\\n  }\\n\\n  .header[data-kind=\\\"toolbar\\\"],\\n  .header[data-kind=\\\"app\\\"],\\n  .header[data-kind=\\\"nav\\\"] {\\n    padding: 4px 0;\\n    background: #c0c0c0;\\n    color: #222222;\\n    border-bottom: 1px solid #808080;\\n    border-top: 1px solid #f5f5f5;\\n    border-right: 1px solid #808080;\\n    border-left: 1px solid #f5f5f5;\\n    padding-inline-start: 4px;\\n  }\\n\\n  .header[data-kind=\\\"panel\\\"] {\\n    padding: 4px;\\n    background: linear-gradient(90deg, #7c7c7c, #aeaeae);\\n    border: none;\\n    color: #fff;\\n  }\\n\\n  /* Main content areas */\\n  .tcn-main[data-kind=\\\"window\\\"],\\n  .tcn-main[data-kind=\\\"app\\\"],\\n  .tcn-main[data-kind=\\\"nav\\\"],\\n  .tcn-main[data-kind=\\\"toolbar\\\"],\\n  .tcn-main[data-kind=\\\"section\\\"],\\n  .tcn-main[data-kind=\\\"panel\\\"],\\n  .tcn-main[data-kind=\\\"panel\\\"],\\n  .tcn-main[data-kind=\\\"drawer\\\"],\\n  .tcn-main[data-kind=\\\"card\\\"],\\n  .tcn-panel,\\n  .tcn-h-panel,\\n  .tcn-v-panel,\\n  .tcn-sidebar-start[data-hierarchy],\\n  .tcn-sidebar-end[data-hierarchy] {\\n    border-radius: 0;\\n    background: #c0c0c0;\\n    color: #222222;\\n    border-bottom: 1px solid #808080;\\n    border-top: 1px solid #f5f5f5;\\n    border-right: 1px solid #808080;\\n    border-left: 1px solid #f5f5f5;\\n  }\\n\\n  .tcn-column:after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    bottom: var(--padding);\\n    top: var(--padding);\\n    right: 0;\\n    width: 0px;\\n    border-bottom: 1px solid #f5f5f5;\\n    border-top: 1px solid #808080;\\n    border-right: 1px solid #f5f5f5;\\n    border-left: 1px solid #808080;\\n  }\\n\\n  .tcn-column:last-child:after {\\n    display: none;\\n  }\\n\\n  .tcn-main[data-kind=\\\"panel\\\"],\\n  .tcn-sidebar-start[data-kind=\\\"panel\\\"],\\n  .tcn-sidebar-end[data-kind=\\\"panel\\\"] {\\n    padding: 0;\\n  }\\n\\n  /* Sidebar styles */\\n  .tcn-sidebar-start[data-hierarchy=\\\"tertiary\\\"],\\n  .tcn-sidebar-start[data-hierarchy=\\\"secondary\\\"] {\\n    background: #c0c0c0;\\n    color: #222222;\\n  }\\n\\n  .tcn-sidebar-start[data-kind=\\\"nav\\\"],\\n  .tcn-v-nav {\\n    background: #fff;\\n    padding: 2px;\\n    border-top: 1px solid #808080;\\n    border-bottom: 1px solid #f5f5f5;\\n    border-right: 1px solid #f5f5f5;\\n    border-left: 1px solid #808080;\\n  }\\n\\n  .tcn-sidebar-end[data-hierarchy=\\\"tertiary\\\"],\\n  .tcn-sidebar-end[data-hierarchy=\\\"secondary\\\"] {\\n    background: #c0c0c0;\\n    color: #222222;\\n  }\\n\\n  .tcn-sidebar-end[data-hierarchy=\\\"primary\\\"],\\n  .tcn-sidebar-start[data-hierarchy=\\\"primary\\\"] {\\n    background: #fff;\\n    color: #222222;\\n  }\\n\\n  /* Footer */\\n  .tcn-footer[data-kind=\\\"window\\\"] {\\n    padding: 4px;\\n    background: #c0c0c0;\\n    box-shadow:\\n      inset 1px 1px #808080,\\n      inset -1px -1px #f5f5f5,\\n      inset 2px 2px #c1c1c1,\\n      inset -2px -2px #c0c0c0;\\n    color: #222222;\\n  }\\n\\n  /* ===== WINDOWS AND POPOVERS ===== */\\n  .tcn-window,\\n  .tcn-date-picker-popover,\\n  .tcn-date-picker-year-selector,\\n  .tcn-menu,\\n  .tcn-suggestion-list {\\n    border-radius: 0;\\n    background: #c0c0c0;\\n    padding: 4px;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #f5f5f5,\\n      inset -2px -2px #808080,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  .tcn-suggestion-list-header {\\n    background: #c0c0c0;\\n  }\\n\\n  /* ===== DATE PICKER COMPONENTS ===== */\\n  .tcn-date-picker-box {\\n    background: #c0c0c0;\\n    padding: 0;\\n  }\\n\\n  .tcn-date-picker-date {\\n    box-shadow: none !important;\\n  }\\n\\n  .tcn-date-picker-year-button {\\n    box-shadow: none !important;\\n  }\\n\\n  .tcn-date-picker-header {\\n    height: 20px;\\n  }\\n\\n  .tcn-button.tcn-phone-number-input-select,\\n  .tcn-button.tcn-phone-number-input-select:hover {\\n    min-width: 0;\\n  }\\n\\n  .tcn-phone-number-input[data-has-phone-book=\\\"false\\\"] {\\n    border-end-end-radius: 0px;\\n    border-start-end-radius: 0px;\\n  }\\n\\n  .tcn-button.tcn-phone-number-input-phone-book {\\n    max-width: 23px !important;\\n    max-height: 23px !important;\\n    height: 23px !important;\\n    min-width: 23px !important;\\n    min-height: 23px !important;\\n  }\\n\\n  .tcn-button.tcn-date-picker-year-select {\\n    padding-inline-end: 20px;\\n  }\\n\\n  .tcn-button.tcn-date-picker-year-select:dir(ltr)::after {\\n    width: calc(12px * var(--scalar, 1));\\n    height: calc(12px * var(--scalar, 1));\\n    mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E\\\");\\n  }\\n\\n  .tcn-button.tcn-date-picker-year-select:dir(rtl)::after {\\n    width: calc(12px * var(--scalar, 1));\\n    height: calc(12px * var(--scalar, 1));\\n    mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E\\\");\\n  }\\n\\n  /* ===== TIME BOX ===== */\\n  .tcn-time-box {\\n    border-radius: 0;\\n    background: #fff;\\n    border: none;\\n    box-shadow:\\n      inset 1px 1px #808080,\\n      inset -1px -1px #f5f5f5,\\n      inset 2px 2px #c1c1c1,\\n      inset -2px -2px #c0c0c0;\\n  }\\n\\n  .tcn-time-box-title-container {\\n    min-height: 25px;\\n    height: 25px;\\n  }\\n\\n  /* ===== FORM COMPONENTS ===== */\\n  .tcn-field-set {\\n    padding: 8px 12px 12px 12px;\\n    margin-top: 10px;\\n    border-radius: 0;\\n    background: #c0c0c0;\\n    box-shadow:\\n      inset 1px 1px #808080,\\n      inset -1px -1px #f5f5f5,\\n      inset 2px 2px #f5f5f5,\\n      inset -2px -2px #808080;\\n  }\\n\\n  .tcn-field-set > .tcn-field-set-body {\\n    background: transparent;\\n    padding: 0;\\n    gap: 8px;\\n  }\\n\\n  .tcn-field-set > .tcn-field-set-legend {\\n    position: relative;\\n    top: -7px;\\n    left: -4px;\\n    height: 0;\\n  }\\n\\n  .tcn-field-set-legend-text {\\n    background: #c0c0c0;\\n    padding: 0;\\n    font-size: 12px;\\n  }\\n\\n  /* ===== CHIPS ===== */\\n  .tcn-chip {\\n    background: #c0c0c0;\\n    border-radius: 0;\\n    color: #222222;\\n    border: none;\\n    font-size: 12px;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  /* ===== CHECKBOXES ===== */\\n  .tcn-checkbox {\\n    outline: none;\\n    border-radius: 0;\\n    background: #fff;\\n    border: none;\\n    background-position: center;\\n    background-repeat: no-repeat;\\n    box-shadow:\\n      inset 1px 1px #808080,\\n      inset -1px -1px #f5f5f5,\\n      inset 2px 2px #c1c1c1,\\n      inset -2px -2px #c0c0c0;\\n  }\\n\\n  .tcn-checkbox:focus {\\n    outline: none;\\n  }\\n\\n  .tcn-checkbox[data-checked=\\\"true\\\"] {\\n    background-color: #fff;\\n    background-image: url(\\\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E\\\");\\n  }\\n\\n  .tcn-checkbox[data-is-disabled=\\\"false\\\"]:active {\\n    background-color: #fff;\\n    background-image: url(\\\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E\\\");\\n  }\\n\\n  .tcn-checkbox[data-is-disabled=\\\"true\\\"] {\\n    background-color: #c0c0c0;\\n  }\\n\\n  .tcn-checkbox[data-checked=\\\"true\\\"][data-is-disabled=\\\"true\\\"] {\\n    background-image: url(\\\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23707070' stroke-width='2'/%3E%3C/svg%3E\\\");\\n  }\\n\\n  /* ===== RADIO BUTTONS ===== */\\n  .tcn-radio,\\n  .tcn-radio[data-checked=\\\"true\\\"],\\n  .tcn-radio[checked=\\\"true\\\"] {\\n    width: 14px;\\n    height: 14px;\\n    min-width: 14px;\\n    min-height: 14px;\\n    border-inline-end: 1px solid #fff;\\n    border-inline-start: 1px solid #222;\\n    border-block-end: 1px solid #fff;\\n    border-block-start: 1px solid #222;\\n  }\\n\\n  .tcn-radio:focus {\\n    outline: none;\\n  }\\n\\n  .tcn-radio::before {\\n    content: \\\"\\\";\\n    background: transparent;\\n    position: absolute;\\n    border-radius: 50%;\\n    inset: 0;\\n    border-inline-end: 1px solid #dfdfdf;\\n    border-inline-start: 1px solid #808080;\\n    border-block-end: 1px solid #dfdfdf;\\n    border-block-start: 1px solid #808080;\\n  }\\n\\n  .tcn-radio[data-checked=\\\"true\\\"]::after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    top: 50%;\\n    left: 50%;\\n    transform: translate(-50%, -50%);\\n    width: 40%;\\n    height: 40%;\\n    background: #222;\\n    border-radius: 50%;\\n  }\\n\\n  /* ===== SWITCHES ===== */\\n  .tcn-switch:focus,\\n  .tcn-switch:focus-visible,\\n  .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"false\\\"],\\n  .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"true\\\"] {\\n    outline: none;\\n  }\\n\\n  .tcn-switch-wrapper {\\n    border-radius: 0;\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px grey,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #0a0a0a;\\n    border-color: #c0c0c0;\\n    background-color: #fff;\\n    transition: background-color 200ms ease-out;\\n    margin-top: 2px;\\n    margin-bottom: 3px;\\n  }\\n\\n  .tcn-switch-wrapper[data-is-checked=\\\"false\\\"] > .tcn-switch-icon {\\n    color: #222;\\n  }\\n\\n  .tcn-switch::after {\\n    content: \\\"\\\";\\n    cursor: pointer;\\n    position: absolute;\\n    top: 0;\\n    transition: transform 200ms ease-out;\\n    width: calc(16px * var(--scalar, 1));\\n    height: calc(16px * var(--scalar, 1));\\n    border-radius: 0;\\n    background-color: #c0c0c0;\\n    box-sizing: border-box;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  .tcn-switch-wrapper[data-is-checked=\\\"true\\\"][data-is-disabled=\\\"false\\\"] {\\n    background-color: var(--accent-color);\\n    border-color: #c0c0c0;\\n  }\\n\\n  .tcn-switch-wrapper[data-is-disabled=\\\"true\\\"] {\\n    background-color: #c0c0c0;\\n    border-color: #c0c0c0;\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px #999,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #7f7f7f;\\n  }\\n\\n  .tcn-switch[data-is-disabled=\\\"true\\\"]:after {\\n    box-shadow:\\n      inset -1px -1px #666666,\\n      inset 1px 1px #fff,\\n      inset -2px -2px #949494,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  .tcn-switch-wrapper[data-is-disabled=\\\"true\\\"] > .tcn-switch-icon {\\n    color: #707070;\\n  }\\n\\n  /* ===== SLIDERS ===== */\\n  .tcn-slider::-webkit-slider-runnable-track {\\n    border-radius: 0;\\n    height: 5px;\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px grey,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #0a0a0a;\\n  }\\n\\n  .tcn-slider::-webkit-slider-runnable-track[data-is-disabled=\\\"true\\\"] {\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px #999,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #717171;\\n  }\\n\\n  .tcn-slider::-webkit-slider-thumb {\\n    outline: none;\\n    width: calc(12px * var(--scalar, 1));\\n    height: calc(16px * var(--scalar, 1));\\n    border-radius: 0;\\n    border: none;\\n    background-color: #c0c0c0;\\n    box-sizing: border-box;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  .tcn-slider[data-is-disabled=\\\"false\\\"]:active::-webkit-slider-thumb {\\n    background-color: #c0c0c0;\\n  }\\n\\n  .tcn-slider[data-is-disabled=\\\"true\\\"]::-webkit-slider-thumb {\\n    box-shadow:\\n      inset -1px -1px #717171,\\n      inset 1px 1px #fff,\\n      inset -2px -2px #999,\\n      inset 2px 2px #c0c0c0;\\n  }\\n\\n  /* Mozilla slider styles */\\n  .tcn-slider::-moz-range-track {\\n    border-radius: 0;\\n    height: 5px;\\n    border: none;\\n    background: #c0c0c0;\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px grey,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #0a0a0a;\\n  }\\n\\n  .tcn-slider::-moz-range-track[data-is-disabled=\\\"true\\\"] {\\n    box-shadow:\\n      inset -1px -1px #fff,\\n      inset 1px 1px #999,\\n      inset -2px -2px #dfdfdf,\\n      inset 2px 2px #717171;\\n  }\\n\\n  .tcn-slider::-moz-range-thumb {\\n    outline: none;\\n    width: calc(12px * var(--scalar, 1));\\n    height: calc(16px * var(--scalar, 1));\\n    border-radius: 0;\\n    border: none;\\n    background-color: #c0c0c0;\\n    box-sizing: border-box;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n    cursor: pointer;\\n  }\\n\\n  .tcn-slider[data-is-disabled=\\\"false\\\"]:active::-moz-range-thumb,\\n  .tcn-slider[data-is-disabled=\\\"false\\\"]:focus::-moz-range-thumb {\\n    background-color: #c0c0c0;\\n    box-shadow:\\n      inset -1px -1px #0a0a0a,\\n      inset 1px 1px #fff,\\n      inset -2px -2px grey,\\n      inset 2px 2px #c0c0c0;\\n    outline: none;\\n  }\\n\\n  .tcn-slider[data-is-disabled=\\\"true\\\"]::-moz-range-thumb {\\n    box-shadow:\\n      inset -1px -1px #717171,\\n      inset 1px 1px #fff,\\n      inset -2px -2px #999,\\n      inset 2px 2px #c0c0c0;\\n    cursor: not-allowed;\\n  }\\n\\n  .tcn-nav-item,\\n  .tcn-nav-item[data-is-selected],\\n  .tcn-menu-item {\\n    border-radius: 0;\\n    font-size: 12px;\\n  }\\n\\n  .tcn-nav-item,\\n  .tcn-menu-item .tcn-body-text {\\n    font-size: 12px;\\n  }\\n\\n  .tcn-main[data-hierarchy=\\\"primary\\\"] {\\n    background: #c0c0c0;\\n    padding: 0px;\\n  }\\n\\n  .tcn-main[data-hierarchy=\\\"secondary\\\"] {\\n    background: #c0c0c0;\\n    padding: 0px;\\n  }\\n\\n  .tcn-main[data-hierarchy=\\\"tertiary\\\"] {\\n    background: #c0c0c0;\\n    padding: 0px;\\n  }\\n\\n  .tcn-h-nav {\\n    border: none;\\n  }\\n\\n  .tcn-h-nav:after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    left: 0;\\n    right: 0;\\n    bottom: 0;\\n    height: 0px;\\n    border-bottom: 1px solid #f5f5f5;\\n    border-top: 1px solid #808080;\\n    border-right: 1px solid #f5f5f5;\\n    border-left: 1px solid #808080;\\n  }\\n\\n  .tcn-footer {\\n    border: none;\\n  }\\n\\n  .tcn-footer:after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    left: 0;\\n    right: 0;\\n    top: 0;\\n    height: 0px;\\n    border-bottom: 1px solid #f5f5f5;\\n    border-top: 1px solid #808080;\\n    border-right: 1px solid #f5f5f5;\\n    border-left: 1px solid #808080;\\n  }\\n}\\n\\n/* ===== TABS ===== */\\n\\n.tcn-tabs-list {\\n  display: flex;\\n  list-style-type: none;\\n  margin: 0 0 -2px;\\n  padding-left: 3px;\\n  position: relative;\\n  text-indent: 0;\\n\\n  .tcn-tab-item {\\n    border-top-left-radius: 3px;\\n    border-top-right-radius: 3px;\\n    box-shadow:\\n      inset -1px 0 #0a0a0a,\\n      inset 1px 1px #dfdfdf,\\n      inset -2px 0 grey,\\n      inset 2px 2px #fff;\\n  }\\n\\n  .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n    background-color: silver;\\n    margin-left: -3px;\\n    margin-top: -2px;\\n    padding-bottom: 2px;\\n    position: relative;\\n    z-index: 8;\\n  }\\n}\\n\"","import css from './windows_98.css?raw';\n\nexport const windows98StyleSheet = new CSSStyleSheet();\nwindows98StyleSheet.replaceSync(css);\n"],"names":["css","windows98StyleSheet"],"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,GCEFC,IAAsB,IAAI,cAAA;AACvCA,EAAoB,YAAYD,CAAG;"}

package/dist/tokens/bubble/bubble.js

@@ -1,45 +1,52 @@
-import { jsx as m } from "react/jsx-runtime";
-import { clsx as s } from "clsx";
-import u from "react";
-import { theme as f } from "../../themes/theme_variables.js";
+import { jsx as c } from "react/jsx-runtime";
+import { clsx as n } from "clsx";
+import s from "react";
+import { theme as u } from "../../themes/theme_variables.js";
+import "../../stacks/box/box.js";
+import "../../stacks/h_collapsible_box.js";
+import { HStack as f } from "../../stacks/h_stack.js";
+import "../../stacks/spacer.js";
+import "../../stacks/v_collapsible_box.js";
+import "../../stacks/v_stack.js";
+import "../../stacks/z_stack.js";
 import '../../themes/stylesheets/reset.css';import '../../bubble.css';/* empty css                                 */
+import "../../theme_provider.module-ChZQ5Xsk.js";
 import "../../themes/stylesheets/reset.js";
-import { HStack as p } from "../../stacks/h_stack.js";
-const d = "_bubble_d3b757e", h = { bubble: d }, R = u.forwardRef(function({
+const d = "_bubble_d3b757e", h = { bubble: d }, S = s.forwardRef(function({
   children: t,
   className: e,
   style: o,
-  backgroundColor: b = f.accentColor,
-  textColor: r = "#fff",
-  size: l = "md",
-  elevate: a = !1,
-  ...c
-}, i) {
-  const n = {
-    "--bubble-text-color": r,
-    "--bubble-color": b,
+  backgroundColor: r = u.accentColor,
+  textColor: b = "#fff",
+  size: i = "md",
+  elevate: l = !1,
+  ...m
+}, p) {
+  const a = {
+    "--bubble-text-color": b,
+    "--bubble-color": r,
     ...o
   };
-  return /* @__PURE__ */ m(
-    p,
+  return /* @__PURE__ */ c(
+    f,
     {
       inline: !0,
-      className: s(h.bubble, e, "tcn-bubble"),
+      className: n(h.bubble, e, "tcn-bubble"),
       width: "auto",
       height: "auto",
-      ref: i,
-      style: n,
+      ref: p,
+      style: a,
       hAlign: "center",
       vAlign: "center",
-      "data-size": l,
-      "data-elevate": a,
+      "data-size": i,
+      "data-elevate": l,
       padding: "4px",
-      ...c,
+      ...m,
       children: t
     }
   );
 });
 export {
-  R as Bubble
+  S as Bubble
 };
 //# sourceMappingURL=bubble.js.map

package/dist/tokens/bubble/bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"bubble.js","sources":["../../../src/tokens/bubble/bubble.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport styles from './bubble.module.css';\nimport { theme } from '../../themes/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Size } from '../../utils/index.js';\n\nexport interface BubbleProps extends HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  backgroundColor?: string;\n  textColor?: string;\n  elevate?: boolean;\n  size?: Size;\n}\n\nexport const Bubble = React.forwardRef(function Bubble(\n  {\n    children,\n    className,\n    style: defaultStyle,\n    backgroundColor = theme.accentColor,\n    textColor = '#fff',\n    size = 'md',\n    elevate = false,\n    ...props\n  }: BubbleProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const style = {\n    '--bubble-text-color': textColor,\n    '--bubble-color': backgroundColor,\n    ...defaultStyle,\n  } as React.CSSProperties;\n\n  return (\n    <HStack\n      inline\n      className={clsx(styles.bubble, className, 'tcn-bubble')}\n      width=\"auto\"\n      height=\"auto\"\n      ref={ref}\n      style={style}\n      hAlign=\"center\"\n      vAlign=\"center\"\n      data-size={size}\n      data-elevate={elevate}\n      padding=\"4px\"\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Bubble","React","children","className","defaultStyle","backgroundColor","theme","textColor","size","elevate","props","ref","style","jsx","HStack","clsx","styles"],"mappings":";;;;;;;gDAeaA,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAOC;AAAA,EACP,iBAAAC,IAAkBC,EAAM;AAAA,EACxB,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAQ;AAAA,IACZ,uBAAuBL;AAAA,IACvB,kBAAkBF;AAAA,IAClB,GAAGD;AAAA,EAAA;AAGL,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,WAAWC,EAAKC,EAAO,QAAQb,GAAW,YAAY;AAAA,MACtD,OAAM;AAAA,MACN,QAAO;AAAA,MACP,KAAAQ;AAAA,MACA,OAAAC;AAAA,MACA,QAAO;AAAA,MACP,QAAO;AAAA,MACP,aAAWJ;AAAA,MACX,gBAAcC;AAAA,MACd,SAAQ;AAAA,MACP,GAAGC;AAAA,MAEH,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"bubble.js","sources":["../../../src/tokens/bubble/bubble.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport styles from './bubble.module.css';\nimport { theme } from '../../themes/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Size } from '../../utils/index.js';\n\nexport interface BubbleProps extends HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  backgroundColor?: string;\n  textColor?: string;\n  elevate?: boolean;\n  size?: Size;\n}\n\nexport const Bubble = React.forwardRef(function Bubble(\n  {\n    children,\n    className,\n    style: defaultStyle,\n    backgroundColor = theme.accentColor,\n    textColor = '#fff',\n    size = 'md',\n    elevate = false,\n    ...props\n  }: BubbleProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const style = {\n    '--bubble-text-color': textColor,\n    '--bubble-color': backgroundColor,\n    ...defaultStyle,\n  } as React.CSSProperties;\n\n  return (\n    <HStack\n      inline\n      className={clsx(styles.bubble, className, 'tcn-bubble')}\n      width=\"auto\"\n      height=\"auto\"\n      ref={ref}\n      style={style}\n      hAlign=\"center\"\n      vAlign=\"center\"\n      data-size={size}\n      data-elevate={elevate}\n      padding=\"4px\"\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Bubble","React","children","className","defaultStyle","backgroundColor","theme","textColor","size","elevate","props","ref","style","jsx","HStack","clsx","styles"],"mappings":";;;;;;;;;;;;;;gDAeaA,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAOC;AAAA,EACP,iBAAAC,IAAkBC,EAAM;AAAA,EACxB,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAQ;AAAA,IACZ,uBAAuBL;AAAA,IACvB,kBAAkBF;AAAA,IAClB,GAAGD;AAAA,EAAA;AAGL,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,WAAWC,EAAKC,EAAO,QAAQb,GAAW,YAAY;AAAA,MACtD,OAAM;AAAA,MACN,QAAO;AAAA,MACP,KAAAQ;AAAA,MACA,OAAAC;AAAA,MACA,QAAO;AAAA,MACP,QAAO;AAAA,MACP,aAAWJ;AAAA,MACX,gBAAcC;AAAA,MACd,SAAQ;AAAA,MACP,GAAGC;AAAA,MAEH,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/tokens/chip/chip.js

@@ -1,31 +1,38 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { HStack as n } from "../../stacks/h_stack.js";
 import { clsx as f } from "clsx";
 import h from "react";
 import { theme as l } from "../../themes/theme_variables.js";
+import "../../stacks/box/box.js";
+import "../../stacks/h_collapsible_box.js";
+import "../../stacks/spacer.js";
+import "../../stacks/v_collapsible_box.js";
+import "../../stacks/v_stack.js";
+import "../../stacks/z_stack.js";
 import '../../themes/stylesheets/reset.css';import '../../chip.css';/* empty css                                 */
+import "../../theme_provider.module-ChZQ5Xsk.js";
 import "../../themes/stylesheets/reset.js";
-const s = "_chip_35f6f0b", a = { chip: s }, R = h.forwardRef(function({ children: t, style: o, className: i, color: r = l.accentColor, ...c }, e) {
-  const p = {
+const s = "_chip_35f6f0b", a = { chip: s }, H = h.forwardRef(function({ children: t, style: o, className: i, color: r = l.accentColor, ...p }, m) {
+  const c = {
     "--chip-color": r,
     ...o
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ e(
     n,
     {
-      ref: e,
+      ref: m,
       inline: !0,
       width: "auto",
       height: "auto",
       vAlign: "center",
       className: f(a.chip, i, "tcn-chip"),
-      style: p,
-      ...c,
+      style: c,
+      ...p,
       children: t
     }
   );
 });
 export {
-  R as Chip
+  H as Chip
 };
 //# sourceMappingURL=chip.js.map

package/dist/tokens/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../src/tokens/chip/chip.tsx"],"sourcesContent":["import { HStack, HStackProps } from '../../stacks/h_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './chip.module.css';\nimport { theme } from '../../themes/index.js';\n\nexport interface ChipProps extends HStackProps {\n  children?: React.ReactNode;\n  color?: string;\n  disabled?: boolean;\n}\n\nexport const Chip = React.forwardRef(function Chip(\n  { children, style, className, color = theme.accentColor, ...props }: ChipProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    '--chip-color': color,\n    ...style,\n  };\n\n  return (\n    <HStack\n      ref={ref}\n      inline\n      width=\"auto\"\n      height=\"auto\"\n      vAlign=\"center\"\n      className={clsx(styles.chip, className, 'tcn-chip')}\n      style={finalStyle}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Chip","React","children","style","className","color","theme","props","ref","finalStyle","jsx","HStack","clsx","styles"],"mappings":";;;;;;;4CAYaA,IAAOC,EAAM,WAAW,SACnC,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,OAAAC,IAAQC,EAAM,aAAa,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,gBAAgBJ;AAAA,IAChB,GAAGF;AAAA,EAAA;AAGL,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,QAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,QAAO;AAAA,MACP,WAAWI,EAAKC,EAAO,MAAMT,GAAW,UAAU;AAAA,MAClD,OAAOK;AAAA,MACN,GAAGF;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"chip.js","sources":["../../../src/tokens/chip/chip.tsx"],"sourcesContent":["import { HStack, HStackProps } from '../../stacks/h_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './chip.module.css';\nimport { theme } from '../../themes/index.js';\n\nexport interface ChipProps extends HStackProps {\n  children?: React.ReactNode;\n  color?: string;\n  disabled?: boolean;\n}\n\nexport const Chip = React.forwardRef(function Chip(\n  { children, style, className, color = theme.accentColor, ...props }: ChipProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    '--chip-color': color,\n    ...style,\n  };\n\n  return (\n    <HStack\n      ref={ref}\n      inline\n      width=\"auto\"\n      height=\"auto\"\n      vAlign=\"center\"\n      className={clsx(styles.chip, className, 'tcn-chip')}\n      style={finalStyle}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Chip","React","children","style","className","color","theme","props","ref","finalStyle","jsx","HStack","clsx","styles"],"mappings":";;;;;;;;;;;;;;4CAYaA,IAAOC,EAAM,WAAW,SACnC,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,OAAAC,IAAQC,EAAM,aAAa,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,gBAAgBJ;AAAA,IAChB,GAAGF;AAAA,EAAA;AAGL,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,QAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,QAAO;AAAA,MACP,WAAWI,EAAKC,EAAO,MAAMT,GAAW,UAAU;AAAA,MAClD,OAAOK;AAAA,MACN,GAAGF;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/utils/css_utils.d.ts

@@ -0,0 +1,9 @@
+import { Rectangle } from './types/dimensions.js';
+export declare const convertRectangleToCssVariables: (componentName: string, stateName: string, rectangle?: Rectangle | null) => {
+    [x: string]: string;
+};
+export declare function useTrackActiveItemRectangle(isActive: boolean): {
+    ref: import('react').RefObject<HTMLElement>;
+    rectangle: Rectangle | null;
+};
+//# sourceMappingURL=css_utils.d.ts.map

package/dist/utils/css_utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_utils.d.ts","sourceRoot":"","sources":["../../src/utils/css_utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvD,eAAO,MAAM,8BAA8B,GACzC,eAAe,MAAM,EACrB,WAAW,MAAM,EACjB,YAAY,SAAS,GAAG,IAAI;;CAY7B,CAAC;AAiBF,wBAAgB,2BAA2B,CAAC,QAAQ,EAAE,OAAO;;;EA4B5D"}

package/dist/utils/css_utils.js

@@ -0,0 +1,45 @@
+import { useRef as c, useState as u, useLayoutEffect as p } from "react";
+const x = (e, i, t) => {
+  if (!t)
+    return {};
+  const n = `--${e}-${i}-rectangle-`;
+  return {
+    [`${n}position-x`]: t.position.x + "px",
+    [`${n}position-y`]: t.position.y + "px",
+    [`${n}width`]: t.dimensions.width + "px",
+    [`${n}height`]: t.dimensions.height + "px"
+  };
+};
+function d(e) {
+  return e ? {
+    dimensions: {
+      width: e.offsetWidth,
+      height: e.offsetHeight
+    },
+    position: {
+      x: e.offsetLeft,
+      y: e.offsetTop
+    }
+  } : null;
+}
+function a(e) {
+  const i = c(null), [t, n] = u(null);
+  return p(() => {
+    const o = i.current;
+    if (!o) return;
+    const s = () => {
+      const f = d(o);
+      e && f && n(f);
+    };
+    s();
+    const r = new ResizeObserver(s);
+    return r.observe(o), window.addEventListener("resize", s), () => {
+      r.disconnect(), window.removeEventListener("resize", s);
+    };
+  }, [e]), { ref: i, rectangle: t };
+}
+export {
+  x as convertRectangleToCssVariables,
+  a as useTrackActiveItemRectangle
+};
+//# sourceMappingURL=css_utils.js.map

package/dist/utils/css_utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_utils.js","sources":["../../src/utils/css_utils.ts"],"sourcesContent":["import type { Rectangle } from './types/dimensions.js';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nexport const convertRectangleToCssVariables = (\n  componentName: string,\n  stateName: string,\n  rectangle?: Rectangle | null\n) => {\n  if (!rectangle) {\n    return {};\n  }\n  const prefix = `--${componentName}-${stateName}-rectangle-`;\n  return {\n    [`${prefix}position-x`]: rectangle.position.x + 'px',\n    [`${prefix}position-y`]: rectangle.position.y + 'px',\n    [`${prefix}width`]: rectangle.dimensions.width + 'px',\n    [`${prefix}height`]: rectangle.dimensions.height + 'px',\n  };\n};\n\nfunction getElementRect(element: HTMLElement | null): Rectangle | null {\n  if (!element) return null;\n\n  return {\n    dimensions: {\n      width: element.offsetWidth,\n      height: element.offsetHeight,\n    },\n    position: {\n      x: element.offsetLeft,\n      y: element.offsetTop,\n    },\n  };\n}\n\nexport function useTrackActiveItemRectangle(isActive: boolean) {\n  const ref = useRef<HTMLElement>(null);\n  const [rectangle, setRectangle] = useState<Rectangle | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const update = () => {\n      const rect = getElementRect(element);\n      if (isActive && rect) {\n        setRectangle(rect);\n      }\n    };\n\n    update();\n\n    const resizeObserver = new ResizeObserver(update);\n    resizeObserver.observe(element);\n    window.addEventListener('resize', update);\n\n    return () => {\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', update);\n    };\n  }, [isActive]);\n\n  return { ref, rectangle };\n}\n"],"names":["convertRectangleToCssVariables","componentName","stateName","rectangle","prefix","getElementRect","element","useTrackActiveItemRectangle","isActive","ref","useRef","setRectangle","useState","useLayoutEffect","update","rect","resizeObserver"],"mappings":";AAGO,MAAMA,IAAiC,CAC5CC,GACAC,GACAC,MACG;AACH,MAAI,CAACA;AACH,WAAO,CAAA;AAET,QAAMC,IAAS,KAAKH,CAAa,IAAIC,CAAS;AAC9C,SAAO;AAAA,IACL,CAAC,GAAGE,CAAM,YAAY,GAAGD,EAAU,SAAS,IAAI;AAAA,IAChD,CAAC,GAAGC,CAAM,YAAY,GAAGD,EAAU,SAAS,IAAI;AAAA,IAChD,CAAC,GAAGC,CAAM,OAAO,GAAGD,EAAU,WAAW,QAAQ;AAAA,IACjD,CAAC,GAAGC,CAAM,QAAQ,GAAGD,EAAU,WAAW,SAAS;AAAA,EAAA;AAEvD;AAEA,SAASE,EAAeC,GAA+C;AACrE,SAAKA,IAEE;AAAA,IACL,YAAY;AAAA,MACV,OAAOA,EAAQ;AAAA,MACf,QAAQA,EAAQ;AAAA,IAAA;AAAA,IAElB,UAAU;AAAA,MACR,GAAGA,EAAQ;AAAA,MACX,GAAGA,EAAQ;AAAA,IAAA;AAAA,EACb,IAVmB;AAYvB;AAEO,SAASC,EAA4BC,GAAmB;AAC7D,QAAMC,IAAMC,EAAoB,IAAI,GAC9B,CAACP,GAAWQ,CAAY,IAAIC,EAA2B,IAAI;AAEjE,SAAAC,EAAgB,MAAM;AACpB,UAAMP,IAAUG,EAAI;AACpB,QAAI,CAACH,EAAS;AAEd,UAAMQ,IAAS,MAAM;AACnB,YAAMC,IAAOV,EAAeC,CAAO;AACnC,MAAIE,KAAYO,KACdJ,EAAaI,CAAI;AAAA,IAErB;AAEA,IAAAD,EAAA;AAEA,UAAME,IAAiB,IAAI,eAAeF,CAAM;AAChD,WAAAE,EAAe,QAAQV,CAAO,GAC9B,OAAO,iBAAiB,UAAUQ,CAAM,GAEjC,MAAM;AACX,MAAAE,EAAe,WAAA,GACf,OAAO,oBAAoB,UAAUF,CAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAACN,CAAQ,CAAC,GAEN,EAAE,KAAAC,GAAK,WAAAN,EAAA;AAChB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -71,6 +71,12 @@
       "import": "./dist/layouts/index.js",
       "default": "./dist/layouts/index.js"
     },
+    "./navigation": {
+      "@bc-monorepo/source": "./src/navigation/index.ts",
+      "types": "./dist/navigation/index.d.ts",
+      "import": "./dist/navigation/index.js",
+      "default": "./dist/navigation/index.js"
+    },
     "./overlay": {
       "@bc-monorepo/source": "./src/overlay/index.ts",
       "types": "./dist/overlay/index.d.ts",
@@ -132,6 +138,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@fontsource/lato": "^5.2.7",
     "clsx": "^2.1.1",
     "react-color": "^2.19.3",
     "@tcn/icons": "2.2.1",

package/src/inputs/date_picker/date_picker_time_selector.module.css

@@ -7,7 +7,6 @@
     border-radius: 4px;
     padding: 4px;
     box-sizing: border-box;
-    font-family: Arial, Helvetica, sans-serif;
     color: rgba(0, 0, 0, 0.85);
     -webkit-tap-highlight-color: transparent;
     height: 100%;

package/src/inputs/input/input.module.css

@@ -15,7 +15,6 @@
     padding: 0;
     padding-inline: 4px;
     box-sizing: border-box;
-    font-family: Lato, Arial, Helvetica, sans-serif;
     -webkit-tap-highlight-color: transparent;
   }
 

package/src/inputs/textarea/textarea.module.css

@@ -16,7 +16,6 @@
     padding-inline: 4px;
     padding-block: 4px;
     box-sizing: border-box;
-    font-family: Lato, Arial, Helvetica, sans-serif;
     font-size: calc(14px * var(--scalar, 1));
     resize: vertical;
     cursor: text;

package/src/navigation/index.ts

@@ -0,0 +1,18 @@
+// Stateful Components
+export { Tabs, useTabs, type TabsProps, type TabsState } from './tabs/state/context.js';
+export {
+  TabLink,
+  type TabLinkProps,
+  type TabLinkOwnProps,
+} from './tabs/state/link/tab_link.js';
+export { Tab, type TabProps } from './tabs/state/tab.js';
+export { TabsNavbar, type TabsNavbarProps } from './tabs/state/nav_bar.js';
+
+// Primitive Components
+export { TabsBar, type TabsBarProps } from './tabs/primitives/tabs_bar.js';
+export {
+  TabsList,
+  TabItem,
+  type TabsListProps,
+  type TabItemProps,
+} from './tabs/primitives/tabs_list.js';

package/src/navigation/tabs/__stories__/state.stories.tsx

@@ -0,0 +1,136 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Tabs } from '../state/context.js';
+import { TabLink } from '../state/link/tab_link.js';
+import { Tab } from '../state/tab.js';
+import { HStack } from '../../../stacks/h_stack.js';
+import { VStack } from '../../../stacks/v_stack.js';
+import { TabsNavbar } from '../state/nav_bar.js';
+
+const meta: Meta = {
+  title: 'Navigation/Tabs/Stateful',
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+type ColorTab = 'coral' | 'teal' | 'violet' | 'opalescent';
+
+const ColorPanel = ({
+  color,
+  label,
+  description,
+}: {
+  color: string;
+  label: string;
+  description: string;
+}) => (
+  <VStack
+    role="tabpanel"
+    hAlign="center"
+    vAlign="center"
+    padding="32px"
+    minHeight="200px"
+    style={{
+      borderRadius: 12,
+      background: color,
+    }}
+  >
+    <span style={{ fontSize: 24, fontWeight: 700, color: 'white' }}>{label}</span>
+    <span style={{ fontSize: 14, color: 'rgba(255,255,255,0.85)', marginTop: 8 }}>
+      {description}
+    </span>
+  </VStack>
+);
+
+interface TabsDemoProps {
+  variant?: 'inline';
+  minItemWidth?: number;
+}
+
+const TabsDemo = ({ variant, minItemWidth }: TabsDemoProps) => {
+  const [currentTab, setCurrentTab] = useState<ColorTab>('coral');
+
+  const isInline = variant === 'inline';
+
+  return (
+    <Tabs
+      value={currentTab}
+      onChange={v => setCurrentTab(v as ColorTab)}
+      minItemWidth={minItemWidth}
+    >
+      <VStack minWidth="400px" gap="8px">
+        <HStack
+          hAlign={isInline ? 'center' : 'start'}
+          gap={isInline ? 'small' : undefined}
+        >
+          <TabsNavbar variant={variant}>
+            <TabLink value="coral">Coral</TabLink>
+            <TabLink value="teal">Teal</TabLink>
+            <TabLink value="violet">Violet</TabLink>
+            <TabLink value="opalescent">Opalescent Periwinkle</TabLink>
+          </TabsNavbar>
+        </HStack>
+
+        <Tab value="coral">
+          <ColorPanel color="#FF6B6B" label="Coral" description="Warm and energetic" />
+        </Tab>
+
+        <Tab value="teal">
+          <ColorPanel color="#20B2AA" label="Teal" description="Calm and balanced" />
+        </Tab>
+
+        <Tab value="violet">
+          <ColorPanel
+            color="#9B59B6"
+            label="Violet"
+            description="Creative and mysterious"
+          />
+        </Tab>
+
+        <Tab value="opalescent">
+          <ColorPanel
+            color="#C7C9E8"
+            label="Opalescent Periwinkle"
+            description="Soft, luminous and serene"
+          />
+        </Tab>
+      </VStack>
+    </Tabs>
+  );
+};
+
+export const Baseline: Story = {
+  render: () => {
+    const [currentTab, setCurrentTab] = useState('1');
+    return (
+      <Tabs value={currentTab} onChange={v => setCurrentTab(v)}>
+        <TabsNavbar>
+          <TabLink value="1">One</TabLink>
+          <TabLink value="2">Two</TabLink>
+          <TabLink value="3">Three</TabLink>
+          <TabLink value="4">Four</TabLink>
+        </TabsNavbar>
+
+        <Tab value="1">Page One</Tab>
+        <Tab value="2">Page Two</Tab>
+        <Tab value="3">Page Three</Tab>
+        <Tab value="4">Page Four</Tab>
+      </Tabs>
+    );
+  },
+};
+
+export const MinItemWidth: Story = {
+  render: () => <TabsDemo minItemWidth={100} />,
+};
+
+export const InlineVariant: Story = {
+  render: () => <TabsDemo variant="inline" minItemWidth={100} />,
+};
+
+export const AutoWidth: Story = {
+  render: () => <TabsDemo />,
+};