@algolia/satellite 1.0.0-beta.130 → 1.0.0-beta.133

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 (458) hide show
  1. package/cjs/AnnouncementBadge/AnnouncementBadge.d.ts +3 -2
  2. package/cjs/AnnouncementBadge/AnnouncementBadge.js +13 -7
  3. package/cjs/AutoComplete/AutoComplete.d.ts +28 -17
  4. package/cjs/AutoComplete/AutoComplete.js +204 -124
  5. package/cjs/AutoComplete/components/AutoCompleteEmptyState.d.ts +4 -4
  6. package/cjs/AutoComplete/components/AutoCompleteEmptyState.js +16 -13
  7. package/cjs/AutoComplete/components/DefaultOptionItem.d.ts +6 -2
  8. package/cjs/AutoComplete/components/DefaultOptionItem.js +24 -17
  9. package/cjs/AutoComplete/types.d.ts +33 -25
  10. package/cjs/AutoComplete/utils.d.ts +4 -4
  11. package/cjs/Avatars/ApplicationAvatar.js +6 -5
  12. package/cjs/Avatars/UserAvatar.js +19 -20
  13. package/cjs/Avatars/utils.d.ts +1 -1
  14. package/cjs/Badge/Badge.d.ts +5 -5
  15. package/cjs/Badge/Badge.js +21 -12
  16. package/cjs/Banner/Banner.d.ts +4 -4
  17. package/cjs/Banner/Banner.js +30 -25
  18. package/cjs/Banners/Alert/Alert.d.ts +4 -4
  19. package/cjs/Banners/Alert/Alert.js +29 -23
  20. package/cjs/Banners/BigBertha/BigBertha.d.ts +2 -2
  21. package/cjs/Banners/BigBertha/BigBertha.js +11 -9
  22. package/cjs/Banners/Promote/Promote.d.ts +5 -5
  23. package/cjs/Banners/Promote/Promote.js +38 -30
  24. package/cjs/Button/Button.js +23 -17
  25. package/cjs/Button/ButtonGroup.d.ts +1 -1
  26. package/cjs/Button/ButtonGroup.js +6 -5
  27. package/cjs/Button/IconButton.d.ts +2 -2
  28. package/cjs/Button/IconButton.js +24 -22
  29. package/cjs/Button/styles.d.ts +1 -1
  30. package/cjs/Button/types.d.ts +5 -5
  31. package/cjs/Card/Card.d.ts +3 -3
  32. package/cjs/Card/Card.js +8 -11
  33. package/cjs/Card/components/CardHeader.js +8 -4
  34. package/cjs/Card/components/CardTitle.d.ts +1 -1
  35. package/cjs/Card/components/CardTitle.js +11 -6
  36. package/cjs/Checkbox/Checkbox.d.ts +3 -3
  37. package/cjs/Checkbox/Checkbox.js +33 -30
  38. package/cjs/ClickAwayContainer/ClickAwayContainer.d.ts +2 -2
  39. package/cjs/ClickAwayContainer/ClickAwayContainer.js +6 -9
  40. package/cjs/DatePicker/DatePicker/DatePicker.d.ts +13 -19
  41. package/cjs/DatePicker/DatePicker/DatePicker.js +84 -63
  42. package/cjs/DatePicker/DatePicker/datePickerReducer.d.ts +2 -2
  43. package/cjs/DatePicker/DatePicker/datePickerReducer.js +2 -2
  44. package/cjs/DatePicker/DateRangePicker/DateRangePicker.d.ts +11 -17
  45. package/cjs/DatePicker/DateRangePicker/DateRangePicker.js +89 -69
  46. package/cjs/DatePicker/DateRangePicker/DateRangePickerDisplay.d.ts +3 -1
  47. package/cjs/DatePicker/DateRangePicker/DateRangePickerDisplay.js +18 -12
  48. package/cjs/DatePicker/DateRangePicker/dateRangePickerReducer.d.ts +3 -3
  49. package/cjs/DatePicker/DateRangePicker/dateRangePickerReducer.js +5 -5
  50. package/cjs/DatePicker/components/Calendar.d.ts +5 -2
  51. package/cjs/DatePicker/components/Calendar.js +12 -10
  52. package/cjs/DatePicker/components/Display.d.ts +3 -3
  53. package/cjs/DatePicker/components/Display.js +6 -5
  54. package/cjs/DatePicker/components/Footer.d.ts +2 -2
  55. package/cjs/DatePicker/components/Footer.js +6 -5
  56. package/cjs/DatePicker/components/FooterActions.d.ts +3 -1
  57. package/cjs/DatePicker/components/FooterActions.js +17 -13
  58. package/cjs/DatePicker/components/Modal.d.ts +5 -5
  59. package/cjs/DatePicker/components/Modal.js +18 -16
  60. package/cjs/DatePicker/components/NavBar.d.ts +6 -3
  61. package/cjs/DatePicker/components/NavBar.js +42 -41
  62. package/cjs/DatePicker/components/SidePanel.d.ts +2 -2
  63. package/cjs/DatePicker/components/SidePanel.js +9 -7
  64. package/cjs/DatePicker/types.d.ts +17 -0
  65. package/cjs/DatePicker/types.js +5 -0
  66. package/cjs/Dropdown/Dropdown.d.ts +8 -8
  67. package/cjs/Dropdown/Dropdown.js +49 -40
  68. package/cjs/Dropdown/DropdownButton.d.ts +3 -3
  69. package/cjs/Dropdown/DropdownButton.js +15 -9
  70. package/cjs/Dropdown/DropdownContext.d.ts +2 -2
  71. package/cjs/Dropdown/DropdownContext.js +2 -9
  72. package/cjs/Dropdown/components/DropdownButtonItem.d.ts +1 -1
  73. package/cjs/Dropdown/components/DropdownButtonItem.js +14 -14
  74. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.d.ts +4 -4
  75. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.js +30 -29
  76. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.d.ts +1 -1
  77. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.js +6 -7
  78. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.d.ts +1 -1
  79. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.js +6 -9
  80. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.d.ts +1 -1
  81. package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.js +6 -9
  82. package/cjs/Dropdown/components/DropdownDivider.js +3 -3
  83. package/cjs/Dropdown/components/DropdownFooterItem.d.ts +2 -2
  84. package/cjs/Dropdown/components/DropdownFooterItem.js +11 -5
  85. package/cjs/Dropdown/components/DropdownLinkItem.js +14 -13
  86. package/cjs/Dropdown/components/DropdownRadioItem.d.ts +2 -2
  87. package/cjs/Dropdown/components/DropdownRadioItem.js +17 -16
  88. package/cjs/Dropdown/components/DropdownTitle.d.ts +1 -1
  89. package/cjs/Dropdown/components/DropdownTitle.js +8 -4
  90. package/cjs/Dropdown/components/DropdownToggleItem.d.ts +3 -3
  91. package/cjs/Dropdown/components/DropdownToggleItem.js +16 -16
  92. package/cjs/Dropdown/useDropdownItemProps.d.ts +3 -3
  93. package/cjs/Dropzone/Dropzone.d.ts +2 -2
  94. package/cjs/Dropzone/Dropzone.js +58 -53
  95. package/cjs/EmptyState/EmptyState.d.ts +1 -1
  96. package/cjs/EmptyState/EmptyState.js +29 -22
  97. package/cjs/EmptyState/types.d.ts +7 -7
  98. package/cjs/Field/Field.d.ts +3 -3
  99. package/cjs/Field/Field.js +33 -26
  100. package/cjs/Flag/Flag.d.ts +2 -2
  101. package/cjs/Flag/Flag.js +45 -40
  102. package/cjs/Flag/Flags.d.ts +3 -3
  103. package/cjs/Flag/Flags.js +32 -22
  104. package/cjs/Flag/types.d.ts +4 -4
  105. package/cjs/FlexGrid/FlexGrid.d.ts +1 -1
  106. package/cjs/FlexGrid/FlexGrid.js +15 -9
  107. package/cjs/FlexGrid/FlexGrid.tailwind.js +2 -2
  108. package/cjs/HelpUnderline/HelpUnderline.d.ts +2 -1
  109. package/cjs/HelpUnderline/HelpUnderline.js +9 -7
  110. package/cjs/Input/Input.d.ts +5 -5
  111. package/cjs/Input/Input.js +119 -114
  112. package/cjs/Input/Input.tailwind.js +0 -3
  113. package/cjs/Insert/Insert.d.ts +2 -2
  114. package/cjs/Insert/Insert.js +29 -23
  115. package/cjs/KeyboardKey/KeyboardKey.d.ts +7 -0
  116. package/cjs/KeyboardKey/KeyboardKey.js +47 -0
  117. package/cjs/KeyboardKey/KeyboardKey.tailwind.d.ts +5 -0
  118. package/cjs/KeyboardKey/KeyboardKey.tailwind.js +33 -0
  119. package/cjs/KeyboardKey/index.d.ts +2 -0
  120. package/cjs/KeyboardKey/index.js +26 -0
  121. package/cjs/Link/BaseLink.d.ts +3 -3
  122. package/cjs/Link/BaseLink.js +7 -7
  123. package/cjs/Link/ButtonLink.d.ts +1 -1
  124. package/cjs/Link/ButtonLink.js +9 -5
  125. package/cjs/Link/IconButtonLink.d.ts +1 -1
  126. package/cjs/Link/IconButtonLink.js +8 -4
  127. package/cjs/Link/Link.d.ts +5 -5
  128. package/cjs/Link/Link.js +16 -15
  129. package/cjs/Medallion/Medallion.d.ts +2 -2
  130. package/cjs/Medallion/Medallion.js +8 -7
  131. package/cjs/Modal/Modal.d.ts +7 -5
  132. package/cjs/Modal/Modal.js +64 -40
  133. package/cjs/Modal/components/ModalFooter.d.ts +2 -2
  134. package/cjs/Modal/components/ModalFooter.js +16 -10
  135. package/cjs/Modal/components/ModalSection.d.ts +1 -1
  136. package/cjs/Modal/components/ModalSection.js +6 -5
  137. package/cjs/Pagination/CompactPagination/CompactPagination.d.ts +12 -0
  138. package/cjs/Pagination/CompactPagination/CompactPagination.js +40 -38
  139. package/cjs/Pagination/DotPagination/DotPagination.d.ts +4 -1
  140. package/cjs/Pagination/DotPagination/DotPagination.js +21 -17
  141. package/cjs/Pagination/Pagination/Pagination.d.ts +7 -1
  142. package/cjs/Pagination/Pagination/Pagination.js +62 -49
  143. package/cjs/ProgressBar/ProgressBar.d.ts +2 -2
  144. package/cjs/ProgressBar/ProgressBar.js +16 -11
  145. package/cjs/ProgressSpinner/ProgressSpinner.d.ts +2 -2
  146. package/cjs/ProgressSpinner/ProgressSpinner.js +21 -11
  147. package/cjs/RadioGroup/RadioButton.d.ts +3 -3
  148. package/cjs/RadioGroup/RadioButton.js +8 -8
  149. package/cjs/RadioGroup/RadioGroup.d.ts +3 -3
  150. package/cjs/RadioGroup/RadioGroup.js +36 -34
  151. package/cjs/RangeSlider/RangeSlider.d.ts +3 -3
  152. package/cjs/RangeSlider/RangeSlider.js +37 -36
  153. package/cjs/Satellite/Satellite.d.ts +2 -2
  154. package/cjs/Satellite/Satellite.js +6 -5
  155. package/cjs/Satellite/SatelliteContext.js +2 -2
  156. package/cjs/Satellite/SatelliteRouter.d.ts +1 -1
  157. package/cjs/ScrollIndicator/ScrollIndicator.d.ts +5 -3
  158. package/cjs/ScrollIndicator/ScrollIndicator.js +13 -16
  159. package/cjs/Select/Select.d.ts +3 -3
  160. package/cjs/Select/Select.js +8 -8
  161. package/cjs/Sidebar/Sidebar.d.ts +6 -4
  162. package/cjs/Sidebar/Sidebar.js +18 -10
  163. package/cjs/Sidebar/SidebarContext.d.ts +1 -1
  164. package/cjs/Sidebar/components/SidebarHeader.d.ts +2 -2
  165. package/cjs/Sidebar/components/SidebarHeader.js +11 -6
  166. package/cjs/Sidebar/components/SidebarLink.d.ts +3 -3
  167. package/cjs/Sidebar/components/SidebarLink.js +32 -22
  168. package/cjs/Switch/Switch.d.ts +3 -3
  169. package/cjs/Switch/Switch.js +17 -19
  170. package/cjs/Switch/SwitchOption.d.ts +1 -1
  171. package/cjs/Switch/SwitchOption.js +24 -16
  172. package/cjs/Tables/DataTable/DataTable.d.ts +15 -5
  173. package/cjs/Tables/DataTable/DataTable.js +62 -60
  174. package/cjs/Tables/DataTable/components/Body.d.ts +6 -6
  175. package/cjs/Tables/DataTable/components/Body.js +62 -47
  176. package/cjs/Tables/DataTable/components/Footer.d.ts +1 -1
  177. package/cjs/Tables/DataTable/components/Footer.js +6 -6
  178. package/cjs/Tables/DataTable/components/Header.js +24 -20
  179. package/cjs/Tables/DataTable/components/HeaderCell.d.ts +3 -3
  180. package/cjs/Tables/DataTable/components/HeaderCell.js +20 -14
  181. package/cjs/Tables/DataTable/components/Loader.d.ts +3 -1
  182. package/cjs/Tables/DataTable/components/Loader.js +19 -20
  183. package/cjs/Tables/DataTable/types.d.ts +3 -3
  184. package/cjs/Tables/DataTable/utils.d.ts +1 -1
  185. package/cjs/Tables/Table/Table.d.ts +3 -3
  186. package/cjs/Tables/Table/Table.js +19 -12
  187. package/cjs/Tables/Table/components/Footer.d.ts +2 -2
  188. package/cjs/Tables/Table/components/Footer.js +6 -5
  189. package/cjs/Tabs/ContentTabs.d.ts +1 -1
  190. package/cjs/Tabs/ContentTabs.js +39 -38
  191. package/cjs/Tabs/LinkTabs.d.ts +1 -1
  192. package/cjs/Tabs/LinkTabs.js +16 -16
  193. package/cjs/Tabs/components/LinkTab.d.ts +3 -3
  194. package/cjs/Tabs/components/LinkTab.js +18 -12
  195. package/cjs/Tabs/types.d.ts +6 -6
  196. package/cjs/Tabs/utils.d.ts +1 -1
  197. package/cjs/Tag/Tag.d.ts +7 -4
  198. package/cjs/Tag/Tag.js +24 -20
  199. package/cjs/TextArea/TextArea.d.ts +3 -3
  200. package/cjs/TextArea/TextArea.js +8 -8
  201. package/cjs/TextWrap/TextWrap.js +20 -20
  202. package/cjs/Toggle/Toggle.d.ts +3 -3
  203. package/cjs/Toggle/Toggle.js +23 -21
  204. package/cjs/Tooltip/OverflowTooltipWrapper.d.ts +3 -2
  205. package/cjs/Tooltip/OverflowTooltipWrapper.js +32 -24
  206. package/cjs/Tooltip/Tooltip.d.ts +3 -3
  207. package/cjs/Tooltip/Tooltip.js +8 -8
  208. package/cjs/Tooltip/TooltipWrapper.d.ts +3 -3
  209. package/cjs/Tooltip/TooltipWrapper.js +47 -39
  210. package/cjs/Tooltip/types.d.ts +2 -2
  211. package/cjs/Typography/Typography.tailwind.js +2 -2
  212. package/cjs/UserContent/UserContent.js +3 -3
  213. package/cjs/UserContent/UserContent.tailwind.js +2 -4
  214. package/cjs/index.d.ts +1 -0
  215. package/cjs/index.js +14 -0
  216. package/cjs/styles/tailwind.config.js +3 -3
  217. package/cjs/tailwind-types.d.ts +1 -1
  218. package/cjs/types.d.ts +3 -3
  219. package/cjs/utilities/utilities.tailwind.d.ts +2 -0
  220. package/cjs/utilities/utilities.tailwind.js +32 -0
  221. package/cjs/utils/genericChangeHandler.d.ts +3 -3
  222. package/cjs/utils/isCssPropertySupported.d.ts +1 -1
  223. package/cjs/utils/isRenderedChild.d.ts +2 -2
  224. package/cjs/utils/pluralize.js +6 -1
  225. package/cjs/utils/useForwardedRef.d.ts +2 -2
  226. package/cjs/utils/useLinkProps.d.ts +2 -2
  227. package/cjs/utils/useTriggerInputChange.d.ts +2 -2
  228. package/esm/AnnouncementBadge/AnnouncementBadge.d.ts +3 -2
  229. package/esm/AnnouncementBadge/AnnouncementBadge.js +12 -6
  230. package/esm/AutoComplete/AutoComplete.d.ts +28 -17
  231. package/esm/AutoComplete/AutoComplete.js +208 -116
  232. package/esm/AutoComplete/components/AutoCompleteEmptyState.d.ts +4 -4
  233. package/esm/AutoComplete/components/AutoCompleteEmptyState.js +16 -12
  234. package/esm/AutoComplete/components/DefaultOptionItem.d.ts +6 -2
  235. package/esm/AutoComplete/components/DefaultOptionItem.js +25 -16
  236. package/esm/AutoComplete/types.d.ts +33 -25
  237. package/esm/AutoComplete/utils.d.ts +4 -4
  238. package/esm/Avatars/ApplicationAvatar.js +5 -4
  239. package/esm/Avatars/UserAvatar.js +19 -14
  240. package/esm/Avatars/utils.d.ts +1 -1
  241. package/esm/Badge/Badge.d.ts +5 -5
  242. package/esm/Badge/Badge.js +21 -11
  243. package/esm/Banner/Banner.d.ts +4 -4
  244. package/esm/Banner/Banner.js +31 -25
  245. package/esm/Banners/Alert/Alert.d.ts +4 -4
  246. package/esm/Banners/Alert/Alert.js +30 -23
  247. package/esm/Banners/BigBertha/BigBertha.d.ts +2 -2
  248. package/esm/Banners/BigBertha/BigBertha.js +11 -8
  249. package/esm/Banners/Promote/Promote.d.ts +5 -5
  250. package/esm/Banners/Promote/Promote.js +37 -28
  251. package/esm/Button/Button.js +23 -16
  252. package/esm/Button/ButtonGroup.d.ts +1 -1
  253. package/esm/Button/ButtonGroup.js +5 -4
  254. package/esm/Button/IconButton.d.ts +2 -2
  255. package/esm/Button/IconButton.js +24 -19
  256. package/esm/Button/styles.d.ts +1 -1
  257. package/esm/Button/types.d.ts +5 -5
  258. package/esm/Card/Card.d.ts +3 -3
  259. package/esm/Card/Card.js +6 -4
  260. package/esm/Card/components/CardHeader.js +8 -3
  261. package/esm/Card/components/CardTitle.d.ts +1 -1
  262. package/esm/Card/components/CardTitle.js +11 -5
  263. package/esm/Checkbox/Checkbox.d.ts +3 -3
  264. package/esm/Checkbox/Checkbox.js +35 -26
  265. package/esm/ClickAwayContainer/ClickAwayContainer.d.ts +2 -2
  266. package/esm/ClickAwayContainer/ClickAwayContainer.js +6 -4
  267. package/esm/DatePicker/DatePicker/DatePicker.d.ts +13 -19
  268. package/esm/DatePicker/DatePicker/DatePicker.js +87 -59
  269. package/esm/DatePicker/DatePicker/datePickerReducer.d.ts +2 -2
  270. package/esm/DatePicker/DatePicker/datePickerReducer.js +2 -2
  271. package/esm/DatePicker/DateRangePicker/DateRangePicker.d.ts +11 -17
  272. package/esm/DatePicker/DateRangePicker/DateRangePicker.js +95 -67
  273. package/esm/DatePicker/DateRangePicker/DateRangePickerDisplay.d.ts +3 -1
  274. package/esm/DatePicker/DateRangePicker/DateRangePickerDisplay.js +19 -11
  275. package/esm/DatePicker/DateRangePicker/dateRangePickerReducer.d.ts +3 -3
  276. package/esm/DatePicker/DateRangePicker/dateRangePickerReducer.js +4 -4
  277. package/esm/DatePicker/components/Calendar.d.ts +5 -2
  278. package/esm/DatePicker/components/Calendar.js +13 -5
  279. package/esm/DatePicker/components/Display.d.ts +3 -3
  280. package/esm/DatePicker/components/Display.js +5 -4
  281. package/esm/DatePicker/components/Footer.d.ts +2 -2
  282. package/esm/DatePicker/components/Footer.js +5 -4
  283. package/esm/DatePicker/components/FooterActions.d.ts +3 -1
  284. package/esm/DatePicker/components/FooterActions.js +18 -13
  285. package/esm/DatePicker/components/Modal.d.ts +5 -5
  286. package/esm/DatePicker/components/Modal.js +19 -12
  287. package/esm/DatePicker/components/NavBar.d.ts +6 -3
  288. package/esm/DatePicker/components/NavBar.js +42 -35
  289. package/esm/DatePicker/components/SidePanel.d.ts +2 -2
  290. package/esm/DatePicker/components/SidePanel.js +8 -6
  291. package/esm/DatePicker/types.d.ts +17 -0
  292. package/esm/DatePicker/types.js +1 -0
  293. package/esm/Dropdown/Dropdown.d.ts +8 -8
  294. package/esm/Dropdown/Dropdown.js +45 -30
  295. package/esm/Dropdown/DropdownButton.d.ts +3 -3
  296. package/esm/Dropdown/DropdownButton.js +15 -8
  297. package/esm/Dropdown/DropdownContext.d.ts +2 -2
  298. package/esm/Dropdown/DropdownContext.js +2 -2
  299. package/esm/Dropdown/components/DropdownButtonItem.d.ts +1 -1
  300. package/esm/Dropdown/components/DropdownButtonItem.js +14 -12
  301. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.d.ts +4 -4
  302. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.js +29 -22
  303. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.d.ts +1 -1
  304. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.js +5 -4
  305. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.d.ts +1 -1
  306. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.js +6 -4
  307. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.d.ts +1 -1
  308. package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.js +6 -4
  309. package/esm/Dropdown/components/DropdownDivider.js +2 -2
  310. package/esm/Dropdown/components/DropdownFooterItem.d.ts +2 -2
  311. package/esm/Dropdown/components/DropdownFooterItem.js +11 -4
  312. package/esm/Dropdown/components/DropdownLinkItem.js +14 -11
  313. package/esm/Dropdown/components/DropdownRadioItem.d.ts +2 -2
  314. package/esm/Dropdown/components/DropdownRadioItem.js +17 -14
  315. package/esm/Dropdown/components/DropdownTitle.d.ts +1 -1
  316. package/esm/Dropdown/components/DropdownTitle.js +8 -3
  317. package/esm/Dropdown/components/DropdownToggleItem.d.ts +3 -3
  318. package/esm/Dropdown/components/DropdownToggleItem.js +16 -14
  319. package/esm/Dropdown/useDropdownItemProps.d.ts +3 -3
  320. package/esm/Dropzone/Dropzone.d.ts +2 -2
  321. package/esm/Dropzone/Dropzone.js +58 -47
  322. package/esm/EmptyState/EmptyState.d.ts +1 -1
  323. package/esm/EmptyState/EmptyState.js +29 -21
  324. package/esm/EmptyState/types.d.ts +7 -7
  325. package/esm/Field/Field.d.ts +3 -3
  326. package/esm/Field/Field.js +33 -25
  327. package/esm/Flag/Flag.d.ts +2 -2
  328. package/esm/Flag/Flag.js +44 -33
  329. package/esm/Flag/Flags.d.ts +3 -3
  330. package/esm/Flag/Flags.js +30 -21
  331. package/esm/Flag/types.d.ts +4 -4
  332. package/esm/FlexGrid/FlexGrid.d.ts +1 -1
  333. package/esm/FlexGrid/FlexGrid.js +13 -8
  334. package/esm/FlexGrid/FlexGrid.tailwind.js +2 -2
  335. package/esm/HelpUnderline/HelpUnderline.d.ts +2 -1
  336. package/esm/HelpUnderline/HelpUnderline.js +8 -6
  337. package/esm/Input/Input.d.ts +5 -5
  338. package/esm/Input/Input.js +119 -108
  339. package/esm/Input/Input.tailwind.js +0 -3
  340. package/esm/Insert/Insert.d.ts +2 -2
  341. package/esm/Insert/Insert.js +28 -21
  342. package/esm/KeyboardKey/KeyboardKey.d.ts +7 -0
  343. package/esm/KeyboardKey/KeyboardKey.js +30 -0
  344. package/esm/KeyboardKey/KeyboardKey.tailwind.d.ts +5 -0
  345. package/esm/KeyboardKey/KeyboardKey.tailwind.js +31 -0
  346. package/esm/KeyboardKey/index.d.ts +2 -0
  347. package/esm/KeyboardKey/index.js +2 -0
  348. package/esm/Link/BaseLink.d.ts +3 -3
  349. package/esm/Link/BaseLink.js +9 -3
  350. package/esm/Link/ButtonLink.d.ts +1 -1
  351. package/esm/Link/ButtonLink.js +9 -4
  352. package/esm/Link/IconButtonLink.d.ts +1 -1
  353. package/esm/Link/IconButtonLink.js +9 -4
  354. package/esm/Link/Link.d.ts +5 -5
  355. package/esm/Link/Link.js +18 -10
  356. package/esm/Medallion/Medallion.d.ts +2 -2
  357. package/esm/Medallion/Medallion.js +7 -6
  358. package/esm/Modal/Modal.d.ts +7 -5
  359. package/esm/Modal/Modal.js +65 -35
  360. package/esm/Modal/components/ModalFooter.d.ts +2 -2
  361. package/esm/Modal/components/ModalFooter.js +16 -9
  362. package/esm/Modal/components/ModalSection.d.ts +1 -1
  363. package/esm/Modal/components/ModalSection.js +5 -4
  364. package/esm/Pagination/CompactPagination/CompactPagination.d.ts +12 -0
  365. package/esm/Pagination/CompactPagination/CompactPagination.js +41 -38
  366. package/esm/Pagination/DotPagination/DotPagination.d.ts +4 -1
  367. package/esm/Pagination/DotPagination/DotPagination.js +20 -16
  368. package/esm/Pagination/Pagination/Pagination.d.ts +7 -1
  369. package/esm/Pagination/Pagination/Pagination.js +63 -48
  370. package/esm/ProgressBar/ProgressBar.d.ts +2 -2
  371. package/esm/ProgressBar/ProgressBar.js +16 -10
  372. package/esm/ProgressSpinner/ProgressSpinner.d.ts +2 -2
  373. package/esm/ProgressSpinner/ProgressSpinner.js +21 -10
  374. package/esm/RadioGroup/RadioButton.d.ts +3 -3
  375. package/esm/RadioGroup/RadioButton.js +9 -3
  376. package/esm/RadioGroup/RadioGroup.d.ts +3 -3
  377. package/esm/RadioGroup/RadioGroup.js +36 -28
  378. package/esm/RangeSlider/RangeSlider.d.ts +3 -3
  379. package/esm/RangeSlider/RangeSlider.js +39 -31
  380. package/esm/Satellite/Satellite.d.ts +2 -2
  381. package/esm/Satellite/Satellite.js +5 -4
  382. package/esm/Satellite/SatelliteContext.js +2 -2
  383. package/esm/Satellite/SatelliteRouter.d.ts +1 -1
  384. package/esm/ScrollIndicator/ScrollIndicator.d.ts +5 -3
  385. package/esm/ScrollIndicator/ScrollIndicator.js +12 -10
  386. package/esm/Select/Select.d.ts +3 -3
  387. package/esm/Select/Select.js +8 -3
  388. package/esm/Sidebar/Sidebar.d.ts +6 -4
  389. package/esm/Sidebar/Sidebar.js +16 -8
  390. package/esm/Sidebar/SidebarContext.d.ts +1 -1
  391. package/esm/Sidebar/components/SidebarHeader.d.ts +2 -2
  392. package/esm/Sidebar/components/SidebarHeader.js +11 -5
  393. package/esm/Sidebar/components/SidebarLink.d.ts +3 -3
  394. package/esm/Sidebar/components/SidebarLink.js +34 -21
  395. package/esm/Switch/Switch.d.ts +3 -3
  396. package/esm/Switch/Switch.js +16 -12
  397. package/esm/Switch/SwitchOption.d.ts +1 -1
  398. package/esm/Switch/SwitchOption.js +24 -15
  399. package/esm/Tables/DataTable/DataTable.d.ts +15 -5
  400. package/esm/Tables/DataTable/DataTable.js +61 -53
  401. package/esm/Tables/DataTable/components/Body.d.ts +6 -6
  402. package/esm/Tables/DataTable/components/Body.js +60 -45
  403. package/esm/Tables/DataTable/components/Footer.d.ts +1 -1
  404. package/esm/Tables/DataTable/components/Footer.js +5 -5
  405. package/esm/Tables/DataTable/components/Header.js +22 -18
  406. package/esm/Tables/DataTable/components/HeaderCell.d.ts +3 -3
  407. package/esm/Tables/DataTable/components/HeaderCell.js +20 -13
  408. package/esm/Tables/DataTable/components/Loader.d.ts +3 -1
  409. package/esm/Tables/DataTable/components/Loader.js +18 -14
  410. package/esm/Tables/DataTable/types.d.ts +3 -3
  411. package/esm/Tables/DataTable/utils.d.ts +1 -1
  412. package/esm/Tables/Table/Table.d.ts +3 -3
  413. package/esm/Tables/Table/Table.js +20 -11
  414. package/esm/Tables/Table/components/Footer.d.ts +2 -2
  415. package/esm/Tables/Table/components/Footer.js +5 -4
  416. package/esm/Tabs/ContentTabs.d.ts +1 -1
  417. package/esm/Tabs/ContentTabs.js +38 -31
  418. package/esm/Tabs/LinkTabs.d.ts +1 -1
  419. package/esm/Tabs/LinkTabs.js +14 -14
  420. package/esm/Tabs/components/LinkTab.d.ts +3 -3
  421. package/esm/Tabs/components/LinkTab.js +18 -11
  422. package/esm/Tabs/types.d.ts +6 -6
  423. package/esm/Tabs/utils.d.ts +1 -1
  424. package/esm/Tag/Tag.d.ts +7 -4
  425. package/esm/Tag/Tag.js +25 -15
  426. package/esm/TextArea/TextArea.d.ts +3 -3
  427. package/esm/TextArea/TextArea.js +9 -3
  428. package/esm/TextWrap/TextWrap.js +22 -17
  429. package/esm/Toggle/Toggle.d.ts +3 -3
  430. package/esm/Toggle/Toggle.js +25 -16
  431. package/esm/Tooltip/OverflowTooltipWrapper.d.ts +3 -2
  432. package/esm/Tooltip/OverflowTooltipWrapper.js +35 -19
  433. package/esm/Tooltip/Tooltip.d.ts +3 -3
  434. package/esm/Tooltip/Tooltip.js +8 -3
  435. package/esm/Tooltip/TooltipWrapper.d.ts +3 -3
  436. package/esm/Tooltip/TooltipWrapper.js +48 -33
  437. package/esm/Tooltip/types.d.ts +2 -2
  438. package/esm/Typography/Typography.tailwind.js +2 -2
  439. package/esm/UserContent/UserContent.js +2 -2
  440. package/esm/UserContent/UserContent.tailwind.js +2 -4
  441. package/esm/index.d.ts +1 -0
  442. package/esm/index.js +1 -0
  443. package/esm/styles/tailwind.config.js +3 -3
  444. package/esm/tailwind-types.d.ts +1 -1
  445. package/esm/types.d.ts +3 -3
  446. package/esm/utilities/utilities.tailwind.d.ts +2 -0
  447. package/esm/utilities/utilities.tailwind.js +27 -0
  448. package/esm/utils/genericChangeHandler.d.ts +3 -3
  449. package/esm/utils/isCssPropertySupported.d.ts +1 -1
  450. package/esm/utils/isRenderedChild.d.ts +2 -2
  451. package/esm/utils/pluralize.js +6 -1
  452. package/esm/utils/useForwardedRef.d.ts +2 -2
  453. package/esm/utils/useForwardedRef.js +1 -1
  454. package/esm/utils/useLinkProps.d.ts +2 -2
  455. package/esm/utils/useTriggerInputChange.d.ts +2 -2
  456. package/package.json +4 -4
  457. package/satellite.css +37 -4
  458. package/satellite.min.css +1 -1
@@ -7,12 +7,12 @@ var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onCh
7
7
 
8
8
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
9
9
 
10
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
10
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
11
11
 
12
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
12
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
13
13
 
14
14
  import cx from "classnames";
15
- import React, { useCallback, useMemo, useState } from "react";
15
+ import { Fragment, useCallback, useMemo, useState } from "react";
16
16
  import { useDropzone } from "react-dropzone";
17
17
  import { Check, UploadCloud, X } from "react-feather";
18
18
  import { IconButton } from "../Button";
@@ -20,12 +20,15 @@ import { useFieldState } from "../Field";
20
20
  import stl from "../styles/helpers/satellitePrefixer";
21
21
  import { formatHumanSize } from "../utils/formatters";
22
22
  import { uniqueId } from "../utils/uniqueId";
23
+ import { jsxs as _jsxs } from "react/jsx-runtime";
24
+ import { jsx as _jsx } from "react/jsx-runtime";
23
25
 
24
26
  var DropzoneFileItem = function DropzoneFileItem(_ref) {
25
27
  var file = _ref.file;
26
- return /*#__PURE__*/React.createElement("span", {
27
- className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate text-grey-900"])))
28
- }, file.name, " - ", formatHumanSize(file.size));
28
+ return /*#__PURE__*/_jsxs("span", {
29
+ className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate text-grey-900"]))),
30
+ children: [file.name, " - ", formatHumanSize(file.size)]
31
+ });
29
32
  };
30
33
 
31
34
  var STATUS_CLASSNAMES = {
@@ -35,13 +38,13 @@ var STATUS_CLASSNAMES = {
35
38
  };
36
39
 
37
40
  var InvalidIcon = function InvalidIcon() {
38
- return /*#__PURE__*/React.createElement(X, {
41
+ return /*#__PURE__*/_jsx(X, {
39
42
  className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
40
43
  });
41
44
  };
42
45
 
43
46
  var ValidatedIcon = function ValidatedIcon() {
44
- return /*#__PURE__*/React.createElement(Check, {
47
+ return /*#__PURE__*/_jsx(Check, {
45
48
  className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-700 p-px rounded-full"])))
46
49
  });
47
50
  };
@@ -98,8 +101,8 @@ export var Dropzone = function Dropzone(_ref2) {
98
101
  return id !== null && id !== void 0 ? id : uniqueId("dropzone");
99
102
  }, [id]);
100
103
  var isValueEmpty = files.length === 0;
101
- var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : React.Fragment;
102
- return /*#__PURE__*/React.createElement("div", getRootProps({
104
+ var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
105
+ return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, getRootProps({
103
106
  "aria-controls": dropzoneId,
104
107
  className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n input group\n ", "\n ", "\n min-h-16 cursor-pointer\n ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-nebula-500" : null), STATUS_CLASSNAMES[status], className),
105
108
  onClick: function onClick(evt) {
@@ -108,42 +111,50 @@ export var Dropzone = function Dropzone(_ref2) {
108
111
  evt.stopPropagation();
109
112
  }
110
113
  }
111
- }), /*#__PURE__*/React.createElement("input", getInputProps({
112
- id: dropzoneId,
113
- onFocus: function onFocus() {
114
- return setFocused(true);
115
- },
116
- onBlur: function onBlur() {
117
- return setFocused(false);
118
- }
119
- })), /*#__PURE__*/React.createElement("div", {
120
- className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex-1 flex items-center justify-center space-x-2 display-body"])))
121
- }, files.length > 0 ? files.length > 1 ? /*#__PURE__*/React.createElement("ul", null, files.map(function (file) {
122
- return /*#__PURE__*/React.createElement("li", {
123
- key: file.name
124
- }, /*#__PURE__*/React.createElement(DropzoneFileItem, {
125
- file: file
126
- }));
127
- })) : /*#__PURE__*/React.createElement(DropzoneFileItem, {
128
- file: files[0]
129
- }) : /*#__PURE__*/React.createElement("div", {
130
- className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex items-center justify-center space-x-2 display-body"])))
131
- }, /*#__PURE__*/React.createElement(UploadCloud, {
132
- size: "1rem",
133
- className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
134
- }), /*#__PURE__*/React.createElement("p", {
135
- className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-300" : "typo-subdued")
136
- }, placeholder !== null && placeholder !== void 0 ? placeholder : "Drop ".concat(multiple ? "files" : "file", " here or click to select.")))), clearable && !disabled && !isValueEmpty && /*#__PURE__*/React.createElement("span", {
137
- className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""])))
138
- }, /*#__PURE__*/React.createElement(IconButton, {
139
- className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
140
- title: "Clear input",
141
- icon: X,
142
- variant: "subtle",
143
- size: "small",
144
- tabIndex: -1,
145
- "aria-hidden": true,
146
- onClick: handleClear
147
- })), /*#__PURE__*/React.createElement(StatusIcon, null));
114
+ })), {}, {
115
+ children: [/*#__PURE__*/_jsx("input", _objectSpread({}, getInputProps({
116
+ id: dropzoneId,
117
+ onFocus: function onFocus() {
118
+ return setFocused(true);
119
+ },
120
+ onBlur: function onBlur() {
121
+ return setFocused(false);
122
+ }
123
+ }))), /*#__PURE__*/_jsx("div", {
124
+ className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
125
+ children: files.length > 0 ? files.length > 1 ? /*#__PURE__*/_jsx("ul", {
126
+ children: files.map(function (file) {
127
+ return /*#__PURE__*/_jsx("li", {
128
+ children: /*#__PURE__*/_jsx(DropzoneFileItem, {
129
+ file: file
130
+ })
131
+ }, file.name);
132
+ })
133
+ }) : /*#__PURE__*/_jsx(DropzoneFileItem, {
134
+ file: files[0]
135
+ }) : /*#__PURE__*/_jsxs("div", {
136
+ className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex items-center justify-center space-x-2 display-body"]))),
137
+ children: [/*#__PURE__*/_jsx(UploadCloud, {
138
+ size: "1rem",
139
+ className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
140
+ }), /*#__PURE__*/_jsx("p", {
141
+ className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
142
+ children: placeholder !== null && placeholder !== void 0 ? placeholder : "Drop ".concat(multiple ? "files" : "file", " here or click to select.")
143
+ })]
144
+ })
145
+ }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/_jsx("span", {
146
+ className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""]))),
147
+ children: /*#__PURE__*/_jsx(IconButton, {
148
+ className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
149
+ title: "Clear input",
150
+ icon: X,
151
+ variant: "subtle",
152
+ size: "small",
153
+ tabIndex: -1,
154
+ "aria-hidden": true,
155
+ onClick: handleClear
156
+ })
157
+ }), /*#__PURE__*/_jsx(StatusIcon, {})]
158
+ }));
148
159
  };
149
160
  export default Dropzone;
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { EmptyStateProps } from "./types";
2
+ import type { EmptyStateProps } from "./types";
3
3
  /**
4
4
  * Empty states are used when a list, table, chart or page has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. This can also be shown when a features hasn't been enable.
5
5
  *
@@ -2,10 +2,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
2
2
 
3
3
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
4
4
 
5
- import React from "react";
6
5
  import cx from "classnames";
7
- import stl from "../styles/helpers/satellitePrefixer";
8
6
  import FlexGrid from "../FlexGrid";
7
+ import stl from "../styles/helpers/satellitePrefixer";
8
+ import { jsx as _jsx } from "react/jsx-runtime";
9
+ import { jsxs as _jsxs } from "react/jsx-runtime";
9
10
  var CONTAINER_CONTEXT_CLASSNAMES = {
10
11
  result: {
11
12
  medium: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["max-w-xs"]))),
@@ -61,25 +62,32 @@ var renderEmptyState = function renderEmptyState(_ref) {
61
62
  var titleClassNames = cx(stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["text-grey-900"]))), TITLE_CONTEXT_CLASSNAMES[usageContext]);
62
63
  var descriptionClassNames = cx(stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["text-grey-600"]))), DESCRIPTION_CONTEXT_CLASSNAMES[usageContext]);
63
64
  var actionsClassNames = cx(ACTIONS_CONTEXT_CLASSNAMES[usageContext]);
64
- return /*#__PURE__*/React.createElement("div", {
65
- className: containerClassNames
66
- }, /*#__PURE__*/React.createElement("div", {
67
- className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["min-w-2/5"])))
68
- }, centered && medallion && /*#__PURE__*/React.createElement("div", {
69
- className: MEDALLION_CONTEXT_CLASSNAMES[usageContext]
70
- }, medallion), /*#__PURE__*/React.createElement("h2", {
71
- className: titleClassNames
72
- }, title), description && /*#__PURE__*/React.createElement("p", {
73
- className: descriptionClassNames
74
- }, description), actions && /*#__PURE__*/React.createElement(FlexGrid, {
75
- className: actionsClassNames,
76
- alignment: centered ? "center" : "leading",
77
- distribution: centered ? "center" : "leading",
78
- direction: actionsDirection !== null && actionsDirection !== void 0 ? actionsDirection : centered ? "column" : "row",
79
- spacing: "sm"
80
- }, actions)), illustration && !centered && usageContext === "page" && /*#__PURE__*/React.createElement("div", {
81
- className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["empty-state-illustration ml-16 hidden lg:flex items-center justify-center"])))
82
- }, illustration));
65
+ return /*#__PURE__*/_jsxs("div", {
66
+ className: containerClassNames,
67
+ children: [/*#__PURE__*/_jsxs("div", {
68
+ className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["min-w-2/5"]))),
69
+ children: [centered && medallion && /*#__PURE__*/_jsx("div", {
70
+ className: MEDALLION_CONTEXT_CLASSNAMES[usageContext],
71
+ children: medallion
72
+ }), /*#__PURE__*/_jsx("h2", {
73
+ className: titleClassNames,
74
+ children: title
75
+ }), description && /*#__PURE__*/_jsx("p", {
76
+ className: descriptionClassNames,
77
+ children: description
78
+ }), actions && /*#__PURE__*/_jsx(FlexGrid, {
79
+ className: actionsClassNames,
80
+ alignment: centered ? "center" : "leading",
81
+ distribution: centered ? "center" : "leading",
82
+ direction: actionsDirection !== null && actionsDirection !== void 0 ? actionsDirection : centered ? "column" : "row",
83
+ spacing: "sm",
84
+ children: actions
85
+ })]
86
+ }), illustration && !centered && usageContext === "page" && /*#__PURE__*/_jsx("div", {
87
+ className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["empty-state-illustration ml-16 hidden lg:flex items-center justify-center"]))),
88
+ children: illustration
89
+ })]
90
+ });
83
91
  };
84
92
  /**
85
93
  * Empty states are used when a list, table, chart or page has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. This can also be shown when a features hasn't been enable.
@@ -1,20 +1,20 @@
1
- /// <reference types="react" />
2
- import { FlexGridDirection } from "../FlexGrid";
1
+ import type { ReactNode } from "react";
2
+ import type { FlexGridDirection } from "../FlexGrid";
3
3
  export declare type EmptyStateUsageContexts = "result" | "feature" | "page";
4
4
  export declare type EmptyStateWidths = "medium" | "large" | "xlarge";
5
5
  export interface EmptyStatePropsAll {
6
6
  /** Descriptive title for the state */
7
- title: React.ReactNode;
7
+ title: ReactNode;
8
8
  /** Optional description to explain why the screen is empty or define next steps */
9
- description?: React.ReactNode;
9
+ description?: ReactNode;
10
10
  /** Buttons */
11
- actions?: React.ReactNode;
11
+ actions?: ReactNode;
12
12
  /** Direction overwrite for the buttons */
13
13
  actionsDirection?: FlexGridDirection;
14
14
  /** Add a <Medallion /> element in there */
15
- medallion?: React.ReactNode;
15
+ medallion?: ReactNode;
16
16
  /** Plop in an `img` element or `svg` here */
17
- illustration?: React.ReactNode;
17
+ illustration?: ReactNode;
18
18
  /**
19
19
  * UsageContext of the component
20
20
  * @default "feature"
@@ -1,13 +1,13 @@
1
- import React, { FunctionComponent } from "react";
1
+ import type { FunctionComponent, ReactChild, ReactNode } from "react";
2
2
  import { FieldState } from "./FieldStateContext";
3
3
  export interface FieldProps {
4
4
  /** @ignore */
5
5
  className?: string;
6
6
  /** Label to display above the nested input */
7
- label?: React.ReactChild;
7
+ label?: ReactChild;
8
8
  labelFor?: string;
9
9
  /** Helpful description to show below the `Field` */
10
- description?: React.ReactNode;
10
+ description?: ReactNode;
11
11
  /**
12
12
  * An object to handle state
13
13
  * @default DEFAULT_STATE
@@ -2,11 +2,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
2
2
 
3
3
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
4
4
 
5
- import React from "react";
6
5
  import cx from "classnames";
7
6
  import { AlertCircle } from "react-feather";
8
7
  import stl from "../styles/helpers/satellitePrefixer";
9
8
  import FieldStateContext, { DEFAULT_STATE } from "./FieldStateContext";
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
10
11
 
11
12
  /**
12
13
  * Use text fields to help users enter, select, and search for text. Text fields are normally found within a form but can also be part of a modal, search, or card
@@ -52,29 +53,36 @@ export var Field = function Field(_ref) {
52
53
  _ref$inline = _ref.inline,
53
54
  inline = _ref$inline === void 0 ? false : _ref$inline,
54
55
  children = _ref.children;
55
- return /*#__PURE__*/React.createElement(FieldStateContext.Provider, {
56
- value: state
57
- }, /*#__PURE__*/React.createElement("div", {
58
- className: className
59
- }, /*#__PURE__*/React.createElement("label", {
60
- className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["cursor-pointer flex ", ""])), !inline && "flex-col"),
61
- htmlFor: labelFor
62
- }, label && /*#__PURE__*/React.createElement("div", {
63
- className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1")
64
- }, label), /*#__PURE__*/React.createElement("div", {
65
- className: cx(inline && stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-auto mt-1"]))))
66
- }, children)), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/React.createElement("ul", {
67
- className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["mb-1 mt-2 display-caption"])))
68
- }, state.errors.map(function (error) {
69
- return /*#__PURE__*/React.createElement("li", {
70
- key: error,
71
- className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex items-center"])))
72
- }, /*#__PURE__*/React.createElement(AlertCircle, {
73
- className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-red-700 mr-1"]))),
74
- size: "1rem"
75
- }), error);
76
- })) : description ? /*#__PURE__*/React.createElement("p", {
77
- className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["display-caption text-grey-600"]))), inline ? stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["mt-1"]))) : stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mt-2"]))))
78
- }, description) : null));
56
+ return /*#__PURE__*/_jsx(FieldStateContext.Provider, {
57
+ value: state,
58
+ children: /*#__PURE__*/_jsxs("div", {
59
+ className: className,
60
+ children: [/*#__PURE__*/_jsxs("label", {
61
+ className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["cursor-pointer flex ", ""])), !inline && "flex-col"),
62
+ htmlFor: labelFor,
63
+ children: [label && /*#__PURE__*/_jsx("div", {
64
+ className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
65
+ children: label
66
+ }), /*#__PURE__*/_jsx("div", {
67
+ className: cx(inline && stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-auto mt-1"])))),
68
+ children: children
69
+ })]
70
+ }), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/_jsx("ul", {
71
+ className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["mb-1 mt-2 display-caption"]))),
72
+ children: state.errors.map(function (error) {
73
+ return /*#__PURE__*/_jsxs("li", {
74
+ className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex items-center"]))),
75
+ children: [/*#__PURE__*/_jsx(AlertCircle, {
76
+ className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-red-700 mr-1"]))),
77
+ size: "1rem"
78
+ }), error]
79
+ }, error);
80
+ })
81
+ }) : description ? /*#__PURE__*/_jsx("p", {
82
+ className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["display-caption text-grey-600"]))), inline ? stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["mt-1"]))) : stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mt-2"])))),
83
+ children: description
84
+ }) : null]
85
+ })
86
+ });
79
87
  };
80
88
  export default Field;
@@ -1,5 +1,5 @@
1
- import { FunctionComponent } from "react";
2
- import { Notification } from "./types";
1
+ import type { FunctionComponent } from "react";
2
+ import type { Notification } from "./types";
3
3
  export declare type FlagProps = Omit<Notification, "id" | "content">;
4
4
  export declare const Flag: FunctionComponent<FlagProps>;
5
5
  export default Flag;
package/esm/Flag/Flag.js CHANGED
@@ -3,13 +3,15 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
3
3
 
4
4
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
5
5
 
6
- import React, { useEffect, useRef, useState } from "react";
7
6
  import cx from "classnames";
8
- import { X, Check } from "react-feather";
9
- import stl from "../styles/helpers/satellitePrefixer";
10
- import ProgressSpinner from "../ProgressSpinner";
7
+ import { useEffect, useRef, useState } from "react";
8
+ import { Check, X } from "react-feather";
11
9
  import { IconButton } from "../Button";
12
10
  import { Card } from "../Card";
11
+ import ProgressSpinner from "../ProgressSpinner";
12
+ import stl from "../styles/helpers/satellitePrefixer";
13
+ import { jsx as _jsx } from "react/jsx-runtime";
14
+ import { jsxs as _jsxs } from "react/jsx-runtime";
13
15
  var VARIANT_CLASSNAMES = {
14
16
  grey: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-500"]))),
15
17
  accent: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-accent-500"]))),
@@ -57,35 +59,44 @@ export var Flag = function Flag(_ref) {
57
59
  return clearTimeout(timer);
58
60
  };
59
61
  }, [autoDismissAfter, hovered]);
60
- return /*#__PURE__*/React.createElement(Card, {
62
+ return /*#__PURE__*/_jsx(Card, {
61
63
  fullBleed: true,
62
- className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flag shadow-z500"])))
63
- }, /*#__PURE__*/React.createElement("div", {
64
- className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-4 flex"]))),
65
- onMouseEnter: function onMouseEnter() {
66
- return setHovered(true);
67
- },
68
- onMouseLeave: function onMouseLeave() {
69
- return setHovered(false);
70
- }
71
- }, loading ? /*#__PURE__*/React.createElement(ProgressSpinner, {
72
- size: 16,
73
- className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
74
- }) : /*#__PURE__*/React.createElement(Icon, {
75
- className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
76
- size: 16
77
- }), /*#__PURE__*/React.createElement("div", {
78
- className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-1 ml-4"])))
79
- }, /*#__PURE__*/React.createElement("div", {
80
- className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex justify-between"])))
81
- }, hasTitle ? /*#__PURE__*/React.createElement("h3", null, title) : /*#__PURE__*/React.createElement("div", null, children), onDismiss && /*#__PURE__*/React.createElement(IconButton, {
82
- icon: X,
83
- title: "Dismiss",
84
- variant: "subtle",
85
- size: "small",
86
- onClick: onDismiss
87
- })), hasTitle && children && /*#__PURE__*/React.createElement("div", {
88
- className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["text-grey-600 mt-2"])))
89
- }, children))));
64
+ className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flag shadow-z500"]))),
65
+ children: /*#__PURE__*/_jsxs("div", {
66
+ className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-4 flex"]))),
67
+ onMouseEnter: function onMouseEnter() {
68
+ return setHovered(true);
69
+ },
70
+ onMouseLeave: function onMouseLeave() {
71
+ return setHovered(false);
72
+ },
73
+ children: [loading ? /*#__PURE__*/_jsx(ProgressSpinner, {
74
+ size: 16,
75
+ className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
76
+ }) : /*#__PURE__*/_jsx(Icon, {
77
+ className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
78
+ size: 16
79
+ }), /*#__PURE__*/_jsxs("div", {
80
+ className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-1 ml-4"]))),
81
+ children: [/*#__PURE__*/_jsxs("div", {
82
+ className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex justify-between"]))),
83
+ children: [hasTitle ? /*#__PURE__*/_jsx("h3", {
84
+ children: title
85
+ }) : /*#__PURE__*/_jsx("div", {
86
+ children: children
87
+ }), onDismiss && /*#__PURE__*/_jsx(IconButton, {
88
+ icon: X,
89
+ title: "Dismiss",
90
+ variant: "subtle",
91
+ size: "small",
92
+ onClick: onDismiss
93
+ })]
94
+ }), hasTitle && children && /*#__PURE__*/_jsx("div", {
95
+ className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["text-grey-600 mt-2"]))),
96
+ children: children
97
+ })]
98
+ })]
99
+ })
100
+ });
90
101
  };
91
102
  export default Flag;
@@ -1,5 +1,5 @@
1
- import React from "react";
2
- import { Notification } from "./types";
1
+ /// <reference types="react" />
2
+ import type { Notification } from "./types";
3
3
  export interface FlagsProps {
4
4
  /**
5
5
  * Array of notifications
@@ -44,5 +44,5 @@ export interface FlagsProps {
44
44
  *
45
45
  * When there are multiple flags, they will stack on top of one another with the most recent flag on top. When a user dismisses a flag, any older flags 'below' will come to the top. Careful consideration should be taken to take into account the ordering and priority of flags in the stack. Never use dismissible and non-dismissible flags in a stack as flags that automatically dismiss can do so and not be visible to the user.
46
46
  */
47
- export declare const Flags: ({ notifications }: FlagsProps) => React.ReactPortal;
47
+ export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactPortal;
48
48
  export default Flags;
package/esm/Flag/Flags.js CHANGED
@@ -1,14 +1,19 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
1
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2
3
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
4
  var _excluded = ["content", "id"];
4
5
 
5
6
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
6
7
 
7
- import React from "react";
8
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
9
+
10
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
11
+
8
12
  import { createPortal } from "react-dom";
9
13
  import { CSSTransition, TransitionGroup } from "react-transition-group";
10
14
  import stl from "../styles/helpers/satellitePrefixer";
11
15
  import Flag from "./Flag";
16
+ import { jsx as _jsx } from "react/jsx-runtime";
12
17
  var TRANSITION_TIMEOUT = 500;
13
18
  /**
14
19
  * Use flags for messages containing confirmations, alerts, and acknowledgments that require minimal user interaction. These event-driven messages appear at the bottom of the screen and overlay any content.
@@ -51,27 +56,31 @@ var TRANSITION_TIMEOUT = 500;
51
56
  export var Flags = function Flags(_ref) {
52
57
  var _ref$notifications = _ref.notifications,
53
58
  notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
54
- return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(TransitionGroup, {
59
+ return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(TransitionGroup, {
55
60
  className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4"]))),
56
- component: "ul"
57
- }, notifications.map(function (_ref2) {
58
- var content = _ref2.content,
59
- id = _ref2.id,
60
- rest = _objectWithoutProperties(_ref2, _excluded);
61
+ component: "ul",
62
+ children: notifications.map(function (_ref2) {
63
+ var content = _ref2.content,
64
+ id = _ref2.id,
65
+ rest = _objectWithoutProperties(_ref2, _excluded);
61
66
 
62
- return /*#__PURE__*/React.createElement(CSSTransition, {
63
- key: id,
64
- classNames: {
65
- enter: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flags_item-enter"]))),
66
- enterActive: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flags_item-enter-active"]))),
67
- exit: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flags_item-exit"]))),
68
- exitActive: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flags_item-exit-active"])))
69
- },
70
- timeout: TRANSITION_TIMEOUT,
71
- appear: true
72
- }, /*#__PURE__*/React.createElement("li", {
73
- className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mt-4"])))
74
- }, /*#__PURE__*/React.createElement(Flag, rest, content)));
75
- })), document.body);
67
+ return /*#__PURE__*/_jsx(CSSTransition, {
68
+ classNames: {
69
+ enter: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flags_item-enter"]))),
70
+ enterActive: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flags_item-enter-active"]))),
71
+ exit: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flags_item-exit"]))),
72
+ exitActive: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flags_item-exit-active"])))
73
+ },
74
+ timeout: TRANSITION_TIMEOUT,
75
+ appear: true,
76
+ children: /*#__PURE__*/_jsx("li", {
77
+ className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mt-4"]))),
78
+ children: /*#__PURE__*/_jsx(Flag, _objectSpread(_objectSpread({}, rest), {}, {
79
+ children: content
80
+ }))
81
+ })
82
+ }, id);
83
+ })
84
+ }), document.body);
76
85
  };
77
86
  export default Flags;
@@ -1,12 +1,12 @@
1
- /// <reference types="react" />
2
- import { IconComponentType } from "../types";
3
- import { ColorVariant } from "../types";
1
+ import type { ReactNode } from "react";
2
+ import type { IconComponentType } from "../types";
3
+ import type { ColorVariant } from "../types";
4
4
  export interface Notification {
5
5
  /** Unique notification ID */
6
6
  id: string;
7
7
  title?: string;
8
8
  /** Content goes here */
9
- content: React.ReactNode;
9
+ content: ReactNode;
10
10
  /** Icon to accompany the notification */
11
11
  icon?: IconComponentType;
12
12
  /** @default false */
@@ -1,4 +1,4 @@
1
- import { FunctionComponent } from "react";
1
+ import type { FunctionComponent } from "react";
2
2
  export declare type FlexGridDirection = "row" | "column";
3
3
  export declare type FlexGridAlignment = "leading" | "trailing" | "center" | "fill" | "baseline";
4
4
  export declare type FlexGridDistribution = "equalSpacing" | "leading" | "trailing" | "center" | "fill" | "fillEvenly";
@@ -3,10 +3,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
3
3
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
4
4
 
5
5
  // Heavily inspired by https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.tsx#L1
6
- import React from "react";
7
6
  import cx from "classnames";
7
+ import { Children, isValidElement } from "react";
8
8
  import stl from "../styles/helpers/satellitePrefixer";
9
9
  import isRenderedChild from "../utils/isRenderedChild";
10
+ import { jsx as _jsx } from "react/jsx-runtime";
10
11
  var SPACING_CLASSNAMES = {
11
12
  none: "",
12
13
  sm: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex-grid-sm"]))),
@@ -48,12 +49,16 @@ export var FlexGrid = function FlexGrid(_ref) {
48
49
  _ref$wrap = _ref.wrap,
49
50
  wrap = _ref$wrap === void 0 ? false : _ref$wrap,
50
51
  children = _ref.children;
51
- return /*#__PURE__*/React.createElement("div", {
52
- className: cx(inline && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex-grid-inline"]))), className)
53
- }, /*#__PURE__*/React.createElement("div", {
54
- className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex-grid-inner"]))), inline ? stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["inline-flex"]))) : stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["flex"]))), wrap && stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution])
55
- }, React.Children.map(children, function (child) {
56
- return /*#__PURE__*/React.isValidElement(child) ? child : isRenderedChild(child) ? /*#__PURE__*/React.createElement("span", null, child) : child;
57
- })));
52
+ return /*#__PURE__*/_jsx("div", {
53
+ className: cx(inline && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex-grid-inline"]))), className),
54
+ children: /*#__PURE__*/_jsx("div", {
55
+ className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex-grid-inner"]))), inline ? stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["inline-flex"]))) : stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["flex"]))), wrap && stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution]),
56
+ children: Children.map(children, function (child) {
57
+ return /*#__PURE__*/isValidElement(child) ? child : isRenderedChild(child) ? /*#__PURE__*/_jsx("span", {
58
+ children: child
59
+ }) : child;
60
+ })
61
+ })
62
+ });
58
63
  };
59
64
  export default FlexGrid;