@tcn/ui 0.12.2 → 0.12.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (165) hide show
  1. package/dist/actions/index.d.ts +0 -2
  2. package/dist/actions/index.d.ts.map +1 -1
  3. package/dist/actions/index.js +6 -10
  4. package/dist/actions/index.js.map +1 -1
  5. package/dist/group.css +1 -0
  6. package/dist/inputs/color_input/color_input.js +2 -4
  7. package/dist/inputs/color_input/color_input.js.map +1 -1
  8. package/dist/inputs/date_picker/date_picker_header.js +20 -22
  9. package/dist/inputs/date_picker/date_picker_header.js.map +1 -1
  10. package/dist/inputs/date_picker/date_picker_input.js +2 -4
  11. package/dist/inputs/date_picker/date_picker_input.js.map +1 -1
  12. package/dist/inputs/date_picker/date_picker_time_selector.js +9 -11
  13. package/dist/inputs/date_picker/date_picker_time_selector.js.map +1 -1
  14. package/dist/inputs/date_picker/date_picker_year_input.js +5 -7
  15. package/dist/inputs/date_picker/date_picker_year_input.js.map +1 -1
  16. package/dist/inputs/date_picker/date_picker_year_selector.js +2 -4
  17. package/dist/inputs/date_picker/date_picker_year_selector.js.map +1 -1
  18. package/dist/inputs/index.d.ts +2 -0
  19. package/dist/inputs/index.d.ts.map +1 -1
  20. package/dist/inputs/index.js +24 -20
  21. package/dist/inputs/index.js.map +1 -1
  22. package/dist/inputs/multiselect/multiselect_inline_values.js +7 -9
  23. package/dist/inputs/multiselect/multiselect_inline_values.js.map +1 -1
  24. package/dist/inputs/multiselect/multiselect_values.js +2 -4
  25. package/dist/inputs/multiselect/multiselect_values.js.map +1 -1
  26. package/dist/inputs/phone_number_input/phone_number_input_adapter.js +2 -4
  27. package/dist/inputs/phone_number_input/phone_number_input_adapter.js.map +1 -1
  28. package/dist/inputs/phone_number_input/sip_input.js +13 -15
  29. package/dist/inputs/phone_number_input/sip_input.js.map +1 -1
  30. package/dist/inputs/select/select.js +2 -4
  31. package/dist/inputs/select/select.js.map +1 -1
  32. package/dist/{actions/button → inputs}/select_group/select_group.d.ts +1 -1
  33. package/dist/inputs/select_group/select_group.d.ts.map +1 -0
  34. package/dist/{actions/button → inputs}/select_group/select_group.js +3 -3
  35. package/dist/inputs/select_group/select_group.js.map +1 -0
  36. package/dist/inputs/select_group/single_select_group.d.ts.map +1 -0
  37. package/dist/inputs/select_group/single_select_group.js.map +1 -0
  38. package/dist/inputs/suggestions/suggestion_list.js +2 -4
  39. package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
  40. package/dist/layouts/group/group.d.ts +5 -0
  41. package/dist/layouts/group/group.d.ts.map +1 -0
  42. package/dist/layouts/group/group.js +26 -0
  43. package/dist/layouts/group/group.js.map +1 -0
  44. package/dist/layouts/index.d.ts +2 -0
  45. package/dist/layouts/index.d.ts.map +1 -1
  46. package/dist/layouts/index.js +36 -32
  47. package/dist/layouts/index.js.map +1 -1
  48. package/dist/overlay/popper/base/dismissal_decorator.js +6 -6
  49. package/dist/overlay/popper/base/dismissal_decorator.js.map +1 -1
  50. package/dist/overlay/popper/context_popper.d.ts.map +1 -1
  51. package/dist/overlay/popper/context_popper.js +34 -26
  52. package/dist/overlay/popper/context_popper.js.map +1 -1
  53. package/dist/overlay/popper/element_popper.d.ts.map +1 -1
  54. package/dist/overlay/popper/element_popper.js +43 -25
  55. package/dist/overlay/popper/element_popper.js.map +1 -1
  56. package/dist/overlay/tethered/hooks/use_ref_dimensions.d.ts +3 -0
  57. package/dist/overlay/tethered/hooks/use_ref_dimensions.d.ts.map +1 -0
  58. package/dist/overlay/tethered/hooks/use_ref_dimensions.js +26 -0
  59. package/dist/overlay/tethered/hooks/use_ref_dimensions.js.map +1 -0
  60. package/dist/overlay/tethered/hooks/{useTether.d.ts → use_tether.d.ts} +7 -4
  61. package/dist/overlay/tethered/hooks/use_tether.d.ts.map +1 -0
  62. package/dist/overlay/tethered/hooks/{useTether.js → use_tether.js} +19 -15
  63. package/dist/overlay/tethered/hooks/use_tether.js.map +1 -0
  64. package/dist/overlay/tethered/hooks/use_tether_origin.d.ts +10 -0
  65. package/dist/overlay/tethered/hooks/use_tether_origin.d.ts.map +1 -0
  66. package/dist/overlay/tethered/hooks/use_tether_origin.js +22 -0
  67. package/dist/overlay/tethered/hooks/use_tether_origin.js.map +1 -0
  68. package/dist/overlay/tethered/hooks/{calculate_origin.d.ts → utils/calculate_origin.d.ts} +4 -10
  69. package/dist/overlay/tethered/hooks/utils/calculate_origin.d.ts.map +1 -0
  70. package/dist/overlay/tethered/hooks/utils/calculate_origin.js +41 -0
  71. package/dist/overlay/tethered/hooks/utils/calculate_origin.js.map +1 -0
  72. package/dist/overlay/tethered/hooks/{calculate_position.d.ts → utils/calculate_position.d.ts} +2 -2
  73. package/dist/overlay/tethered/hooks/utils/calculate_position.d.ts.map +1 -0
  74. package/dist/overlay/tethered/hooks/utils/calculate_position.js.map +1 -0
  75. package/dist/overlay/tethered/tethered.d.ts.map +1 -1
  76. package/dist/overlay/tethered/tethered.js +63 -62
  77. package/dist/overlay/tethered/tethered.js.map +1 -1
  78. package/dist/select_group.css +1 -1
  79. package/dist/surfaces/alert/alert.d.ts +0 -2
  80. package/dist/surfaces/alert/alert.d.ts.map +1 -1
  81. package/dist/surfaces/alert/alert.js +5 -7
  82. package/dist/surfaces/alert/alert.js.map +1 -1
  83. package/dist/surfaces/confirm/confirm.d.ts +3 -3
  84. package/dist/surfaces/confirm/confirm.d.ts.map +1 -1
  85. package/dist/surfaces/confirm/confirm.js +46 -45
  86. package/dist/surfaces/confirm/confirm.js.map +1 -1
  87. package/dist/surfaces/pop_confirm/pop_confirm.js +11 -9
  88. package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
  89. package/dist/surfaces/tooltip/tooltip.d.ts.map +1 -1
  90. package/dist/surfaces/tooltip/tooltip.js +27 -28
  91. package/dist/surfaces/tooltip/tooltip.js.map +1 -1
  92. package/dist/themes/stories/button_showcase.d.ts.map +1 -1
  93. package/dist/themes/stylesheets/reset.css +1 -1
  94. package/dist/themes/stylesheets/reset.js +3 -3
  95. package/dist/themes/stylesheets/reset.js.map +1 -1
  96. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  97. package/dist/themes/themes/ergo/ergo_theme.js +128 -12
  98. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  99. package/package.json +3 -2
  100. package/src/actions/index.ts +0 -8
  101. package/src/inputs/index.ts +9 -0
  102. package/src/{actions/button/__stories__ → inputs/select_group}/select_group.stories.tsx +5 -26
  103. package/src/{actions/button → inputs}/select_group/select_group.tsx +3 -3
  104. package/src/layouts/bar/bar.stories.tsx +61 -0
  105. package/src/layouts/group/group.module.css +8 -0
  106. package/src/layouts/group/group.tsx +23 -0
  107. package/src/layouts/index.ts +2 -0
  108. package/src/overlay/popper/__stories__/element_popper.stories.tsx +1 -1
  109. package/src/overlay/popper/base/dismissal_decorator.tsx +1 -1
  110. package/src/overlay/popper/context_popper.tsx +7 -3
  111. package/src/overlay/popper/element_popper.tsx +14 -4
  112. package/src/overlay/tethered/__stories__/shared/base_story_config.ts +1 -1
  113. package/src/overlay/tethered/hooks/use_ref_dimensions.ts +32 -0
  114. package/src/overlay/tethered/hooks/{useTether.ts → use_tether.ts} +7 -2
  115. package/src/overlay/tethered/hooks/use_tether_origin.ts +46 -0
  116. package/src/overlay/tethered/hooks/{calculate_origin.ts → utils/calculate_origin.ts} +12 -12
  117. package/src/overlay/tethered/hooks/{calculate_position.ts → utils/calculate_position.ts} +3 -3
  118. package/src/overlay/tethered/tethered.tsx +22 -26
  119. package/src/surfaces/alert/alert.tsx +0 -2
  120. package/src/surfaces/confirm/confirm.tsx +24 -9
  121. package/src/surfaces/pop_confirm/pop_confirm.stories.tsx +206 -6
  122. package/src/surfaces/pop_confirm/pop_confirm.tsx +1 -1
  123. package/src/surfaces/tooltip/__stories__/tooltip.stories.tsx +136 -0
  124. package/src/surfaces/tooltip/__stories__/tooltip_stories.module.css +14 -0
  125. package/src/surfaces/tooltip/tooltip.tsx +6 -2
  126. package/src/themes/stories/button_showcase.tsx +19 -51
  127. package/src/themes/stylesheets/reset.css +3 -3
  128. package/src/themes/themes/ergo/ergo_theme.css +128 -12
  129. package/dist/actions/button/select_group/select_group.d.ts.map +0 -1
  130. package/dist/actions/button/select_group/select_group.js.map +0 -1
  131. package/dist/actions/button/select_group/single_select_group.d.ts.map +0 -1
  132. package/dist/actions/button/select_group/single_select_group.js.map +0 -1
  133. package/dist/overlay/tethered/hooks/calculate_origin.d.ts.map +0 -1
  134. package/dist/overlay/tethered/hooks/calculate_origin.js +0 -41
  135. package/dist/overlay/tethered/hooks/calculate_origin.js.map +0 -1
  136. package/dist/overlay/tethered/hooks/calculate_position.d.ts.map +0 -1
  137. package/dist/overlay/tethered/hooks/calculate_position.js.map +0 -1
  138. package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts +0 -9
  139. package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts.map +0 -1
  140. package/dist/overlay/tethered/hooks/useCaretRefDimensions.js +0 -14
  141. package/dist/overlay/tethered/hooks/useCaretRefDimensions.js.map +0 -1
  142. package/dist/overlay/tethered/hooks/useTether.d.ts.map +0 -1
  143. package/dist/overlay/tethered/hooks/useTether.js.map +0 -1
  144. package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts +0 -3
  145. package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts.map +0 -1
  146. package/dist/overlay/tethered/hooks/useTetherContentRect.js +0 -36
  147. package/dist/overlay/tethered/hooks/useTetherContentRect.js.map +0 -1
  148. package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts +0 -14
  149. package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts.map +0 -1
  150. package/dist/overlay/tethered/hooks/useTetherOrigin.js +0 -24
  151. package/dist/overlay/tethered/hooks/useTetherOrigin.js.map +0 -1
  152. package/dist/surfaces/popconfirm/pop_confirm.d.ts +0 -5
  153. package/dist/surfaces/popconfirm/pop_confirm.d.ts.map +0 -1
  154. package/dist/surfaces/popconfirm/pop_confirm.js +0 -13
  155. package/dist/surfaces/popconfirm/pop_confirm.js.map +0 -1
  156. package/src/overlay/tethered/hooks/useCaretRefDimensions.ts +0 -22
  157. package/src/overlay/tethered/hooks/useTetherContentRect.ts +0 -49
  158. package/src/overlay/tethered/hooks/useTetherOrigin.ts +0 -49
  159. package/src/surfaces/popconfirm/pop_confirm.tsx +0 -18
  160. package/src/surfaces/tooltip/tooltip.stories.tsx +0 -54
  161. /package/dist/{actions/button → inputs}/select_group/single_select_group.d.ts +0 -0
  162. /package/dist/{actions/button → inputs}/select_group/single_select_group.js +0 -0
  163. /package/dist/overlay/tethered/hooks/{calculate_position.js → utils/calculate_position.js} +0 -0
  164. /package/src/{actions/button → inputs}/select_group/select_group.module.css +0 -0
  165. /package/src/{actions/button → inputs}/select_group/single_select_group.tsx +0 -0
@@ -1,62 +1,63 @@
1
- import { jsx as t, Fragment as y, jsxs as i } from "react/jsx-runtime";
2
- import w, { useRef as S, useState as C, useLayoutEffect as n } from "react";
3
- import { clsx as c } from "clsx";
4
- import { Spacer as N } from "../../stacks/spacer.js";
5
- import { VStack as T } from "../../stacks/v_stack.js";
6
- import { ZStack as R } from "../../stacks/z_stack.js";
7
- import { Portal as j } from "../../overlay/portal/portal.js";
8
- import { BodyText as B } from "../../typography/body_text/body_text.js";
1
+ import { jsx as t, Fragment as S, jsxs as c } from "react/jsx-runtime";
2
+ import C, { useRef as N, useState as T, useLayoutEffect as s } from "react";
3
+ import { clsx as m } from "clsx";
4
+ import { Spacer as E } from "../../stacks/spacer.js";
5
+ import { VStack as R } from "../../stacks/v_stack.js";
6
+ import { ZStack as j } from "../../stacks/z_stack.js";
7
+ import { Portal as B } from "../../overlay/portal/portal.js";
8
+ import { BodyText as b } from "../../typography/body_text/body_text.js";
9
9
  import "../../typography/callout/callout.js";
10
10
  import "../../typography/caption/caption.js";
11
11
  import "../../typography/footnote/footnote.js";
12
12
  import "../../typography/headline/headline.js";
13
13
  import "../../typography/subheadline/subheadline.js";
14
- import { Title as b } from "../../typography/title/title.js";
15
- import { Box as s } from "../../stacks/box/box.js";
16
- import '../../confirm.css';const v = "_confirm_e53f865", z = "_shake_d5d9154", A = "_actions_b7ffee5", m = { confirm: v, shake: z, actions: A }, U = w.forwardRef(function({
17
- open: a,
18
- graphic: f,
19
- title: h,
20
- description: l,
21
- actions: d,
22
- veilProps: p,
14
+ import { Title as v } from "../../typography/title/title.js";
15
+ import { Box as a } from "../../stacks/box/box.js";
16
+ import '../../confirm.css';const z = "_confirm_e53f865", A = "_shake_d5d9154", F = "_actions_b7ffee5", f = { confirm: z, shake: A, actions: F }, X = C.forwardRef(function({
17
+ open: l,
18
+ graphic: h,
19
+ title: e,
20
+ description: r,
21
+ actions: p,
22
+ veilProps: d,
23
23
  className: u,
24
- ...k
25
- }, x) {
26
- const r = S(!1), [e, o] = C(!1);
27
- n(() => (r.current = !0, () => {
28
- r.current = !1;
29
- }), []), n(() => {
30
- if (e && r.current) {
31
- const g = window.setTimeout(() => {
32
- o(!1);
24
+ ...g
25
+ }, k) {
26
+ const o = N(!1), [i, n] = T(!1);
27
+ s(() => (o.current = !0, () => {
28
+ o.current = !1;
29
+ }), []), s(() => {
30
+ if (i && o.current) {
31
+ const w = window.setTimeout(() => {
32
+ n(!1);
33
33
  }, 600);
34
- return () => window.clearTimeout(g);
34
+ return () => window.clearTimeout(w);
35
35
  }
36
- }, [e]);
37
- function _() {
38
- o(!0);
36
+ }, [i]);
37
+ function x() {
38
+ n(!0);
39
39
  }
40
- return /* @__PURE__ */ t(y, { children: a && /* @__PURE__ */ t(j, { children: /* @__PURE__ */ i(R, { height: "100%", style: { position: "fixed" }, children: [
41
- /* @__PURE__ */ t(s, { onClick: _, ...p, height: "100%" }),
40
+ const y = typeof r == "string" ? /* @__PURE__ */ t(b, { className: "tcn-confirm-description", hierarchy: "tertiary", children: r }) : r, _ = typeof e == "string" ? /* @__PURE__ */ t(v, { className: "tcn-confirm-title", emphasis: "strong", size: "sm", children: e }) : e;
41
+ return /* @__PURE__ */ t(S, { children: l && /* @__PURE__ */ t(B, { children: /* @__PURE__ */ c(j, { height: "100%", style: { position: "fixed" }, children: [
42
+ /* @__PURE__ */ t(a, { onClick: x, ...d, height: "100%" }),
42
43
  /* @__PURE__ */ t(
43
44
  "div",
44
45
  {
45
- ref: x,
46
- className: c(m.confirm, u, "tcn-confirm"),
47
- "data-shake": e,
48
- ...k,
49
- children: /* @__PURE__ */ i(T, { hAlign: "center", children: [
50
- f,
51
- /* @__PURE__ */ t(b, { className: "tcn-confirm-title", emphasis: "strong", size: "sm", children: h }),
52
- /* @__PURE__ */ t(B, { className: "tcn-confirm-description", hierarchy: "tertiary", children: l }),
53
- /* @__PURE__ */ t(N, { height: "16px" }),
46
+ ref: k,
47
+ className: m(f.confirm, u, "tcn-confirm"),
48
+ "data-shake": i,
49
+ ...g,
50
+ children: /* @__PURE__ */ c(R, { hAlign: "center", children: [
51
+ h,
52
+ _,
53
+ y,
54
+ /* @__PURE__ */ t(E, { height: "16px" }),
54
55
  /* @__PURE__ */ t(
55
- s,
56
+ a,
56
57
  {
57
- className: c(m.actions, "tcn-confirm-actions"),
58
+ className: m(f.actions, "tcn-confirm-actions"),
58
59
  height: "auto",
59
- children: d
60
+ children: p
60
61
  }
61
62
  )
62
63
  ] })
@@ -65,6 +66,6 @@ import '../../confirm.css';const v = "_confirm_e53f865", z = "_shake_d5d9154", A
65
66
  ] }) }) });
66
67
  });
67
68
  export {
68
- U as Confirm
69
+ X as Confirm
69
70
  };
70
71
  //# sourceMappingURL=confirm.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"confirm.js","sources":["../../../src/surfaces/confirm/confirm.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } 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 { Portal } from '../../overlay/portal/portal.js';\nimport { BodyText, Title } from '../../typography/index.js';\nimport styles from './confirm.module.css';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\n\nexport interface ConfirmProps extends React.HTMLAttributes<HTMLDivElement> {\n open?: boolean;\n graphic?: React.ReactNode;\n title?: string;\n description?: string;\n actions?: React.ReactNode;\n veilProps?: BoxProps;\n}\n\nexport const Confirm = React.forwardRef(function Confirm(\n {\n open,\n graphic,\n title,\n description,\n actions,\n veilProps,\n className,\n ...props\n }: ConfirmProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const isMounted = useRef(false);\n const [shake, setShake] = useState(false);\n\n useLayoutEffect(() => {\n isMounted.current = true;\n return () => {\n isMounted.current = false;\n };\n }, []);\n\n useLayoutEffect(() => {\n if (shake && isMounted.current) {\n const id = window.setTimeout(() => {\n setShake(false);\n }, 600);\n\n return () => window.clearTimeout(id);\n }\n }, [shake]);\n\n function shakeConfirm() {\n setShake(true);\n }\n\n return (\n <>\n {open && (\n <Portal>\n <ZStack height=\"100%\" style={{ position: 'fixed' }}>\n <Box onClick={shakeConfirm} {...veilProps} height=\"100%\"></Box>\n <div\n ref={ref}\n className={clsx(styles.confirm, className, 'tcn-confirm')}\n data-shake={shake}\n {...props}\n >\n <VStack hAlign=\"center\">\n {graphic}\n <Title className=\"tcn-confirm-title\" emphasis=\"strong\" size=\"sm\">\n {title}\n </Title>\n <BodyText className=\"tcn-confirm-description\" hierarchy=\"tertiary\">\n {description}\n </BodyText>\n <Spacer height=\"16px\" />\n <Box\n className={clsx(styles.actions, 'tcn-confirm-actions')}\n height=\"auto\"\n >\n {actions}\n </Box>\n </VStack>\n </div>\n </ZStack>\n </Portal>\n )}\n </>\n );\n});\n"],"names":["Confirm","React","open","graphic","title","description","actions","veilProps","className","props","ref","isMounted","useRef","shake","setShake","useState","useLayoutEffect","id","shakeConfirm","jsx","Fragment","Portal","jsxs","ZStack","Box","clsx","styles","VStack","Title","BodyText","Spacer"],"mappings":";;;;;;;;;;;;;;;sHAmBaA,IAAUC,EAAM,WAAW,SACtC;AAAA,EACE,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAO,EAAK,GACxB,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAK;AAExC,EAAAC,EAAgB,OACdL,EAAU,UAAU,IACb,MAAM;AACX,IAAAA,EAAU,UAAU;AAAA,EACtB,IACC,CAAA,CAAE,GAELK,EAAgB,MAAM;AACpB,QAAIH,KAASF,EAAU,SAAS;AAC9B,YAAMM,IAAK,OAAO,WAAW,MAAM;AACjC,QAAAH,EAAS,EAAK;AAAA,MAChB,GAAG,GAAG;AAEN,aAAO,MAAM,OAAO,aAAaG,CAAE;AAAA,IACrC;AAAA,EACF,GAAG,CAACJ,CAAK,CAAC;AAEV,WAASK,IAAe;AACtB,IAAAJ,EAAS,EAAI;AAAA,EACf;AAEA,SACE,gBAAAK,EAAAC,GAAA,EACG,UAAAlB,KACC,gBAAAiB,EAACE,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EAAO,QAAO,QAAO,OAAO,EAAE,UAAU,QAAA,GACvC,UAAA;AAAA,IAAA,gBAAAJ,EAACK,KAAI,SAASN,GAAe,GAAGX,GAAW,QAAO,QAAO;AAAA,IACzD,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAT;AAAA,QACA,WAAWe,EAAKC,EAAO,SAASlB,GAAW,aAAa;AAAA,QACxD,cAAYK;AAAA,QACX,GAAGJ;AAAA,QAEJ,UAAA,gBAAAa,EAACK,GAAA,EAAO,QAAO,UACZ,UAAA;AAAA,UAAAxB;AAAA,UACD,gBAAAgB,EAACS,KAAM,WAAU,qBAAoB,UAAS,UAAS,MAAK,MACzD,UAAAxB,EAAA,CACH;AAAA,4BACCyB,GAAA,EAAS,WAAU,2BAA0B,WAAU,YACrD,UAAAxB,GACH;AAAA,UACA,gBAAAc,EAACW,GAAA,EAAO,QAAO,OAAA,CAAO;AAAA,UACtB,gBAAAX;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,WAAWC,EAAKC,EAAO,SAAS,qBAAqB;AAAA,cACrD,QAAO;AAAA,cAEN,UAAApB;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CACF,GACF,GAEJ;AAEJ,CAAC;"}
1
+ {"version":3,"file":"confirm.js","sources":["../../../src/surfaces/confirm/confirm.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } 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 { Portal } from '../../overlay/portal/portal.js';\nimport { BodyText, Title } from '../../typography/index.js';\nimport styles from './confirm.module.css';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\n\nexport interface ConfirmProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n open?: boolean;\n graphic?: React.ReactNode;\n title?: React.ReactNode;\n description?: React.ReactNode;\n actions?: React.ReactNode;\n veilProps?: BoxProps;\n}\n\nexport const Confirm = React.forwardRef(function Confirm(\n {\n open,\n graphic,\n title,\n description,\n actions,\n veilProps,\n className,\n ...props\n }: ConfirmProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const isMounted = useRef(false);\n const [shake, setShake] = useState(false);\n\n useLayoutEffect(() => {\n isMounted.current = true;\n return () => {\n isMounted.current = false;\n };\n }, []);\n\n useLayoutEffect(() => {\n if (shake && isMounted.current) {\n const id = window.setTimeout(() => {\n setShake(false);\n }, 600);\n\n return () => window.clearTimeout(id);\n }\n }, [shake]);\n\n function shakeConfirm() {\n setShake(true);\n }\n\n const descriptionElement =\n typeof description === 'string' ? (\n <BodyText className=\"tcn-confirm-description\" hierarchy=\"tertiary\">\n {description}\n </BodyText>\n ) : (\n description\n );\n\n const titleElement =\n typeof title === 'string' ? (\n <Title className=\"tcn-confirm-title\" emphasis=\"strong\" size=\"sm\">\n {title}\n </Title>\n ) : (\n title\n );\n\n return (\n <>\n {open && (\n <Portal>\n <ZStack height=\"100%\" style={{ position: 'fixed' }}>\n <Box onClick={shakeConfirm} {...veilProps} height=\"100%\"></Box>\n <div\n ref={ref}\n className={clsx(styles.confirm, className, 'tcn-confirm')}\n data-shake={shake}\n {...props}\n >\n <VStack hAlign=\"center\">\n {graphic}\n {titleElement}\n {descriptionElement}\n <Spacer height=\"16px\" />\n <Box\n className={clsx(styles.actions, 'tcn-confirm-actions')}\n height=\"auto\"\n >\n {actions}\n </Box>\n </VStack>\n </div>\n </ZStack>\n </Portal>\n )}\n </>\n );\n});\n"],"names":["Confirm","React","open","graphic","title","description","actions","veilProps","className","props","ref","isMounted","useRef","shake","setShake","useState","useLayoutEffect","id","shakeConfirm","descriptionElement","jsx","BodyText","titleElement","Title","Fragment","Portal","jsxs","ZStack","Box","clsx","styles","VStack","Spacer"],"mappings":";;;;;;;;;;;;;;;sHAoBaA,IAAUC,EAAM,WAAW,SACtC;AAAA,EACE,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAO,EAAK,GACxB,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAK;AAExC,EAAAC,EAAgB,OACdL,EAAU,UAAU,IACb,MAAM;AACX,IAAAA,EAAU,UAAU;AAAA,EACtB,IACC,CAAA,CAAE,GAELK,EAAgB,MAAM;AACpB,QAAIH,KAASF,EAAU,SAAS;AAC9B,YAAMM,IAAK,OAAO,WAAW,MAAM;AACjC,QAAAH,EAAS,EAAK;AAAA,MAChB,GAAG,GAAG;AAEN,aAAO,MAAM,OAAO,aAAaG,CAAE;AAAA,IACrC;AAAA,EACF,GAAG,CAACJ,CAAK,CAAC;AAEV,WAASK,IAAe;AACtB,IAAAJ,EAAS,EAAI;AAAA,EACf;AAEA,QAAMK,IACJ,OAAOd,KAAgB,WACrB,gBAAAe,EAACC,GAAA,EAAS,WAAU,2BAA0B,WAAU,YACrD,UAAAhB,EAAA,CACH,IAEAA,GAGEiB,IACJ,OAAOlB,KAAU,WACf,gBAAAgB,EAACG,GAAA,EAAM,WAAU,qBAAoB,UAAS,UAAS,MAAK,MACzD,aACH,IAEAnB;AAGJ,SACE,gBAAAgB,EAAAI,GAAA,EACG,UAAAtB,KACC,gBAAAkB,EAACK,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EAAO,QAAO,QAAO,OAAO,EAAE,UAAU,QAAA,GACvC,UAAA;AAAA,IAAA,gBAAAP,EAACQ,KAAI,SAASV,GAAe,GAAGX,GAAW,QAAO,QAAO;AAAA,IACzD,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,WAAWmB,EAAKC,EAAO,SAAStB,GAAW,aAAa;AAAA,QACxD,cAAYK;AAAA,QACX,GAAGJ;AAAA,QAEJ,UAAA,gBAAAiB,EAACK,GAAA,EAAO,QAAO,UACZ,UAAA;AAAA,UAAA5B;AAAA,UACAmB;AAAA,UACAH;AAAA,UACD,gBAAAC,EAACY,GAAA,EAAO,QAAO,OAAA,CAAO;AAAA,UACtB,gBAAAZ;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,WAAWC,EAAKC,EAAO,SAAS,qBAAqB;AAAA,cACrD,QAAO;AAAA,cAEN,UAAAxB;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CACF,GACF,GAEJ;AAEJ,CAAC;"}
@@ -14,6 +14,8 @@ import "../../layouts/body/v_body.js";
14
14
  import "../../layouts/footer/footer.js";
15
15
  import "../../layouts/header/header.js";
16
16
  import "../../layouts/utility_bar/utility_bar.js";
17
+ import "../../layouts/group/group.js";
18
+ import "../../layouts/bar/bar.js";
17
19
  import "../../layouts/row/row.js";
18
20
  import "../../layouts/section/section.js";
19
21
  import "../../stacks/h_stack.js";
@@ -29,23 +31,23 @@ import "../../stacks/z_stack.js";
29
31
  import "../../layouts/rail/rail.js";
30
32
  import "../../layouts/rail/side/side.js";
31
33
  import "../../layouts/rail/utility_strip/utility_strip.js";
32
- import { PopperDismissal as l } from "../../overlay/popper/base/dismissal_decorator.js";
33
- import { ElementPopper as s } from "../../overlay/popper/element_popper.js";
34
- const O = n.forwardRef(
34
+ import { PopperDismissal as s } from "../../overlay/popper/base/dismissal_decorator.js";
35
+ import { ElementPopper as a } from "../../overlay/popper/element_popper.js";
36
+ const T = n.forwardRef(
35
37
  function({
36
38
  children: r,
37
39
  className: m,
38
- precision: t = "low",
39
- dismissals: i = [l.CLICK_AWAY],
40
+ precision: i = "high",
41
+ dismissals: t = [s.CLICK_AWAY],
40
42
  ...p
41
43
  }, f) {
42
44
  return /* @__PURE__ */ o(
43
- s,
45
+ a,
44
46
  {
45
47
  ref: f,
46
- precision: t,
48
+ precision: i,
47
49
  className: e(m, "tcn-pop-confirm"),
48
- dismissals: i,
50
+ dismissals: t,
49
51
  ...p,
50
52
  children: /* @__PURE__ */ o(c, { width: "100%", height: "100%", children: r })
51
53
  }
@@ -53,6 +55,6 @@ const O = n.forwardRef(
53
55
  }
54
56
  );
55
57
  export {
56
- O as PopConfirm
58
+ T as PopConfirm
57
59
  };
58
60
  //# sourceMappingURL=pop_confirm.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"pop_confirm.js","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Scaffold } from '../../layouts/index.js';\nimport { PopperDismissal } from '../../overlay/popper/base/dismissal_decorator.js';\nimport {\n ElementPopper,\n type ElementPopperProps,\n} from '../../overlay/popper/element_popper.js';\n\nexport type PopConfirmProps = ElementPopperProps;\n\nexport const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(\n function PopConfirm(\n {\n children,\n className,\n precision = 'low',\n dismissals = [PopperDismissal.CLICK_AWAY],\n ...props\n },\n ref\n ) {\n return (\n <ElementPopper\n ref={ref}\n precision={precision}\n className={clsx(className, 'tcn-pop-confirm')}\n dismissals={dismissals}\n {...props}\n >\n <Scaffold width={'100%'} height={'100%'}>\n {children}\n </Scaffold>\n </ElementPopper>\n );\n }\n);\n"],"names":["PopConfirm","React","children","className","precision","dismissals","PopperDismissal","props","ref","jsx","ElementPopper","clsx","Scaffold"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa,CAACC,EAAgB,UAAU;AAAA,IACxC,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAAJ;AAAA,QACA,WAAWO,EAAKR,GAAW,iBAAiB;AAAA,QAC5C,YAAAE;AAAA,QACC,GAAGE;AAAA,QAEJ,4BAACK,GAAA,EAAS,OAAO,QAAQ,QAAQ,QAC9B,UAAAV,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
1
+ {"version":3,"file":"pop_confirm.js","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Scaffold } from '../../layouts/index.js';\nimport { PopperDismissal } from '../../overlay/popper/base/dismissal_decorator.js';\nimport {\n ElementPopper,\n type ElementPopperProps,\n} from '../../overlay/popper/element_popper.js';\n\nexport type PopConfirmProps = ElementPopperProps;\n\nexport const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(\n function PopConfirm(\n {\n children,\n className,\n precision = 'high',\n dismissals = [PopperDismissal.CLICK_AWAY],\n ...props\n },\n ref\n ) {\n return (\n <ElementPopper\n ref={ref}\n precision={precision}\n className={clsx(className, 'tcn-pop-confirm')}\n dismissals={dismissals}\n {...props}\n >\n <Scaffold width={'100%'} height={'100%'}>\n {children}\n </Scaffold>\n </ElementPopper>\n );\n }\n);\n"],"names":["PopConfirm","React","children","className","precision","dismissals","PopperDismissal","props","ref","jsx","ElementPopper","clsx","Scaffold"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa,CAACC,EAAgB,UAAU;AAAA,IACxC,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAAJ;AAAA,QACA,WAAWO,EAAKR,GAAW,iBAAiB;AAAA,QAC5C,YAAAE;AAAA,QACC,GAAGE;AAAA,QAEJ,4BAACK,GAAA,EAAS,OAAO,QAAQ,QAAQ,QAC9B,UAAAV,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/surfaces/tooltip/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wCAAwC,CAAC;AAGhD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,kBAAkB,EAAE,eAAe,CAAC;IAC7E,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,OAAO,qFA4ClB,CAAC"}
1
+ {"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/surfaces/tooltip/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wCAAwC,CAAC;AAGhD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,kBAAkB,EAAE,eAAe,CAAC;IAC7E,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,OAAO,qFAgDlB,CAAC"}
@@ -1,41 +1,40 @@
1
- import { jsx as e, jsxs as u, Fragment as d } from "react/jsx-runtime";
2
- import { clsx as x } from "clsx";
3
- import R, { useRef as _, isValidElement as h, cloneElement as w } from "react";
1
+ import { jsx as r, jsxs as h, Fragment as u } from "react/jsx-runtime";
2
+ import { clsx as d } from "clsx";
3
+ import x, { useRef as R, isValidElement as _, cloneElement as g } from "react";
4
4
  import { PreviewPopper as E } from "../../overlay/popper/preview_popper.js";
5
- import { HStack as b } from "../../stacks/h_stack.js";
6
- import '../../tooltip.css';const j = "_tooltip_b8c58d5", P = { tooltip: j }, H = R.forwardRef(function({
7
- children: o,
8
- className: r,
9
- verticalAnchor: n = "top",
10
- verticalOrigin: c = "bottom",
11
- horizontalAnchor: l = "center",
12
- horizontalOrigin: s = "center",
13
- precision: m = "low",
14
- // TODO: Fix caret styles and set to high
15
- label: p,
16
- ...i
5
+ import { HStack as j } from "../../stacks/h_stack.js";
6
+ import '../../tooltip.css';const w = "_tooltip_b8c58d5", y = { tooltip: w }, F = x.forwardRef(function({
7
+ children: t,
8
+ className: n,
9
+ verticalAnchor: c = "top",
10
+ verticalOrigin: s = "bottom",
11
+ horizontalAnchor: i = "center",
12
+ horizontalOrigin: p = "center",
13
+ precision: l = "high",
14
+ label: o,
15
+ ...m
17
16
  }, a) {
18
- const t = _(null), f = h(o) ? w(o, { ref: t }) : /* @__PURE__ */ e(b, { as: "span", ref: t, children: o });
19
- return /* @__PURE__ */ u(d, { children: [
17
+ const e = R(null), f = _(t) ? g(t, { ref: e }) : /* @__PURE__ */ r(j, { as: "span", ref: e, children: t });
18
+ return /* @__PURE__ */ h(u, { children: [
20
19
  f,
21
- /* @__PURE__ */ e(
20
+ /* @__PURE__ */ r(
22
21
  E,
23
22
  {
24
23
  ref: a,
25
- anchorElement: t,
26
- verticalAnchor: n,
27
- verticalOrigin: c,
28
- horizontalAnchor: l,
29
- horizontalOrigin: s,
30
- precision: m,
31
- className: x(r, P.tooltip, "tcn-surface", "tcn-tooltip"),
32
- ...i,
33
- children: p
24
+ anchorElement: e,
25
+ verticalAnchor: c,
26
+ verticalOrigin: s,
27
+ horizontalAnchor: i,
28
+ horizontalOrigin: p,
29
+ precision: l,
30
+ className: d(n, y.tooltip, "tcn-surface", "tcn-tooltip"),
31
+ ...m,
32
+ children: typeof o == "string" ? /* @__PURE__ */ r("span", { className: "tcn-tooltip-label", children: o }) : o
34
33
  }
35
34
  )
36
35
  ] });
37
36
  });
38
37
  export {
39
- H as Tooltip
38
+ F as Tooltip
40
39
  };
41
40
  //# sourceMappingURL=tooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.js","sources":["../../../src/surfaces/tooltip/tooltip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { isValidElement, cloneElement, useRef } from 'react';\nimport styles from './tooltip.module.css';\nimport {\n PreviewPopper,\n type PreviewPopperProps,\n} from '../../overlay/popper/preview_popper.js';\nimport { HStack } from '../../stacks/h_stack.js';\n\nexport interface TooltipProps extends Omit<PreviewPopperProps, 'anchorElement'> {\n /** The element that triggers the tooltip on hover */\n children: React.ReactNode;\n /** Content to display in the tooltip */\n label: React.ReactNode;\n}\n\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n {\n children,\n className,\n verticalAnchor = 'top',\n verticalOrigin = 'bottom',\n horizontalAnchor = 'center',\n horizontalOrigin = 'center',\n precision = 'low', // TODO: Fix caret styles and set to high\n label,\n ...props\n },\n ref\n) {\n const anchorRef = useRef<HTMLElement>(null);\n\n // If children is a valid element, clone it and attach the ref\n // Otherwise, wrap it in a span\n const anchor = isValidElement(children) ? (\n cloneElement(children, { ref: anchorRef } as React.Attributes)\n ) : (\n <HStack as=\"span\" ref={anchorRef}>\n {children}\n </HStack>\n );\n\n return (\n <>\n {anchor}\n <PreviewPopper\n ref={ref}\n anchorElement={anchorRef}\n verticalAnchor={verticalAnchor}\n verticalOrigin={verticalOrigin}\n horizontalAnchor={horizontalAnchor}\n horizontalOrigin={horizontalOrigin}\n precision={precision}\n className={clsx(className, styles.tooltip, 'tcn-surface', 'tcn-tooltip')}\n {...props}\n >\n {label}\n </PreviewPopper>\n </>\n );\n});\n"],"names":["Tooltip","React","children","className","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","precision","label","props","ref","anchorRef","useRef","anchor","isValidElement","cloneElement","jsx","HStack","jsxs","Fragment","PreviewPopper","clsx","styles"],"mappings":";;;;;kDAgBaA,IAAUC,EAAM,WAAyC,SACpE;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,WAAAC,IAAY;AAAA;AAAA,EACZ,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAoB,IAAI,GAIpCC,IAASC,EAAeb,CAAQ,IACpCc,EAAad,GAAU,EAAE,KAAKU,EAAA,CAA+B,IAE7D,gBAAAK,EAACC,GAAA,EAAO,IAAG,QAAO,KAAKN,GACpB,UAAAV,GACH;AAGF,SACE,gBAAAiB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAG;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,eAAeC;AAAA,QACf,gBAAAR;AAAA,QACA,gBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAWc,EAAKnB,GAAWoB,EAAO,SAAS,eAAe,aAAa;AAAA,QACtE,GAAGb;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}
1
+ {"version":3,"file":"tooltip.js","sources":["../../../src/surfaces/tooltip/tooltip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { isValidElement, cloneElement, useRef } from 'react';\nimport styles from './tooltip.module.css';\nimport {\n PreviewPopper,\n type PreviewPopperProps,\n} from '../../overlay/popper/preview_popper.js';\nimport { HStack } from '../../stacks/h_stack.js';\n\nexport interface TooltipProps extends Omit<PreviewPopperProps, 'anchorElement'> {\n /** The element that triggers the tooltip on hover */\n children: React.ReactNode;\n /** Content to display in the tooltip */\n label: React.ReactNode;\n}\n\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n {\n children,\n className,\n verticalAnchor = 'top',\n verticalOrigin = 'bottom',\n horizontalAnchor = 'center',\n horizontalOrigin = 'center',\n precision = 'high',\n label,\n ...props\n },\n ref\n) {\n const anchorRef = useRef<HTMLElement>(null);\n\n // If children is a valid element, clone it and attach the ref\n // Otherwise, wrap it in a span\n const anchor = isValidElement(children) ? (\n cloneElement(children, { ref: anchorRef } as React.Attributes)\n ) : (\n <HStack as=\"span\" ref={anchorRef}>\n {children}\n </HStack>\n );\n\n return (\n <>\n {anchor}\n <PreviewPopper\n ref={ref}\n anchorElement={anchorRef}\n verticalAnchor={verticalAnchor}\n verticalOrigin={verticalOrigin}\n horizontalAnchor={horizontalAnchor}\n horizontalOrigin={horizontalOrigin}\n precision={precision}\n className={clsx(className, styles.tooltip, 'tcn-surface', 'tcn-tooltip')}\n {...props}\n >\n {typeof label === 'string' ? (\n <span className=\"tcn-tooltip-label\">{label}</span>\n ) : (\n label\n )}\n </PreviewPopper>\n </>\n );\n});\n"],"names":["Tooltip","React","children","className","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","precision","label","props","ref","anchorRef","useRef","anchor","isValidElement","cloneElement","jsx","HStack","jsxs","Fragment","PreviewPopper","clsx","styles"],"mappings":";;;;;kDAgBaA,IAAUC,EAAM,WAAyC,SACpE;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAoB,IAAI,GAIpCC,IAASC,EAAeb,CAAQ,IACpCc,EAAad,GAAU,EAAE,KAAKU,EAAA,CAA+B,IAE7D,gBAAAK,EAACC,GAAA,EAAO,IAAG,QAAO,KAAKN,GACpB,UAAAV,GACH;AAGF,SACE,gBAAAiB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAG;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,eAAeC;AAAA,QACf,gBAAAR;AAAA,QACA,gBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAWc,EAAKnB,GAAWoB,EAAO,SAAS,eAAe,aAAa;AAAA,QACtE,GAAGb;AAAA,QAEH,UAAA,OAAOD,KAAU,WAChB,gBAAAQ,EAAC,UAAK,WAAU,qBAAqB,aAAM,IAE3CR;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ,CAAC;"}
@@ -1 +1 @@
1
- {"version":3,"file":"button_showcase.d.ts","sourceRoot":"","sources":["../../../src/themes/stories/button_showcase.tsx"],"names":[],"mappings":"AAkBA,wBAAgB,cAAc,4CAsI7B"}
1
+ {"version":3,"file":"button_showcase.d.ts","sourceRoot":"","sources":["../../../src/themes/stories/button_showcase.tsx"],"names":[],"mappings":"AAWA,wBAAgB,cAAc,4CA6G7B"}
@@ -1 +1 @@
1
- @layer tcn-reset{html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,button,video,dialog{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}legend{all:unset;display:block;margin:0;padding:0;font:inherit;color:inherit}dialog{max-width:none;max-height:none;background:transparent;color:inherit}}
1
+ @layer tcn-reset{html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,button,video,dialog{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,hgroup,menu,nav{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}legend{all:unset;display:block;margin:0;padding:0;font:inherit;color:inherit}dialog{max-width:none;max-height:none;background:transparent;color:inherit}}
@@ -91,17 +91,17 @@ const n = `/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
91
91
  vertical-align: baseline;
92
92
  }
93
93
  /* HTML5 display-role reset for older browsers */
94
+ /* FIXME: sometimes reset breaks stacks display value (flex) */
95
+ /* header, section */
94
96
  article,
95
97
  aside,
96
98
  details,
97
99
  figcaption,
98
100
  figure,
99
101
  footer,
100
- header,
101
102
  hgroup,
102
103
  menu,
103
- nav,
104
- section {
104
+ nav {
105
105
  display: block;
106
106
  }
107
107
  body {
@@ -1 +1 @@
1
- {"version":3,"file":"reset.js","sources":["../../../src/themes/stylesheets/reset.css?raw","../../../src/themes/stylesheets/reset.ts"],"sourcesContent":["export default \"/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */\\n@layer tcn-reset {\\n html,\\n body,\\n div,\\n span,\\n applet,\\n object,\\n iframe,\\n h1,\\n h2,\\n h3,\\n h4,\\n h5,\\n h6,\\n p,\\n blockquote,\\n pre,\\n a,\\n abbr,\\n acronym,\\n address,\\n big,\\n cite,\\n code,\\n del,\\n dfn,\\n em,\\n img,\\n ins,\\n kbd,\\n q,\\n s,\\n samp,\\n small,\\n strike,\\n strong,\\n sub,\\n sup,\\n tt,\\n var,\\n b,\\n u,\\n i,\\n center,\\n dl,\\n dt,\\n dd,\\n ol,\\n ul,\\n li,\\n fieldset,\\n form,\\n label,\\n legend,\\n table,\\n caption,\\n tbody,\\n tfoot,\\n thead,\\n tr,\\n th,\\n td,\\n article,\\n aside,\\n canvas,\\n details,\\n embed,\\n figure,\\n figcaption,\\n footer,\\n header,\\n hgroup,\\n menu,\\n nav,\\n output,\\n ruby,\\n section,\\n summary,\\n time,\\n mark,\\n audio,\\n button,\\n video,\\n dialog {\\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 */\\n article,\\n aside,\\n details,\\n figcaption,\\n figure,\\n footer,\\n header,\\n hgroup,\\n menu,\\n nav,\\n section {\\n display: block;\\n }\\n body {\\n line-height: 1;\\n }\\n ol,\\n ul {\\n list-style: none;\\n }\\n blockquote,\\n q {\\n quotes: none;\\n }\\n blockquote:before,\\n blockquote:after,\\n q:before,\\n q:after {\\n content: \\\"\\\";\\n content: none;\\n }\\n table {\\n border-collapse: collapse;\\n border-spacing: 0;\\n }\\n\\n legend {\\n all: unset;\\n display: block;\\n margin: 0;\\n padding: 0;\\n font: inherit;\\n color: inherit;\\n }\\n dialog {\\n max-width: none;\\n max-height: none;\\n background: transparent;\\n color: inherit;\\n }\\n}\\n\"","import css from './reset.css?raw';\n\nexport const reset = new CSSStyleSheet();\nreset.replaceSync(css);\n"],"names":["css","reset"],"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,GCEFC,IAAQ,IAAI,cAAA;AACzBA,EAAM,YAAYD,CAAG;"}
1
+ {"version":3,"file":"reset.js","sources":["../../../src/themes/stylesheets/reset.css?raw","../../../src/themes/stylesheets/reset.ts"],"sourcesContent":["export default \"/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */\\n@layer tcn-reset {\\n html,\\n body,\\n div,\\n span,\\n applet,\\n object,\\n iframe,\\n h1,\\n h2,\\n h3,\\n h4,\\n h5,\\n h6,\\n p,\\n blockquote,\\n pre,\\n a,\\n abbr,\\n acronym,\\n address,\\n big,\\n cite,\\n code,\\n del,\\n dfn,\\n em,\\n img,\\n ins,\\n kbd,\\n q,\\n s,\\n samp,\\n small,\\n strike,\\n strong,\\n sub,\\n sup,\\n tt,\\n var,\\n b,\\n u,\\n i,\\n center,\\n dl,\\n dt,\\n dd,\\n ol,\\n ul,\\n li,\\n fieldset,\\n form,\\n label,\\n legend,\\n table,\\n caption,\\n tbody,\\n tfoot,\\n thead,\\n tr,\\n th,\\n td,\\n article,\\n aside,\\n canvas,\\n details,\\n embed,\\n figure,\\n figcaption,\\n footer,\\n header,\\n hgroup,\\n menu,\\n nav,\\n output,\\n ruby,\\n section,\\n summary,\\n time,\\n mark,\\n audio,\\n button,\\n video,\\n dialog {\\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 */\\n /* FIXME: sometimes reset breaks stacks display value (flex) */\\n /* header, section */\\n article,\\n aside,\\n details,\\n figcaption,\\n figure,\\n footer,\\n hgroup,\\n menu,\\n nav {\\n display: block;\\n }\\n body {\\n line-height: 1;\\n }\\n ol,\\n ul {\\n list-style: none;\\n }\\n blockquote,\\n q {\\n quotes: none;\\n }\\n blockquote:before,\\n blockquote:after,\\n q:before,\\n q:after {\\n content: \\\"\\\";\\n content: none;\\n }\\n table {\\n border-collapse: collapse;\\n border-spacing: 0;\\n }\\n\\n legend {\\n all: unset;\\n display: block;\\n margin: 0;\\n padding: 0;\\n font: inherit;\\n color: inherit;\\n }\\n dialog {\\n max-width: none;\\n max-height: none;\\n background: transparent;\\n color: inherit;\\n }\\n}\\n\"","import css from './reset.css?raw';\n\nexport const reset = new CSSStyleSheet();\nreset.replaceSync(css);\n"],"names":["css","reset"],"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,GCEFC,IAAQ,IAAI,cAAA;AACzBA,EAAM,YAAYD,CAAG;"}
@@ -1 +1 @@
1
- @layer tcn-theme{:root{--ergo-primary: #ce6b2b;--ergo-secondary: #669eb4;--ergo-secondary-light: #ecf4fb;--ergo-secondary-dark: #497485;--ergo-tertiary: #dfd7cd;--ergo-tertiary-light: #f9f4ed;--ergo-tertiary-dark: #7e6c5d;--ergo-white: #ffffff;--ergo-accent-blue: #395578;--ergo-accent-blue-light: #f3f4f6;--ergo-accent-green: #97bba3;--ergo-accent-green-light: #eef8ef;--ergo-accent-green-dark: #4f785c;--ergo-accent-yellow: #dbc97e;--ergo-accent-yellow-light: #fef9e7;--ergo-grey: #aaaaaa;--ergo-grey-light: #d3d3d3;--ergo-grey-dark: #808080;--ergo-status-red: #ff6565;--ergo-status-red-dark: #c24848;--ergo-status-yellow: #ffd439;--ergo-status-yellow-dark: #dbb735;--ergo-status-blue: var(--ergo-secondary);--ergo-status-blue-dark: var(--ergo-secondary-dark);--ergo-status-green: #3fbc6a;--ergo-status-green-dark: #2d904f;--ergo-ink-primary: var(--ergo-accent-blue);--ergo-ink-inverse: var(--ergo-white);--scalar: 1;--accent-color: var(--ergo-primary);--font-color: var(--ergo-ink-primary);--font-family: "Lato", sans-serif;--font-size: 12px;--gap-small: 4px;--gap-medium: 8px;--gap-large: 16px;--padding-small: 4px;--padding-medium: 8px;--padding-large: 16px;--bar-xs: 16px;--bar-sm: 24px;--bar-md: 32px;--bar-lg: 40px;--bar-xl: 48px;--action-sm: 20px;--action-md: 24px;--action-lg: 32px;--status-color-disabled: var(--ergo-grey-light);--status-color-info: var(--ergo-status-blue);--status-color-warning: var(--ergo-status-yellow);--status-color-positive: var(--ergo-status-green);--status-color-error: var(--ergo-status-red);--async-color-initial: var(--ergo-grey);--async-color-pending: var(--ergo-status-blue);--async-color-success: var(--ergo-status-green);--async-color-failed: var(--ergo-status-red);--action-severity-dangerous: var(--ergo-status-red);--action-severity-cautious: var(--ergo-status-yellow);--action-severity-neutral: var(--ergo-primary);--action-severity-suggested: var(--ergo-status-blue);--action-severity-encouraged: var(--ergo-status-green);--shape-radius-small: 2px;--shape-radius-medium: 4px;--shape-radius-large: 8px;--primary-color-faint: #c0c0c0;--primary-color: #008cff;--primary-color-strong: #008cff;--secondary-color-faint: #c0c0c0;--secondary-color: #008cff;--secondary-color-strong: #008cff;--tertiary-color-faint: #c0c0c0;--tertiary-color: #008cff;--tertiary-color-strong: #008cff;--quaternary-color-faint: #c0c0c0;--quaternary-color: #008cff;--quaternary-color-strong: #008cff;--background-color-primary: #ffffff;--background-color-secondary: #ffffff;--background-color-tertiary: #ffffff;--background-color-quaternary: #ffffff;--foreground-color-primary: #aaa;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--material-disabled: var(--ergo-grey-light);--on-material-disabled: var(--ergo-ink-inverse);--ink-disabled: var(--ergo-grey-light);--material-line: var(--ergo-grey);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--ink: var(--on-material);--act: var(--action);--mat: var(--material);--act-down: color-mix(in srgb, var(--mat), black 12%);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);--act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);--act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);background:var(--mat);color:var(--ink);transition:background .1s,color .1s}.tcn-interactive:focus-visible,.tcn-interactive[data-focus-visible]{background:var(--act-focus);outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-interactive:hover,.tcn-interactive[data-hover]{background:var(--act-raised)}.tcn-interactive:active,.tcn-interactive[data-active]{background:var(--act-down)}.tcn-interactive[data-is-disabled=true]{pointer-events:none}.tcn-base-button{--btn-size-base: 26px;--btn-pad-base: 12px;--btn-pad-delta: 4px;--btn-size-delta: 4px;--btn-font-size-delta: 2px;--btn-step: 1;--btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));--btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));border-radius:var(--shape-radius-medium);min-height:var(--btn-size);padding:var(--padding-small) var(--btn-pad)}.tcn-base-button[data-size=sm]{--btn-step: -1}.tcn-base-button[data-size=md]{--btn-step: 0}.tcn-base-button[data-size=lg]{--btn-step: 1}.tcn-base-button[data-is-utility=true]{height:auto;width:auto;min-width:var(--btn-size);padding:0;--util-ratio: .75;--btn-size-base: 18px;font-size:calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step))}.tcn-base-button[data-is-utility=true] .tcn-icon{min-height:min(2px,calc(var(--btn-size) * var(--util-ratio)));min-width:min(2px,calc(var(--btn-size) * var(--util-ratio)))}.tcn-button{--btn-primary: var(--action);--btn-on-primary: var(--on-action);--btn-variant: var(--on-material);transition:box-shadow .1s,transform .1s}.tcn-button[data-severity=dangerous]{--btn-primary: var(--action-severity-dangerous);--btn-variant: var(--ergo-status-red-dark)}.tcn-button[data-severity=cautious]{--btn-primary: var(--action-severity-cautious);--btn-on-primary: var(--ergo-accent-blue);--btn-variant: var(--ergo-status-yellow-dark)}.tcn-button[data-severity=suggested]{--btn-primary: var(--action-severity-suggested);--btn-variant: var(--ergo-status-blue-dark)}.tcn-button[data-severity=encouraged]{--btn-primary: var(--action-severity-encouraged);--btn-variant: var(--ergo-status-green-dark)}.tcn-button[data-hierarchy=primary]{--act: var(--ergo-white);--ink: var(--tcn-button-text-color, var(--btn-on-primary));--mat: var(--tcn-button-color, var(--btn-primary))}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary]{--act: var(--tcn-button-color, var(--btn-variant));--ink: var(--tcn-button-color, var(--btn-variant))}:is(.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary])[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-button[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}.tcn-button[data-hierarchy=tertiary]{border:1px solid transparent}.tcn-button[data-hierarchy=secondary]{border:1px solid var(--ink)}.tcn-button[data-hierarchy=primary]{border:1px solid var(--mat)}.tcn-button:hover,.tcn-button[data-hover]{transform:translateY(-1px);box-shadow:0 4px 4px #0000001f}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):before,:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):after{content:"";position:absolute;left:0;right:0;height:4px}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):before{top:-2px}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):after{bottom:-2px}.tcn-button:active,.tcn-button[data-active]{transform:translateY(1px);box-shadow:inset 0 2px 2px #0000001f}.tcn-slim-button{height:auto;width:auto;padding:0}.tcn-slim-button[data-size=sm]{min-height:12px;min-width:12px;padding:0}.tcn-slim-button[data-size=sm] .tcn-icon{min-height:10px;min-width:10px}.tcn-slim-button[data-size=md]{min-height:18px;min-width:18px;padding:0}.tcn-slim-button[data-size=md] .tcn-icon{min-height:14px;min-width:14px}.tcn-slim-button[data-size=lg]{min-height:24px;min-width:24px;padding:0}.tcn-slim-button[data-size=lg] .tcn-icon{min-height:20px;min-width:20px}.tcn-button[data-size].tcn-select{padding-inline-end:26px}.tcn-toggle{--tgl-false: var(--ergo-accent-blue);--tgl-true: var(--ergo-accent-blue);--on-tgl-true: var(--ergo-white);--ink: var(--tcn-button-color, var(--tgl-false));--act: var(--tcn-button-color, var(--tgl-false))}.tcn-toggle[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-toggle[data-is-selected=true]{--mat: var(--tcn-button-color, var(--tgl-true));--ink: var(--tcn-button-text-color, var(--ergo-white));--act: var(--ergo-white)}.tcn-toggle[data-is-selected=true][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button-group .tcn-button-group-button:hover,.tcn-button-group .tcn-button-group-button:active{transform:none}.tcn-button-group .tcn-button-group-button{border-radius:0}.tcn-button-group .tcn-button-group-button:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]{border:0}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:last-child){border-right:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:first-child){border-left:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:last-child){border-right:1px solid var(--act-down)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:first-child){border-left:1px solid var(--act-down)}.tcn-select-group .tcn-select-group-option:hover,.tcn-select-group .tcn-select-group-option:active{transform:none}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]{color:var(--act);border-color:var(--act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:hover{background:var(--act-faint)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:active{background:var(--act-down);color:var(--on-act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary][data-is-disabled=true]{color:var(--material-disabled);border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option[data-hierarchy=primary][data-is-disabled=true]{background:var(--material-disabled);color:#fff;border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option{border-radius:0}.tcn-select-group .tcn-select-group-option:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-select-group .tcn-select-group-option:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-tabs-bar .tcn-tabs-list .tcn-tab-item{min-height:24px;padding:0px var(--padding-medium);text-decoration:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item{box-sizing:border-box;border:none;padding:0px var(--padding-medium);border-radius:0}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{--mat: var(--tcn-button-color, var(--material));--ink: var(--tcn-button-text-color, var(--ergo-primary));--act: var(--ergo-primary)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item:focus-visible{z-index:2}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:hover:after,.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:focus-visible:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ergo-accent-blue);pointer-events:none;width:100%;z-index:3}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list:after{content:"";position:absolute;bottom:-1px;left:0;min-height:2px;transform:translate(var(--tabs-active-rectangle-position-x, 0));width:var(--tabs-active-rectangle-width, 0);background:var(--ergo-primary);pointer-events:none;border-bottom-left-radius:2px;border-bottom-right-radius:2px;transition:transform .3s ease-in-out,width .3s ease-in-out;will-change:transform,width;z-index:2}.tcn-tabs-bar[data-variant=default]:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--material-line);pointer-events:none;z-index:1}.tcn-tabs-bar[data-variant=inline]{min-width:min-content;width:auto;flex-grow:0;border-radius:var(--shape-radius-medium);border:1px solid var(--on-material)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list{gap:var(--gap-small);padding:var(--padding-small)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item{border-radius:var(--shape-radius-medium)}.material{background-color:var(--material);color:var(--on-material)}.tcn-divider-line,.tcn-divider-line[data-emphasis=normal]{background:var(--material-line)}.tcn-divider-line[data-emphasis=strong]{background:color-mix(in srgb,var(--material-line) 80%,black 20%)}.tcn-divider-line[data-emphasis=faint]{background:color-mix(in srgb,var(--material-line) 80%,white 20%)}.tcn-draggable[data-is-draggable=true] .tcn-drag-handle{cursor:move}.tcn-frame-dialog{border:inherit}.tcn-tooltip{background:#395578d9;box-shadow:0 4px 7px #414141a8;color:#fff;border-radius:var(--shape-radius-medium);padding:var(--padding-medium)}.tcn-list{gap:var(--gap-medium)}.tcn-list .tcn-item{height:24px;padding:0px var(--padding-medium);border-radius:var(--shape-radius-medium)}.tcn-utility-strip{min-width:var(--bar-md)}.tcn-utility-strip,.tcn-side{padding-block:var(--padding-medium);gap:var(--gap-medium)}.tcn-rail :where(.tcn-body){gap:var(--gap-medium)}.tcn-footer,.tcn-header,.tcn-utility-bar{padding-inline:var(--pad-inline, var(--padding-medium));gap:var(--gap-medium)}.tcn-utility-bar{min-height:var(--bar-md)}.tcn-footer,.tcn-header{min-height:var(--bar-lg)}.tcn-scaffold{--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1);--pad-inline: var(--padding-large)}.tcn-scaffold :where(.tcn-header)+:where(.tcn-body),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-body){border-top:calc(var(--scaffold-divide-header) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body)+:where(.tcn-footer){border-top:calc(var(--scaffold-divide-footer) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body){gap:var(--gap-medium)}.tcn-frame-veil[data-is-veil=true]{background-color:#00000080}.tcn-modal{--divide-header: 0;box-shadow:0 4px 34px #00000096}.tcn-modal :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:1px solid var(--foreground-color-primary)}.tcn-modal :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-modal :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-window{box-shadow:0 4px 34px #00000096;--divide-header: 0}.tcn-window :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:2px solid white}.tcn-window :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-window :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-pop-confirm{--divide-header: 0}.tcn-pop-confirm :where(.tcn-scaffold){--pad-inline: var(--padding-medium);box-shadow:0 4px 8px #0006;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden}.tcn-pop-confirm :where(.tcn-header){min-height:var(--bar-md);--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-pop-confirm :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-confirm{background-color:var(--background-color-primary)}.tcn-panel{background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);overflow:hidden}.tcn-card{--divide-header: 0;background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);border:1px solid var(--foreground-color-primary);overflow:hidden}.tcn-card :where(.tcn-header){min-height:var(--bar-md);--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-card :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-card :where(.tcn-utility-bar){min-height:var(--bar-sm)}.tcn-section{--max-section-depth: 4;--section-tab-width: 4px;--section-tab-start: var(--pad-inline, var(--padding-medium));--section-tab-depth: 0;--section-tab: calc( var(--section-tab-start) + (var(--section-tab-width) * var(--section-tab-depth)) );--section-action: var(--ergo-secondary);--section-mat: var(--ergo-secondary-light);--section-on-mat: var(--ergo-ink-primary)}.tcn-heading{background-color:#f1f1f1;padding-inline-start:8px;height:30px;z-index:5}.tcn-section>.tcn-heading{z-index:calc(var(--max-section-depth) - var(--section-tab-depth));padding-inline-start:var(--section-tab);--material: var(--section-mat);--on-material: var(--section-on-mat);--action: var(--section-action);background-color:var(--material);color:var(--on-material);gap:var(--gap-small)}.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:var(--section-tab)}.tcn-section>.tcn-section{--section-tab-depth: 1;--section-mat: var(--ergo-accent-blue-light);--section-action: var(--ergo-accent-blue)}.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 2;--section-mat: var(--ergo-accent-green-light);--section-action: var(--ergo-accent-green-dark)}.tcn-section>.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 3;--section-mat: var(--ergo-tertiary-light);--section-action: var(--ergo-tertiary-dark)}.tcn-caret{--caret-size: 12px;--caret-triangle-height: calc(var(--caret-size) / 2);--caret-triangle-width: var(--caret-size);--caret-triangle-base: var(--caret-triangle-height) solid transparent;--caret-triangle-peak: var(--caret-triangle-width) solid var(--material);width:0;height:0;flex-grow:0;display:inline-block}.tcn-caret[data-direction=top]{border-bottom:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=bottom]{border-top:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=start]{border-right:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-caret[data-direction=end]{border-left:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-table{--table-pad-inline: var(--pad-inline, var(--padding-medium));--material: var(--ergo-white);--on-material: var(--ergo-ink-primary);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material);border-collapse:separate;display:block}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:first-of-type{border-right:1px solid color-mix(in srgb,var(--material) 80%,black)}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:last-of-type{border-left:1px solid color-mix(in srgb,var(--material) 80%,black)}.tcn-td{text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tcn-thead .tcn-tr{height:var(--bar-md)}.tcn-thead .tcn-tr .tcn-th{border-bottom:1px solid var(--ergo-grey-light)}.tcn-thead .tcn-tr .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)){border-right:1px solid var(--ergo-grey)}.tcn-thead .tcn-tr .tcn-th:last-of-type{border-left:1px solid var(--ergo-grey)}.tcn-tfoot{font-weight:700}.tcn-tfoot .tcn-tr{height:var(--bar-sm)}.tcn-tfoot .tcn-tr .tcn-th,.tcn-tfoot .tcn-tr .tcn-td{border-top:1px solid var(--ergo-grey-light)}.tcn-thead,.tcn-tfoot{font-size:14px;--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-tr{height:var(--bar-sm);align-content:center}.tcn-td,.tcn-th{padding-inline:var(--padding-medium);vertical-align:middle;text-align:start;background:var(--material)}.tcn-table .tcn-tr>.tcn-th:first-child,.tcn-table .tcn-tr>.tcn-td:first-child{padding-inline-start:var(--table-pad-inline)}.tcn-table .tcn-tr>.tcn-th:last-child,.tcn-table .tcn-tr>.tcn-td:last-child{padding-inline-end:var(--table-pad-inline)}.tcn-tbody{font-size:12px}.tcn-tbody .tcn-tr:nth-of-type(2n){--material: var(--ergo-accent-blue-light)}.tcn-tbody .tcn-tr:nth-of-type(odd){--material: var(--ergo-white)}.tcn-tbody .tcn-tr:hover{--material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%)}.tcn-tbody .tcn-tr[data-is-selected=true]{--material: var(--ergo-secondary);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-accent-blue)}.tcn-tbody .tcn-tr{--material: var(--bg-row);--on-material: var(--ergo-accent-blue);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-control{--act: var(--action);--mat: var(--material);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);font-size:12px;border:1px solid var(--ergo-grey);box-sizing:border-box;min-height:var(--action-md);border-radius:var(--shape-radius-medium);padding-inline:4px}.tcn-control[data-is-disabled=false]:hover{background:var(--act-raised)}.tcn-control:focus-visible{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-control:focus{border:1px solid var(--act)}.tcn-control::placeholder{color:var(--ergo-grey)}.tcn-control[data-is-disabled=true]{cursor:not-allowed;background:var(--material-disabled);color:var(--on-material-disabled)}.tcn-control[data-is-disabled=true]::placeholder{color:var(--on-material-disabled)}.tcn-input{height:auto}.tcn-textarea,.tcn-input{cursor:text}.tcn-input-group{border-radius:var(--shape-radius-medium)}.tcn-input-group:focus-within{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-input-group .tcn-input-group-slot{z-index:1;border-radius:0;height:auto;min-height:var(--action-md);padding-block:0}.tcn-input-group .tcn-input-group-slot:focus,.tcn-input-group .tcn-input-group-slot:focus-visible{z-index:3;outline:none}.tcn-input-group .tcn-input-group-slot:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-input-group .tcn-input-group-slot:not(:last-child){margin-right:-1px}.tcn-input-group .tcn-input-group-slot:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy]{border:1px solid var(--ergo-grey);height:auto;min-height:var(--action-md);min-width:var(--action-md);box-sizing:border-box}:is(.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy]):hover,:is(.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy])[data-hover]{transform:none}.tcn-input-group .tcn-select:focus-visible,.tcn-input-group .tcn-button:focus-visible,.tcn-input-group .tcn-button[data-hierarchy]:focus-visible{border-color:var(--ergo-primary)}.tcn-slider[data-is-disabled=true]::-webkit-slider-runnable-track{background:var(--ergo-grey-light)}.tcn-slider[data-is-disabled=true]::-webkit-slider-thumb{background-color:var(--ergo-white);border:1px solid var(--ergo-grey-light)}.tcn-checkbox{border-color:var(--ergo-primary)}.tcn-checkbox:focus-visible,.tcn-checkbox:focus{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-checkbox[data-is-disabled=true]{cursor:not-allowed;border-color:var(--material-disabled)}.tcn-checkbox[data-checked=true][data-is-disabled=true]{background-color:var(--ergo-grey-light)}.tcn-checkbox[data-checked=false][data-is-disabled=true]{background:var(--material);border-color:var(--ergo-grey-light);color:var(--ergo-grey-light)}.tcn-switch-wrapper[data-focused=true][data-is-checked=false],.tcn-switch-wrapper[data-focused=true][data-is-checked=true]{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-input,.tcn-select,.tcn-slider,.tcn-checkbox,.tcn-switch-wrapper,.tcn-date-picker,.tcn-date-picker-year-selector,.tcn-radio{--accent-color: var(--ergo-primary)}}
1
+ @layer tcn-theme{:root{--ergo-primary: #ce6b2b;--ergo-secondary: #669eb4;--ergo-secondary-light: #ecf4fb;--ergo-secondary-dark: #497485;--ergo-tertiary: #dfd7cd;--ergo-tertiary-light: #f9f4ed;--ergo-tertiary-dark: #7e6c5d;--ergo-white: #ffffff;--ergo-accent-blue: #395578;--ergo-accent-blue-light: #f3f4f6;--ergo-accent-green: #97bba3;--ergo-accent-green-light: #eef8ef;--ergo-accent-green-dark: #4f785c;--ergo-accent-yellow: #dbc97e;--ergo-accent-yellow-light: #fef9e7;--ergo-grey: #aaaaaa;--ergo-grey-light: #d3d3d3;--ergo-grey-dark: #808080;--ergo-status-red: #ff6565;--ergo-status-red-dark: #c24848;--ergo-status-yellow: #ffd439;--ergo-status-yellow-dark: #dbb735;--ergo-status-blue: var(--ergo-secondary);--ergo-status-blue-dark: var(--ergo-secondary-dark);--ergo-status-green: #3fbc6a;--ergo-status-green-dark: #2d904f;--ergo-ink-primary: var(--ergo-accent-blue);--ergo-ink-inverse: var(--ergo-white);--scalar: 1;--accent-color: var(--ergo-primary);--font-color: var(--ergo-ink-primary);--font-family: "Lato", sans-serif;--font-size: 12px;--gap-xs: 2px;--gap-small: 4px;--gap-medium: 8px;--gap-large: 16px;--padding-small: 4px;--padding-medium: 8px;--padding-large: 16px;--bar-xs: 16px;--bar-sm: 24px;--bar-md: 32px;--bar-lg: 40px;--bar-xl: 48px;--action-sm: 20px;--action-md: 24px;--action-lg: 32px;--status-color-disabled: var(--ergo-grey-light);--status-color-info: var(--ergo-status-blue);--status-color-warning: var(--ergo-status-yellow);--status-color-positive: var(--ergo-status-green);--status-color-error: var(--ergo-status-red);--async-color-initial: var(--ergo-grey);--async-color-pending: var(--ergo-status-blue);--async-color-success: var(--ergo-status-green);--async-color-failed: var(--ergo-status-red);--action-severity-dangerous: var(--ergo-status-red);--action-severity-cautious: var(--ergo-status-yellow);--action-severity-neutral: var(--ergo-primary);--action-severity-suggested: var(--ergo-status-blue);--action-severity-encouraged: var(--ergo-status-green);--shape-radius-small: 2px;--shape-radius-medium: 4px;--shape-radius-large: 8px;--shape-triangle-medium: 12px;--primary-color-faint: #c0c0c0;--primary-color: #008cff;--primary-color-strong: #008cff;--secondary-color-faint: #c0c0c0;--secondary-color: #008cff;--secondary-color-strong: #008cff;--tertiary-color-faint: #c0c0c0;--tertiary-color: #008cff;--tertiary-color-strong: #008cff;--quaternary-color-faint: #c0c0c0;--quaternary-color: #008cff;--quaternary-color-strong: #008cff;--background-color-primary: #ffffff;--background-color-secondary: #ffffff;--background-color-tertiary: #ffffff;--background-color-quaternary: #ffffff;--foreground-color-primary: #aaa;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--material-disabled: var(--ergo-grey-light);--on-material-disabled: var(--ergo-ink-inverse);--ink-disabled: var(--ergo-grey-light);--material-line: var(--ergo-grey);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--ink: var(--on-material);--act: var(--action);--mat: var(--material);--act-down: color-mix(in srgb, var(--mat), black 12%);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);--act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);--act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);background:var(--mat);color:var(--ink);transition:background .1s,color .1s}.tcn-interactive:focus-visible,.tcn-interactive[data-focus-visible]{background:var(--act-focus);outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-interactive:hover,.tcn-interactive[data-hover]{background:var(--act-raised)}.tcn-interactive:active,.tcn-interactive[data-active]{background:var(--act-down)}.tcn-interactive[data-is-disabled=true]{pointer-events:none}.tcn-base-button{--btn-size-base: 26px;--btn-pad-base: 12px;--btn-pad-delta: 4px;--btn-size-delta: 4px;--btn-font-size-delta: 2px;--btn-step: 1;--btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));--btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));border-radius:var(--shape-radius-medium);min-height:var(--btn-size);padding:var(--padding-small) var(--btn-pad)}.tcn-base-button[data-size=sm]{--btn-step: -1}.tcn-base-button[data-size=md]{--btn-step: 0}.tcn-base-button[data-size=lg]{--btn-step: 1}.tcn-base-button[data-is-utility=true]{height:auto;width:auto;min-width:var(--btn-size);padding:0;--util-ratio: .75;--btn-size-base: 18px;font-size:calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step))}.tcn-base-button[data-is-utility=true] .tcn-icon{min-height:min(2px,calc(var(--btn-size) * var(--util-ratio)));min-width:min(2px,calc(var(--btn-size) * var(--util-ratio)))}.tcn-button{--btn-primary: var(--action);--btn-on-primary: var(--on-action);--btn-variant: var(--on-material);transition:box-shadow .1s,transform .1s}.tcn-button[data-severity=dangerous]{--btn-primary: var(--action-severity-dangerous);--btn-variant: var(--ergo-status-red-dark)}.tcn-button[data-severity=cautious]{--btn-primary: var(--action-severity-cautious);--btn-on-primary: var(--ergo-accent-blue);--btn-variant: var(--ergo-status-yellow-dark)}.tcn-button[data-severity=suggested]{--btn-primary: var(--action-severity-suggested);--btn-variant: var(--ergo-status-blue-dark)}.tcn-button[data-severity=encouraged]{--btn-primary: var(--action-severity-encouraged);--btn-variant: var(--ergo-status-green-dark)}.tcn-button[data-hierarchy=primary]{--act: var(--ergo-white);--ink: var(--tcn-button-text-color, var(--btn-on-primary));--mat: var(--tcn-button-color, var(--btn-primary))}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary]{--act: var(--tcn-button-color, var(--btn-variant));--ink: var(--tcn-button-color, var(--btn-variant))}:is(.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary])[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-button[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}.tcn-button[data-hierarchy=tertiary]{border:1px solid transparent}.tcn-button[data-hierarchy=secondary]{border:1px solid var(--ink)}.tcn-button[data-hierarchy=primary]{border:1px solid var(--mat)}.tcn-button:hover,.tcn-button[data-hover]{transform:translateY(-1px);box-shadow:0 4px 4px #0000001f}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):before,:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):after{content:"";position:absolute;left:0;right:0;height:4px}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):before{top:-2px}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):after{bottom:-2px}.tcn-button:active,.tcn-button[data-active]{transform:translateY(1px);box-shadow:inset 0 2px 2px #0000001f}.tcn-slim-button{height:auto;width:auto;padding:0}.tcn-slim-button[data-size=sm]{min-height:12px;min-width:12px;padding:0}.tcn-slim-button[data-size=sm] .tcn-icon{min-height:10px;min-width:10px}.tcn-slim-button[data-size=md]{min-height:18px;min-width:18px;padding:0}.tcn-slim-button[data-size=md] .tcn-icon{min-height:14px;min-width:14px}.tcn-slim-button[data-size=lg]{min-height:24px;min-width:24px;padding:0}.tcn-slim-button[data-size=lg] .tcn-icon{min-height:20px;min-width:20px}.tcn-button[data-size].tcn-select{padding-inline-end:26px}.tcn-toggle{--tgl-false: var(--ergo-accent-blue);--tgl-true: var(--ergo-accent-blue);--on-tgl-true: var(--ergo-white);--ink: var(--tcn-button-color, var(--tgl-false));--act: var(--tcn-button-color, var(--tgl-false))}.tcn-toggle[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-toggle[data-is-selected=true]{--mat: var(--tcn-button-color, var(--tgl-true));--ink: var(--tcn-button-text-color, var(--ergo-white));--act: var(--ergo-white)}.tcn-toggle[data-is-selected=true][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button-group .tcn-button-group-button:hover,.tcn-button-group .tcn-button-group-button:active{transform:none}.tcn-button-group .tcn-button-group-button{border-radius:0}.tcn-button-group .tcn-button-group-button:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]{border:0}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:last-child){border-right:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:first-child){border-left:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:last-child){border-right:1px solid var(--act-down)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:first-child){border-left:1px solid var(--act-down)}.tcn-select-group .tcn-select-group-option:hover,.tcn-select-group .tcn-select-group-option:active{transform:none}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]{color:var(--act);border-color:var(--act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:hover{background:var(--act-faint)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:active{background:var(--act-down);color:var(--on-act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary][data-is-disabled=true]{color:var(--material-disabled);border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option[data-hierarchy=primary][data-is-disabled=true]{background:var(--material-disabled);color:#fff;border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option{border-radius:0}.tcn-select-group .tcn-select-group-option:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-select-group .tcn-select-group-option:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-tabs-bar .tcn-tabs-list .tcn-tab-item{min-height:24px;padding:0px var(--padding-medium);text-decoration:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item{box-sizing:border-box;border:none;padding:0px var(--padding-medium);border-radius:0}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{--mat: var(--tcn-button-color, var(--material));--ink: var(--tcn-button-text-color, var(--ergo-primary));--act: var(--ergo-primary)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item:focus-visible{z-index:2}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:hover:after,.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:focus-visible:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ergo-accent-blue);pointer-events:none;width:100%;z-index:3}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list:after{content:"";position:absolute;bottom:-1px;left:0;min-height:2px;transform:translate(var(--tabs-active-rectangle-position-x, 0));width:var(--tabs-active-rectangle-width, 0);background:var(--ergo-primary);pointer-events:none;border-bottom-left-radius:2px;border-bottom-right-radius:2px;transition:transform .3s ease-in-out,width .3s ease-in-out;will-change:transform,width;z-index:2}.tcn-tabs-bar[data-variant=default]:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--material-line);pointer-events:none;z-index:1}.tcn-tabs-bar[data-variant=inline]{font-size:12px;min-width:min-content;width:auto;flex-grow:0;border-radius:var(--shape-radius-medium);border:1px solid var(--on-material);padding-block:1px;padding-inline:2px}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list{height:20px;gap:var(--gap-xs)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item{border-radius:var(--shape-radius-medium);min-height:20px}.material{background-color:var(--material);color:var(--on-material)}.tcn-divider-line,.tcn-divider-line[data-emphasis=normal]{background:var(--material-line)}.tcn-divider-line[data-emphasis=strong]{background:color-mix(in srgb,var(--material-line) 80%,black 20%)}.tcn-divider-line[data-emphasis=faint]{background:color-mix(in srgb,var(--material-line) 80%,white 20%)}.tcn-draggable[data-is-draggable=true] .tcn-drag-handle{cursor:move}.tcn-frame-dialog{border:inherit}.tcn-tethered{--tether-pad-x: 0px;--tether-pad-y: 0px;--indicator-pad-x: 0px;--indicator-pad-y: 0px;--tether-pad-size: 0px;--tether-pad-pos: var(--tether-pad-size);--tether-pad-neg: calc(-1 * var(--tether-pad-size));left:calc(var(--tether-pad-x, 0) - var(--indicator-pad-x, 0) + var(--tethered-left, 0));top:calc(var(--tether-pad-y, 0) + var(--tethered-top, 0))}.tcn-tethered :where(.tcn-tethered-origin-indicator){left:calc(var(--indicator-pad-x, 0) + var(--tethered-origin-delta-x, 0));top:calc(var(--indicator-pad-y, 0) + var(--tethered-origin-delta-y, 0))}.tcn-tethered[data-h-anchor=start]{--tether-pad-x: var(--tether-pad-pos)}.tcn-tethered[data-h-anchor=end]{--tether-pad-x: var(--tether-pad-neg)}.tcn-tethered[data-h-origin=start]{--indicator-pad-x: var(--tether-pad-pos)}.tcn-tethered[data-h-origin=end]{--indicator-pad-x: var(--tether-pad-neg)}.tcn-tethered[data-v-origin=center]{--indicator-pad-x: 0px;--tether-pad-x: 0px}.tcn-tethered[data-v-origin=center][data-v-anchor=top]{--tether-pad-y: var(--tether-pad-pos)}.tcn-tethered[data-v-origin=center][data-v-anchor=bottom]{--tether-pad-y: var(--tether-pad-neg)}.tcn-tethered[data-anchor-direction=bottom]{padding-bottom:var(--shape-triangle-medium)}.tcn-tethered[data-anchor-direction=top]{padding-top:var(--shape-triangle-medium)}.tcn-tethered[data-anchor-direction=start]{padding-left:var(--shape-triangle-medium)}.tcn-tethered[data-anchor-direction=end]{padding-right:var(--shape-triangle-medium)}.tcn-tooltip{--tether-pad-size: 16px;background:transparent;--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark)}.tcn-tooltip .tcn-tooltip-label{box-shadow:0 4px 7px #414141a8;color:var(--on-material);background:var(--material);border-radius:var(--shape-radius-medium);padding:var(--padding-medium)}.tcn-list{gap:var(--gap-medium)}.tcn-list .tcn-item{height:24px;padding:0px var(--padding-medium);border-radius:var(--shape-radius-medium)}.tcn-utility-strip{min-width:var(--bar-md)}.tcn-utility-strip,.tcn-side{padding-block:var(--padding-medium);gap:var(--gap-medium)}.tcn-rail :where(.tcn-rail-stack){gap:var(--gap-medium)}.tcn-rail :where(.tcn-body){gap:var(--gap-medium)}.tcn-footer,.tcn-header,.tcn-utility-bar{padding-inline:var(--pad-inline, var(--padding-medium));gap:var(--gap-medium)}.tcn-utility-bar{min-height:var(--bar-md)}.tcn-footer,.tcn-header{min-height:var(--bar-lg)}.tcn-scaffold{--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1);--pad-inline: var(--padding-large)}.tcn-scaffold :where(.tcn-header)+:where(.tcn-body),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-body){border-top:calc(var(--scaffold-divide-header) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body)+:where(.tcn-footer){border-top:calc(var(--scaffold-divide-footer) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body){gap:var(--gap-medium)}.tcn-frame-veil[data-is-veil=true]{background-color:#00000080}.tcn-modal{--divide-header: 0;box-shadow:0 4px 34px #00000096}.tcn-modal :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:1px solid var(--foreground-color-primary)}.tcn-modal :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-modal :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-window{box-shadow:0 4px 34px #00000096;--divide-header: 0}.tcn-window :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:2px solid white}.tcn-window :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-window :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-pop-confirm{--divide-header: 0;--tether-pad-size: 16px}.tcn-pop-confirm :where(.tcn-tethered-origin-indicator){--material: var(--ergo-white)}.tcn-pop-confirm[data-v-origin=top] :where(.tcn-tethered-origin-indicator){--material: var(--ergo-secondary-dark)}.tcn-pop-confirm :where(.tcn-scaffold){--pad-inline: var(--padding-medium);box-shadow:0 4px 8px #0006;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden}.tcn-pop-confirm :where(.tcn-header){min-height:var(--bar-md);--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-pop-confirm :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-confirm{background-color:var(--background-color-primary)}.tcn-bar{gap:var(--gap-medium)}.tcn-bar :where(.tcn-group:not(:last-child):not(:has(+.tcn-spacer))):after{content:"";display:block;min-width:2px;height:18px;background:var(--ergo-grey);border-radius:var(--shape-radius-small);align-self:center}.tcn-panel{--material: var(--background-color-primary);background-color:var(--material);border-radius:var(--shape-radius-medium);overflow:hidden}.tcn-card{--divide-header: 0;background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);border:1px solid var(--foreground-color-primary);overflow:hidden}.tcn-card :where(.tcn-header){min-height:var(--bar-md);--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-card :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-card :where(.tcn-utility-bar){min-height:var(--bar-sm)}.tcn-section{--max-section-depth: 4;--section-tab-width: 4px;--section-tab-start: var(--pad-inline, var(--padding-medium));--section-tab-depth: 0;--section-tab: calc( var(--section-tab-start) + (var(--section-tab-width) * var(--section-tab-depth)) );--section-action: var(--ergo-secondary);--section-mat: var(--ergo-secondary-light);--section-on-mat: var(--ergo-ink-primary)}.tcn-heading{background-color:#f1f1f1;padding-inline-start:8px;height:30px;z-index:5}.tcn-section>.tcn-heading{z-index:calc(var(--max-section-depth) - var(--section-tab-depth));padding-inline-start:var(--section-tab);--material: var(--section-mat);--on-material: var(--section-on-mat);--action: var(--section-action);background-color:var(--material);color:var(--on-material);gap:var(--gap-small)}.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:var(--section-tab)}.tcn-section>.tcn-section{--section-tab-depth: 1;--section-mat: var(--ergo-accent-blue-light);--section-action: var(--ergo-accent-blue)}.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 2;--section-mat: var(--ergo-accent-green-light);--section-action: var(--ergo-accent-green-dark)}.tcn-section>.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 3;--section-mat: var(--ergo-tertiary-light);--section-action: var(--ergo-tertiary-dark)}.tcn-caret{--caret-size: var(--shape-triangle-medium);--caret-triangle-height: calc(var(--caret-size) / 2);--caret-triangle-width: var(--caret-size);--caret-triangle-base: var(--caret-triangle-height) solid transparent;--caret-triangle-peak: var(--caret-triangle-width) solid var(--material);width:var(--caret-size);height:var(--caret-size);min-width:var(--caret-size);min-height:var(--caret-size);flex-grow:0;display:inline-block}.tcn-caret[data-direction=top]{border-bottom:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=bottom]{border-top:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=start]{border-right:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-caret[data-direction=end]{border-left:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-table{--table-pad-inline: var(--pad-inline, var(--padding-medium));--material: var(--ergo-white);--on-material: var(--ergo-ink-primary);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material);border-collapse:separate;display:block}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:first-of-type{border-right:1px solid color-mix(in srgb,var(--material) 80%,black)}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:last-of-type{border-left:1px solid color-mix(in srgb,var(--material) 80%,black)}.tcn-td{text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tcn-thead .tcn-tr{height:var(--bar-md)}.tcn-thead .tcn-tr .tcn-th{border-bottom:1px solid var(--ergo-grey-light)}.tcn-thead .tcn-tr .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)){border-right:1px solid var(--ergo-grey)}.tcn-thead .tcn-tr .tcn-th:last-of-type{border-left:1px solid var(--ergo-grey)}.tcn-tfoot{font-weight:700}.tcn-tfoot .tcn-tr{height:var(--bar-sm)}.tcn-tfoot .tcn-tr .tcn-th,.tcn-tfoot .tcn-tr .tcn-td{border-top:1px solid var(--ergo-grey-light)}.tcn-thead,.tcn-tfoot{font-size:14px;--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-tr{height:var(--bar-sm);align-content:center}.tcn-td,.tcn-th{padding-inline:var(--padding-medium);vertical-align:middle;text-align:start;background:var(--material)}.tcn-table .tcn-tr>.tcn-th:first-child,.tcn-table .tcn-tr>.tcn-td:first-child{padding-inline-start:var(--table-pad-inline)}.tcn-table .tcn-tr>.tcn-th:last-child,.tcn-table .tcn-tr>.tcn-td:last-child{padding-inline-end:var(--table-pad-inline)}.tcn-tbody{font-size:12px}.tcn-tbody .tcn-tr:nth-of-type(2n){--material: var(--ergo-accent-blue-light)}.tcn-tbody .tcn-tr:nth-of-type(odd){--material: var(--ergo-white)}.tcn-tbody .tcn-tr:hover{--material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%)}.tcn-tbody .tcn-tr[data-is-selected=true]{--material: var(--ergo-secondary);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-accent-blue)}.tcn-tbody .tcn-tr{--material: var(--bg-row);--on-material: var(--ergo-accent-blue);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-control{--act: var(--action);--mat: var(--material);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);font-size:12px;border:1px solid var(--ergo-grey);box-sizing:border-box;min-height:var(--action-md);border-radius:var(--shape-radius-medium);padding-inline:4px}.tcn-control[data-is-disabled=false]:hover{background:var(--act-raised)}.tcn-control:focus-visible{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-control:focus{border:1px solid var(--act)}.tcn-control::placeholder{color:var(--ergo-grey)}.tcn-control[data-is-disabled=true]{cursor:not-allowed;background:var(--material-disabled);color:var(--on-material-disabled)}.tcn-control[data-is-disabled=true]::placeholder{color:var(--on-material-disabled)}.tcn-input{height:auto}.tcn-textarea,.tcn-input{cursor:text}.tcn-input-group{border-radius:var(--shape-radius-medium)}.tcn-input-group:focus-within{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-input-group .tcn-input-group-slot{z-index:1;border-radius:0;height:auto;min-height:var(--action-md);padding-block:0}.tcn-input-group .tcn-input-group-slot:focus,.tcn-input-group .tcn-input-group-slot:focus-visible{z-index:3;outline:none}.tcn-input-group .tcn-input-group-slot:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-input-group .tcn-input-group-slot:not(:last-child){margin-right:-1px}.tcn-input-group .tcn-input-group-slot:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy]{border:1px solid var(--ergo-grey);height:auto;min-height:var(--action-md);min-width:var(--action-md);box-sizing:border-box}:is(.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy]):hover,:is(.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy])[data-hover]{transform:none}.tcn-input-group .tcn-select:focus-visible,.tcn-input-group .tcn-button:focus-visible,.tcn-input-group .tcn-button[data-hierarchy]:focus-visible{border-color:var(--ergo-primary)}.tcn-slider[data-is-disabled=true]::-webkit-slider-runnable-track{background:var(--ergo-grey-light)}.tcn-slider[data-is-disabled=true]::-webkit-slider-thumb{background-color:var(--ergo-white);border:1px solid var(--ergo-grey-light)}.tcn-checkbox{border-color:var(--ergo-primary)}.tcn-checkbox:focus-visible,.tcn-checkbox:focus{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-checkbox[data-is-disabled=true]{cursor:not-allowed;border-color:var(--material-disabled)}.tcn-checkbox[data-checked=true][data-is-disabled=true]{background-color:var(--ergo-grey-light)}.tcn-checkbox[data-checked=false][data-is-disabled=true]{background:var(--material);border-color:var(--ergo-grey-light);color:var(--ergo-grey-light)}.tcn-switch-wrapper[data-focused=true][data-is-checked=false],.tcn-switch-wrapper[data-focused=true][data-is-checked=true]{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-input,.tcn-select,.tcn-slider,.tcn-checkbox,.tcn-switch-wrapper,.tcn-date-picker,.tcn-date-picker-year-selector,.tcn-radio,.tcn-suggestion-list-search-input,.tcn-suggestion-list{--accent-color: var(--ergo-primary)}}