@keboola/design 13.2.0 → 15.0.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 (321) hide show
  1. package/AGENTS.md +16 -24
  2. package/CHANGELOG.md +194 -0
  3. package/COMPONENT-API.md +109 -105
  4. package/dist/{AIKit-C5FbKjwa.js → AIKit-CaAW4GLx.js} +2216 -307
  5. package/dist/AIKit-CaAW4GLx.js.map +1 -0
  6. package/dist/{Alert-DuAGeYyM.js → Alert-Chz6KZ7e.js} +11 -20
  7. package/dist/Alert-Chz6KZ7e.js.map +1 -0
  8. package/dist/{AlertModal-BDle9ZVQ.js → AlertModal-D4AtpvLS.js} +15 -35
  9. package/dist/AlertModal-D4AtpvLS.js.map +1 -0
  10. package/dist/{AppShell-B03fj1j7.js → AppShell-C8V1KRr_.js} +2 -2
  11. package/dist/{AppShell-B03fj1j7.js.map → AppShell-C8V1KRr_.js.map} +1 -1
  12. package/dist/{AutoSaveTextarea-jiqNeeE4.js → AutoSaveTextarea-BbMhC5Aq.js} +3 -3
  13. package/dist/AutoSaveTextarea-BbMhC5Aq.js.map +1 -0
  14. package/dist/{Badge-Ba3epgcI.js → Badge-5GHIsgRS.js} +14 -3
  15. package/dist/Badge-5GHIsgRS.js.map +1 -0
  16. package/dist/{BrandEditor-Dq168RJc.js → BrandEditor-CTGtQUFZ.js} +8 -10
  17. package/dist/BrandEditor-CTGtQUFZ.js.map +1 -0
  18. package/dist/{BrandLogo-BfITD0im.js → BrandLogo-DkESE19K.js} +2 -2
  19. package/dist/{BrandLogo-BfITD0im.js.map → BrandLogo-DkESE19K.js.map} +1 -1
  20. package/dist/{Breadcrumb-CUyYu5Bi.js → Breadcrumb-B2YSNON4.js} +55 -13
  21. package/dist/Breadcrumb-B2YSNON4.js.map +1 -0
  22. package/dist/{Button-D2JqBAq7.js → Button-BNkyYU8u.js} +9 -185
  23. package/dist/Button-BNkyYU8u.js.map +1 -0
  24. package/dist/{Card-Bpc_ZlL4.js → Card-DxjGiqH8.js} +11 -18
  25. package/dist/Card-DxjGiqH8.js.map +1 -0
  26. package/dist/{Checkbox-D9rafoKh.js → Checkbox-CHDDJyAA.js} +20 -45
  27. package/dist/Checkbox-CHDDJyAA.js.map +1 -0
  28. package/dist/{Clipboard-BHWUodAx.js → Clipboard-DlwVZS1P.js} +2 -2
  29. package/dist/{Clipboard-BHWUodAx.js.map → Clipboard-DlwVZS1P.js.map} +1 -1
  30. package/dist/{ClipboardButton-Urg-kZbh.js → ClipboardButton-B1Hr_n_Z.js} +3 -3
  31. package/dist/{ClipboardButton-Urg-kZbh.js.map → ClipboardButton-B1Hr_n_Z.js.map} +1 -1
  32. package/dist/{CodeEditor-Y0iE-SwV.js → CodeEditor-DVSPdfdo.js} +24 -31
  33. package/dist/CodeEditor-DVSPdfdo.js.map +1 -0
  34. package/dist/{ColorInput-D1nC0X6i.js → ColorInput-B_eZIu39.js} +5 -7
  35. package/dist/ColorInput-B_eZIu39.js.map +1 -0
  36. package/dist/{ColorModeSwitch-Cxee8jnB.js → ColorModeSwitch-B6UEzG0H.js} +3 -3
  37. package/dist/{ColorModeSwitch-Cxee8jnB.js.map → ColorModeSwitch-B6UEzG0H.js.map} +1 -1
  38. package/dist/{Combobox-B1Kjoy5J.js → Combobox-CaKqgstG.js} +250 -56
  39. package/dist/Combobox-CaKqgstG.js.map +1 -0
  40. package/dist/{Command-BuOA3V18.js → Command-DhXmqFLT.js} +51 -33
  41. package/dist/Command-DhXmqFLT.js.map +1 -0
  42. package/dist/{CopyField-DsOVtV2Q.js → CopyField-D0Pg4Z0R.js} +2 -2
  43. package/dist/{CopyField-DsOVtV2Q.js.map → CopyField-D0Pg4Z0R.js.map} +1 -1
  44. package/dist/{DateInput-BlKkequE.js → DateInput-BgbMDJkm.js} +5 -7
  45. package/dist/DateInput-BgbMDJkm.js.map +1 -0
  46. package/dist/{DatePicker-CgHAu9KX.js → DatePicker-BXpDRo-R.js} +2 -2
  47. package/dist/{DatePicker-CgHAu9KX.js.map → DatePicker-BXpDRo-R.js.map} +1 -1
  48. package/dist/{DateRangeInput-DOxJHw8V.js → DateRangeInput-BW0-_jV0.js} +5 -7
  49. package/dist/DateRangeInput-BW0-_jV0.js.map +1 -0
  50. package/dist/{DateRangePicker-CXpXPMoh.js → DateRangePicker-C4-DoWac.js} +7 -12
  51. package/dist/DateRangePicker-C4-DoWac.js.map +1 -0
  52. package/dist/{DropdownMenu-DtRYcKEx.js → DropdownMenu-CcVbZ_5u.js} +35 -64
  53. package/dist/DropdownMenu-CcVbZ_5u.js.map +1 -0
  54. package/dist/{FieldItem-Cf1E3rfQ.js → FieldItem-BHUqgSO1.js} +3 -3
  55. package/dist/{FieldItem-Cf1E3rfQ.js.map → FieldItem-BHUqgSO1.js.map} +1 -1
  56. package/dist/{FileUpload-D6vPG3WB.js → FileUpload-BYFONpEl.js} +3 -3
  57. package/dist/FileUpload-BYFONpEl.js.map +1 -0
  58. package/dist/{Form-CuaAn-lR.js → Form-CAofWyMI.js} +8 -8
  59. package/dist/{Form-CuaAn-lR.js.map → Form-CAofWyMI.js.map} +1 -1
  60. package/dist/{FormGroup-D4O96YPm.js → FormGroup-V5kIgQRN.js} +3 -3
  61. package/dist/{FormGroup-D4O96YPm.js.map → FormGroup-V5kIgQRN.js.map} +1 -1
  62. package/dist/{FullScreenModal-CUuAakh3.js → FullScreenModal-DAvvlGOz.js} +2 -5
  63. package/dist/FullScreenModal-DAvvlGOz.js.map +1 -0
  64. package/dist/HoverCard-Cv5rmvJq.js +26 -0
  65. package/dist/HoverCard-Cv5rmvJq.js.map +1 -0
  66. package/dist/{InlineEdit-DSMIEUUa.js → InlineEdit-D4P0SvCB.js} +5 -9
  67. package/dist/InlineEdit-D4P0SvCB.js.map +1 -0
  68. package/dist/{InputGroup-Dm014ruw.js → InputGroup-CZv_7QlM.js} +39 -146
  69. package/dist/InputGroup-CZv_7QlM.js.map +1 -0
  70. package/dist/{Kbd-Du93F3o4.js → Kbd-CflKthfu.js} +5 -14
  71. package/dist/Kbd-CflKthfu.js.map +1 -0
  72. package/dist/MermaidDiagram-Te-5gOCU.js +199 -0
  73. package/dist/MermaidDiagram-Te-5gOCU.js.map +1 -0
  74. package/dist/{Modal-DQIauzar.js → Modal-CbUz-5YH.js} +19 -37
  75. package/dist/Modal-CbUz-5YH.js.map +1 -0
  76. package/dist/{ModalTitle-CTECVgL8.js → ModalTitle-cy0Ht9VY.js} +2 -2
  77. package/dist/{ModalTitle-CTECVgL8.js.map → ModalTitle-cy0Ht9VY.js.map} +1 -1
  78. package/dist/{MultiActionButtonGroup-xKqiucAN.js → MultiActionButtonGroup-Dzig87s1.js} +3 -3
  79. package/dist/{MultiActionButtonGroup-xKqiucAN.js.map → MultiActionButtonGroup-Dzig87s1.js.map} +1 -1
  80. package/dist/{Navbar-CtVYcRFn.js → Navbar-DHUS7XiU.js} +2 -2
  81. package/dist/{Navbar-CtVYcRFn.js.map → Navbar-DHUS7XiU.js.map} +1 -1
  82. package/dist/OtpInput-CY8yCaJk.js.map +1 -1
  83. package/dist/{PageToolbar-B_e7HGva.js → PageToolbar-DJ5tdYla.js} +4 -4
  84. package/dist/{PageToolbar-B_e7HGva.js.map → PageToolbar-DJ5tdYla.js.map} +1 -1
  85. package/dist/{Pagination-DDp6PRqf.js → Pagination-D27x5KmH.js} +2 -2
  86. package/dist/{Pagination-DDp6PRqf.js.map → Pagination-D27x5KmH.js.map} +1 -1
  87. package/dist/{Popconfirm-BgV6a0sl.js → Popconfirm-DwLCYNaF.js} +3 -3
  88. package/dist/{Popconfirm-BgV6a0sl.js.map → Popconfirm-DwLCYNaF.js.map} +1 -1
  89. package/dist/{Popover-BU7nGOv-.js → Popover-DtUDwUVO.js} +24 -37
  90. package/dist/Popover-DtUDwUVO.js.map +1 -0
  91. package/dist/{RadioGroup-C2vk5acr.js → RadioGroup-B0TwHjBb.js} +9 -13
  92. package/dist/RadioGroup-B0TwHjBb.js.map +1 -0
  93. package/dist/{Search-CVrv3hqf.js → Search-vyZwGKMU.js} +3 -3
  94. package/dist/{Search-CVrv3hqf.js.map → Search-vyZwGKMU.js.map} +1 -1
  95. package/dist/{SearchInput-BnU6YHgT.js → SearchInput-DyYXyw3u.js} +4 -6
  96. package/dist/SearchInput-DyYXyw3u.js.map +1 -0
  97. package/dist/{SectionNav-XlhvXXdF.js → SectionNav-tLK3iF6c.js} +5 -5
  98. package/dist/{SectionNav-XlhvXXdF.js.map → SectionNav-tLK3iF6c.js.map} +1 -1
  99. package/dist/{Select-CjQgU_6K.js → Select-B22hB_-w.js} +11 -25
  100. package/dist/Select-B22hB_-w.js.map +1 -0
  101. package/dist/{Sheet-utw4_rUa.js → Sheet-0TWKTqid.js} +12 -15
  102. package/dist/Sheet-0TWKTqid.js.map +1 -0
  103. package/dist/{Sidebar-CKaxOPwY.js → Sidebar-C5hdANBU.js} +11 -11
  104. package/dist/Sidebar-C5hdANBU.js.map +1 -0
  105. package/dist/{Slider-Rcc2qVct.js → Slider-DrcsM8_G.js} +4 -4
  106. package/dist/Slider-DrcsM8_G.js.map +1 -0
  107. package/dist/{Stepper-BBPembeK.js → Stepper-CQrUPVFL.js} +2 -2
  108. package/dist/Stepper-CQrUPVFL.js.map +1 -0
  109. package/dist/Switch-DccpSpzC.js +66 -0
  110. package/dist/Switch-DccpSpzC.js.map +1 -0
  111. package/dist/{Table-CgSC-fSo.js → Table-CilEvpMq.js} +62 -3
  112. package/dist/Table-CilEvpMq.js.map +1 -0
  113. package/dist/{Tabs-C0uvkPHc.js → Tabs-Ck4uWf8U.js} +2 -2
  114. package/dist/{Tabs-C0uvkPHc.js.map → Tabs-Ck4uWf8U.js.map} +1 -1
  115. package/dist/{TextInput-B5TDDOty.js → TextInput-CR0_USaY.js} +4 -7
  116. package/dist/TextInput-CR0_USaY.js.map +1 -0
  117. package/dist/{ThemeProvider-Dt9b67sW.js → ThemeProvider-BTK7AL-T.js} +21 -8
  118. package/dist/ThemeProvider-BTK7AL-T.js.map +1 -0
  119. package/dist/{TimePicker-DyyV3nw8.js → TimePicker-CoRpiEM3.js} +2 -2
  120. package/dist/{TimePicker-DyyV3nw8.js.map → TimePicker-CoRpiEM3.js.map} +1 -1
  121. package/dist/{Toast-BGnUL4jV.js → Toast-937n7n8i.js} +2 -2
  122. package/dist/{Toast-BGnUL4jV.js.map → Toast-937n7n8i.js.map} +1 -1
  123. package/dist/ToggleAllTooltip-DEjbWFoj.js +37 -0
  124. package/dist/ToggleAllTooltip-DEjbWFoj.js.map +1 -0
  125. package/dist/{ZoomableSvg-D8sXKpoV.js → ZoomableSvg-DnFXo2L4.js} +85 -81
  126. package/dist/ZoomableSvg-DnFXo2L4.js.map +1 -0
  127. package/dist/editors.js +4 -4
  128. package/dist/flint.js +10 -45
  129. package/dist/flint.js.map +1 -1
  130. package/dist/highlightCode-D354tCXO.js +81 -0
  131. package/dist/highlightCode-D354tCXO.js.map +1 -0
  132. package/dist/index.d.ts +843 -443
  133. package/dist/index.js +62 -63
  134. package/dist/internal/blocks/AIKit.js +2 -2
  135. package/dist/internal/blocks/AppShell.js +1 -1
  136. package/dist/internal/blocks/AuthLayout.js +1 -1
  137. package/dist/internal/blocks/AutoSaveTextarea.js +1 -1
  138. package/dist/internal/blocks/BrandEditor.js +1 -1
  139. package/dist/internal/blocks/ChartPanel.js +1 -1
  140. package/dist/internal/blocks/ChipEditor.js +5 -9
  141. package/dist/internal/blocks/ChipEditor.js.map +1 -1
  142. package/dist/internal/blocks/ClipboardButton.js +1 -1
  143. package/dist/internal/blocks/ColorInput.js +1 -1
  144. package/dist/internal/blocks/ColorModeSwitch.js +1 -1
  145. package/dist/internal/blocks/Command.js +1 -1
  146. package/dist/internal/blocks/CopyField.js +1 -1
  147. package/dist/internal/blocks/DateInput.js +1 -1
  148. package/dist/internal/blocks/DateRangeInput.js +1 -1
  149. package/dist/internal/blocks/DiagramShared/DiagramSkeleton.js.map +1 -1
  150. package/dist/internal/blocks/EmptyConfigurationActionCard.js +1 -1
  151. package/dist/internal/blocks/ErrorState.js +18 -29
  152. package/dist/internal/blocks/ErrorState.js.map +1 -1
  153. package/dist/internal/blocks/ExportMenu.js +3 -3
  154. package/dist/internal/blocks/ExportMenu.js.map +1 -1
  155. package/dist/internal/blocks/Form/connectors/ComboboxField.js +2 -2
  156. package/dist/internal/blocks/Form/connectors/MultiComboboxField.js +1 -1
  157. package/dist/internal/blocks/Form.js +1 -1
  158. package/dist/internal/blocks/FormGroup.js +1 -1
  159. package/dist/internal/blocks/InlineEdit.js +1 -1
  160. package/dist/internal/blocks/MultiActionButtonGroup.js +1 -1
  161. package/dist/internal/blocks/MultiCombobox.js +202 -70
  162. package/dist/internal/blocks/MultiCombobox.js.map +1 -1
  163. package/dist/internal/blocks/NumberInput.js +2 -4
  164. package/dist/internal/blocks/NumberInput.js.map +1 -1
  165. package/dist/internal/blocks/PageToolbar.js +1 -1
  166. package/dist/internal/blocks/PasswordInput.js +3 -5
  167. package/dist/internal/blocks/PasswordInput.js.map +1 -1
  168. package/dist/internal/blocks/SearchInput.js +1 -1
  169. package/dist/internal/blocks/SearchInputWithNavigation.js +6 -7
  170. package/dist/internal/blocks/SearchInputWithNavigation.js.map +1 -1
  171. package/dist/internal/blocks/SectionNav.js +1 -1
  172. package/dist/internal/blocks/SplitButton.js +2 -2
  173. package/dist/internal/blocks/StatCard.js +1 -1
  174. package/dist/internal/blocks/TextInput.js +1 -1
  175. package/dist/internal/blocks/Textarea.js +3 -8
  176. package/dist/internal/blocks/Textarea.js.map +1 -1
  177. package/dist/internal/blocks/TimeInput.js +4 -6
  178. package/dist/internal/blocks/TimeInput.js.map +1 -1
  179. package/dist/internal/components/Alert.js +1 -1
  180. package/dist/internal/components/AlertModal.js +1 -1
  181. package/dist/internal/components/Avatar.js +1 -1
  182. package/dist/internal/components/Badge.js +1 -1
  183. package/dist/internal/components/BrandLogo.js +1 -1
  184. package/dist/internal/components/Breadcrumb.js +1 -1
  185. package/dist/internal/components/Button.js +2 -2
  186. package/dist/internal/components/ButtonGroup.js +1 -1
  187. package/dist/internal/components/ButtonGroup.js.map +1 -1
  188. package/dist/internal/components/Card.js +1 -1
  189. package/dist/internal/components/Checkbox.js +1 -1
  190. package/dist/internal/components/Clipboard.js +1 -1
  191. package/dist/internal/components/CollapsiblePanel.js +1 -1
  192. package/dist/internal/components/Combobox.js +1 -1
  193. package/dist/internal/components/DatePicker.js +1 -1
  194. package/dist/internal/components/DateRangePicker.js +1 -1
  195. package/dist/internal/components/DropdownMenu.js +1 -1
  196. package/dist/internal/components/FileUpload.js +1 -1
  197. package/dist/internal/components/FullScreenModal.js +1 -1
  198. package/dist/internal/components/HoverCard.js +1 -1
  199. package/dist/internal/components/InputGroup.js +1 -1
  200. package/dist/internal/components/Kbd.js +1 -1
  201. package/dist/internal/components/Modal.js +1 -1
  202. package/dist/internal/components/Navbar.js +1 -1
  203. package/dist/internal/components/Pagination.js +1 -1
  204. package/dist/internal/components/Popconfirm.js +1 -1
  205. package/dist/internal/components/Popover.js +1 -1
  206. package/dist/internal/components/RadioGroup.js +1 -1
  207. package/dist/internal/components/Search.js +1 -1
  208. package/dist/internal/components/Select.js +1 -1
  209. package/dist/internal/components/Sheet.js +1 -1
  210. package/dist/internal/components/Sidebar.js +1 -1
  211. package/dist/internal/components/Skeleton/Skeleton.js +2 -2
  212. package/dist/internal/components/Skeleton/Skeleton.js.map +1 -1
  213. package/dist/internal/components/Slider.js +1 -1
  214. package/dist/internal/components/Stepper.js +1 -1
  215. package/dist/internal/components/Switch.js +1 -1
  216. package/dist/internal/components/Table.js +1 -1
  217. package/dist/internal/components/Tabs.js +1 -1
  218. package/dist/internal/components/ThemeProvider.js +3 -4
  219. package/dist/internal/components/TimePicker.js +1 -1
  220. package/dist/internal/components/Toast.js +2 -2
  221. package/dist/internal/components/Toggle.js +13 -3
  222. package/dist/internal/components/Toggle.js.map +1 -1
  223. package/dist/internal/components/Tooltip.js +1 -1
  224. package/dist/internal/components/Truncated.js +1 -1
  225. package/dist/internal/components/ZoomableSvg.js +1 -1
  226. package/dist/internal/utils.js +1 -1
  227. package/dist/markdown-editor.js +16 -18
  228. package/dist/markdown-editor.js.map +1 -1
  229. package/dist/mermaid.d.ts +1 -2
  230. package/dist/mermaid.js +1 -1
  231. package/dist/rjsf.js +121 -43
  232. package/dist/rjsf.js.map +1 -1
  233. package/dist/styles-DxazJ8Mz.js +81 -0
  234. package/dist/styles-DxazJ8Mz.js.map +1 -0
  235. package/dist/styles-T8xwr0sR.js +73 -0
  236. package/dist/styles-T8xwr0sR.js.map +1 -0
  237. package/dist/styles.css +1 -1
  238. package/dist/svgCache-Dhmbe-7i.js +26 -0
  239. package/dist/svgCache-Dhmbe-7i.js.map +1 -0
  240. package/dist/svgTransforms-Hnvev3Vs.js +38 -0
  241. package/dist/svgTransforms-Hnvev3Vs.js.map +1 -0
  242. package/dist/testing.d.ts +0 -2
  243. package/dist/testing.js +3 -10
  244. package/dist/testing.js.map +1 -1
  245. package/dist/{useColorSchemeState-Cw4MCXUs.js → themeScopeContext-CEVXbYvZ.js} +43 -15
  246. package/dist/themeScopeContext-CEVXbYvZ.js.map +1 -0
  247. package/dist/{useThemeAttributes-B199Regy.js → themeTokens-DCeb62ap.js} +22 -4
  248. package/dist/themeTokens-DCeb62ap.js.map +1 -0
  249. package/dist/{toast-D6Z6MOB5.js → toast-Y3cTMBW8.js} +7 -10
  250. package/dist/toast-Y3cTMBW8.js.map +1 -0
  251. package/dist/{utils-p6tjltbX.js → utils-DwC9u0tM.js} +39 -49
  252. package/dist/utils-DwC9u0tM.js.map +1 -0
  253. package/dist/vega.js +2 -2
  254. package/dist/vegaTheme-ISwGXvof.js +49 -0
  255. package/dist/vegaTheme-ISwGXvof.js.map +1 -0
  256. package/dist/{vegaTheme-VQMWTlBw.js → vegaTokens-DCkvpIVE.js} +36 -44
  257. package/dist/vegaTokens-DCkvpIVE.js.map +1 -0
  258. package/package.json +3 -4
  259. package/src/styles.css +4 -39
  260. package/src/theme.css +42 -0
  261. package/dist/AIKit-C5FbKjwa.js.map +0 -1
  262. package/dist/Alert-DuAGeYyM.js.map +0 -1
  263. package/dist/AlertModal-BDle9ZVQ.js.map +0 -1
  264. package/dist/AutoSaveTextarea-jiqNeeE4.js.map +0 -1
  265. package/dist/Badge-Ba3epgcI.js.map +0 -1
  266. package/dist/BrandEditor-Dq168RJc.js.map +0 -1
  267. package/dist/Breadcrumb-CUyYu5Bi.js.map +0 -1
  268. package/dist/Button-D2JqBAq7.js.map +0 -1
  269. package/dist/Card-Bpc_ZlL4.js.map +0 -1
  270. package/dist/Checkbox-D9rafoKh.js.map +0 -1
  271. package/dist/CodeEditor-Y0iE-SwV.js.map +0 -1
  272. package/dist/ColorInput-D1nC0X6i.js.map +0 -1
  273. package/dist/Combobox-B1Kjoy5J.js.map +0 -1
  274. package/dist/Command-BuOA3V18.js.map +0 -1
  275. package/dist/DateInput-BlKkequE.js.map +0 -1
  276. package/dist/DateRangeInput-DOxJHw8V.js.map +0 -1
  277. package/dist/DateRangePicker-CXpXPMoh.js.map +0 -1
  278. package/dist/DiagramSource-jTwmmi9g.js +0 -11
  279. package/dist/DiagramSource-jTwmmi9g.js.map +0 -1
  280. package/dist/DropdownMenu-DtRYcKEx.js.map +0 -1
  281. package/dist/FileUpload-D6vPG3WB.js.map +0 -1
  282. package/dist/FullScreenModal-CUuAakh3.js.map +0 -1
  283. package/dist/HoverCard-Cy6nhg4u.js +0 -31
  284. package/dist/HoverCard-Cy6nhg4u.js.map +0 -1
  285. package/dist/InlineEdit-DSMIEUUa.js.map +0 -1
  286. package/dist/InputGroup-Dm014ruw.js.map +0 -1
  287. package/dist/Kbd-Du93F3o4.js.map +0 -1
  288. package/dist/MermaidDiagram-D2ThT8Q-.js +0 -302
  289. package/dist/MermaidDiagram-D2ThT8Q-.js.map +0 -1
  290. package/dist/Modal-DQIauzar.js.map +0 -1
  291. package/dist/Popover-BU7nGOv-.js.map +0 -1
  292. package/dist/RadioGroup-C2vk5acr.js.map +0 -1
  293. package/dist/SearchInput-BnU6YHgT.js.map +0 -1
  294. package/dist/Select-CjQgU_6K.js.map +0 -1
  295. package/dist/Sheet-utw4_rUa.js.map +0 -1
  296. package/dist/Sidebar-CKaxOPwY.js.map +0 -1
  297. package/dist/Slider-Rcc2qVct.js.map +0 -1
  298. package/dist/Stepper-BBPembeK.js.map +0 -1
  299. package/dist/Switch-Dw4tvQls.js +0 -201
  300. package/dist/Switch-Dw4tvQls.js.map +0 -1
  301. package/dist/Table-CgSC-fSo.js.map +0 -1
  302. package/dist/TextInput-B5TDDOty.js.map +0 -1
  303. package/dist/ThemeProvider-Dt9b67sW.js.map +0 -1
  304. package/dist/ZoomableSvg-D8sXKpoV.js.map +0 -1
  305. package/dist/context-U293r3v-.js +0 -29
  306. package/dist/context-U293r3v-.js.map +0 -1
  307. package/dist/defaults-i_xG2F_1.js +0 -32
  308. package/dist/defaults-i_xG2F_1.js.map +0 -1
  309. package/dist/styles-BDA5rQz3.js +0 -127
  310. package/dist/styles-BDA5rQz3.js.map +0 -1
  311. package/dist/styles-YQdM7G8c.js +0 -159
  312. package/dist/styles-YQdM7G8c.js.map +0 -1
  313. package/dist/svgTransforms-Dw2hRA-i.js +0 -51
  314. package/dist/svgTransforms-Dw2hRA-i.js.map +0 -1
  315. package/dist/themeTokens-7DEab0kp.js +0 -31
  316. package/dist/themeTokens-7DEab0kp.js.map +0 -1
  317. package/dist/toast-D6Z6MOB5.js.map +0 -1
  318. package/dist/useColorSchemeState-Cw4MCXUs.js.map +0 -1
  319. package/dist/useThemeAttributes-B199Regy.js.map +0 -1
  320. package/dist/utils-p6tjltbX.js.map +0 -1
  321. package/dist/vegaTheme-VQMWTlBw.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"InlineEdit-DSMIEUUa.js","names":[],"sources":["../src/blocks/InlineEdit/InlineEdit.tsx"],"sourcesContent":["import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\nimport type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Kbd, keys } from '../../components/Kbd';\nimport { ArgoDesignContext } from '../../components/ThemeProvider/context';\nimport { Tooltip } from '../../components/Tooltip';\nimport { useAutosizeInput } from '../../hooks/useAutosizeInput';\nimport { Check, Loader2, X } from '../../icons';\nimport { cn } from '../../utils';\n\n/** A sized `fill` row at least this wide shows Save / Cancel as text; a narrower one as icons. */\nconst LABELLED_BUTTONS_MIN_WIDTH = 480;\n/** Below this a `multiline` field keeps the row and Save / Cancel move under it. */\nconst INLINE_BUTTONS_MIN_WIDTH = 320;\n/** How long the field and the buttons take to open and close. */\nconst EXPAND_MS = 200;\n\ntype Size = 'auto' | 'sm' | 'md' | 'lg' | 'title';\n\n/**\n * Box and button height per size; the font is always the surrounding one.\n *\n * - Buttons take the box's height, not the brand's own button height, so the row lines up.\n * - The box overhangs its line by the same amount it pads it, so the line box never changes.\n * - `auto` scales the icon buttons with the text instead of picking a fixed height.\n */\n// Class names are spelled out in full: Tailwind only generates the ones it can read here.\nconst SIZES = {\n auto: { box: 'tw:py-px tw:-my-[2px]', icon: 'icon-xs', label: 'medium', fit: '', iconFit: '' },\n sm: {\n box: 'tw:py-[max(1px,calc((1.5rem-1lh)/2-1px))] tw:-my-[max(2px,calc((1.5rem-1lh)/2))]',\n icon: 'icon-xs',\n label: 'small',\n fit: 'tw:h-6 tw:min-h-6 tw:max-h-6',\n iconFit: 'tw:size-6',\n },\n md: {\n box: 'tw:py-[max(1px,calc((2rem-1lh)/2-1px))] tw:-my-[max(2px,calc((2rem-1lh)/2))]',\n icon: 'icon-sm',\n label: 'small',\n fit: 'tw:h-8 tw:min-h-8 tw:max-h-8',\n iconFit: 'tw:size-8',\n },\n lg: {\n box: 'tw:py-[max(1px,calc((2.5rem-1lh)/2-1px))] tw:-my-[max(2px,calc((2.5rem-1lh)/2))]',\n icon: 'icon',\n label: 'medium',\n fit: 'tw:h-10 tw:min-h-10 tw:max-h-10',\n iconFit: 'tw:size-10',\n },\n title: {\n box: 'tw:py-[max(1px,calc((2.5rem-1lh)/2-1px))] tw:-my-[max(2px,calc((2.5rem-1lh)/2))]',\n icon: 'icon',\n label: 'medium',\n fit: 'tw:h-10 tw:min-h-10 tw:max-h-10',\n iconFit: 'tw:size-10',\n },\n} as const satisfies Record<\n Size,\n { box: string; icon: string; label: string; fit: string; iconFit: string }\n>;\n\n// One box in view and edit; only its colours change, so nothing moves and the change can animate.\n// - 1px border + 5px padding = the 6px the box shifts left, so the text stays where it was.\n// - A shift, not a negative margin: that would shrink the width a fit-content parent gives it.\n// - `leading-[inherit]` beats the 1.5 a Tooltip trigger's scoped preflight would set.\nconst BOX_CLASS = cn(\n 'tw:relative tw:-left-1.5 tw:rounded-md tw:border tw:px-[5px] tw:leading-[inherit]',\n 'tw:transition-[border-color,background-color,box-shadow] tw:duration-150 tw:ease-out',\n);\n\nconst VIEW_BOX_CLASS = cn(\n 'tw:border-transparent',\n 'tw:hover:border-input tw:hover:bg-muted-foreground/10',\n 'tw:has-[:focus-visible]:border-input tw:has-[:focus-visible]:bg-muted-foreground/10',\n);\n\n// The field takes the surrounding typography instead of the browser's form-control defaults.\nconst FIELD_CLASS = cn(\n 'tw:m-0 tw:block tw:border-0 tw:bg-transparent tw:p-0 tw:outline-hidden',\n 'tw:[font:inherit] tw:[letter-spacing:inherit] tw:[color:inherit]',\n 'tw:placeholder:text-muted-foreground',\n);\n\n// `auto` icon buttons scale with the text: 24px beside body copy, ~33px beside a page title.\nconst AUTO_ICON_BUTTON_CLASS = 'tw:size-[max(1.5rem,1.1em)] tw:text-[length:inherit]';\n\nconst ShortcutLabel = ({ label, shortcut }: { label: string; shortcut: string }) => (\n <span className=\"tw:inline-flex tw:items-center tw:gap-2\">\n {label}\n <Kbd variant=\"primary\">{shortcut}</Kbd>\n </span>\n);\n\n// Keeps focus in the field, so pressing a button never blurs it into an early save first.\nconst keepFieldFocus = (event: MouseEvent) => event.preventDefault();\n\ntype Props = {\n /** The text shown, and the draft while editing. */\n value: string;\n onChange: (value: string) => void;\n /** Enter, Save, or a blur with a valid change. */\n onSubmit: () => void;\n /** Escape, Cancel, or leaving the field with nothing changed. */\n onCancel: () => void;\n isEditing: boolean;\n /** Opens the editor from view mode; omit when the caller opens it some other way. */\n onEditStart?: () => void;\n /** Whether `value` differs from the saved value; nothing to save while false. */\n isChanged: boolean;\n /** A save is in flight: buttons and keys are held until it settles. */\n isSaving?: boolean;\n /** Why the draft can't be saved; disables Save and becomes its tooltip. */\n invalidReason?: string | null;\n /** Renders the value as plain text. */\n readOnly?: boolean;\n /** Fills the row while editing (default); `false` keeps the field as wide as its text. */\n fill?: boolean;\n /** Long text wraps and the field grows a line at a time; without it the field stays one line. */\n multiline?: boolean;\n /** Box height and buttons: sm 24, md 32, lg and title 40px, or `auto` to follow the text. */\n size?: Size;\n /** One line with an ellipsis in view mode; otherwise up to two lines. */\n truncate?: boolean;\n placeholder?: string;\n /** Tooltip on the value in view mode. */\n editTooltip?: ReactNode;\n tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n maxLength?: number;\n /** Accessible name of the field; defaults to `placeholder`. */\n 'aria-label'?: string;\n className?: string;\n};\n\n/**\n * Click-to-edit text: a page title, an entity name, a short label in a row.\n *\n * - The caller owns the draft and the editing flag, so it can validate, save and fail on its own terms.\n * - Enter saves a change and closes an unchanged edit; Escape cancels.\n * - Not for multi-paragraph or markdown text: use `MarkdownEditor`.\n */\nexport const InlineEdit = ({\n value,\n onChange,\n onSubmit,\n onCancel,\n isEditing,\n onEditStart,\n isChanged,\n isSaving = false,\n invalidReason = null,\n readOnly = false,\n fill = true,\n multiline = false,\n size = 'auto',\n truncate = false,\n placeholder = 'Click to edit',\n editTooltip = 'Click to edit',\n tooltipPlacement = 'top',\n maxLength,\n 'aria-label': ariaLabel,\n className,\n}: Props) => {\n const formRef = useRef<HTMLFormElement>(null);\n const viewButtonRef = useRef<HTMLButtonElement>(null);\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const wasEditingRef = useRef(isEditing);\n const reasonId = useId();\n const { inputRef, inputStyle, sizerElement } = useAutosizeInput({ value, placeholder });\n const [rowWidth, setRowWidth] = useState(0);\n const boxRef = useRef<HTMLDivElement>(null);\n const buttonsRef = useRef<HTMLDivElement>(null);\n const boxWidthRef = useRef(0);\n // The width sizer mounts on first hover or focus, before the first open, not with every row.\n const [isPrimed, setIsPrimed] = useState(false);\n // Focus returning after an edit doesn't pop \"Click to edit\"; it shows again once the user moves on.\n const [isTipQuiet, setIsTipQuiet] = useState(false);\n\n const isValid = !invalidReason;\n const canSave = isChanged && isValid && !isSaving;\n // Text labels only beside a sized box: next to small `auto` text a 40px label would tower.\n const showLabels = fill && size !== 'auto' && rowWidth >= LABELLED_BUTTONS_MIN_WIDTH;\n const stackButtons = fill && multiline && rowWidth > 0 && rowWidth < INLINE_BUTTONS_MIN_WIDTH;\n const sizing = SIZES[size];\n\n useEffect(() => {\n const wasEditing = wasEditingRef.current;\n wasEditingRef.current = isEditing;\n\n if (isEditing) {\n const field = textareaRef.current ?? inputRef.current;\n field?.focus();\n field?.setSelectionRange(field.value.length, field.value.length);\n return;\n }\n\n if (!wasEditing) return;\n // oxlint-disable-next-line react-x/set-state-in-effect -- the close is a prop change, seen only here\n setIsTipQuiet(true);\n // Closing the editor removed the focused field; hand focus back to the value, not to <body>.\n if (!document.activeElement || document.activeElement === document.body) {\n viewButtonRef.current?.focus();\n }\n }, [isEditing, inputRef]);\n\n // Tracks the box's width, so a toggle knows where its animation starts.\n useLayoutEffect(() => {\n const box = boxRef.current;\n if (!box || typeof ResizeObserver === 'undefined') return;\n\n const observer = new ResizeObserver(() => {\n boxWidthRef.current = box.offsetWidth;\n });\n observer.observe(box);\n return () => observer.disconnect();\n }, []);\n\n // Grows the box from its text to the row and slides Save / Cancel open, then reverses both.\n // - Measured widths, not `fr` tracks: an `fr` track sized by its content doesn't transition.\n useLayoutEffect(() => {\n const box = boxRef.current;\n const buttons = buttonsRef.current;\n const from = boxWidthRef.current;\n if (!box || !buttons || !from) return;\n\n // A toggle mid-animation measures the box's own size, not the one the last animation holds.\n for (const running of box.getAnimations()) running.cancel();\n const to = box.offsetWidth;\n boxWidthRef.current = to;\n const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n if (reduceMotion || typeof box.animate !== 'function') return;\n\n const timing = { duration: EXPAND_MS, easing: 'ease-out' };\n if (from !== to) {\n // An open `fill` box is a growing flex item, which ignores `width`; `max-width` holds it.\n const property = fill && isEditing ? 'maxWidth' : 'width';\n const field = textareaRef.current;\n // One line while it grows, so the text doesn't wrap and unwrap as the box widens.\n if (field) field.style.whiteSpace = 'nowrap';\n const animation = box.animate(\n [{ [property]: `${from}px` }, { [property]: `${to}px` }],\n timing,\n );\n // A closing `fill` field holds its row until it has shrunk:\n // - `data-expanded` stays on until the animation ends;\n // - `data-settled` then marks that a rename closed here, so what the row hid fades back in.\n const heldRow = fill && !isEditing ? formRef.current : null;\n if (heldRow) heldRow.dataset.expanded = 'true';\n animation.onfinish = () => {\n if (field) field.style.whiteSpace = '';\n if (!heldRow) return;\n delete heldRow.dataset.expanded;\n heldRow.dataset.settled = 'true';\n };\n }\n\n // - Clips only sideways, so buttons taller than the line keep their borders.\n // - Open buttons aren't clipped at all, so their focus rings show.\n for (const running of buttons.getAnimations()) running.cancel();\n const buttonsWidth = `${buttons.scrollWidth}px`;\n buttons.style.overflowX = 'clip';\n buttons.animate(\n isEditing\n ? [{ maxWidth: '0px' }, { maxWidth: buttonsWidth }]\n : [{ maxWidth: buttonsWidth }, { maxWidth: '0px' }],\n timing,\n ).onfinish = () => {\n buttons.style.overflowX = '';\n };\n }, [isEditing, fill]);\n\n useLayoutEffect(() => {\n const textarea = textareaRef.current;\n if (!textarea) return;\n\n const fitHeight = () => {\n textarea.style.height = 'auto';\n textarea.style.height = `${textarea.scrollHeight}px`;\n };\n fitHeight();\n if (typeof ResizeObserver === 'undefined') return;\n\n const observer = new ResizeObserver(fitHeight);\n observer.observe(textarea);\n return () => observer.disconnect();\n }, [isEditing, value]);\n\n useLayoutEffect(() => {\n const form = formRef.current;\n if (!fill || !isEditing || !form) return;\n\n // Measured before paint, so the buttons never render at one size and settle at another.\n // `offsetWidth` is the layout width: a scale transform (an opening modal) doesn't change it.\n // oxlint-disable-next-line react-x/set-state-in-effect -- a layout read has to happen before paint\n const fitButtons = (width: number) => setRowWidth(width);\n fitButtons(form.offsetWidth);\n if (typeof ResizeObserver === 'undefined') return;\n\n const observer = new ResizeObserver(() => fitButtons(form.offsetWidth));\n observer.observe(form);\n return () => observer.disconnect();\n }, [fill, isEditing]);\n\n if (readOnly) {\n return <span className={cn(truncate && 'tw:block tw:truncate', className)}>{value}</span>;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n event.stopPropagation();\n\n if (event.key === 'Escape') {\n event.preventDefault();\n if (!isSaving) onCancel();\n return;\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n if (isSaving) return;\n if (!isChanged) onCancel();\n else if (isValid) onSubmit();\n }\n };\n\n const handleBlur = (event: FocusEvent<HTMLFormElement>) => {\n if (!isEditing || isSaving) return;\n // Focus left the window (resizing it, switching apps), not the field: keep editing.\n if (!document.hasFocus()) return;\n const next = event.relatedTarget;\n if (next instanceof Node && event.currentTarget.contains(next)) return;\n if (!isChanged) onCancel();\n else if (isValid) onSubmit();\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n onChange(multiline ? event.target.value.replace(/[\\r\\n]+/g, ' ') : event.target.value);\n };\n\n const fieldProps = {\n value,\n placeholder,\n maxLength,\n readOnly: isSaving,\n 'aria-label': ariaLabel ?? placeholder,\n 'aria-invalid': !isValid || undefined,\n 'aria-describedby': invalidReason ? reasonId : undefined,\n onChange: handleChange,\n onKeyDown: handleKeyDown,\n onKeyUp: (event: KeyboardEvent) => event.stopPropagation(),\n onClick: (event: MouseEvent) => event.stopPropagation(),\n };\n\n const saveTooltip = (() => {\n if (isSaving) return 'Saving…';\n if (!isChanged) return 'No changes to save';\n if (invalidReason) return invalidReason;\n return <ShortcutLabel label=\"Save\" shortcut={keys.enter.symbol} />;\n })();\n\n const iconButtonClass = size === 'auto' ? AUTO_ICON_BUTTON_CLASS : sizing.iconFit;\n // Labelled buttons match the box's height whatever the brand's own button height is.\n const labelButtonClass = sizing.fit;\n const buttonSize = showLabels ? sizing.label : sizing.icon;\n\n const view = (\n <Tooltip\n tooltip={editTooltip}\n placement={tooltipPlacement}\n forceHide={isTipQuiet}\n triggerAsChild\n >\n <button\n ref={viewButtonRef}\n type=\"button\"\n data-testid=\"inline-edit-trigger\"\n className={cn(\n 'tw:block tw:max-w-full tw:cursor-text tw:text-left tw:outline-hidden',\n 'tw:[font:inherit] tw:leading-[inherit] tw:[color:inherit]',\n // The whole box takes the click, not just the glyphs.\n 'tw:after:absolute tw:after:inset-0',\n truncate && 'tw:min-w-0 tw:truncate',\n )}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n onEditStart?.();\n }}\n onBlur={() => setIsTipQuiet(false)}\n onPointerLeave={() => setIsTipQuiet(false)}\n >\n {value ? (\n <span className={cn(!truncate && !multiline && 'tw:line-clamp-2', 'tw:break-words')}>\n {value}\n </span>\n ) : (\n <span className=\"tw:text-muted-foreground\">{placeholder}</span>\n )}\n </button>\n </Tooltip>\n );\n\n const field = multiline ? (\n <textarea\n ref={textareaRef}\n rows={1}\n className={cn(FIELD_CLASS, 'tw:w-full tw:resize-none tw:overflow-hidden tw:break-words')}\n {...fieldProps}\n />\n ) : (\n <input\n ref={inputRef}\n type=\"text\"\n className={cn(FIELD_CLASS, fill ? 'tw:w-full' : 'tw:max-w-full')}\n style={fill ? undefined : inputStyle}\n {...fieldProps}\n />\n );\n\n const buttons = (\n <div\n className={cn(\n 'tw:flex tw:items-center tw:gap-1',\n // - The gap lives inside the collapsing track, so a closed field leaves no trailing space.\n // - Beside the field the row is one line tall, so taller buttons overhang it evenly.\n stackButtons ? 'tw:pt-2' : 'tw:h-[1lh] tw:pl-2',\n 'tw:transition-opacity tw:duration-200 tw:ease-out',\n isEditing ? 'tw:opacity-100' : 'tw:opacity-0',\n )}\n >\n <Tooltip tooltip={saveTooltip} placement=\"top\" triggerAsChild>\n <span className={cn('tw:inline-flex', !canSave && 'tw:cursor-not-allowed')}>\n <Button\n type=\"submit\"\n variant=\"primary\"\n size={buttonSize}\n aria-label={showLabels ? undefined : 'Save'}\n isLoading={!showLabels && isSaving}\n disabled={!canSave}\n onMouseDown={keepFieldFocus}\n className={cn(\n 'tw:transition-colors',\n showLabels ? labelButtonClass : iconButtonClass,\n !canSave && 'tw:pointer-events-none',\n )}\n >\n {showLabels ? (\n // The spinner overlays the label, so Save keeps its width and Cancel stays put.\n <>\n <span className={cn(isSaving && 'tw:invisible')}>Save</span>\n {isSaving && <Loader2 className=\"tw:absolute tw:size-4 tw:animate-spin\" />}\n </>\n ) : (\n <Check />\n )}\n </Button>\n </span>\n </Tooltip>\n <Tooltip\n tooltip={<ShortcutLabel label=\"Cancel\" shortcut=\"Esc\" />}\n placement=\"top\"\n triggerAsChild\n >\n <Button\n type=\"button\"\n variant=\"outline\"\n size={buttonSize}\n aria-label={showLabels ? undefined : 'Cancel'}\n disabled={isSaving}\n className={cn('tw:transition-colors', showLabels ? labelButtonClass : iconButtonClass)}\n onMouseDown={keepFieldFocus}\n onClick={(event) => {\n event.stopPropagation();\n onCancel();\n }}\n >\n {showLabels ? 'Cancel' : <X />}\n </Button>\n </Tooltip>\n </div>\n );\n\n return (\n <form\n ref={formRef}\n data-slot=\"inline-edit\"\n data-state={isEditing ? 'edit' : 'view'}\n data-expanded={(fill && isEditing) || undefined}\n aria-busy={isSaving || undefined}\n className={cn(\n 'tw:leading-[inherit]',\n // Top-aligned: Save / Cancel sit on the first line however many lines the text wraps to.\n fill && isEditing\n ? 'tw:flex tw:w-full tw:min-w-0 tw:items-start'\n : 'tw:inline-flex tw:max-w-full tw:items-center',\n // Only a wrapping title moves Save / Cancel under the field; one line keeps them beside it.\n fill && isEditing && multiline && 'tw:flex-wrap',\n truncate && !isEditing && 'tw:flex tw:min-w-0',\n className,\n )}\n onSubmit={(event) => {\n event.preventDefault();\n if (canSave) onSubmit();\n }}\n onBlur={handleBlur}\n // Escape on Save / Cancel cancels too; the field handles its own keys first.\n onKeyDown={(event) => {\n if (event.key !== 'Escape' || !isEditing) return;\n event.preventDefault();\n event.stopPropagation();\n if (!isSaving) onCancel();\n }}\n >\n <div\n ref={boxRef}\n onPointerEnter={() => setIsPrimed(true)}\n onFocus={() => setIsPrimed(true)}\n className={cn(\n BOX_CLASS,\n sizing.box,\n 'tw:min-w-0',\n fill && isEditing && 'tw:flex-1',\n fill && isEditing && multiline && 'tw:min-w-[min(100%,12rem)]',\n !isEditing && VIEW_BOX_CLASS,\n isEditing &&\n (isValid\n ? 'tw:border-ring tw:bg-input-background tw:ring-3 tw:ring-ring/25'\n : 'tw:border-destructive tw:bg-input-background tw:ring-3 tw:ring-destructive/20'),\n isEditing && !fill && !multiline && 'tw:inline-flex',\n )}\n >\n {isEditing ? field : view}\n {/* Measures from first hover, so the first open already knows the field's width. */}\n {!fill && !multiline && (isPrimed || isEditing) && (\n <span aria-hidden className=\"tw:absolute tw:size-0 tw:overflow-hidden\">\n {sizerElement}\n </span>\n )}\n </div>\n {isEditing && invalidReason && (\n <span id={reasonId} className=\"tw:sr-only\" aria-live=\"polite\">\n {invalidReason}\n </span>\n )}\n {/* Stays mounted, inert while closed, so it can slide shut after Save / Cancel. */}\n <div\n ref={buttonsRef}\n inert={!isEditing}\n aria-hidden={!isEditing || undefined}\n className={cn(\n fill ? 'tw:self-start' : 'tw:self-center',\n !isEditing && 'tw:max-w-0 tw:overflow-x-clip',\n stackButtons && isEditing && 'tw:basis-full',\n )}\n >\n {/* Argo on every brand, so Save / Cancel look the same on legacy pages too. */}\n <ArgoDesignContext value>{buttons}</ArgoDesignContext>\n </div>\n </form>\n );\n};\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"InputGroup-Dm014ruw.js","names":[],"sources":["../src/components/InputGroup/InputGroupAddon.tsx","../src/components/InputGroup/InputGroupButton.tsx","../src/components/InputGroup/InputGroupInput.tsx","../src/components/InputGroup/InputGroupText.tsx","../src/components/InputGroup/InputGroupTextArea.tsx","../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\n// Padding only fires when the addon actually has content — keeps an empty\n// `<Addon>{maybeNull}</Addon>` from carving 16px out of the input row.\nconst addonVariants = cva(\n [\n 'tw:flex',\n 'tw:items-center',\n 'tw:gap-1',\n\n // Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.\n \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n 'tw:[&_svg]:shrink-0',\n ],\n {\n defaultVariants: {\n align: 'inline-start',\n },\n variants: {\n align: {\n 'inline-start': ['tw:order-first', 'tw:shrink-0', 'tw:[&:not(:empty)]:pl-4'],\n 'inline-end': ['tw:order-last', 'tw:shrink-0', 'tw:[&:not(:empty)]:pr-4'],\n 'block-start': [\n 'tw:order-first',\n // `tw:w-full` needs to be empty-conditional too — when the addon\n // has no content the root stays in flex-row, and a 100%-wide\n // empty addon would claim half of the input row beside the input.\n 'tw:[&:not(:empty)]:w-full',\n 'tw:[&:not(:empty)]:px-4',\n 'tw:[&:not(:empty)]:py-1.5',\n ],\n 'block-end': [\n 'tw:order-last',\n 'tw:[&:not(:empty)]:w-full',\n 'tw:[&:not(:empty)]:px-4',\n 'tw:[&:not(:empty)]:py-1.5',\n ],\n },\n },\n },\n);\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;\n\nexport const InputGroupAddon = ({\n children,\n align = 'inline-start',\n className,\n ...props\n}: Props) => (\n <div {...props} data-align={align} className={cn(addonVariants({ align, className }))}>\n {children}\n </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\ntype ButtonProps = ComponentProps<typeof Button>;\n\ntype Props = Omit<ButtonProps, 'size' | 'block' | 'variant'>;\n\nexport const InputGroupButton = ({ ref, className, tabIndex = -1, ...props }: Props) => (\n <Button\n {...props}\n tabIndex={tabIndex}\n ref={ref}\n variant=\"invisible\"\n size=\"icon-sm\"\n className={cn('tw:size-5', 'tw:[&_svg]:text-muted-foreground', className)}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'input'>;\n\nexport const InputGroupInput = ({ ref, className, ...inputProps }: Props) => (\n <input\n {...inputProps}\n ref={ref}\n className={cn(\n 'tw:flex-1',\n 'tw:min-w-0',\n 'tw:bg-transparent',\n 'tw:outline-hidden',\n\n // font\n 'tw:font-sans',\n 'tw:text-sm',\n\n // placeholder\n 'tw:placeholder:text-neutral-400',\n 'tw:placeholder:font-normal',\n\n // disabled\n 'tw:disabled:cursor-not-allowed',\n\n className,\n )}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const InputGroupText = ({ className, ...props }: Props) => (\n <span\n className={cn(\n 'tw:flex',\n 'tw:items-center',\n 'tw:gap-2',\n 'tw:text-sm',\n 'tw:text-muted-foreground',\n 'tw:[&_svg]:pointer-events-none',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n className,\n )}\n {...props}\n />\n);\n","import type { ChangeEventHandler, ComponentProps, FocusEventHandler } from 'react';\nimport TextareaAutosize from 'react-textarea-autosize';\n\nimport { cn } from '../../utils';\n\ntype TextareaNativeProps = Omit<\n ComponentProps<typeof TextareaAutosize>,\n 'value' | 'defaultValue' | 'rows' | 'maxRows'\n>;\n\ntype Props = TextareaNativeProps & {\n value?: string | null;\n defaultValue?: string | null;\n onValueChange?: (value: string) => void;\n onValueBlur?: (value: string) => void;\n maxRows?: number | 'unlimited';\n disableResize?: boolean;\n};\n\nexport const InputGroupTextArea = ({\n ref,\n className,\n onChange,\n onValueChange,\n value,\n defaultValue,\n onBlur,\n onValueBlur,\n disableResize = false,\n minRows = 1,\n maxRows = 4,\n ...props\n}: Props) => {\n const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {\n onValueChange?.(event.target.value);\n onChange?.(event);\n };\n\n const handleBlur: FocusEventHandler<HTMLTextAreaElement> = (event) => {\n onValueBlur?.(event.target.value);\n onBlur?.(event);\n };\n\n return (\n <TextareaAutosize\n {...props}\n ref={ref}\n value={value ?? undefined}\n defaultValue={defaultValue ?? undefined}\n onChange={handleChange}\n onBlur={handleBlur}\n minRows={minRows}\n maxRows={maxRows === 'unlimited' ? undefined : maxRows}\n className={cn(\n 'tw:w-full',\n 'tw:bg-transparent',\n 'tw:outline-hidden',\n 'tw:px-4',\n\n // font\n 'tw:font-sans',\n 'tw:text-sm',\n\n // placeholder\n 'tw:placeholder:text-neutral-400',\n 'tw:placeholder:font-normal',\n\n // disabled\n 'tw:disabled:cursor-not-allowed',\n {\n 'tw:resize-none': disableResize,\n },\n\n className,\n )}\n />\n );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { InputGroupAddon } from './InputGroupAddon';\nimport { InputGroupButton } from './InputGroupButton';\nimport { InputGroupInput } from './InputGroupInput';\nimport { InputGroupText } from './InputGroupText';\nimport { InputGroupTextArea } from './InputGroupTextArea';\n\nconst inputGroupVariants = cva(\n [\n 'tailwindcss-preflight',\n 'tw:group',\n\n 'tw:overflow-hidden',\n 'tw:box-border',\n\n // positioning\n 'tw:flex',\n 'tw:items-center',\n // A flex item's default `min-width: auto` floors the group at its content's intrinsic width,\n // so a constrained row (several groups side by side) overflows rather than sharing the space.\n // The group clips its own content anyway, and the input inside already carries `min-w-0`.\n 'tw:min-w-0',\n\n // base — legacy (non-argo) chrome uses a fixed radius; argo overrides it with\n // the brand radius token in the `argo` variant below.\n 'tw:rounded',\n 'tw:border',\n 'tw:border-solid',\n // `border-input` and `text-foreground` follow the colour scheme.\n 'tw:border-input',\n 'tw:text-foreground',\n 'tw:transition',\n\n // focus\n 'tw:has-[:is(input,textarea):focus]:ring-4',\n\n // readonly\n 'tw:has-[:is(input,textarea)[readonly]]:bg-muted',\n 'tw:has-[:is(input,textarea)[readonly]]:focus-within:ring-0',\n 'tw:has-[:is(input,textarea)[readonly]]:border-input',\n\n // disabled cursor (opacity owned by variant)\n 'tw:has-[:is(input,textarea):disabled]:cursor-not-allowed',\n\n // textarea: top-align addons, allow vertical expansion, own its y-padding\n 'tw:has-[textarea]:items-start',\n\n 'tw:has-[[data-align=block-start]:not(:empty)]:flex-wrap',\n 'tw:has-[[data-align=block-end]:not(:empty)]:flex-wrap',\n 'tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:w-auto',\n 'tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:flex-1',\n 'tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:w-auto',\n 'tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:flex-1',\n\n 'tw:[&_input]:px-4',\n 'tw:[&>input]:has-[[data-align=inline-start]:not(:empty)]:pl-2',\n 'tw:[&>input]:has-[[data-align=inline-end]:not(:empty)]:pr-2',\n ],\n {\n defaultVariants: {\n variant: 'primary',\n state: 'default',\n sizing: 'medium',\n focusVariant: 'default',\n },\n compoundVariants: [\n {\n variant: 'secondary',\n state: 'error',\n // The fixed light fill needs pinned dark text — `foreground` is near-white in dark.\n className: ['tw:bg-error-100', 'tw:text-neutral-800'],\n },\n {\n variant: 'secondary',\n state: 'warning',\n // Same pin as `error` above.\n className: ['tw:bg-warning-100', 'tw:text-neutral-800'],\n },\n {\n variant: 'primary',\n state: 'default',\n focusVariant: 'off',\n className: ['tw:has-[:is(input,textarea):focus]:border-neutral-200'],\n },\n {\n variant: 'secondary',\n state: 'default',\n focusVariant: 'off',\n className: ['tw:has-[:is(input,textarea):focus]:border-secondary'],\n },\n {\n variant: ['primary', 'secondary'],\n state: 'error',\n focusVariant: 'on',\n className: ['tw:!border-error-500', 'tw:!ring-error-200'],\n },\n {\n variant: ['primary', 'secondary'],\n state: 'warning',\n focusVariant: 'on',\n className: ['tw:!border-warning-500', 'tw:!ring-warning-200'],\n },\n // --- argo ---\n {\n variant: 'argo',\n state: 'default',\n className: [\n 'tw:has-[:is(input,textarea):focus]:border-primary',\n 'tw:has-[:is(input,textarea):focus]:ring-ring/50',\n ],\n },\n {\n variant: 'argo',\n state: 'error',\n className: [\n 'tw:border-destructive',\n 'tw:has-[:is(input,textarea):focus]:border-destructive',\n 'tw:has-[:is(input,textarea):focus]:ring-destructive/20',\n ],\n },\n {\n variant: 'argo',\n focusVariant: 'on',\n className: ['tw:!border-primary', 'tw:!ring-ring/50'],\n },\n {\n variant: 'argo',\n state: 'error',\n focusVariant: 'on',\n className: ['tw:!border-destructive', 'tw:!ring-destructive/20'],\n },\n {\n variant: 'argo',\n state: 'default',\n focusVariant: 'off',\n className: ['tw:has-[:is(input,textarea):focus]:border-input'],\n },\n ],\n variants: {\n focusVariant: {\n default: [],\n on: ['tw:!border-ring', 'tw:!ring-ring/30', 'tw:!ring-4'],\n off: ['tw:has-[:is(input,textarea):focus]:!ring-0'],\n },\n variant: {\n primary: [\n // The field-surface token — white in the light scheme, so this is a\n // no-op there; the dark scheme gets a field fill, not a white slab.\n 'tw:bg-input-background',\n 'tw:text-foreground',\n 'tw:has-[:is(input,textarea):disabled]:opacity-40',\n // aria-invalid on the control surfaces the error chrome without a `state` prop — the\n // accessible path (mirrors the `state=\"error\"` legacy tokens). Higher specificity than\n // the default focus selector, so it wins without `!important`.\n 'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200',\n ],\n secondary: [\n 'tw:bg-secondary',\n 'tw:border-secondary',\n 'tw:has-[:is(input,textarea):disabled]:opacity-40',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200',\n ],\n argo: [\n // argo follows the brand radius token (overrides the static base)\n 'tw:rounded-[var(--radius-lg,0.25rem)]',\n // muted filled input surface — gray, distinct from white containers; not the app-background token.\n // Deliberately `muted`, not the `input-background` field token legacy uses: argo's field is a\n // grey inset by design. Converging the two is a brand-value decision, not a component one.\n 'tw:bg-muted',\n 'tw:border-input',\n 'tw:text-foreground',\n 'tw:has-[:is(input,textarea):disabled]:opacity-disabled',\n // readonly: muted fill, input border — same pair as the editable argo field.\n 'tw:has-[:is(input,textarea)[readonly]]:bg-muted',\n 'tw:has-[:is(input,textarea)[readonly]]:border-input',\n // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly\n 'tw:has-[:is(input,textarea)[readonly]:focus]:border-input',\n // aria-invalid on the control surfaces the error chrome without a `state` prop — the\n // accessible path (uses the themeable `destructive` status token).\n 'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-destructive',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-destructive',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-destructive/20',\n ],\n },\n sizing: {\n default: [\n 'tw:[&_:is(input,textarea)]:py-2.5',\n 'tw:[&_:is(input,textarea)]:leading-[18px]',\n 'tw:[&_textarea]:!min-h-[calc(2.5rem-2px)]',\n ],\n small: [\n 'tw:[&_:is(input,textarea)]:py-2',\n 'tw:[&_:is(input,textarea)]:leading-[16px]',\n 'tw:[&_textarea]:!min-h-[calc(2rem-2px)]',\n ],\n medium: [\n 'tw:[&_:is(input,textarea)]:py-2',\n 'tw:[&_:is(input,textarea)]:leading-[18px]',\n 'tw:[&_textarea]:!min-h-[calc(2.25rem-2px)]',\n ],\n },\n state: {\n default: [\n 'tw:has-[:is(input,textarea):focus]:border-ring',\n 'tw:has-[:is(input,textarea):focus]:ring-ring/30',\n ],\n error: [\n 'tw:border-error-500',\n 'tw:has-[:is(input,textarea):focus]:border-error-500',\n 'tw:has-[:is(input,textarea):focus]:ring-error-200',\n ],\n warning: [\n 'tw:border-warning-500',\n 'tw:has-[:is(input,textarea):focus]:border-warning-500',\n 'tw:has-[:is(input,textarea):focus]:ring-warning-200',\n ],\n },\n },\n },\n);\n\ntype Props = ComponentPropsWithRef<'div'> &\n Omit<VariantProps<typeof inputGroupVariants>, 'variant'> & {\n variant?: Exclude<VariantProps<typeof inputGroupVariants>['variant'], 'argo'>;\n };\n\nconst InputGroupRoot = ({\n ref,\n children,\n state,\n variant,\n sizing,\n focusVariant,\n className,\n ...props\n}: Props) => {\n const isArgo = useArgoDesign();\n const effectiveVariant = isArgo ? 'argo' : variant;\n const effectiveSizing = effectiveVariant === 'argo' ? 'medium' : sizing;\n return (\n <div\n {...props}\n ref={ref}\n className={cn(\n inputGroupVariants({\n state,\n variant: effectiveVariant,\n sizing: effectiveSizing,\n focusVariant,\n className,\n }),\n )}\n >\n {children}\n </div>\n );\n};\n\nexport const InputGroup = InputGroupRoot as typeof InputGroupRoot & {\n Input: typeof InputGroupInput;\n Addon: typeof InputGroupAddon;\n Button: typeof InputGroupButton;\n TextArea: typeof InputGroupTextArea;\n Text: typeof InputGroupText;\n};\n\nInputGroup.Input = InputGroupInput;\nInputGroup.Addon = InputGroupAddon;\nInputGroup.Button = InputGroupButton;\nInputGroup.TextArea = InputGroupTextArea;\nInputGroup.Text = InputGroupText;\n"],"mappings":";;;;;;;AAOA,MAAM,gBAAgB,IACpB;CACE;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB,EACf,OAAO,eACT;CACA,UAAU,EACR,OAAO;EACL,gBAAgB;GAAC;GAAkB;GAAe;EAAyB;EAC3E,cAAc;GAAC;GAAiB;GAAe;EAAyB;EACxE,eAAe;GACb;GAIA;GACA;GACA;EACF;EACA,aAAa;GACX;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CACF;AAIA,MAAa,mBAAmB,EAC9B,UACA,QAAQ,gBACR,WACA,GAAG,YAEH,oBAAC,OAAD;CAAK,GAAI;CAAO,cAAY;CAAO,WAAW,GAAG,cAAc;EAAE;EAAO;CAAU,CAAC,CAAC;CACjF;AACE,CAAA;;;AC9CP,MAAa,oBAAoB,EAAE,KAAK,WAAW,WAAW,IAAI,GAAG,YACnE,oBAAC,QAAD;CACE,GAAI;CACM;CACL;CACL,SAAQ;CACR,MAAK;CACL,WAAW,GAAG,aAAa,oCAAoC,SAAS;AACzE,CAAA;;;ACXH,MAAa,mBAAmB,EAAE,KAAK,WAAW,GAAG,iBACnD,oBAAC,SAAD;CACE,GAAI;CACC;CACL,WAAW,GACT,aACA,cACA,qBACA,qBAGA,gBACA,cAGA,mCACA,8BAGA,kCAEA,SACF;AACD,CAAA;;;ACvBH,MAAa,kBAAkB,EAAE,WAAW,GAAG,YAC7C,oBAAC,QAAD;CACE,WAAW,GACT,WACA,mBACA,YACA,cACA,4BACA,kCACA,gDACA,SACF;CACA,GAAI;AACL,CAAA;;;ACAH,MAAa,sBAAsB,EACjC,KACA,WACA,UACA,eACA,OACA,cACA,QACA,aACA,gBAAgB,OAChB,UAAU,GACV,UAAU,GACV,GAAG,YACQ;CACX,MAAM,gBAAyD,UAAU;EACvE,gBAAgB,MAAM,OAAO,KAAK;EAClC,WAAW,KAAK;CAClB;CAEA,MAAM,cAAsD,UAAU;EACpE,cAAc,MAAM,OAAO,KAAK;EAChC,SAAS,KAAK;CAChB;CAEA,OACE,oBAAC,kBAAD;EACE,GAAI;EACC;EACL,OAAO,SAAS,KAAA;EAChB,cAAc,gBAAgB,KAAA;EAC9B,UAAU;EACV,QAAQ;EACC;EACT,SAAS,YAAY,cAAc,KAAA,IAAY;EAC/C,WAAW,GACT,aACA,qBACA,qBACA,WAGA,gBACA,cAGA,mCACA,8BAGA,kCACA,EACE,kBAAkB,cACpB,GAEA,SACF;CACD,CAAA;AAEL;;;ACjEA,MAAM,qBAAqB,IACzB;CACE;CACA;CAEA;CACA;CAGA;CACA;CAIA;CAIA;CACA;CACA;CAEA;CACA;CACA;CAGA;CAGA;CACA;CACA;CAGA;CAGA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,QAAQ;EACR,cAAc;CAChB;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GAEP,WAAW,CAAC,mBAAmB,qBAAqB;EACtD;EACA;GACE,SAAS;GACT,OAAO;GAEP,WAAW,CAAC,qBAAqB,qBAAqB;EACxD;EACA;GACE,SAAS;GACT,OAAO;GACP,cAAc;GACd,WAAW,CAAC,uDAAuD;EACrE;EACA;GACE,SAAS;GACT,OAAO;GACP,cAAc;GACd,WAAW,CAAC,qDAAqD;EACnE;EACA;GACE,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;GACP,cAAc;GACd,WAAW,CAAC,wBAAwB,oBAAoB;EAC1D;EACA;GACE,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;GACP,cAAc;GACd,WAAW,CAAC,0BAA0B,sBAAsB;EAC9D;EAEA;GACE,SAAS;GACT,OAAO;GACP,WAAW,CACT,qDACA,iDACF;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,WAAW;IACT;IACA;IACA;GACF;EACF;EACA;GACE,SAAS;GACT,cAAc;GACd,WAAW,CAAC,sBAAsB,kBAAkB;EACtD;EACA;GACE,SAAS;GACT,OAAO;GACP,cAAc;GACd,WAAW,CAAC,0BAA0B,yBAAyB;EACjE;EACA;GACE,SAAS;GACT,OAAO;GACP,cAAc;GACd,WAAW,CAAC,iDAAiD;EAC/D;CACF;CACA,UAAU;EACR,cAAc;GACZ,SAAS,CAAC;GACV,IAAI;IAAC;IAAmB;IAAoB;GAAY;GACxD,KAAK,CAAC,4CAA4C;EACpD;EACA,SAAS;GACP,SAAS;IAGP;IACA;IACA;IAIA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IAEJ;IAIA;IACA;IACA;IACA;IAEA;IACA;IAEA;IAGA;IACA;IACA;GACF;EACF;EACA,QAAQ;GACN,SAAS;IACP;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;EACF;EACA,OAAO;GACL,SAAS,CACP,kDACA,iDACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;EACF;CACF;AACF,CACF;AAOA,MAAM,kBAAkB,EACtB,KACA,UACA,OACA,SACA,QACA,cACA,WACA,GAAG,YACQ;CAEX,MAAM,mBADS,cACe,IAAI,SAAS;CAC3C,MAAM,kBAAkB,qBAAqB,SAAS,WAAW;CACjE,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GACT,mBAAmB;GACjB;GACA,SAAS;GACT,QAAQ;GACR;GACA;EACF,CAAC,CACH;EAEC;CACE,CAAA;AAET;AAEA,MAAa,aAAa;AAQ1B,WAAW,QAAQ;AACnB,WAAW,QAAQ;AACnB,WAAW,SAAS;AACpB,WAAW,WAAW;AACtB,WAAW,OAAO"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Kbd-Du93F3o4.js","names":[],"sources":["../src/components/Kbd/KbdSeparator.tsx","../src/components/Kbd/KbdGroup.tsx","../src/components/Kbd/styles.ts","../src/components/Kbd/Kbd.tsx","../src/components/Kbd/keyboardKeys.ts"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\n/**\n * The `+` / `then` glue between two `Kbd` keys.\n *\n * - Follows the muted chrome token by default.\n * - Turns white inside the legacy dark tooltip, which sets `data-tooltip-content`.\n */\nexport const KbdSeparator = ({ className, ...props }: Props) => (\n <span\n {...props}\n className={cn(\n 'tw:text-xs tw:text-muted-foreground',\n 'tw:[[data-tooltip-content=true]_&]:text-white/70',\n className,\n )}\n />\n);\n","import { Children, Fragment } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { KbdSeparator } from './KbdSeparator';\n\ntype Props = { separator?: string } & ComponentProps<'kbd'>;\n\nexport const KbdGroup = ({ ref, className, children, separator, ...props }: Props) => {\n return (\n <kbd\n {...props}\n ref={ref}\n className={cn('tw:inline-flex', 'tw:items-center', 'tw:gap-1', className)}\n >\n {separator\n ? // oxlint-disable-next-line react-x/no-children-to-array\n Children.toArray(children).map((child, index) => (\n // oxlint-disable-next-line\n <Fragment key={index}>\n {index > 0 && <KbdSeparator>{separator}</KbdSeparator>}\n {child}\n </Fragment>\n ))\n : children}\n </kbd>\n );\n};\n","import { cva } from 'class-variance-authority';\n\nexport const kbdVariants = cva(\n [\n 'tailwindcss-preflight',\n // style\n 'tw:pointer-events-none',\n 'tw:w-fit',\n 'tw:h-5',\n 'tw:min-w-5',\n\n // layout\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:gap-1',\n 'tw:shrink-0',\n\n // spacing\n 'tw:px-1',\n 'tw:[&_svg:not([class*=\"size-\"])]:size-2.5',\n\n 'tw:text-xs',\n 'tw:font-medium',\n\n 'tw:rounded',\n ],\n {\n defaultVariants: {\n variant: 'default',\n casing: 'upper',\n },\n variants: {\n // Uppercase like a keycap; `as-written` for layout-printed labels, where the transform\n // changes glyph count (`ß` → `SS`).\n casing: {\n upper: 'tw:uppercase',\n 'as-written': '',\n },\n variant: {\n default: 'tw:bg-muted tw:text-muted-foreground',\n // Tooltip shortcut key: white only inside the dark `data-tooltip-content` tooltip;\n // Argo's light tooltip sets no such attribute, so white there would be invisible.\n primary: [\n 'tw:bg-muted tw:text-muted-foreground',\n 'tw:[[data-tooltip-content=true]_&]:bg-white/20',\n 'tw:[[data-tooltip-content=true]_&]:text-white',\n ],\n },\n },\n },\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { KbdGroup } from './KbdGroup';\nimport { KbdSeparator } from './KbdSeparator';\nimport { kbdVariants } from './styles';\n\ntype Props = ComponentProps<'kbd'> & VariantProps<typeof kbdVariants>;\n\nexport const Kbd = ({ children, className, variant, casing, ...rest }: Props) => (\n <kbd {...rest} className={kbdVariants({ className, variant, casing })}>\n {children}\n </kbd>\n);\n\nKbd.Group = KbdGroup;\nKbd.Separator = KbdSeparator;\n","import { isMac } from '../../utils';\n\ntype KeyName = 'mod' | 'option' | 'shift' | 'enter';\ntype KeyRepresentation = { symbol: string; text: string };\n\ntype KeyDefinition = {\n mac: KeyRepresentation;\n windows: KeyRepresentation;\n};\n\nconst KEY_DEFINITIONS: Record<KeyName, KeyDefinition> = {\n mod: {\n mac: { symbol: '⌘', text: 'Command' },\n windows: { symbol: 'Ctrl', text: 'Ctrl' },\n },\n option: {\n mac: { symbol: '⌥', text: 'Option' },\n windows: { symbol: 'Alt', text: 'Alt' },\n },\n shift: {\n mac: { symbol: '⇧', text: 'Shift' },\n windows: { symbol: '⇧', text: 'Shift' },\n },\n enter: {\n mac: { symbol: '⏎', text: 'Enter' },\n windows: { symbol: '⏎', text: 'Enter' },\n },\n};\n\nconst createKeyboardKeys = () => {\n const keysObj: Record<KeyName, KeyRepresentation> = {} as Record<KeyName, KeyRepresentation>;\n\n for (const keyName of Object.keys(KEY_DEFINITIONS) as KeyName[]) {\n keysObj[keyName] = KEY_DEFINITIONS[keyName][isMac ? 'mac' : 'windows'];\n }\n\n return keysObj;\n};\n\nexport const keys = createKeyboardKeys();\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,gBAAgB,EAAE,WAAW,GAAG,YAC3C,oBAAC,QAAD;CACE,GAAI;CACJ,WAAW,GACT,uCACA,oDACA,SACF;AACD,CAAA;;;ACXH,MAAa,YAAY,EAAE,KAAK,WAAW,UAAU,WAAW,GAAG,YAAmB;CACpF,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,kBAAkB,mBAAmB,YAAY,SAAS;EAEvE,UAAA,YAEG,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,OAAO,UAErC,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KAAK,oBAAC,cAAD,EAAA,UAAe,UAAwB,CAAA,GACpD,KACO,EAAA,GAHK,KAGL,CACX,IACD;CACD,CAAA;AAET;;;AC1BA,MAAa,cAAc,IACzB;CACE;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CAEA;CACA;CAEA;AACF,GACA;CACE,iBAAiB;EACf,SAAS;EACT,QAAQ;CACV;CACA,UAAU;EAGR,QAAQ;GACN,OAAO;GACP,cAAc;EAChB;EACA,SAAS;GACP,SAAS;GAGT,SAAS;IACP;IACA;IACA;GACF;EACF;CACF;AACF,CACF;;;AC1CA,MAAa,OAAO,EAAE,UAAU,WAAW,SAAS,QAAQ,GAAG,WAC7D,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,YAAY;EAAE;EAAW;EAAS;CAAO,CAAC;CACjE;AACE,CAAA;AAGP,IAAI,QAAQ;AACZ,IAAI,YAAY;;;ACNhB,MAAM,kBAAkD;CACtD,KAAK;EACH,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAU;EACpC,SAAS;GAAE,QAAQ;GAAQ,MAAM;EAAO;CAC1C;CACA,QAAQ;EACN,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAS;EACnC,SAAS;GAAE,QAAQ;GAAO,MAAM;EAAM;CACxC;CACA,OAAO;EACL,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAQ;EAClC,SAAS;GAAE,QAAQ;GAAK,MAAM;EAAQ;CACxC;CACA,OAAO;EACL,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAQ;EAClC,SAAS;GAAE,QAAQ;GAAK,MAAM;EAAQ;CACxC;AACF;AAEA,MAAM,2BAA2B;CAC/B,MAAM,UAA8C,CAAC;CAErD,KAAK,MAAM,WAAW,OAAO,KAAK,eAAe,GAC/C,QAAQ,WAAW,gBAAgB,QAAQ,CAAC,QAAQ,QAAQ;CAG9D,OAAO;AACT;AAEA,MAAa,OAAO,mBAAmB"}
@@ -1,302 +0,0 @@
1
- import { __exportAll } from "./rolldown-runtime-Bdc48AWt.js";
2
- import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
3
- import { DiagramSource } from "./DiagramSource-jTwmmi9g.js";
4
- import { useThemeAttributes } from "./useThemeAttributes-B199Regy.js";
5
- import { ZoomableSvg } from "./ZoomableSvg-D8sXKpoV.js";
6
- import { createTokenResolver } from "./themeTokens-7DEab0kp.js";
7
- import { flattenForeignObjectLabels, hasDrawnContent, makeResponsive } from "./svgTransforms-Dw2hRA-i.js";
8
- import { useEffect, useId, useRef, useState } from "react";
9
- import { jsx } from "react/jsx-runtime";
10
- import { renderMermaidSVG } from "beautiful-mermaid";
11
- //#region src/blocks/MermaidDiagram/mermaidTheme.ts
12
- const DIAGRAM_FONT = "Inter, system-ui, sans-serif";
13
- /**
14
- * Token fallbacks; keep in sync with the `:root` / `[data-theme='dark']` blocks of `styles.css`.
15
- *
16
- * - Used only when the live custom property is missing (SSR, tests without CSS).
17
- */
18
- const FALLBACK_CHANNELS = {
19
- card: {
20
- light: "255 255 255",
21
- dark: "34 34 40"
22
- },
23
- "card-foreground": {
24
- light: "30 41 59",
25
- dark: "229 230 236"
26
- },
27
- foreground: {
28
- light: "30 41 59",
29
- dark: "229 230 236"
30
- },
31
- muted: {
32
- light: "241 245 249",
33
- dark: "38 38 45"
34
- },
35
- "muted-foreground": {
36
- light: "100 116 139",
37
- dark: "141 144 153"
38
- },
39
- border: {
40
- light: "229 231 235",
41
- dark: "52 53 62"
42
- },
43
- primary: {
44
- light: "37 99 235",
45
- dark: "31 143 255"
46
- },
47
- accent: {
48
- light: "224 242 254",
49
- dark: "30 58 95"
50
- },
51
- "accent-foreground": {
52
- light: "13 65 127",
53
- dark: "147 197 253"
54
- },
55
- warning: {
56
- light: "138 82 16",
57
- dark: "255 190 92"
58
- },
59
- success: {
60
- light: "24 122 76",
61
- dark: "62 207 127"
62
- },
63
- destructive: {
64
- light: "220 38 38",
65
- dark: "229 72 77"
66
- }
67
- };
68
- /** One `getComputedStyle` snapshot per palette; never hoist — values follow scheme and brand. */
69
- const tokenReader = (scheme, from) => {
70
- const resolve = createTokenResolver(from);
71
- return (name, alpha) => resolve(name, FALLBACK_CHANNELS[name][scheme], alpha);
72
- };
73
- /**
74
- * Palette for `beautiful-mermaid`'s synchronous renderer.
75
- *
76
- * - It derives the rest from `bg` + `fg` via `color-mix()`, so both must be set.
77
- * - With `transparent`, `bg` only feeds those derivations; `surface` pins the node fill.
78
- */
79
- const fastRenderOptions = (scheme, from) => {
80
- const token = tokenReader(scheme, from);
81
- return {
82
- bg: token("card"),
83
- fg: token("foreground"),
84
- line: token("border"),
85
- accent: token("primary"),
86
- muted: token("muted-foreground"),
87
- surface: token("muted"),
88
- border: token("border"),
89
- transparent: true,
90
- font: DIAGRAM_FONT
91
- };
92
- };
93
- /**
94
- * Config for the async `mermaid` renderer (unparseable dialects and icon diagrams).
95
- *
96
- * - `base` theme, so every colour comes from `themeVariables`.
97
- * - Status tokens are text colours, so fills use a low-alpha tint (brand-neutrality contract).
98
- */
99
- const mermaidConfig = (scheme, from) => {
100
- const token = tokenReader(scheme, from);
101
- const surface = token("accent");
102
- const onSurface = token("accent-foreground");
103
- const container = token("card");
104
- const onContainer = token("card-foreground");
105
- const line = token("border");
106
- const stroke = token("primary");
107
- const text = token("foreground");
108
- return {
109
- startOnLoad: false,
110
- securityLevel: "strict",
111
- theme: "base",
112
- themeVariables: {
113
- darkMode: scheme === "dark",
114
- background: container,
115
- primaryColor: surface,
116
- primaryTextColor: onSurface,
117
- primaryBorderColor: stroke,
118
- secondaryColor: container,
119
- secondaryTextColor: onContainer,
120
- secondaryBorderColor: line,
121
- tertiaryColor: token("warning", .15),
122
- tertiaryTextColor: token("warning"),
123
- tertiaryBorderColor: token("warning"),
124
- lineColor: line,
125
- textColor: text,
126
- mainBkg: surface,
127
- nodeBorder: stroke,
128
- clusterBkg: container,
129
- clusterBorder: line,
130
- titleColor: text,
131
- edgeLabelBackground: container,
132
- nodeTextColor: onSurface,
133
- actorBorder: stroke,
134
- actorBkg: surface,
135
- actorTextColor: onSurface,
136
- actorLineColor: line,
137
- signalColor: text,
138
- signalTextColor: text,
139
- labelBoxBkgColor: surface,
140
- labelBoxBorderColor: stroke,
141
- labelTextColor: onSurface,
142
- loopTextColor: text,
143
- noteBorderColor: token("warning"),
144
- noteBkgColor: token("warning", .15),
145
- noteTextColor: text,
146
- sectionBkgColor: surface,
147
- altSectionBkgColor: container,
148
- sectionBkgColor2: token("muted"),
149
- taskBorderColor: stroke,
150
- taskBkgColor: surface,
151
- taskTextColor: onSurface,
152
- taskTextDarkColor: text,
153
- taskTextLightColor: text,
154
- activeTaskBorderColor: stroke,
155
- activeTaskBkgColor: token("primary", .25),
156
- doneTaskBorderColor: token("success"),
157
- doneTaskBkgColor: token("success", .15),
158
- critBorderColor: token("destructive"),
159
- critBkgColor: token("destructive", .15),
160
- fontFamily: DIAGRAM_FONT,
161
- fontSize: "14px"
162
- }
163
- };
164
- };
165
- //#endregion
166
- //#region src/blocks/MermaidDiagram/MermaidDiagram.tsx
167
- var MermaidDiagram_exports = /* @__PURE__ */ __exportAll({ MermaidDiagram: () => MermaidDiagram });
168
- let mermaidPromise = null;
169
- const registerLucideIconPack = (m) => {
170
- m.registerIconPacks([{
171
- name: "lucide",
172
- loader: () => import("@iconify-json/lucide/icons.json").then((mod) => mod.default)
173
- }]);
174
- };
175
- const getMermaid = () => {
176
- if (!mermaidPromise) mermaidPromise = import("mermaid").then((m) => {
177
- registerLucideIconPack(m.default);
178
- return m;
179
- }).catch((err) => {
180
- mermaidPromise = null;
181
- throw err;
182
- });
183
- return mermaidPromise;
184
- };
185
- const stripFontImports = (svg) => svg.replace(/@import\s+url\([^)]*fonts\.googleapis\.com[^)]*\);?\s*/g, "");
186
- const hasIconSyntax = (code) => /@\{[^}]*\bicon\s*:/.test(code) || /\b(?:icon|service|group)\b[^\n(]*\(\s*[\w-]+:/.test(code) || /\bfa[bslr]?:fa-/.test(code);
187
- const tryFastRender = (code, scheme, from) => {
188
- if (hasIconSyntax(code)) return null;
189
- try {
190
- const svg = stripFontImports(renderMermaidSVG(code, fastRenderOptions(scheme, from)));
191
- return hasDrawnContent(svg) ? svg : null;
192
- } catch (err) {
193
- console.debug("[MermaidDiagram] fast render unavailable, using async fallback:", err);
194
- return null;
195
- }
196
- };
197
- /**
198
- * Whether a mermaid parse error means "ran out of input" rather than "bad syntax".
199
- *
200
- * - Jison parsers report end of input as token `1`, as in every streaming frame.
201
- * - Lower bound only: some truncations hit a real token and show as `<pre>` for one frame.
202
- */
203
- const isTruncatedDiagram = (err) => typeof err === "object" && err !== null && "hash" in err ? err.hash?.token === 1 : false;
204
- const RENDER_DEBOUNCE_MS = 300;
205
- const TRUNCATION_GRACE_MS = 2e3;
206
- const svgCache = /* @__PURE__ */ new Map();
207
- const diagramCacheKey = (code, themeKey) => `${themeKey}\n${code}`;
208
- const resolveSyncSvg = (code, cacheKey, scheme, from) => {
209
- const cached = svgCache.get(cacheKey);
210
- if (cached) return cached;
211
- const fast = tryFastRender(code, scheme, from);
212
- if (fast) svgCache.set(cacheKey, fast);
213
- return fast;
214
- };
215
- const MermaidDiagram = ({ code, renderActions }) => {
216
- const id = useId();
217
- const { scheme, cacheKey: themeKey, scope } = useThemeAttributes();
218
- const cacheKey = diagramCacheKey(code, themeKey);
219
- const [svg, setSvg] = useState(() => resolveSyncSvg(code, cacheKey, scheme, scope));
220
- const [renderFailed, setRenderFailed] = useState(false);
221
- const [truncated, setTruncated] = useState(false);
222
- const debounceRef = useRef(null);
223
- const renderIdRef = useRef(0);
224
- const [prevKey, setPrevKey] = useState(cacheKey);
225
- if (cacheKey !== prevKey) {
226
- setPrevKey(cacheKey);
227
- setSvg(resolveSyncSvg(code, cacheKey, scheme, scope));
228
- setRenderFailed(false);
229
- setTruncated(false);
230
- }
231
- useEffect(() => {
232
- if (svgCache.has(cacheKey)) return;
233
- const currentRenderId = ++renderIdRef.current;
234
- if (debounceRef.current) clearTimeout(debounceRef.current);
235
- debounceRef.current = setTimeout(() => {
236
- getMermaid().then(async (mermaidModule) => {
237
- if (renderIdRef.current !== currentRenderId) return;
238
- const rendererId = `mermaid-${id.replaceAll(":", "")}`;
239
- const container = document.createElement("div");
240
- container.style.visibility = "hidden";
241
- container.style.position = "absolute";
242
- container.style.top = "-9999px";
243
- container.style.width = "900px";
244
- document.body.appendChild(container);
245
- mermaidModule.default.initialize(mermaidConfig(scheme, scope));
246
- try {
247
- const result = await mermaidModule.default.render(rendererId, code, container);
248
- if (renderIdRef.current === currentRenderId && result) {
249
- const svgOutput = flattenForeignObjectLabels(result.svg);
250
- svgCache.set(cacheKey, svgOutput);
251
- setSvg(svgOutput);
252
- setRenderFailed(false);
253
- setTruncated(false);
254
- }
255
- } finally {
256
- container.remove();
257
- }
258
- }).catch((err) => {
259
- if (renderIdRef.current !== currentRenderId) return;
260
- setSvg(null);
261
- if (isTruncatedDiagram(err)) {
262
- console.debug("[MermaidDiagram] incomplete diagram, awaiting more input:", err);
263
- setTruncated(true);
264
- return;
265
- }
266
- console.error("[MermaidDiagram] fallback failed:", err);
267
- setRenderFailed(true);
268
- });
269
- }, RENDER_DEBOUNCE_MS);
270
- const timer = debounceRef.current;
271
- const renderId = renderIdRef;
272
- return () => {
273
- renderId.current++;
274
- if (timer) clearTimeout(timer);
275
- };
276
- }, [
277
- cacheKey,
278
- code,
279
- id,
280
- scheme,
281
- scope
282
- ]);
283
- useEffect(() => {
284
- if (!truncated) return;
285
- const timer = setTimeout(() => setRenderFailed(true), TRUNCATION_GRACE_MS);
286
- return () => clearTimeout(timer);
287
- }, [truncated, cacheKey]);
288
- const processedSvg = svg ? makeResponsive(svg) : null;
289
- if (renderFailed) return /* @__PURE__ */ jsx(DiagramSource, { code });
290
- if (processedSvg) return /* @__PURE__ */ jsx(ZoomableSvg, {
291
- html: processedSvg,
292
- copyText: `\`\`\`mermaid\n${code}\n\`\`\``,
293
- className: "tw:my-3",
294
- allowForeignObject: true,
295
- renderActions
296
- }, code);
297
- return /* @__PURE__ */ jsx(DiagramSkeleton, {});
298
- };
299
- //#endregion
300
- export { MermaidDiagram, MermaidDiagram_exports };
301
-
302
- //# sourceMappingURL=MermaidDiagram-D2ThT8Q-.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MermaidDiagram-D2ThT8Q-.js","names":[],"sources":["../src/blocks/MermaidDiagram/mermaidTheme.ts","../src/blocks/MermaidDiagram/MermaidDiagram.tsx"],"sourcesContent":["import type { RenderOptions } from 'beautiful-mermaid';\nimport type { MermaidConfig } from 'mermaid';\n\nimport type { ResolvedColorScheme } from '../../components/ThemeProvider/types';\nimport { createTokenResolver } from '../../utils/themeTokens';\n\nconst DIAGRAM_FONT = 'Inter, system-ui, sans-serif';\n\n/**\n * Token fallbacks; keep in sync with the `:root` / `[data-theme='dark']` blocks of `styles.css`.\n *\n * - Used only when the live custom property is missing (SSR, tests without CSS).\n */\nconst FALLBACK_CHANNELS = {\n card: { light: '255 255 255', dark: '34 34 40' },\n 'card-foreground': { light: '30 41 59', dark: '229 230 236' },\n foreground: { light: '30 41 59', dark: '229 230 236' },\n muted: { light: '241 245 249', dark: '38 38 45' },\n 'muted-foreground': { light: '100 116 139', dark: '141 144 153' },\n border: { light: '229 231 235', dark: '52 53 62' },\n primary: { light: '37 99 235', dark: '31 143 255' },\n accent: { light: '224 242 254', dark: '30 58 95' },\n 'accent-foreground': { light: '13 65 127', dark: '147 197 253' },\n warning: { light: '138 82 16', dark: '255 190 92' },\n success: { light: '24 122 76', dark: '62 207 127' },\n destructive: { light: '220 38 38', dark: '229 72 77' },\n} as const;\n\ntype TokenName = keyof typeof FALLBACK_CHANNELS;\n\n/** One `getComputedStyle` snapshot per palette; never hoist — values follow scheme and brand. */\nconst tokenReader = (scheme: ResolvedColorScheme, from?: Element | null) => {\n const resolve = createTokenResolver(from);\n return (name: TokenName, alpha?: number): string =>\n resolve(name, FALLBACK_CHANNELS[name][scheme], alpha);\n};\n\n/**\n * Palette for `beautiful-mermaid`'s synchronous renderer.\n *\n * - It derives the rest from `bg` + `fg` via `color-mix()`, so both must be set.\n * - With `transparent`, `bg` only feeds those derivations; `surface` pins the node fill.\n */\nexport const fastRenderOptions = (\n scheme: ResolvedColorScheme,\n from?: Element | null,\n): RenderOptions => {\n const token = tokenReader(scheme, from);\n\n return {\n bg: token('card'),\n fg: token('foreground'),\n line: token('border'),\n accent: token('primary'),\n muted: token('muted-foreground'),\n surface: token('muted'),\n border: token('border'),\n transparent: true,\n font: DIAGRAM_FONT,\n };\n};\n\n/**\n * Config for the async `mermaid` renderer (unparseable dialects and icon diagrams).\n *\n * - `base` theme, so every colour comes from `themeVariables`.\n * - Status tokens are text colours, so fills use a low-alpha tint (brand-neutrality contract).\n */\nexport const mermaidConfig = (\n scheme: ResolvedColorScheme,\n from?: Element | null,\n): MermaidConfig => {\n const token = tokenReader(scheme, from);\n\n const surface = token('accent');\n const onSurface = token('accent-foreground');\n const container = token('card');\n const onContainer = token('card-foreground');\n const line = token('border');\n const stroke = token('primary');\n const text = token('foreground');\n\n return {\n startOnLoad: false,\n securityLevel: 'strict',\n theme: 'base',\n themeVariables: {\n darkMode: scheme === 'dark',\n background: container,\n primaryColor: surface,\n primaryTextColor: onSurface,\n primaryBorderColor: stroke,\n secondaryColor: container,\n secondaryTextColor: onContainer,\n secondaryBorderColor: line,\n tertiaryColor: token('warning', 0.15),\n tertiaryTextColor: token('warning'),\n tertiaryBorderColor: token('warning'),\n lineColor: line,\n textColor: text,\n mainBkg: surface,\n nodeBorder: stroke,\n clusterBkg: container,\n clusterBorder: line,\n titleColor: text,\n edgeLabelBackground: container,\n nodeTextColor: onSurface,\n actorBorder: stroke,\n actorBkg: surface,\n actorTextColor: onSurface,\n actorLineColor: line,\n signalColor: text,\n signalTextColor: text,\n labelBoxBkgColor: surface,\n labelBoxBorderColor: stroke,\n labelTextColor: onSurface,\n loopTextColor: text,\n noteBorderColor: token('warning'),\n noteBkgColor: token('warning', 0.15),\n noteTextColor: text,\n sectionBkgColor: surface,\n altSectionBkgColor: container,\n sectionBkgColor2: token('muted'),\n taskBorderColor: stroke,\n taskBkgColor: surface,\n taskTextColor: onSurface,\n taskTextDarkColor: text,\n taskTextLightColor: text,\n activeTaskBorderColor: stroke,\n activeTaskBkgColor: token('primary', 0.25),\n doneTaskBorderColor: token('success'),\n doneTaskBkgColor: token('success', 0.15),\n critBorderColor: token('destructive'),\n critBkgColor: token('destructive', 0.15),\n fontFamily: DIAGRAM_FONT,\n fontSize: '14px',\n },\n };\n};\n","import { useEffect, useId, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { renderMermaidSVG } from 'beautiful-mermaid';\nimport type mermaid from 'mermaid';\n\nimport type { ResolvedColorScheme } from '../../components/ThemeProvider/types';\nimport { useThemeAttributes } from '../../components/ThemeProvider/useThemeAttributes';\nimport { ZoomableSvg } from '../../components/ZoomableSvg';\nimport { DiagramSkeleton } from '../DiagramShared/DiagramSkeleton';\nimport { DiagramSource } from '../DiagramShared/DiagramSource';\nimport {\n flattenForeignObjectLabels,\n hasDrawnContent,\n makeResponsive,\n} from '../DiagramShared/svgTransforms';\n\nimport { fastRenderOptions, mermaidConfig } from './mermaidTheme';\n\ntype MermaidModule = { default: typeof mermaid };\n\nlet mermaidPromise: Promise<MermaidModule> | null = null;\n\n// Makes `lucide:name` icon refs render; the pack is a lazy local chunk, so no CDN fetch and it works under strict CSP.\nconst registerLucideIconPack = (m: typeof mermaid): void => {\n m.registerIconPacks([\n {\n name: 'lucide',\n loader: () => import('@iconify-json/lucide/icons.json').then((mod) => mod.default),\n },\n ]);\n};\n\nconst getMermaid = (): Promise<MermaidModule> => {\n if (!mermaidPromise) {\n mermaidPromise = import('mermaid')\n .then((m) => {\n registerLucideIconPack(m.default);\n return m;\n })\n .catch((err) => {\n mermaidPromise = null;\n throw err;\n });\n }\n return mermaidPromise;\n};\n\nconst stripFontImports = (svg: string): string =>\n svg.replace(/@import\\s+url\\([^)]*fonts\\.googleapis\\.com[^)]*\\);?\\s*/g, '');\n\n// The fast renderer has no icon packs, so icon syntax takes the async path. Matches:\n// - `@{ icon: \"pack:name\" }`\n// - `icon|service|group <id>(pack:name)`, id optional\n// - FontAwesome `fa:fa-*` / `fab:` in node text\nconst hasIconSyntax = (code: string): boolean =>\n /@\\{[^}]*\\bicon\\s*:/.test(code) ||\n /\\b(?:icon|service|group)\\b[^\\n(]*\\(\\s*[\\w-]+:/.test(code) ||\n /\\bfa[bslr]?:fa-/.test(code);\n\nconst tryFastRender = (\n code: string,\n scheme: ResolvedColorScheme,\n from: Element | null,\n): string | null => {\n if (hasIconSyntax(code)) return null;\n try {\n const svg = stripFontImports(renderMermaidSVG(code, fastRenderOptions(scheme, from)));\n // A zero-sized result is a silent layout failure — fall back instead of caching it.\n return hasDrawnContent(svg) ? svg : null;\n } catch (err) {\n // Unsupported dialects are expected here; debug level keeps the console quiet.\n console.debug('[MermaidDiagram] fast render unavailable, using async fallback:', err);\n return null;\n }\n};\n\n/**\n * Whether a mermaid parse error means \"ran out of input\" rather than \"bad syntax\".\n *\n * - Jison parsers report end of input as token `1`, as in every streaming frame.\n * - Lower bound only: some truncations hit a real token and show as `<pre>` for one frame.\n */\nconst isTruncatedDiagram = (err: unknown): boolean =>\n typeof err === 'object' && err !== null && 'hash' in err\n ? (err as { hash?: { token?: unknown } }).hash?.token === 1\n : false;\n\nconst RENDER_DEBOUNCE_MS = 300;\n\n// Longer than the gap between streamed chunks, short enough for an abandoned stream.\nconst TRUNCATION_GRACE_MS = 2_000;\n\n// Survives remounts. Colours are baked into the SVG, so the key includes the theme key.\nconst svgCache = new Map<string, string>();\n\nconst diagramCacheKey = (code: string, themeKey: string): string => `${themeKey}\\n${code}`;\n\n// Cache hit or fast render; null means the caller takes the async render.\nconst resolveSyncSvg = (\n code: string,\n cacheKey: string,\n scheme: ResolvedColorScheme,\n from: Element | null,\n): string | null => {\n const cached = svgCache.get(cacheKey);\n if (cached) return cached;\n const fast = tryFastRender(code, scheme, from);\n if (fast) svgCache.set(cacheKey, fast);\n return fast;\n};\n\ntype Props = {\n /** Mermaid source. Gantt time-only `dateFormat HH:mm` is unsupported — use\n * `dateFormat YYYY-MM-DD HH:mm` with `axisFormat %H:%M`. */\n code: string;\n /** Extra toolbar controls forwarded to `ZoomableSvg`; receives the sanitized SVG. */\n renderActions?: (safeSvg: string) => ReactNode;\n};\n\nexport const MermaidDiagram = ({ code, renderActions }: Props) => {\n const id = useId();\n // - Scheme and key come from one read, so a palette is never cached under the wrong scheme.\n // - `scope` is the element tokens are read off (`null` = `<html>`) and is part of `themeKey`.\n const { scheme, cacheKey: themeKey, scope } = useThemeAttributes();\n const cacheKey = diagramCacheKey(code, themeKey);\n\n const [svg, setSvg] = useState<string | null>(() =>\n resolveSyncSvg(code, cacheKey, scheme, scope),\n );\n const [renderFailed, setRenderFailed] = useState(false);\n const [truncated, setTruncated] = useState(false);\n const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const renderIdRef = useRef(0);\n\n // Render-phase reset avoids a one-frame flash of the previous diagram.\n const [prevKey, setPrevKey] = useState(cacheKey);\n if (cacheKey !== prevKey) {\n setPrevKey(cacheKey);\n setSvg(resolveSyncSvg(code, cacheKey, scheme, scope));\n setRenderFailed(false);\n setTruncated(false);\n }\n\n useEffect(() => {\n // Sync results are already applied by the initializer and the render-phase reset.\n if (svgCache.has(cacheKey)) return;\n\n const currentRenderId = ++renderIdRef.current;\n\n if (debounceRef.current) {\n clearTimeout(debounceRef.current);\n }\n\n debounceRef.current = setTimeout(() => {\n getMermaid()\n .then(async (mermaidModule) => {\n if (renderIdRef.current !== currentRenderId) return;\n const rendererId = `mermaid-${id.replaceAll(':', '')}`;\n const container = document.createElement('div');\n container.style.visibility = 'hidden';\n container.style.position = 'absolute';\n container.style.top = '-9999px';\n container.style.width = '900px';\n document.body.appendChild(container);\n // Per render: `initialize` is the only way to change mermaid's palette.\n mermaidModule.default.initialize(mermaidConfig(scheme, scope));\n try {\n const result = await mermaidModule.default.render(rendererId, code, container);\n if (renderIdRef.current === currentRenderId && result) {\n const svgOutput = flattenForeignObjectLabels(result.svg);\n svgCache.set(cacheKey, svgOutput);\n setSvg(svgOutput);\n setRenderFailed(false);\n setTruncated(false);\n }\n } finally {\n container.remove();\n }\n })\n .catch((err: unknown) => {\n if (renderIdRef.current !== currentRenderId) return;\n setSvg(null);\n // A streaming diagram is truncated at almost every frame — keep the skeleton, not `<pre>`.\n if (isTruncatedDiagram(err)) {\n console.debug('[MermaidDiagram] incomplete diagram, awaiting more input:', err);\n setTruncated(true);\n return;\n }\n console.error('[MermaidDiagram] fallback failed:', err);\n setRenderFailed(true);\n });\n }, RENDER_DEBOUNCE_MS);\n\n const timer = debounceRef.current;\n const renderId = renderIdRef;\n return () => {\n renderId.current++;\n if (timer) {\n clearTimeout(timer);\n }\n };\n }, [cacheKey, code, id, scheme, scope]);\n\n // A truncated diagram may never get another chunk, so fall back to source after a grace period.\n // A new chunk resets `truncated` and clears the timer.\n useEffect(() => {\n if (!truncated) return;\n const timer = setTimeout(() => setRenderFailed(true), TRUNCATION_GRACE_MS);\n return () => clearTimeout(timer);\n }, [truncated, cacheKey]);\n\n const processedSvg = svg ? makeResponsive(svg) : null;\n\n if (renderFailed) {\n return <DiagramSource code={code} />;\n }\n\n if (processedSvg) {\n return (\n <ZoomableSvg\n key={code}\n html={processedSvg}\n copyText={`\\`\\`\\`mermaid\\n${code}\\n\\`\\`\\``}\n className=\"tw:my-3\"\n allowForeignObject\n renderActions={renderActions}\n />\n );\n }\n\n return <DiagramSkeleton />;\n};\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Modal-DQIauzar.js","names":[],"sources":["../src/components/Modal/ModalBody.tsx","../src/components/Modal/ModalContent.tsx","../src/components/Modal/ModalFooter.tsx","../src/components/Modal/ModalActions.tsx","../src/components/Modal/ModalHeader.tsx","../src/components/Modal/ModalIcon.tsx","../src/components/Modal/ModalImage.tsx","../src/components/Modal/Modal.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\n/** Props for `Modal.Body`. Accepts all `<div>` attributes; `as=\"form\"` is reserved for future use. */\ntype Props = ComponentProps<'div'> & {\n as?: 'form';\n};\n\n/**\n * Scrollable body slot for `Modal`. Place form fields, content blocks, or detail panels here.\n * Takes available height inside `Modal.Content` and scrolls when content overflows.\n */\nexport const ModalBody = ({ className, ...props }: Props) => (\n <div\n data-slot=\"modal-body\"\n className={cn(\n // scrollable body - takes available space and scrolls when content overflows\n 'tw:flex-1',\n 'tw:overflow-y-auto',\n\n // argo: soft top/bottom edge fade in place of header/footer separators (pure-CSS utility)\n 'tw:group-data-[argo=true]/modal:scroll-fade-y',\n\n // Own horizontal padding, matching Header/Footer so content edges align (ModalContent adds none)\n 'tw:group-data-[argo=false]/modal:px-7',\n 'tw:group-data-[argo=true]/modal:px-4',\n 'tw:py-1',\n\n // normalize nested Lucide icon sizing, matching Popover/HoverCard/Alert content surfaces\n \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n 'tw:[&_svg]:shrink-0',\n className,\n )}\n {...props}\n />\n);\n","import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Content> & {\n size?: 'small' | 'medium' | 'large';\n};\n\nexport const ModalContent = ({\n size = 'medium',\n className,\n children,\n onEscapeKeyDown,\n ...props\n}: Props) => {\n const renderArgo = useArgoDesign();\n\n const handleEscapeKeyDown: typeof onEscapeKeyDown = (event) => {\n // Keeps parent modals (e.g. FullScreenModal) open\n event.stopPropagation();\n onEscapeKeyDown?.(event);\n };\n\n return (\n <Portal>\n <ModalOverlay>\n <Content\n // props first so callers can't override the computed data-argo / data-size\n {...props}\n data-argo={renderArgo}\n data-size={size}\n className={cn(\n 'tailwindcss-preflight',\n 'tw:group/modal',\n\n 'tw:fixed',\n 'tw:left-1/2',\n 'tw:-translate-x-1/2',\n 'tw:z-[1051]',\n\n 'tw:data-[argo=false]:top-20',\n 'tw:data-[argo=true]:top-1/2',\n 'tw:data-[argo=true]:-translate-y-1/2',\n\n 'tw:w-full',\n 'tw:max-w-2xl',\n 'tw:max-h-[calc(100vh-2*theme(spacing.20))]',\n\n 'tw:flex',\n 'tw:flex-col',\n 'tw:gap-4',\n 'tw:data-[argo=false]:rounded-lg',\n 'tw:data-[argo=true]:rounded-modal',\n 'tw:bg-card',\n 'tw:text-card-foreground',\n\n // Vertical padding here survives an omitted Header/Footer; horizontal is theirs, so the\n // Body scrollbar sits at the modal edge.\n 'tw:data-[argo=false]:py-8',\n 'tw:data-[argo=true]:py-4',\n\n 'tw:duration-200',\n 'tw:data-[state=open]:animate-in',\n 'tw:data-[state=open]:fade-in-0',\n 'tw:data-[state=closed]:animate-out',\n 'tw:data-[state=closed]:fade-out-0',\n\n // No -1/2 slide classes: centring uses `translate`, the animation `transform`; they\n // compose, so a -50% slide would stack to -100% and fly in from the top-left.\n\n // legacy is top-anchored, so its slide has no centring translate to double\n 'tw:data-[argo=false]:data-[state=open]:zoom-in-80',\n 'tw:data-[argo=false]:data-[state=open]:slide-in-from-top-[48%]',\n 'tw:data-[argo=false]:data-[state=closed]:zoom-out-80',\n 'tw:data-[argo=false]:data-[state=closed]:slide-out-to-top-[48%]',\n\n 'tw:data-[argo=true]:data-[state=open]:zoom-in-95',\n 'tw:data-[argo=true]:data-[state=closed]:zoom-out-95',\n\n {\n 'tw:max-w-[480px]': size === 'small',\n 'tw:max-w-4xl': size === 'large',\n },\n\n className,\n )}\n onEscapeKeyDown={handleEscapeKeyDown}\n >\n {children}\n </Content>\n </ModalOverlay>\n </Portal>\n );\n};\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\n/**\n * The modal's action row.\n *\n * - A child that should fill the row carries `tw:w-full` itself; the footer is already full width.\n * - tailwind-merge replaces only within a group: `tw:flex-col` keeps `items-center`, so add `tw:items-stretch`.\n */\nexport const ModalFooter = ({ className, ...props }: Props) => (\n <div\n {...props}\n className={cn(\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-end',\n 'tw:gap-2',\n\n 'tw:group-data-[argo=false]/modal:px-7',\n 'tw:group-data-[argo=true]/modal:px-4',\n className,\n )}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * Container for the header's top-right controls — any `actions` passed to `Modal.Header` plus the\n * close icon. Sits in the header grid's last column, top-aligned. Mirrors `Alert`'s action slot.\n */\nexport const ModalActions = ({ className, ...props }: Props) => (\n <div\n className={cn(\n 'tw:col-start-3',\n 'tw:row-start-1',\n 'tw:self-start',\n 'tw:flex',\n 'tw:items-center',\n 'tw:gap-1',\n // argo: gutter separating the actions/close from the title (carried here so the grid needs no\n // column gap — see ModalHeader)\n 'tw:group-data-[argo=true]/modal:ml-3',\n className,\n )}\n {...props}\n />\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Close } from '@radix-ui/react-dialog';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Separator } from '../Separator';\n\nimport { ModalActions } from './ModalActions';\nimport { ModalDescription } from './ModalDescription';\nimport { ModalTitle } from './ModalTitle';\n\ntype Props = {\n /** Status icon slot — `<Modal.Icon />` or `<Modal.Image />`. */\n icon?: ReactNode;\n /** Visible subtitle below the title (also fills `aria-describedby`). */\n description?: ReactNode;\n /** Screen-reader-only description; fills `aria-describedby` without rendering visibly. */\n 'aria-description'?: string;\n /** Controls rendered top-right, before the close icon. */\n actions?: ReactNode;\n /** Hide the top-right close icon. */\n hideCloseIcon?: boolean;\n} & ComponentProps<'div'>;\n\n/** Modal header: `[icon] | title (children) | actions + close` on row 1, `description` on row 2. */\nexport const ModalHeader = ({\n className,\n icon,\n description,\n 'aria-description': ariaDescription,\n actions,\n hideCloseIcon = false,\n children,\n ...props\n}: Props) => (\n <div\n {...props}\n data-slot=\"modal-header\"\n className={cn(\n 'tw:grid',\n 'tw:grid-cols-[auto_1fr_auto]',\n 'tw:items-center',\n 'tw:group-data-[argo=false]/modal:px-7',\n 'tw:group-data-[argo=true]/modal:px-4',\n className,\n )}\n >\n {icon}\n\n {children && <ModalTitle className=\"tw:col-start-2 tw:row-start-1\">{children}</ModalTitle>}\n {(actions || !hideCloseIcon) && (\n <ModalActions>\n {actions}\n {!hideCloseIcon && (\n <Close asChild>\n <Button variant=\"invisible\" size=\"icon-sm\">\n <X />\n <span className=\"tw:sr-only\">Close</span>\n </Button>\n </Close>\n )}\n </ModalActions>\n )}\n {(description || ariaDescription) && (\n <ModalDescription\n className={cn(\n 'tw:col-start-1',\n 'tw:col-end-4',\n 'tw:row-start-2',\n description ? 'tw:mt-1' : 'tw:sr-only',\n )}\n >\n {description ?? ariaDescription}\n </ModalDescription>\n )}\n\n {/* Legacy-only separator; shown when a Body follows, hidden when that body hosts Tabs. */}\n <div\n className={cn(\n 'tw:col-start-1',\n 'tw:col-end-4',\n 'tw:mt-5',\n 'tw:hidden',\n 'tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body])_&]:block',\n 'tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body]_[data-slot=tabs-root])_&]:!hidden',\n )}\n >\n <Separator orientation=\"horizontal\" />\n </div>\n </div>\n);\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype NamedColor = 'orange' | 'blue' | 'red' | 'green' | 'gray' | 'violet';\n\ntype Props = {\n color: NamedColor | (string & {});\n icon: ReactNode;\n};\n\nconst NAMED_COLORS = new Set<string>(['orange', 'blue', 'red', 'green', 'gray', 'violet']);\n\n/**\n * Status-coloured icon for `Modal`, authored inside `Modal.Header`; remote images use `Modal.Image`.\n *\n * - Legacy: solid circular badge, absolutely docked to `Modal.Content`'s top-left.\n * - Argo (`data-argo` on `Modal.Content`): soft-tinted inline badge next to the title.\n * - CSS (`group-data-[argo=true]/modal:`) toggles the two, no context.\n * - `color` is categorical (`red` destructive … `violet` agent), fixed across brand themes.\n */\nexport const ModalIcon = ({ color, icon }: Props) => {\n const customColor = color && !NAMED_COLORS.has(color) ? color : undefined;\n\n return (\n <span\n data-slot=\"modal-icon\"\n className={cn(\n 'tw:flex',\n 'tw:shrink-0',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:[&_svg]:aspect-square',\n\n // legacy\n 'tw:group-data-[argo=false]/modal:absolute',\n 'tw:group-data-[argo=false]/modal:top-0',\n 'tw:group-data-[argo=false]/modal:left-8',\n 'tw:group-data-[argo=false]/modal:-translate-y-1/2',\n 'tw:group-data-[argo=false]/modal:size-12',\n 'tw:group-data-[argo=false]/modal:rounded-full',\n 'tw:group-data-[argo=false]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-6',\n\n // argo\n 'tw:group-data-[argo=true]/modal:col-start-1',\n 'tw:group-data-[argo=true]/modal:row-start-1',\n 'tw:group-data-[argo=true]/modal:self-start',\n 'tw:group-data-[argo=true]/modal:mr-3',\n 'tw:group-data-[argo=true]/modal:size-8',\n 'tw:group-data-[argo=true]/modal:rounded',\n 'tw:group-data-[argo=true]/modal:overflow-hidden',\n 'tw:group-data-[argo=true]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n\n // legacy palette\n {\n 'tw:group-data-[argo=false]/modal:bg-warning-500': color === 'orange',\n 'tw:group-data-[argo=false]/modal:bg-blue-500': color === 'blue',\n 'tw:group-data-[argo=false]/modal:bg-green-500': color === 'green',\n 'tw:group-data-[argo=false]/modal:bg-error-500': color === 'red',\n 'tw:group-data-[argo=false]/modal:bg-neutral-150': color === 'gray',\n 'tw:group-data-[argo=false]/modal:bg-purple-100': color === 'violet',\n 'tw:group-data-[argo=false]/modal:text-white': color !== 'violet',\n 'tw:group-data-[argo=false]/modal:text-purple-500': color === 'violet',\n },\n\n // argo palette\n {\n 'tw:group-data-[argo=true]/modal:bg-warning-100 tw:group-data-[argo=true]/modal:text-warning-500':\n color === 'orange',\n 'tw:group-data-[argo=true]/modal:bg-blue-100 tw:group-data-[argo=true]/modal:text-blue-600':\n color === 'blue',\n 'tw:group-data-[argo=true]/modal:bg-green-100 tw:group-data-[argo=true]/modal:text-green-900':\n color === 'green',\n 'tw:group-data-[argo=true]/modal:bg-error-100 tw:group-data-[argo=true]/modal:text-error-500':\n color === 'red',\n 'tw:group-data-[argo=true]/modal:bg-neutral-100 tw:group-data-[argo=true]/modal:text-neutral-500':\n color === 'gray',\n 'tw:group-data-[argo=true]/modal:bg-purple-100 tw:group-data-[argo=true]/modal:text-purple-500':\n color === 'violet',\n },\n\n // custom (non-named) colour\n { 'tw:text-white': !!customColor },\n )}\n style={customColor ? { backgroundColor: customColor } : undefined}\n >\n {icon}\n </span>\n );\n};\n","import { useEffect, useState } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = {\n src: string;\n /** Accessible alt text. Defaults to `\"\"` (decorative) — provide it when the image carries meaning. */\n alt?: string;\n};\n\nexport const ModalImage = ({ src, alt = '' }: Props) => {\n const [hasImageError, setHasImageError] = useState(false);\n\n // Reset the error state when the source changes, so a reused badge (new logo, or a retry after a\n // transient failure) isn't permanently hidden by an earlier onError.\n useEffect(() => setHasImageError(false), [src]);\n\n if (hasImageError) return null;\n\n return (\n <span\n data-slot=\"modal-image\"\n className={cn(\n 'tw:shrink-0',\n 'tw:overflow-hidden',\n\n // legacy: circular badge floating at the top-left of the modal\n 'tw:group-data-[argo=false]/modal:absolute',\n 'tw:group-data-[argo=false]/modal:top-0',\n 'tw:group-data-[argo=false]/modal:left-8',\n 'tw:group-data-[argo=false]/modal:-translate-y-1/2',\n 'tw:group-data-[argo=false]/modal:size-12',\n 'tw:group-data-[argo=false]/modal:rounded-full',\n\n // argo: inline badge in the header grid's first column\n 'tw:group-data-[argo=true]/modal:flex',\n 'tw:group-data-[argo=true]/modal:col-start-1',\n 'tw:group-data-[argo=true]/modal:row-start-1',\n 'tw:group-data-[argo=true]/modal:self-start',\n 'tw:group-data-[argo=true]/modal:mr-3',\n 'tw:group-data-[argo=true]/modal:items-center',\n 'tw:group-data-[argo=true]/modal:justify-center',\n 'tw:group-data-[argo=true]/modal:rounded',\n 'tw:group-data-[argo=true]/modal:size-8',\n )}\n >\n <img\n src={src}\n alt={alt}\n className=\"tw:size-full tw:object-contain\"\n onError={() => setHasImageError(true)}\n />\n </span>\n );\n};\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-dialog';\n\nimport { ModalBody } from './ModalBody';\nimport { ModalContent } from './ModalContent';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalIcon } from './ModalIcon';\nimport { ModalImage } from './ModalImage';\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Root>;\n\n/**\n * Blocking dialog the user must act on before continuing. Built on Radix Dialog.\n *\n * - Not for side editing (`Sheet`), anchored confirms (`Popconfirm`) or hover previews (`HoverCard`).\n * - `Modal.Content` wraps Header + Body + Footer; a form's `FormBody` goes in Body, its buttons in Footer.\n *\n * @see RECIPES.md#modal-form\n * @see RECIPES.md#confirm-dialog\n */\nexport const Modal = (props: Props) => <Root {...props} />;\n\nModal.Close = Close;\nModal.Trigger = Trigger;\n\nModal.Content = ModalContent;\nModal.Body = ModalBody;\nModal.Icon = ModalIcon;\nModal.Image = ModalImage;\nModal.Footer = ModalFooter;\nModal.Header = ModalHeader;\nModal.Overlay = ModalOverlay;\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Popover-BU7nGOv-.js","names":[],"sources":["../src/components/Popover/PopoverContent.tsx","../src/components/Popover/Popover.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-popover';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nconst variants = cva(\n [\n 'tailwindcss-preflight',\n 'tw:group/popover-content',\n 'tw:z-[1055]',\n 'tw:focus-visible:outline-hidden',\n\n // An open Radix Dialog sets `pointer-events: none` on <body>, which this portalled panel\n // inherits; outside-click dismiss still works (it listens on document).\n 'tw:pointer-events-auto',\n\n // sizing\n 'tw:min-w-32',\n 'tw:max-h-[var(--radix-popover-content-available-height)]',\n 'tw:origin-(--radix-popover-content-transform-origin)',\n\n // layout\n 'tw:flex',\n 'tw:flex-col',\n 'tw:overflow-y-auto',\n\n // border\n 'tw:box-border',\n 'tw:border',\n 'tw:border-solid',\n 'tw:border-border',\n 'tw:shadow-lg',\n\n // surface — semantic tokens, so a portalled panel follows the brand and the scheme\n 'tw:bg-popover',\n 'tw:text-popover-foreground',\n\n // open animation\n 'tw:data-[state=open]:animate-in',\n 'tw:data-[state=open]:fade-in-0',\n 'tw:data-[state=open]:zoom-in-95',\n\n // closed animation\n 'tw:data-[state=closed]:animate-out',\n 'tw:data-[state=closed]:fade-out-0',\n 'tw:data-[state=closed]:zoom-out-95',\n\n // position animation\n 'tw:data-[side=bottom]:slide-in-from-top-2',\n 'tw:data-[side=left]:slide-in-from-right-2',\n 'tw:data-[side=right]:slide-in-from-left-2',\n 'tw:data-[side=top]:slide-in-from-bottom-2',\n\n // Default size for nested Lucide icons; callers can override on the icon.\n \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n 'tw:[&_svg]:shrink-0',\n ],\n {\n defaultVariants: {\n matchTriggerWidth: false,\n variant: 'default',\n },\n variants: {\n // Only radius differs; colours live in the base array.\n variant: {\n default: ['tw:rounded-md'],\n argo: ['tw:rounded-popover'],\n },\n matchTriggerWidth: {\n true: ['tw:w-[var(--radix-popover-trigger-width)]'],\n false: [],\n },\n },\n },\n);\n\ntype Props = ComponentProps<typeof Content> &\n Omit<VariantProps<typeof variants>, 'variant'> & {\n /**\n * Portal target, default `document.body`; pass a theme-scoped host so the panel takes its theme.\n */\n container?: ComponentProps<typeof Portal>['container'];\n };\n\nexport const PopoverContent = ({\n ref,\n className,\n align = 'center',\n sideOffset = 4,\n matchTriggerWidth = false,\n children,\n onEscapeKeyDown,\n container,\n ...props\n}: Props) => {\n const effectiveVariant: NonNullable<VariantProps<typeof variants>['variant']> = useArgoDesign()\n ? 'argo'\n : 'default';\n return (\n <Portal container={container}>\n <Content\n ref={ref}\n align={matchTriggerWidth ? 'start' : align}\n sideOffset={sideOffset}\n className={cn(variants({ className, matchTriggerWidth, variant: effectiveVariant }))}\n onEscapeKeyDown={(event) => {\n // Keeps parent modals (e.g. FullScreenModal) from closing.\n event.stopPropagation();\n onEscapeKeyDown?.(event);\n }}\n {...props}\n >\n {children}\n </Content>\n </Portal>\n );\n};\n","import type { ComponentProps } from 'react';\nimport { Anchor, Close, Root, Trigger } from '@radix-ui/react-popover';\n\nimport { PopoverContent } from './PopoverContent';\n\ntype Props = ComponentProps<typeof Root>;\n\nexport const Popover = (props: Props) => <Root {...props} />;\n\n/**\n * Main Layout\n */\nPopover.Content = PopoverContent;\nPopover.Trigger = Trigger;\n// Positions a controlled popover against an element other than its trigger.\nPopover.Anchor = Anchor;\nPopover.Close = Close;\n"],"mappings":";;;;;;AAQA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CAIA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB;EACf,mBAAmB;EACnB,SAAS;CACX;CACA,UAAU;EAER,SAAS;GACP,SAAS,CAAC,eAAe;GACzB,MAAM,CAAC,oBAAoB;EAC7B;EACA,mBAAmB;GACjB,MAAM,CAAC,2CAA2C;GAClD,OAAO,CAAC;EACV;CACF;AACF,CACF;AAUA,MAAa,kBAAkB,EAC7B,KACA,WACA,QAAQ,UACR,aAAa,GACb,oBAAoB,OACpB,UACA,iBACA,WACA,GAAG,YACQ;CACX,MAAM,mBAA0E,cAAc,IAC1F,SACA;CACJ,OACE,oBAAC,QAAD;EAAmB;EACjB,UAAA,oBAAC,SAAD;GACO;GACL,OAAO,oBAAoB,UAAU;GACzB;GACZ,WAAW,GAAG,SAAS;IAAE;IAAW;IAAmB,SAAS;GAAiB,CAAC,CAAC;GACnF,kBAAkB,UAAU;IAE1B,MAAM,gBAAgB;IACtB,kBAAkB,KAAK;GACzB;GACA,GAAI;GAEH;EACM,CAAA;CACH,CAAA;AAEZ;;;AChHA,MAAa,WAAW,UAAiB,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;;;;AAK3D,QAAQ,UAAU;AAClB,QAAQ,UAAU;AAElB,QAAQ,SAAS;AACjB,QAAQ,QAAQ"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"RadioGroup-C2vk5acr.js","names":[],"sources":["../src/components/RadioGroup/context.ts","../src/components/RadioGroup/Radio.tsx","../src/components/RadioGroup/RadioGroupItemButton.tsx","../src/components/RadioGroup/RadioGroupItem.tsx","../src/components/RadioGroup/RadioGroupSeparator.tsx","../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nexport type Variant = 'radio' | 'button' | 'radio-block';\nexport type Orientation = 'vertical' | 'horizontal';\n\nconst RadioGroupContext = createContext<{\n variant: Variant;\n orientation: Orientation;\n}>({\n variant: 'radio',\n orientation: 'horizontal',\n});\n\nexport const RadioGroupProvider = RadioGroupContext;\n\nexport const useRadioGroupContext = () => use(RadioGroupContext);\n","import type { ComponentProps } from 'react';\nimport { Indicator, Item } from '@radix-ui/react-radio-group';\n\nimport { Circle } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioCircleVariants, radioIndicatorVariants, radioVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const Radio = ({ className, styleVariant = 'default', ...props }: Props) => (\n <Item\n {...props}\n className={cn(\n radioCircleVariants({ variant: styleVariant }),\n radioVariants({ variant: styleVariant }),\n className,\n )}\n >\n <Indicator className={cn('tw:flex', 'tw:items-center', 'tw:justify-center')}>\n {/* Lucide Circle is stroke-only — force fill to match the stroke (currentColor)\n so the indicator reads as a solid dot. */}\n <Circle className={radioIndicatorVariants({ variant: styleVariant })} />\n </Indicator>\n </Item>\n);\n","import type { ComponentProps } from 'react';\nimport { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioItemButtonVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const RadioGroupItemButton = ({\n ref,\n className,\n children,\n styleVariant = 'default',\n ...props\n}: Props) => (\n <Item\n ref={ref}\n {...props}\n className={cn(radioItemButtonVariants({ variant: styleVariant }), className)}\n >\n {children}\n </Item>\n);\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\nimport { FieldBox } from '../FieldBox';\nimport { useArgoDesign } from '../ThemeProvider/context';\nimport type { Props as TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\nimport { useRadioGroupContext } from './context';\nimport { Radio } from './Radio';\nimport { RadioGroupItemButton } from './RadioGroupItemButton';\n\ntype ItemProps = Omit<ComponentProps<typeof Item>, 'asChild' | 'value'>;\n\ntype Props<T extends string = string> = ItemProps & {\n value: T;\n tooltip?: ReactNode;\n tooltipVariant?: TooltipProps['variant'];\n tooltipPlacement?: TooltipProps['placement'];\n description?: ReactNode;\n};\n\nexport const RadioGroupItem = <T extends string = string>({\n children,\n className,\n tooltip,\n tooltipVariant,\n tooltipPlacement,\n description,\n ...props\n}: Props<T>) => {\n const { variant } = useRadioGroupContext();\n const styleVariant = useArgoDesign() ? 'argo' : 'default';\n const id = useId();\n\n const item = (() => {\n if (variant === 'button')\n return (\n <RadioGroupItemButton styleVariant={styleVariant} {...props} className={className}>\n {children}\n </RadioGroupItemButton>\n );\n\n return (\n <FieldBox\n variant={variant === 'radio-block' ? 'boxed' : 'default'}\n htmlFor={id}\n control={<Radio styleVariant={styleVariant} {...props} id={id} />}\n className={cn(variant === 'radio-block' && 'tw:flex-1', className)}\n >\n <FieldBox.Title>{children}</FieldBox.Title>\n {description && <FieldBox.Description>{description}</FieldBox.Description>}\n </FieldBox>\n );\n })();\n\n if (!tooltip) {\n return item;\n }\n\n return (\n <Tooltip tooltip={tooltip} variant={tooltipVariant} placement={tooltipPlacement} triggerAsChild>\n {item}\n </Tooltip>\n );\n};\n","import { Separator } from '../Separator';\n\nimport { useRadioGroupContext } from './context';\n\nexport const RadioGroupSeparator = () => {\n const { orientation } = useRadioGroupContext();\n const invertedOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';\n const size = orientation === 'horizontal' ? '1/2' : 'full';\n const className = orientation === 'horizontal' ? 'tw:mx-2' : 'tw:my-2';\n\n return <Separator orientation={invertedOrientation} size={size} className={className} />;\n};\n","import type { ComponentProps } from 'react';\nimport * as RRadioGroup from '@radix-ui/react-radio-group';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport type { Orientation, Variant } from './context';\nimport { RadioGroupProvider } from './context';\nimport { RadioGroupItem } from './RadioGroupItem';\nimport { RadioGroupSeparator } from './RadioGroupSeparator';\n\nconst radioGroupVariants = cva(['tw:flex'], {\n variants: {\n orientation: {\n horizontal: ['tw:gap-2'],\n vertical: ['tw:flex-col', 'tw:gap-3'],\n },\n variant: {\n button: [],\n radio: [],\n 'radio-block': ['tw:w-full'],\n },\n },\n});\n\ntype Props<Value> = {\n variant?: Variant;\n orientation?: Orientation;\n onValueChange?: (value: Value) => void;\n value?: Value | null;\n defaultValue?: Value | null;\n} & Omit<\n ComponentProps<typeof RRadioGroup.Root>,\n 'asChild' | 'orientation' | 'onValueChange' | 'onChange' | 'value' | 'defaultValue'\n>;\n\nexport const RadioGroup = <Value extends string = string>({\n variant = 'radio',\n className,\n disabled = false,\n orientation = 'horizontal',\n onValueChange,\n children,\n value,\n defaultValue,\n ...props\n}: Props<Value>) => (\n <RRadioGroup.Root\n {...props}\n onValueChange={onValueChange}\n orientation={orientation}\n className={cn(radioGroupVariants({ orientation, variant, className }))}\n disabled={disabled}\n value={value ?? void 0}\n defaultValue={defaultValue ?? void 0}\n >\n <RadioGroupProvider value={{ variant, orientation }}>{children}</RadioGroupProvider>\n </RRadioGroup.Root>\n);\n\nRadioGroup.Item = RadioGroupItem;\nRadioGroup.Separator = RadioGroupSeparator;\n"],"mappings":";;;;;;;;;;;;;AAKA,MAAM,oBAAoB,cAGvB;CACD,SAAS;CACT,aAAa;AACf,CAAC;AAED,MAAa,qBAAqB;AAElC,MAAa,6BAA6B,IAAI,iBAAiB;;;ACJ/D,MAAa,SAAS,EAAE,WAAW,eAAe,WAAW,GAAG,YAC9D,oBAAC,MAAD;CACE,GAAI;CACJ,WAAW,GACT,oBAAoB,EAAE,SAAS,aAAa,CAAC,GAC7C,cAAc,EAAE,SAAS,aAAa,CAAC,GACvC,SACF;CAEA,UAAA,oBAAC,WAAD;EAAW,WAAW,GAAG,WAAW,mBAAmB,mBAAmB;EAGxE,UAAA,oBAAC,QAAD,EAAQ,WAAW,uBAAuB,EAAE,SAAS,aAAa,CAAC,EAAI,CAAA;CAC9D,CAAA;AACP,CAAA;;;ACfR,MAAa,wBAAwB,EACnC,KACA,WACA,UACA,eAAe,WACf,GAAG,YAEH,oBAAC,MAAD;CACO;CACL,GAAI;CACJ,WAAW,GAAG,wBAAwB,EAAE,SAAS,aAAa,CAAC,GAAG,SAAS;CAE1E;AACG,CAAA;;;ACCR,MAAa,kBAA6C,EACxD,UACA,WACA,SACA,gBACA,kBACA,aACA,GAAG,YACW;CACd,MAAM,EAAE,YAAY,qBAAqB;CACzC,MAAM,eAAe,cAAc,IAAI,SAAS;CAChD,MAAM,KAAK,MAAM;CAEjB,MAAM,cAAc;EAClB,IAAI,YAAY,UACd,OACE,oBAAC,sBAAD;GAAoC;GAAc,GAAI;GAAkB;GACrE;EACmB,CAAA;EAG1B,OACE,qBAAC,UAAD;GACE,SAAS,YAAY,gBAAgB,UAAU;GAC/C,SAAS;GACT,SAAS,oBAAC,OAAD;IAAqB;IAAc,GAAI;IAAW;GAAK,CAAA;GAChE,WAAW,GAAG,YAAY,iBAAiB,aAAa,SAAS;GAJnE,UAAA,CAME,oBAAC,SAAS,OAAV,EAAiB,SAAyB,CAAA,GACzC,eAAe,oBAAC,SAAS,aAAV,EAAA,UAAuB,YAAkC,CAAA,CACjE;;CAEd,EAAA,CAAG;CAEH,IAAI,CAAC,SACH,OAAO;CAGT,OACE,oBAAC,SAAD;EAAkB;EAAS,SAAS;EAAgB,WAAW;EAAkB,gBAAA;EAC9E,UAAA;CACM,CAAA;AAEb;;;AC/DA,MAAa,4BAA4B;CACvC,MAAM,EAAE,gBAAgB,qBAAqB;CAK7C,OAAO,oBAAC,WAAD;EAAW,aAJU,gBAAgB,eAAe,aAAa;EAIpB,MAHvC,gBAAgB,eAAe,QAAQ;EAGY,WAF9C,gBAAgB,eAAe,YAAY;CAE0B,CAAA;AACzF;;;ACAA,MAAM,qBAAqB,IAAI,CAAC,SAAS,GAAG,EAC1C,UAAU;CACR,aAAa;EACX,YAAY,CAAC,UAAU;EACvB,UAAU,CAAC,eAAe,UAAU;CACtC;CACA,SAAS;EACP,QAAQ,CAAC;EACT,OAAO,CAAC;EACR,eAAe,CAAC,WAAW;CAC7B;AACF,EACF,CAAC;AAaD,MAAa,cAA6C,EACxD,UAAU,SACV,WACA,WAAW,OACX,cAAc,cACd,eACA,UACA,OACA,cACA,GAAG,YAEH,oBAAC,YAAY,MAAb;CACE,GAAI;CACW;CACF;CACb,WAAW,GAAG,mBAAmB;EAAE;EAAa;EAAS;CAAU,CAAC,CAAC;CAC3D;CACV,OAAO,SAAS,KAAK;CACrB,cAAc,gBAAgB,KAAK;CAEnC,UAAA,oBAAC,oBAAD;EAAoB,OAAO;GAAE;GAAS;EAAY;EAAI;CAA6B,CAAA;AACnE,CAAA;AAGpB,WAAW,OAAO;AAClB,WAAW,YAAY"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"SearchInput-BnU6YHgT.js","names":[],"sources":["../src/blocks/SearchInput/SearchInput.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ChangeEventHandler, ComponentProps, FocusEventHandler } from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { Search, X } from '../../icons';\nimport { debounce } from '../../utils';\n\ntype InputGroupProps = Pick<\n ComponentProps<typeof InputGroup>,\n 'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<ComponentProps<typeof InputGroup.Input>, 'value' | 'defaultValue'>;\n\n/**\n * - `onValueChange` is debounced by default (300ms).\n * - `value={null}` / `undefined` is uncontrolled (falls back to `defaultValue`, else empty).\n * - `value={\"\"}` is controlled-empty.\n */\ntype Props = InputGroupProps &\n InputGroupInputProps & {\n value?: string | null;\n defaultValue?: string | null;\n /** Debounced; fires synchronously on clear and with `disableDebounce`. Use `onChange` per keystroke. */\n onValueChange?: (value: string) => void;\n /** Called with the value on blur. */\n onValueBlur?: (value: string) => void;\n onClear?: () => void;\n /** Shows the clear (x) button while the value is non-empty. */\n allowClear?: boolean;\n /** `onValueChange` fires on every keystroke. */\n disableDebounce?: boolean;\n /** In ms, default 300; ignored with `disableDebounce`. */\n debounceDelay?: number;\n };\n\n/**\n * Debounced search input with a search icon and optional clear button.\n *\n * - Use for list / table search and free-text filters, e.g. in `PageToolbar.Search`.\n * - Not for plain text (`TextInput`) or picking from a known list (`Combobox`).\n *\n * @see RECIPES.md#filter-toolbar\n */\nexport const SearchInput = ({\n ref,\n\n // group props\n state,\n variant,\n focusVariant,\n sizing,\n className,\n\n // own props\n value: valueProp,\n defaultValue,\n onValueChange,\n onValueBlur,\n onChange,\n onBlur,\n onClear,\n allowClear = false,\n disableDebounce = false,\n debounceDelay = 300,\n\n // input props\n disabled,\n readOnly,\n ...restInputProps\n}: Props) => {\n const [internalValue, setInternalValue] = useState<string>(\n valueProp != null ? valueProp : (defaultValue ?? ''),\n );\n\n // A pending debounced call; the controlled-value sync skips while set so typed characters survive.\n const debounceInFlightRef = useRef(false);\n const cancelRef = useRef<() => void>(() => {});\n\n const debouncedOnValueChange = useMemo(() => {\n if (!onValueChange || disableDebounce) {\n cancelRef.current = () => {};\n return onValueChange;\n }\n const d = debounce((val: string) => {\n debounceInFlightRef.current = false;\n onValueChange(val);\n }, debounceDelay);\n cancelRef.current = d.cancel;\n return d;\n }, [onValueChange, disableDebounce, debounceDelay]);\n\n useEffect(() => {\n return () => cancelRef.current();\n }, [debouncedOnValueChange]);\n\n // Skipped while a debounced call is in flight, so the input doesn't snap back mid-typing.\n useEffect(() => {\n if (valueProp == null) return;\n if (debounceInFlightRef.current) return;\n setInternalValue(valueProp);\n }, [valueProp]);\n\n const canClear = allowClear && !!internalValue && !disabled && !readOnly;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const val = event.target.value;\n setInternalValue(val);\n if (!disableDebounce && debouncedOnValueChange) debounceInFlightRef.current = true;\n debouncedOnValueChange?.(val);\n onChange?.(event);\n };\n\n const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n onValueBlur?.(event.target.value);\n onBlur?.(event);\n };\n\n const handleClear = () => {\n cancelRef.current();\n debounceInFlightRef.current = false;\n setInternalValue('');\n onValueChange?.('');\n onClear?.();\n };\n\n return (\n <InputGroup\n state={state}\n variant={variant}\n sizing={sizing}\n focusVariant={focusVariant}\n className={className}\n >\n <InputGroup.Addon align=\"inline-start\">\n <Search className=\"tw:size-4 tw:shrink-0 tw:text-muted-foreground\" />\n </InputGroup.Addon>\n\n <InputGroup.Input\n {...restInputProps}\n ref={ref}\n value={internalValue}\n onChange={handleChange}\n onBlur={handleBlur}\n disabled={disabled}\n readOnly={readOnly}\n />\n\n {canClear && (\n <InputGroup.Addon align=\"inline-end\">\n <InputGroup.Button\n aria-label=\"Clear search\"\n onMouseDown={(event) => event.preventDefault()}\n onClick={handleClear}\n >\n <X className=\"tw:size-4\" />\n </InputGroup.Button>\n </InputGroup.Addon>\n )}\n </InputGroup>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AA4CA,MAAa,eAAe,EAC1B,KAGA,OACA,SACA,cACA,QACA,WAGA,OAAO,WACP,cACA,eACA,aACA,UACA,QACA,SACA,aAAa,OACb,kBAAkB,OAClB,gBAAgB,KAGhB,UACA,UACA,GAAG,qBACQ;CACX,MAAM,CAAC,eAAe,oBAAoB,SACxC,aAAa,OAAO,YAAa,gBAAgB,EACnD;CAGA,MAAM,sBAAsB,OAAO,KAAK;CACxC,MAAM,YAAY,aAAyB,CAAC,CAAC;CAE7C,MAAM,yBAAyB,cAAc;EAC3C,IAAI,CAAC,iBAAiB,iBAAiB;GACrC,UAAU,gBAAgB,CAAC;GAC3B,OAAO;EACT;EACA,MAAM,IAAI,UAAU,QAAgB;GAClC,oBAAoB,UAAU;GAC9B,cAAc,GAAG;EACnB,GAAG,aAAa;EAChB,UAAU,UAAU,EAAE;EACtB,OAAO;CACT,GAAG;EAAC;EAAe;EAAiB;CAAa,CAAC;CAElD,gBAAgB;EACd,aAAa,UAAU,QAAQ;CACjC,GAAG,CAAC,sBAAsB,CAAC;CAG3B,gBAAgB;EACd,IAAI,aAAa,MAAM;EACvB,IAAI,oBAAoB,SAAS;EACjC,iBAAiB,SAAS;CAC5B,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,WAAW,cAAc,CAAC,CAAC,iBAAiB,CAAC,YAAY,CAAC;CAEhE,MAAM,gBAAsD,UAAU;EACpE,MAAM,MAAM,MAAM,OAAO;EACzB,iBAAiB,GAAG;EACpB,IAAI,CAAC,mBAAmB,wBAAwB,oBAAoB,UAAU;EAC9E,yBAAyB,GAAG;EAC5B,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EACjE,cAAc,MAAM,OAAO,KAAK;EAChC,SAAS,KAAK;CAChB;CAEA,MAAM,oBAAoB;EACxB,UAAU,QAAQ;EAClB,oBAAoB,UAAU;EAC9B,iBAAiB,EAAE;EACnB,gBAAgB,EAAE;EAClB,UAAU;CACZ;CAEA,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EALb,UAAA;GAOE,oBAAC,WAAW,OAAZ;IAAkB,OAAM;IACtB,UAAA,oBAAC,QAAD,EAAQ,WAAU,iDAAkD,CAAA;GACpD,CAAA;GAElB,oBAAC,WAAW,OAAZ;IACE,GAAI;IACC;IACL,OAAO;IACP,UAAU;IACV,QAAQ;IACE;IACA;GACX,CAAA;GAEA,YACC,oBAAC,WAAW,OAAZ;IAAkB,OAAM;IACtB,UAAA,oBAAC,WAAW,QAAZ;KACE,cAAW;KACX,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;IACT,CAAA;GACH,CAAA;EAEV;;AAEhB"}