@common-origin/design-system 2.19.0 → 2.20.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 (275) hide show
  1. package/dist/client.js +169 -169
  2. package/dist/client.js.map +1 -1
  3. package/dist/components/atoms/Avatar/Avatar.d.mts +8 -0
  4. package/dist/components/atoms/Avatar/Avatar.mjs +103 -0
  5. package/dist/components/atoms/Avatar/Avatar.mjs.map +1 -0
  6. package/dist/components/atoms/Avatar/index.d.mts +1 -0
  7. package/dist/components/atoms/Badge/Badge.d.mts +25 -0
  8. package/dist/components/atoms/Badge/Badge.mjs +98 -0
  9. package/dist/components/atoms/Badge/Badge.mjs.map +1 -0
  10. package/dist/components/atoms/Badge/index.d.mts +2 -0
  11. package/dist/components/atoms/Box/Box.d.mts +62 -0
  12. package/dist/components/atoms/Box/Box.mjs +246 -0
  13. package/dist/components/atoms/Box/Box.mjs.map +1 -0
  14. package/dist/components/atoms/Box/index.d.mts +1 -0
  15. package/dist/components/atoms/Button/Button.d.mts +40 -0
  16. package/dist/components/atoms/Button/Button.mjs +208 -0
  17. package/dist/components/atoms/Button/Button.mjs.map +1 -0
  18. package/dist/components/atoms/Button/index.d.mts +1 -0
  19. package/dist/components/atoms/CategoryBadge/CategoryBadge.d.mts +29 -0
  20. package/dist/components/atoms/CategoryBadge/CategoryBadge.mjs +29 -0
  21. package/dist/components/atoms/CategoryBadge/CategoryBadge.mjs.map +1 -0
  22. package/dist/components/atoms/CategoryBadge/index.d.mts +2 -0
  23. package/dist/components/atoms/CategoryLabel/CategoryLabel.d.mts +69 -0
  24. package/dist/components/atoms/CategoryLabel/CategoryLabel.mjs +151 -0
  25. package/dist/components/atoms/CategoryLabel/CategoryLabel.mjs.map +1 -0
  26. package/dist/components/atoms/CategoryLabel/index.d.mts +2 -0
  27. package/dist/components/atoms/Chip/BooleanChip.d.mts +28 -0
  28. package/dist/components/atoms/Chip/BooleanChip.mjs +76 -0
  29. package/dist/components/atoms/Chip/BooleanChip.mjs.map +1 -0
  30. package/dist/components/atoms/Chip/Chip.d.mts +37 -0
  31. package/dist/components/atoms/Chip/Chip.mjs +76 -0
  32. package/dist/components/atoms/Chip/Chip.mjs.map +1 -0
  33. package/dist/components/atoms/Chip/FilterChip.d.mts +13 -0
  34. package/dist/components/atoms/Chip/FilterChip.mjs +14 -0
  35. package/dist/components/atoms/Chip/FilterChip.mjs.map +1 -0
  36. package/dist/components/atoms/Chip/InputChip.d.mts +27 -0
  37. package/dist/components/atoms/Chip/InputChip.mjs +97 -0
  38. package/dist/components/atoms/Chip/InputChip.mjs.map +1 -0
  39. package/dist/components/atoms/Chip/index.d.mts +4 -0
  40. package/dist/components/atoms/Chip/shared/ChipBase.d.mts +12 -0
  41. package/dist/components/atoms/Chip/shared/ChipBase.mjs +45 -0
  42. package/dist/components/atoms/Chip/shared/ChipBase.mjs.map +1 -0
  43. package/dist/components/atoms/Chip/shared/types.d.mts +34 -0
  44. package/dist/components/atoms/Chip/shared/utils.d.mts +10 -0
  45. package/dist/components/atoms/Chip/shared/utils.mjs +46 -0
  46. package/dist/components/atoms/Chip/shared/utils.mjs.map +1 -0
  47. package/dist/components/atoms/Container/Container.d.mts +6 -0
  48. package/dist/components/atoms/Container/Container.mjs +24 -0
  49. package/dist/components/atoms/Container/Container.mjs.map +1 -0
  50. package/dist/components/atoms/Container/index.d.mts +1 -0
  51. package/dist/components/atoms/DateFormatter/DateFormatter.d.mts +23 -0
  52. package/dist/components/atoms/DateFormatter/DateFormatter.mjs +64 -0
  53. package/dist/components/atoms/DateFormatter/DateFormatter.mjs.map +1 -0
  54. package/dist/components/atoms/DateFormatter/index.d.mts +1 -0
  55. package/dist/components/atoms/Divider/Divider.d.mts +30 -0
  56. package/dist/components/atoms/Divider/Divider.mjs +134 -0
  57. package/dist/components/atoms/Divider/Divider.mjs.map +1 -0
  58. package/dist/components/atoms/Divider/index.d.mts +1 -0
  59. package/dist/components/atoms/Icon/Icon.d.mts +22 -0
  60. package/dist/components/atoms/Icon/Icon.mjs +95 -0
  61. package/dist/components/atoms/Icon/Icon.mjs.map +1 -0
  62. package/dist/components/atoms/Icon/index.d.mts +1 -0
  63. package/dist/components/atoms/IconButton/IconButton.d.mts +14 -0
  64. package/dist/components/atoms/IconButton/IconButton.mjs +150 -0
  65. package/dist/components/atoms/IconButton/IconButton.mjs.map +1 -0
  66. package/dist/components/atoms/IconButton/index.d.mts +1 -0
  67. package/dist/components/atoms/MoneyDisplay/MoneyDisplay.d.mts +26 -0
  68. package/dist/components/atoms/MoneyDisplay/MoneyDisplay.mjs +126 -0
  69. package/dist/components/atoms/MoneyDisplay/MoneyDisplay.mjs.map +1 -0
  70. package/dist/components/atoms/MoneyDisplay/index.d.mts +2 -0
  71. package/dist/components/atoms/Picture/Picture.d.mts +12 -0
  72. package/dist/components/atoms/Picture/Picture.mjs +65 -0
  73. package/dist/components/atoms/Picture/Picture.mjs.map +1 -0
  74. package/dist/components/atoms/Picture/index.d.mts +1 -0
  75. package/dist/components/atoms/ProgressBar/ProgressBar.d.mts +21 -0
  76. package/dist/components/atoms/ProgressBar/ProgressBar.mjs +91 -0
  77. package/dist/components/atoms/ProgressBar/ProgressBar.mjs.map +1 -0
  78. package/dist/components/atoms/ProgressBar/index.d.mts +2 -0
  79. package/dist/components/atoms/Stack/Stack.d.mts +16 -0
  80. package/dist/components/atoms/Stack/Stack.mjs +71 -0
  81. package/dist/components/atoms/Stack/Stack.mjs.map +1 -0
  82. package/dist/components/atoms/Stack/index.d.mts +1 -0
  83. package/dist/components/atoms/StatusBadge/StatusBadge.d.mts +23 -0
  84. package/dist/components/atoms/StatusBadge/StatusBadge.mjs +18 -0
  85. package/dist/components/atoms/StatusBadge/StatusBadge.mjs.map +1 -0
  86. package/dist/components/atoms/StatusBadge/index.d.mts +2 -0
  87. package/dist/components/atoms/StatusLabel/StatusLabel.d.mts +17 -0
  88. package/dist/components/atoms/StatusLabel/StatusLabel.mjs +28 -0
  89. package/dist/components/atoms/StatusLabel/StatusLabel.mjs.map +1 -0
  90. package/dist/components/atoms/StatusLabel/StatusLabelBase.d.mts +49 -0
  91. package/dist/components/atoms/StatusLabel/StatusLabelBase.mjs +161 -0
  92. package/dist/components/atoms/StatusLabel/StatusLabelBase.mjs.map +1 -0
  93. package/dist/components/atoms/StatusLabel/index.d.mts +2 -0
  94. package/dist/components/atoms/Tag/Tag.d.mts +36 -0
  95. package/dist/components/atoms/Tag/Tag.mjs +115 -0
  96. package/dist/components/atoms/Tag/Tag.mjs.map +1 -0
  97. package/dist/components/atoms/Tag/index.d.mts +2 -0
  98. package/dist/components/atoms/Typography/Typography.d.mts +34 -0
  99. package/dist/components/atoms/Typography/Typography.mjs +139 -0
  100. package/dist/components/atoms/Typography/Typography.mjs.map +1 -0
  101. package/dist/components/atoms/Typography/index.d.mts +1 -0
  102. package/dist/components/atoms/index.d.mts +20 -0
  103. package/dist/components/index.d.mts +4 -0
  104. package/dist/components/layout/GridSystem/GridSystem.d.mts +58 -0
  105. package/dist/components/layout/GridSystem/GridSystem.mjs +221 -0
  106. package/dist/components/layout/GridSystem/GridSystem.mjs.map +1 -0
  107. package/dist/components/layout/GridSystem/index.d.mts +1 -0
  108. package/dist/components/layout/index.d.mts +1 -0
  109. package/dist/components/molecules/AccountCard/AccountCard.d.mts +44 -0
  110. package/dist/components/molecules/AccountCard/AccountCard.mjs +191 -0
  111. package/dist/components/molecules/AccountCard/AccountCard.mjs.map +1 -0
  112. package/dist/components/molecules/AccountCard/index.d.mts +2 -0
  113. package/dist/components/molecules/ActionSheet/ActionSheet.d.mts +111 -0
  114. package/dist/components/molecules/ActionSheet/ActionSheet.mjs +283 -0
  115. package/dist/components/molecules/ActionSheet/ActionSheet.mjs.map +1 -0
  116. package/dist/components/molecules/ActionSheet/index.d.mts +2 -0
  117. package/dist/components/molecules/AgentInput/AgentInput.d.mts +30 -0
  118. package/dist/components/molecules/AgentInput/AgentInput.mjs +735 -0
  119. package/dist/components/molecules/AgentInput/AgentInput.mjs.map +1 -0
  120. package/dist/components/molecules/AgentInput/agentInputSpeech.d.mts +43 -0
  121. package/dist/components/molecules/AgentInput/agentInputSpeech.mjs +49 -0
  122. package/dist/components/molecules/AgentInput/agentInputSpeech.mjs.map +1 -0
  123. package/dist/components/molecules/AgentInput/agentInputStateMachine.d.mts +29 -0
  124. package/dist/components/molecules/AgentInput/agentInputStateMachine.mjs +55 -0
  125. package/dist/components/molecules/AgentInput/agentInputStateMachine.mjs.map +1 -0
  126. package/dist/components/molecules/AgentInput/index.d.mts +3 -0
  127. package/dist/components/molecules/Alert/Alert.d.mts +68 -0
  128. package/dist/components/molecules/Alert/Alert.mjs +284 -0
  129. package/dist/components/molecules/Alert/Alert.mjs.map +1 -0
  130. package/dist/components/molecules/Alert/index.d.mts +1 -0
  131. package/dist/components/molecules/Breadcrumbs/Breadcrumbs.d.mts +16 -0
  132. package/dist/components/molecules/Breadcrumbs/Breadcrumbs.mjs +74 -0
  133. package/dist/components/molecules/Breadcrumbs/Breadcrumbs.mjs.map +1 -0
  134. package/dist/components/molecules/Breadcrumbs/index.d.mts +1 -0
  135. package/dist/components/molecules/CardLarge/CardLarge.d.mts +12 -0
  136. package/dist/components/molecules/CardLarge/CardLarge.mjs +75 -0
  137. package/dist/components/molecules/CardLarge/CardLarge.mjs.map +1 -0
  138. package/dist/components/molecules/CardLarge/index.d.mts +1 -0
  139. package/dist/components/molecules/CardSmall/CardSmall.d.mts +16 -0
  140. package/dist/components/molecules/CardSmall/CardSmall.mjs +73 -0
  141. package/dist/components/molecules/CardSmall/CardSmall.mjs.map +1 -0
  142. package/dist/components/molecules/CardSmall/index.d.mts +1 -0
  143. package/dist/components/molecules/Checkbox/Checkbox.d.mts +64 -0
  144. package/dist/components/molecules/Checkbox/Checkbox.mjs +139 -0
  145. package/dist/components/molecules/Checkbox/Checkbox.mjs.map +1 -0
  146. package/dist/components/molecules/Checkbox/SelectableInputBase.d.mts +40 -0
  147. package/dist/components/molecules/Checkbox/SelectableInputBase.mjs +99 -0
  148. package/dist/components/molecules/Checkbox/SelectableInputBase.mjs.map +1 -0
  149. package/dist/components/molecules/Checkbox/index.d.mts +3 -0
  150. package/dist/components/molecules/ChipGroup/ChipGroup.d.mts +7 -0
  151. package/dist/components/molecules/ChipGroup/ChipGroup.mjs +54 -0
  152. package/dist/components/molecules/ChipGroup/ChipGroup.mjs.map +1 -0
  153. package/dist/components/molecules/ChipGroup/index.d.mts +1 -0
  154. package/dist/components/molecules/CodeBlock/CodeBlock.d.mts +46 -0
  155. package/dist/components/molecules/CodeBlock/CodeBlock.mjs +231 -0
  156. package/dist/components/molecules/CodeBlock/CodeBlock.mjs.map +1 -0
  157. package/dist/components/molecules/CodeBlock/index.d.mts +1 -0
  158. package/dist/components/molecules/DateGroup/DateGroup.d.mts +37 -0
  159. package/dist/components/molecules/DateGroup/DateGroup.mjs +104 -0
  160. package/dist/components/molecules/DateGroup/DateGroup.mjs.map +1 -0
  161. package/dist/components/molecules/DateGroup/index.d.mts +2 -0
  162. package/dist/components/molecules/Dropdown/Dropdown.d.mts +27 -0
  163. package/dist/components/molecules/Dropdown/Dropdown.mjs +282 -0
  164. package/dist/components/molecules/Dropdown/Dropdown.mjs.map +1 -0
  165. package/dist/components/molecules/Dropdown/index.d.mts +1 -0
  166. package/dist/components/molecules/EmptyState/EmptyState.d.mts +32 -0
  167. package/dist/components/molecules/EmptyState/EmptyState.mjs +133 -0
  168. package/dist/components/molecules/EmptyState/EmptyState.mjs.map +1 -0
  169. package/dist/components/molecules/EmptyState/index.d.mts +2 -0
  170. package/dist/components/molecules/FeatureBlock/FeatureBlock.d.mts +14 -0
  171. package/dist/components/molecules/FeatureBlock/FeatureBlock.mjs +99 -0
  172. package/dist/components/molecules/FeatureBlock/FeatureBlock.mjs.map +1 -0
  173. package/dist/components/molecules/FeatureBlock/index.d.mts +1 -0
  174. package/dist/components/molecules/InlineAlert/InlineAlert.d.mts +54 -0
  175. package/dist/components/molecules/InlineAlert/InlineAlert.mjs +140 -0
  176. package/dist/components/molecules/InlineAlert/InlineAlert.mjs.map +1 -0
  177. package/dist/components/molecules/InlineAlert/index.d.mts +2 -0
  178. package/dist/components/molecules/List/List.d.mts +30 -0
  179. package/dist/components/molecules/List/List.mjs +45 -0
  180. package/dist/components/molecules/List/List.mjs.map +1 -0
  181. package/dist/components/molecules/List/ListContext.d.mts +6 -0
  182. package/dist/components/molecules/List/ListContext.mjs +11 -0
  183. package/dist/components/molecules/List/ListContext.mjs.map +1 -0
  184. package/dist/components/molecules/List/ListItem.d.mts +101 -0
  185. package/dist/components/molecules/List/ListItem.mjs +224 -0
  186. package/dist/components/molecules/List/ListItem.mjs.map +1 -0
  187. package/dist/components/molecules/List/index.d.mts +4 -0
  188. package/dist/components/molecules/Modal/Modal.d.mts +69 -0
  189. package/dist/components/molecules/Modal/Modal.mjs +259 -0
  190. package/dist/components/molecules/Modal/Modal.mjs.map +1 -0
  191. package/dist/components/molecules/Modal/index.d.mts +2 -0
  192. package/dist/components/molecules/NumberInput/NumberInput.d.mts +86 -0
  193. package/dist/components/molecules/NumberInput/NumberInput.mjs +268 -0
  194. package/dist/components/molecules/NumberInput/NumberInput.mjs.map +1 -0
  195. package/dist/components/molecules/NumberInput/index.d.mts +2 -0
  196. package/dist/components/molecules/PageTitle/PageTitle.d.mts +21 -0
  197. package/dist/components/molecules/PageTitle/PageTitle.mjs +77 -0
  198. package/dist/components/molecules/PageTitle/PageTitle.mjs.map +1 -0
  199. package/dist/components/molecules/PageTitle/index.d.mts +1 -0
  200. package/dist/components/molecules/PasswordField/PasswordField.d.mts +55 -0
  201. package/dist/components/molecules/PasswordField/PasswordField.mjs +146 -0
  202. package/dist/components/molecules/PasswordField/PasswordField.mjs.map +1 -0
  203. package/dist/components/molecules/PasswordField/index.d.mts +2 -0
  204. package/dist/components/molecules/SearchField/SearchField.d.mts +108 -0
  205. package/dist/components/molecules/SearchField/SearchField.mjs +340 -0
  206. package/dist/components/molecules/SearchField/SearchField.mjs.map +1 -0
  207. package/dist/components/molecules/SearchField/index.d.mts +2 -0
  208. package/dist/components/molecules/Sheet/Sheet.d.mts +96 -0
  209. package/dist/components/molecules/Sheet/Sheet.mjs +243 -0
  210. package/dist/components/molecules/Sheet/Sheet.mjs.map +1 -0
  211. package/dist/components/molecules/Sheet/index.d.mts +2 -0
  212. package/dist/components/molecules/Slider/Slider.d.mts +102 -0
  213. package/dist/components/molecules/Slider/Slider.mjs +462 -0
  214. package/dist/components/molecules/Slider/Slider.mjs.map +1 -0
  215. package/dist/components/molecules/Slider/index.d.mts +2 -0
  216. package/dist/components/molecules/TabBar/TabBar.d.mts +82 -0
  217. package/dist/components/molecules/TabBar/TabBar.mjs +213 -0
  218. package/dist/components/molecules/TabBar/TabBar.mjs.map +1 -0
  219. package/dist/components/molecules/TabBar/index.d.mts +2 -0
  220. package/dist/components/molecules/TextField/InputBase.d.mts +22 -0
  221. package/dist/components/molecules/TextField/InputBase.mjs +56 -0
  222. package/dist/components/molecules/TextField/InputBase.mjs.map +1 -0
  223. package/dist/components/molecules/TextField/TextField.d.mts +56 -0
  224. package/dist/components/molecules/TextField/TextField.mjs +115 -0
  225. package/dist/components/molecules/TextField/TextField.mjs.map +1 -0
  226. package/dist/components/molecules/TextField/index.d.mts +4 -0
  227. package/dist/components/molecules/TransactionListItem/TransactionListItem.d.mts +39 -0
  228. package/dist/components/molecules/TransactionListItem/TransactionListItem.mjs +224 -0
  229. package/dist/components/molecules/TransactionListItem/TransactionListItem.mjs.map +1 -0
  230. package/dist/components/molecules/TransactionListItem/index.d.mts +2 -0
  231. package/dist/components/molecules/index.d.mts +26 -0
  232. package/dist/index.d.mts +3 -0
  233. package/dist/index.mjs +55 -0
  234. package/dist/index.mjs.map +1 -0
  235. package/dist/lib/cssTokens.d.mts +14 -0
  236. package/dist/lib/cssTokens.mjs +19 -0
  237. package/dist/lib/cssTokens.mjs.map +1 -0
  238. package/dist/lib/cssVariables.d.mts +15 -0
  239. package/dist/lib/cssVariables.mjs +37 -0
  240. package/dist/lib/cssVariables.mjs.map +1 -0
  241. package/dist/lib/styleUtils.d.mts +42 -0
  242. package/dist/lib/styleUtils.mjs +160 -0
  243. package/dist/lib/styleUtils.mjs.map +1 -0
  244. package/dist/lib/tokenAliases.d.mts +13 -0
  245. package/dist/lib/tokenAliases.mjs +121 -0
  246. package/dist/lib/tokenAliases.mjs.map +1 -0
  247. package/dist/lib/usePresence.d.mts +16 -0
  248. package/dist/lib/usePresence.mjs +50 -0
  249. package/dist/lib/usePresence.mjs.map +1 -0
  250. package/dist/{data.esm.js → styles/icons.json.mjs} +2 -1466
  251. package/dist/styles/icons.json.mjs.map +1 -0
  252. package/dist/styles/tokens.d.mts +3174 -0
  253. package/dist/styles/tokens.json.mjs +1454 -0
  254. package/dist/{tokens/index.esm.js.map → styles/tokens.json.mjs.map} +1 -1
  255. package/dist/tokens/{index.esm.js → index.mjs} +1 -1
  256. package/dist/tokens/index.mjs.map +1 -0
  257. package/dist/tokens/styles/tokens.d.mts +3174 -0
  258. package/dist/tokens/tokens.d.mts +4 -0
  259. package/dist/tokens/types/tokens.d.mts +6 -0
  260. package/dist/tokens.css.d.mts +4 -0
  261. package/dist/types/icons.d.mts +25 -0
  262. package/dist/types/icons.mjs +10 -0
  263. package/dist/types/icons.mjs.map +1 -0
  264. package/dist/types/index.d.mts +1 -0
  265. package/dist/types/tokens.d.mts +6 -0
  266. package/dist/types/tokens.mjs +10 -0
  267. package/dist/types/tokens.mjs.map +1 -0
  268. package/dist/vendor/tslib/tslib.es6.mjs +99 -0
  269. package/dist/vendor/tslib/tslib.es6.mjs.map +1 -0
  270. package/package.json +26 -12
  271. package/dist/client.esm.js +0 -8289
  272. package/dist/client.esm.js.map +0 -1
  273. package/dist/data.esm.js.map +0 -1
  274. package/dist/index.esm.js +0 -8
  275. package/dist/index.esm.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styleUtils.mjs","sources":["../../src/lib/styleUtils.ts"],"sourcesContent":["import { css, keyframes } from 'styled-components'\nimport tokens from './cssTokens'\n\n// Breakpoints from the semantic tokens (decision 0014)\nexport const breakpoints = {\n xs: tokens.semantic.breakpoint.xs,\n sm: tokens.semantic.breakpoint.sm,\n md: tokens.semantic.breakpoint.md,\n lg: tokens.semantic.breakpoint.lg,\n xl: tokens.semantic.breakpoint.xl,\n '2xl': tokens.semantic.breakpoint['2xl'],\n}\n\n// Media query helpers\nexport const media = {\n xs: `@media (min-width: ${breakpoints.xs})`,\n sm: `@media (min-width: ${breakpoints.sm})`,\n md: `@media (min-width: ${breakpoints.md})`,\n lg: `@media (min-width: ${breakpoints.lg})`,\n xl: `@media (min-width: ${breakpoints.xl})`,\n '2xl': `@media (min-width: ${breakpoints['2xl']})`,\n}\n\n// Windows Contrast Themes and other forced-colours modes (decision 0038). The browser swaps in\n// the user's system colours, drops background colours and box-shadows, and keeps borders and\n// outlines. Inside this query, give a control that shows its edge with a fill alone a border,\n// and draw selected and checked states with system colours: ButtonText for control edges,\n// Highlight and HighlightText for selected and checked, GrayText for disabled, CanvasText for\n// content. Use forced-color-adjust: none only on a fill that carries state.\nexport const forcedColors = '@media (forced-colors: active)'\n\n/** A control's edge in forced colours, for a control that shows its edge with a fill alone. The\n * border follows the text colour the browser picks: ButtonText, LinkText, or GrayText when disabled. */\nexport const forcedColorsEdge = `${forcedColors} {\n border: ${tokens.semantic.border.width.thin} solid currentColor;\n}`\n\n// Wrap fallbacks for people who ask for less motion (decision 0005): movement becomes\n// an instant change or a simple fade. Colour and opacity transitions need no fallback.\nexport const reducedMotion = '@media (prefers-reduced-motion: reduce)'\n\n// No `from` keyframe: the fade starts from the element's current opacity, including a\n// still-running entrance, so closing mid-entrance doesn't jump back to fully visible.\nconst fadeOut = keyframes`\n to { opacity: 0; }\n`\n\n// Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of\n// the element's `animation` declarations while it exits: the entrance stays in the list,\n// so it isn't restarted, and the fade runs on top of it. A fade is already the\n// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop\n// still catches clicks (so they can't reach the page behind it) and the panel is inert.\n// Exits accelerate: things leaving speed up as they go (decision 0037).\nexport const exitAnimation = css`, ${fadeOut} ${tokens.semantic.motion.duration.fast} ${tokens.semantic.motion.easing.accelerate} forwards`\n\n// Content for screen readers only. The 1px size and -1px margin are part of the standard\n// visually-hidden technique, not design values, so they aren't tokens.\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n`\n\n// One interaction pattern for rows and items: list items, menu and listbox options, sidebars\n// (decision 0030). Unselected rows follow the naked Button's ladder; selected rows follow the\n// light-blue selected ladder, with the text darkening with its fill (decision 0016). Unselected\n// rows leave their text colour to the component, so a destructive row can stay red.\nconst { fill: rowFill, text: rowText } = tokens.semantic.color\n\nexport interface RowState {\n background: string\n text?: string\n}\n\nexport const rowStates: Record<'unselected' | 'selected', Record<'rest' | 'hover' | 'pressed', RowState>> = {\n unselected: {\n rest: { background: 'transparent' },\n hover: { background: rowFill.muted },\n pressed: { background: rowFill.default },\n },\n selected: {\n rest: { background: rowFill['accent-muted'], text: rowText.accent },\n hover: { background: rowFill['accent-muted-hover'], text: rowText['accent-hover'] },\n pressed: { background: rowFill['accent-muted-pressed'], text: rowText['accent-pressed'] },\n },\n}\n\nconst rowDeclarations = ({ background, text }: RowState, textSelector?: string) => {\n if (!text) return `background-color: ${background};`\n return textSelector\n ? `background-color: ${background};\\n ${textSelector} { color: ${text}; }`\n : `background-color: ${background};\\n color: ${text};`\n}\n\n/**\n * The background (and, when selected, text) of an interactive row in every state.\n * - `focused`: keyboard focus that isn't DOM focus, such as a listbox option under\n * aria-activedescendant. It shows the hover state.\n * - `disabled`: shows the resting state, with no hover or press.\n * - `textSelector`: a descendant to colour when the row's text isn't the row itself, for example\n * text set by Typography. Pass it without `&`.\n */\nexport const interactiveRow = ({\n selected = false,\n focused = false,\n disabled = false,\n textSelector,\n}: {\n selected?: boolean\n focused?: boolean\n disabled?: boolean\n textSelector?: string\n} = {}) => {\n const states = selected ? rowStates.selected : rowStates.unselected\n if (disabled) return `${rowDeclarations(states.rest, textSelector)}\\n${rowForcedColors({ selected, focused, disabled, textSelector })}`\n return `\n ${rowDeclarations(focused ? states.hover : states.rest, textSelector)}\n\n &:hover {\n ${rowDeclarations(states.hover, textSelector)}\n }\n\n &:active {\n ${rowDeclarations(states.pressed, textSelector)}\n }\n\n ${rowForcedColors({ selected, focused, disabled, textSelector })}\n`\n}\n\n// Rows in forced colours (decision 0038): fills are dropped, so a selected row takes the system\n// selection colours, and a hovered or keyboard-active row is outlined in Highlight.\nconst rowForcedColors = ({\n selected,\n focused,\n disabled,\n textSelector,\n}: {\n selected: boolean\n focused: boolean\n disabled: boolean\n textSelector?: string\n}) => {\n const text = (color: string) => (textSelector ? `color: ${color};\\n ${textSelector} { color: ${color}; }` : `color: ${color};`)\n const hover = `outline: ${tokens.semantic.border.width.thin} solid Highlight;\\n outline-offset: calc(-1 * ${tokens.semantic.border.width.thin});`\n // A row that doesn't respond (disabled, or not interactive at all) keeps its selection but has\n // no hover outline. Disabled text is the component's to colour: callers also pass this for\n // static rows, which must stay CanvasText.\n // A selected row keeps forced-color-adjust: auto: the browser keeps system colours an author\n // sets, so the row stays Highlight with HighlightText. Its descendants' own colours would be\n // forced to CanvasText, so they inherit HighlightText, and anything drawn with a fill inside\n // (a chip or tag as the row's badge) drops it and keeps its edge. The doubled class outranks\n // the descendants' own rules.\n return `${forcedColors} {\n ${selected ? `background-color: Highlight;\\n ${text('HighlightText')}\\n && * {\\n color: inherit;\\n background-color: transparent;\\n }` : ''}\n ${!disabled && focused ? hover : ''}\n ${disabled ? '' : `&:hover {\\n ${hover}\\n }`}\n }`\n}\n"],"names":["breakpoints","xs","tokens","semantic","breakpoint","sm","md","lg","xl","media","concat","forcedColors","forcedColorsEdge","border","width","thin","reducedMotion","fadeOut","keyframes","templateObject_1","__makeTemplateObject","exitAnimation","css","templateObject_2","motion","duration","fast","easing","accelerate","visuallyHidden","_a","color","rowFill","fill","rowText","text","rowStates","unselected","rest","background","hover","muted","pressed","selected","accent","rowDeclarations","textSelector","interactiveRow","_b","_c","_d","focused","_e","disabled","states","rowForcedColors"],"mappings":"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"}
@@ -0,0 +1,13 @@
1
+ import type { Tokens } from '../types/tokens.mjs';
2
+ type Semantic = Tokens['semantic'];
3
+ /** Box's spacing props (`p`, `m`, `gap`…): the old layout scale's keys, read from `space`. */
4
+ export declare const spaceByLayoutKey: Record<keyof Semantic['spacing']['layout'], string>;
5
+ /** Box's `borderRadius` prop: the old radius keys, read from `radius`. */
6
+ export declare const radiusByKey: Record<keyof Semantic['border']['radius'], string>;
7
+ /** Box's `bg` prop: the old background keys, read from `surface` and `color.fill`. */
8
+ export declare const backgroundByKey: Record<keyof Semantic['color']['background'], string>;
9
+ /** Box's `color` prop: text colours, old and new keys. */
10
+ export declare const textColorByKey: Record<keyof Semantic['color']['text'], string>;
11
+ /** Box's border props: border colours, old and new keys. */
12
+ export declare const borderColorByKey: Record<keyof Semantic['color']['border'], string>;
13
+ export {};
@@ -0,0 +1,121 @@
1
+ 'use client';
2
+ import tokens from './cssTokens.mjs';
3
+
4
+ // Props whose values are token keys keep their published vocabulary in 2.x (P7), but read the
5
+ // semantic grammar's names (decision 0031, #189). Each map covers every key the prop type allows,
6
+ // so TypeScript fails here if a key is added without a mapping.
7
+ var semantic = tokens.semantic;
8
+ var color = semantic.color,
9
+ space = semantic.space,
10
+ radius = semantic.radius,
11
+ surface = semantic.surface;
12
+ /** Box's spacing props (`p`, `m`, `gap`…): the old layout scale's keys, read from `space`. */
13
+ var spaceByLayoutKey = {
14
+ none: space[0],
15
+ xs: space[100],
16
+ sm: space[200],
17
+ md: space[300],
18
+ lg: space[400],
19
+ xl: space[500],
20
+ '2xl': space[600],
21
+ '3xl': space[700],
22
+ '4xl': space[800],
23
+ '5xl': space[900],
24
+ '6xl': space[1000],
25
+ '7xl': space[1200],
26
+ '8xl': space[1400],
27
+ '9xl': space[1600],
28
+ '10xl': space[2000],
29
+ '11xl': space[2400],
30
+ // A keyword, not a step: it stays until the keyword question is settled (0031)
31
+ auto: semantic.spacing.layout.auto
32
+ };
33
+ /** Box's `borderRadius` prop: the old radius keys, read from `radius`. */
34
+ var radiusByKey = {
35
+ none: radius.none,
36
+ xs: radius.xs,
37
+ sm: radius.sm,
38
+ md: radius.md,
39
+ lg: radius.lg,
40
+ xl: radius.xl,
41
+ '2xl': radius['2xl'],
42
+ '3xl': radius['3xl'],
43
+ circle: radius.full
44
+ };
45
+ /** Box's `bg` prop: the old background keys, read from `surface` and `color.fill`. */
46
+ var backgroundByKey = {
47
+ "default": surface.base,
48
+ page: surface.base,
49
+ subtle: surface.raised,
50
+ overlay: surface.scrim,
51
+ emphasis: color.fill.emphasis,
52
+ 'emphasis-hover': color.fill['emphasis-hover'],
53
+ 'emphasis-active': color.fill['emphasis-pressed'],
54
+ surface: color.fill.muted,
55
+ inverse: color.fill.inverse,
56
+ interactive: color.fill.accent,
57
+ 'interactive-hover': color.fill['accent-hover'],
58
+ 'interactive-active': color.fill['accent-pressed'],
59
+ 'interactive-subtle': color.fill['accent-muted'],
60
+ 'interactive-subtle-hover': color.fill['accent-muted-hover'],
61
+ 'interactive-subtle-active': color.fill['accent-muted-pressed'],
62
+ error: color.fill.danger,
63
+ 'error-hover': color.fill['danger-hover'],
64
+ 'error-active': color.fill['danger-pressed'],
65
+ 'error-subtle': color.fill['danger-muted'],
66
+ success: color.fill.success,
67
+ 'success-subtle': color.fill['success-muted'],
68
+ warning: color.fill.warning,
69
+ 'warning-subtle': color.fill['warning-muted'],
70
+ disabled: color.fill.disabled,
71
+ neutral: color.fill["default"],
72
+ 'neutral-hover': color.fill['default-hover'],
73
+ 'neutral-active': color.fill['default-pressed'],
74
+ transparent: color.fill.none,
75
+ 'hover-overlay': color.fill['none-hover'],
76
+ 'active-overlay': color.fill['none-pressed'],
77
+ 'inverse-overlay': color.fill['inverse-none-hover'],
78
+ // Moved to the component tier (decision 0031 §6)
79
+ progressTrack: tokens.component.track.background
80
+ };
81
+ /** Box's `color` prop: text colours, old and new keys. */
82
+ var textColorByKey = {
83
+ "default": color.text["default"],
84
+ emphasis: color.text.emphasis,
85
+ inverse: color.text.inverse,
86
+ disabled: color.text.disabled,
87
+ success: color.text.success,
88
+ warning: color.text.warning,
89
+ muted: color.text.muted,
90
+ accent: color.text.accent,
91
+ 'accent-hover': color.text['accent-hover'],
92
+ 'accent-pressed': color.text['accent-pressed'],
93
+ danger: color.text.danger,
94
+ subdued: color.text.muted,
95
+ interactive: color.text.accent,
96
+ 'interactive-hover': color.text['accent-hover'],
97
+ 'interactive-active': color.text['accent-pressed'],
98
+ error: color.text.danger
99
+ };
100
+ /** Box's border props: border colours, old and new keys. */
101
+ var borderColorByKey = {
102
+ "default": color.border["default"],
103
+ success: color.border.success,
104
+ warning: color.border.warning,
105
+ none: color.border.none,
106
+ emphasis: color.border.emphasis,
107
+ input: color.border.input,
108
+ 'input-hover': color.border['input-hover'],
109
+ focus: color.border.focus,
110
+ accent: color.border.accent,
111
+ danger: color.border.danger,
112
+ subtle: color.border.emphasis,
113
+ control: color.border.input,
114
+ // `strong` split by use (0031); as a generic firm outline it is the hovered-input border
115
+ strong: color.border['input-hover'],
116
+ interactive: color.border.accent,
117
+ error: color.border.danger
118
+ };
119
+
120
+ export { backgroundByKey, borderColorByKey, radiusByKey, spaceByLayoutKey, textColorByKey };
121
+ //# sourceMappingURL=tokenAliases.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokenAliases.mjs","sources":["../../src/lib/tokenAliases.ts"],"sourcesContent":["import tokens from './cssTokens'\nimport type { Tokens } from '../types/tokens'\n\n// Props whose values are token keys keep their published vocabulary in 2.x (P7), but read the\n// semantic grammar's names (decision 0031, #189). Each map covers every key the prop type allows,\n// so TypeScript fails here if a key is added without a mapping.\nconst { semantic } = tokens\nconst { color, space, radius, surface } = semantic\n\ntype Semantic = Tokens['semantic']\n\n/** Box's spacing props (`p`, `m`, `gap`…): the old layout scale's keys, read from `space`. */\nexport const spaceByLayoutKey: Record<keyof Semantic['spacing']['layout'], string> = {\n none: space[0],\n xs: space[100],\n sm: space[200],\n md: space[300],\n lg: space[400],\n xl: space[500],\n '2xl': space[600],\n '3xl': space[700],\n '4xl': space[800],\n '5xl': space[900],\n '6xl': space[1000],\n '7xl': space[1200],\n '8xl': space[1400],\n '9xl': space[1600],\n '10xl': space[2000],\n '11xl': space[2400],\n // A keyword, not a step: it stays until the keyword question is settled (0031)\n auto: semantic.spacing.layout.auto,\n}\n\n/** Box's `borderRadius` prop: the old radius keys, read from `radius`. */\nexport const radiusByKey: Record<keyof Semantic['border']['radius'], string> = {\n none: radius.none,\n xs: radius.xs,\n sm: radius.sm,\n md: radius.md,\n lg: radius.lg,\n xl: radius.xl,\n '2xl': radius['2xl'],\n '3xl': radius['3xl'],\n circle: radius.full,\n}\n\n/** Box's `bg` prop: the old background keys, read from `surface` and `color.fill`. */\nexport const backgroundByKey: Record<keyof Semantic['color']['background'], string> = {\n default: surface.base,\n page: surface.base,\n subtle: surface.raised,\n overlay: surface.scrim,\n emphasis: color.fill.emphasis,\n 'emphasis-hover': color.fill['emphasis-hover'],\n 'emphasis-active': color.fill['emphasis-pressed'],\n surface: color.fill.muted,\n inverse: color.fill.inverse,\n interactive: color.fill.accent,\n 'interactive-hover': color.fill['accent-hover'],\n 'interactive-active': color.fill['accent-pressed'],\n 'interactive-subtle': color.fill['accent-muted'],\n 'interactive-subtle-hover': color.fill['accent-muted-hover'],\n 'interactive-subtle-active': color.fill['accent-muted-pressed'],\n error: color.fill.danger,\n 'error-hover': color.fill['danger-hover'],\n 'error-active': color.fill['danger-pressed'],\n 'error-subtle': color.fill['danger-muted'],\n success: color.fill.success,\n 'success-subtle': color.fill['success-muted'],\n warning: color.fill.warning,\n 'warning-subtle': color.fill['warning-muted'],\n disabled: color.fill.disabled,\n neutral: color.fill.default,\n 'neutral-hover': color.fill['default-hover'],\n 'neutral-active': color.fill['default-pressed'],\n transparent: color.fill.none,\n 'hover-overlay': color.fill['none-hover'],\n 'active-overlay': color.fill['none-pressed'],\n 'inverse-overlay': color.fill['inverse-none-hover'],\n // Moved to the component tier (decision 0031 §6)\n progressTrack: tokens.component.track.background,\n}\n\n/** Box's `color` prop: text colours, old and new keys. */\nexport const textColorByKey: Record<keyof Semantic['color']['text'], string> = {\n default: color.text.default,\n emphasis: color.text.emphasis,\n inverse: color.text.inverse,\n disabled: color.text.disabled,\n success: color.text.success,\n warning: color.text.warning,\n muted: color.text.muted,\n accent: color.text.accent,\n 'accent-hover': color.text['accent-hover'],\n 'accent-pressed': color.text['accent-pressed'],\n danger: color.text.danger,\n subdued: color.text.muted,\n interactive: color.text.accent,\n 'interactive-hover': color.text['accent-hover'],\n 'interactive-active': color.text['accent-pressed'],\n error: color.text.danger,\n}\n\n/** Box's border props: border colours, old and new keys. */\nexport const borderColorByKey: Record<keyof Semantic['color']['border'], string> = {\n default: color.border.default,\n success: color.border.success,\n warning: color.border.warning,\n none: color.border.none,\n emphasis: color.border.emphasis,\n input: color.border.input,\n 'input-hover': color.border['input-hover'],\n focus: color.border.focus,\n accent: color.border.accent,\n danger: color.border.danger,\n subtle: color.border.emphasis,\n control: color.border.input,\n // `strong` split by use (0031); as a generic firm outline it is the hovered-input border\n strong: color.border['input-hover'],\n interactive: color.border.accent,\n error: color.border.danger,\n}\n"],"names":["semantic","tokens","color","space","radius","surface","spaceByLayoutKey","none","xs","sm","md","lg","xl","auto","spacing","layout","radiusByKey","circle","full","backgroundByKey","base","page","subtle","raised","overlay","scrim","emphasis","fill","muted","inverse","interactive","accent","error","danger","success","warning","disabled","neutral","transparent","progressTrack","component","track","background","textColorByKey","text","subdued","borderColorByKey","border","input","focus","control","strong"],"mappings":"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"}
@@ -0,0 +1,16 @@
1
+ import { type RefObject } from 'react';
2
+ export declare const EXIT_DURATION_MS: number;
3
+ /**
4
+ * Keeps an element mounted for `exitMs` after `isOpen` turns false, so its exit
5
+ * animation can run before it unmounts (decision 0005).
6
+ */
7
+ export declare function usePresence(isOpen: boolean, exitMs?: number): {
8
+ isPresent: boolean;
9
+ isExiting: boolean;
10
+ };
11
+ /**
12
+ * Makes an element inert while `isInert` is true, so an exiting overlay's controls leave
13
+ * the tab order and can't be activated. Set through the DOM because React 18 has no
14
+ * `inert` prop.
15
+ */
16
+ export declare function useInert(ref: RefObject<HTMLElement | null>, isInert: boolean): void;
@@ -0,0 +1,50 @@
1
+ 'use client';
2
+ import { useState, useEffect } from 'react';
3
+ import tokensJson from '../styles/tokens.json.mjs';
4
+
5
+ // How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils. A timer
6
+ // needs the resolved value, not the CSS variable (decision 0041).
7
+ var EXIT_DURATION_MS = parseInt(tokensJson.semantic.motion.duration.fast, 10);
8
+ /**
9
+ * Keeps an element mounted for `exitMs` after `isOpen` turns false, so its exit
10
+ * animation can run before it unmounts (decision 0005).
11
+ */
12
+ function usePresence(isOpen, exitMs) {
13
+ if (exitMs === void 0) {
14
+ exitMs = EXIT_DURATION_MS;
15
+ }
16
+ var _a = useState(isOpen),
17
+ isMounted = _a[0],
18
+ setIsMounted = _a[1];
19
+ useEffect(function () {
20
+ if (isOpen) {
21
+ setIsMounted(true);
22
+ return;
23
+ }
24
+ var timer = setTimeout(function () {
25
+ return setIsMounted(false);
26
+ }, exitMs);
27
+ return function () {
28
+ return clearTimeout(timer);
29
+ };
30
+ }, [isOpen, exitMs]);
31
+ return {
32
+ isPresent: isOpen || isMounted,
33
+ isExiting: !isOpen && isMounted
34
+ };
35
+ }
36
+ /**
37
+ * Makes an element inert while `isInert` is true, so an exiting overlay's controls leave
38
+ * the tab order and can't be activated. Set through the DOM because React 18 has no
39
+ * `inert` prop.
40
+ */
41
+ function useInert(ref, isInert) {
42
+ useEffect(function () {
43
+ var node = ref.current;
44
+ if (!node) return;
45
+ if (isInert) node.setAttribute('inert', '');else node.removeAttribute('inert');
46
+ }, [ref, isInert]);
47
+ }
48
+
49
+ export { EXIT_DURATION_MS, useInert, usePresence };
50
+ //# sourceMappingURL=usePresence.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"usePresence.mjs","sources":["../../src/lib/usePresence.ts"],"sourcesContent":["import { useEffect, useState, type RefObject } from 'react'\n// The exit timer needs the resolved duration, not its CSS variable (decision 0041)\n// eslint-disable-next-line no-restricted-imports\nimport tokenValues from '../styles/tokens.json'\n\n// How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils. A timer\n// needs the resolved value, not the CSS variable (decision 0041).\nexport const EXIT_DURATION_MS = parseInt(tokenValues.semantic.motion.duration.fast, 10)\n\n/**\n * Keeps an element mounted for `exitMs` after `isOpen` turns false, so its exit\n * animation can run before it unmounts (decision 0005).\n */\nexport function usePresence(isOpen: boolean, exitMs: number = EXIT_DURATION_MS) {\n const [isMounted, setIsMounted] = useState(isOpen)\n\n useEffect(() => {\n if (isOpen) {\n setIsMounted(true)\n return\n }\n const timer = setTimeout(() => setIsMounted(false), exitMs)\n return () => clearTimeout(timer)\n }, [isOpen, exitMs])\n\n return {\n isPresent: isOpen || isMounted,\n isExiting: !isOpen && isMounted,\n }\n}\n\n/**\n * Makes an element inert while `isInert` is true, so an exiting overlay's controls leave\n * the tab order and can't be activated. Set through the DOM because React 18 has no\n * `inert` prop.\n */\nexport function useInert(ref: RefObject<HTMLElement | null>, isInert: boolean) {\n useEffect(() => {\n const node = ref.current\n if (!node) return\n if (isInert) node.setAttribute('inert', '')\n else node.removeAttribute('inert')\n }, [ref, isInert])\n}\n"],"names":["EXIT_DURATION_MS","parseInt","tokenValues","semantic","motion","duration","fast","usePresence","isOpen","exitMs","_a","useState","isMounted","setIsMounted","useEffect","timer","setTimeout","clearTimeout","isPresent","isExiting","useInert","ref","isInert","node","current","setAttribute","removeAttribute"],"mappings":";;;;AAKA;AACA;IACaA,gBAAgB,GAAGC,QAAQ,CAACC,UAAW,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,IAAI,EAAE,EAAE,EAAC;AAEvF;;;AAGG;AACa,SAAAC,WAAWA,CAACC,MAAe,EAAEC,MAAiC,EAAA;AAAjC,EAAA,IAAAA,MAAA,KAAA,KAAA,CAAA,EAAA;AAAAA,IAAAA,MAAiC,GAAAT,gBAAA,CAAA;AAAA,GAAA;AACtE,EAAA,IAAAU,EAAA,GAA4BC,QAAQ,CAACH,MAAM,CAAC;AAA3CI,IAAAA,SAAS,GAAAF,EAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,YAAY,GAAAH,EAAA,CAAA,CAAA,CAAoB,CAAA;AAElDI,EAAAA,SAAS,CAAC,YAAA;AACR,IAAA,IAAIN,MAAM,EAAE;MACVK,YAAY,CAAC,IAAI,CAAC,CAAA;AAClB,MAAA,OAAA;AACF,KAAA;AACA,IAAA,IAAME,KAAK,GAAGC,UAAU,CAAC;MAAM,OAAAH,YAAY,CAAC,KAAK,CAAC,CAAA;KAAA,EAAEJ,MAAM,CAAC,CAAA;AAC3D,IAAA,OAAO,YAAA;MAAM,OAAAQ,YAAY,CAACF,KAAK,CAAC,CAAA;KAAA,CAAA;AAClC,GAAC,EAAE,CAACP,MAAM,EAAEC,MAAM,CAAC,CAAC,CAAA;EAEpB,OAAO;IACLS,SAAS,EAAEV,MAAM,IAAII,SAAS;IAC9BO,SAAS,EAAE,CAACX,MAAM,IAAII,SAAAA;GACvB,CAAA;AACH,CAAA;AAEA;;;;AAIG;AACa,SAAAQ,QAAQA,CAACC,GAAkC,EAAEC,OAAgB,EAAA;AAC3ER,EAAAA,SAAS,CAAC,YAAA;AACR,IAAA,IAAMS,IAAI,GAAGF,GAAG,CAACG,OAAO,CAAA;IACxB,IAAI,CAACD,IAAI,EAAE,OAAA;AACX,IAAA,IAAID,OAAO,EAAEC,IAAI,CAACE,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA,KACtCF,IAAI,CAACG,eAAe,CAAC,OAAO,CAAC,CAAA;AACpC,GAAC,EAAE,CAACL,GAAG,EAAEC,OAAO,CAAC,CAAC,CAAA;AACpB;;;;"}