@tcn/ui 0.3.1 → 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 \"/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */\\nhtml,\\nbody,\\ndiv,\\nspan,\\napplet,\\nobject,\\niframe,\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6,\\np,\\nblockquote,\\npre,\\na,\\nabbr,\\nacronym,\\naddress,\\nbig,\\ncite,\\ncode,\\ndel,\\ndfn,\\nem,\\nimg,\\nins,\\nkbd,\\nq,\\ns,\\nsamp,\\nsmall,\\nstrike,\\nstrong,\\nsub,\\nsup,\\ntt,\\nvar,\\nb,\\nu,\\ni,\\ncenter,\\ndl,\\ndt,\\ndd,\\nol,\\nul,\\nli,\\nfieldset,\\nform,\\nlabel,\\nlegend,\\ntable,\\ncaption,\\ntbody,\\ntfoot,\\nthead,\\ntr,\\nth,\\ntd,\\narticle,\\naside,\\ncanvas,\\ndetails,\\nembed,\\nfigure,\\nfigcaption,\\nfooter,\\nheader,\\nhgroup,\\nmenu,\\nnav,\\noutput,\\nruby,\\nsection,\\nsummary,\\ntime,\\nmark,\\naudio,\\nvideo {\\n  margin: 0;\\n  padding: 0;\\n  border: 0;\\n  font-size: 100%;\\n  font: inherit;\\n  vertical-align: baseline;\\n}\\n/* HTML5 display-role reset for older browsers */\\narticle,\\naside,\\ndetails,\\nfigcaption,\\nfigure,\\nfooter,\\nheader,\\nhgroup,\\nmenu,\\nnav,\\nsection {\\n  display: block;\\n}\\nbody {\\n  line-height: 1;\\n}\\nol,\\nul {\\n  list-style: none;\\n}\\nblockquote,\\nq {\\n  quotes: none;\\n}\\nblockquote:before,\\nblockquote:after,\\nq:before,\\nq:after {\\n  content: \\\"\\\";\\n  content: none;\\n}\\ntable {\\n  border-collapse: collapse;\\n  border-spacing: 0;\\n}\\n\\nlegend {\\n  all: unset;\\n  display: block;\\n  margin: 0;\\n  padding: 0;\\n  font: inherit;\\n  color: inherit;\\n}\\n\\n* {\\n  position: relative;\\n  box-sizing: border-box;\\n}\\n\\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.title[data-size=\\\"sm\\\"] {\\n  font-size: 10px;\\n}\\n.title[data-size=\\\"md\\\"] {\\n  font-size: 12px;\\n}\\n.title[data-size=\\\"lg\\\"] {\\n  font-size: 14px;\\n}\\n\\n.body-text[data-size=\\\"sm\\\"] {\\n  font-size: 10px;\\n}\\n.body-text[data-size=\\\"md\\\"] {\\n  font-size: 11px;\\n}\\n.body-text[data-size=\\\"lg\\\"] {\\n  font-size: 12px;\\n}\\n\\n.button-text {\\n  position: relative;\\n  opacity: 1;\\n  font-size: 12px !important;\\n}\\n\\n/* ===== BUTTONS ===== */\\n/* Base button styles */\\n.button,\\n.button[data-hierarchy=\\\"primary\\\"],\\n.button[data-hierarchy=\\\"secondary\\\"],\\n.button[data-hierarchy=\\\"primary\\\"]:hover,\\n.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/* Button content positioning */\\n.button[data-hierarchy=\\\"primary\\\"] > *,\\n.button[data-hierarchy=\\\"secondary\\\"] > * {\\n  position: relative;\\n}\\n\\n.button[data-hierarchy=\\\"primary\\\"]:active > *,\\n.button[data-hierarchy=\\\"secondary\\\"]:active > * {\\n  position: relative;\\n  top: 0;\\n  left: 1px;\\n}\\n\\n/* Button focus states */\\n.button[data-hierarchy=\\\"primary\\\"]:focus:not(:active)::before,\\n.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.button[data-hierarchy=\\\"primary\\\"],\\n.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.button[data-hierarchy=\\\"primary\\\"]:active,\\n.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.button[data-hierarchy=\\\"primary\\\"]:focus,\\n.button[data-hierarchy=\\\"secondary\\\"]:focus,\\n.button[data-hierarchy=\\\"primary\\\"]:focus:not(:active),\\n.button[data-hierarchy=\\\"secondary\\\"]:focus:not(:active) {\\n  background: silver;\\n  border: none;\\n  text-decoration: none;\\n}\\n\\n/* Tertiary button styles */\\n.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.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.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.button[data-hierarchy=\\\"tertiary\\\"]:focus,\\n.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.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.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.button[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"],\\n.button[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"],\\n.button[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: #7f7f7f;\\n  cursor: not-allowed;\\n}\\n\\n/* Select button styles */\\n.button.select,\\n.button.select:hover {\\n  position: relative;\\n  padding-inline-end: 20px;\\n  padding-inline-start: 4px;\\n}\\n\\n.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.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.slim-button,\\n.slim-button[data-hierarchy=\\\"primary\\\"],\\n.slim-button[data-hierarchy=\\\"secondary\\\"],\\n.slim-button[data-hierarchy=\\\"primary\\\"]:hover,\\n.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.slim-button[data-size=\\\"sm\\\"],\\n.slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"sm\\\"],\\n.slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"sm\\\"],\\n.slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"sm\\\"]:hover,\\n.slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"sm\\\"]:hover {\\n  padding: 1px;\\n}\\n\\n.slim-button[data-size=\\\"md\\\"],\\n.slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"md\\\"],\\n.slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"md\\\"],\\n.slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"md\\\"]:hover,\\n.slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"md\\\"]:hover {\\n  padding: 2px;\\n}\\n\\n.slim-button[data-size=\\\"lg\\\"],\\n.slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"lg\\\"],\\n.slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"lg\\\"],\\n.slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"lg\\\"]:hover,\\n.slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"lg\\\"]:hover {\\n  padding: 4px;\\n}\\n\\n/* Select group styles */\\n.select-group .button[data-hierarchy=\\\"primary\\\"],\\n.select-group .button[data-hierarchy=\\\"primary\\\"]:hover,\\n.select-group .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.select-group .button:hover,\\n.select-group .button:focus,\\n.button-group .button:hover,\\n.button-group .button:focus {\\n  z-index: 1;\\n}\\n\\n/* ===== INPUT FIELDS ===== */\\n.input,\\n.textarea,\\n.suggestion-list-search-input,\\n.multi-combo-box-values-container,\\n.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.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.input,\\n.textarea,\\n.suggestion-list-search-input {\\n  height: 23px;\\n}\\n\\n.input:is(:focus, :focus-visible, :active, :hover),\\n.input:is(:focus, :focus-visible, :active, :hover)[data-is-disabled=\\\"false\\\"],\\n.textarea:is(:focus, :focus-visible, :active, :hover),\\n.textarea:is(:focus, :focus-visible, :active, :hover)[data-is-disabled=\\\"false\\\"] {\\n  outline: none;\\n  border: none;\\n}\\n\\n.input[data-is-disabled=\\\"true\\\"],\\n.textarea[data-is-disabled=\\\"true\\\"],\\n.suggestion-list-search-input[data-is-disabled=\\\"true\\\"],\\n.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.input[data-is-disabled=\\\"true\\\"],\\n.textarea[data-is-disabled=\\\"true\\\"],\\n.suggestion-list-search-input[data-is-disabled=\\\"true\\\"],\\n.multiselect-values-container[data-is-disabled=\\\"true\\\"],\\n.input[data-is-disabled=\\\"true\\\"]::placeholder,\\n.textarea[data-is-disabled=\\\"true\\\"]::placeholder,\\n.suggestion-list-search-input[data-is-disabled=\\\"true\\\"]::placeholder,\\n.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.select-group .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.select-group .button[data-hierarchy=\\\"primary\\\"]:focus:not(:active)::before {\\n  outline: 1px dotted #fcfcfc;\\n}\\n\\n/* ===== SUGGESTION LISTS ===== */\\n.suggestion-list {\\n  padding: 2px;\\n}\\n\\n.suggestion-item {\\n  padding: 0;\\n  background: transparent;\\n  border: none;\\n  min-height: 0;\\n}\\n\\n.suggestion-item:hover {\\n  background: #000080;\\n  color: #fff;\\n}\\n\\n.suggestion-item[data-is-selected=\\\"true\\\"],\\n.suggestion-item[data-is-focused=\\\"true\\\"] {\\n  padding: 0;\\n  background: #000080;\\n  color: #fff;\\n  border: none;\\n}\\n\\n.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.title {\\n  color: black;\\n}\\n\\n.header .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\\\"] > .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.main[data-kind=\\\"window\\\"],\\n.main[data-kind=\\\"app\\\"],\\n.main[data-kind=\\\"nav\\\"],\\n.main[data-kind=\\\"toolbar\\\"],\\n.main[data-kind=\\\"section\\\"],\\n.main[data-kind=\\\"panel\\\"],\\n.main[data-kind=\\\"panel\\\"],\\n.main[data-kind=\\\"drawer\\\"],\\n.main[data-kind=\\\"card\\\"],\\n.panel,\\n.h-panel,\\n.v-panel,\\n.sidebar-start[data-hierarchy],\\n.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.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.column:last-child:after {\\n  display: none;\\n}\\n\\n.main[data-kind=\\\"panel\\\"],\\n.sidebar-start[data-kind=\\\"panel\\\"],\\n.sidebar-end[data-kind=\\\"panel\\\"] {\\n  padding: 0;\\n}\\n\\n/* Sidebar styles */\\n.sidebar-start[data-hierarchy=\\\"tertiary\\\"],\\n.sidebar-start[data-hierarchy=\\\"secondary\\\"] {\\n  background: #c0c0c0;\\n  color: #222222;\\n}\\n\\n.sidebar-start[data-kind=\\\"nav\\\"],\\n.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.sidebar-end[data-hierarchy=\\\"tertiary\\\"],\\n.sidebar-end[data-hierarchy=\\\"secondary\\\"] {\\n  background: #c0c0c0;\\n  color: #222222;\\n}\\n\\n.sidebar-end[data-hierarchy=\\\"primary\\\"],\\n.sidebar-start[data-hierarchy=\\\"primary\\\"] {\\n  background: #fff;\\n  color: #222222;\\n}\\n\\n/* Footer */\\n.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.window,\\n.date-picker-popover,\\n.date-picker-year-selector,\\n.menu,\\n.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.suggestion-list-header {\\n  background: #c0c0c0;\\n}\\n\\n/* ===== DATE PICKER COMPONENTS ===== */\\n.date-picker-box {\\n  background: #c0c0c0;\\n  padding: 0;\\n}\\n\\n.date-picker-date {\\n  box-shadow: none !important;\\n}\\n\\n.date-picker-year-button {\\n  box-shadow: none !important;\\n}\\n\\n.date-picker-header {\\n  height: 20px;\\n}\\n\\n.button.phone-number-input-select,\\n.button.phone-number-input-select:hover {\\n  min-width: 0;\\n}\\n\\n.phone-number-input[data-has-phone-book=\\\"false\\\"] {\\n  border-end-end-radius: 0px;\\n  border-start-end-radius: 0px;\\n}\\n\\n.button.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.button.date-picker-year-select {\\n  padding-inline-end: 20px;\\n}\\n\\n.button.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.button.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.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.time-box-title-container {\\n  min-height: 25px;\\n  height: 25px;\\n}\\n\\n/* ===== FORM COMPONENTS ===== */\\n.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.field-set > .field-set-body {\\n  background: transparent;\\n  padding: 0;\\n  gap: 8px;\\n}\\n\\n.field-set > .field-set-legend {\\n  position: relative;\\n  top: -7px;\\n  left: -4px;\\n  height: 0;\\n}\\n\\n.field-set-legend-text {\\n  background: #c0c0c0;\\n  padding: 0;\\n  font-size: 12px;\\n}\\n\\n/* ===== CHIPS ===== */\\n.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.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.checkbox:focus {\\n  outline: none;\\n}\\n\\n.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.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.checkbox[data-is-disabled=\\\"true\\\"] {\\n  background-color: #c0c0c0;\\n}\\n\\n.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.radio,\\n.radio[data-checked=\\\"true\\\"],\\n.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.radio:focus {\\n  outline: none;\\n}\\n\\n.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.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.switch:focus,\\n.switch:focus-visible,\\n.switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"false\\\"],\\n.switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"true\\\"] {\\n  outline: none;\\n}\\n\\n.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.switch-wrapper[data-is-checked=\\\"false\\\"] > .switch-icon {\\n  color: #222;\\n}\\n\\n.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.switch-wrapper[data-is-checked=\\\"true\\\"][data-is-disabled=\\\"false\\\"] {\\n  background-color: var(--accent-color);\\n  border-color: #c0c0c0;\\n}\\n\\n.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.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.switch-wrapper[data-is-disabled=\\\"true\\\"] > .switch-icon {\\n  color: #707070;\\n}\\n\\n/* ===== SLIDERS ===== */\\n.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.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.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.slider[data-is-disabled=\\\"false\\\"]:active::-webkit-slider-thumb {\\n  background-color: #c0c0c0;\\n}\\n\\n.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.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.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.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.slider[data-is-disabled=\\\"false\\\"]:active::-moz-range-thumb,\\n.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.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.nav-item,\\n.nav-item[data-is-selected],\\n.menu-item {\\n  border-radius: 0;\\n  font-size: 12px;\\n}\\n\\n.nav-item,\\n.menu-item .body-text {\\n  font-size: 12px;\\n}\\n\\n.main[data-hierarchy=\\\"primary\\\"] {\\n  background: #c0c0c0;\\n  padding: 0px;\\n}\\n\\n.main[data-hierarchy=\\\"secondary\\\"] {\\n  background: #c0c0c0;\\n  padding: 0px;\\n}\\n\\n.main[data-hierarchy=\\\"tertiary\\\"] {\\n  background: #c0c0c0;\\n  padding: 0px;\\n}\\n\\n.h-nav {\\n  border: none;\\n}\\n\\n.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.footer {\\n  border: none;\\n}\\n\\n.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\"","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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/title.css

@@ -1 +1 @@
-._title_64bd0fd{margin:0;padding:0;line-height:1.1;color:#395578}._title_64bd0fd[data-selectable=true]{-webkit-user-select:auto;user-select:auto}._title_64bd0fd[data-selectable=false]{-webkit-user-select:none;user-select:none}._title_64bd0fd[data-size=sm]{font-size:calc(16px * var(--scalar, 1))}._title_64bd0fd[data-size=md]{font-size:calc(18px * var(--scalar, 1))}._title_64bd0fd[data-size=lg]{font-size:calc(21px * var(--scalar, 1))}._title_64bd0fd[data-hierarchy=primary]{opacity:1}._title_64bd0fd[data-hierarchy=secondary]{opacity:.85}._title_64bd0fd[data-hierarchy=tertiary]{opacity:.7}._title_64bd0fd[data-emphasis=strong]{font-weight:700}._title_64bd0fd[data-emphasis=normal]{font-weight:400}._title_64bd0fd[data-emphasis=light]{font-weight:200}
+@layer tcn-system{:where(._title_64bd0fd){margin:0;padding:0;line-height:1.1;color:#395578}:where(._title_64bd0fd[data-selectable=true]){-webkit-user-select:auto;user-select:auto}:where(._title_64bd0fd[data-selectable=false]){-webkit-user-select:none;user-select:none}:where(._title_64bd0fd[data-size=sm]){font-size:calc(16px * var(--scalar, 1))}:where(._title_64bd0fd[data-size=md]){font-size:calc(18px * var(--scalar, 1))}:where(._title_64bd0fd[data-size=lg]){font-size:calc(21px * var(--scalar, 1))}:where(._title_64bd0fd[data-hierarchy=primary]){opacity:1}:where(._title_64bd0fd[data-hierarchy=secondary]){opacity:.85}:where(._title_64bd0fd[data-hierarchy=tertiary]){opacity:.7}:where(._title_64bd0fd[data-emphasis=strong]){font-weight:700}:where(._title_64bd0fd[data-emphasis=normal]){font-weight:400}:where(._title_64bd0fd[data-emphasis=light]){font-weight:200}}

package/dist/tokens/badge/badge.js

@@ -1,8 +1,8 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import u from "react";
 import { clsx as o } from "clsx";
-import { Spacer as h } from "../../stacks/spacer.js";
-import { VStack as c } from "../../stacks/v_stack.js";
+import { Spacer as c } from "../../stacks/spacer.js";
+import { VStack as h } from "../../stacks/v_stack.js";
 import { ZStack as r } from "../../stacks/z_stack.js";
 import { Bubble as g } from "../bubble/bubble.js";
 import '../../badge.css';const s = "_badge-bubble_7fe9ed5", f = { "badge-bubble": s }, S = u.forwardRef(
@@ -23,22 +23,22 @@ import '../../badge.css';const s = "_badge-bubble_7fe9ed5", f = { "badge-bubble"
       vAlign: "end",
       hAlign: "end",
       zIndex: 0,
-      className: o("badge", l),
+      className: o(l, "tcn-badge"),
       ...n,
       children: [
         /* @__PURE__ */ e(r, { zIndex: 0, inline: !0, width: "auto", height: "auto", children: i }),
-        /* @__PURE__ */ t(c, { zIndex: 1, height: "100%", width: "auto", children: [
+        /* @__PURE__ */ t(h, { zIndex: 1, height: "100%", width: "auto", children: [
           /* @__PURE__ */ e(
             g,
             {
-              className: o(f["badge-bubble"], "badge-bubble"),
+              className: o(f["badge-bubble"], "tcn-badge-bubble"),
               backgroundColor: b,
               textColor: d,
               elevate: !0,
               children: a
             }
           ),
-          /* @__PURE__ */ e(h, { height: "100%" })
+          /* @__PURE__ */ e(c, { height: "100%" })
         ] })
       ]
     }

package/dist/tokens/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../src/tokens/badge/badge.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { Bubble } from '../bubble/bubble.js';\nimport styles from './badge.module.css';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLDivElement> {\n  value: React.ReactNode;\n  backgroundColor?: string;\n  textColor?: string;\n}\n\nexport const Badge = React.forwardRef(\n  (\n    {\n      value,\n      children,\n      backgroundColor,\n      textColor: color,\n      className,\n      ...props\n    }: BadgeProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    return (\n      <ZStack\n        inline\n        width=\"auto\"\n        height=\"auto\"\n        ref={ref}\n        vAlign=\"end\"\n        hAlign=\"end\"\n        zIndex={0}\n        className={clsx('badge', className)}\n        {...props}\n      >\n        <ZStack zIndex={0} inline width=\"auto\" height=\"auto\">\n          {children}\n        </ZStack>\n        <VStack zIndex={1} height=\"100%\" width=\"auto\">\n          <Bubble\n            className={clsx(styles['badge-bubble'], 'badge-bubble')}\n            backgroundColor={backgroundColor}\n            textColor={color}\n            elevate\n          >\n            {value}\n          </Bubble>\n          <Spacer height=\"100%\" />\n        </VStack>\n      </ZStack>\n    );\n  }\n);\n"],"names":["Badge","React","value","children","backgroundColor","color","className","props","ref","jsxs","ZStack","clsx","jsx","VStack","Bubble","styles","Spacer"],"mappings":";;;;;;;8DAcaA,IAAQC,EAAM;AAAA,EACzB,CACE;AAAA,IACE,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAWC;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAGE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,KAAAF;AAAA,MACA,QAAO;AAAA,MACP,QAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAWG,EAAK,SAASL,CAAS;AAAA,MACjC,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAK,EAACF,GAAA,EAAO,QAAQ,GAAG,QAAM,IAAC,OAAM,QAAO,QAAO,QAC3C,UAAAP,EAAA,CACH;AAAA,0BACCU,GAAA,EAAO,QAAQ,GAAG,QAAO,QAAO,OAAM,QACrC,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,WAAWH,EAAKI,EAAO,cAAc,GAAG,cAAc;AAAA,cACtD,iBAAAX;AAAA,cACA,WAAWC;AAAA,cACX,SAAO;AAAA,cAEN,UAAAH;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAU,EAACI,GAAA,EAAO,QAAO,OAAA,CAAO;AAAA,QAAA,EAAA,CACxB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"badge.js","sources":["../../../src/tokens/badge/badge.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { Bubble } from '../bubble/bubble.js';\nimport styles from './badge.module.css';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLDivElement> {\n  value: React.ReactNode;\n  backgroundColor?: string;\n  textColor?: string;\n}\n\nexport const Badge = React.forwardRef(\n  (\n    {\n      value,\n      children,\n      backgroundColor,\n      textColor: color,\n      className,\n      ...props\n    }: BadgeProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    return (\n      <ZStack\n        inline\n        width=\"auto\"\n        height=\"auto\"\n        ref={ref}\n        vAlign=\"end\"\n        hAlign=\"end\"\n        zIndex={0}\n        className={clsx(className, 'tcn-badge')}\n        {...props}\n      >\n        <ZStack zIndex={0} inline width=\"auto\" height=\"auto\">\n          {children}\n        </ZStack>\n        <VStack zIndex={1} height=\"100%\" width=\"auto\">\n          <Bubble\n            className={clsx(styles['badge-bubble'], 'tcn-badge-bubble')}\n            backgroundColor={backgroundColor}\n            textColor={color}\n            elevate\n          >\n            {value}\n          </Bubble>\n          <Spacer height=\"100%\" />\n        </VStack>\n      </ZStack>\n    );\n  }\n);\n"],"names":["Badge","React","value","children","backgroundColor","color","className","props","ref","jsxs","ZStack","clsx","jsx","VStack","Bubble","styles","Spacer"],"mappings":";;;;;;;8DAcaA,IAAQC,EAAM;AAAA,EACzB,CACE;AAAA,IACE,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAWC;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAGE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,KAAAF;AAAA,MACA,QAAO;AAAA,MACP,QAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAWG,EAAKL,GAAW,WAAW;AAAA,MACrC,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAK,EAACF,GAAA,EAAO,QAAQ,GAAG,QAAM,IAAC,OAAM,QAAO,QAAO,QAC3C,UAAAP,EAAA,CACH;AAAA,0BACCU,GAAA,EAAO,QAAQ,GAAG,QAAO,QAAO,OAAM,QACrC,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,WAAWH,EAAKI,EAAO,cAAc,GAAG,kBAAkB;AAAA,cAC1D,iBAAAX;AAAA,cACA,WAAWC;AAAA,cACX,SAAO;AAAA,cAEN,UAAAH;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAU,EAACI,GAAA,EAAO,QAAO,OAAA,CAAO;AAAA,QAAA,EAAA,CACxB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/tokens/bubble/bubble.js

@@ -1,44 +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 d } from "../../stacks/h_stack.js";
-import '../../bubble.css';const p = "_bubble_d3b757e", h = { bubble: p }, B = u.forwardRef(function({
-  children: e,
-  className: t,
+const d = "_bubble_d3b757e", h = { bubble: d }, S = s.forwardRef(function({
+  children: t,
+  className: e,
   style: o,
-  backgroundColor: b = f.accentColor,
-  textColor: l = "#fff",
-  size: r = "md",
-  elevate: a = !1,
-  ...c
-}, i) {
-  const n = {
-    "--bubble-text-color": l,
-    "--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(
-    d,
+  return /* @__PURE__ */ c(
+    f,
     {
       inline: !0,
-      className: s(h.bubble, "bubble", t),
+      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": r,
-      "data-elevate": a,
+      "data-size": i,
+      "data-elevate": l,
       padding: "4px",
-      ...c,
-      children: e
+      ...m,
+      children: t
     }
   );
 });
 export {
-  B 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, 'bubble', className)}\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,QAAQ,UAAUb,CAAS;AAAA,MAClD,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,30 +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";
-import '../../chip.css';const s = "_chip_35f6f0b", a = { chip: s }, w = 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, "chip", i),
-      style: p,
-      ...c,
+      className: f(a.chip, i, "tcn-chip"),
+      style: c,
+      ...p,
       children: t
     }
   );
 });
 export {
-  w 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, 'chip', className)}\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,MAAM,QAAQT,CAAS;AAAA,MAC9C,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/tooltip.css

@@ -1 +1 @@
-._tooltip_b8c58d5{background-color:var(--background-color-primary)}
+@layer tcn-system{:where(._tooltip_b8c58d5){background-color:var(--background-color-primary)}}

package/dist/top_resize_handle.css

@@ -1 +1 @@
-._top-resize-handle_fe19234{position:fixed;top:0;left:0;width:100%;height:16px;cursor:ns-resize;z-index:1;pointer-events:auto}
+@layer tcn-system{:where(._top-resize-handle_fe19234){position:fixed;top:0;left:0;width:100%;height:16px;cursor:ns-resize;z-index:1;pointer-events:auto}}

package/dist/typography/body_text/body_text.js

@@ -7,26 +7,26 @@ function j({
   hierarchy: m = "primary",
   color: a,
   children: s,
-  className: p,
+  className: c,
   style: i = {},
   padStart: r,
   padEnd: d,
   padBottom: n,
-  padTop: o,
-  pad: t,
-  selectable: x = !0,
-  breakWords: c = !1
+  padTop: t,
+  pad: o,
+  selectable: p = !0,
+  breakWords: x = !1
 }) {
-  return t && (i.padding = t), r && (i.paddingInlineStart = r), d && (i.paddingInlineEnd = d), o && (i.paddingTop = o), n && (i.paddingBottom = n), a && (i.color = a), /* @__PURE__ */ g(
+  return o && (i.padding = o), r && (i.paddingInlineStart = r), d && (i.paddingInlineEnd = d), t && (i.paddingTop = t), n && (i.paddingBottom = n), a && (i.color = a), /* @__PURE__ */ g(
     "div",
     {
       "data-hierarchy": m,
       "data-emphasis": f,
-      "data-selectable": x,
-      className: b(h["body-text"], "body-text", p),
+      "data-selectable": p,
+      className: b(h["body-text"], c, "tcn-body-text"),
       style: i,
       "data-size": e,
-      "data-word-break": c,
+      "data-word-break": x,
       children: s
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"body_text.js","sources":["../../../src/typography/body_text/body_text.tsx"],"sourcesContent":["import React from 'react';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport styles from './body_text.module.css';\n\nexport interface BodyTextOwnProps {\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  breakWords?: boolean;\n}\n\nexport type BodyTextProps = WithDetailedHTMLProps<BodyTextOwnProps, 'div'>;\n\nexport function BodyText({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n  breakWords = false,\n}: BodyTextProps) {\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['body-text'], 'body-text', className)}\n      style={style}\n      data-size={size}\n      data-word-break={breakWords}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["BodyText","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","breakWords","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAS;AAAA,EACvB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AACf,GAAkB;AAChB,SAAIF,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWG,EAAKC,EAAO,WAAW,GAAG,aAAaX,CAAS;AAAA,MAC3D,OAAAC;AAAA,MACA,aAAWN;AAAA,MACX,mBAAiBa;AAAA,MAEhB,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"body_text.js","sources":["../../../src/typography/body_text/body_text.tsx"],"sourcesContent":["import React from 'react';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport styles from './body_text.module.css';\n\nexport interface BodyTextOwnProps {\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  breakWords?: boolean;\n}\n\nexport type BodyTextProps = WithDetailedHTMLProps<BodyTextOwnProps, 'div'>;\n\nexport function BodyText({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n  breakWords = false,\n}: BodyTextProps) {\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['body-text'], className, 'tcn-body-text')}\n      style={style}\n      data-size={size}\n      data-word-break={breakWords}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["BodyText","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","breakWords","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAS;AAAA,EACvB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AACf,GAAkB;AAChB,SAAIF,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWG,EAAKC,EAAO,WAAW,GAAGX,GAAW,eAAe;AAAA,MAC/D,OAAAC;AAAA,MACA,aAAWN;AAAA,MACX,mBAAiBa;AAAA,MAEhB,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/typography/callout/callout.js

@@ -2,11 +2,11 @@ import { jsx as s } from "react/jsx-runtime";
 import { clsx as u } from "clsx";
 import { s as g } from "../../callout.module-D8ECmxpO.js";
 function b({
-  size: f = "md",
-  emphasis: t = "normal",
-  hierarchy: l = "primary",
+  size: t = "md",
+  emphasis: f = "normal",
+  hierarchy: c = "primary",
   color: a,
-  children: c,
+  children: l,
   className: e,
   style: i = {},
   padStart: r,
@@ -19,13 +19,13 @@ function b({
   return m && (i.padding = m), r && (i.paddingInlineStart = r), n && (i.paddingInlineEnd = n), d && (i.paddingTop = d), o && (i.paddingBottom = o), a && (i.color = a), /* @__PURE__ */ s(
     "div",
     {
-      "data-hierarchy": l,
-      "data-emphasis": t,
+      "data-hierarchy": c,
+      "data-emphasis": f,
       "data-selectable": p,
-      className: u(g.callout, "callout", e),
+      className: u(g.callout, e, "tcn-callout"),
       style: i,
-      "data-size": f,
-      children: c
+      "data-size": t,
+      children: l
     }
   );
 }

package/dist/typography/callout/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sources":["../../../src/typography/callout/callout.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './callout.module.css';\n\nexport interface CalloutOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type CalloutProps = WithDetailedHTMLProps<CalloutOwnProps, 'div'>;\n\nexport function Callout({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: CalloutProps) {\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['callout'], 'callout', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["Callout","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAQ;AAAA,EACtB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAiB;AACf,SAAID,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWE,EAAKC,EAAO,SAAY,WAAWV,CAAS;AAAA,MACvD,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"callout.js","sources":["../../../src/typography/callout/callout.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './callout.module.css';\n\nexport interface CalloutOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type CalloutProps = WithDetailedHTMLProps<CalloutOwnProps, 'div'>;\n\nexport function Callout({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: CalloutProps) {\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['callout'], className, 'tcn-callout')}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["Callout","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAQ;AAAA,EACtB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAiB;AACf,SAAID,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWE,EAAKC,EAAO,SAAYV,GAAW,aAAa;AAAA,MAC3D,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/typography/caption/caption.js

@@ -2,8 +2,8 @@ import { jsx as g } from "react/jsx-runtime";
 import { clsx as h } from "clsx";
 import { s as u } from "../../caption.module-DDq0H4xZ.js";
 function b({
-  size: f = "md",
-  emphasis: t = "normal",
+  size: t = "md",
+  emphasis: f = "normal",
   hierarchy: p = "primary",
   color: a,
   children: c,
@@ -20,11 +20,11 @@ function b({
     "div",
     {
       "data-hierarchy": p,
-      "data-emphasis": t,
+      "data-emphasis": f,
       "data-selectable": s,
-      className: h(u.caption, "caption", e),
+      className: h(u.caption, e, "tcn-caption"),
       style: i,
-      "data-size": f,
+      "data-size": t,
       children: c
     }
   );

package/dist/typography/caption/caption.js.map

@@ -1 +1 @@
-{"version":3,"file":"caption.js","sources":["../../../src/typography/caption/caption.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './caption.module.css';\n\nexport interface CaptionOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type CaptionProps = WithDetailedHTMLProps<CaptionOwnProps, 'div'>;\n\nexport function Caption({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: CaptionProps) {\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['caption'], 'caption', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["Caption","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAQ;AAAA,EACtB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAiB;AACf,SAAID,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWE,EAAKC,EAAO,SAAY,WAAWV,CAAS;AAAA,MACvD,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"caption.js","sources":["../../../src/typography/caption/caption.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './caption.module.css';\n\nexport interface CaptionOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type CaptionProps = WithDetailedHTMLProps<CaptionOwnProps, 'div'>;\n\nexport function Caption({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: CaptionProps) {\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['caption'], className, 'tcn-caption')}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["Caption","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAQ;AAAA,EACtB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAiB;AACf,SAAID,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWE,EAAKC,EAAO,SAAYV,GAAW,aAAa;AAAA,MAC3D,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/typography/footnote/footnote.js

@@ -6,26 +6,26 @@ function b({
   emphasis: m = "normal",
   hierarchy: e = "primary",
   color: o,
-  children: p,
-  className: s,
+  children: c,
+  className: p,
   style: i = {},
-  padStart: a,
-  padEnd: n,
+  padStart: n,
+  padEnd: a,
   padBottom: r,
   padTop: t,
   pad: f,
-  selectable: c = !0
+  selectable: s = !0
 }) {
-  return f && (i.padding = f), a && (i.paddingInlineStart = a), n && (i.paddingInlineEnd = n), t && (i.paddingTop = t), r && (i.paddingBottom = r), o && (i.color = o), /* @__PURE__ */ g(
+  return f && (i.padding = f), n && (i.paddingInlineStart = n), a && (i.paddingInlineEnd = a), t && (i.paddingTop = t), r && (i.paddingBottom = r), o && (i.color = o), /* @__PURE__ */ g(
     "div",
     {
       "data-hierarchy": e,
       "data-emphasis": m,
-      "data-selectable": c,
-      className: h(u.footnote, "footnote", s),
+      "data-selectable": s,
+      className: h(u.footnote, p, "tcn-footnote"),
       style: i,
       "data-size": d,
-      children: p
+      children: c
     }
   );
 }

package/dist/typography/footnote/footnote.js.map

@@ -1 +1 @@
-{"version":3,"file":"footnote.js","sources":["../../../src/typography/footnote/footnote.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './footnote.module.css';\n\nexport interface FootnoteOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type FootnoteProps = WithDetailedHTMLProps<FootnoteOwnProps, 'div'>;\n\nexport function Footnote({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: FootnoteProps) {\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['footnote'], 'footnote', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["Footnote","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAS;AAAA,EACvB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAkB;AAChB,SAAID,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWE,EAAKC,EAAO,UAAa,YAAYV,CAAS;AAAA,MACzD,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"footnote.js","sources":["../../../src/typography/footnote/footnote.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './footnote.module.css';\n\nexport interface FootnoteOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type FootnoteProps = WithDetailedHTMLProps<FootnoteOwnProps, 'div'>;\n\nexport function Footnote({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: FootnoteProps) {\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['footnote'], className, 'tcn-footnote')}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["Footnote","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAS;AAAA,EACvB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAkB;AAChB,SAAID,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWE,EAAKC,EAAO,UAAaV,GAAW,cAAc;AAAA,MAC7D,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}