@tcn/ui 0.3.0 → 0.3.1

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

@@ -205,6 +205,12 @@ legend {
   --on-action: 0, 0%, 100%;
   --material: 0, 0%, 100%;
   --on-material: 213, 35.6%, 34.7%;
+
+  --action-dangerous: 0, 90%, 50%;
+  --action-cautious: 53, 90%, 60%;
+  --action-neutral: var(--action);
+  --action-suggested: 202, 90%, 40%;
+  --action-encouraged: 120, 90%, 40%;
 }
 
 * {
@@ -221,7 +227,7 @@ legend {
     background 0.1s,
     color 0.1s;
 
-  --act: hsl(var(--action));
+  --act: hsl(var(--interactive-color, var(--action)));
   --on-act: hsl(var(--on-action));
   /* Could use hsl here if we made three color variables for each of the hsl values */
   --act-down: color-mix(in srgb, var(--act), black 8%);
@@ -314,6 +320,32 @@ legend {
 }
 
 /* Button */
+
+.tcn-base-button {
+  --action: var(var(--button-color), var(--action));
+}
+
+.tcn-base-button[data-severity="dangerous"] {
+  --action: var(--action-dangerous);
+}
+
+.tcn-base-button[data-severity="cautious"] {
+  --action: var(--action-cautious);
+  --on-action: var(--on-material);
+}
+
+/* .tcn-base-button[data-severity="neutral"] {
+  --action: var(--action-neutral);
+} */
+
+.tcn-base-button[data-severity="suggested"] {
+  --action: var(--action-suggested);
+}
+
+.tcn-base-button[data-severity="encouraged"] {
+  --action: var(--action-encouraged);
+}
+
 .tcn-button {
   border-radius: 4px;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"/* 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/* ===== CSS VARIABLES ===== */\\n:root {\\n  --scalar: 1;\\n  --accent-color: #cd6b2c;\\n\\n  /* Typography */\\n  --font-color: #395578;\\n  --font-family: \\\"Lato\\\", sans-serif;\\n  --font-size: 12px;\\n\\n  /* Spacing */\\n  --gap-small: 4px;\\n  --gap-medium: 8px;\\n  --gap-large: 16px;\\n\\n  --padding-small: 4px;\\n  --padding-medium: 8px;\\n  --padding-large: 16px;\\n\\n  /* Status Colors */\\n  --status-color-disabled: #7f7f7f;\\n  --status-color-info: #008cff;\\n  --status-color-warning: #ffff00;\\n  --status-color-positive: #00ff00;\\n  --status-color-error: #ff0000;\\n\\n  --async-color-initial: #c0c0c0;\\n  --async-color-pending: #008cff;\\n  --async-color-success: #00ff00;\\n  --async-color-failed: #ff0000;\\n\\n  /* Shape */\\n  --shape-radius-small: 2px;\\n  --shape-radius-medium: 4px;\\n  --shape-radius-large: 8px;\\n\\n  /* Palette */\\n  --primary-color-faint: #c0c0c0;\\n  --primary-color: #008cff;\\n  --primary-color-strong: #008cff;\\n\\n  --secondary-color-faint: #c0c0c0;\\n  --secondary-color: #008cff;\\n  --secondary-color-strong: #008cff;\\n\\n  --tertiary-color-faint: #c0c0c0;\\n  --tertiary-color: #008cff;\\n  --tertiary-color-strong: #008cff;\\n\\n  --quaternary-color-faint: #c0c0c0;\\n  --quaternary-color: #008cff;\\n  --quaternary-color-strong: #008cff;\\n\\n  --background-color-primary: #ffffff;\\n  --background-color-secondary: #ffffff;\\n  --background-color-tertiary: #ffffff;\\n  --background-color-quaternary: #ffffff;\\n\\n  --foreground-color-primary: #aaa;\\n  --foreground-color-secondary: #222222;\\n  --foreground-color-tertiary: #222222;\\n  --foreground-color-quaternary: #222222;\\n\\n  --material-disabled: #d3d3d3;\\n  --material-secondary-dark: 197 29.1% 40.4%;\\n  --material-tan: 33, 22%, 84%;\\n\\n  /* Default Material */\\n  --action: 23, 65%, 49%;\\n  --on-action: 0, 0%, 100%;\\n  --material: 0, 0%, 100%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n* {\\n  position: relative;\\n  box-sizing: border-box;\\n}\\n/* ===== Actions ===== */\\n\\n.tcn-interactive {\\n  cursor: pointer;\\n  user-select: none;\\n  transition:\\n    transform 0.1s,\\n    background 0.1s,\\n    color 0.1s;\\n\\n  --act: hsl(var(--action));\\n  --on-act: hsl(var(--on-action));\\n  /* Could use hsl here if we made three color variables for each of the hsl values */\\n  --act-down: color-mix(in srgb, var(--act), black 8%);\\n  --act-raised: color-mix(in srgb, var(--act), white 8%);\\n  --act-faint: hsla(var(--action), 0.2);\\n  --on-mat: hsl(var(--on-material));\\n  --on-mat-faint: hsla(var(--on-material), 0.2);\\n  --mat: hsl(var(--material));\\n  --mat-down: color-mix(in srgb, var(--mat), black 8%);\\n  --mat-raised: color-mix(in srgb, var(--mat), white 8%);\\n}\\n\\n.tcn-interactive[data-is-disabled=\\\"true\\\"] {\\n  pointer-events: none;\\n  cursor: not-allowed;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"] {\\n  background: var(--act);\\n  color: var(--on-act);\\n  border: 1px solid var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:focus-visible {\\n  outline: 2px dashed var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n  background: var(--material-disabled);\\n  color: white;\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:hover {\\n  background: var(--act-raised);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:active {\\n  background: var(--act-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:hover {\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid transparent;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:hover {\\n  text-decoration: underline;\\n  text-decoration-color: var(--on-mat);\\n  text-decoration-thickness: 1px;\\n  text-underline-offset: 4px;\\n  color: var(--on-mat);\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n/* Button */\\n.tcn-button {\\n  border-radius: 4px;\\n}\\n\\n.tcn-button[data-size=\\\"sm\\\"] {\\n  padding: 0px 8px;\\n  min-height: 22px;\\n}\\n\\n.tcn-button[data-size=\\\"md\\\"] {\\n  padding: 0px 12px;\\n  min-height: 26px;\\n}\\n\\n.tcn-button[data-size=\\\"lg\\\"] {\\n  padding: 0px 16px;\\n  min-height: 32px;\\n}\\n\\n.tcn-button:hover {\\n  transform: translateY(-1px);\\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-button:active {\\n  transform: translateY(1px);\\n  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-slim-button {\\n  height: auto;\\n  width: auto;\\n  padding: 0;\\n}\\n\\n.tcn-slim-button[data-size=\\\"sm\\\"] {\\n  min-height: 12px;\\n  min-width: 12px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 10px;\\n    min-width: 10px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"md\\\"] {\\n  min-height: 18px;\\n  min-width: 18px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 14px;\\n    min-width: 14px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"lg\\\"] {\\n  min-height: 24px;\\n  min-width: 24px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 20px;\\n    min-width: 20px;\\n  }\\n}\\n\\n.material {\\n  background-color: hsl(var(--material));\\n  color: hsl(var(--on-material));\\n}\\n\\n/* ===== SURFACES ===== */\\n.tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n  .tcn-drag-handle {\\n    cursor: move;\\n  }\\n}\\n\\n.tcn-frame[data-is-veil=\\\"true\\\"] {\\n  background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n.tcn-tooltip {\\n  background: rgba(57, 85, 120, 0.85);\\n  box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n  color: rgba(255, 255, 255, 1);\\n  border-radius: var(--shape-radius-medium);\\n  padding: var(--padding-medium);\\n}\\n\\n.tcn-list {\\n  gap: var(--gap-medium);\\n  .tcn-item {\\n    height: 24px;\\n    padding: 0px var(--padding-medium);\\n    border-radius: var(--shape-radius-medium);\\n  }\\n}\\n\\n/* Scaffold: */\\n.tcn-scaffold {\\n  --scaffold-v-inset: var(--v-inset, var(--padding-large));\\n  --scaffold-header-size: var(--header-size, 40px);\\n  --scaffold-footer-size: var(--footer-size, 40px);\\n  --scaffold-utility-bar-size: var(--utility-bar-size, 32px);\\n  --scaffold-divide-footer: var(--divide-footer, 1);\\n  --scaffold-divide-header: var(--divide-header, 1);\\n\\n  :where(.tcn-header) {\\n    min-height: var(--scaffold-header-size);\\n    padding: 0 var(--scaffold-v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  /* Border appears on body only when it follows header or utility-bar */\\n  :where(.tcn-header) + :where(.tcn-body),\\n  :where(.tcn-utility-bar) + :where(.tcn-body) {\\n    border-top: calc(var(--scaffold-divide-header) * 1px) solid\\n      var(--foreground-color-primary);\\n  }\\n\\n  /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 */\\n  :where(.tcn-body) + :where(.tcn-footer) {\\n    border-top: calc(var(--scaffold-divide-footer) * 1px) solid\\n      var(--foreground-color-primary);\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: var(--scaffold-utility-bar-size);\\n    padding: 0 var(--scaffold-v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--scaffold-v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: var(--scaffold-footer-size);\\n    padding: 0 var(--scaffold-v-inset);\\n  }\\n}\\n\\n.tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n  background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n/* MODAL: */\\n.tcn-modal {\\n  --divide-header: 0;\\n\\n  :where(.tcn-scaffold) {\\n    border-radius: var(--shape-radius-medium);\\n    background-color: var(--background-color-primary);\\n    overflow: hidden;\\n    border: 1px solid var(--foreground-color-primary);\\n  }\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n}\\n\\n/* WINDOW: */\\n.tcn-window {\\n  --divide-header: 0;\\n\\n  :where(.tcn-scaffold) {\\n    box-shadow: 0px 4px 34px 0px #00000096;\\n    border-radius: var(--shape-radius-medium);\\n    background-color: var(--background-color-primary);\\n    overflow: hidden;\\n    border: 2px solid white;\\n  }\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n}\\n\\n.tcn-pop-confirm {\\n  --divide-header: 0;\\n  --v-inset: var(--padding-medium);\\n\\n  :where(.tcn-scaffold) {\\n    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n    border-radius: var(--shape-radius-medium);\\n    background-color: var(--background-color-primary);\\n    overflow: hidden;\\n  }\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    min-height: 32px;\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n}\\n\\n/* PANEL */\\n.tcn-panel {\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  overflow: hidden;\\n}\\n\\n/* Card */\\n.tcn-card {\\n  --header-size: 32px;\\n  --footer-size: 32px;\\n  --utility-bar-size: 24px;\\n  --divide-header: 0;\\n\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  border: 1px solid var(--foreground-color-primary);\\n  overflow: hidden;\\n\\n  :where(.tcn-header) {\\n    /* TODO: This should be a variable */\\n    background-color: #ecf4fb;\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    /* TODO: This should be a variable */\\n    background-color: #ecf4fb;\\n  }\\n}\\n\"","import css from './ergo_theme.css?raw';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCEFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}
+{"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"/* 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/* ===== CSS VARIABLES ===== */\\n:root {\\n  --scalar: 1;\\n  --accent-color: #cd6b2c;\\n\\n  /* Typography */\\n  --font-color: #395578;\\n  --font-family: \\\"Lato\\\", sans-serif;\\n  --font-size: 12px;\\n\\n  /* Spacing */\\n  --gap-small: 4px;\\n  --gap-medium: 8px;\\n  --gap-large: 16px;\\n\\n  --padding-small: 4px;\\n  --padding-medium: 8px;\\n  --padding-large: 16px;\\n\\n  /* Status Colors */\\n  --status-color-disabled: #7f7f7f;\\n  --status-color-info: #008cff;\\n  --status-color-warning: #ffff00;\\n  --status-color-positive: #00ff00;\\n  --status-color-error: #ff0000;\\n\\n  --async-color-initial: #c0c0c0;\\n  --async-color-pending: #008cff;\\n  --async-color-success: #00ff00;\\n  --async-color-failed: #ff0000;\\n\\n  /* Shape */\\n  --shape-radius-small: 2px;\\n  --shape-radius-medium: 4px;\\n  --shape-radius-large: 8px;\\n\\n  /* Palette */\\n  --primary-color-faint: #c0c0c0;\\n  --primary-color: #008cff;\\n  --primary-color-strong: #008cff;\\n\\n  --secondary-color-faint: #c0c0c0;\\n  --secondary-color: #008cff;\\n  --secondary-color-strong: #008cff;\\n\\n  --tertiary-color-faint: #c0c0c0;\\n  --tertiary-color: #008cff;\\n  --tertiary-color-strong: #008cff;\\n\\n  --quaternary-color-faint: #c0c0c0;\\n  --quaternary-color: #008cff;\\n  --quaternary-color-strong: #008cff;\\n\\n  --background-color-primary: #ffffff;\\n  --background-color-secondary: #ffffff;\\n  --background-color-tertiary: #ffffff;\\n  --background-color-quaternary: #ffffff;\\n\\n  --foreground-color-primary: #aaa;\\n  --foreground-color-secondary: #222222;\\n  --foreground-color-tertiary: #222222;\\n  --foreground-color-quaternary: #222222;\\n\\n  --material-disabled: #d3d3d3;\\n  --material-secondary-dark: 197 29.1% 40.4%;\\n  --material-tan: 33, 22%, 84%;\\n\\n  /* Default Material */\\n  --action: 23, 65%, 49%;\\n  --on-action: 0, 0%, 100%;\\n  --material: 0, 0%, 100%;\\n  --on-material: 213, 35.6%, 34.7%;\\n\\n  --action-dangerous: 0, 90%, 50%;\\n  --action-cautious: 53, 90%, 60%;\\n  --action-neutral: var(--action);\\n  --action-suggested: 202, 90%, 40%;\\n  --action-encouraged: 120, 90%, 40%;\\n}\\n\\n* {\\n  position: relative;\\n  box-sizing: border-box;\\n}\\n/* ===== Actions ===== */\\n\\n.tcn-interactive {\\n  cursor: pointer;\\n  user-select: none;\\n  transition:\\n    transform 0.1s,\\n    background 0.1s,\\n    color 0.1s;\\n\\n  --act: hsl(var(--interactive-color, var(--action)));\\n  --on-act: hsl(var(--on-action));\\n  /* Could use hsl here if we made three color variables for each of the hsl values */\\n  --act-down: color-mix(in srgb, var(--act), black 8%);\\n  --act-raised: color-mix(in srgb, var(--act), white 8%);\\n  --act-faint: hsla(var(--action), 0.2);\\n  --on-mat: hsl(var(--on-material));\\n  --on-mat-faint: hsla(var(--on-material), 0.2);\\n  --mat: hsl(var(--material));\\n  --mat-down: color-mix(in srgb, var(--mat), black 8%);\\n  --mat-raised: color-mix(in srgb, var(--mat), white 8%);\\n}\\n\\n.tcn-interactive[data-is-disabled=\\\"true\\\"] {\\n  pointer-events: none;\\n  cursor: not-allowed;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"] {\\n  background: var(--act);\\n  color: var(--on-act);\\n  border: 1px solid var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:focus-visible {\\n  outline: 2px dashed var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n  background: var(--material-disabled);\\n  color: white;\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:hover {\\n  background: var(--act-raised);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:active {\\n  background: var(--act-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:hover {\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid transparent;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:hover {\\n  text-decoration: underline;\\n  text-decoration-color: var(--on-mat);\\n  text-decoration-thickness: 1px;\\n  text-underline-offset: 4px;\\n  color: var(--on-mat);\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n/* Button */\\n\\n.tcn-base-button {\\n  --action: var(var(--button-color), var(--action));\\n}\\n\\n.tcn-base-button[data-severity=\\\"dangerous\\\"] {\\n  --action: var(--action-dangerous);\\n}\\n\\n.tcn-base-button[data-severity=\\\"cautious\\\"] {\\n  --action: var(--action-cautious);\\n  --on-action: var(--on-material);\\n}\\n\\n/* .tcn-base-button[data-severity=\\\"neutral\\\"] {\\n  --action: var(--action-neutral);\\n} */\\n\\n.tcn-base-button[data-severity=\\\"suggested\\\"] {\\n  --action: var(--action-suggested);\\n}\\n\\n.tcn-base-button[data-severity=\\\"encouraged\\\"] {\\n  --action: var(--action-encouraged);\\n}\\n\\n.tcn-button {\\n  border-radius: 4px;\\n}\\n\\n.tcn-button[data-size=\\\"sm\\\"] {\\n  padding: 0px 8px;\\n  min-height: 22px;\\n}\\n\\n.tcn-button[data-size=\\\"md\\\"] {\\n  padding: 0px 12px;\\n  min-height: 26px;\\n}\\n\\n.tcn-button[data-size=\\\"lg\\\"] {\\n  padding: 0px 16px;\\n  min-height: 32px;\\n}\\n\\n.tcn-button:hover {\\n  transform: translateY(-1px);\\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-button:active {\\n  transform: translateY(1px);\\n  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-slim-button {\\n  height: auto;\\n  width: auto;\\n  padding: 0;\\n}\\n\\n.tcn-slim-button[data-size=\\\"sm\\\"] {\\n  min-height: 12px;\\n  min-width: 12px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 10px;\\n    min-width: 10px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"md\\\"] {\\n  min-height: 18px;\\n  min-width: 18px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 14px;\\n    min-width: 14px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"lg\\\"] {\\n  min-height: 24px;\\n  min-width: 24px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 20px;\\n    min-width: 20px;\\n  }\\n}\\n\\n.material {\\n  background-color: hsl(var(--material));\\n  color: hsl(var(--on-material));\\n}\\n\\n/* ===== SURFACES ===== */\\n.tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n  .tcn-drag-handle {\\n    cursor: move;\\n  }\\n}\\n\\n.tcn-frame[data-is-veil=\\\"true\\\"] {\\n  background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n.tcn-tooltip {\\n  background: rgba(57, 85, 120, 0.85);\\n  box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n  color: rgba(255, 255, 255, 1);\\n  border-radius: var(--shape-radius-medium);\\n  padding: var(--padding-medium);\\n}\\n\\n.tcn-list {\\n  gap: var(--gap-medium);\\n  .tcn-item {\\n    height: 24px;\\n    padding: 0px var(--padding-medium);\\n    border-radius: var(--shape-radius-medium);\\n  }\\n}\\n\\n/* Scaffold: */\\n.tcn-scaffold {\\n  --scaffold-v-inset: var(--v-inset, var(--padding-large));\\n  --scaffold-header-size: var(--header-size, 40px);\\n  --scaffold-footer-size: var(--footer-size, 40px);\\n  --scaffold-utility-bar-size: var(--utility-bar-size, 32px);\\n  --scaffold-divide-footer: var(--divide-footer, 1);\\n  --scaffold-divide-header: var(--divide-header, 1);\\n\\n  :where(.tcn-header) {\\n    min-height: var(--scaffold-header-size);\\n    padding: 0 var(--scaffold-v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  /* Border appears on body only when it follows header or utility-bar */\\n  :where(.tcn-header) + :where(.tcn-body),\\n  :where(.tcn-utility-bar) + :where(.tcn-body) {\\n    border-top: calc(var(--scaffold-divide-header) * 1px) solid\\n      var(--foreground-color-primary);\\n  }\\n\\n  /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 */\\n  :where(.tcn-body) + :where(.tcn-footer) {\\n    border-top: calc(var(--scaffold-divide-footer) * 1px) solid\\n      var(--foreground-color-primary);\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: var(--scaffold-utility-bar-size);\\n    padding: 0 var(--scaffold-v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--scaffold-v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: var(--scaffold-footer-size);\\n    padding: 0 var(--scaffold-v-inset);\\n  }\\n}\\n\\n.tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n  background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n/* MODAL: */\\n.tcn-modal {\\n  --divide-header: 0;\\n\\n  :where(.tcn-scaffold) {\\n    border-radius: var(--shape-radius-medium);\\n    background-color: var(--background-color-primary);\\n    overflow: hidden;\\n    border: 1px solid var(--foreground-color-primary);\\n  }\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n}\\n\\n/* WINDOW: */\\n.tcn-window {\\n  --divide-header: 0;\\n\\n  :where(.tcn-scaffold) {\\n    box-shadow: 0px 4px 34px 0px #00000096;\\n    border-radius: var(--shape-radius-medium);\\n    background-color: var(--background-color-primary);\\n    overflow: hidden;\\n    border: 2px solid white;\\n  }\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n}\\n\\n.tcn-pop-confirm {\\n  --divide-header: 0;\\n  --v-inset: var(--padding-medium);\\n\\n  :where(.tcn-scaffold) {\\n    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n    border-radius: var(--shape-radius-medium);\\n    background-color: var(--background-color-primary);\\n    overflow: hidden;\\n  }\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    min-height: 32px;\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n}\\n\\n/* PANEL */\\n.tcn-panel {\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  overflow: hidden;\\n}\\n\\n/* Card */\\n.tcn-card {\\n  --header-size: 32px;\\n  --footer-size: 32px;\\n  --utility-bar-size: 24px;\\n  --divide-header: 0;\\n\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  border: 1px solid var(--foreground-color-primary);\\n  overflow: hidden;\\n\\n  :where(.tcn-header) {\\n    /* TODO: This should be a variable */\\n    background-color: #ecf4fb;\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    /* TODO: This should be a variable */\\n    background-color: #ecf4fb;\\n  }\\n}\\n\"","import css from './ergo_theme.css?raw';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCEFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}

package/dist/tokens/badge/badge.js

@@ -1,14 +1,14 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import h from "react";
+import u from "react";
 import { clsx as o } from "clsx";
-import { Spacer as u } from "../../stacks/spacer.js";
+import { Spacer as h } from "../../stacks/spacer.js";
 import { VStack as c } 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 }, j = h.forwardRef(
+import '../../badge.css';const s = "_badge-bubble_7fe9ed5", f = { "badge-bubble": s }, S = u.forwardRef(
   ({
-    value: i,
-    children: a,
+    value: a,
+    children: i,
     backgroundColor: b,
     textColor: d,
     className: l,
@@ -26,7 +26,7 @@ import '../../badge.css';const s = "_badge-bubble_7fe9ed5", f = { "badge-bubble"
       className: o("badge", l),
       ...n,
       children: [
-        /* @__PURE__ */ e(r, { zIndex: 0, inline: !0, width: "auto", height: "auto", children: a }),
+        /* @__PURE__ */ e(r, { zIndex: 0, inline: !0, width: "auto", height: "auto", children: i }),
         /* @__PURE__ */ t(c, { zIndex: 1, height: "100%", width: "auto", children: [
           /* @__PURE__ */ e(
             g,
@@ -35,16 +35,16 @@ import '../../badge.css';const s = "_badge-bubble_7fe9ed5", f = { "badge-bubble"
               backgroundColor: b,
               textColor: d,
               elevate: !0,
-              children: i
+              children: a
             }
           ),
-          /* @__PURE__ */ e(u, { height: "100%" })
+          /* @__PURE__ */ e(h, { height: "100%" })
         ] })
       ]
     }
   )
 );
 export {
-  j as Badge
+  S as Badge
 };
 //# sourceMappingURL=badge.js.map

package/dist/tokens/bubble/bubble.js

@@ -3,24 +3,24 @@ import { clsx as s } from "clsx";
 import u from "react";
 import { theme as f } from "../../themes/theme_variables.js";
 import "../../themes/stylesheets/reset.js";
-import { HStack as p } from "../../stacks/h_stack.js";
-import '../../bubble.css';const d = "_bubble_d3b757e", h = { bubble: d }, R = u.forwardRef(function({
+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,
   style: o,
   backgroundColor: b = f.accentColor,
-  textColor: r = "#fff",
-  size: l = "md",
+  textColor: l = "#fff",
+  size: r = "md",
   elevate: a = !1,
   ...c
 }, i) {
   const n = {
-    "--bubble-text-color": r,
+    "--bubble-text-color": l,
     "--bubble-color": b,
     ...o
   };
   return /* @__PURE__ */ m(
-    p,
+    d,
     {
       inline: !0,
       className: s(h.bubble, "bubble", t),
@@ -30,7 +30,7 @@ import '../../bubble.css';const d = "_bubble_d3b757e", h = { bubble: d }, R = u.
       style: n,
       hAlign: "center",
       vAlign: "center",
-      "data-size": l,
+      "data-size": r,
       "data-elevate": a,
       padding: "4px",
       ...c,
@@ -39,6 +39,6 @@ import '../../bubble.css';const d = "_bubble_d3b757e", h = { bubble: d }, R = u.
   );
 });
 export {
-  R as Bubble
+  B as Bubble
 };
 //# sourceMappingURL=bubble.js.map

package/dist/tokens/chip/chip.js

@@ -2,9 +2,9 @@ import { jsx as m } 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 s } from "../../themes/theme_variables.js";
+import { theme as l } from "../../themes/theme_variables.js";
 import "../../themes/stylesheets/reset.js";
-import '../../chip.css';const l = "_chip_35f6f0b", a = { chip: l }, R = h.forwardRef(function({ children: t, style: o, className: i, color: r = s.accentColor, ...c }, e) {
+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 = {
     "--chip-color": r,
     ...o
@@ -25,6 +25,6 @@ import '../../chip.css';const l = "_chip_35f6f0b", a = { chip: l }, R = h.forwar
   );
 });
 export {
-  R as Chip
+  w as Chip
 };
 //# sourceMappingURL=chip.js.map

package/dist/utils/click_away_listener.js

@@ -1,4 +1,4 @@
-import m, { useRef as p, useCallback as L, useEffect as W } from "react";
+import d, { useRef as p, useCallback as L, useEffect as W } from "react";
 import { useForkRef as T } from "./hooks/use_fork_ref.js";
 const C = {
   onClick: "click",
@@ -8,16 +8,16 @@ const C = {
   onTouchStart: "touchstart",
   onTouchEnd: "touchend"
 };
-function w(o, t, d, s) {
-  if (!d)
+function w(o, t, m, s) {
+  if (!m)
     return !0;
   let n;
   return o.composedPath ? n = [t, ...s].find((e) => o.composedPath().indexOf(e) > -1) !== void 0 : n = !document.documentElement.contains(o.target) || [t, ...s].find((e) => e?.contains(o.target)) !== void 0, n;
 }
-const F = m.forwardRef(
-  function({ children: t, mouseEvent: d, touchEvent: s, onClickAway: n, refs: e = [], isException: a }, R) {
-    const f = p(null), v = p(!0), E = C[d || "onClick"], l = g[s || "onTouchEnd"], k = T(R, f, t.ref), i = m.useRef(!1);
-    m.useEffect(() => (window.setTimeout(() => {
+const F = d.forwardRef(
+  function({ children: t, mouseEvent: m, touchEvent: s, onClickAway: n, refs: e = [], isException: a }, R) {
+    const f = p(null), v = p(!0), l = C[m || "onClick"], E = g[s || "onTouchEnd"], k = T(R, f, t.ref), i = d.useRef(!1);
+    d.useEffect(() => (window.setTimeout(() => {
       i.current = !0;
     }, 0), () => {
       i.current = !1;
@@ -44,9 +44,9 @@ const F = m.forwardRef(
       },
       [n, e, a]
     );
-    return W(() => (document.addEventListener("mousedown", r), document.addEventListener("touchstart", r), document.addEventListener(E, c), document.addEventListener(l, c), () => {
-      document.removeEventListener("mousedown", r), document.removeEventListener("touchstart", r), document.removeEventListener(E, c), document.removeEventListener(l, c);
-    }), [l, E, c, r]), m.cloneElement(t, {
+    return W(() => (document.addEventListener("mousedown", r), document.addEventListener("touchstart", r), document.addEventListener(l, c), document.addEventListener(E, c), () => {
+      document.removeEventListener("mousedown", r), document.removeEventListener("touchstart", r), document.removeEventListener(l, c), document.removeEventListener(E, c);
+    }), [E, l, c, r]), d.cloneElement(t, {
       ...t.props,
       ref: k
     });

package/dist/utils/click_away_listener.js.map

@@ -1 +1 @@
-{"version":3,"file":"click_away_listener.js","sources":["../../src/utils/click_away_listener.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef } from 'react';\nimport { useForkRef } from './hooks/use_fork_ref.js';\nexport interface ClickAwayListenerProps {\n  children: React.ReactElement;\n  onClickAway: (event: React.MouseEvent | React.TouchEvent) => void;\n  mouseEvent?: 'onMouseUp' | 'onMouseDown' | 'onClick';\n  touchEvent?: 'onTouchStart' | 'onTouchEnd';\n  isException?: (target: HTMLElement) => boolean;\n  // An array of refs that wont trigger the click away listener\n  refs?: React.RefObject<Element>[];\n}\nconst eventMap = {\n  onClick: 'click',\n  onMouseDown: 'mousedown',\n  onMouseUp: 'mouseup',\n};\nconst touchMap = {\n  onTouchStart: 'touchstart',\n  onTouchEnd: 'touchend',\n};\n\nexport function isEventWithinElement(\n  event: MouseEvent | TouchEvent,\n  node: HTMLElement | null,\n  activated: boolean,\n  refs: (Element | null)[]\n) {\n  if (!activated) {\n    return true;\n  }\n\n  let isWithinElement: boolean;\n\n  if (event.composedPath) {\n    isWithinElement =\n      [node, ...refs].find((ref: any) => {\n        return event.composedPath().indexOf(ref) > -1;\n      }) !== undefined;\n  } else {\n    isWithinElement =\n      !document.documentElement.contains(event.target as any) ||\n      [node, ...refs].find((ref: any) => {\n        return ref?.contains(event.target);\n      }) !== undefined;\n  }\n\n  return isWithinElement;\n}\n\nexport const ClickAwayListener = React.forwardRef<HTMLElement, ClickAwayListenerProps>(\n  function ClickAwayListener(\n    { children, mouseEvent, touchEvent, onClickAway, refs = [], isException },\n    ref\n  ) {\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const startedActionWithinElementRef = useRef<boolean>(true);\n    const DOMMouseEvent = eventMap[mouseEvent || 'onClick'];\n    const DOMTouchEvent = touchMap[touchEvent || 'onTouchEnd'];\n    const newRef = useForkRef(ref, nodeRef, (children as any).ref);\n    const activatedRef = React.useRef(false);\n\n    React.useEffect(() => {\n      // Ensure that this component is not \"activated\" synchronously.\n      // https://github.com/facebook/react/issues/20074\n      window.setTimeout(() => {\n        activatedRef.current = true;\n      }, 0);\n      return () => {\n        activatedRef.current = false;\n      };\n    }, []);\n\n    const trackAction = useCallback(\n      (event: any) => {\n        startedActionWithinElementRef.current = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n      },\n      [refs]\n    );\n\n    const eventHandler = useCallback(\n      (event: any) => {\n        const startedFromWithinElement = startedActionWithinElementRef.current;\n        const isWithinElement = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n\n        if (\n          !isWithinElement &&\n          !startedFromWithinElement &&\n          (!isException || !isException(event.target))\n        ) {\n          onClickAway(event);\n        }\n      },\n      [onClickAway, refs, isException]\n    );\n\n    useEffect(() => {\n      document.addEventListener('mousedown', trackAction);\n      document.addEventListener('touchstart', trackAction);\n      document.addEventListener(DOMMouseEvent, eventHandler);\n      document.addEventListener(DOMTouchEvent, eventHandler);\n      return () => {\n        document.removeEventListener('mousedown', trackAction);\n        document.removeEventListener('touchstart', trackAction);\n        document.removeEventListener(DOMMouseEvent, eventHandler);\n        document.removeEventListener(DOMTouchEvent, eventHandler);\n      };\n    }, [DOMTouchEvent, DOMMouseEvent, eventHandler, trackAction]);\n\n    return React.cloneElement(children, {\n      ...children.props,\n      ref: newRef,\n    });\n  }\n);\n"],"names":["eventMap","touchMap","isEventWithinElement","event","node","activated","refs","isWithinElement","ref","ClickAwayListener","React","children","mouseEvent","touchEvent","onClickAway","isException","nodeRef","useRef","startedActionWithinElementRef","DOMMouseEvent","DOMTouchEvent","newRef","useForkRef","activatedRef","trackAction","useCallback","r","eventHandler","startedFromWithinElement","useEffect"],"mappings":";;AAWA,MAAMA,IAAW;AAAA,EACf,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AACb,GACMC,IAAW;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AACd;AAEO,SAASC,EACdC,GACAC,GACAC,GACAC,GACA;AACA,MAAI,CAACD;AACH,WAAO;AAGT,MAAIE;AAEJ,SAAIJ,EAAM,eACRI,IACE,CAACH,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbL,EAAM,aAAA,EAAe,QAAQK,CAAG,IAAI,EAC5C,MAAM,SAETD,IACE,CAAC,SAAS,gBAAgB,SAASJ,EAAM,MAAa,KACtD,CAACC,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbA,GAAK,SAASL,EAAM,MAAM,CAClC,MAAM,QAGJI;AACT;AAEO,MAAME,IAAoBC,EAAM;AAAA,EACrC,SACE,EAAE,UAAAC,GAAU,YAAAC,GAAY,YAAAC,GAAY,aAAAC,GAAa,MAAAR,IAAO,CAAA,GAAI,aAAAS,EAAA,GAC5DP,GACA;AACA,UAAMQ,IAAUC,EAA2B,IAAI,GACzCC,IAAgCD,EAAgB,EAAI,GACpDE,IAAgBnB,EAASY,KAAc,SAAS,GAChDQ,IAAgBnB,EAASY,KAAc,YAAY,GACnDQ,IAASC,EAAWd,GAAKQ,GAAUL,EAAiB,GAAG,GACvDY,IAAeb,EAAM,OAAO,EAAK;AAEvC,IAAAA,EAAM,UAAU,OAGd,OAAO,WAAW,MAAM;AACtB,MAAAa,EAAa,UAAU;AAAA,IACzB,GAAG,CAAC,GACG,MAAM;AACX,MAAAA,EAAa,UAAU;AAAA,IACzB,IACC,CAAA,CAAE;AAEL,UAAMC,IAAcC;AAAA,MAClB,CAACtB,MAAe;AACd,QAAAe,EAA8B,UAAUhB;AAAA,UACtCC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA;AAAA,MAE3B;AAAA,MACA,CAACpB,CAAI;AAAA,IAAA,GAGDqB,IAAeF;AAAA,MACnB,CAACtB,MAAe;AACd,cAAMyB,IAA2BV,EAA8B;AAQ/D,QACE,CARsBhB;AAAA,UACtBC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA,KAKvB,CAACE,MACA,CAACb,KAAe,CAACA,EAAYZ,EAAM,MAAM,MAE1CW,EAAYX,CAAK;AAAA,MAErB;AAAA,MACA,CAACW,GAAaR,GAAMS,CAAW;AAAA,IAAA;AAGjC,WAAAc,EAAU,OACR,SAAS,iBAAiB,aAAaL,CAAW,GAClD,SAAS,iBAAiB,cAAcA,CAAW,GACnD,SAAS,iBAAiBL,GAAeQ,CAAY,GACrD,SAAS,iBAAiBP,GAAeO,CAAY,GAC9C,MAAM;AACX,eAAS,oBAAoB,aAAaH,CAAW,GACrD,SAAS,oBAAoB,cAAcA,CAAW,GACtD,SAAS,oBAAoBL,GAAeQ,CAAY,GACxD,SAAS,oBAAoBP,GAAeO,CAAY;AAAA,IAC1D,IACC,CAACP,GAAeD,GAAeQ,GAAcH,CAAW,CAAC,GAErDd,EAAM,aAAaC,GAAU;AAAA,MAClC,GAAGA,EAAS;AAAA,MACZ,KAAKU;AAAA,IAAA,CACN;AAAA,EACH;AACF;"}
+{"version":3,"file":"click_away_listener.js","sources":["../../src/utils/click_away_listener.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef } from 'react';\nimport { useForkRef } from './hooks/use_fork_ref.js';\nexport interface ClickAwayListenerProps {\n  children: React.ReactElement;\n  onClickAway: (event: React.MouseEvent | React.TouchEvent) => void;\n  mouseEvent?: 'onMouseUp' | 'onMouseDown' | 'onClick';\n  touchEvent?: 'onTouchStart' | 'onTouchEnd';\n  isException?: (target: HTMLElement) => boolean;\n  // An array of refs that wont trigger the click away listener\n  refs?: React.RefObject<Element>[];\n}\nconst eventMap = {\n  onClick: 'click',\n  onMouseDown: 'mousedown',\n  onMouseUp: 'mouseup',\n};\nconst touchMap = {\n  onTouchStart: 'touchstart',\n  onTouchEnd: 'touchend',\n};\n\nexport function isEventWithinElement(\n  event: MouseEvent | TouchEvent,\n  node: HTMLElement | null,\n  activated: boolean,\n  refs: (Element | null)[]\n) {\n  if (!activated) {\n    return true;\n  }\n\n  let isWithinElement: boolean;\n\n  if (event.composedPath) {\n    isWithinElement =\n      [node, ...refs].find((ref: any) => {\n        return event.composedPath().indexOf(ref) > -1;\n      }) !== undefined;\n  } else {\n    isWithinElement =\n      !document.documentElement.contains(event.target as any) ||\n      [node, ...refs].find((ref: any) => {\n        return ref?.contains(event.target);\n      }) !== undefined;\n  }\n\n  return isWithinElement;\n}\n\nexport const ClickAwayListener = React.forwardRef<HTMLElement, ClickAwayListenerProps>(\n  function ClickAwayListener(\n    { children, mouseEvent, touchEvent, onClickAway, refs = [], isException },\n    ref\n  ) {\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const startedActionWithinElementRef = useRef<boolean>(true);\n    const DOMMouseEvent = eventMap[mouseEvent || 'onClick'];\n    const DOMTouchEvent = touchMap[touchEvent || 'onTouchEnd'];\n    const newRef = useForkRef(ref, nodeRef, (children as any).ref);\n    const activatedRef = React.useRef(false);\n\n    React.useEffect(() => {\n      // Ensure that this component is not \"activated\" synchronously.\n      // https://github.com/facebook/react/issues/20074\n      window.setTimeout(() => {\n        activatedRef.current = true;\n      }, 0);\n      return () => {\n        activatedRef.current = false;\n      };\n    }, []);\n\n    const trackAction = useCallback(\n      (event: any) => {\n        startedActionWithinElementRef.current = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n      },\n      [refs]\n    );\n\n    const eventHandler = useCallback(\n      (event: any) => {\n        const startedFromWithinElement = startedActionWithinElementRef.current;\n        const isWithinElement = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n\n        if (\n          !isWithinElement &&\n          !startedFromWithinElement &&\n          (!isException || !isException(event.target))\n        ) {\n          onClickAway(event);\n        }\n      },\n      [onClickAway, refs, isException]\n    );\n\n    useEffect(() => {\n      document.addEventListener('mousedown', trackAction);\n      document.addEventListener('touchstart', trackAction);\n      document.addEventListener(DOMMouseEvent, eventHandler);\n      document.addEventListener(DOMTouchEvent, eventHandler);\n      return () => {\n        document.removeEventListener('mousedown', trackAction);\n        document.removeEventListener('touchstart', trackAction);\n        document.removeEventListener(DOMMouseEvent, eventHandler);\n        document.removeEventListener(DOMTouchEvent, eventHandler);\n      };\n    }, [DOMTouchEvent, DOMMouseEvent, eventHandler, trackAction]);\n\n    return React.cloneElement(children, {\n      ...children.props,\n      ref: newRef,\n    });\n  }\n);\n"],"names":["eventMap","touchMap","isEventWithinElement","event","node","activated","refs","isWithinElement","ref","ClickAwayListener","React","children","mouseEvent","touchEvent","onClickAway","isException","nodeRef","useRef","startedActionWithinElementRef","DOMMouseEvent","DOMTouchEvent","newRef","useForkRef","activatedRef","trackAction","useCallback","r","eventHandler","startedFromWithinElement","useEffect"],"mappings":";;AAWA,MAAMA,IAAW;AAAA,EACf,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AACb,GACMC,IAAW;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AACd;AAEO,SAASC,EACdC,GACAC,GACAC,GACAC,GACA;AACA,MAAI,CAACD;AACH,WAAO;AAGT,MAAIE;AAEJ,SAAIJ,EAAM,eACRI,IACE,CAACH,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbL,EAAM,aAAA,EAAe,QAAQK,CAAG,IAAI,EAC5C,MAAM,SAETD,IACE,CAAC,SAAS,gBAAgB,SAASJ,EAAM,MAAa,KACtD,CAACC,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbA,GAAK,SAASL,EAAM,MAAM,CAClC,MAAM,QAGJI;AACT;AAEO,MAAME,IAAoBC,EAAM;AAAA,EACrC,SACE,EAAE,UAAAC,GAAU,YAAAC,GAAY,YAAAC,GAAY,aAAAC,GAAa,MAAAR,IAAO,CAAA,GAAI,aAAAS,EAAA,GAC5DP,GACA;AACA,UAAMQ,IAAUC,EAA2B,IAAI,GACzCC,IAAgCD,EAAgB,EAAI,GACpDE,IAAgBnB,EAASY,KAAc,SAAS,GAChDQ,IAAgBnB,EAASY,KAAc,YAAY,GACnDQ,IAASC,EAAWd,GAAKQ,GAAUL,EAAiB,GAAG,GACvDY,IAAeb,EAAM,OAAO,EAAK;AAEvCA,IAAAA,EAAM,UAAU,OAGd,OAAO,WAAW,MAAM;AACtB,MAAAa,EAAa,UAAU;AAAA,IACzB,GAAG,CAAC,GACG,MAAM;AACX,MAAAA,EAAa,UAAU;AAAA,IACzB,IACC,CAAA,CAAE;AAEL,UAAMC,IAAcC;AAAA,MAClB,CAACtB,MAAe;AACd,QAAAe,EAA8B,UAAUhB;AAAA,UACtCC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA;AAAA,MAE3B;AAAA,MACA,CAACpB,CAAI;AAAA,IAAA,GAGDqB,IAAeF;AAAA,MACnB,CAACtB,MAAe;AACd,cAAMyB,IAA2BV,EAA8B;AAQ/D,QACE,CARsBhB;AAAA,UACtBC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA,KAKvB,CAACE,MACA,CAACb,KAAe,CAACA,EAAYZ,EAAM,MAAM,MAE1CW,EAAYX,CAAK;AAAA,MAErB;AAAA,MACA,CAACW,GAAaR,GAAMS,CAAW;AAAA,IAAA;AAGjC,WAAAc,EAAU,OACR,SAAS,iBAAiB,aAAaL,CAAW,GAClD,SAAS,iBAAiB,cAAcA,CAAW,GACnD,SAAS,iBAAiBL,GAAeQ,CAAY,GACrD,SAAS,iBAAiBP,GAAeO,CAAY,GAC9C,MAAM;AACX,eAAS,oBAAoB,aAAaH,CAAW,GACrD,SAAS,oBAAoB,cAAcA,CAAW,GACtD,SAAS,oBAAoBL,GAAeQ,CAAY,GACxD,SAAS,oBAAoBP,GAAeO,CAAY;AAAA,IAC1D,IACC,CAACP,GAAeD,GAAeQ,GAAcH,CAAW,CAAC,GAErDd,EAAM,aAAaC,GAAU;AAAA,MAClC,GAAGA,EAAS;AAAA,MACZ,KAAKU;AAAA,IAAA,CACN;AAAA,EACH;AACF;"}

package/dist/utils/dnd/draggable/draggable.js

@@ -7,19 +7,19 @@ import '../../../draggable.css';const c = "_draggable_db40376", m = { draggable:
   children: a,
   draggable: t = !0
 }) => {
-  const o = p({}), r = n(
+  const o = p({}), e = n(
     () => ({
       "--position-x": `${o.position.x}px`,
       "--position-y": `${o.position.y}px`
     }),
     [o.position]
-  ), e = i.cloneElement(a, {
+  ), r = i.cloneElement(a, {
     className: l("tcn-draggable", m.draggable, a.props.className),
-    style: { ...r, ...a.props.style },
+    style: { ...e, ...a.props.style },
     "data-is-dragging": o.isDragging,
     "data-is-draggable": t
   });
-  return /* @__PURE__ */ s(g.Provider, { value: o, children: e });
+  return /* @__PURE__ */ s(g.Provider, { value: o, children: r });
 };
 export {
   y as Draggable

package/dist/utils/dnd/handle.js

@@ -2,17 +2,17 @@ import s, { useRef as f, useEffect as u } from "react";
 import a from "clsx";
 import { useDragContainer as l } from "./context.js";
 import { useForkRef as m } from "../hooks/use_fork_ref.js";
-const d = ({ children: e }) => {
-  const { registerHandle: t, unregisterHandle: n } = l(), r = f(null);
+const d = ({ children: r }) => {
+  const { registerHandle: t, unregisterHandle: n } = l(), e = f(null);
   u(() => {
-    if (r.current != null)
-      return t(r), () => {
-        r.current != null && n(r);
+    if (e.current != null)
+      return t(e), () => {
+        e.current != null && n(e);
       };
   }, [t, n]);
-  const o = m(r, e.props.ref);
-  return s.cloneElement(e, {
-    className: a("tcn-drag-handle", e.props.className),
+  const o = m(e, r.props.ref);
+  return s.cloneElement(r, {
+    className: a("tcn-drag-handle", r.props.className),
     ref: o
   });
 };

package/dist/utils/focus_redirect.js

@@ -1,7 +1,7 @@
-import { jsx as i } from "react/jsx-runtime";
-import e from "react";
-const d = e.forwardRef(function({ onRedirect: t }, o) {
-  return /* @__PURE__ */ i(
+import { jsx as e } from "react/jsx-runtime";
+import i from "react";
+const n = i.forwardRef(function({ onRedirect: t }, o) {
+  return /* @__PURE__ */ e(
     "div",
     {
       ref: o,
@@ -19,6 +19,6 @@ const d = e.forwardRef(function({ onRedirect: t }, o) {
   );
 });
 export {
-  d as FocusRedirect
+  n as FocusRedirect
 };
 //# sourceMappingURL=focus_redirect.js.map

package/dist/utils/hooks/make_context_hook.js

@@ -1,9 +1,9 @@
 import r from "react";
-const i = (e, t) => () => {
-  const o = r.useContext(e);
-  if (o === void 0)
+const i = (o, t) => () => {
+  const e = r.useContext(o);
+  if (e === void 0)
     throw t ? new Error(`Context ${t} was accessed outside of a context provider!`) : new Error("Context must be used within a Context Provider!");
-  return o;
+  return e;
 };
 export {
   i as makeContextHook

package/dist/utils/hooks/use_media_query.js

@@ -1,5 +1,5 @@
 import s from "react";
-function h(t) {
+function d(t) {
   const [c, a] = s.useState(!1);
   return s.useEffect(() => {
     const e = window.matchMedia(t);
@@ -11,6 +11,6 @@ function h(t) {
   }, [t]), c;
 }
 export {
-  h as useMediaQuery
+  d as useMediaQuery
 };
 //# sourceMappingURL=use_media_query.js.map

package/dist/utils/hooks/use_media_query.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_media_query.js","sources":["../../../src/utils/hooks/use_media_query.ts"],"sourcesContent":["import React from 'react';\n\n/**\n * Custom hook that returns a boolean indicating if the current viewport\n * matches the given media query.\n *\n * @param query - The media query to match against (e.g. \"(min-width: 768px)\")\n * @returns boolean indicating if the media query matches\n */\nexport function useMediaQuery(query: string): boolean {\n  const [matches, setMatches] = React.useState(false);\n\n  React.useEffect(() => {\n    const mediaQuery = window.matchMedia(query);\n\n    // Set initial value\n    setMatches(mediaQuery.matches);\n\n    // Create event listener\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Add the listener\n    mediaQuery.addEventListener('change', handler);\n\n    // Clean up\n    return () => mediaQuery.removeEventListener('change', handler);\n  }, [query]);\n\n  return matches;\n}\n"],"names":["useMediaQuery","query","matches","setMatches","React","mediaQuery","handler","event"],"mappings":";AASO,SAASA,EAAcC,GAAwB;AACpD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAAS,EAAK;AAElD,SAAAA,EAAM,UAAU,MAAM;AACpB,UAAMC,IAAa,OAAO,WAAWJ,CAAK;AAG1C,IAAAE,EAAWE,EAAW,OAAO;AAG7B,UAAMC,IAAU,CAACC,MAA+B;AAC9C,MAAAJ,EAAWI,EAAM,OAAO;AAAA,IAC1B;AAGA,WAAAF,EAAW,iBAAiB,UAAUC,CAAO,GAGtC,MAAMD,EAAW,oBAAoB,UAAUC,CAAO;AAAA,EAC/D,GAAG,CAACL,CAAK,CAAC,GAEHC;AACT;"}
+{"version":3,"file":"use_media_query.js","sources":["../../../src/utils/hooks/use_media_query.ts"],"sourcesContent":["import React from 'react';\n\n/**\n * Custom hook that returns a boolean indicating if the current viewport\n * matches the given media query.\n *\n * @param query - The media query to match against (e.g. \"(min-width: 768px)\")\n * @returns boolean indicating if the media query matches\n */\nexport function useMediaQuery(query: string): boolean {\n  const [matches, setMatches] = React.useState(false);\n\n  React.useEffect(() => {\n    const mediaQuery = window.matchMedia(query);\n\n    // Set initial value\n    setMatches(mediaQuery.matches);\n\n    // Create event listener\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Add the listener\n    mediaQuery.addEventListener('change', handler);\n\n    // Clean up\n    return () => mediaQuery.removeEventListener('change', handler);\n  }, [query]);\n\n  return matches;\n}\n"],"names":["useMediaQuery","query","matches","setMatches","React","mediaQuery","handler","event"],"mappings":";AASO,SAASA,EAAcC,GAAwB;AACpD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAAS,EAAK;AAElDA,SAAAA,EAAM,UAAU,MAAM;AACpB,UAAMC,IAAa,OAAO,WAAWJ,CAAK;AAG1C,IAAAE,EAAWE,EAAW,OAAO;AAG7B,UAAMC,IAAU,CAACC,MAA+B;AAC9C,MAAAJ,EAAWI,EAAM,OAAO;AAAA,IAC1B;AAGA,WAAAF,EAAW,iBAAiB,UAAUC,CAAO,GAGtC,MAAMD,EAAW,oBAAoB,UAAUC,CAAO;AAAA,EAC/D,GAAG,CAACL,CAAK,CAAC,GAEHC;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "description": "",
   "author": "TCN",

package/src/actions/__docs__/actions.mdx

@@ -0,0 +1,131 @@
+import { Canvas, Meta, Markdown } from '@storybook/addon-docs/blocks';
+import * as ActionStories from './actions.stories';
+import { Showcase, Section } from './components/showcase';
+import { Gallery } from './components/gallery';
+
+<Meta title="Catalog/Actions" of={ActionStories} />
+
+# Actions
+
+Interactive elements that trigger operations or set configuration for application tooling.
+
+## Button
+
+Relaxed, text based actions for high level page decisions (Cancel, Save, etc.)
+
+<Gallery minColumnWidth="350px">
+
+<Showcase
+  title="Hierarchy"
+  description="Visually indicates the importance of an action and its relationship to other actions. A primary action should be limited to one per surface."
+  of={ActionStories.HierarchyShowcase}
+  width="380px"
+/>
+
+<Showcase
+  title="Size"
+  description="Used to customize the size of actions in relation to one another on a surface. Use sparingly, do not use as a replacement for hierarchy."
+  of={ActionStories.SizeShowcase}
+  width="320px"
+/>
+
+<Showcase
+  title="Disabled"
+  description="Prevents interaction and reduces visual prominence."
+  of={ActionStories.DisabledShowcase}
+  width="420px"
+/>
+
+<Showcase
+  title="With Icons"
+  description="Icons can be added to buttons with the use of Icon and Spacer components."
+  of={ActionStories.IconShowcase}
+  width="300px"
+/>
+
+<Showcase
+  title="Severity"
+  description="Visual indication of the severity of consequential, one-time actions."
+  of={ActionStories.SeverityShowcase}
+  width="300px"
+>
+  <Markdown>
+    {`
+**🚧 This concept is being actively developed.**
+
+Severity gives users a clear, visual indication of the impact and importance of an action. 
+
+Should be the primary exception of color variance in actions and generally replacing the need for using custom colors.
+
+Use sparingly for consequential, one-time actions such as:
+
+- Deleting an entity permanently - **dangerous**
+- Discarding the UIs current state or unsaved changes when leaving the page - **cautious**
+- Prompting a user to pick a preferred option out of multiple otherwise valid options - **suggested**
+- Client confirmation for important migration - **encouraged**
+`}
+  </Markdown>
+</Showcase>
+
+<Showcase
+  title="Custom Colors"
+  description="
+  Override accent color for heavily brand or product specific actions. 
+  Use sparingly, should be avoided to create cohesion and consistency between UIs."
+  of={ActionStories.ColorShowcase}
+  width="420px"
+/>
+
+<Showcase
+  title="Full Width"
+  description="Fill container width for mobile or prominent CTAs."
+  of={ActionStories.FullWidth}
+  width="340px"
+/>
+
+</Gallery>
+
+
+
+## Utility
+
+Compact, icon-based actions.  Used as re-usable tooling for item rows, utility bars, or supplemental behavior on elements (Close Panel, Copy Entity, ect)
+
+<Gallery>
+
+<Showcase
+  title="Hierarchy"
+  description="Visually indicates the importance of an action and its relationship to other actions. A primary action should be limited to one per surface."
+  of={ActionStories.SlimButtonHierarchy}
+  width="240px"
+/>
+
+<Showcase
+  title="Size"
+  description="Used to customize the size of actions in relation to one another on a surface. Use sparingly, do not use as a replacement for hierarchy."
+  of={ActionStories.SlimButtonSizes}
+  width="220px"
+/>
+
+<Showcase
+  title="Disabled"
+  description="Prevents interaction and reduces visual prominence."
+  of={ActionStories.SlimButtonDisabled}
+  width="240px"
+/>
+
+<Showcase
+  title="Severity"
+  description="Visual indication of the severity of consequential, one-time actions."
+  of={ActionStories.SlimButtonSeverity}
+  width="140px"
+/>
+
+<Showcase
+  title="Custom Colors"
+  description="Override accent color for heavily brand or product specific actions. Use sparingly, should be avoided to create cohesion and consistency between UIs."
+  of={ActionStories.SlimButtonColors}
+  width="140px"
+/>
+
+</Gallery>