@plumile/ui 0.1.56 → 0.1.57

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 (322) hide show
  1. package/lib/esm/atomic/atoms/badge/Badge.js +17 -16
  2. package/lib/esm/atomic/atoms/badge/Badge.js.map +1 -1
  3. package/lib/esm/atomic/atoms/badge/badge.css.js +30 -8
  4. package/lib/esm/atomic/atoms/badge/badge.css.js.map +1 -1
  5. package/lib/esm/atomic/atoms/button/Button.js +46 -58
  6. package/lib/esm/atomic/atoms/button/Button.js.map +1 -1
  7. package/lib/esm/atomic/atoms/button/LinkButton.js +48 -62
  8. package/lib/esm/atomic/atoms/button/LinkButton.js.map +1 -1
  9. package/lib/esm/atomic/atoms/button/button.css.js +95 -16
  10. package/lib/esm/atomic/atoms/button/button.css.js.map +1 -1
  11. package/lib/esm/atomic/atoms/checkbox/Checkbox.js +37 -40
  12. package/lib/esm/atomic/atoms/checkbox/Checkbox.js.map +1 -1
  13. package/lib/esm/atomic/atoms/checkbox/checkbox.css.js +26 -11
  14. package/lib/esm/atomic/atoms/checkbox/checkbox.css.js.map +1 -1
  15. package/lib/esm/atomic/atoms/formatted-date/FormattedDate.js +32 -31
  16. package/lib/esm/atomic/atoms/formatted-date/FormattedDate.js.map +1 -1
  17. package/lib/esm/atomic/atoms/icon-button/IconMenuButton.js +18 -25
  18. package/lib/esm/atomic/atoms/icon-button/IconMenuButton.js.map +1 -1
  19. package/lib/esm/atomic/atoms/input/Input.js +46 -40
  20. package/lib/esm/atomic/atoms/input/Input.js.map +1 -1
  21. package/lib/esm/atomic/atoms/input/input.css.js +32 -14
  22. package/lib/esm/atomic/atoms/input/input.css.js.map +1 -1
  23. package/lib/esm/atomic/atoms/label/Label.js +23 -16
  24. package/lib/esm/atomic/atoms/label/Label.js.map +1 -1
  25. package/lib/esm/atomic/atoms/label/label.css.js +27 -9
  26. package/lib/esm/atomic/atoms/label/label.css.js.map +1 -1
  27. package/lib/esm/atomic/atoms/textarea/Textarea.js +19 -18
  28. package/lib/esm/atomic/atoms/textarea/Textarea.js.map +1 -1
  29. package/lib/esm/atomic/atoms/textarea/textarea.css.js +32 -8
  30. package/lib/esm/atomic/atoms/textarea/textarea.css.js.map +1 -1
  31. package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuDropdown.js +47 -54
  32. package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuDropdown.js.map +1 -1
  33. package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuPopover.js +53 -60
  34. package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuPopover.js.map +1 -1
  35. package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbNavigation.js +62 -63
  36. package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbNavigation.js.map +1 -1
  37. package/lib/esm/atomic/molecules/breadcrumb_navigation/breadcrumbNavigation.css.js +8 -30
  38. package/lib/esm/atomic/molecules/breadcrumb_navigation/breadcrumbNavigation.css.js.map +1 -1
  39. package/lib/esm/atomic/molecules/breadcrumb_navigation/types.js +0 -2
  40. package/lib/esm/atomic/molecules/card/Card.css.js +8 -10
  41. package/lib/esm/atomic/molecules/card/Card.css.js.map +1 -1
  42. package/lib/esm/atomic/molecules/card/Card.js +24 -17
  43. package/lib/esm/atomic/molecules/card/Card.js.map +1 -1
  44. package/lib/esm/atomic/molecules/dropdown/Dropdown.js +148 -177
  45. package/lib/esm/atomic/molecules/dropdown/Dropdown.js.map +1 -1
  46. package/lib/esm/atomic/molecules/dropdown/dropdown.css.js +8 -13
  47. package/lib/esm/atomic/molecules/dropdown/dropdown.css.js.map +1 -1
  48. package/lib/esm/atomic/molecules/form-actions/FormActions.js +31 -56
  49. package/lib/esm/atomic/molecules/form-actions/FormActions.js.map +1 -1
  50. package/lib/esm/atomic/molecules/tabs/Tabs.js +34 -33
  51. package/lib/esm/atomic/molecules/tabs/Tabs.js.map +1 -1
  52. package/lib/esm/atomic/molecules/tabs/tabs.css.js +18 -9
  53. package/lib/esm/atomic/molecules/tabs/tabs.css.js.map +1 -1
  54. package/lib/esm/atomic/molecules/toast/ToastProvider.js +82 -77
  55. package/lib/esm/atomic/molecules/toast/ToastProvider.js.map +1 -1
  56. package/lib/esm/atomic/molecules/toast/ToastViewport.js +75 -70
  57. package/lib/esm/atomic/molecules/toast/ToastViewport.js.map +1 -1
  58. package/lib/esm/atomic/molecules/toast/constants.js +6 -5
  59. package/lib/esm/atomic/molecules/toast/constants.js.map +1 -1
  60. package/lib/esm/atomic/molecules/toast/toast.css.js +18 -17
  61. package/lib/esm/atomic/molecules/toast/toast.css.js.map +1 -1
  62. package/lib/esm/components/charts/BillingUsageLineChart.js +140 -173
  63. package/lib/esm/components/charts/BillingUsageLineChart.js.map +1 -1
  64. package/lib/esm/components/charts/billingUsageLineChart.css.js +8 -12
  65. package/lib/esm/components/charts/billingUsageLineChart.css.js.map +1 -1
  66. package/lib/esm/components/data-table/DataTable.css.js +84 -24
  67. package/lib/esm/components/data-table/DataTable.css.js.map +1 -1
  68. package/lib/esm/components/data-table/DataTable.js +73 -140
  69. package/lib/esm/components/data-table/DataTable.js.map +1 -1
  70. package/lib/esm/components/data-table/TableCell.css.js +18 -15
  71. package/lib/esm/components/data-table/TableCell.css.js.map +1 -1
  72. package/lib/esm/components/data-table/TableCell.js +74 -73
  73. package/lib/esm/components/data-table/TableCell.js.map +1 -1
  74. package/lib/esm/components/data-table/TableCellBase.js +18 -15
  75. package/lib/esm/components/data-table/TableCellBase.js.map +1 -1
  76. package/lib/esm/components/data-table/VirtualizedConnectionTable.css.js +8 -10
  77. package/lib/esm/components/data-table/VirtualizedConnectionTable.css.js.map +1 -1
  78. package/lib/esm/components/data-table/VirtualizedConnectionTable.js +190 -248
  79. package/lib/esm/components/data-table/VirtualizedConnectionTable.js.map +1 -1
  80. package/lib/esm/components/data-table/tableBreakpoints.js +28 -34
  81. package/lib/esm/components/data-table/tableBreakpoints.js.map +1 -1
  82. package/lib/esm/components/layout/ContentLayout.css.js +8 -18
  83. package/lib/esm/components/layout/ContentLayout.css.js.map +1 -1
  84. package/lib/esm/components/layout/ContentLayout.js +68 -78
  85. package/lib/esm/components/layout/ContentLayout.js.map +1 -1
  86. package/lib/esm/components/layout/TabsContentLayout.css.js +8 -11
  87. package/lib/esm/components/layout/TabsContentLayout.css.js.map +1 -1
  88. package/lib/esm/components/layout/TabsContentLayout.js +30 -13
  89. package/lib/esm/components/layout/TabsContentLayout.js.map +1 -1
  90. package/lib/esm/components/select/SimpleSelect.css.js +17 -22
  91. package/lib/esm/components/select/SimpleSelect.css.js.map +1 -1
  92. package/lib/esm/components/select/SimpleSelect.js +184 -184
  93. package/lib/esm/components/select/SimpleSelect.js.map +1 -1
  94. package/lib/esm/components/subscriptions/RefetchNeededBanner.css.js +8 -10
  95. package/lib/esm/components/subscriptions/RefetchNeededBanner.css.js.map +1 -1
  96. package/lib/esm/components/subscriptions/RefetchNeededBanner.js +31 -23
  97. package/lib/esm/components/subscriptions/RefetchNeededBanner.js.map +1 -1
  98. package/lib/esm/components/tile/InfoTile.css.js +8 -18
  99. package/lib/esm/components/tile/InfoTile.css.js.map +1 -1
  100. package/lib/esm/components/tile/InfoTile.js +62 -67
  101. package/lib/esm/components/tile/InfoTile.js.map +1 -1
  102. package/lib/esm/i18n/useUiTranslation.js +8 -7
  103. package/lib/esm/i18n/useUiTranslation.js.map +1 -1
  104. package/lib/esm/icons/BanSvg.js +29 -44
  105. package/lib/esm/icons/BanSvg.js.map +1 -1
  106. package/lib/esm/icons/ButtonLoadingSpinnerSvg.js +26 -41
  107. package/lib/esm/icons/ButtonLoadingSpinnerSvg.js.map +1 -1
  108. package/lib/esm/icons/ChatCheckSvg.js +27 -42
  109. package/lib/esm/icons/ChatCheckSvg.js.map +1 -1
  110. package/lib/esm/icons/ChatSizeLargeSvg.js +49 -70
  111. package/lib/esm/icons/ChatSizeLargeSvg.js.map +1 -1
  112. package/lib/esm/icons/ChatSizeMediumSvg.js +43 -61
  113. package/lib/esm/icons/ChatSizeMediumSvg.js.map +1 -1
  114. package/lib/esm/icons/ChatSizeSmallSvg.js +37 -52
  115. package/lib/esm/icons/ChatSizeSmallSvg.js.map +1 -1
  116. package/lib/esm/icons/ChatXSvg.js +27 -42
  117. package/lib/esm/icons/ChatXSvg.js.map +1 -1
  118. package/lib/esm/icons/CheckSvg.js +21 -30
  119. package/lib/esm/icons/CheckSvg.js.map +1 -1
  120. package/lib/esm/icons/ChevronDownSvg.js +21 -30
  121. package/lib/esm/icons/ChevronDownSvg.js.map +1 -1
  122. package/lib/esm/icons/ChevronLeftSvg.js +21 -30
  123. package/lib/esm/icons/ChevronLeftSvg.js.map +1 -1
  124. package/lib/esm/icons/ChevronRightSvg.js +21 -30
  125. package/lib/esm/icons/ChevronRightSvg.js.map +1 -1
  126. package/lib/esm/icons/ClockSvg.js +29 -44
  127. package/lib/esm/icons/ClockSvg.js.map +1 -1
  128. package/lib/esm/icons/CoinOffSvg.js +47 -65
  129. package/lib/esm/icons/CoinOffSvg.js.map +1 -1
  130. package/lib/esm/icons/CoinSvg.js +40 -55
  131. package/lib/esm/icons/CoinSvg.js.map +1 -1
  132. package/lib/esm/icons/DatabaseCheckSvg.js +47 -65
  133. package/lib/esm/icons/DatabaseCheckSvg.js.map +1 -1
  134. package/lib/esm/icons/DatabaseXSvg.js +47 -65
  135. package/lib/esm/icons/DatabaseXSvg.js.map +1 -1
  136. package/lib/esm/icons/DevModeSvg.js +21 -30
  137. package/lib/esm/icons/DevModeSvg.js.map +1 -1
  138. package/lib/esm/icons/EyeSvg.js +27 -33
  139. package/lib/esm/icons/EyeSvg.js.map +1 -1
  140. package/lib/esm/icons/FormErrorAlertSvg.js +37 -29
  141. package/lib/esm/icons/FormErrorAlertSvg.js.map +1 -1
  142. package/lib/esm/icons/GlobeSvg.js +18 -27
  143. package/lib/esm/icons/GlobeSvg.js.map +1 -1
  144. package/lib/esm/icons/GripDotsSvg.js +52 -29
  145. package/lib/esm/icons/GripDotsSvg.js.map +1 -1
  146. package/lib/esm/icons/HomeActivityAssignUserSvg.js +44 -62
  147. package/lib/esm/icons/HomeActivityAssignUserSvg.js.map +1 -1
  148. package/lib/esm/icons/HomeStatsCheckBadgeSvg.js +27 -42
  149. package/lib/esm/icons/HomeStatsCheckBadgeSvg.js.map +1 -1
  150. package/lib/esm/icons/HomeStatsClipboardSvg.js +27 -42
  151. package/lib/esm/icons/HomeStatsClipboardSvg.js.map +1 -1
  152. package/lib/esm/icons/HomeStatsClockSvg.js +27 -42
  153. package/lib/esm/icons/HomeStatsClockSvg.js.map +1 -1
  154. package/lib/esm/icons/KeyOffSvg.js +39 -54
  155. package/lib/esm/icons/KeyOffSvg.js.map +1 -1
  156. package/lib/esm/icons/KeySvg.js +39 -54
  157. package/lib/esm/icons/KeySvg.js.map +1 -1
  158. package/lib/esm/icons/KronexSvg.js +28 -43
  159. package/lib/esm/icons/KronexSvg.js.map +1 -1
  160. package/lib/esm/icons/LinkCheckSvg.js +37 -52
  161. package/lib/esm/icons/LinkCheckSvg.js.map +1 -1
  162. package/lib/esm/icons/LinkSvg.js +27 -42
  163. package/lib/esm/icons/LinkSvg.js.map +1 -1
  164. package/lib/esm/icons/LinkXSvg.js +37 -52
  165. package/lib/esm/icons/LinkXSvg.js.map +1 -1
  166. package/lib/esm/icons/LockOpenSvg.js +31 -46
  167. package/lib/esm/icons/LockOpenSvg.js.map +1 -1
  168. package/lib/esm/icons/LockSvg.js +31 -46
  169. package/lib/esm/icons/LockSvg.js.map +1 -1
  170. package/lib/esm/icons/MailCheckSvg.js +41 -56
  171. package/lib/esm/icons/MailCheckSvg.js.map +1 -1
  172. package/lib/esm/icons/MailSvg.js +31 -46
  173. package/lib/esm/icons/MailSvg.js.map +1 -1
  174. package/lib/esm/icons/MailXSvg.js +41 -56
  175. package/lib/esm/icons/MailXSvg.js.map +1 -1
  176. package/lib/esm/icons/ModalCloseSvg.js +27 -42
  177. package/lib/esm/icons/ModalCloseSvg.js.map +1 -1
  178. package/lib/esm/icons/PencilSvg.js +14 -20
  179. package/lib/esm/icons/PencilSvg.js.map +1 -1
  180. package/lib/esm/icons/PinFilledSvg.js +24 -40
  181. package/lib/esm/icons/PinFilledSvg.js.map +1 -1
  182. package/lib/esm/icons/PinSvg.js +27 -43
  183. package/lib/esm/icons/PinSvg.js.map +1 -1
  184. package/lib/esm/icons/ProfileDropdownLogoutSvg.js +37 -52
  185. package/lib/esm/icons/ProfileDropdownLogoutSvg.js.map +1 -1
  186. package/lib/esm/icons/ProfileDropdownOrganizationSvg.js +27 -42
  187. package/lib/esm/icons/ProfileDropdownOrganizationSvg.js.map +1 -1
  188. package/lib/esm/icons/ProjectsFolderSvg.js +21 -30
  189. package/lib/esm/icons/ProjectsFolderSvg.js.map +1 -1
  190. package/lib/esm/icons/RobotCheckSvg.js +60 -68
  191. package/lib/esm/icons/RobotCheckSvg.js.map +1 -1
  192. package/lib/esm/icons/RobotSvg.js +53 -58
  193. package/lib/esm/icons/RobotSvg.js.map +1 -1
  194. package/lib/esm/icons/RobotXSvg.js +60 -68
  195. package/lib/esm/icons/RobotXSvg.js.map +1 -1
  196. package/lib/esm/icons/RocketOffSvg.js +58 -83
  197. package/lib/esm/icons/RocketOffSvg.js.map +1 -1
  198. package/lib/esm/icons/RocketSvg.js +51 -73
  199. package/lib/esm/icons/RocketSvg.js.map +1 -1
  200. package/lib/esm/icons/SendCheckSvg.js +40 -55
  201. package/lib/esm/icons/SendCheckSvg.js.map +1 -1
  202. package/lib/esm/icons/SendMessageSvg.js +30 -45
  203. package/lib/esm/icons/SendMessageSvg.js.map +1 -1
  204. package/lib/esm/icons/SendXSvg.js +40 -55
  205. package/lib/esm/icons/SendXSvg.js.map +1 -1
  206. package/lib/esm/icons/SettingsCheckSvg.js +37 -52
  207. package/lib/esm/icons/SettingsCheckSvg.js.map +1 -1
  208. package/lib/esm/icons/SettingsXSvg.js +37 -52
  209. package/lib/esm/icons/SettingsXSvg.js.map +1 -1
  210. package/lib/esm/icons/ShieldLockSvg.js +41 -56
  211. package/lib/esm/icons/ShieldLockSvg.js.map +1 -1
  212. package/lib/esm/icons/ShieldOffSvg.js +27 -42
  213. package/lib/esm/icons/ShieldOffSvg.js.map +1 -1
  214. package/lib/esm/icons/SidebarHomeSvg.js +27 -42
  215. package/lib/esm/icons/SidebarHomeSvg.js.map +1 -1
  216. package/lib/esm/icons/SidebarInitiativesSvg.js +37 -52
  217. package/lib/esm/icons/SidebarInitiativesSvg.js.map +1 -1
  218. package/lib/esm/icons/SidebarPlusSvg.js +27 -42
  219. package/lib/esm/icons/SidebarPlusSvg.js.map +1 -1
  220. package/lib/esm/icons/SidebarSearchSvg.js +27 -42
  221. package/lib/esm/icons/SidebarSearchSvg.js.map +1 -1
  222. package/lib/esm/icons/SidebarSettingsSvg.js +27 -42
  223. package/lib/esm/icons/SidebarSettingsSvg.js.map +1 -1
  224. package/lib/esm/icons/SidebarTasksSvg.js +27 -42
  225. package/lib/esm/icons/SidebarTasksSvg.js.map +1 -1
  226. package/lib/esm/icons/SidebarTeamSvg.js +44 -62
  227. package/lib/esm/icons/SidebarTeamSvg.js.map +1 -1
  228. package/lib/esm/icons/TaskAttachmentSvg.js +21 -30
  229. package/lib/esm/icons/TaskAttachmentSvg.js.map +1 -1
  230. package/lib/esm/icons/TaskCalendarSvg.js +44 -62
  231. package/lib/esm/icons/TaskCalendarSvg.js.map +1 -1
  232. package/lib/esm/icons/TaskCommentBubbleSvg.js +21 -30
  233. package/lib/esm/icons/TaskCommentBubbleSvg.js.map +1 -1
  234. package/lib/esm/icons/TaskDeleteSvg.js +27 -42
  235. package/lib/esm/icons/TaskDeleteSvg.js.map +1 -1
  236. package/lib/esm/icons/TaskDependencyBlockedSvg.js +27 -43
  237. package/lib/esm/icons/TaskDependencyBlockedSvg.js.map +1 -1
  238. package/lib/esm/icons/TaskDependencyReadySvg.js +27 -43
  239. package/lib/esm/icons/TaskDependencyReadySvg.js.map +1 -1
  240. package/lib/esm/icons/TaskMenuDotsSvg.js +37 -52
  241. package/lib/esm/icons/TaskMenuDotsSvg.js.map +1 -1
  242. package/lib/esm/icons/TaskTagSvg.js +27 -42
  243. package/lib/esm/icons/TaskTagSvg.js.map +1 -1
  244. package/lib/esm/icons/TeamMemberEmailSvg.js +27 -42
  245. package/lib/esm/icons/TeamMemberEmailSvg.js.map +1 -1
  246. package/lib/esm/icons/TeamMemberLocationSvg.js +27 -42
  247. package/lib/esm/icons/TeamMemberLocationSvg.js.map +1 -1
  248. package/lib/esm/icons/WrenchSvg.js +21 -30
  249. package/lib/esm/icons/WrenchSvg.js.map +1 -1
  250. package/lib/esm/icons/XBadgeSvg.js +27 -42
  251. package/lib/esm/icons/XBadgeSvg.js.map +1 -1
  252. package/lib/esm/icons/markdown/MarkdownCheckboxCheckedSvg.js +30 -42
  253. package/lib/esm/icons/markdown/MarkdownCheckboxCheckedSvg.js.map +1 -1
  254. package/lib/esm/icons/markdown/MarkdownCheckboxUncheckedSvg.js +22 -28
  255. package/lib/esm/icons/markdown/MarkdownCheckboxUncheckedSvg.js.map +1 -1
  256. package/lib/esm/icons/markdown/MarkdownCopySuccessSvg.js +41 -53
  257. package/lib/esm/icons/markdown/MarkdownCopySuccessSvg.js.map +1 -1
  258. package/lib/esm/icons/markdown/MarkdownCopySvg.js +30 -42
  259. package/lib/esm/icons/markdown/MarkdownCopySvg.js.map +1 -1
  260. package/lib/esm/icons/markdown/MarkdownExternalLinkSvg.js +39 -51
  261. package/lib/esm/icons/markdown/MarkdownExternalLinkSvg.js.map +1 -1
  262. package/lib/esm/index.js +34 -77
  263. package/lib/esm/style.css +2 -0
  264. package/lib/esm/style.js +4 -0
  265. package/lib/esm/styles/slots.js +0 -2
  266. package/lib/esm/svg/ChevronDownIcon.js +11 -10
  267. package/lib/esm/svg/ChevronDownIcon.js.map +1 -1
  268. package/lib/esm/svg/ChevronRightIcon.js +11 -9
  269. package/lib/esm/svg/ChevronRightIcon.js.map +1 -1
  270. package/lib/esm/svg/GlobeIcon.js +11 -6
  271. package/lib/esm/svg/GlobeIcon.js.map +1 -1
  272. package/lib/esm/theme/ThemeProvider.js +33 -37
  273. package/lib/esm/theme/ThemeProvider.js.map +1 -1
  274. package/lib/esm/theme/VisuallyHidden.js +12 -8
  275. package/lib/esm/theme/VisuallyHidden.js.map +1 -1
  276. package/lib/esm/theme/accessibility.css.js +7 -8
  277. package/lib/esm/theme/accessibility.css.js.map +1 -1
  278. package/lib/esm/theme/colors.js +101 -100
  279. package/lib/esm/theme/colors.js.map +1 -1
  280. package/lib/esm/theme/common.js +122 -123
  281. package/lib/esm/theme/common.js.map +1 -1
  282. package/lib/esm/theme/containerQueries.js +14 -13
  283. package/lib/esm/theme/containerQueries.js.map +1 -1
  284. package/lib/esm/theme/global.css.js +1 -2
  285. package/lib/esm/theme/index.js +9 -28
  286. package/lib/esm/theme/sprinkles.css.js +68484 -9
  287. package/lib/esm/theme/sprinkles.css.js.map +1 -1
  288. package/lib/esm/theme/theme.css.js +1 -2
  289. package/lib/esm/theme/themeContract.js +1025 -1035
  290. package/lib/esm/theme/themeContract.js.map +1 -1
  291. package/lib/esm/theme/tools.js +16 -19
  292. package/lib/esm/theme/tools.js.map +1 -1
  293. package/lib/style.d.ts +5 -0
  294. package/lib/style.d.ts.map +1 -0
  295. package/lib/style.js +5 -0
  296. package/lib/types/style.d.ts +5 -0
  297. package/lib/types/style.d.ts.map +1 -0
  298. package/package.json +4 -3
  299. package/lib/esm/atomic/atoms/badge/badge.css.ts.vanilla-BxMgYgcH.css +0 -1
  300. package/lib/esm/atomic/atoms/button/button.css.ts.vanilla-BYFxDZro.css +0 -1
  301. package/lib/esm/atomic/atoms/checkbox/checkbox.css.ts.vanilla-D6TvWxlo.css +0 -1
  302. package/lib/esm/atomic/atoms/input/input.css.ts.vanilla-D_X5_tcn.css +0 -1
  303. package/lib/esm/atomic/atoms/textarea/textarea.css.ts.vanilla-IrvNTQEt.css +0 -1
  304. package/lib/esm/atomic/molecules/breadcrumb_navigation/breadcrumbNavigation.css.ts.vanilla-Bhz61Foa.css +0 -1
  305. package/lib/esm/atomic/molecules/breadcrumb_navigation/types.js.map +0 -1
  306. package/lib/esm/atomic/molecules/tabs/tabs.css.ts.vanilla-DQm5wO0K.css +0 -1
  307. package/lib/esm/atomic/molecules/toast/toast.css.ts.vanilla-2GtcGJsi.css +0 -1
  308. package/lib/esm/components/charts/billingUsageLineChart.css.ts.vanilla-7e3dy1Dj.css +0 -1
  309. package/lib/esm/components/data-table/DataTable.css.ts.vanilla-BLE98fwj.css +0 -1
  310. package/lib/esm/components/data-table/TableCell.css.ts.vanilla-i5QJvdbl.css +0 -1
  311. package/lib/esm/components/layout/ContentLayout.css.ts.vanilla-tn0RQdqM.css +0 -0
  312. package/lib/esm/components/select/SimpleSelect.css.ts.vanilla-Bil1v8q6.css +0 -1
  313. package/lib/esm/components/tile/InfoTile.css.ts.vanilla-ByCg4UKz.css +0 -1
  314. package/lib/esm/index.js.map +0 -1
  315. package/lib/esm/styles/slots.js.map +0 -1
  316. package/lib/esm/theme/accessibility.css.ts.vanilla-D6gfeWvf.css +0 -1
  317. package/lib/esm/theme/global.css.js.map +0 -1
  318. package/lib/esm/theme/global.css.ts.vanilla-ClXnHnoy.css +0 -1
  319. package/lib/esm/theme/index.js.map +0 -1
  320. package/lib/esm/theme/sprinkles.css.ts.vanilla-DOI5FNoi.css +0 -1
  321. package/lib/esm/theme/theme.css.js.map +0 -1
  322. package/lib/esm/theme/theme.css.ts.vanilla-a3SsXff5.css +0 -1
@@ -1,17 +1,18 @@
1
- import { jsx as f } from "react/jsx-runtime";
2
- import { badge as i } from "./badge.css.js";
3
- import { cx as m } from "../../../theme/tools.js";
4
- const d = ({
5
- children: o,
6
- tone: r,
7
- className: t,
8
- loading: e = !1
9
- }) => {
10
- let a = "off";
11
- return e && (a = "on"), /* @__PURE__ */ f("span", { className: m(i({ tone: r, loading: a }), t), children: o });
1
+ import { badge as e } from "./badge.css.js";
2
+ import { cx as t } from "../../../theme/tools.js";
3
+ import { jsx as n } from "react/jsx-runtime";
4
+ //#region src/atomic/atoms/badge/Badge.tsx
5
+ var r = ({ children: r, tone: i, className: a, loading: o = !1 }) => {
6
+ let s = "off";
7
+ return o && (s = "on"), /* @__PURE__ */ n("span", {
8
+ className: t(e({
9
+ tone: i,
10
+ loading: s
11
+ }), a),
12
+ children: r
13
+ });
12
14
  };
13
- export {
14
- d as Badge,
15
- d as default
16
- };
17
- //# sourceMappingURL=Badge.js.map
15
+ //#endregion
16
+ export { r as Badge, r as default };
17
+
18
+ //# sourceMappingURL=Badge.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.js","sources":["../../../../../src/atomic/atoms/badge/Badge.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { badge } from './badge.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype Props = {\n children: ReactNode;\n tone?: BadgeTone;\n className?: string;\n loading?: boolean;\n};\n\ntype BadgeTone =\n | 'neutral'\n | 'info'\n | 'success'\n | 'warning'\n | 'danger'\n | 'accent';\n\nexport const Badge = ({\n children,\n tone,\n className,\n loading = false,\n}: Props): JSX.Element => {\n let loadingVariant: 'on' | 'off' = 'off';\n if (loading) {\n loadingVariant = 'on';\n }\n\n return (\n <span className={cx(badge({ tone, loading: loadingVariant }), className)}>\n {children}\n </span>\n );\n};\n\nexport default Badge;\n"],"names":["Badge","children","tone","className","loading","loadingVariant","jsx","cx","badge"],"mappings":";;;AAoBO,MAAMA,IAAQ,CAAC;AAAA,EACpB,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,MAA0B;AACxB,MAAIC,IAA+B;AACnC,SAAID,MACFC,IAAiB,OAIjB,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAGC,EAAM,EAAE,MAAAN,GAAM,SAASG,EAAA,CAAgB,GAAGF,CAAS,GACpE,UAAAF,EAAA,CACH;AAEJ;"}
1
+ {"version":3,"file":"Badge.js","names":[],"sources":["../../../../../src/atomic/atoms/badge/Badge.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { badge } from './badge.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype Props = {\n children: ReactNode;\n tone?: BadgeTone;\n className?: string;\n loading?: boolean;\n};\n\ntype BadgeTone =\n | 'neutral'\n | 'info'\n | 'success'\n | 'warning'\n | 'danger'\n | 'accent';\n\nexport const Badge = ({\n children,\n tone,\n className,\n loading = false,\n}: Props): JSX.Element => {\n let loadingVariant: 'on' | 'off' = 'off';\n if (loading) {\n loadingVariant = 'on';\n }\n\n return (\n <span className={cx(badge({ tone, loading: loadingVariant }), className)}>\n {children}\n </span>\n );\n};\n\nexport default Badge;\n"],"mappings":";;;;AAoBA,IAAa,KAAS,EACpB,aACA,SACA,cACA,aAAU,SACc;CACxB,IAAI,IAA+B;AAKnC,QAJI,MACF,IAAiB,OAIjB,kBAAC,QAAD;EAAM,WAAW,EAAG,EAAM;GAAE;GAAM,SAAS;GAAgB,CAAC,EAAE,EAAU;EACrE;EACI,CAAA"}
@@ -1,8 +1,30 @@
1
- /* empty css */
2
- /* empty css */
3
- import { createRuntimeFn as v } from "@vanilla-extract/recipes/createRuntimeFn";
4
- var x = v({ defaultClassName: "_1v7kjrra _1v7kjrr0 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9jf txvbqbco txvbqbdnx txvbqb1rf txvbqb8o txvbqbamf txvbqbanx _1v7kjrr1 txvbqbegx", variantClassNames: { tone: { neutral: "_1v7kjrrb _1v7kjrr4 txvbqbv4j txvbqbva3", info: "_1v7kjrrc _1v7kjrr5 txvbqbv2j txvbqbv9p", success: "_1v7kjrrd _1v7kjrr6 txvbqbv0v txvbqbv6p", warning: "_1v7kjrre _1v7kjrr7 txvbqbv0b txvbqbv65", danger: "_1v7kjrrf _1v7kjrr8 txvbqbuzr txvbqbv5l", accent: "_1v7kjrrg _1v7kjrr9 txvbqbv49 txvbqbv9z" }, loading: { on: "_1v7kjrrh _1v7kjrr3", off: "_1v7kjrri " } }, defaultVariants: { tone: "neutral", loading: "off" }, compoundVariants: [] });
5
- export {
6
- x as badge
7
- };
8
- //# sourceMappingURL=badge.css.js.map
1
+ /* empty css */
2
+ /* empty css */
3
+ import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
4
+ //#region src/atomic/atoms/badge/badge.css.ts
5
+ var t = e({
6
+ defaultClassName: "_1v7kjrra _1v7kjrr0 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9jf txvbqbco txvbqbdnx txvbqb1rf txvbqb8o txvbqbamf txvbqbanx _1v7kjrr1 txvbqbegx",
7
+ variantClassNames: {
8
+ tone: {
9
+ neutral: "_1v7kjrrb _1v7kjrr4 txvbqbv4j txvbqbva3",
10
+ info: "_1v7kjrrc _1v7kjrr5 txvbqbv2j txvbqbv9p",
11
+ success: "_1v7kjrrd _1v7kjrr6 txvbqbv0v txvbqbv6p",
12
+ warning: "_1v7kjrre _1v7kjrr7 txvbqbv0b txvbqbv65",
13
+ danger: "_1v7kjrrf _1v7kjrr8 txvbqbuzr txvbqbv5l",
14
+ accent: "_1v7kjrrg _1v7kjrr9 txvbqbv49 txvbqbv9z"
15
+ },
16
+ loading: {
17
+ on: "_1v7kjrrh _1v7kjrr3",
18
+ off: "_1v7kjrri "
19
+ }
20
+ },
21
+ defaultVariants: {
22
+ tone: "neutral",
23
+ loading: "off"
24
+ },
25
+ compoundVariants: []
26
+ });
27
+ //#endregion
28
+ export { t as badge };
29
+
30
+ //# sourceMappingURL=badge.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"badge.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
1
+ {"version":3,"file":"badge.css.js","names":[],"sources":["../../../../../src/atomic/atoms/badge/badge.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nconst baseSprinkles = sprinkles({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n paddingY: 2,\n paddingX: 3,\n borderRadius: 'md',\n fontSize: 'xs',\n fontWeight: 'medium',\n gap: 1,\n});\n\nconst baseTypography = sprinkles({\n lineHeight: 1,\n});\n\nconst shimmerAnimation = keyframes({\n '0%': {\n transform: 'translateX(-120%)',\n },\n '50%': {\n transform: 'translateX(0%)',\n },\n '100%': {\n transform: 'translateX(120%)',\n },\n});\n\nconst loadingBase = style({\n position: 'relative',\n overflow: 'hidden',\n selectors: {\n '&::after': {\n content: '',\n position: 'absolute',\n inset: 0,\n background: `linear-gradient(\n 100deg,\n ${vars.colors.transparent} 0%,\n color-mix(in srgb, ${vars.colors.white} 20%, transparent) 25%,\n color-mix(in srgb, ${vars.colors.white} 90%, transparent) 50%,\n color-mix(in srgb, ${vars.colors.white} 20%, transparent) 75%,\n ${vars.colors.transparent} 100%\n )`,\n transform: 'translateX(-120%)',\n animation: `${shimmerAnimation} 1.1s ease-in-out infinite`,\n opacity: 0.9,\n pointerEvents: 'none',\n willChange: 'transform',\n },\n },\n});\n\nexport const badge = recipe({\n base: [baseSprinkles, baseTypography],\n variants: {\n tone: {\n neutral: sprinkles({\n backgroundColor: 'brandLightGray',\n color: 'brandDarkGray',\n }),\n info: sprinkles({\n backgroundColor: 'primaryLight',\n color: 'brandPrimaryRed',\n }),\n success: sprinkles({ backgroundColor: 'green-100', color: 'green-700' }),\n warning: sprinkles({ backgroundColor: 'amber-100', color: 'amber-700' }),\n danger: sprinkles({ backgroundColor: 'red-100', color: 'red-700' }),\n accent: sprinkles({\n backgroundColor: 'brandSecondaryOrange',\n color: 'brandWhite',\n }),\n },\n loading: {\n on: loadingBase,\n off: '',\n },\n },\n defaultVariants: {\n tone: 'neutral',\n loading: 'off',\n },\n compoundVariants: [],\n});\n\nexport type BadgeVariants = RecipeVariants<typeof badge>;\n"],"mappings":""}
@@ -1,60 +1,48 @@
1
- import { jsxs as v, jsx as o, Fragment as x } from "react/jsx-runtime";
2
- import { ButtonLoadingSpinnerSvg as B } from "../../../icons/ButtonLoadingSpinnerSvg.js";
3
- import { useUiTranslation as j } from "../../../i18n/useUiTranslation.js";
4
- import { button as w, spinnerIcon as C, loadingIndicator as R, iconLeft as S, content as z, iconRight as D } from "./button.css.js";
5
1
  import { cx as e } from "../../../theme/tools.js";
6
- const q = (l) => {
7
- const { t: r } = j(), {
8
- children: d,
9
- className: m,
10
- disabled: h,
11
- isLoading: i = !1,
12
- loadingLabel: p,
13
- classes: s,
14
- leftIcon: a,
15
- rightIcon: c,
16
- size: f,
17
- variant: g,
18
- width: u,
19
- ref: N,
20
- ...b
21
- } = l, L = e(w({ variant: g, size: f, width: u }), m), I = !!i || !!h;
22
- let t;
23
- if (i) {
24
- const n = p ?? r("common.loading");
25
- t = /* @__PURE__ */ v("span", { className: e(R, s?.loadingIndicator), children: [
26
- /* @__PURE__ */ o(
27
- B,
28
- {
29
- className: e(C, s?.spinnerIcon),
30
- width: 20,
31
- height: 20
32
- }
33
- ),
34
- n
35
- ] });
36
- } else {
37
- const n = [];
38
- a != null && n.push(
39
- /* @__PURE__ */ o("span", { className: e(S, s?.iconLeft), children: a }, "left-icon")
40
- ), n.push(
41
- /* @__PURE__ */ o("span", { className: e(z, s?.content), children: d }, "content")
42
- ), c != null && n.push(
43
- /* @__PURE__ */ o("span", { className: e(D, s?.iconRight), children: c }, "right-icon")
44
- ), t = /* @__PURE__ */ o(x, { children: n });
45
- }
46
- return /* @__PURE__ */ o(
47
- "button",
48
- {
49
- ref: N,
50
- className: L,
51
- disabled: I,
52
- ...b,
53
- children: t
54
- }
55
- );
2
+ import { ButtonLoadingSpinnerSvg as t } from "../../../icons/ButtonLoadingSpinnerSvg.js";
3
+ import { useUiTranslation as n } from "../../../i18n/useUiTranslation.js";
4
+ import { button as r, content as i, iconLeft as a, iconRight as o, loadingIndicator as s, spinnerIcon as c } from "./button.css.js";
5
+ import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
6
+ import "react";
7
+ //#region src/atomic/atoms/button/Button.tsx
8
+ var f = (f) => {
9
+ let { t: p } = n(), { children: m, className: h, disabled: g, isLoading: _ = !1, loadingLabel: v, classes: y, leftIcon: b, rightIcon: x, size: S, variant: C, width: w, ref: T, ...E } = f, D = e(r({
10
+ variant: C,
11
+ size: S,
12
+ width: w
13
+ }), h), O = !!_ || !!g, k;
14
+ if (_) {
15
+ let n = v ?? p("common.loading");
16
+ k = /* @__PURE__ */ d("span", {
17
+ className: e(s, y?.loadingIndicator),
18
+ children: [/* @__PURE__ */ u(t, {
19
+ className: e(c, y?.spinnerIcon),
20
+ width: 20,
21
+ height: 20
22
+ }), n]
23
+ });
24
+ } else {
25
+ let t = [];
26
+ b != null && t.push(/* @__PURE__ */ u("span", {
27
+ className: e(a, y?.iconLeft),
28
+ children: b
29
+ }, "left-icon")), t.push(/* @__PURE__ */ u("span", {
30
+ className: e(i, y?.content),
31
+ children: m
32
+ }, "content")), x != null && t.push(/* @__PURE__ */ u("span", {
33
+ className: e(o, y?.iconRight),
34
+ children: x
35
+ }, "right-icon")), k = /* @__PURE__ */ u(l, { children: t });
36
+ }
37
+ return /* @__PURE__ */ u("button", {
38
+ ref: T,
39
+ className: D,
40
+ disabled: O,
41
+ ...E,
42
+ children: k
43
+ });
56
44
  };
57
- export {
58
- q as Button
59
- };
60
- //# sourceMappingURL=Button.js.map
45
+ //#endregion
46
+ export { f as Button };
47
+
48
+ //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../../../src/atomic/atoms/button/Button.tsx"],"sourcesContent":["import React, { type Ref, type JSX } from 'react';\n\nimport { ButtonLoadingSpinnerSvg } from '../../../icons/ButtonLoadingSpinnerSvg.js';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\n\nimport {\n button,\n content as contentClass,\n iconLeft,\n iconRight,\n loadingIndicator,\n spinnerIcon,\n type ButtonVariants,\n} from './button.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype ButtonSlot =\n | 'loadingIndicator'\n | 'spinnerIcon'\n | 'content'\n | 'iconLeft'\n | 'iconRight';\n\ntype SlotClasses<T extends string> = Partial<Record<T, string>>;\n\n// Omit the conflicting 'size' property from HTML button attributes\ntype Props = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> & {\n variant?: NonNullable<ButtonVariants>['variant'];\n size?: NonNullable<ButtonVariants>['size'];\n width?: NonNullable<ButtonVariants>['width'];\n isLoading?: boolean;\n loadingLabel?: React.ReactNode;\n leftIcon?: React.ReactNode;\n rightIcon?: React.ReactNode;\n ref?: Ref<HTMLButtonElement>;\n classes?: SlotClasses<ButtonSlot>;\n};\n\nexport const Button = (props: Props): JSX.Element => {\n const { t } = useUiTranslation();\n const {\n children,\n className,\n disabled,\n isLoading = false,\n loadingLabel,\n classes,\n leftIcon,\n rightIcon,\n size,\n variant,\n width,\n ref,\n ...rest\n } = props;\n\n const resolvedClassName = cx(button({ variant, size, width }), className);\n const isDisabled = Boolean(isLoading) || Boolean(disabled);\n\n let renderedContent: JSX.Element;\n\n if (isLoading) {\n const resolvedLoadingLabel = loadingLabel ?? t('common.loading');\n renderedContent = (\n <span className={cx(loadingIndicator, classes?.loadingIndicator)}>\n <ButtonLoadingSpinnerSvg\n className={cx(spinnerIcon, classes?.spinnerIcon)}\n width={20}\n height={20}\n />\n {resolvedLoadingLabel}\n </span>\n );\n } else {\n const iconElements: JSX.Element[] = [];\n\n if (leftIcon != null) {\n iconElements.push(\n <span className={cx(iconLeft, classes?.iconLeft)} key=\"left-icon\">\n {leftIcon}\n </span>,\n );\n }\n\n iconElements.push(\n <span className={cx(contentClass, classes?.content)} key=\"content\">\n {children}\n </span>,\n );\n\n if (rightIcon != null) {\n iconElements.push(\n <span className={cx(iconRight, classes?.iconRight)} key=\"right-icon\">\n {rightIcon}\n </span>,\n );\n }\n\n renderedContent = <>{iconElements}</>;\n }\n\n return (\n <button\n ref={ref}\n className={resolvedClassName}\n disabled={isDisabled}\n {...rest}\n >\n {renderedContent}\n </button>\n );\n};\n"],"names":["Button","props","t","useUiTranslation","children","className","disabled","isLoading","loadingLabel","classes","leftIcon","rightIcon","size","variant","width","ref","rest","resolvedClassName","cx","button","isDisabled","renderedContent","resolvedLoadingLabel","loadingIndicator","jsx","ButtonLoadingSpinnerSvg","spinnerIcon","iconElements","iconLeft","contentClass","iconRight"],"mappings":";;;;;AAsCO,MAAMA,IAAS,CAACC,MAA8B;AACnD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDf,GAEEgB,IAAoBC,EAAGC,EAAO,EAAE,SAAAN,GAAS,MAAAD,GAAM,OAAAE,GAAO,GAAGT,CAAS,GAClEe,IAAa,EAAQb,KAAc,EAAQD;AAEjD,MAAIe;AAEJ,MAAId,GAAW;AACb,UAAMe,IAAuBd,KAAgBN,EAAE,gBAAgB;AAC/D,IAAAmB,sBACG,QAAA,EAAK,WAAWH,EAAGK,GAAkBd,GAAS,gBAAgB,GAC7D,UAAA;AAAA,MAAA,gBAAAe;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWP,EAAGQ,GAAajB,GAAS,WAAW;AAAA,UAC/C,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAETa;AAAA,IAAA,GACH;AAAA,EAEJ,OAAO;AACL,UAAMK,IAA8B,CAAA;AAEpC,IAAIjB,KAAY,QACdiB,EAAa;AAAA,MACX,gBAAAH,EAAC,UAAK,WAAWN,EAAGU,GAAUnB,GAAS,QAAQ,GAC5C,UAAAC,EAAA,GADmD,WAEtD;AAAA,IAAA,GAIJiB,EAAa;AAAA,MACX,gBAAAH,EAAC,UAAK,WAAWN,EAAGW,GAAcpB,GAAS,OAAO,GAC/C,UAAAL,EAAA,GADsD,SAEzD;AAAA,IAAA,GAGEO,KAAa,QACfgB,EAAa;AAAA,MACX,gBAAAH,EAAC,UAAK,WAAWN,EAAGY,GAAWrB,GAAS,SAAS,GAC9C,UAAAE,EAAA,GADqD,YAExD;AAAA,IAAA,GAIJU,2BAAqB,UAAAM,EAAA,CAAa;AAAA,EACpC;AAEA,SACE,gBAAAH;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAT;AAAA,MACA,WAAWE;AAAA,MACX,UAAUG;AAAA,MACT,GAAGJ;AAAA,MAEH,UAAAK;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1
+ {"version":3,"file":"Button.js","names":[],"sources":["../../../../../src/atomic/atoms/button/Button.tsx"],"sourcesContent":["import React, { type Ref, type JSX } from 'react';\n\nimport { ButtonLoadingSpinnerSvg } from '../../../icons/ButtonLoadingSpinnerSvg.js';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\n\nimport {\n button,\n content as contentClass,\n iconLeft,\n iconRight,\n loadingIndicator,\n spinnerIcon,\n type ButtonVariants,\n} from './button.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype ButtonSlot =\n | 'loadingIndicator'\n | 'spinnerIcon'\n | 'content'\n | 'iconLeft'\n | 'iconRight';\n\ntype SlotClasses<T extends string> = Partial<Record<T, string>>;\n\n// Omit the conflicting 'size' property from HTML button attributes\ntype Props = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> & {\n variant?: NonNullable<ButtonVariants>['variant'];\n size?: NonNullable<ButtonVariants>['size'];\n width?: NonNullable<ButtonVariants>['width'];\n isLoading?: boolean;\n loadingLabel?: React.ReactNode;\n leftIcon?: React.ReactNode;\n rightIcon?: React.ReactNode;\n ref?: Ref<HTMLButtonElement>;\n classes?: SlotClasses<ButtonSlot>;\n};\n\nexport const Button = (props: Props): JSX.Element => {\n const { t } = useUiTranslation();\n const {\n children,\n className,\n disabled,\n isLoading = false,\n loadingLabel,\n classes,\n leftIcon,\n rightIcon,\n size,\n variant,\n width,\n ref,\n ...rest\n } = props;\n\n const resolvedClassName = cx(button({ variant, size, width }), className);\n const isDisabled = Boolean(isLoading) || Boolean(disabled);\n\n let renderedContent: JSX.Element;\n\n if (isLoading) {\n const resolvedLoadingLabel = loadingLabel ?? t('common.loading');\n renderedContent = (\n <span className={cx(loadingIndicator, classes?.loadingIndicator)}>\n <ButtonLoadingSpinnerSvg\n className={cx(spinnerIcon, classes?.spinnerIcon)}\n width={20}\n height={20}\n />\n {resolvedLoadingLabel}\n </span>\n );\n } else {\n const iconElements: JSX.Element[] = [];\n\n if (leftIcon != null) {\n iconElements.push(\n <span className={cx(iconLeft, classes?.iconLeft)} key=\"left-icon\">\n {leftIcon}\n </span>,\n );\n }\n\n iconElements.push(\n <span className={cx(contentClass, classes?.content)} key=\"content\">\n {children}\n </span>,\n );\n\n if (rightIcon != null) {\n iconElements.push(\n <span className={cx(iconRight, classes?.iconRight)} key=\"right-icon\">\n {rightIcon}\n </span>,\n );\n }\n\n renderedContent = <>{iconElements}</>;\n }\n\n return (\n <button\n ref={ref}\n className={resolvedClassName}\n disabled={isDisabled}\n {...rest}\n >\n {renderedContent}\n </button>\n );\n};\n"],"mappings":";;;;;;;AAsCA,IAAa,KAAU,MAA8B;CACnD,IAAM,EAAE,SAAM,GAAkB,EAC1B,EACJ,aACA,cACA,aACA,eAAY,IACZ,iBACA,YACA,aACA,cACA,SACA,YACA,UACA,QACA,GAAG,MACD,GAEE,IAAoB,EAAG,EAAO;EAAE;EAAS;EAAM;EAAO,CAAC,EAAE,EAAU,EACnE,IAAa,EAAQ,KAAc,EAAQ,GAE7C;AAEJ,KAAI,GAAW;EACb,IAAM,IAAuB,KAAgB,EAAE,iBAAiB;AAChE,MACE,kBAAC,QAAD;GAAM,WAAW,EAAG,GAAkB,GAAS,iBAAiB;aAAhE,CACE,kBAAC,GAAD;IACE,WAAW,EAAG,GAAa,GAAS,YAAY;IAChD,OAAO;IACP,QAAQ;IACR,CAAA,EACD,EACI;;QAEJ;EACL,IAAM,IAA8B,EAAE;AAwBtC,EAtBI,KAAY,QACd,EAAa,KACX,kBAAC,QAAD;GAAM,WAAW,EAAG,GAAU,GAAS,SAAS;aAC7C;GACI,EAF+C,YAE/C,CACR,EAGH,EAAa,KACX,kBAAC,QAAD;GAAM,WAAW,EAAG,GAAc,GAAS,QAAQ;GAChD;GACI,EAFkD,UAElD,CACR,EAEG,KAAa,QACf,EAAa,KACX,kBAAC,QAAD;GAAM,WAAW,EAAG,GAAW,GAAS,UAAU;aAC/C;GACI,EAFiD,aAEjD,CACR,EAGH,IAAkB,kBAAA,GAAA,EAAA,UAAG,GAAgB,CAAA;;AAGvC,QACE,kBAAC,UAAD;EACO;EACL,WAAW;EACX,UAAU;EACV,GAAI;YAEH;EACM,CAAA"}
@@ -1,63 +1,49 @@
1
- import { jsx as n, jsxs as v, Fragment as B } from "react/jsx-runtime";
2
- import { Link as C } from "@plumile/router";
3
- import { ButtonLoadingSpinnerSvg as I } from "../../../icons/ButtonLoadingSpinnerSvg.js";
4
- import { cx as x } from "../../../theme/tools.js";
5
- import { button as D, activeButton as j, loadingIndicator as k, spinnerIcon as w, iconLeft as S, content as z, iconRight as E } from "./button.css.js";
6
- const A = (d) => {
7
- const {
8
- children: a,
9
- className: m,
10
- isDisabled: h,
11
- isLoading: l = !1,
12
- leftIcon: s,
13
- loadingLabel: p,
14
- ref: f,
15
- rightIcon: t,
16
- size: u,
17
- variant: o,
18
- width: g,
19
- ...N
20
- } = d, b = x(D({ variant: o, size: u, width: g }), m), c = !!l || !!h, L = o === "icon";
21
- let i;
22
- if (l)
23
- i = /* @__PURE__ */ v("span", { className: k, children: [
24
- /* @__PURE__ */ n(
25
- I,
26
- {
27
- className: w,
28
- width: 20,
29
- height: 20
30
- }
31
- ),
32
- p
33
- ] });
34
- else if (L)
35
- i = /* @__PURE__ */ n("span", { children: s ?? t ?? a ?? null });
36
- else {
37
- const e = [];
38
- s != null && e.push(
39
- /* @__PURE__ */ n("span", { className: S, children: s }, "left-icon")
40
- ), e.push(
41
- /* @__PURE__ */ n("span", { className: z, children: a }, "content")
42
- ), t != null && e.push(
43
- /* @__PURE__ */ n("span", { className: E, children: t }, "right-icon")
44
- ), i = /* @__PURE__ */ n(B, { children: e });
45
- }
46
- let r;
47
- return c && (r = !0), /* @__PURE__ */ n(
48
- C,
49
- {
50
- ...N,
51
- ref: f,
52
- className: b,
53
- activeClassName: j({ variant: o }),
54
- isDisabled: c,
55
- "aria-disabled": r,
56
- children: i
57
- }
58
- );
1
+ import { cx as e } from "../../../theme/tools.js";
2
+ import { ButtonLoadingSpinnerSvg as t } from "../../../icons/ButtonLoadingSpinnerSvg.js";
3
+ import { activeButton as n, button as r, content as i, iconLeft as a, iconRight as o, loadingIndicator as s, spinnerIcon as c } from "./button.css.js";
4
+ import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
5
+ import { Link as f } from "@plumile/router";
6
+ //#region src/atomic/atoms/button/LinkButton.tsx
7
+ var p = (p) => {
8
+ let { children: m, className: h, isDisabled: g, isLoading: _ = !1, leftIcon: v, loadingLabel: y, ref: b, rightIcon: x, size: S, variant: C, width: w, ...T } = p, E = e(r({
9
+ variant: C,
10
+ size: S,
11
+ width: w
12
+ }), h), D = !!_ || !!g, O = C === "icon", k;
13
+ if (_) k = /* @__PURE__ */ d("span", {
14
+ className: s,
15
+ children: [/* @__PURE__ */ u(t, {
16
+ className: c,
17
+ width: 20,
18
+ height: 20
19
+ }), y]
20
+ });
21
+ else if (O) k = /* @__PURE__ */ u("span", { children: v ?? x ?? m ?? null });
22
+ else {
23
+ let e = [];
24
+ v != null && e.push(/* @__PURE__ */ u("span", {
25
+ className: a,
26
+ children: v
27
+ }, "left-icon")), e.push(/* @__PURE__ */ u("span", {
28
+ className: i,
29
+ children: m
30
+ }, "content")), x != null && e.push(/* @__PURE__ */ u("span", {
31
+ className: o,
32
+ children: x
33
+ }, "right-icon")), k = /* @__PURE__ */ u(l, { children: e });
34
+ }
35
+ let A;
36
+ return D && (A = !0), /* @__PURE__ */ u(f, {
37
+ ...T,
38
+ ref: b,
39
+ className: E,
40
+ activeClassName: n({ variant: C }),
41
+ isDisabled: D,
42
+ "aria-disabled": A,
43
+ children: k
44
+ });
59
45
  };
60
- export {
61
- A as LinkButton
62
- };
63
- //# sourceMappingURL=LinkButton.js.map
46
+ //#endregion
47
+ export { p as LinkButton };
48
+
49
+ //# sourceMappingURL=LinkButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"LinkButton.js","sources":["../../../../../src/atomic/atoms/button/LinkButton.tsx"],"sourcesContent":["import {\n type ComponentPropsWithoutRef,\n type JSX,\n type ReactNode,\n type Ref,\n} from 'react';\nimport { Link } from '@plumile/router';\n\nimport { ButtonLoadingSpinnerSvg } from '../../../icons/ButtonLoadingSpinnerSvg.js';\nimport { cx } from '../../../theme/tools.js';\nimport {\n activeButton,\n button,\n content as contentClass,\n iconLeft,\n iconRight,\n loadingIndicator,\n spinnerIcon,\n type ButtonVariants,\n} from './button.css.js';\n\ntype LinkProps = ComponentPropsWithoutRef<typeof Link>;\n\ntype Props = Omit<LinkProps, 'children' | 'className'> & {\n children: ReactNode;\n className?: string;\n variant?: NonNullable<ButtonVariants>['variant'];\n size?: NonNullable<ButtonVariants>['size'];\n width?: NonNullable<ButtonVariants>['width'];\n isLoading?: boolean;\n loadingLabel?: ReactNode;\n leftIcon?: ReactNode;\n rightIcon?: ReactNode;\n ref?: Ref<HTMLAnchorElement>;\n};\n\nexport const LinkButton = (props: Props): JSX.Element => {\n const {\n children,\n className,\n isDisabled,\n isLoading = false,\n leftIcon,\n loadingLabel,\n ref,\n rightIcon,\n size,\n variant,\n width,\n ...rest\n } = props;\n\n const resolvedClassName = cx(button({ variant, size, width }), className);\n const disabled = Boolean(isLoading) || Boolean(isDisabled);\n const isIconVariant = variant === 'icon';\n\n let renderedContent: JSX.Element;\n\n if (isLoading) {\n renderedContent = (\n <span className={loadingIndicator}>\n <ButtonLoadingSpinnerSvg\n className={spinnerIcon}\n width={20}\n height={20}\n />\n {loadingLabel}\n </span>\n );\n } else if (isIconVariant) {\n const iconContent = leftIcon ?? rightIcon ?? children ?? null;\n\n renderedContent = <span>{iconContent}</span>;\n } else {\n const iconElements: JSX.Element[] = [];\n\n if (leftIcon != null) {\n iconElements.push(\n <span className={iconLeft} key=\"left-icon\">\n {leftIcon}\n </span>,\n );\n }\n\n iconElements.push(\n <span className={contentClass} key=\"content\">\n {children}\n </span>,\n );\n\n if (rightIcon != null) {\n iconElements.push(\n <span className={iconRight} key=\"right-icon\">\n {rightIcon}\n </span>,\n );\n }\n\n renderedContent = <>{iconElements}</>;\n }\n\n let ariaDisabled: true | undefined;\n if (disabled) {\n ariaDisabled = true;\n }\n\n return (\n <Link\n {...rest}\n ref={ref}\n className={resolvedClassName}\n activeClassName={activeButton({ variant })}\n isDisabled={disabled}\n aria-disabled={ariaDisabled}\n >\n {renderedContent}\n </Link>\n );\n};\n"],"names":["LinkButton","props","children","className","isDisabled","isLoading","leftIcon","loadingLabel","ref","rightIcon","size","variant","width","rest","resolvedClassName","cx","button","disabled","isIconVariant","renderedContent","jsxs","loadingIndicator","jsx","ButtonLoadingSpinnerSvg","spinnerIcon","iconElements","iconLeft","contentClass","iconRight","ariaDisabled","Link","activeButton"],"mappings":";;;;;AAoCO,MAAMA,IAAa,CAACC,MAA8B;AACvD,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,KAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDZ,GAEEa,IAAoBC,EAAGC,EAAO,EAAE,SAAAL,GAAS,MAAAD,GAAM,OAAAE,GAAO,GAAGT,CAAS,GAClEc,IAAW,EAAQZ,KAAc,EAAQD,GACzCc,IAAgBP,MAAY;AAElC,MAAIQ;AAEJ,MAAId;AACF,IAAAc,IACE,gBAAAC,EAAC,QAAA,EAAK,WAAWC,GACf,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,UACX,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAETjB;AAAA,IAAA,GACH;AAAA,WAEOW;AAGT,IAAAC,IAAkB,gBAAAG,EAAC,UAAM,UAFLhB,KAAYG,KAAaP,KAAY,KAEhC,CAAY;AAAA,OAChC;AACL,UAAMuB,IAA8B,CAAA;AAEpC,IAAInB,KAAY,QACdmB,EAAa;AAAA,MACX,gBAAAH,EAAC,QAAA,EAAK,WAAWI,GACd,eAD4B,WAE/B;AAAA,IAAA,GAIJD,EAAa;AAAA,MACX,gBAAAH,EAAC,QAAA,EAAK,WAAWK,GACd,UAAAzB,KADgC,SAEnC;AAAA,IAAA,GAGEO,KAAa,QACfgB,EAAa;AAAA,MACX,gBAAAH,EAAC,QAAA,EAAK,WAAWM,GACd,eAD6B,YAEhC;AAAA,IAAA,GAIJT,2BAAqB,UAAAM,EAAA,CAAa;AAAA,EACpC;AAEA,MAAII;AACJ,SAAIZ,MACFY,IAAe,KAIf,gBAAAP;AAAA,IAACQ;AAAA,IAAA;AAAA,MACE,GAAGjB;AAAA,MACJ,KAAAL;AAAA,MACA,WAAWM;AAAA,MACX,iBAAiBiB,EAAa,EAAE,SAAApB,GAAS;AAAA,MACzC,YAAYM;AAAA,MACZ,iBAAeY;AAAA,MAEd,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1
+ {"version":3,"file":"LinkButton.js","names":[],"sources":["../../../../../src/atomic/atoms/button/LinkButton.tsx"],"sourcesContent":["import {\n type ComponentPropsWithoutRef,\n type JSX,\n type ReactNode,\n type Ref,\n} from 'react';\nimport { Link } from '@plumile/router';\n\nimport { ButtonLoadingSpinnerSvg } from '../../../icons/ButtonLoadingSpinnerSvg.js';\nimport { cx } from '../../../theme/tools.js';\nimport {\n activeButton,\n button,\n content as contentClass,\n iconLeft,\n iconRight,\n loadingIndicator,\n spinnerIcon,\n type ButtonVariants,\n} from './button.css.js';\n\ntype LinkProps = ComponentPropsWithoutRef<typeof Link>;\n\ntype Props = Omit<LinkProps, 'children' | 'className'> & {\n children: ReactNode;\n className?: string;\n variant?: NonNullable<ButtonVariants>['variant'];\n size?: NonNullable<ButtonVariants>['size'];\n width?: NonNullable<ButtonVariants>['width'];\n isLoading?: boolean;\n loadingLabel?: ReactNode;\n leftIcon?: ReactNode;\n rightIcon?: ReactNode;\n ref?: Ref<HTMLAnchorElement>;\n};\n\nexport const LinkButton = (props: Props): JSX.Element => {\n const {\n children,\n className,\n isDisabled,\n isLoading = false,\n leftIcon,\n loadingLabel,\n ref,\n rightIcon,\n size,\n variant,\n width,\n ...rest\n } = props;\n\n const resolvedClassName = cx(button({ variant, size, width }), className);\n const disabled = Boolean(isLoading) || Boolean(isDisabled);\n const isIconVariant = variant === 'icon';\n\n let renderedContent: JSX.Element;\n\n if (isLoading) {\n renderedContent = (\n <span className={loadingIndicator}>\n <ButtonLoadingSpinnerSvg\n className={spinnerIcon}\n width={20}\n height={20}\n />\n {loadingLabel}\n </span>\n );\n } else if (isIconVariant) {\n const iconContent = leftIcon ?? rightIcon ?? children ?? null;\n\n renderedContent = <span>{iconContent}</span>;\n } else {\n const iconElements: JSX.Element[] = [];\n\n if (leftIcon != null) {\n iconElements.push(\n <span className={iconLeft} key=\"left-icon\">\n {leftIcon}\n </span>,\n );\n }\n\n iconElements.push(\n <span className={contentClass} key=\"content\">\n {children}\n </span>,\n );\n\n if (rightIcon != null) {\n iconElements.push(\n <span className={iconRight} key=\"right-icon\">\n {rightIcon}\n </span>,\n );\n }\n\n renderedContent = <>{iconElements}</>;\n }\n\n let ariaDisabled: true | undefined;\n if (disabled) {\n ariaDisabled = true;\n }\n\n return (\n <Link\n {...rest}\n ref={ref}\n className={resolvedClassName}\n activeClassName={activeButton({ variant })}\n isDisabled={disabled}\n aria-disabled={ariaDisabled}\n >\n {renderedContent}\n </Link>\n );\n};\n"],"mappings":";;;;;;AAoCA,IAAa,KAAc,MAA8B;CACvD,IAAM,EACJ,aACA,cACA,eACA,eAAY,IACZ,aACA,iBACA,QACA,cACA,SACA,YACA,UACA,GAAG,MACD,GAEE,IAAoB,EAAG,EAAO;EAAE;EAAS;EAAM;EAAO,CAAC,EAAE,EAAU,EACnE,IAAW,EAAQ,KAAc,EAAQ,GACzC,IAAgB,MAAY,QAE9B;AAEJ,KAAI,EACF,KACE,kBAAC,QAAD;EAAM,WAAW;YAAjB,CACE,kBAAC,GAAD;GACE,WAAW;GACX,OAAO;GACP,QAAQ;GACR,CAAA,EACD,EACI;;UAEA,EAGT,KAAkB,kBAAC,QAAD,EAAA,UAFE,KAAY,KAAa,KAAY,MAEb,CAAA;MACvC;EACL,IAAM,IAA8B,EAAE;AAwBtC,EAtBI,KAAY,QACd,EAAa,KACX,kBAAC,QAAD;GAAM,WAAW;aACd;GACI,EAFwB,YAExB,CACR,EAGH,EAAa,KACX,kBAAC,QAAD;GAAM,WAAW;GACd;GACI,EAF4B,UAE5B,CACR,EAEG,KAAa,QACf,EAAa,KACX,kBAAC,QAAD;GAAM,WAAW;aACd;GACI,EAFyB,aAEzB,CACR,EAGH,IAAkB,kBAAA,GAAA,EAAA,UAAG,GAAgB,CAAA;;CAGvC,IAAI;AAKJ,QAJI,MACF,IAAe,KAIf,kBAAC,GAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,iBAAiB,EAAa,EAAE,YAAS,CAAC;EAC1C,YAAY;EACZ,iBAAe;YAEd;EACI,CAAA"}
@@ -1,16 +1,95 @@
1
- /* empty css */
2
- /* empty css */
3
- import { createRuntimeFn as b } from "@vanilla-extract/recipes/createRuntimeFn";
4
- var x = b({ defaultClassName: "qmnfour qmnfou0 txvbqb9io txvbqbdnx txvbqbco txvbqbamf txvbqbv qmnfou2 qmnfou1 txvbqb77 txvbqb6x txvbqb7i txvbqb12f txvbqb1px", variantClassNames: { variant: { primary: "qmnfous qmnfou3 txvbqbv47 txvbqbv9z txvbqbamo", secondary: "qmnfout qmnfou5 qmnfou4 txvbqbuzj txvbqbv7z txvbqb1df txvbqb1qf txvbqbsf", text: "qmnfouu qmnfou6 txvbqbuzj txvbqbv7z", success: "qmnfouv qmnfou8 qmnfou7 txvbqbv3v txvbqbv8p", danger: "qmnfouw qmnfoua qmnfou9 txvbqbv3l txvbqbv8p", brand: "qmnfoux qmnfouc qmnfoub txvbqbv9z txvbqbamo txvbqbuyf txvbqb1co txvbqb1qf txvbqbf6 txvbqb8qf", brandGhost: "qmnfouy qmnfoue qmnfoud txvbqbv49 txvbqbv9z txvbqb10f txvbqb1df txvbqb1qf txvbqb78 txvbqb6w txvbqb7k", tab: "qmnfouz qmnfoui qmnfouh txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqbuzj txvbqbv8r txvbqbv txvbqb78 txvbqb6x txvbqb7k txvbqb12f txvbqb1qf txvbqb5sx txvbqb36f txvbqb8x txvbqbamf txvbqb6", icon: "qmnfou10 qmnfoug qmnfouf txvbqbv49 txvbqbv9z txvbqb1t6 txvbqbl9f" }, size: { small: "qmnfou11 qmnfouj txvbqbnvf txvbqboio txvbqbp56 txvbqblwx txvbqb8o txvbqb1rx txvbqbc6o", medium: "qmnfou12 qmnfouk txvbqbnvx txvbqboj6 txvbqbp5f txvbqblx6 txvbqb8x txvbqb1rx txvbqbc76", large: "qmnfou13 qmnfoul txvbqbnwf txvbqbojo txvbqbp5x txvbqblxo txvbqb96 txvbqb1ro txvbqbc7o" }, width: { auto: "qmnfou14 qmnfoup txvbqbu66", full: "qmnfou15 qmnfouq txvbqbu6f" } }, defaultVariants: { variant: "primary", size: "medium", width: "auto" }, compoundVariants: [[{ variant: "icon", size: "small" }, "qmnfoum txvbqbtx6 txvbqbc6o txvbqbk6x txvbqbji6"], [{ variant: "icon", size: "medium" }, "qmnfoun txvbqbtxo txvbqbc76 txvbqbk7f txvbqbjio"], [{ variant: "icon", size: "large" }, "qmnfouo txvbqbty6 txvbqbc7o txvbqbk7x txvbqbjj6"]] }), o = "qmnfou16 txvbqbv7z txvbqb12f txvbqb1qf txvbqb5sx txvbqb3jo txvbqbamo", n = b({ defaultClassName: "qmnfou19 qmnfou0 txvbqb9io txvbqbdnx txvbqbco txvbqbamf txvbqbv qmnfou2 qmnfou1 txvbqb77 txvbqb6x txvbqb7i txvbqb12f txvbqb1px", variantClassNames: { variant: { primary: "qmnfou1a qmnfou3 txvbqbv47 txvbqbv9z txvbqbamo", secondary: "qmnfou1b qmnfou5 qmnfou4 txvbqbuzj txvbqbv7z txvbqb1df txvbqb1qf txvbqbsf", text: "qmnfou1c qmnfou6 txvbqbuzj txvbqbv7z", success: "qmnfou1d qmnfou8 qmnfou7 txvbqbv3v txvbqbv8p", danger: "qmnfou1e qmnfoua qmnfou9 txvbqbv3l txvbqbv8p", brand: "qmnfou1f qmnfouc qmnfoub txvbqbv9z txvbqbamo txvbqbuyf txvbqb1co txvbqb1qf txvbqbf6 txvbqb8qf", brandGhost: "qmnfou1g qmnfoue qmnfoud txvbqbv49 txvbqbv9z txvbqb10f txvbqb1df txvbqb1qf txvbqb78 txvbqb6w txvbqb7k", tab: "qmnfou1h qmnfou16 txvbqbv7z txvbqb12f txvbqb1qf txvbqb5sx txvbqb3jo txvbqbamo", icon: "qmnfou1i qmnfoug qmnfouf txvbqbv49 txvbqbv9z txvbqb1t6 txvbqbl9f" }, size: { small: "qmnfou1j qmnfouj txvbqbnvf txvbqboio txvbqbp56 txvbqblwx txvbqb8o txvbqb1rx txvbqbc6o", medium: "qmnfou1k qmnfouk txvbqbnvx txvbqboj6 txvbqbp5f txvbqblx6 txvbqb8x txvbqb1rx txvbqbc76", large: "qmnfou1l qmnfoul txvbqbnwf txvbqbojo txvbqbp5x txvbqblxo txvbqb96 txvbqb1ro txvbqbc7o" }, width: { auto: "qmnfou1m qmnfou17 txvbqbu66", full: "qmnfou1n qmnfou18 txvbqbu6f" } }, defaultVariants: { variant: "primary", size: "medium", width: "auto" }, compoundVariants: [[{ variant: "icon", size: "small" }, "qmnfoum txvbqbtx6 txvbqbc6o txvbqbk6x txvbqbji6"], [{ variant: "icon", size: "medium" }, "qmnfoun txvbqbtxo txvbqbc76 txvbqbk7f txvbqbjio"], [{ variant: "icon", size: "large" }, "qmnfouo txvbqbty6 txvbqbc7o txvbqbk7x txvbqbjj6"]] }), f = "qmnfou1o txvbqb9jf txvbqbco", m = "qmnfou1q txvbqb9jf txvbqbco txvbqbao6", u = "qmnfou1s qmnfou1r txvbqbtwf txvbqbc5x txvbqbaj6", a = "qmnfou1t txvbqb9jf txvbqbco txvbqbh9x", i = "qmnfou1u txvbqb9jf txvbqbco txvbqbgmo", r = "qmnfou1v txvbqb9jf txvbqbco txvbqbdnx";
5
- export {
6
- n as activeButton,
7
- x as button,
8
- f as content,
9
- a as iconLeft,
10
- r as iconOnlyContent,
11
- i as iconRight,
12
- m as loadingIndicator,
13
- u as spinnerIcon,
14
- o as tabButtonActive
15
- };
16
- //# sourceMappingURL=button.css.js.map
1
+ /* empty css */
2
+ /* empty css */
3
+ import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
4
+ //#region src/atomic/atoms/button/button.css.ts
5
+ var t = e({
6
+ defaultClassName: "qmnfour qmnfou0 txvbqb9io txvbqbdnx txvbqbco txvbqbamf txvbqbv qmnfou2 qmnfou1 txvbqb77 txvbqb6x txvbqb7i txvbqb12f txvbqb1px",
7
+ variantClassNames: {
8
+ variant: {
9
+ primary: "qmnfous qmnfou3 txvbqbv47 txvbqbv9z txvbqbamo",
10
+ secondary: "qmnfout qmnfou5 qmnfou4 txvbqbuzj txvbqbv7z txvbqb1df txvbqb1qf txvbqbsf",
11
+ text: "qmnfouu qmnfou6 txvbqbuzj txvbqbv7z",
12
+ success: "qmnfouv qmnfou8 qmnfou7 txvbqbv3v txvbqbv8p",
13
+ danger: "qmnfouw qmnfoua qmnfou9 txvbqbv3l txvbqbv8p",
14
+ brand: "qmnfoux qmnfouc qmnfoub txvbqbv9z txvbqbamo txvbqbuyf txvbqb1co txvbqb1qf txvbqbf6 txvbqb8qf",
15
+ brandGhost: "qmnfouy qmnfoue qmnfoud txvbqbv49 txvbqbv9z txvbqb10f txvbqb1df txvbqb1qf txvbqb78 txvbqb6w txvbqb7k",
16
+ tab: "qmnfouz qmnfoui qmnfouh txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqbuzj txvbqbv8r txvbqbv txvbqb78 txvbqb6x txvbqb7k txvbqb12f txvbqb1qf txvbqb5sx txvbqb36f txvbqb8x txvbqbamf txvbqb6",
17
+ icon: "qmnfou10 qmnfoug qmnfouf txvbqbv49 txvbqbv9z txvbqb1t6 txvbqbl9f"
18
+ },
19
+ size: {
20
+ small: "qmnfou11 qmnfouj txvbqbnvf txvbqboio txvbqbp56 txvbqblwx txvbqb8o txvbqb1rx txvbqbc6o",
21
+ medium: "qmnfou12 qmnfouk txvbqbnvx txvbqboj6 txvbqbp5f txvbqblx6 txvbqb8x txvbqb1rx txvbqbc76",
22
+ large: "qmnfou13 qmnfoul txvbqbnwf txvbqbojo txvbqbp5x txvbqblxo txvbqb96 txvbqb1ro txvbqbc7o"
23
+ },
24
+ width: {
25
+ auto: "qmnfou14 qmnfoup txvbqbu66",
26
+ full: "qmnfou15 qmnfouq txvbqbu6f"
27
+ }
28
+ },
29
+ defaultVariants: {
30
+ variant: "primary",
31
+ size: "medium",
32
+ width: "auto"
33
+ },
34
+ compoundVariants: [
35
+ [{
36
+ variant: "icon",
37
+ size: "small"
38
+ }, "qmnfoum txvbqbtx6 txvbqbc6o txvbqbk6x txvbqbji6"],
39
+ [{
40
+ variant: "icon",
41
+ size: "medium"
42
+ }, "qmnfoun txvbqbtxo txvbqbc76 txvbqbk7f txvbqbjio"],
43
+ [{
44
+ variant: "icon",
45
+ size: "large"
46
+ }, "qmnfouo txvbqbty6 txvbqbc7o txvbqbk7x txvbqbjj6"]
47
+ ]
48
+ }), n = "qmnfou16 txvbqbv7z txvbqb12f txvbqb1qf txvbqb5sx txvbqb3jo txvbqbamo", r = e({
49
+ defaultClassName: "qmnfou19 qmnfou0 txvbqb9io txvbqbdnx txvbqbco txvbqbamf txvbqbv qmnfou2 qmnfou1 txvbqb77 txvbqb6x txvbqb7i txvbqb12f txvbqb1px",
50
+ variantClassNames: {
51
+ variant: {
52
+ primary: "qmnfou1a qmnfou3 txvbqbv47 txvbqbv9z txvbqbamo",
53
+ secondary: "qmnfou1b qmnfou5 qmnfou4 txvbqbuzj txvbqbv7z txvbqb1df txvbqb1qf txvbqbsf",
54
+ text: "qmnfou1c qmnfou6 txvbqbuzj txvbqbv7z",
55
+ success: "qmnfou1d qmnfou8 qmnfou7 txvbqbv3v txvbqbv8p",
56
+ danger: "qmnfou1e qmnfoua qmnfou9 txvbqbv3l txvbqbv8p",
57
+ brand: "qmnfou1f qmnfouc qmnfoub txvbqbv9z txvbqbamo txvbqbuyf txvbqb1co txvbqb1qf txvbqbf6 txvbqb8qf",
58
+ brandGhost: "qmnfou1g qmnfoue qmnfoud txvbqbv49 txvbqbv9z txvbqb10f txvbqb1df txvbqb1qf txvbqb78 txvbqb6w txvbqb7k",
59
+ tab: "qmnfou1h qmnfou16 txvbqbv7z txvbqb12f txvbqb1qf txvbqb5sx txvbqb3jo txvbqbamo",
60
+ icon: "qmnfou1i qmnfoug qmnfouf txvbqbv49 txvbqbv9z txvbqb1t6 txvbqbl9f"
61
+ },
62
+ size: {
63
+ small: "qmnfou1j qmnfouj txvbqbnvf txvbqboio txvbqbp56 txvbqblwx txvbqb8o txvbqb1rx txvbqbc6o",
64
+ medium: "qmnfou1k qmnfouk txvbqbnvx txvbqboj6 txvbqbp5f txvbqblx6 txvbqb8x txvbqb1rx txvbqbc76",
65
+ large: "qmnfou1l qmnfoul txvbqbnwf txvbqbojo txvbqbp5x txvbqblxo txvbqb96 txvbqb1ro txvbqbc7o"
66
+ },
67
+ width: {
68
+ auto: "qmnfou1m qmnfou17 txvbqbu66",
69
+ full: "qmnfou1n qmnfou18 txvbqbu6f"
70
+ }
71
+ },
72
+ defaultVariants: {
73
+ variant: "primary",
74
+ size: "medium",
75
+ width: "auto"
76
+ },
77
+ compoundVariants: [
78
+ [{
79
+ variant: "icon",
80
+ size: "small"
81
+ }, "qmnfoum txvbqbtx6 txvbqbc6o txvbqbk6x txvbqbji6"],
82
+ [{
83
+ variant: "icon",
84
+ size: "medium"
85
+ }, "qmnfoun txvbqbtxo txvbqbc76 txvbqbk7f txvbqbjio"],
86
+ [{
87
+ variant: "icon",
88
+ size: "large"
89
+ }, "qmnfouo txvbqbty6 txvbqbc7o txvbqbk7x txvbqbjj6"]
90
+ ]
91
+ }), i = "qmnfou1o txvbqb9jf txvbqbco", a = "qmnfou1q txvbqb9jf txvbqbco txvbqbao6", o = "qmnfou1s qmnfou1r txvbqbtwf txvbqbc5x txvbqbaj6", s = "qmnfou1t txvbqb9jf txvbqbco txvbqbh9x", c = "qmnfou1u txvbqb9jf txvbqbco txvbqbgmo", l = "qmnfou1v txvbqb9jf txvbqbco txvbqbdnx";
92
+ //#endregion
93
+ export { r as activeButton, t as button, i as content, s as iconLeft, l as iconOnlyContent, c as iconRight, a as loadingIndicator, o as spinnerIcon, n as tabButtonActive };
94
+
95
+ //# sourceMappingURL=button.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
1
+ {"version":3,"file":"button.css.js","names":[],"sources":["../../../../../src/atomic/atoms/button/button.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nconst baseLayout = sprinkles({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontWeight: 'medium',\n cursor: 'pointer',\n});\n\nconst baseInteraction = style([\n sprinkles({\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'default',\n borderWidth: 0,\n borderStyle: 'none',\n }),\n {\n selectors: {\n '&:active': {\n transform: 'scale(0.98)',\n },\n '&:disabled': {\n opacity: '0.7',\n cursor: 'not-allowed',\n },\n },\n },\n]);\n\nconst primaryVariant = sprinkles({\n backgroundColor: 'brandPrimaryRed',\n color: 'brandWhite',\n fontWeight: 'semibold',\n});\n\nconst secondaryVariant = style([\n sprinkles({\n backgroundColor: 'transparent',\n color: 'primary',\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'primary',\n }),\n {\n selectors: {\n '&:hover:not(:disabled)': {\n backgroundColor: vars.colors.primaryLight,\n },\n },\n },\n]);\n\nconst textVariant = sprinkles({\n backgroundColor: 'transparent',\n color: 'primary',\n});\n\nconst successVariant = style([\n sprinkles({ backgroundColor: 'success', color: 'text' }),\n {\n selectors: {\n '&:hover:not(:disabled)': {\n filter: 'brightness(0.9)',\n },\n },\n },\n]);\n\nconst dangerVariant = style([\n sprinkles({ backgroundColor: 'error', color: 'text' }),\n {\n selectors: {\n '&:hover:not(:disabled)': {\n filter: 'brightness(0.9)',\n },\n },\n },\n]);\n\nconst brandVariant = style([\n sprinkles({\n color: 'brandWhite',\n fontWeight: 'semibold',\n backgroundImage: 'brandDiagonal125',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'transparent',\n boxShadow: 'xl',\n }),\n {\n selectors: {\n '&:hover:not(:disabled)': {\n filter: 'brightness(0.97)',\n transform: 'translateY(-1px)',\n },\n '&:active:not(:disabled)': {\n transform: 'translateY(0)',\n },\n },\n },\n]);\n\nconst brandGhostVariant = style([\n sprinkles({\n backgroundColor: 'brandSecondaryOrange',\n color: 'brandWhite',\n borderColor: 'brandSecondaryOrange',\n borderWidth: 'px',\n borderStyle: 'solid',\n transitionProperty: 'colors',\n transitionDuration: 120,\n transitionTimingFunction: 'ease',\n }),\n {\n selectors: {\n '&:hover:not(:disabled)': {\n filter: 'brightness(0.97)',\n },\n },\n },\n]);\n\nconst iconVariant = style([\n sprinkles({\n backgroundColor: 'brandSecondaryOrange',\n color: 'brandWhite',\n borderRadius: 'full',\n padding: 0,\n }),\n {\n selectors: {\n '&:hover:not(:disabled)': {\n backgroundColor: vars.colors.primaryLight,\n },\n '&:focus-visible': {\n outline: `2px solid ${vars.colors.primary}`,\n outlineOffset: '2px',\n },\n },\n },\n]);\n\nconst tabVariant = style([\n sprinkles({\n backgroundColor: 'transparent',\n color: 'textSecondary',\n cursor: 'pointer',\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 2,\n borderBottomColor: 'transparent',\n paddingY: 2,\n paddingX: 4,\n fontSize: 'sm',\n fontWeight: 'medium',\n appearance: 'none',\n }),\n {\n selectors: {\n '&:hover:not(:disabled)': {\n color: vars.colors.text,\n },\n '&:focus-visible': {\n outline: `2px solid ${vars.colors.primary}`,\n outlineOffset: '2px',\n },\n '&:disabled': {\n cursor: 'default',\n opacity: 0.6,\n },\n },\n },\n]);\n\nconst smallSize = sprinkles({\n paddingY: 1,\n paddingX: 4,\n fontSize: 'xs',\n borderRadius: 'xl',\n height: 8,\n});\n\nconst mediumSize = sprinkles({\n paddingY: 2,\n paddingX: 6,\n fontSize: 'sm',\n borderRadius: 'xl',\n height: 10,\n});\n\nconst largeSize = sprinkles({\n paddingY: 4,\n paddingX: 8,\n fontSize: 'base',\n borderRadius: 'lg',\n height: 12,\n});\n\nconst iconSizeSmall = sprinkles({\n width: 8,\n height: 8,\n minWidth: 8,\n minHeight: 8,\n});\n\nconst iconSizeMedium = sprinkles({\n width: 10,\n height: 10,\n minWidth: 10,\n minHeight: 10,\n});\n\nconst iconSizeLarge = sprinkles({\n width: 12,\n height: 12,\n minWidth: 12,\n minHeight: 12,\n});\n\nexport const button = recipe({\n base: [baseLayout, baseInteraction],\n variants: {\n variant: {\n primary: primaryVariant,\n secondary: secondaryVariant,\n text: textVariant,\n success: successVariant,\n danger: dangerVariant,\n brand: brandVariant,\n brandGhost: brandGhostVariant,\n tab: tabVariant,\n icon: iconVariant,\n },\n size: {\n small: smallSize,\n medium: mediumSize,\n large: largeSize,\n },\n width: {\n auto: sprinkles({ width: 'auto' }),\n full: sprinkles({ width: 'full' }),\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'medium',\n width: 'auto',\n },\n compoundVariants: [\n {\n variants: { variant: 'icon', size: 'small' },\n style: iconSizeSmall,\n },\n {\n variants: { variant: 'icon', size: 'medium' },\n style: iconSizeMedium,\n },\n {\n variants: { variant: 'icon', size: 'large' },\n style: iconSizeLarge,\n },\n ],\n});\n\nexport const tabButtonActive = sprinkles({\n color: 'primary',\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 2,\n borderBottomColor: 'primary',\n fontWeight: 'semibold',\n});\n\nexport const activeButton = recipe({\n base: [baseLayout, baseInteraction],\n variants: {\n variant: {\n primary: primaryVariant,\n secondary: secondaryVariant,\n text: textVariant,\n success: successVariant,\n danger: dangerVariant,\n brand: brandVariant,\n brandGhost: brandGhostVariant,\n tab: tabButtonActive,\n icon: iconVariant,\n },\n size: {\n small: smallSize,\n medium: mediumSize,\n large: largeSize,\n },\n width: {\n auto: sprinkles({ width: 'auto' }),\n full: sprinkles({ width: 'full' }),\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'medium',\n width: 'auto',\n },\n compoundVariants: [\n {\n variants: { variant: 'icon', size: 'small' },\n style: iconSizeSmall,\n },\n {\n variants: { variant: 'icon', size: 'medium' },\n style: iconSizeMedium,\n },\n {\n variants: { variant: 'icon', size: 'large' },\n style: iconSizeLarge,\n },\n ],\n});\n\nexport type ButtonVariants = RecipeVariants<typeof button>;\n\nconst INLINE_FLEX = 'inline-flex' as const;\n\nconst inlineFlexCenter = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n});\n\nconst spin = keyframes({\n '0%': {\n transform: 'rotate(0deg)',\n },\n '100%': {\n transform: 'rotate(360deg)',\n },\n});\n\nexport const content = inlineFlexCenter;\n\nexport const loadingIndicator = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n gap: 2,\n});\n\nexport const spinnerIcon = style([\n sprinkles({\n width: 5,\n height: 5,\n flexShrink: 0,\n }),\n {\n animation: `${spin} 1s linear infinite`,\n },\n]);\n\nexport const iconLeft = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n marginRight: 2,\n});\n\nexport const iconRight = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n marginLeft: 2,\n});\n\nexport const iconOnlyContent = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n justifyContent: 'center',\n});\n"],"mappings":""}
@@ -1,41 +1,38 @@
1
- import { jsxs as m, jsx as a } from "react/jsx-runtime";
2
- import { checkboxContainer as i, checkboxInput as b, customCheckbox as h, checkboxLabel as p } from "./checkbox.css.js";
3
- import { Input as f } from "../input/Input.js";
4
- import { Label as x } from "../label/Label.js";
5
- const N = (s) => {
6
- const {
7
- label: e,
8
- checked: c = !1,
9
- disabled: o = !1,
10
- onChange: n,
11
- ref: r,
12
- ...t
13
- } = s;
14
- let l = null;
15
- return e != null && e !== "" && (l = /* @__PURE__ */ a("span", { className: p, children: e })), /* @__PURE__ */ m(x, { className: i, children: [
16
- /* @__PURE__ */ a(
17
- f,
18
- {
19
- ref: r,
20
- type: "checkbox",
21
- className: b,
22
- checked: c,
23
- disabled: o,
24
- onChange: n,
25
- ...t
26
- }
27
- ),
28
- /* @__PURE__ */ a(
29
- "span",
30
- {
31
- className: h({ checked: c, disabled: o }),
32
- "aria-hidden": "true"
33
- }
34
- ),
35
- l
36
- ] });
1
+ import { checkboxContainer as e, checkboxInput as t, checkboxLabel as n, customCheckbox as r } from "./checkbox.css.js";
2
+ import { Input as i } from "../input/Input.js";
3
+ import { Label as a } from "../label/Label.js";
4
+ import { jsx as o, jsxs as s } from "react/jsx-runtime";
5
+ import "react";
6
+ //#region src/atomic/atoms/checkbox/Checkbox.tsx
7
+ var c = (c) => {
8
+ let { label: l, checked: u = !1, disabled: d = !1, onChange: f, ref: p, ...m } = c, h = null;
9
+ return l != null && l !== "" && (h = /* @__PURE__ */ o("span", {
10
+ className: n,
11
+ children: l
12
+ })), /* @__PURE__ */ s(a, {
13
+ className: e,
14
+ children: [
15
+ /* @__PURE__ */ o(i, {
16
+ ref: p,
17
+ type: "checkbox",
18
+ className: t,
19
+ checked: u,
20
+ disabled: d,
21
+ onChange: f,
22
+ ...m
23
+ }),
24
+ /* @__PURE__ */ o("span", {
25
+ className: r({
26
+ checked: u,
27
+ disabled: d
28
+ }),
29
+ "aria-hidden": "true"
30
+ }),
31
+ h
32
+ ]
33
+ });
37
34
  };
38
- export {
39
- N as Checkbox
40
- };
41
- //# sourceMappingURL=Checkbox.js.map
35
+ //#endregion
36
+ export { c as Checkbox };
37
+
38
+ //# sourceMappingURL=Checkbox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../../../../../src/atomic/atoms/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { type JSX, type Ref } from 'react';\nimport {\n checkboxContainer,\n checkboxInput,\n checkboxLabel,\n customCheckbox,\n type CheckboxVariants,\n} from './checkbox.css.js';\nimport { Input } from '../input/Input.js';\nimport { Label } from '../label/Label.js';\n\nexport interface CheckboxProps\n extends\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'checked' | 'size'\n >,\n Omit<CheckboxVariants, 'checked'> {\n label?: string;\n checked?: boolean;\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const Checkbox = (props: CheckboxProps): JSX.Element => {\n const {\n label,\n checked = false,\n disabled = false,\n onChange,\n ref: inputRef,\n ...rest\n } = props;\n\n let labelContent: JSX.Element | null = null;\n if (label != null && label !== '') {\n labelContent = <span className={checkboxLabel}>{label}</span>;\n }\n return (\n <Label className={checkboxContainer}>\n <Input\n ref={inputRef}\n type=\"checkbox\"\n className={checkboxInput}\n checked={checked}\n disabled={disabled}\n onChange={onChange}\n {...rest}\n />\n <span\n className={customCheckbox({ checked, disabled })}\n aria-hidden=\"true\"\n />\n {labelContent}\n </Label>\n );\n};\n"],"names":["Checkbox","props","label","checked","disabled","onChange","inputRef","rest","labelContent","jsx","checkboxLabel","jsxs","Label","checkboxContainer","Input","checkboxInput","customCheckbox"],"mappings":";;;;AAuBO,MAAMA,IAAW,CAACC,MAAsC;AAC7D,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,KAAKC;AAAA,IACL,GAAGC;AAAA,EAAA,IACDN;AAEJ,MAAIO,IAAmC;AACvC,SAAIN,KAAS,QAAQA,MAAU,OAC7BM,IAAe,gBAAAC,EAAC,QAAA,EAAK,WAAWC,GAAgB,UAAAR,GAAM,IAGtD,gBAAAS,EAACC,GAAA,EAAM,WAAWC,GAChB,UAAA;AAAA,IAAA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,MAAK;AAAA,QACL,WAAWS;AAAA,QACX,SAAAZ;AAAA,QACA,UAAAC;AAAA,QACA,UAAAC;AAAA,QACC,GAAGE;AAAA,MAAA;AAAA,IAAA;AAAA,IAEN,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWO,EAAe,EAAE,SAAAb,GAAS,UAAAC,GAAU;AAAA,QAC/C,eAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEbI;AAAA,EAAA,GACH;AAEJ;"}
1
+ {"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../../src/atomic/atoms/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { type JSX, type Ref } from 'react';\nimport {\n checkboxContainer,\n checkboxInput,\n checkboxLabel,\n customCheckbox,\n type CheckboxVariants,\n} from './checkbox.css.js';\nimport { Input } from '../input/Input.js';\nimport { Label } from '../label/Label.js';\n\nexport interface CheckboxProps\n extends\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'checked' | 'size'\n >,\n Omit<CheckboxVariants, 'checked'> {\n label?: string;\n checked?: boolean;\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const Checkbox = (props: CheckboxProps): JSX.Element => {\n const {\n label,\n checked = false,\n disabled = false,\n onChange,\n ref: inputRef,\n ...rest\n } = props;\n\n let labelContent: JSX.Element | null = null;\n if (label != null && label !== '') {\n labelContent = <span className={checkboxLabel}>{label}</span>;\n }\n return (\n <Label className={checkboxContainer}>\n <Input\n ref={inputRef}\n type=\"checkbox\"\n className={checkboxInput}\n checked={checked}\n disabled={disabled}\n onChange={onChange}\n {...rest}\n />\n <span\n className={customCheckbox({ checked, disabled })}\n aria-hidden=\"true\"\n />\n {labelContent}\n </Label>\n );\n};\n"],"mappings":";;;;;;AAuBA,IAAa,KAAY,MAAsC;CAC7D,IAAM,EACJ,UACA,aAAU,IACV,cAAW,IACX,aACA,KAAK,GACL,GAAG,MACD,GAEA,IAAmC;AAIvC,QAHI,KAAS,QAAQ,MAAU,OAC7B,IAAe,kBAAC,QAAD;EAAM,WAAW;YAAgB;EAAa,CAAA,GAG7D,kBAAC,GAAD;EAAO,WAAW;YAAlB;GACE,kBAAC,GAAD;IACE,KAAK;IACL,MAAK;IACL,WAAW;IACF;IACC;IACA;IACV,GAAI;IACJ,CAAA;GACF,kBAAC,QAAD;IACE,WAAW,EAAe;KAAE;KAAS;KAAU,CAAC;IAChD,eAAY;IACZ,CAAA;GACD;GACK"}