@tcn/ui 0.16.0 → 0.17.0

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 (185) hide show
  1. package/dist/card.css +1 -0
  2. package/dist/column.css +1 -1
  3. package/dist/containers.css +1 -1
  4. package/dist/containers.module-BmICKsOK.js +5 -0
  5. package/dist/containers.module-BmICKsOK.js.map +1 -0
  6. package/dist/form/field/field.js +11 -8
  7. package/dist/form/field/field.js.map +1 -1
  8. package/dist/inputs/color_input/color_picker.js +5 -2
  9. package/dist/inputs/color_input/color_picker.js.map +1 -1
  10. package/dist/inputs/combo_box/combo_box.js +18 -15
  11. package/dist/inputs/combo_box/combo_box.js.map +1 -1
  12. package/dist/inputs/date_picker/date_picker.js +13 -10
  13. package/dist/inputs/date_picker/date_picker.js.map +1 -1
  14. package/dist/inputs/date_picker/date_picker_input.js +20 -17
  15. package/dist/inputs/date_picker/date_picker_input.js.map +1 -1
  16. package/dist/inputs/date_picker/date_picker_year_selector.js +5 -2
  17. package/dist/inputs/date_picker/date_picker_year_selector.js.map +1 -1
  18. package/dist/inputs/mask_input/key_capture_input.js +26 -23
  19. package/dist/inputs/mask_input/key_capture_input.js.map +1 -1
  20. package/dist/inputs/mask_input/mask_input.js +5 -2
  21. package/dist/inputs/mask_input/mask_input.js.map +1 -1
  22. package/dist/inputs/multiselect/multiselect.js +22 -19
  23. package/dist/inputs/multiselect/multiselect.js.map +1 -1
  24. package/dist/inputs/phone_number_input/phone_number_context.js +7 -4
  25. package/dist/inputs/phone_number_input/phone_number_context.js.map +1 -1
  26. package/dist/inputs/select/select.js +5 -2
  27. package/dist/inputs/select/select.js.map +1 -1
  28. package/dist/inputs/slider/slider.js +19 -16
  29. package/dist/inputs/slider/slider.js.map +1 -1
  30. package/dist/inputs/suggestions/suggestion_list.js +5 -2
  31. package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
  32. package/dist/inputs/switch/switch.js +18 -15
  33. package/dist/inputs/switch/switch.js.map +1 -1
  34. package/dist/inputs/unit_input/unit_input.js +15 -12
  35. package/dist/inputs/unit_input/unit_input.js.map +1 -1
  36. package/dist/layouts/containers/columns/columns.d.ts +6 -1
  37. package/dist/layouts/containers/columns/columns.d.ts.map +1 -1
  38. package/dist/layouts/containers/columns/columns.js +30 -7
  39. package/dist/layouts/containers/columns/columns.js.map +1 -1
  40. package/dist/layouts/containers/rail.d.ts +2 -5
  41. package/dist/layouts/containers/rail.d.ts.map +1 -1
  42. package/dist/layouts/containers/rail.js +17 -55
  43. package/dist/layouts/containers/rail.js.map +1 -1
  44. package/dist/layouts/containers/rows/index.d.ts +3 -0
  45. package/dist/layouts/containers/rows/index.d.ts.map +1 -0
  46. package/dist/layouts/containers/rows/index.js +7 -0
  47. package/dist/layouts/containers/rows/index.js.map +1 -0
  48. package/dist/layouts/containers/rows/row.d.ts +6 -0
  49. package/dist/layouts/containers/rows/row.d.ts.map +1 -0
  50. package/dist/layouts/containers/rows/row.js +20 -0
  51. package/dist/layouts/containers/rows/row.js.map +1 -0
  52. package/dist/layouts/containers/rows/rows.d.ts +11 -0
  53. package/dist/layouts/containers/rows/rows.d.ts.map +1 -0
  54. package/dist/layouts/containers/rows/rows.js +34 -0
  55. package/dist/layouts/containers/rows/rows.js.map +1 -0
  56. package/dist/layouts/containers/scaffold.d.ts +2 -5
  57. package/dist/layouts/containers/scaffold.d.ts.map +1 -1
  58. package/dist/layouts/containers/scaffold.js +17 -55
  59. package/dist/layouts/containers/scaffold.js.map +1 -1
  60. package/dist/layouts/index.d.ts +2 -0
  61. package/dist/layouts/index.d.ts.map +1 -1
  62. package/dist/layouts/index.js +26 -22
  63. package/dist/layouts/index.js.map +1 -1
  64. package/dist/mobile/inputs/date_picker/mobile_date_picker_header.js +5 -2
  65. package/dist/mobile/inputs/date_picker/mobile_date_picker_header.js.map +1 -1
  66. package/dist/mobile/inputs/date_picker/mobile_date_picker_input.js +5 -2
  67. package/dist/mobile/inputs/date_picker/mobile_date_picker_input.js.map +1 -1
  68. package/dist/mobile/inputs/date_picker/mobile_date_picker_year_selector.js +8 -5
  69. package/dist/mobile/inputs/date_picker/mobile_date_picker_year_selector.js.map +1 -1
  70. package/dist/navigation/tabs/state/link/tab_link.js +9 -6
  71. package/dist/navigation/tabs/state/link/tab_link.js.map +1 -1
  72. package/dist/overlay/menu/menu.js +3 -0
  73. package/dist/overlay/menu/menu.js.map +1 -1
  74. package/dist/overlay/popper/context_popper.js +8 -5
  75. package/dist/overlay/popper/context_popper.js.map +1 -1
  76. package/dist/overlay/popper/element_popper.js +9 -6
  77. package/dist/overlay/popper/element_popper.js.map +1 -1
  78. package/dist/overlay/popper/legacy/popper.js +13 -10
  79. package/dist/overlay/popper/legacy/popper.js.map +1 -1
  80. package/dist/overlay/popper/preview_popper.js +10 -7
  81. package/dist/overlay/popper/preview_popper.js.map +1 -1
  82. package/dist/overlay/tethered/tethered.js +11 -8
  83. package/dist/overlay/tethered/tethered.js.map +1 -1
  84. package/dist/resizable.css +1 -0
  85. package/dist/resizable.module-I6iyBAvM.js +5 -0
  86. package/dist/resizable.module-I6iyBAvM.js.map +1 -0
  87. package/dist/resize_handle.css +1 -0
  88. package/dist/row.css +1 -0
  89. package/dist/stacks/box/box.js +12 -9
  90. package/dist/stacks/box/box.js.map +1 -1
  91. package/dist/stacks/box/detect_resize_bounds.d.ts +1 -0
  92. package/dist/stacks/box/detect_resize_bounds.d.ts.map +1 -1
  93. package/dist/stacks/box/detect_resize_bounds.js +22 -20
  94. package/dist/stacks/box/detect_resize_bounds.js.map +1 -1
  95. package/dist/stacks/h_collapsible_box.js +17 -14
  96. package/dist/stacks/h_collapsible_box.js.map +1 -1
  97. package/dist/stacks/v_collapsible_box.js +19 -16
  98. package/dist/stacks/v_collapsible_box.js.map +1 -1
  99. package/dist/surfaces/card/card.d.ts.map +1 -1
  100. package/dist/surfaces/card/card.js +14 -6
  101. package/dist/surfaces/card/card.js.map +1 -1
  102. package/dist/surfaces/pop_confirm/pop_confirm.js +4 -2
  103. package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
  104. package/dist/test-setup.d.ts +2 -0
  105. package/dist/test-setup.d.ts.map +1 -0
  106. package/dist/test-setup.js +10 -0
  107. package/dist/test-setup.js.map +1 -0
  108. package/dist/themes/theme.d.ts.map +1 -1
  109. package/dist/themes/theme.js +17 -22
  110. package/dist/themes/theme.js.map +1 -1
  111. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  112. package/dist/themes/themes/ergo/ergo_theme.js +201 -21
  113. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  114. package/dist/utils/index.d.ts +1 -0
  115. package/dist/utils/index.d.ts.map +1 -1
  116. package/dist/utils/index.js +39 -26
  117. package/dist/utils/index.js.map +1 -1
  118. package/dist/utils/resize/context.d.ts +4 -0
  119. package/dist/utils/resize/context.d.ts.map +1 -0
  120. package/dist/utils/resize/context.js +10 -0
  121. package/dist/utils/resize/context.js.map +1 -0
  122. package/dist/utils/resize/handle_config.d.ts +32 -0
  123. package/dist/utils/resize/handle_config.d.ts.map +1 -0
  124. package/dist/utils/resize/handle_config.js +85 -0
  125. package/dist/utils/resize/handle_config.js.map +1 -0
  126. package/dist/utils/resize/index.d.ts +10 -0
  127. package/dist/utils/resize/index.d.ts.map +1 -0
  128. package/dist/utils/resize/index.js +16 -0
  129. package/dist/utils/resize/index.js.map +1 -0
  130. package/dist/utils/resize/resizable.d.ts +11 -0
  131. package/dist/utils/resize/resizable.d.ts.map +1 -0
  132. package/dist/utils/resize/resizable.js +52 -0
  133. package/dist/utils/resize/resizable.js.map +1 -0
  134. package/dist/utils/resize/resize_handle.d.ts +7 -0
  135. package/dist/utils/resize/resize_handle.d.ts.map +1 -0
  136. package/dist/utils/resize/resize_handle.js +100 -0
  137. package/dist/utils/resize/resize_handle.js.map +1 -0
  138. package/dist/utils/resize/resize_strategy.d.ts +47 -0
  139. package/dist/utils/resize/resize_strategy.d.ts.map +1 -0
  140. package/dist/utils/resize/resize_strategy.js +108 -0
  141. package/dist/utils/resize/resize_strategy.js.map +1 -0
  142. package/dist/utils/resize/types.d.ts +28 -0
  143. package/dist/utils/resize/types.d.ts.map +1 -0
  144. package/dist/utils/resize/types.js +2 -0
  145. package/dist/utils/resize/types.js.map +1 -0
  146. package/package.json +3 -3
  147. package/src/layouts/__stories__/columns.stories.tsx +31 -0
  148. package/src/layouts/__stories__/composed.stories.tsx +77 -8
  149. package/src/layouts/__stories__/rows.stories.tsx +77 -0
  150. package/src/layouts/__stories__/utils.tsx +2 -84
  151. package/src/layouts/containers/columns/column.module.css +3 -2
  152. package/src/layouts/containers/columns/columns.tsx +29 -3
  153. package/src/layouts/containers/containers.module.css +27 -29
  154. package/src/layouts/containers/rail.tsx +9 -51
  155. package/src/layouts/containers/rows/index.ts +2 -0
  156. package/src/layouts/containers/rows/row.module.css +15 -0
  157. package/src/layouts/containers/rows/row.tsx +22 -0
  158. package/src/layouts/containers/rows/rows.tsx +42 -0
  159. package/src/layouts/containers/scaffold.tsx +9 -49
  160. package/src/layouts/index.ts +2 -0
  161. package/src/stacks/box/detect_resize_bounds.ts +5 -1
  162. package/src/surfaces/card/card.module.css +5 -0
  163. package/src/surfaces/card/card.stories.tsx +66 -8
  164. package/src/surfaces/card/card.tsx +6 -2
  165. package/src/surfaces/page/page.stories.tsx +84 -4
  166. package/src/surfaces/panel/__stories__/panel.stories.tsx +84 -9
  167. package/src/test-setup.ts +11 -0
  168. package/src/themes/theme.tsx +6 -16
  169. package/src/themes/themes/ergo/ergo_theme.css +199 -19
  170. package/src/utils/index.ts +2 -0
  171. package/src/utils/resize/__stories__/resizable.stories.tsx +214 -0
  172. package/src/utils/resize/__stories__/resizable_stories.module.css +47 -0
  173. package/src/utils/resize/__tests__/handle_config.test.ts +269 -0
  174. package/src/utils/resize/__tests__/resize_strategy.test.ts +163 -0
  175. package/src/utils/resize/context.ts +9 -0
  176. package/src/utils/resize/handle_config.ts +142 -0
  177. package/src/utils/resize/index.ts +37 -0
  178. package/src/utils/resize/resizable.module.css +5 -0
  179. package/src/utils/resize/resizable.tsx +97 -0
  180. package/src/utils/resize/resize_handle.module.css +146 -0
  181. package/src/utils/resize/resize_handle.tsx +165 -0
  182. package/src/utils/resize/resize_strategy.ts +190 -0
  183. package/src/utils/resize/types.ts +64 -0
  184. package/dist/containers.module-DlGySre0.js +0 -5
  185. package/dist/containers.module-DlGySre0.js.map +0 -1
package/dist/themes/themes/ergo/ergo_theme.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/tokens/theme_tokens.css?raw","../../../../src/themes/themes/ergo/tokens/system_tokens.css?raw","../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"@layer tcn-theme {\\n :root {\\n /* ========== Ergo Palette ========== */\\n --ergo-white: #ffffff;\\n\\n --ergo-primary: #ce6b2b;\\n --ergo-primary-light: #fff7f0;\\n --ergo-primary-dark: #b86128;\\n\\n --ergo-secondary: #669eb4;\\n --ergo-secondary-light: #ecf4fb;\\n --ergo-secondary-dark: #497485;\\n\\n --ergo-tertiary: #dfd7cd;\\n --ergo-tertiary-light: #f9f4ed;\\n --ergo-tertiary-dark: #7e6c5d;\\n\\n --ergo-accent-blue: #395578;\\n --ergo-accent-blue-light: #f3f4f6;\\n --ergo-accent-blue-dark: #627083;\\n\\n --ergo-accent-green: #97bba3;\\n --ergo-accent-green-light: #eef8ef;\\n --ergo-accent-green-dark: #4f785c;\\n\\n --ergo-accent-yellow: #dbc97e;\\n --ergo-accent-yellow-light: #fef9e7;\\n --ergo-accent-yellow-dark: #82722b;\\n\\n --ergo-grey: #aaaaaa;\\n --ergo-grey-light: #d3d3d3;\\n --ergo-grey-dark: #808080;\\n\\n --ergo-status-red: #ff6565;\\n --ergo-status-red-dark: #c24848;\\n --ergo-status-red-light: #fff4f4;\\n\\n --ergo-status-yellow: #ffd439;\\n --ergo-status-yellow-dark: #dbb735;\\n --ergo-status-yellow-light: #ffeca9;\\n\\n --ergo-status-blue: var(--ergo-secondary);\\n --ergo-status-blue-dark: var(--ergo-secondary-dark);\\n --ergo-status-blue-light: var(--ergo-secondary-light);\\n\\n --ergo-status-green: #3fbc6a;\\n --ergo-status-green-dark: #2d904f;\\n --ergo-status-green-light: #87e8a8;\\n\\n --ergo-material-bg-primary: #ffffff;\\n --ergo-material-bg-secondary: #fafafa;\\n --ergo-material-bg-tertiary: #f1f1f1;\\n --ergo-material-bg-quaternary: #ffffff;\\n\\n --ergo-material-overlay: var(--ergo-secondary-dark);\\n --ergo-material-border: var(--ergo-grey);\\n --ergo-material-divider: var(--ergo-grey);\\n --ergo-material-disabled-outline: var(--ergo-grey-light);\\n --ergo-material-disabled-fill: var(--ergo-grey);\\n\\n /* ========== Ergo Text ========== */\\n --ergo-text-size-input: 12px;\\n --ergo-text-size-default: 12px;\\n --ergo-text-color-primary: var(--ergo-accent-blue);\\n --ergo-text-color-inverse: var(--ergo-white);\\n --ergo-text-color-disabled-outline: var(--ergo-grey);\\n --ergo-text-color-disabled-fill: var(--ergo-white);\\n\\n /* ========== Spacing ========== */\\n --ergo-spacing-xs: 2px;\\n --ergo-spacing-sm: 4px;\\n --ergo-spacing-md: 8px;\\n --ergo-spacing-lg: 16px;\\n --ergo-spacing-xl: 32px;\\n\\n /* ========== Sizing ========== */\\n --ergo-sizing-bar-xs: 16px;\\n --ergo-sizing-bar-sm: 24px;\\n --ergo-sizing-bar-md: 32px;\\n --ergo-sizing-bar-lg: 40px;\\n --ergo-sizing-bar-xl: 48px;\\n\\n --ergo-sizing-action-sm: 20px;\\n --ergo-sizing-action-md: 24px;\\n --ergo-sizing-action-lg: 32px;\\n\\n /* ========== Shape ========== */\\n --ergo-shape-radius-small: 2px;\\n --ergo-shape-radius-medium: 4px;\\n --ergo-shape-radius-large: 8px;\\n --ergo-shape-triangle-medium: 12px;\\n\\n /* Default Material - TODO: move to system once blackcat support material */\\n --action: var(--ergo-primary);\\n --on-action: var(--ergo-white);\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-accent-blue);\\n }\\n}\\n\"","export default \"@layer tcn-theme {\\n :root {\\n /* ========== Blackcat System Tokens ========== */\\n --scalar: 1;\\n --accent-color: var(--ergo-primary);\\n\\n /* Typography */\\n --font-color: var(--ergo-text-color-primary);\\n --font-family: \\\"Lato\\\", sans-serif;\\n --font-size: var(--ergo-text-size-default);\\n\\n /* Spacing */\\n --gap-small: var(--ergo-spacing-sm);\\n --gap-medium: var(--ergo-spacing-md);\\n --gap-large: var(--ergo-spacing-lg);\\n\\n --padding-small: var(--ergo-spacing-sm);\\n --padding-medium: var(--ergo-spacing-md);\\n --padding-large: var(--ergo-spacing-lg);\\n\\n /* Status Colors */\\n --status-color-disabled: var(--ergo-grey-light);\\n --status-color-info: var(--ergo-status-blue);\\n --status-color-warning: var(--ergo-status-yellow);\\n --status-color-positive: var(--ergo-status-green);\\n --status-color-error: var(--ergo-status-red);\\n\\n --async-color-initial: var(--ergo-grey);\\n --async-color-pending: var(--ergo-status-blue);\\n --async-color-success: var(--ergo-status-green);\\n --async-color-failed: var(--ergo-status-red);\\n\\n /* Action Severity */\\n --action-severity-dangerous: var(--ergo-status-red);\\n --action-severity-cautious: var(--ergo-status-yellow);\\n --action-severity-neutral: var(--ergo-primary);\\n --action-severity-suggested: var(--ergo-status-blue);\\n --action-severity-encouraged: var(--ergo-status-green);\\n\\n /* Palette */\\n --primary-color-faint: var(--ergo-grey-light);\\n --primary-color: var(--ergo-primary);\\n --primary-color-strong: var(--ergo-primary-dark);\\n\\n --secondary-color-faint: var(--ergo-secondary-light);\\n --secondary-color: var(--ergo-secondary);\\n --secondary-color-strong: var(--ergo-secondary-dark);\\n\\n --tertiary-color-faint: var(--ergo-tertiary-light);\\n --tertiary-color: var(--ergo-tertiary);\\n --tertiary-color-strong: var(--ergo-tertiary-dark);\\n\\n --quaternary-color-faint: var(--ergo-accent-blue-light);\\n --quaternary-color: var(--ergo-accent-blue);\\n --quaternary-color-strong: var(--ergo-accent-blue-dark);\\n\\n --background-color-primary: var(--ergo-material-bg-primary);\\n --background-color-secondary: var(--ergo-material-bg-secondary);\\n --background-color-tertiary: var(--ergo-material-bg-tertiary);\\n --background-color-quaternary: var(--ergo-material-bg-quaternary);\\n\\n /* Not sure what other text colors are needed */\\n --foreground-color-primary: var(--ergo-text-color-primary);\\n --foreground-color-secondary: var(--ergo-text-color-primary);\\n --foreground-color-tertiary: var(--ergo-text-color-primary);\\n --foreground-color-quaternary: var(--ergo-text-color-primary);\\n }\\n}\\n\"","export default \"@layer tcn-theme {\\n /* ===== CSS VARIABLES ===== */\\n\\n .tcn-theme-root {\\n font-family: var(--font-family);\\n color: var(--font-color);\\n /* TODO: move to system */\\n --action: var(--ergo-primary);\\n --on-action: var(--ergo-white);\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-accent-blue);\\n }\\n\\n /* ===== Actions ===== */\\n\\n .tcn-interactive {\\n cursor: pointer;\\n user-select: none;\\n transition:\\n transform 0.1s,\\n background 0.1s,\\n color 0.1s;\\n\\n --ink: var(--on-material);\\n --act: var(--action);\\n --mat: var(--material);\\n\\n --act-down: color-mix(in srgb, var(--mat), black 12%);\\n --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n --act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);\\n --act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);\\n\\n background: var(--mat);\\n color: var(--ink);\\n transition:\\n background 0.1s,\\n color 0.1s;\\n\\n &:focus-visible,\\n &[data-focus-visible] {\\n background: var(--act-focus);\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n &:hover,\\n &[data-hover] {\\n background: var(--act-raised);\\n }\\n\\n &:active,\\n &[data-active] {\\n background: var(--act-down);\\n }\\n\\n &[data-is-disabled=\\\"true\\\"] {\\n pointer-events: none;\\n }\\n }\\n\\n /* ===== Base Button ===== \\n * Shared between Button and Toggle.\\n * Primarily manages button dimensions and sizing ratios.\\n */\\n .tcn-base-button {\\n --btn-size-base: 26px;\\n --btn-pad-base: 12px;\\n\\n --btn-pad-delta: 4px;\\n --btn-size-delta: 4px;\\n --btn-font-size-delta: 2px;\\n --btn-step: 1;\\n\\n /* Increase size and pad by 4px for each size \\\"step\\\" from medium */\\n --btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));\\n --btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));\\n\\n border-radius: var(--ergo-shape-radius-medium);\\n min-height: var(--btn-size);\\n padding: var(--padding-small) var(--btn-pad);\\n\\n &[data-size=\\\"sm\\\"] {\\n --btn-step: -1;\\n }\\n &[data-size=\\\"md\\\"] {\\n --btn-step: 0;\\n }\\n &[data-size=\\\"lg\\\"] {\\n --btn-step: 1;\\n }\\n\\n &[data-is-utility=\\\"true\\\"] {\\n height: auto;\\n width: auto;\\n min-width: var(--btn-size);\\n padding: 0;\\n\\n /* Icon is 75% of the button size but minimum of 2px to account for border and 1px offset */\\n --util-ratio: 0.75;\\n --btn-size-base: 18px;\\n\\n font-size: calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step));\\n .tcn-icon {\\n min-height: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n }\\n }\\n }\\n\\n /* ===== Button ===== \\n * Manages Hierarchy and Severity.\\n */\\n .tcn-button {\\n --btn-primary: var(--action);\\n --btn-on-primary: var(--on-action);\\n --btn-variant: var(--on-material);\\n\\n &[data-severity=\\\"dangerous\\\"] {\\n --btn-primary: var(--action-severity-dangerous);\\n --btn-variant: var(--ergo-status-red-dark);\\n }\\n &[data-severity=\\\"cautious\\\"] {\\n --btn-primary: var(--action-severity-cautious);\\n --btn-on-primary: var(--ergo-accent-blue);\\n --btn-variant: var(--ergo-status-yellow-dark);\\n }\\n &[data-severity=\\\"suggested\\\"] {\\n --btn-primary: var(--action-severity-suggested);\\n --btn-variant: var(--ergo-status-blue-dark);\\n }\\n &[data-severity=\\\"encouraged\\\"] {\\n --btn-primary: var(--action-severity-encouraged);\\n --btn-variant: var(--ergo-status-green-dark);\\n }\\n\\n &[data-hierarchy=\\\"primary\\\"] {\\n --act: var(--ergo-white);\\n --ink: var(--tcn-button-text-color, var(--btn-on-primary));\\n --mat: var(--tcn-button-color, var(--btn-primary));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-white);\\n --mat: var(--ergo-grey-light);\\n }\\n }\\n\\n &[data-hierarchy=\\\"secondary\\\"],\\n &[data-hierarchy=\\\"tertiary\\\"] {\\n --act: var(--tcn-button-color, var(--btn-variant));\\n --ink: var(--tcn-button-color, var(--btn-variant));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-grey-light);\\n }\\n }\\n\\n /* Decorations */\\n &[data-hierarchy=\\\"tertiary\\\"]:hover {\\n text-decoration: underline;\\n text-decoration-color: var(--ink);\\n text-decoration-thickness: 1px;\\n text-underline-offset: 4px;\\n }\\n\\n &[data-hierarchy=\\\"tertiary\\\"] {\\n border: 1px solid transparent;\\n }\\n\\n &[data-hierarchy=\\\"secondary\\\"] {\\n border: 1px solid var(--ink);\\n }\\n\\n &[data-hierarchy=\\\"primary\\\"] {\\n border: 1px solid var(--mat);\\n }\\n\\n transition:\\n box-shadow 0.1s,\\n transform 0.1s;\\n\\n &:hover,\\n &[data-hover] {\\n transform: translateY(-1px);\\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);\\n\\n /* Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles */\\n :not(.tcn-select) {\\n &::before,\\n &::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n right: 0;\\n height: 4px;\\n }\\n\\n &::before {\\n top: -2px;\\n }\\n\\n &::after {\\n bottom: -2px;\\n }\\n }\\n }\\n\\n &:active,\\n &[data-active] {\\n transform: translateY(1px);\\n box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.12);\\n }\\n }\\n\\n /* @deprecated - use Button with utility prop instead */\\n .tcn-slim-button {\\n height: auto;\\n width: auto;\\n padding: 0;\\n\\n &[data-size=\\\"sm\\\"] {\\n min-height: 12px;\\n min-width: 12px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 10px;\\n min-width: 10px;\\n }\\n }\\n &[data-size=\\\"md\\\"] {\\n min-height: 18px;\\n min-width: 18px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 14px;\\n min-width: 14px;\\n }\\n }\\n\\n &[data-size=\\\"lg\\\"] {\\n min-height: 24px;\\n min-width: 24px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 20px;\\n min-width: 20px;\\n }\\n }\\n }\\n\\n .tcn-button[data-size].tcn-select {\\n padding-inline-end: 26px;\\n }\\n\\n /* Toggle */\\n .tcn-toggle {\\n --tgl-false: var(--ergo-accent-blue);\\n --tgl-true: var(--ergo-accent-blue);\\n --on-tgl-true: var(--ergo-white);\\n\\n --ink: var(--tcn-button-color, var(--tgl-false));\\n --act: var(--tcn-button-color, var(--tgl-false));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-grey-light);\\n }\\n &[data-is-selected=\\\"true\\\"] {\\n --mat: var(--tcn-button-color, var(--tgl-true));\\n --ink: var(--tcn-button-text-color, var(--ergo-white));\\n --act: var(--ergo-white);\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-white);\\n --mat: var(--ergo-grey-light);\\n }\\n }\\n }\\n\\n .tcn-fab {\\n border-radius: 50%;\\n }\\n\\n .tcn-mobile-button {\\n --btn-size-base: 44px;\\n --btn-pad-base: 16px;\\n --btn-size-delta: 8px;\\n --btn-pad-delta: 4px;\\n\\n font-size: calc(16px * var(--scalar, 1));\\n }\\n\\n .tcn-mobile-button[data-size=\\\"sm\\\"] {\\n --btn-size-base: 36px;\\n }\\n\\n .tcn-mobile-button[data-size=\\\"lg\\\"] {\\n --btn-size-base: 52px;\\n }\\n\\n .tcn-button-group .tcn-button-group-button.tcn-mobile-button {\\n --btn-size-base: 44px;\\n --btn-pad-base: 16px;\\n --btn-size-delta: 8px;\\n --btn-pad-delta: 4px;\\n\\n font-size: calc(16px * var(--scalar, 1));\\n }\\n\\n .tcn-button-group {\\n .tcn-button-group-button:hover,\\n .tcn-button-group-button:active {\\n transform: none;\\n }\\n\\n .tcn-button-group-button {\\n border-radius: 0;\\n }\\n .tcn-button-group-button:first-child {\\n border-start-start-radius: var(--ergo-shape-radius-medium);\\n border-end-start-radius: var(--ergo-shape-radius-medium);\\n }\\n .tcn-button-group-button:last-child {\\n border-start-end-radius: var(--ergo-shape-radius-medium);\\n border-end-end-radius: var(--ergo-shape-radius-medium);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"] {\\n border: 0;\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:last-child) {\\n border-right: 1px solid var(--on-mat-faint);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:first-child) {\\n border-left: 1px solid var(--on-mat-faint);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:last-child) {\\n border-right: 1px solid var(--act-down);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:first-child) {\\n border-left: 1px solid var(--act-down);\\n }\\n }\\n\\n .tcn-select-group {\\n .tcn-select-group-option:hover,\\n .tcn-select-group-option:active {\\n transform: none;\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"] {\\n color: var(--act);\\n border-color: var(--act);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:hover {\\n background: var(--act-faint);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:active {\\n background: var(--act-down);\\n color: var(--on-act);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n color: var(--ergo-material-disabled-outline);\\n border: 1px solid var(--ergo-material-disabled-outline);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n background: var(--ergo-material-disabled-outline);\\n color: white;\\n border: 1px solid var(--ergo-material-disabled-outline);\\n }\\n\\n .tcn-select-group-option {\\n border-radius: 0;\\n }\\n .tcn-select-group-option:first-child {\\n border-top-left-radius: var(--ergo-shape-radius-medium);\\n border-bottom-left-radius: var(--ergo-shape-radius-medium);\\n }\\n .tcn-select-group-option:last-child {\\n border-top-right-radius: var(--ergo-shape-radius-medium);\\n border-bottom-right-radius: var(--ergo-shape-radius-medium);\\n }\\n }\\n\\n /* ===== Tabs ===== */\\n .tcn-tabs-bar {\\n .tcn-tabs-list {\\n .tcn-tab-item {\\n min-height: 24px;\\n padding: 0px var(--padding-medium);\\n text-decoration: none;\\n text-overflow: ellipsis;\\n overflow: hidden;\\n white-space: nowrap;\\n }\\n }\\n }\\n\\n /* Default */\\n .tcn-tabs-bar[data-variant=\\\"default\\\"] {\\n .tcn-tabs-list {\\n .tcn-tab-item {\\n box-sizing: border-box;\\n border: none;\\n padding: 0px var(--padding-medium);\\n border-radius: 0;\\n }\\n .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n --mat: var(--tcn-button-color, var(--material));\\n --ink: var(--tcn-button-text-color, var(--ergo-primary));\\n --act: var(--ergo-primary);\\n }\\n\\n .tcn-tab-item:focus-visible {\\n z-index: 2;\\n }\\n /* Hover Indicator */\\n .tcn-tab-item[data-is-selected=\\\"false\\\"]:hover::after,\\n .tcn-tab-item[data-is-selected=\\\"false\\\"]:focus-visible::after {\\n content: \\\"\\\";\\n display: block;\\n position: absolute;\\n left: 0;\\n right: 0;\\n bottom: 0px;\\n height: 1px;\\n background: var(--ergo-accent-blue);\\n pointer-events: none;\\n width: 100%;\\n z-index: 3;\\n }\\n\\n /* Indicator */\\n &::after {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: -1px;\\n left: 0;\\n min-height: 2px;\\n transform: translateX(var(--tabs-active-rectangle-position-x, 0));\\n width: var(--tabs-active-rectangle-width, 0);\\n background: var(--ergo-primary);\\n pointer-events: none;\\n border-bottom-left-radius: 2px;\\n border-bottom-right-radius: 2px;\\n transition:\\n transform 300ms ease-in-out,\\n width 300ms ease-in-out;\\n will-change: transform, width;\\n z-index: 2;\\n }\\n }\\n\\n /* Rail */\\n &::before {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: 0px;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: var(--ergo-material-divider);\\n pointer-events: none;\\n z-index: 1;\\n }\\n }\\n\\n /* Inline */\\n .tcn-tabs-bar[data-variant=\\\"inline\\\"] {\\n font-size: 12px;\\n min-width: min-content;\\n width: auto;\\n flex-grow: 0;\\n border-radius: 6px;\\n border: 1px solid var(--on-material);\\n padding: 2px;\\n\\n .tcn-tabs-list {\\n height: 20px;\\n gap: var(--ergo-spacing-xs);\\n .tcn-tab-item {\\n border-radius: var(--ergo-shape-radius-medium);\\n min-height: 20px;\\n }\\n }\\n }\\n\\n /* ===== MATERIAL ===== */\\n\\n .material {\\n background-color: var(--material);\\n color: var(--on-material);\\n }\\n\\n /* Divider: use material-line; emphasis variants for strong/faint */\\n .tcn-divider-line,\\n .tcn-divider-line[data-emphasis=\\\"normal\\\"] {\\n background: var(--material-line);\\n }\\n .tcn-divider-line[data-emphasis=\\\"strong\\\"] {\\n background: color-mix(in srgb, var(--material-line) 80%, black 20%);\\n }\\n .tcn-divider-line[data-emphasis=\\\"faint\\\"] {\\n background: color-mix(in srgb, var(--material-line) 80%, white 20%);\\n }\\n\\n /* ===== SURFACES ===== */\\n .tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n .tcn-drag-handle {\\n cursor: move;\\n }\\n }\\n\\n .tcn-frame-dialog {\\n border: inherit;\\n }\\n\\n .tcn-tethered {\\n /* Managing offset of the indicator in relation for the tethered element\\n pad defaults to 0, but should be set depending on the surface */\\n\\n --tether-pad-x: 0px;\\n --tether-pad-y: 0px;\\n --indicator-pad-x: 0px;\\n --indicator-pad-y: 0px;\\n --tether-pad-size: 0px;\\n --tether-pad-pos: var(--tether-pad-size);\\n --tether-pad-neg: calc(-1 * var(--tether-pad-size));\\n left: calc(\\n var(--tether-pad-x, 0) -\\n var(--indicator-pad-x, 0) +\\n var(--tethered-left, 0)\\n );\\n top: calc(var(--tether-pad-y, 0) + var(--tethered-top, 0));\\n\\n :where(.tcn-tethered-origin-indicator) {\\n left: calc(var(--indicator-pad-x, 0) + var(--tethered-origin-delta-x, 0));\\n top: calc(var(--indicator-pad-y, 0) + var(--tethered-origin-delta-y, 0));\\n }\\n\\n &[data-h-anchor=\\\"start\\\"] {\\n --tether-pad-x: var(--tether-pad-pos);\\n }\\n\\n &[data-h-anchor=\\\"end\\\"] {\\n --tether-pad-x: var(--tether-pad-neg);\\n }\\n\\n &[data-h-origin=\\\"start\\\"] {\\n --indicator-pad-x: var(--tether-pad-pos);\\n }\\n\\n &[data-h-origin=\\\"end\\\"] {\\n --indicator-pad-x: var(--tether-pad-neg);\\n }\\n\\n &[data-v-origin=\\\"center\\\"] {\\n --indicator-pad-x: 0px;\\n --tether-pad-x: 0px;\\n &[data-v-anchor=\\\"top\\\"] {\\n --tether-pad-y: var(--tether-pad-pos);\\n }\\n\\n &[data-v-anchor=\\\"bottom\\\"] {\\n --tether-pad-y: var(--tether-pad-neg);\\n }\\n }\\n\\n &[data-anchor-direction=\\\"bottom\\\"] {\\n padding-bottom: var(--ergo-shape-triangle-medium);\\n }\\n\\n &[data-anchor-direction=\\\"top\\\"] {\\n padding-top: var(--ergo-shape-triangle-medium);\\n }\\n\\n &[data-anchor-direction=\\\"start\\\"] {\\n padding-left: var(--ergo-shape-triangle-medium);\\n }\\n\\n &[data-anchor-direction=\\\"end\\\"] {\\n padding-right: var(--ergo-shape-triangle-medium);\\n }\\n }\\n\\n .tcn-tooltip {\\n --tether-pad-size: 16px;\\n background: transparent;\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n .tcn-tooltip-label {\\n box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n color: var(--on-material);\\n background: var(--material);\\n border-radius: var(--ergo-shape-radius-medium);\\n padding: var(--padding-medium);\\n }\\n }\\n\\n .tcn-list {\\n gap: var(--gap-medium);\\n .tcn-item {\\n height: 24px;\\n padding: 0px var(--padding-medium);\\n border-radius: var(--ergo-shape-radius-medium);\\n }\\n }\\n /* Rail: */\\n .tcn-utility-strip {\\n min-width: var(--ergo-sizing-bar-md);\\n }\\n\\n .tcn-utility-strip {\\n padding-block: var(--padding-medium);\\n gap: var(--gap-medium);\\n }\\n\\n /* Scaffold: */\\n .tcn-footer,\\n .tcn-header,\\n .tcn-utility-bar {\\n padding-inline: var(--pad-inline, var(--padding-medium));\\n gap: var(--gap-medium);\\n }\\n\\n .tcn-utility-bar {\\n min-height: var(--ergo-sizing-bar-md);\\n }\\n\\n .tcn-footer,\\n .tcn-header {\\n min-height: var(--ergo-sizing-bar-lg);\\n }\\n\\n .tcn-scaffold {\\n --scaffold-divide-footer: var(--divide-footer, 1);\\n --scaffold-divide-header: var(--divide-header, 1);\\n --pad-inline: var(--padding-large);\\n\\n /* Border appears on nested scaffold/rail when it follows header or utility-bar */\\n :where(.tcn-header) + :where(.tcn-scaffold),\\n :where(.tcn-header) + :where(.tcn-rail),\\n :where(.tcn-utility-bar) + :where(.tcn-scaffold),\\n :where(.tcn-utility-bar) + :where(.tcn-rail) {\\n border-top: calc(var(--scaffold-divide-header) * 1px) solid\\n var(--ergo-material-border);\\n }\\n\\n /* Border appears on footer when it follows scaffold/rail */\\n :where(.tcn-scaffold) + :where(.tcn-footer),\\n :where(.tcn-rail) + :where(.tcn-footer) {\\n border-top: calc(var(--scaffold-divide-footer) * 1px) solid\\n var(--ergo-material-border);\\n }\\n }\\n\\n .tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n background-color: rgba(0, 0, 0, 0.5);\\n }\\n\\n /* PAGE: */\\n .tcn-page {\\n --divide-header: 0;\\n --divide-footer: 0;\\n --material: var(--background-color-tertiary);\\n background-color: var(--material);\\n }\\n\\n /* MODAL: */\\n .tcn-modal {\\n --divide-header: 0;\\n box-shadow: 0px 4px 34px 0px #00000096;\\n border-radius: var(--ergo-shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 1px solid var(--ergo-material-border);\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-material-overlay);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n /* DRAWER: */\\n .tcn-drawer {\\n --divide-header: 0;\\n box-shadow: 0px 4px 34px 0px #00000096;\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-material-overlay);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n /* WINDOW: */\\n .tcn-window {\\n box-shadow: 0px 4px 34px 0px #00000096;\\n --divide-header: 0;\\n border-radius: var(--ergo-shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 2px solid white;\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-material-overlay);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n .tcn-pop-confirm {\\n --divide-header: 0;\\n --tether-pad-size: 16px;\\n --pad-inline: var(--padding-medium);\\n\\n .tcn-pop-confirm-scaffold > .tcn-scaffold-stack {\\n border-radius: var(--ergo-shape-radius-medium);\\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n background-color: var(--background-color-primary);\\n }\\n\\n :where(.tcn-tethered-origin-indicator) {\\n --material: var(--ergo-white);\\n }\\n\\n /* Set the indicator to match the header color */\\n &[data-v-origin=\\\"top\\\"] {\\n :where(.tcn-tethered-origin-indicator) {\\n --material: var(--ergo-material-overlay);\\n }\\n }\\n\\n :where(.tcn-header) {\\n min-height: var(--ergo-sizing-bar-md);\\n\\n --material: var(--ergo-material-overlay);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n .tcn-confirm {\\n --material: var(--background-color-primary);\\n background-color: var(--material);\\n }\\n\\n .tcn-bar {\\n gap: var(--gap-medium);\\n\\n /* Add a divider between groups unless there is a spacer after a group */\\n :where(.tcn-group:not(:last-child):not(:has(+ .tcn-spacer)))::after {\\n content: \\\"\\\";\\n display: block;\\n min-width: 2px;\\n height: 18px;\\n background: var(--ergo-grey);\\n border-radius: var(--ergo-shape-radius-small);\\n align-self: center;\\n }\\n }\\n\\n /* PANEL */\\n .tcn-panel {\\n --divide-header: 1;\\n --divide-footer: 1;\\n --material: var(--background-color-primary);\\n background-color: var(--material);\\n border-radius: var(--ergo-shape-radius-medium);\\n overflow: hidden;\\n\\n :where(.tcn-title) {\\n font-size: 18px;\\n }\\n }\\n\\n /* Aside */\\n .tcn-aside {\\n --divide-header: 1;\\n --divide-footer: 1;\\n\\n --material: var(--background-color-secondary);\\n background-color: var(--material);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n min-height: var(--ergo-sizing-bar-md);\\n }\\n\\n :where(.tcn-footer) {\\n min-height: var(--ergo-sizing-bar-md);\\n }\\n\\n :where(.tcn-title) {\\n font-size: 16px;\\n }\\n }\\n\\n /* Card */\\n .tcn-card {\\n --divide-header: 0;\\n --divide-footer: 1;\\n --pad-inline: var(--padding-medium);\\n\\n background-color: var(--background-color-primary);\\n border-radius: var(--ergo-shape-radius-medium);\\n border: 1px solid var(--ergo-material-border);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n min-height: var(--ergo-sizing-bar-md);\\n\\n --material: var(--ergo-secondary-light);\\n --on-material: var(--ergo-accent-blue);\\n --action: var(--ergo-secondary);\\n --on-action: var(--ergo-white);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n\\n :where(.tcn-utility-bar) {\\n min-height: var(--ergo-sizing-bar-sm);\\n }\\n\\n :where(.tcn-scaffold-stack) > :where(.tcn-scaffold) > :where(.tcn-scaffold-stack),\\n :where(.tcn-scaffold-stack) > :where(.tcn-rail) > :where(.tcn-rail-stack),\\n :where(.tcn-rail-stack) > :where(.tcn-scaffold) > :where(.tcn-scaffold-stack),\\n :where(.tcn-rail-stack) > :where(.tcn-rail) > :where(.tcn-rail-stack) {\\n padding-inline: var(--padding-medium);\\n }\\n }\\n\\n /* Columns: */\\n .tcn-panel {\\n :where(.tcn-columns) {\\n padding: var(--padding-large);\\n\\n :where(.tcn-column) {\\n border-right: 1px solid var(--ergo-material-border);\\n padding-inline-end: var(--padding-medium);\\n }\\n\\n :where(.tcn-column):not(:first-child) {\\n padding-inline-start: var(--padding-medium);\\n }\\n }\\n }\\n\\n .tcn-page {\\n :where(.tcn-columns) {\\n padding: var(--padding-medium);\\n\\n :where(.tcn-column):not(:last-child) {\\n padding-inline-end: var(--padding-medium);\\n }\\n }\\n }\\n\\n /* SECTION */\\n .tcn-section {\\n --max-section-depth: 4;\\n --section-tab-width: 4px;\\n --section-tab-start: var(--pad-inline, var(--padding-medium));\\n --section-tab-depth: 0;\\n --section-tab: calc(\\n var(--section-tab-start) +\\n (var(--section-tab-width) * var(--section-tab-depth))\\n );\\n --section-heading-height: var(--ergo-sizing-bar-md);\\n --section-action: var(--ergo-secondary);\\n --section-mat: var(--ergo-secondary-light);\\n --section-on-mat: var(--ergo-text-color-primary);\\n }\\n\\n .tcn-heading {\\n position: sticky;\\n background-color: var(--material);\\n padding-inline-start: var(--pad-inline, var(--padding-medium));\\n padding-inline-end: var(--pad-inline, var(--padding-medium));\\n height: var(--section-heading-height);\\n z-index: 5;\\n user-select: none;\\n }\\n\\n .tcn-section > .tcn-heading {\\n top: calc(var(--section-heading-height) * var(--section-tab-depth));\\n z-index: calc(var(--max-section-depth) - var(--section-tab-depth));\\n padding-inline-start: var(--section-tab);\\n --material: var(--section-mat);\\n --on-material: var(--section-on-mat);\\n --action: var(--section-action);\\n background-color: var(--material);\\n color: var(--on-material);\\n gap: var(--gap-small);\\n }\\n\\n .tcn-detail {\\n padding-block: var(--padding-medium);\\n gap: var(--padding-medium);\\n }\\n\\n .tcn-section > .tcn-detail {\\n padding-inline-start: var(--section-tab);\\n padding-inline-end: var(--pad-inline, var(--padding-medium));\\n }\\n\\n .tcn-scaffold-stack > .tcn-detail {\\n padding-inline: var(--pad-inline, var(--padding-medium));\\n }\\n\\n .tcn-section > .tcn-section {\\n --section-tab-depth: 1;\\n --section-mat: var(--ergo-accent-blue-light);\\n --section-action: var(--ergo-accent-blue);\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section {\\n --section-tab-depth: 2;\\n --section-mat: var(--ergo-accent-green-light);\\n --section-action: var(--ergo-accent-green-dark);\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > .tcn-section {\\n --section-tab-depth: 3;\\n --section-mat: var(--ergo-tertiary-light);\\n --section-action: var(--ergo-tertiary-dark);\\n }\\n\\n .tcn-caret {\\n --caret-size: var(--ergo-shape-triangle-medium);\\n --caret-triangle-height: calc(var(--caret-size) / 2);\\n --caret-triangle-width: var(--caret-size);\\n --caret-triangle-base: var(--caret-triangle-height) solid transparent;\\n --caret-triangle-peak: var(--caret-triangle-width) solid var(--material);\\n\\n width: var(--caret-size);\\n height: var(--caret-size);\\n min-width: var(--caret-size);\\n min-height: var(--caret-size);\\n flex-grow: 0;\\n display: inline-block;\\n\\n &[data-direction=\\\"top\\\"] {\\n border-bottom: var(--caret-triangle-peak);\\n border-left: var(--caret-triangle-base);\\n border-right: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"bottom\\\"] {\\n border-top: var(--caret-triangle-peak);\\n border-left: var(--caret-triangle-base);\\n border-right: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"start\\\"] {\\n border-right: var(--caret-triangle-peak);\\n border-top: var(--caret-triangle-base);\\n border-bottom: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"end\\\"] {\\n border-left: var(--caret-triangle-peak);\\n border-top: var(--caret-triangle-base);\\n border-bottom: var(--caret-triangle-base);\\n }\\n }\\n\\n /* ===== TABLE ===== */\\n .tcn-table {\\n --table-pad-inline: var(--pad-inline, var(--padding-medium));\\n\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-text-color-primary);\\n --action: var(--ergo-accent-blue);\\n --on-action: var(--ergo-white);\\n background-color: var(--material);\\n color: var(--on-material);\\n border-collapse: separate;\\n display: block;\\n }\\n\\n /* TODO: cleanup - this needs merged with ui-table sticky logic/styles */\\n .tcn-table[data-is-sticky=\\\"true\\\"] {\\n .tcn-tbody {\\n th:first-of-type {\\n border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n }\\n\\n th:last-of-type {\\n border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n }\\n }\\n .tcn-thead {\\n th:first-of-type {\\n border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n }\\n\\n th:last-of-type {\\n border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n }\\n }\\n }\\n\\n .tcn-td {\\n text-align: start;\\n overflow: hidden;\\n white-space: nowrap;\\n text-overflow: ellipsis;\\n }\\n\\n .tcn-thead {\\n /* Border for header row */\\n .tcn-tr {\\n height: var(--ergo-sizing-bar-md);\\n .tcn-th {\\n border-bottom: 1px solid var(--ergo-grey-light);\\n }\\n .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)) {\\n border-right: 1px solid var(--ergo-grey);\\n }\\n .tcn-th:last-of-type {\\n border-left: 1px solid var(--ergo-grey);\\n }\\n }\\n }\\n\\n .tcn-tfoot {\\n font-weight: bold;\\n /* Border for footer row */\\n .tcn-tr {\\n height: var(--ergo-sizing-bar-sm);\\n .tcn-th,\\n .tcn-td {\\n border-top: 1px solid var(--ergo-grey-light);\\n }\\n }\\n }\\n\\n /* Header and footer - both are light blue */\\n .tcn-thead,\\n .tcn-tfoot {\\n font-size: 14px;\\n --material: var(--ergo-secondary-light);\\n --on-material: var(--ergo-accent-blue);\\n --action: var(--ergo-accent-blue);\\n --on-action: var(--ergo-white);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n\\n .tcn-tr .tcn-th:first-child {\\n padding-inline: var(--table-pad-inline);\\n }\\n }\\n\\n .tcn-tr {\\n height: var(--ergo-sizing-bar-sm);\\n align-content: center;\\n }\\n\\n .tcn-td,\\n .tcn-th {\\n padding-inline: var(--padding-medium);\\n vertical-align: middle;\\n text-align: start;\\n background: var(--material);\\n }\\n\\n /* First column (header, body, footer): use context for pad inline or default 8px */\\n .tcn-table .tcn-tr > .tcn-th:first-child,\\n .tcn-table .tcn-tr > .tcn-td:first-child {\\n padding-inline-start: var(--table-pad-inline);\\n }\\n\\n /* Last column (header, body, footer): use context for pad inline or default 8px */\\n .tcn-table .tcn-tr > .tcn-th:last-child,\\n .tcn-table .tcn-tr > .tcn-td:last-child {\\n padding-inline-end: var(--table-pad-inline);\\n }\\n\\n .tcn-tbody {\\n font-size: 12px;\\n .tcn-tr:nth-of-type(even) {\\n --material: var(--ergo-accent-blue-light);\\n }\\n .tcn-tr:nth-of-type(odd) {\\n --material: var(--ergo-white);\\n }\\n .tcn-tr:hover {\\n --material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%);\\n }\\n .tcn-tr[data-is-selected=\\\"true\\\"] {\\n --material: var(--ergo-secondary);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-accent-blue);\\n }\\n\\n .tcn-tr {\\n --material: var(--bg-row);\\n --on-material: var(--ergo-accent-blue);\\n --action: var(--ergo-accent-blue);\\n --on-action: var(--ergo-white);\\n background-color: var(--material);\\n color: var(--on-material);\\n }\\n }\\n\\n /* ===== INPUTS ===== */\\n .tcn-entry,\\n .tcn-control {\\n --act: var(--action);\\n --mat: var(--material);\\n --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n\\n font-size: var(--ergo-text-size-input);\\n border: 1px solid var(--ergo-grey);\\n box-sizing: border-box;\\n min-height: var(--ergo-sizing-action-md);\\n border-radius: var(--ergo-shape-radius-medium);\\n padding-inline: 4px;\\n }\\n\\n .tcn-radio-label,\\n .tcn-select-selected-label {\\n font-size: var(--ergo-text-size-input);\\n }\\n\\n .tcn-control[data-is-disabled=\\\"false\\\"]:hover {\\n background: var(--act-raised);\\n }\\n\\n .tcn-control:focus-within {\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n .tcn-control:focus {\\n border: 1px solid var(--act);\\n }\\n\\n .tcn-control::placeholder {\\n color: var(--ergo-grey);\\n }\\n\\n .tcn-control[data-is-disabled=\\\"true\\\"] {\\n cursor: not-allowed;\\n background: var(--ergo-material-disabled-outline);\\n color: var(--ergo-text-color-disabled-outline);\\n }\\n\\n .tcn-control[data-is-disabled=\\\"true\\\"]::placeholder {\\n color: var(--ergo-text-color-disabled-outline);\\n }\\n\\n .tcn-control {\\n display: flex;\\n justify-content: center;\\n gap: var(--gap-small);\\n }\\n\\n .tcn-control-row {\\n min-height: 22px;\\n height: auto;\\n align-items: center;\\n gap: var(--gap-small);\\n padding-block: 2px;\\n }\\n\\n .tcn-control-row > .tcn-icon {\\n color: var(--ergo-grey);\\n }\\n\\n .tcn-control .tcn-entry {\\n border: none;\\n background: transparent;\\n padding: 0;\\n min-height: unset;\\n border-radius: 0;\\n height: 100%;\\n flex-grow: 1;\\n\\n &:hover,\\n &:active,\\n &:focus-visible,\\n &:focus {\\n outline: none;\\n border: none;\\n background: transparent;\\n }\\n }\\n\\n .tcn-input {\\n height: auto;\\n }\\n\\n .tcn-textarea,\\n .tcn-input {\\n cursor: text;\\n }\\n\\n .tcn-control-set {\\n border-radius: var(--ergo-shape-radius-medium);\\n\\n &:focus-within {\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n .tcn-control-set-item {\\n z-index: 1;\\n border-radius: 0;\\n height: auto;\\n min-height: var(--ergo-sizing-action-md);\\n padding-block: 0;\\n &:focus,\\n &:focus-visible {\\n z-index: 3;\\n outline: none;\\n }\\n }\\n\\n .tcn-control-set-item:first-child {\\n border-top-left-radius: var(--ergo-shape-radius-medium);\\n border-bottom-left-radius: var(--ergo-shape-radius-medium);\\n }\\n\\n .tcn-control-set-item:not(:last-child) {\\n margin-right: -1px;\\n }\\n\\n .tcn-control-set-item:last-child {\\n border-top-right-radius: var(--ergo-shape-radius-medium);\\n border-bottom-right-radius: var(--ergo-shape-radius-medium);\\n }\\n\\n .tcn-select,\\n .tcn-button,\\n .tcn-button[data-hierarchy] {\\n border: 1px solid var(--ergo-grey);\\n height: auto;\\n min-height: var(--ergo-sizing-action-md);\\n min-width: var(--ergo-sizing-action-md);\\n box-sizing: border-box;\\n &:hover,\\n &[data-hover] {\\n transform: none;\\n }\\n }\\n\\n .tcn-button.tcn-select,\\n .tcn-button[data-hierarchy].tcn-select {\\n border-color: var(--ergo-grey);\\n }\\n\\n .tcn-select:focus-visible,\\n .tcn-button:focus-visible,\\n .tcn-button[data-hierarchy]:focus-visible {\\n border-color: var(--ergo-primary);\\n }\\n }\\n\\n .tcn-slider[data-is-disabled=\\\"true\\\"] {\\n &::-webkit-slider-runnable-track {\\n background: var(--ergo-grey-light);\\n }\\n\\n &::-webkit-slider-thumb {\\n background-color: var(--ergo-white);\\n border: 1px solid var(--ergo-grey-light);\\n }\\n }\\n\\n .tcn-checkbox {\\n --checkbox-color: var(--action, var(--ergo-primary));\\n\\n border-color: var(--checkbox-color);\\n\\n &:focus-visible,\\n &:focus {\\n outline: 2px solid var(--checkbox-color);\\n outline-offset: 2px;\\n }\\n\\n &[data-is-disabled=\\\"true\\\"] {\\n cursor: not-allowed;\\n border-color: var(--ergo-material-disabled-outline);\\n }\\n\\n &[data-checked=\\\"true\\\"] {\\n background-color: var(--checkbox-color);\\n }\\n\\n &[data-checked=\\\"true\\\"][data-is-disabled=\\\"true\\\"] {\\n background-color: var(--ergo-grey-light);\\n }\\n\\n &[data-checked=\\\"false\\\"][data-is-disabled=\\\"true\\\"] {\\n background: var(--material);\\n border-color: var(--ergo-grey-light);\\n color: var(--ergo-grey-light);\\n }\\n\\n &[data-is-disabled=\\\"false\\\"]:active {\\n background-color: var(--checkbox-color);\\n }\\n }\\n\\n .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"false\\\"],\\n .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"true\\\"] {\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n /* Quick fix to use some of the default module styles.*/\\n .tcn-input,\\n .tcn-select,\\n .tcn-slider,\\n .tcn-textarea,\\n .tcn-checkbox,\\n .tcn-switch-wrapper,\\n .tcn-date-picker,\\n .tcn-date-picker-year-selector,\\n .tcn-radio,\\n .tcn-date-picker-input,\\n .tcn-mobile-date-picker,\\n .tcn-mobile-date-picker-year-selector,\\n .tcn-suggestion-list-search-input,\\n .tcn-suggestion-list {\\n --accent-color: var(--ergo-primary);\\n }\\n\\n /* Datum/Tokens */\\n .tcn-chip {\\n --action: var(--ergo-primary);\\n --accent-color: var(--ergo-primary);\\n }\\n\\n .tcn-datum[data-emphasis=\\\"normal\\\"] {\\n --datum-font-color: var(--on-material);\\n }\\n\\n .tcn-datum[data-emphasis=\\\"strong\\\"] {\\n --datum-font-weight: 700;\\n }\\n\\n .tcn-datum[data-emphasis=\\\"faint\\\"] {\\n --datum-font-color: color-mix(in srgb, var(--on-material), transparent 12%);\\n }\\n\\n .tcn-datum[data-severity=\\\"dangerous\\\"] {\\n --datum-font-color: var(--ergo-status-red);\\n }\\n\\n .tcn-datum[data-severity=\\\"cautious\\\"] {\\n --datum-font-color: var(--ergo-status-yellow);\\n }\\n\\n .tcn-datum[data-severity=\\\"suggested\\\"] {\\n --datum-font-color: var(--ergo-status-blue);\\n }\\n\\n .tcn-datum[data-severity=\\\"encouraged\\\"] {\\n --datum-font-color: var(--ergo-status-green);\\n }\\n\\n .tcn-key {\\n --accent-color: var(--action);\\n font-size: 14px;\\n color: var(--datum-font-color);\\n font-weight: var(--datum-font-weight, 400);\\n }\\n\\n .tcn-value {\\n font-size: 12px;\\n\\n color: var(--datum-font-color);\\n font-weight: var(--datum-font-weight, 400);\\n }\\n\\n .tcn-term > .tcn-key,\\n .tcn-term > .tcn-value {\\n max-width: 50%;\\n }\\n\\n .tcn-value {\\n :where(.tcn-chip) {\\n --action: var(--ergo-accent-blue);\\n --accent-color: var(--ergo-accent-blue);\\n }\\n }\\n}\\n\"","import { buildStyleSheet } from '../../build_stylesheet';\nimport tokensCss from './tokens/theme_tokens.css?raw';\nimport systemTokensCss from './tokens/system_tokens.css?raw';\nimport css from './ergo_theme.css?raw';\nimport '@fontsource/lato';\n\nexport const ergoStyleSheet = buildStyleSheet([tokensCss, systemTokensCss, css]);\n"],"names":["tokensCss","systemTokensCss","css","ergoStyleSheet","buildStyleSheet"],"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,GCAfC,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,GCAfC,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCMFC,IAAiBC,EAAgB,CAACJ,GAAWC,GAAiBC,CAAG,CAAC;"}
1
+ {"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/tokens/theme_tokens.css?raw","../../../../src/themes/themes/ergo/tokens/system_tokens.css?raw","../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"@layer tcn-theme {\\n :root {\\n /* ========== Ergo Palette ========== */\\n --ergo-white: #ffffff;\\n\\n --ergo-primary: #ce6b2b;\\n --ergo-primary-light: #fff7f0;\\n --ergo-primary-dark: #b86128;\\n\\n --ergo-secondary: #669eb4;\\n --ergo-secondary-light: #ecf4fb;\\n --ergo-secondary-dark: #497485;\\n\\n --ergo-tertiary: #dfd7cd;\\n --ergo-tertiary-light: #f9f4ed;\\n --ergo-tertiary-dark: #7e6c5d;\\n\\n --ergo-accent-blue: #395578;\\n --ergo-accent-blue-light: #f3f4f6;\\n --ergo-accent-blue-dark: #627083;\\n\\n --ergo-accent-green: #97bba3;\\n --ergo-accent-green-light: #eef8ef;\\n --ergo-accent-green-dark: #4f785c;\\n\\n --ergo-accent-yellow: #dbc97e;\\n --ergo-accent-yellow-light: #fef9e7;\\n --ergo-accent-yellow-dark: #82722b;\\n\\n --ergo-grey: #aaaaaa;\\n --ergo-grey-light: #d3d3d3;\\n --ergo-grey-dark: #808080;\\n\\n --ergo-status-red: #ff6565;\\n --ergo-status-red-dark: #c24848;\\n --ergo-status-red-light: #fff4f4;\\n\\n --ergo-status-yellow: #ffd439;\\n --ergo-status-yellow-dark: #dbb735;\\n --ergo-status-yellow-light: #ffeca9;\\n\\n --ergo-status-blue: var(--ergo-secondary);\\n --ergo-status-blue-dark: var(--ergo-secondary-dark);\\n --ergo-status-blue-light: var(--ergo-secondary-light);\\n\\n --ergo-status-green: #3fbc6a;\\n --ergo-status-green-dark: #2d904f;\\n --ergo-status-green-light: #87e8a8;\\n\\n --ergo-material-bg-primary: #ffffff;\\n --ergo-material-bg-secondary: #fafafa;\\n --ergo-material-bg-tertiary: #f1f1f1;\\n --ergo-material-bg-quaternary: #ffffff;\\n\\n --ergo-material-overlay: var(--ergo-secondary-dark);\\n --ergo-material-border: var(--ergo-grey);\\n --ergo-material-divider: var(--ergo-grey);\\n --ergo-material-disabled-outline: var(--ergo-grey-light);\\n --ergo-material-disabled-fill: var(--ergo-grey);\\n\\n /* ========== Ergo Text ========== */\\n --ergo-text-size-input: 12px;\\n --ergo-text-size-default: 12px;\\n --ergo-text-color-primary: var(--ergo-accent-blue);\\n --ergo-text-color-inverse: var(--ergo-white);\\n --ergo-text-color-disabled-outline: var(--ergo-grey);\\n --ergo-text-color-disabled-fill: var(--ergo-white);\\n\\n /* ========== Spacing ========== */\\n --ergo-spacing-xs: 2px;\\n --ergo-spacing-sm: 4px;\\n --ergo-spacing-md: 8px;\\n --ergo-spacing-lg: 16px;\\n --ergo-spacing-xl: 32px;\\n\\n /* ========== Sizing ========== */\\n --ergo-sizing-bar-xs: 16px;\\n --ergo-sizing-bar-sm: 24px;\\n --ergo-sizing-bar-md: 32px;\\n --ergo-sizing-bar-lg: 40px;\\n --ergo-sizing-bar-xl: 48px;\\n\\n --ergo-sizing-action-sm: 20px;\\n --ergo-sizing-action-md: 24px;\\n --ergo-sizing-action-lg: 32px;\\n\\n /* ========== Shape ========== */\\n --ergo-shape-radius-small: 2px;\\n --ergo-shape-radius-medium: 4px;\\n --ergo-shape-radius-large: 8px;\\n --ergo-shape-triangle-medium: 12px;\\n\\n /* Default Material - TODO: move to system once blackcat support material */\\n --action: var(--ergo-primary);\\n --on-action: var(--ergo-white);\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-accent-blue);\\n }\\n}\\n\"","export default \"@layer tcn-theme {\\n :root {\\n /* ========== Blackcat System Tokens ========== */\\n --scalar: 1;\\n --accent-color: var(--ergo-primary);\\n\\n /* Typography */\\n --font-color: var(--ergo-text-color-primary);\\n --font-family: \\\"Lato\\\", sans-serif;\\n --font-size: var(--ergo-text-size-default);\\n\\n /* Spacing */\\n --gap-small: var(--ergo-spacing-sm);\\n --gap-medium: var(--ergo-spacing-md);\\n --gap-large: var(--ergo-spacing-lg);\\n\\n --padding-small: var(--ergo-spacing-sm);\\n --padding-medium: var(--ergo-spacing-md);\\n --padding-large: var(--ergo-spacing-lg);\\n\\n /* Status Colors */\\n --status-color-disabled: var(--ergo-grey-light);\\n --status-color-info: var(--ergo-status-blue);\\n --status-color-warning: var(--ergo-status-yellow);\\n --status-color-positive: var(--ergo-status-green);\\n --status-color-error: var(--ergo-status-red);\\n\\n --async-color-initial: var(--ergo-grey);\\n --async-color-pending: var(--ergo-status-blue);\\n --async-color-success: var(--ergo-status-green);\\n --async-color-failed: var(--ergo-status-red);\\n\\n /* Action Severity */\\n --action-severity-dangerous: var(--ergo-status-red);\\n --action-severity-cautious: var(--ergo-status-yellow);\\n --action-severity-neutral: var(--ergo-primary);\\n --action-severity-suggested: var(--ergo-status-blue);\\n --action-severity-encouraged: var(--ergo-status-green);\\n\\n /* Palette */\\n --primary-color-faint: var(--ergo-grey-light);\\n --primary-color: var(--ergo-primary);\\n --primary-color-strong: var(--ergo-primary-dark);\\n\\n --secondary-color-faint: var(--ergo-secondary-light);\\n --secondary-color: var(--ergo-secondary);\\n --secondary-color-strong: var(--ergo-secondary-dark);\\n\\n --tertiary-color-faint: var(--ergo-tertiary-light);\\n --tertiary-color: var(--ergo-tertiary);\\n --tertiary-color-strong: var(--ergo-tertiary-dark);\\n\\n --quaternary-color-faint: var(--ergo-accent-blue-light);\\n --quaternary-color: var(--ergo-accent-blue);\\n --quaternary-color-strong: var(--ergo-accent-blue-dark);\\n\\n --background-color-primary: var(--ergo-material-bg-primary);\\n --background-color-secondary: var(--ergo-material-bg-secondary);\\n --background-color-tertiary: var(--ergo-material-bg-tertiary);\\n --background-color-quaternary: var(--ergo-material-bg-quaternary);\\n\\n /* Not sure what other text colors are needed */\\n --foreground-color-primary: var(--ergo-text-color-primary);\\n --foreground-color-secondary: var(--ergo-text-color-primary);\\n --foreground-color-tertiary: var(--ergo-text-color-primary);\\n --foreground-color-quaternary: var(--ergo-text-color-primary);\\n }\\n}\\n\"","export default \"@layer tcn-theme {\\n /* ===== CSS VARIABLES ===== */\\n\\n .tcn-theme-root {\\n font-family: var(--font-family);\\n color: var(--font-color);\\n /* TODO: move to system */\\n --action: var(--ergo-primary);\\n --on-action: var(--ergo-white);\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-accent-blue);\\n }\\n\\n /* ===== Actions ===== */\\n\\n .tcn-interactive {\\n cursor: pointer;\\n user-select: none;\\n transition:\\n transform 0.1s,\\n background 0.1s,\\n color 0.1s;\\n\\n --ink: var(--on-material);\\n --act: var(--action);\\n --mat: var(--material);\\n\\n --act-down: color-mix(in srgb, var(--mat), black 12%);\\n --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n --act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);\\n --act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);\\n\\n background: var(--mat);\\n color: var(--ink);\\n transition:\\n background 0.1s,\\n color 0.1s;\\n\\n &:focus-visible,\\n &[data-focus-visible] {\\n background: var(--act-focus);\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n &:hover,\\n &[data-hover] {\\n background: var(--act-raised);\\n }\\n\\n &:active,\\n &[data-active] {\\n background: var(--act-down);\\n }\\n\\n &[data-is-disabled=\\\"true\\\"] {\\n pointer-events: none;\\n }\\n }\\n\\n /* ===== Base Button ===== \\n * Shared between Button and Toggle.\\n * Primarily manages button dimensions and sizing ratios.\\n */\\n .tcn-base-button {\\n --btn-size-base: 26px;\\n --btn-pad-base: 12px;\\n\\n --btn-pad-delta: 4px;\\n --btn-size-delta: 4px;\\n --btn-font-size-delta: 2px;\\n --btn-step: 1;\\n\\n /* Increase size and pad by 4px for each size \\\"step\\\" from medium */\\n --btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));\\n --btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));\\n\\n border-radius: var(--ergo-shape-radius-medium);\\n min-height: var(--btn-size);\\n padding: var(--padding-small) var(--btn-pad);\\n\\n &[data-size=\\\"sm\\\"] {\\n --btn-step: -1;\\n }\\n &[data-size=\\\"md\\\"] {\\n --btn-step: 0;\\n }\\n &[data-size=\\\"lg\\\"] {\\n --btn-step: 1;\\n }\\n\\n &[data-is-utility=\\\"true\\\"] {\\n height: auto;\\n width: auto;\\n min-width: var(--btn-size);\\n padding: 0;\\n\\n /* Icon is 75% of the button size but minimum of 2px to account for border and 1px offset */\\n --util-ratio: 0.75;\\n --btn-size-base: 18px;\\n\\n font-size: calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step));\\n .tcn-icon {\\n min-height: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n }\\n }\\n }\\n\\n /* ===== Button ===== \\n * Manages Hierarchy and Severity.\\n */\\n .tcn-button {\\n --btn-primary: var(--action);\\n --btn-on-primary: var(--on-action);\\n --btn-variant: var(--on-material);\\n\\n &[data-severity=\\\"dangerous\\\"] {\\n --btn-primary: var(--action-severity-dangerous);\\n --btn-variant: var(--ergo-status-red-dark);\\n }\\n &[data-severity=\\\"cautious\\\"] {\\n --btn-primary: var(--action-severity-cautious);\\n --btn-on-primary: var(--ergo-accent-blue);\\n --btn-variant: var(--ergo-status-yellow-dark);\\n }\\n &[data-severity=\\\"suggested\\\"] {\\n --btn-primary: var(--action-severity-suggested);\\n --btn-variant: var(--ergo-status-blue-dark);\\n }\\n &[data-severity=\\\"encouraged\\\"] {\\n --btn-primary: var(--action-severity-encouraged);\\n --btn-variant: var(--ergo-status-green-dark);\\n }\\n\\n &[data-hierarchy=\\\"primary\\\"] {\\n --act: var(--ergo-white);\\n --ink: var(--tcn-button-text-color, var(--btn-on-primary));\\n --mat: var(--tcn-button-color, var(--btn-primary));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-white);\\n --mat: var(--ergo-grey-light);\\n }\\n }\\n\\n &[data-hierarchy=\\\"secondary\\\"],\\n &[data-hierarchy=\\\"tertiary\\\"] {\\n --act: var(--tcn-button-color, var(--btn-variant));\\n --ink: var(--tcn-button-color, var(--btn-variant));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-grey-light);\\n }\\n }\\n\\n /* Decorations */\\n &[data-hierarchy=\\\"tertiary\\\"]:hover {\\n text-decoration: underline;\\n text-decoration-color: var(--ink);\\n text-decoration-thickness: 1px;\\n text-underline-offset: 4px;\\n }\\n\\n &[data-hierarchy=\\\"tertiary\\\"] {\\n border: 1px solid transparent;\\n }\\n\\n &[data-hierarchy=\\\"secondary\\\"] {\\n border: 1px solid var(--ink);\\n }\\n\\n &[data-hierarchy=\\\"primary\\\"] {\\n border: 1px solid var(--mat);\\n }\\n\\n transition:\\n box-shadow 0.1s,\\n transform 0.1s;\\n\\n &:hover,\\n &[data-hover] {\\n transform: translateY(-1px);\\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);\\n\\n /* Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles */\\n :not(.tcn-select) {\\n &::before,\\n &::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n right: 0;\\n height: 4px;\\n }\\n\\n &::before {\\n top: -2px;\\n }\\n\\n &::after {\\n bottom: -2px;\\n }\\n }\\n }\\n\\n &:active,\\n &[data-active] {\\n transform: translateY(1px);\\n box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.12);\\n }\\n }\\n\\n /* @deprecated - use Button with utility prop instead */\\n .tcn-slim-button {\\n height: auto;\\n width: auto;\\n padding: 0;\\n\\n &[data-size=\\\"sm\\\"] {\\n min-height: 12px;\\n min-width: 12px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 10px;\\n min-width: 10px;\\n }\\n }\\n &[data-size=\\\"md\\\"] {\\n min-height: 18px;\\n min-width: 18px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 14px;\\n min-width: 14px;\\n }\\n }\\n\\n &[data-size=\\\"lg\\\"] {\\n min-height: 24px;\\n min-width: 24px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 20px;\\n min-width: 20px;\\n }\\n }\\n }\\n\\n .tcn-button[data-size].tcn-select {\\n padding-inline-end: 26px;\\n }\\n\\n /* Toggle */\\n .tcn-toggle {\\n --tgl-false: var(--ergo-accent-blue);\\n --tgl-true: var(--ergo-accent-blue);\\n --on-tgl-true: var(--ergo-white);\\n\\n --ink: var(--tcn-button-color, var(--tgl-false));\\n --act: var(--tcn-button-color, var(--tgl-false));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-grey-light);\\n }\\n &[data-is-selected=\\\"true\\\"] {\\n --mat: var(--tcn-button-color, var(--tgl-true));\\n --ink: var(--tcn-button-text-color, var(--ergo-white));\\n --act: var(--ergo-white);\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-white);\\n --mat: var(--ergo-grey-light);\\n }\\n }\\n }\\n\\n .tcn-fab {\\n border-radius: 50%;\\n }\\n\\n .tcn-mobile-button {\\n --btn-size-base: 44px;\\n --btn-pad-base: 16px;\\n --btn-size-delta: 8px;\\n --btn-pad-delta: 4px;\\n\\n font-size: calc(16px * var(--scalar, 1));\\n }\\n\\n .tcn-mobile-button[data-size=\\\"sm\\\"] {\\n --btn-size-base: 36px;\\n }\\n\\n .tcn-mobile-button[data-size=\\\"lg\\\"] {\\n --btn-size-base: 52px;\\n }\\n\\n .tcn-button-group .tcn-button-group-button.tcn-mobile-button {\\n --btn-size-base: 44px;\\n --btn-pad-base: 16px;\\n --btn-size-delta: 8px;\\n --btn-pad-delta: 4px;\\n\\n font-size: calc(16px * var(--scalar, 1));\\n }\\n\\n .tcn-button-group {\\n .tcn-button-group-button:hover,\\n .tcn-button-group-button:active {\\n transform: none;\\n }\\n\\n .tcn-button-group-button {\\n border-radius: 0;\\n }\\n .tcn-button-group-button:first-child {\\n border-start-start-radius: var(--ergo-shape-radius-medium);\\n border-end-start-radius: var(--ergo-shape-radius-medium);\\n }\\n .tcn-button-group-button:last-child {\\n border-start-end-radius: var(--ergo-shape-radius-medium);\\n border-end-end-radius: var(--ergo-shape-radius-medium);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"] {\\n border: 0;\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:last-child) {\\n border-right: 1px solid var(--on-mat-faint);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:first-child) {\\n border-left: 1px solid var(--on-mat-faint);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:last-child) {\\n border-right: 1px solid var(--act-down);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:first-child) {\\n border-left: 1px solid var(--act-down);\\n }\\n }\\n\\n .tcn-select-group {\\n .tcn-select-group-option:hover,\\n .tcn-select-group-option:active {\\n transform: none;\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"] {\\n color: var(--act);\\n border-color: var(--act);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:hover {\\n background: var(--act-faint);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:active {\\n background: var(--act-down);\\n color: var(--on-act);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n color: var(--ergo-material-disabled-outline);\\n border: 1px solid var(--ergo-material-disabled-outline);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n background: var(--ergo-material-disabled-outline);\\n color: white;\\n border: 1px solid var(--ergo-material-disabled-outline);\\n }\\n\\n .tcn-select-group-option {\\n border-radius: 0;\\n }\\n .tcn-select-group-option:first-child {\\n border-top-left-radius: var(--ergo-shape-radius-medium);\\n border-bottom-left-radius: var(--ergo-shape-radius-medium);\\n }\\n .tcn-select-group-option:last-child {\\n border-top-right-radius: var(--ergo-shape-radius-medium);\\n border-bottom-right-radius: var(--ergo-shape-radius-medium);\\n }\\n }\\n\\n /* ===== Tabs ===== */\\n .tcn-tabs-bar {\\n .tcn-tabs-list {\\n .tcn-tab-item {\\n min-height: 24px;\\n padding: 0px var(--padding-medium);\\n text-decoration: none;\\n text-overflow: ellipsis;\\n overflow: hidden;\\n white-space: nowrap;\\n }\\n }\\n }\\n\\n /* Default */\\n .tcn-tabs-bar[data-variant=\\\"default\\\"] {\\n .tcn-tabs-list {\\n .tcn-tab-item {\\n box-sizing: border-box;\\n border: none;\\n padding: 0px var(--padding-medium);\\n border-radius: 0;\\n }\\n .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n --mat: var(--tcn-button-color, var(--material));\\n --ink: var(--tcn-button-text-color, var(--ergo-primary));\\n --act: var(--ergo-primary);\\n }\\n\\n .tcn-tab-item:focus-visible {\\n z-index: 2;\\n }\\n /* Hover Indicator */\\n .tcn-tab-item[data-is-selected=\\\"false\\\"]:hover::after,\\n .tcn-tab-item[data-is-selected=\\\"false\\\"]:focus-visible::after {\\n content: \\\"\\\";\\n display: block;\\n position: absolute;\\n left: 0;\\n right: 0;\\n bottom: 0px;\\n height: 1px;\\n background: var(--ergo-accent-blue);\\n pointer-events: none;\\n width: 100%;\\n z-index: 3;\\n }\\n\\n /* Indicator */\\n &::after {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: -1px;\\n left: 0;\\n min-height: 2px;\\n transform: translateX(var(--tabs-active-rectangle-position-x, 0));\\n width: var(--tabs-active-rectangle-width, 0);\\n background: var(--ergo-primary);\\n pointer-events: none;\\n border-bottom-left-radius: 2px;\\n border-bottom-right-radius: 2px;\\n transition:\\n transform 300ms ease-in-out,\\n width 300ms ease-in-out;\\n will-change: transform, width;\\n z-index: 2;\\n }\\n }\\n\\n /* Rail */\\n &::before {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: 0px;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: var(--ergo-material-divider);\\n pointer-events: none;\\n z-index: 1;\\n }\\n }\\n\\n /* Inline */\\n .tcn-tabs-bar[data-variant=\\\"inline\\\"] {\\n font-size: 12px;\\n min-width: min-content;\\n width: auto;\\n flex-grow: 0;\\n border-radius: 6px;\\n border: 1px solid var(--on-material);\\n padding: 2px;\\n\\n .tcn-tabs-list {\\n height: 20px;\\n gap: var(--ergo-spacing-xs);\\n .tcn-tab-item {\\n border-radius: var(--ergo-shape-radius-medium);\\n min-height: 20px;\\n }\\n }\\n }\\n\\n /* ===== MATERIAL ===== */\\n\\n .material {\\n background-color: var(--material);\\n color: var(--on-material);\\n }\\n\\n /* Divider: use material-line; emphasis variants for strong/faint */\\n .tcn-divider-line,\\n .tcn-divider-line[data-emphasis=\\\"normal\\\"] {\\n background: var(--material-line);\\n }\\n .tcn-divider-line[data-emphasis=\\\"strong\\\"] {\\n background: color-mix(in srgb, var(--material-line) 80%, black 20%);\\n }\\n .tcn-divider-line[data-emphasis=\\\"faint\\\"] {\\n background: color-mix(in srgb, var(--material-line) 80%, white 20%);\\n }\\n\\n /* ===== SURFACES ===== */\\n .tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n .tcn-drag-handle {\\n cursor: move;\\n }\\n }\\n\\n .tcn-frame-dialog {\\n border: inherit;\\n }\\n\\n .tcn-tethered {\\n /* Managing offset of the indicator in relation for the tethered element\\n pad defaults to 0, but should be set depending on the surface */\\n\\n --tether-pad-x: 0px;\\n --tether-pad-y: 0px;\\n --indicator-pad-x: 0px;\\n --indicator-pad-y: 0px;\\n --tether-pad-size: 0px;\\n --tether-pad-pos: var(--tether-pad-size);\\n --tether-pad-neg: calc(-1 * var(--tether-pad-size));\\n left: calc(\\n var(--tether-pad-x, 0) -\\n var(--indicator-pad-x, 0) +\\n var(--tethered-left, 0)\\n );\\n top: calc(var(--tether-pad-y, 0) + var(--tethered-top, 0));\\n\\n :where(.tcn-tethered-origin-indicator) {\\n left: calc(var(--indicator-pad-x, 0) + var(--tethered-origin-delta-x, 0));\\n top: calc(var(--indicator-pad-y, 0) + var(--tethered-origin-delta-y, 0));\\n }\\n\\n &[data-h-anchor=\\\"start\\\"] {\\n --tether-pad-x: var(--tether-pad-pos);\\n }\\n\\n &[data-h-anchor=\\\"end\\\"] {\\n --tether-pad-x: var(--tether-pad-neg);\\n }\\n\\n &[data-h-origin=\\\"start\\\"] {\\n --indicator-pad-x: var(--tether-pad-pos);\\n }\\n\\n &[data-h-origin=\\\"end\\\"] {\\n --indicator-pad-x: var(--tether-pad-neg);\\n }\\n\\n &[data-v-origin=\\\"center\\\"] {\\n --indicator-pad-x: 0px;\\n --tether-pad-x: 0px;\\n &[data-v-anchor=\\\"top\\\"] {\\n --tether-pad-y: var(--tether-pad-pos);\\n }\\n\\n &[data-v-anchor=\\\"bottom\\\"] {\\n --tether-pad-y: var(--tether-pad-neg);\\n }\\n }\\n\\n &[data-anchor-direction=\\\"bottom\\\"] {\\n padding-bottom: var(--ergo-shape-triangle-medium);\\n }\\n\\n &[data-anchor-direction=\\\"top\\\"] {\\n padding-top: var(--ergo-shape-triangle-medium);\\n }\\n\\n &[data-anchor-direction=\\\"start\\\"] {\\n padding-left: var(--ergo-shape-triangle-medium);\\n }\\n\\n &[data-anchor-direction=\\\"end\\\"] {\\n padding-right: var(--ergo-shape-triangle-medium);\\n }\\n }\\n\\n .tcn-tooltip {\\n --tether-pad-size: 16px;\\n background: transparent;\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n .tcn-tooltip-label {\\n box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n color: var(--on-material);\\n background: var(--material);\\n border-radius: var(--ergo-shape-radius-medium);\\n padding: var(--padding-medium);\\n }\\n }\\n\\n .tcn-list {\\n gap: var(--gap-medium);\\n .tcn-item {\\n height: 24px;\\n padding: 0px var(--padding-medium);\\n border-radius: var(--ergo-shape-radius-medium);\\n }\\n }\\n /* Rail: */\\n .tcn-utility-strip {\\n min-width: var(--ergo-sizing-bar-md);\\n }\\n\\n .tcn-utility-strip {\\n padding-block: var(--padding-medium);\\n gap: var(--gap-medium);\\n }\\n\\n /* Scaffold: */\\n .tcn-footer,\\n .tcn-header,\\n .tcn-utility-bar {\\n padding-inline: var(--pad-inline, var(--padding-medium));\\n gap: var(--gap-medium);\\n }\\n\\n .tcn-utility-bar {\\n min-height: var(--ergo-sizing-bar-md);\\n }\\n\\n .tcn-footer,\\n .tcn-header {\\n min-height: var(--ergo-sizing-bar-lg);\\n }\\n\\n .tcn-scaffold {\\n --scaffold-divide-footer: var(--divide-footer, 1);\\n --scaffold-divide-header: var(--divide-header, 1);\\n /* Since Scaffold now acts as body too - there is no pad inline default - each outer container should set it */\\n /* --pad-inline: var(--padding-large); */\\n\\n /* Border appears on nested scaffold/rail when it follows header or utility-bar */\\n :where(.tcn-header) {\\n border-bottom: calc(var(--scaffold-divide-header) * 1px) solid\\n var(--ergo-material-border);\\n }\\n :where(.tcn-utility-bar) {\\n border-bottom: 1px solid var(--ergo-material-border);\\n }\\n\\n :where(.tcn-footer) {\\n border-top: calc(var(--scaffold-divide-footer) * 1px) solid\\n var(--ergo-material-border);\\n }\\n }\\n\\n .tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n background-color: rgba(0, 0, 0, 0.5);\\n }\\n\\n /* PAGE: */\\n .tcn-page {\\n --divide-header: 0;\\n --divide-footer: 0;\\n --pad-inline: var(--padding-large);\\n --material: var(--background-color-tertiary);\\n background-color: var(--material);\\n }\\n\\n /* MODAL: */\\n .tcn-modal {\\n --divide-header: 0;\\n --pad-inline: var(--padding-large);\\n box-shadow: 0px 4px 34px 0px #00000096;\\n border-radius: var(--ergo-shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 1px solid var(--ergo-material-border);\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-material-overlay);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n /* DRAWER: */\\n .tcn-drawer {\\n --divide-header: 0;\\n --pad-inline: var(--padding-large);\\n box-shadow: 0px 4px 34px 0px #00000096;\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-material-overlay);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n /* WINDOW: */\\n .tcn-window {\\n box-shadow: 0px 4px 34px 0px #00000096;\\n --divide-header: 0;\\n --pad-inline: var(--padding-large);\\n border-radius: var(--ergo-shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 2px solid white;\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-material-overlay);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n .tcn-pop-confirm {\\n --divide-header: 0;\\n --tether-pad-size: 16px;\\n --pad-inline: var(--padding-medium);\\n\\n .tcn-pop-confirm-scaffold {\\n border-radius: var(--ergo-shape-radius-medium);\\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n background-color: var(--background-color-primary);\\n }\\n\\n :where(.tcn-tethered-origin-indicator) {\\n --material: var(--ergo-white);\\n }\\n\\n /* Set the indicator to match the header color */\\n &[data-v-origin=\\\"top\\\"] {\\n :where(.tcn-tethered-origin-indicator) {\\n --material: var(--ergo-material-overlay);\\n }\\n }\\n\\n :where(.tcn-header) {\\n min-height: var(--ergo-sizing-bar-md);\\n\\n --material: var(--ergo-material-overlay);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n .tcn-confirm {\\n --material: var(--background-color-primary);\\n background-color: var(--material);\\n }\\n\\n .tcn-bar {\\n gap: var(--gap-medium);\\n\\n /* Add a divider between groups unless there is a spacer after a group */\\n :where(.tcn-group:not(:last-child):not(:has(+ .tcn-spacer)))::after {\\n content: \\\"\\\";\\n display: block;\\n min-width: 2px;\\n height: 18px;\\n background: var(--ergo-grey);\\n border-radius: var(--ergo-shape-radius-small);\\n align-self: center;\\n }\\n }\\n\\n /* PANEL */\\n .tcn-panel {\\n --divide-header: 1;\\n --divide-footer: 1;\\n --pad-inline: var(--padding-large);\\n --material: var(--background-color-primary);\\n background-color: var(--material);\\n border-radius: var(--ergo-shape-radius-medium);\\n overflow: hidden;\\n\\n :where(.tcn-title) {\\n font-size: 18px;\\n }\\n }\\n\\n /* Aside */\\n .tcn-aside {\\n --divide-header: 1;\\n --divide-footer: 1;\\n --pad-inline: var(--padding-large);\\n\\n --material: var(--background-color-secondary);\\n background-color: var(--material);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n min-height: var(--ergo-sizing-bar-md);\\n }\\n\\n :where(.tcn-footer) {\\n min-height: var(--ergo-sizing-bar-md);\\n }\\n\\n :where(.tcn-title) {\\n font-size: 16px;\\n }\\n }\\n\\n /* Card */\\n .tcn-card {\\n --divide-header: 0;\\n --divide-footer: 1;\\n --pad-inline: var(--padding-medium);\\n\\n background-color: var(--background-color-primary);\\n border-radius: var(--ergo-shape-radius-medium);\\n border: 1px solid var(--ergo-material-border);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n min-height: var(--ergo-sizing-bar-md);\\n\\n --material: var(--ergo-secondary-light);\\n --on-material: var(--ergo-accent-blue);\\n --action: var(--ergo-secondary);\\n --on-action: var(--ergo-white);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n\\n :where(.tcn-utility-bar) {\\n min-height: var(--ergo-sizing-bar-sm);\\n }\\n }\\n\\n /* Columns: */\\n .tcn-panel {\\n :where(.tcn-columns) {\\n padding: var(--padding-large);\\n\\n :where(.tcn-column) {\\n gap: var(--gap-medium);\\n border-right: 1px solid var(--ergo-material-border);\\n padding-inline-end: var(--padding-medium);\\n }\\n\\n :where(.tcn-column):not(:first-child) {\\n padding-inline-start: var(--padding-medium);\\n }\\n }\\n }\\n\\n /* Resize handle offsets */\\n :where(.tcn-rail.tcn-columns) {\\n --resize-offset: calc(-1 * var(--padding-medium));\\n }\\n\\n :where(.tcn-rail):not(.tcn-columns) {\\n --resize-offset: 0px;\\n }\\n\\n .tcn-page {\\n :where(.tcn-columns) {\\n padding: var(--padding-medium);\\n\\n :where(.tcn-column) {\\n gap: var(--gap-medium);\\n }\\n\\n > .tcn-column:not(:last-child) {\\n padding-inline-end: var(--padding-medium);\\n }\\n }\\n }\\n\\n /* Rows: */\\n .tcn-panel,\\n .tcn-card {\\n :where(.tcn-rows) {\\n :where(.tcn-row):not(:last-child) {\\n border-bottom: 1px solid var(--ergo-material-border);\\n padding-block-end: var(--padding-medium);\\n }\\n\\n :where(.tcn-row):not(:first-child) {\\n padding-block-start: var(--padding-medium);\\n }\\n }\\n }\\n\\n .tcn-page {\\n :where(.tcn-rows) {\\n padding: var(--padding-medium);\\n\\n :where(.tcn-row):not(:last-child) {\\n padding-block-end: var(--padding-medium);\\n }\\n }\\n }\\n\\n /* SECTION */\\n .tcn-section {\\n --max-section-depth: 4;\\n --section-tab-width: 4px;\\n --section-tab-start: var(--pad-inline, var(--padding-medium));\\n --section-tab-depth: 0;\\n --section-tab: calc(\\n var(--section-tab-start) +\\n (var(--section-tab-width) * var(--section-tab-depth))\\n );\\n --section-heading-height: var(--ergo-sizing-bar-md);\\n --section-action: var(--ergo-secondary);\\n --section-mat: var(--ergo-secondary-light);\\n --section-on-mat: var(--ergo-text-color-primary);\\n }\\n\\n .tcn-heading {\\n position: sticky;\\n background-color: var(--material);\\n padding-inline-start: var(--pad-inline, var(--padding-medium));\\n padding-inline-end: var(--pad-inline, var(--padding-medium));\\n height: var(--section-heading-height);\\n z-index: 5;\\n user-select: none;\\n }\\n\\n .tcn-section > .tcn-heading {\\n top: calc(var(--section-heading-height) * var(--section-tab-depth));\\n z-index: calc(var(--max-section-depth) - var(--section-tab-depth));\\n padding-inline-start: var(--section-tab);\\n --material: var(--section-mat);\\n --on-material: var(--section-on-mat);\\n --action: var(--section-action);\\n background-color: var(--material);\\n color: var(--on-material);\\n gap: var(--gap-small);\\n }\\n\\n .tcn-detail {\\n padding-block: var(--padding-medium);\\n gap: var(--padding-medium);\\n }\\n\\n .tcn-section > .tcn-detail {\\n padding-inline-start: var(--section-tab);\\n padding-inline-end: var(--pad-inline, var(--padding-medium));\\n }\\n\\n .tcn-scaffold > .tcn-detail {\\n padding-inline: var(--pad-inline, var(--padding-medium));\\n }\\n\\n .tcn-section > .tcn-section {\\n --section-tab-depth: 1;\\n --section-mat: var(--ergo-accent-blue-light);\\n --section-action: var(--ergo-accent-blue);\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section {\\n --section-tab-depth: 2;\\n --section-mat: var(--ergo-accent-green-light);\\n --section-action: var(--ergo-accent-green-dark);\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > .tcn-section {\\n --section-tab-depth: 3;\\n --section-mat: var(--ergo-tertiary-light);\\n --section-action: var(--ergo-tertiary-dark);\\n }\\n\\n .tcn-caret {\\n --caret-size: var(--ergo-shape-triangle-medium);\\n --caret-triangle-height: calc(var(--caret-size) / 2);\\n --caret-triangle-width: var(--caret-size);\\n --caret-triangle-base: var(--caret-triangle-height) solid transparent;\\n --caret-triangle-peak: var(--caret-triangle-width) solid var(--material);\\n\\n width: var(--caret-size);\\n height: var(--caret-size);\\n min-width: var(--caret-size);\\n min-height: var(--caret-size);\\n flex-grow: 0;\\n display: inline-block;\\n\\n &[data-direction=\\\"top\\\"] {\\n border-bottom: var(--caret-triangle-peak);\\n border-left: var(--caret-triangle-base);\\n border-right: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"bottom\\\"] {\\n border-top: var(--caret-triangle-peak);\\n border-left: var(--caret-triangle-base);\\n border-right: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"start\\\"] {\\n border-right: var(--caret-triangle-peak);\\n border-top: var(--caret-triangle-base);\\n border-bottom: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"end\\\"] {\\n border-left: var(--caret-triangle-peak);\\n border-top: var(--caret-triangle-base);\\n border-bottom: var(--caret-triangle-base);\\n }\\n }\\n\\n /* ===== TABLE ===== */\\n .tcn-table {\\n --table-pad-inline: var(--pad-inline, var(--padding-medium));\\n\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-text-color-primary);\\n --action: var(--ergo-accent-blue);\\n --on-action: var(--ergo-white);\\n background-color: var(--material);\\n color: var(--on-material);\\n border-collapse: separate;\\n display: block;\\n }\\n\\n /* TODO: cleanup - this needs merged with ui-table sticky logic/styles */\\n .tcn-table[data-is-sticky=\\\"true\\\"] {\\n .tcn-tbody {\\n th:first-of-type {\\n border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n }\\n\\n th:last-of-type {\\n border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n }\\n }\\n .tcn-thead {\\n th:first-of-type {\\n border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n }\\n\\n th:last-of-type {\\n border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n }\\n }\\n }\\n\\n .tcn-td {\\n text-align: start;\\n overflow: hidden;\\n white-space: nowrap;\\n text-overflow: ellipsis;\\n }\\n\\n .tcn-thead {\\n /* Border for header row */\\n .tcn-tr {\\n height: var(--ergo-sizing-bar-md);\\n .tcn-th {\\n border-bottom: 1px solid var(--ergo-grey-light);\\n }\\n .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)) {\\n border-right: 1px solid var(--ergo-grey);\\n }\\n .tcn-th:last-of-type {\\n border-left: 1px solid var(--ergo-grey);\\n }\\n }\\n }\\n\\n .tcn-tfoot {\\n font-weight: bold;\\n /* Border for footer row */\\n .tcn-tr {\\n height: var(--ergo-sizing-bar-sm);\\n .tcn-th,\\n .tcn-td {\\n border-top: 1px solid var(--ergo-grey-light);\\n }\\n }\\n }\\n\\n /* Header and footer - both are light blue */\\n .tcn-thead,\\n .tcn-tfoot {\\n font-size: 14px;\\n --material: var(--ergo-secondary-light);\\n --on-material: var(--ergo-accent-blue);\\n --action: var(--ergo-accent-blue);\\n --on-action: var(--ergo-white);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n\\n .tcn-tr .tcn-th:first-child {\\n padding-inline: var(--table-pad-inline);\\n }\\n }\\n\\n .tcn-tr {\\n height: var(--ergo-sizing-bar-sm);\\n align-content: center;\\n }\\n\\n .tcn-td,\\n .tcn-th {\\n padding-inline: var(--padding-medium);\\n vertical-align: middle;\\n text-align: start;\\n background: var(--material);\\n }\\n\\n /* First column (header, body, footer): use context for pad inline or default 8px */\\n .tcn-table .tcn-tr > .tcn-th:first-child,\\n .tcn-table .tcn-tr > .tcn-td:first-child {\\n padding-inline-start: var(--table-pad-inline);\\n }\\n\\n /* Last column (header, body, footer): use context for pad inline or default 8px */\\n .tcn-table .tcn-tr > .tcn-th:last-child,\\n .tcn-table .tcn-tr > .tcn-td:last-child {\\n padding-inline-end: var(--table-pad-inline);\\n }\\n\\n .tcn-tbody {\\n font-size: 12px;\\n .tcn-tr:nth-of-type(even) {\\n --material: var(--ergo-accent-blue-light);\\n }\\n .tcn-tr:nth-of-type(odd) {\\n --material: var(--ergo-white);\\n }\\n .tcn-tr:hover {\\n --material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%);\\n }\\n .tcn-tr[data-is-selected=\\\"true\\\"] {\\n --material: var(--ergo-secondary);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-accent-blue);\\n }\\n\\n .tcn-tr {\\n --material: var(--bg-row);\\n --on-material: var(--ergo-accent-blue);\\n --action: var(--ergo-accent-blue);\\n --on-action: var(--ergo-white);\\n background-color: var(--material);\\n color: var(--on-material);\\n }\\n }\\n\\n /* ===== INPUTS ===== */\\n .tcn-entry,\\n .tcn-control {\\n --act: var(--action);\\n --mat: var(--material);\\n --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n\\n font-size: var(--ergo-text-size-input);\\n border: 1px solid var(--ergo-grey);\\n box-sizing: border-box;\\n min-height: var(--ergo-sizing-action-md);\\n border-radius: var(--ergo-shape-radius-medium);\\n padding-inline: 4px;\\n }\\n\\n .tcn-radio-label,\\n .tcn-select-selected-label {\\n font-size: var(--ergo-text-size-input);\\n }\\n\\n .tcn-control[data-is-disabled=\\\"false\\\"]:hover {\\n background: var(--act-raised);\\n }\\n\\n .tcn-control:focus-within {\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n .tcn-control:focus {\\n border: 1px solid var(--act);\\n }\\n\\n .tcn-control::placeholder {\\n color: var(--ergo-grey);\\n }\\n\\n .tcn-control[data-is-disabled=\\\"true\\\"] {\\n cursor: not-allowed;\\n background: var(--ergo-material-disabled-outline);\\n color: var(--ergo-text-color-disabled-outline);\\n }\\n\\n .tcn-control[data-is-disabled=\\\"true\\\"]::placeholder {\\n color: var(--ergo-text-color-disabled-outline);\\n }\\n\\n .tcn-control {\\n display: flex;\\n justify-content: center;\\n gap: var(--gap-small);\\n }\\n\\n .tcn-control-row {\\n min-height: 22px;\\n height: auto;\\n align-items: center;\\n gap: var(--gap-small);\\n padding-block: 2px;\\n }\\n\\n .tcn-control-row > .tcn-icon {\\n color: var(--ergo-grey);\\n }\\n\\n .tcn-control .tcn-entry {\\n border: none;\\n background: transparent;\\n padding: 0;\\n min-height: unset;\\n border-radius: 0;\\n height: 100%;\\n flex-grow: 1;\\n\\n &:hover,\\n &:active,\\n &:focus-visible,\\n &:focus {\\n outline: none;\\n border: none;\\n background: transparent;\\n }\\n }\\n\\n .tcn-input {\\n height: auto;\\n }\\n\\n .tcn-textarea,\\n .tcn-input {\\n cursor: text;\\n }\\n\\n .tcn-control-set {\\n border-radius: var(--ergo-shape-radius-medium);\\n\\n &:focus-within {\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n .tcn-control-set-item {\\n z-index: 1;\\n border-radius: 0;\\n height: auto;\\n min-height: var(--ergo-sizing-action-md);\\n padding-block: 0;\\n &:focus,\\n &:focus-visible {\\n z-index: 3;\\n outline: none;\\n }\\n }\\n\\n .tcn-control-set-item:first-child {\\n border-top-left-radius: var(--ergo-shape-radius-medium);\\n border-bottom-left-radius: var(--ergo-shape-radius-medium);\\n }\\n\\n .tcn-control-set-item:not(:last-child) {\\n margin-right: -1px;\\n }\\n\\n .tcn-control-set-item:last-child {\\n border-top-right-radius: var(--ergo-shape-radius-medium);\\n border-bottom-right-radius: var(--ergo-shape-radius-medium);\\n }\\n\\n .tcn-select,\\n .tcn-button,\\n .tcn-button[data-hierarchy] {\\n border: 1px solid var(--ergo-grey);\\n height: auto;\\n min-height: var(--ergo-sizing-action-md);\\n min-width: var(--ergo-sizing-action-md);\\n box-sizing: border-box;\\n &:hover,\\n &[data-hover] {\\n transform: none;\\n }\\n }\\n\\n .tcn-button.tcn-select,\\n .tcn-button[data-hierarchy].tcn-select {\\n border-color: var(--ergo-grey);\\n }\\n\\n .tcn-select:focus-visible,\\n .tcn-button:focus-visible,\\n .tcn-button[data-hierarchy]:focus-visible {\\n border-color: var(--ergo-primary);\\n }\\n }\\n\\n .tcn-slider[data-is-disabled=\\\"true\\\"] {\\n &::-webkit-slider-runnable-track {\\n background: var(--ergo-grey-light);\\n }\\n\\n &::-webkit-slider-thumb {\\n background-color: var(--ergo-white);\\n border: 1px solid var(--ergo-grey-light);\\n }\\n }\\n\\n .tcn-checkbox {\\n --checkbox-color: var(--action, var(--ergo-primary));\\n\\n border-color: var(--checkbox-color);\\n\\n &:focus-visible,\\n &:focus {\\n outline: 2px solid var(--checkbox-color);\\n outline-offset: 2px;\\n }\\n\\n &[data-is-disabled=\\\"true\\\"] {\\n cursor: not-allowed;\\n border-color: var(--ergo-material-disabled-outline);\\n }\\n\\n &[data-checked=\\\"true\\\"] {\\n background-color: var(--checkbox-color);\\n }\\n\\n &[data-checked=\\\"true\\\"][data-is-disabled=\\\"true\\\"] {\\n background-color: var(--ergo-grey-light);\\n }\\n\\n &[data-checked=\\\"false\\\"][data-is-disabled=\\\"true\\\"] {\\n background: var(--material);\\n border-color: var(--ergo-grey-light);\\n color: var(--ergo-grey-light);\\n }\\n\\n &[data-is-disabled=\\\"false\\\"]:active {\\n background-color: var(--checkbox-color);\\n }\\n }\\n\\n .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"false\\\"],\\n .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"true\\\"] {\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n /* Quick fix to use some of the default module styles.*/\\n .tcn-input,\\n .tcn-select,\\n .tcn-slider,\\n .tcn-textarea,\\n .tcn-checkbox,\\n .tcn-switch-wrapper,\\n .tcn-date-picker,\\n .tcn-date-picker-year-selector,\\n .tcn-radio,\\n .tcn-date-picker-input,\\n .tcn-mobile-date-picker,\\n .tcn-mobile-date-picker-year-selector,\\n .tcn-suggestion-list-search-input,\\n .tcn-suggestion-list {\\n --accent-color: var(--ergo-primary);\\n }\\n\\n /* Datum/Tokens */\\n .tcn-chip {\\n --action: var(--ergo-primary);\\n --accent-color: var(--ergo-primary);\\n }\\n\\n .tcn-datum[data-emphasis=\\\"normal\\\"] {\\n --datum-font-color: var(--on-material);\\n }\\n\\n .tcn-datum[data-emphasis=\\\"strong\\\"] {\\n --datum-font-weight: 700;\\n }\\n\\n .tcn-datum[data-emphasis=\\\"faint\\\"] {\\n --datum-font-color: color-mix(in srgb, var(--on-material), transparent 12%);\\n }\\n\\n .tcn-datum[data-severity=\\\"dangerous\\\"] {\\n --datum-font-color: var(--ergo-status-red);\\n }\\n\\n .tcn-datum[data-severity=\\\"cautious\\\"] {\\n --datum-font-color: var(--ergo-status-yellow);\\n }\\n\\n .tcn-datum[data-severity=\\\"suggested\\\"] {\\n --datum-font-color: var(--ergo-status-blue);\\n }\\n\\n .tcn-datum[data-severity=\\\"encouraged\\\"] {\\n --datum-font-color: var(--ergo-status-green);\\n }\\n\\n .tcn-key {\\n --accent-color: var(--action);\\n font-size: 14px;\\n color: var(--datum-font-color);\\n font-weight: var(--datum-font-weight, 400);\\n }\\n\\n .tcn-value {\\n font-size: 12px;\\n\\n color: var(--datum-font-color);\\n font-weight: var(--datum-font-weight, 400);\\n }\\n\\n .tcn-term > .tcn-key,\\n .tcn-term > .tcn-value {\\n max-width: 50%;\\n }\\n\\n .tcn-value {\\n :where(.tcn-chip) {\\n --action: var(--ergo-accent-blue);\\n --accent-color: var(--ergo-accent-blue);\\n }\\n }\\n\\n /* ===== Resize Handle ===== */\\n\\n /* Edge indicators: centered pill chip */\\n .tcn-resize-handle[data-axis=\\\"horizontal\\\"] {\\n width: 8px;\\n }\\n\\n .tcn-resize-handle[data-axis=\\\"vertical\\\"] {\\n height: 8px;\\n }\\n\\n .tcn-resize-handle[data-axis=\\\"horizontal\\\"]::after,\\n .tcn-resize-handle[data-axis=\\\"vertical\\\"]::after {\\n content: \\\"\\\";\\n position: absolute;\\n border-radius: var(--ergo-shape-radius-medium);\\n background-color: var(--ergo-grey-light);\\n pointer-events: none;\\n transition: background-color 0.3s;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n }\\n\\n .tcn-resize-handle[data-axis=\\\"horizontal\\\"]::after {\\n width: 4px;\\n height: 16px;\\n }\\n\\n .tcn-resize-handle[data-axis=\\\"vertical\\\"]::after {\\n width: 16px;\\n height: 4px;\\n }\\n\\n /* Corner L-shape indicator */\\n .tcn-resize-handle[data-axis=\\\"corner\\\"]::after {\\n content: \\\"\\\";\\n position: absolute;\\n width: 8px;\\n height: 8px;\\n border-style: solid;\\n border-color: var(--ergo-grey-light);\\n border-width: 0;\\n pointer-events: none;\\n transition: border-color 0.15s;\\n }\\n\\n /* Physical corners */\\n .tcn-resize-handle[data-position=\\\"top-left\\\"]::after {\\n top: 0;\\n left: 0;\\n border-top-width: 4px;\\n border-left-width: 4px;\\n }\\n\\n .tcn-resize-handle[data-position=\\\"top-right\\\"]::after {\\n top: 0;\\n right: 0;\\n border-top-width: 4px;\\n border-right-width: 4px;\\n }\\n\\n .tcn-resize-handle[data-position=\\\"bottom-left\\\"]::after {\\n bottom: 0;\\n left: 0;\\n border-bottom-width: 4px;\\n border-left-width: 4px;\\n }\\n\\n .tcn-resize-handle[data-position=\\\"bottom-right\\\"]::after {\\n bottom: 0;\\n right: 0;\\n border-bottom-width: 4px;\\n border-right-width: 4px;\\n }\\n\\n /* Logical corners (RTL-aware) */\\n .tcn-resize-handle[data-position=\\\"top-start\\\"]:dir(ltr)::after {\\n top: 0;\\n left: 0;\\n border-top-width: 4px;\\n border-left-width: 4px;\\n }\\n\\n .tcn-resize-handle[data-position=\\\"top-start\\\"]:dir(rtl)::after {\\n top: 0;\\n right: 0;\\n border-top-width: 4px;\\n border-right-width: 4px;\\n }\\n\\n .tcn-resize-handle[data-position=\\\"top-end\\\"]:dir(ltr)::after {\\n top: 0;\\n right: 0;\\n border-top-width: 4px;\\n border-right-width: 4px;\\n }\\n\\n .tcn-resize-handle[data-position=\\\"top-end\\\"]:dir(rtl)::after {\\n top: 0;\\n left: 0;\\n border-top-width: 4px;\\n border-left-width: 4px;\\n }\\n\\n .tcn-resize-handle[data-position=\\\"bottom-start\\\"]:dir(ltr)::after {\\n bottom: 0;\\n left: 0;\\n border-bottom-width: 4px;\\n border-left-width: 4px;\\n }\\n\\n .tcn-resize-handle[data-position=\\\"bottom-start\\\"]:dir(rtl)::after {\\n bottom: 0;\\n right: 0;\\n border-bottom-width: 4px;\\n border-right-width: 4px;\\n }\\n\\n .tcn-resize-handle[data-position=\\\"bottom-end\\\"]:dir(ltr)::after {\\n bottom: 0;\\n right: 0;\\n border-bottom-width: 4px;\\n border-right-width: 4px;\\n }\\n\\n .tcn-resize-handle[data-position=\\\"bottom-end\\\"]:dir(rtl)::after {\\n bottom: 0;\\n left: 0;\\n border-bottom-width: 4px;\\n border-left-width: 4px;\\n }\\n\\n /* Hover */\\n .tcn-resize-handle[data-axis=\\\"horizontal\\\"]:hover::after,\\n .tcn-resize-handle[data-axis=\\\"vertical\\\"]:hover::after {\\n background-color: var(--ergo-grey-dark);\\n }\\n\\n .tcn-resize-handle:hover::after {\\n border-color: var(--ergo-grey-dark);\\n }\\n}\\n\"","import { buildStyleSheet } from '../../build_stylesheet';\nimport tokensCss from './tokens/theme_tokens.css?raw';\nimport systemTokensCss from './tokens/system_tokens.css?raw';\nimport css from './ergo_theme.css?raw';\nimport '@fontsource/lato';\n\nexport const ergoStyleSheet = buildStyleSheet([tokensCss, systemTokensCss, css]);\n"],"names":["tokensCss","systemTokensCss","css","ergoStyleSheet","buildStyleSheet"],"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,GCAfC,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,GCAfC,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCMFC,IAAiBC,EAAgB,CAACJ,GAAWC,GAAiBC,CAAG,CAAC;"}
package/dist/utils/index.d.ts CHANGED
@@ -16,4 +16,5 @@ export * from './types/dimensions.js';
16
16
  export * from './types/variations.js';
17
17
  export * from './dnd/draggable/draggable.js';
18
18
  export * from './dnd/handle.js';
19
+ export * from './resize/index.js';
19
20
  //# sourceMappingURL=index.d.ts.map
package/dist/utils/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,oBAAoB,CAAC;AAEnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC;AAEpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAEtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,oBAAoB,CAAC;AAEnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC;AAEpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAEtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAEhC,cAAc,mBAAmB,CAAC"}
package/dist/utils/index.js CHANGED
@@ -1,35 +1,48 @@
1
1
  import { ClickAwayListener as o, isEventWithinElement as t } from "./click_away_listener.js";
2
2
  import { FocusRedirect as a } from "./focus_redirect.js";
3
- import { ScrollAwayListener as x } from "./scroll_away_listener.js";
4
- import { useDraggable as s } from "./dnd/hooks/use_draggable.js";
5
- import { makeContextHook as i } from "./hooks/make_context_hook.js";
6
- import { useForkRef as l } from "./hooks/use_fork_ref.js";
7
- import { TriggerConfig as d, useResizeObserver as k } from "./hooks/use_resize_observer.js";
8
- import { useMediaQuery as c } from "./hooks/use_media_query.js";
9
- import { defaultValue as C } from "./default_value.js";
10
- import { CalendarDatesGenerator as h } from "./calendar/calendar_dates_generator.js";
11
- import { getDaysOfWeek as O } from "./calendar/get_days_of_week.js";
12
- import { getMonthsOfYear as v } from "./calendar/get_months_of_year.js";
13
- import { Month as A } from "./calendar/month.js";
14
- import { Draggable as F } from "./dnd/draggable/draggable.js";
15
- import { DragHandle as L } from "./dnd/handle.js";
3
+ import { ScrollAwayListener as p } from "./scroll_away_listener.js";
4
+ import { useDraggable as x } from "./dnd/hooks/use_draggable.js";
5
+ import { makeContextHook as n } from "./hooks/make_context_hook.js";
6
+ import { useForkRef as g } from "./hooks/use_fork_ref.js";
7
+ import { TriggerConfig as d, useResizeObserver as R } from "./hooks/use_resize_observer.js";
8
+ import { useMediaQuery as z } from "./hooks/use_media_query.js";
9
+ import { defaultValue as D } from "./default_value.js";
10
+ import { CalendarDatesGenerator as b } from "./calendar/calendar_dates_generator.js";
11
+ import { getDaysOfWeek as y } from "./calendar/get_days_of_week.js";
12
+ import { getMonthsOfYear as h } from "./calendar/get_months_of_year.js";
13
+ import { Month as O } from "./calendar/month.js";
14
+ import { Draggable as w } from "./dnd/draggable/draggable.js";
15
+ import { DragHandle as E } from "./dnd/handle.js";
16
+ import { Resizable as L } from "./resize/resizable.js";
17
+ import { ResizeHandle as G } from "./resize/resize_handle.js";
18
+ import { useResizable as T } from "./resize/context.js";
19
+ import { computeResizeState as Y, getHandleConfig as j, resolveDirection as q, resolveHandleConfig as B } from "./resize/handle_config.js";
20
+ import { ResizeHandleStrategy as J } from "./resize/resize_strategy.js";
16
21
  export {
17
- h as CalendarDatesGenerator,
22
+ b as CalendarDatesGenerator,
18
23
  o as ClickAwayListener,
19
- L as DragHandle,
20
- F as Draggable,
24
+ E as DragHandle,
25
+ w as Draggable,
21
26
  a as FocusRedirect,
22
- A as Month,
23
- x as ScrollAwayListener,
27
+ O as Month,
28
+ L as Resizable,
29
+ G as ResizeHandle,
30
+ J as ResizeHandleStrategy,
31
+ p as ScrollAwayListener,
24
32
  d as TriggerConfig,
25
- C as defaultValue,
26
- O as getDaysOfWeek,
27
- v as getMonthsOfYear,
33
+ Y as computeResizeState,
34
+ D as defaultValue,
35
+ y as getDaysOfWeek,
36
+ j as getHandleConfig,
37
+ h as getMonthsOfYear,
28
38
  t as isEventWithinElement,
29
- i as makeContextHook,
30
- s as useDraggable,
31
- l as useForkRef,
32
- c as useMediaQuery,
33
- k as useResizeObserver
39
+ n as makeContextHook,
40
+ q as resolveDirection,
41
+ B as resolveHandleConfig,
42
+ x as useDraggable,
43
+ g as useForkRef,
44
+ z as useMediaQuery,
45
+ T as useResizable,
46
+ R as useResizeObserver
34
47
  };
35
48
  //# sourceMappingURL=index.js.map
package/dist/utils/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
package/dist/utils/resize/context.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { ResizableContextValue } from './types.js';
2
+ export declare const ResizableContext: import('react').Context<ResizableContextValue | undefined>;
3
+ export declare const useResizable: () => ResizableContextValue;
4
+ //# sourceMappingURL=context.d.ts.map
package/dist/utils/resize/context.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/utils/resize/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAExD,eAAO,MAAM,gBAAgB,4DAE5B,CAAC;AAEF,eAAO,MAAM,YAAY,6BAAwD,CAAC"}
package/dist/utils/resize/context.js ADDED
@@ -0,0 +1,10 @@
1
+ import { createContext as e } from "react";
2
+ import { makeContextHook as o } from "../hooks/make_context_hook.js";
3
+ const t = e(
4
+ void 0
5
+ ), r = o(t, "ResizableContext");
6
+ export {
7
+ t as ResizableContext,
8
+ r as useResizable
9
+ };
10
+ //# sourceMappingURL=context.js.map
package/dist/utils/resize/context.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.js","sources":["../../../src/utils/resize/context.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { makeContextHook } from '../hooks/make_context_hook.js';\nimport type { ResizableContextValue } from './types.js';\n\nexport const ResizableContext = createContext<ResizableContextValue | undefined>(\n undefined\n);\n\nexport const useResizable = makeContextHook(ResizableContext, 'ResizableContext');\n"],"names":["ResizableContext","createContext","useResizable","makeContextHook"],"mappings":";;AAIO,MAAMA,IAAmBC;AAAA,EAC9B;AACF,GAEaC,IAAeC,EAAgBH,GAAkB,kBAAkB;"}
package/dist/utils/resize/handle_config.d.ts ADDED
@@ -0,0 +1,32 @@
1
+ import { HandleConfig, ResolvedHandleConfig, ResizeHandlePosition } from './types.js';
2
+ export declare function getHandleConfig(position: ResizeHandlePosition): HandleConfig;
3
+ /**
4
+ * Resolve the direction multiplier for a resize axis.
5
+ *
6
+ * @param languageDirection - 'ltr' or 'rtl' from getComputedStyle (passed by React adapter)
7
+ * @param invert - whether the axis inverts the delta (e.g. dragging left-handle right shrinks)
8
+ * @param disableDirection - if true, ignore RTL (physical positions like left/right)
9
+ * @returns +1 or -1
10
+ */
11
+ export declare function resolveDirection(languageDirection: string, invert: boolean, disableDirection: boolean): number;
12
+ /**
13
+ * Combines position lookup with direction resolution.
14
+ * The caller only needs to provide the language direction from the DOM —
15
+ * all config internals (invert, disableDirection) are resolved here.
16
+ */
17
+ export declare function resolveHandleConfig(position: ResizeHandlePosition, languageDirection: string): ResolvedHandleConfig;
18
+ /**
19
+ * Pure resize state computation. Called per-axis on each mousemove.
20
+ *
21
+ * @param startSize - element width/height at mousedown (from getBoundingClientRect)
22
+ * @param startCoord - clientX/clientY at mousedown
23
+ * @param currentCoord - clientX/clientY at this mousemove
24
+ * @param direction - +1 or -1 from resolveDirection
25
+ * @param previousSize - the size after the last mousemove (for currentDelta)
26
+ */
27
+ export declare function computeResizeState(startSize: number, startCoord: number, currentCoord: number, direction: number, previousSize: number): {
28
+ newSize: number;
29
+ totalDelta: number;
30
+ currentDelta: number;
31
+ };
32
+ //# sourceMappingURL=handle_config.d.ts.map
package/dist/utils/resize/handle_config.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"handle_config.d.ts","sourceRoot":"","sources":["../../../src/utils/resize/handle_config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,YAAY,CAAC;AAoEpB,wBAAgB,eAAe,CAAC,QAAQ,EAAE,oBAAoB,GAAG,YAAY,CAE5E;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAC9B,iBAAiB,EAAE,MAAM,EACzB,MAAM,EAAE,OAAO,EACf,gBAAgB,EAAE,OAAO,GACxB,MAAM,CAGR;AASD;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,oBAAoB,EAC9B,iBAAiB,EAAE,MAAM,GACxB,oBAAoB,CAUtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,GACnB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAK/D"}
package/dist/utils/resize/handle_config.js ADDED
@@ -0,0 +1,85 @@
1
+ const a = {
2
+ // Edges — single axis
3
+ left: {
4
+ horizontal: { origin: "left", invert: !0, disableDirection: !0 }
5
+ },
6
+ right: {
7
+ horizontal: { origin: "right", invert: !1, disableDirection: !0 }
8
+ },
9
+ start: {
10
+ horizontal: { origin: "left", invert: !0, disableDirection: !1 }
11
+ },
12
+ end: {
13
+ horizontal: { origin: "right", invert: !1, disableDirection: !1 }
14
+ },
15
+ top: {
16
+ vertical: { origin: "top", invert: !0, disableDirection: !0 }
17
+ },
18
+ bottom: {
19
+ vertical: { origin: "bottom", invert: !1, disableDirection: !0 }
20
+ },
21
+ // Corners — dual axis (physical)
22
+ "top-left": {
23
+ horizontal: { origin: "left", invert: !0, disableDirection: !0 },
24
+ vertical: { origin: "top", invert: !0, disableDirection: !0 }
25
+ },
26
+ "top-right": {
27
+ horizontal: { origin: "right", invert: !1, disableDirection: !0 },
28
+ vertical: { origin: "top", invert: !0, disableDirection: !0 }
29
+ },
30
+ "bottom-left": {
31
+ horizontal: { origin: "left", invert: !0, disableDirection: !0 },
32
+ vertical: { origin: "bottom", invert: !1, disableDirection: !0 }
33
+ },
34
+ "bottom-right": {
35
+ horizontal: { origin: "right", invert: !1, disableDirection: !0 },
36
+ vertical: { origin: "bottom", invert: !1, disableDirection: !0 }
37
+ },
38
+ // Corners — dual axis (logical, RTL-aware)
39
+ "top-start": {
40
+ horizontal: { origin: "left", invert: !0, disableDirection: !1 },
41
+ vertical: { origin: "top", invert: !0, disableDirection: !0 }
42
+ },
43
+ "top-end": {
44
+ horizontal: { origin: "right", invert: !1, disableDirection: !1 },
45
+ vertical: { origin: "top", invert: !0, disableDirection: !0 }
46
+ },
47
+ "bottom-start": {
48
+ horizontal: { origin: "left", invert: !0, disableDirection: !1 },
49
+ vertical: { origin: "bottom", invert: !1, disableDirection: !0 }
50
+ },
51
+ "bottom-end": {
52
+ horizontal: { origin: "right", invert: !1, disableDirection: !1 },
53
+ vertical: { origin: "bottom", invert: !1, disableDirection: !0 }
54
+ }
55
+ };
56
+ function u(i) {
57
+ return a[i];
58
+ }
59
+ function v(i, t, e) {
60
+ return (i === "rtl" && !e ? !t : t) ? -1 : 1;
61
+ }
62
+ function l(i, t) {
63
+ return {
64
+ origin: i.origin,
65
+ direction: v(t, i.invert, i.disableDirection)
66
+ };
67
+ }
68
+ function f(i, t) {
69
+ const e = a[i];
70
+ return {
71
+ horizontal: e.horizontal ? l(e.horizontal, t) : void 0,
72
+ vertical: e.vertical ? l(e.vertical, t) : void 0
73
+ };
74
+ }
75
+ function g(i, t, e, r, s) {
76
+ const o = r * (e - t), n = i + o, c = n - s;
77
+ return { newSize: n, totalDelta: o, currentDelta: c };
78
+ }
79
+ export {
80
+ g as computeResizeState,
81
+ u as getHandleConfig,
82
+ v as resolveDirection,
83
+ f as resolveHandleConfig
84
+ };
85
+ //# sourceMappingURL=handle_config.js.map
package/dist/utils/resize/handle_config.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"handle_config.js","sources":["../../../src/utils/resize/handle_config.ts"],"sourcesContent":["import type {\n AxisConfig,\n HandleConfig,\n ResolvedHandleConfig,\n ResizeHandlePosition,\n} from './types.js';\n\n/**\n * Pure position → config lookup. No DOM, no React.\n *\n * Edges populate one axis, corners populate both.\n * The React adapter reads DOM state (getBoundingClientRect, getComputedStyle)\n * and feeds resolved values into resolveDirection / computeResizeState.\n */\n\nconst configs: Record<ResizeHandlePosition, HandleConfig> = {\n // Edges — single axis\n left: {\n horizontal: { origin: 'left', invert: true, disableDirection: true },\n },\n right: {\n horizontal: { origin: 'right', invert: false, disableDirection: true },\n },\n start: {\n horizontal: { origin: 'left', invert: true, disableDirection: false },\n },\n end: {\n horizontal: { origin: 'right', invert: false, disableDirection: false },\n },\n top: {\n vertical: { origin: 'top', invert: true, disableDirection: true },\n },\n bottom: {\n vertical: { origin: 'bottom', invert: false, disableDirection: true },\n },\n\n // Corners — dual axis (physical)\n 'top-left': {\n horizontal: { origin: 'left', invert: true, disableDirection: true },\n vertical: { origin: 'top', invert: true, disableDirection: true },\n },\n 'top-right': {\n horizontal: { origin: 'right', invert: false, disableDirection: true },\n vertical: { origin: 'top', invert: true, disableDirection: true },\n },\n 'bottom-left': {\n horizontal: { origin: 'left', invert: true, disableDirection: true },\n vertical: { origin: 'bottom', invert: false, disableDirection: true },\n },\n 'bottom-right': {\n horizontal: { origin: 'right', invert: false, disableDirection: true },\n vertical: { origin: 'bottom', invert: false, disableDirection: true },\n },\n\n // Corners — dual axis (logical, RTL-aware)\n 'top-start': {\n horizontal: { origin: 'left', invert: true, disableDirection: false },\n vertical: { origin: 'top', invert: true, disableDirection: true },\n },\n 'top-end': {\n horizontal: { origin: 'right', invert: false, disableDirection: false },\n vertical: { origin: 'top', invert: true, disableDirection: true },\n },\n 'bottom-start': {\n horizontal: { origin: 'left', invert: true, disableDirection: false },\n vertical: { origin: 'bottom', invert: false, disableDirection: true },\n },\n 'bottom-end': {\n horizontal: { origin: 'right', invert: false, disableDirection: false },\n vertical: { origin: 'bottom', invert: false, disableDirection: true },\n },\n};\n\nexport function getHandleConfig(position: ResizeHandlePosition): HandleConfig {\n return configs[position];\n}\n\n/**\n * Resolve the direction multiplier for a resize axis.\n *\n * @param languageDirection - 'ltr' or 'rtl' from getComputedStyle (passed by React adapter)\n * @param invert - whether the axis inverts the delta (e.g. dragging left-handle right shrinks)\n * @param disableDirection - if true, ignore RTL (physical positions like left/right)\n * @returns +1 or -1\n */\nexport function resolveDirection(\n languageDirection: string,\n invert: boolean,\n disableDirection: boolean\n): number {\n const finalInvert = languageDirection === 'rtl' && !disableDirection ? !invert : invert;\n return finalInvert ? -1 : 1;\n}\n\nfunction resolveAxis(axis: AxisConfig, languageDirection: string) {\n return {\n origin: axis.origin,\n direction: resolveDirection(languageDirection, axis.invert, axis.disableDirection),\n };\n}\n\n/**\n * Combines position lookup with direction resolution.\n * The caller only needs to provide the language direction from the DOM —\n * all config internals (invert, disableDirection) are resolved here.\n */\nexport function resolveHandleConfig(\n position: ResizeHandlePosition,\n languageDirection: string\n): ResolvedHandleConfig {\n const config = configs[position];\n return {\n horizontal: config.horizontal\n ? resolveAxis(config.horizontal, languageDirection)\n : undefined,\n vertical: config.vertical\n ? resolveAxis(config.vertical, languageDirection)\n : undefined,\n };\n}\n\n/**\n * Pure resize state computation. Called per-axis on each mousemove.\n *\n * @param startSize - element width/height at mousedown (from getBoundingClientRect)\n * @param startCoord - clientX/clientY at mousedown\n * @param currentCoord - clientX/clientY at this mousemove\n * @param direction - +1 or -1 from resolveDirection\n * @param previousSize - the size after the last mousemove (for currentDelta)\n */\nexport function computeResizeState(\n startSize: number,\n startCoord: number,\n currentCoord: number,\n direction: number,\n previousSize: number\n): { newSize: number; totalDelta: number; currentDelta: number } {\n const totalDelta = direction * (currentCoord - startCoord);\n const newSize = startSize + totalDelta;\n const currentDelta = newSize - previousSize;\n return { newSize, totalDelta, currentDelta };\n}\n"],"names":["configs","getHandleConfig","position","resolveDirection","languageDirection","invert","disableDirection","resolveAxis","axis","resolveHandleConfig","config","computeResizeState","startSize","startCoord","currentCoord","direction","previousSize","totalDelta","newSize","currentDelta"],"mappings":"AAeA,MAAMA,IAAsD;AAAA;AAAA,EAE1D,MAAM;AAAA,IACJ,YAAY,EAAE,QAAQ,QAAQ,QAAQ,IAAM,kBAAkB,GAAA;AAAA,EAAK;AAAA,EAErE,OAAO;AAAA,IACL,YAAY,EAAE,QAAQ,SAAS,QAAQ,IAAO,kBAAkB,GAAA;AAAA,EAAK;AAAA,EAEvE,OAAO;AAAA,IACL,YAAY,EAAE,QAAQ,QAAQ,QAAQ,IAAM,kBAAkB,GAAA;AAAA,EAAM;AAAA,EAEtE,KAAK;AAAA,IACH,YAAY,EAAE,QAAQ,SAAS,QAAQ,IAAO,kBAAkB,GAAA;AAAA,EAAM;AAAA,EAExE,KAAK;AAAA,IACH,UAAU,EAAE,QAAQ,OAAO,QAAQ,IAAM,kBAAkB,GAAA;AAAA,EAAK;AAAA,EAElE,QAAQ;AAAA,IACN,UAAU,EAAE,QAAQ,UAAU,QAAQ,IAAO,kBAAkB,GAAA;AAAA,EAAK;AAAA;AAAA,EAItE,YAAY;AAAA,IACV,YAAY,EAAE,QAAQ,QAAQ,QAAQ,IAAM,kBAAkB,GAAA;AAAA,IAC9D,UAAU,EAAE,QAAQ,OAAO,QAAQ,IAAM,kBAAkB,GAAA;AAAA,EAAK;AAAA,EAElE,aAAa;AAAA,IACX,YAAY,EAAE,QAAQ,SAAS,QAAQ,IAAO,kBAAkB,GAAA;AAAA,IAChE,UAAU,EAAE,QAAQ,OAAO,QAAQ,IAAM,kBAAkB,GAAA;AAAA,EAAK;AAAA,EAElE,eAAe;AAAA,IACb,YAAY,EAAE,QAAQ,QAAQ,QAAQ,IAAM,kBAAkB,GAAA;AAAA,IAC9D,UAAU,EAAE,QAAQ,UAAU,QAAQ,IAAO,kBAAkB,GAAA;AAAA,EAAK;AAAA,EAEtE,gBAAgB;AAAA,IACd,YAAY,EAAE,QAAQ,SAAS,QAAQ,IAAO,kBAAkB,GAAA;AAAA,IAChE,UAAU,EAAE,QAAQ,UAAU,QAAQ,IAAO,kBAAkB,GAAA;AAAA,EAAK;AAAA;AAAA,EAItE,aAAa;AAAA,IACX,YAAY,EAAE,QAAQ,QAAQ,QAAQ,IAAM,kBAAkB,GAAA;AAAA,IAC9D,UAAU,EAAE,QAAQ,OAAO,QAAQ,IAAM,kBAAkB,GAAA;AAAA,EAAK;AAAA,EAElE,WAAW;AAAA,IACT,YAAY,EAAE,QAAQ,SAAS,QAAQ,IAAO,kBAAkB,GAAA;AAAA,IAChE,UAAU,EAAE,QAAQ,OAAO,QAAQ,IAAM,kBAAkB,GAAA;AAAA,EAAK;AAAA,EAElE,gBAAgB;AAAA,IACd,YAAY,EAAE,QAAQ,QAAQ,QAAQ,IAAM,kBAAkB,GAAA;AAAA,IAC9D,UAAU,EAAE,QAAQ,UAAU,QAAQ,IAAO,kBAAkB,GAAA;AAAA,EAAK;AAAA,EAEtE,cAAc;AAAA,IACZ,YAAY,EAAE,QAAQ,SAAS,QAAQ,IAAO,kBAAkB,GAAA;AAAA,IAChE,UAAU,EAAE,QAAQ,UAAU,QAAQ,IAAO,kBAAkB,GAAA;AAAA,EAAK;AAExE;AAEO,SAASC,EAAgBC,GAA8C;AAC5E,SAAOF,EAAQE,CAAQ;AACzB;AAUO,SAASC,EACdC,GACAC,GACAC,GACQ;AAER,UADoBF,MAAsB,SAAS,CAACE,IAAmB,CAACD,IAASA,KAC5D,KAAK;AAC5B;AAEA,SAASE,EAAYC,GAAkBJ,GAA2B;AAChE,SAAO;AAAA,IACL,QAAQI,EAAK;AAAA,IACb,WAAWL,EAAiBC,GAAmBI,EAAK,QAAQA,EAAK,gBAAgB;AAAA,EAAA;AAErF;AAOO,SAASC,EACdP,GACAE,GACsB;AACtB,QAAMM,IAASV,EAAQE,CAAQ;AAC/B,SAAO;AAAA,IACL,YAAYQ,EAAO,aACfH,EAAYG,EAAO,YAAYN,CAAiB,IAChD;AAAA,IACJ,UAAUM,EAAO,WACbH,EAAYG,EAAO,UAAUN,CAAiB,IAC9C;AAAA,EAAA;AAER;AAWO,SAASO,EACdC,GACAC,GACAC,GACAC,GACAC,GAC+D;AAC/D,QAAMC,IAAaF,KAAaD,IAAeD,IACzCK,IAAUN,IAAYK,GACtBE,IAAeD,IAAUF;AAC/B,SAAO,EAAE,SAAAE,GAAS,YAAAD,GAAY,cAAAE,EAAA;AAChC;"}
package/dist/utils/resize/index.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ export { Resizable } from './resizable.js';
2
+ export type { ResizableProps } from './resizable.js';
3
+ export { ResizeHandle } from './resize_handle.js';
4
+ export type { ResizeHandleProps } from './resize_handle.js';
5
+ export { useResizable } from './context.js';
6
+ export { getHandleConfig, resolveDirection, resolveHandleConfig, computeResizeState, } from './handle_config.js';
7
+ export { ResizeHandleStrategy } from './resize_strategy.js';
8
+ export type { StartResizeParams, HorizontalResizeResult, VerticalResizeResult, ResizeResult, EndResizeResult, } from './resize_strategy.js';
9
+ export type { ResizeHandlePosition, HandleConfig, AxisConfig, ResizableContextValue, ResolvedAxisConfig, ResolvedHandleConfig, OnWidthResize, OnWidthResizeEnd, OnHeightResize, OnHeightResizeEnd, WidthResizeOrigin, HeightResizeOrigin, } from './types.js';
10
+ //# sourceMappingURL=index.d.ts.map
package/dist/utils/resize/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/resize/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,YAAY,EACV,iBAAiB,EACjB,sBAAsB,EACtB,oBAAoB,EACpB,YAAY,EACZ,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EACV,oBAAoB,EACpB,YAAY,EACZ,UAAU,EACV,qBAAqB,EACrB,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,YAAY,CAAC"}
package/dist/utils/resize/index.js ADDED
@@ -0,0 +1,16 @@
1
+ import { Resizable as r } from "./resizable.js";
2
+ import { ResizeHandle as i } from "./resize_handle.js";
3
+ import { useResizable as l } from "./context.js";
4
+ import { computeResizeState as f, getHandleConfig as n, resolveDirection as m, resolveHandleConfig as p } from "./handle_config.js";
5
+ import { ResizeHandleStrategy as z } from "./resize_strategy.js";
6
+ export {
7
+ r as Resizable,
8
+ i as ResizeHandle,
9
+ z as ResizeHandleStrategy,
10
+ f as computeResizeState,
11
+ n as getHandleConfig,
12
+ m as resolveDirection,
13
+ p as resolveHandleConfig,
14
+ l as useResizable
15
+ };
16
+ //# sourceMappingURL=index.js.map
package/dist/utils/resize/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
package/dist/utils/resize/resizable.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { default as React } from 'react';
2
+ import { OnWidthResize, OnWidthResizeEnd, OnHeightResize, OnHeightResizeEnd } from './types.js';
3
+ export interface ResizableProps {
4
+ children: React.ReactNode;
5
+ onWidthResize?: OnWidthResize;
6
+ onWidthResizeEnd?: OnWidthResizeEnd;
7
+ onHeightResize?: OnHeightResize;
8
+ onHeightResizeEnd?: OnHeightResizeEnd;
9
+ }
10
+ export declare function Resizable({ children, onWidthResize, onWidthResizeEnd, onHeightResize, onHeightResizeEnd, }: ResizableProps): import("react/jsx-runtime").JSX.Element;
11
+ //# sourceMappingURL=resizable.d.ts.map
package/dist/utils/resize/resizable.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/utils/resize/resizable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EAElB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;AAwBD,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,iBAAiB,GAClB,EAAE,cAAc,2CA+ChB"}