@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.c4c2c50a

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 (555) hide show
  1. package/.github/workflows/release.yml +0 -1
  2. package/.github/workflows/release_canary.yml +0 -1
  3. package/CHANGELOG.md +72 -4
  4. package/dist/browser.esm.js +299 -361
  5. package/dist/browser.esm.js.map +1 -1
  6. package/dist/browser.umd.js +294 -356
  7. package/dist/browser.umd.js.map +1 -1
  8. package/docs/content/ActionList2.mdx +8 -7
  9. package/docs/content/Breadcrumbs.md +11 -16
  10. package/docs/content/Buttons.md +7 -17
  11. package/docs/content/CircleBadge.md +0 -10
  12. package/docs/content/CounterLabel.md +0 -10
  13. package/docs/content/Dialog.md +15 -18
  14. package/docs/content/Dialog2.mdx +1 -0
  15. package/docs/content/Dropdown.md +11 -18
  16. package/docs/content/FilterList.md +10 -17
  17. package/docs/content/FilteredSearch.md +4 -11
  18. package/docs/content/Flash.md +5 -14
  19. package/docs/content/FormGroup.md +9 -17
  20. package/docs/content/Header.md +14 -16
  21. package/docs/content/Label.md +32 -25
  22. package/docs/content/LabelGroup.md +4 -14
  23. package/docs/content/Link.md +8 -17
  24. package/docs/content/Overlay.mdx +1 -10
  25. package/docs/content/Pagehead.md +4 -13
  26. package/docs/content/Pagination.md +10 -19
  27. package/docs/content/Popover.md +11 -19
  28. package/docs/content/SelectMenu.md +50 -114
  29. package/docs/content/SideNav.md +15 -23
  30. package/docs/content/StateLabel.md +5 -14
  31. package/docs/content/StyledOcticon.md +7 -16
  32. package/docs/content/SubNav.md +19 -21
  33. package/docs/content/TabNav.md +10 -18
  34. package/docs/content/Timeline.md +34 -24
  35. package/docs/content/Tooltip.md +8 -17
  36. package/docs/content/Truncate.md +7 -16
  37. package/docs/content/UnderlineNav.md +13 -21
  38. package/docs/package-lock.json +269 -158
  39. package/docs/package.json +1 -1
  40. package/lib/ActionList2/Group.d.ts +28 -2
  41. package/lib/ActionList2/Group.js +55 -6
  42. package/lib/ActionList2/Group.jsx +33 -4
  43. package/lib/ActionList2/List.d.ts +1 -1
  44. package/lib/Autocomplete/Autocomplete.d.ts +3 -3
  45. package/lib/Autocomplete/AutocompleteInput.d.ts +3 -3
  46. package/lib/Breadcrumbs.d.ts +8 -7
  47. package/lib/Breadcrumbs.js +7 -12
  48. package/lib/Breadcrumbs.jsx +3 -6
  49. package/lib/Button/Button.d.ts +2 -3
  50. package/lib/Button/Button.js +2 -6
  51. package/lib/Button/Button.jsx +1 -21
  52. package/lib/Button/ButtonBase.d.ts +5 -8
  53. package/lib/Button/ButtonBase.js +1 -5
  54. package/lib/Button/ButtonBase.jsx +0 -3
  55. package/lib/Button/ButtonClose.d.ts +3 -46
  56. package/lib/Button/ButtonClose.js +1 -1
  57. package/lib/Button/ButtonClose.jsx +0 -2
  58. package/lib/Button/ButtonDanger.d.ts +2 -3
  59. package/lib/Button/ButtonDanger.js +2 -6
  60. package/lib/Button/ButtonDanger.jsx +1 -21
  61. package/lib/Button/ButtonInvisible.d.ts +2 -3
  62. package/lib/Button/ButtonInvisible.js +2 -6
  63. package/lib/Button/ButtonInvisible.jsx +1 -21
  64. package/lib/Button/ButtonOutline.d.ts +2 -3
  65. package/lib/Button/ButtonOutline.js +2 -6
  66. package/lib/Button/ButtonOutline.jsx +1 -21
  67. package/lib/Button/ButtonPrimary.d.ts +2 -3
  68. package/lib/Button/ButtonPrimary.js +2 -6
  69. package/lib/Button/ButtonPrimary.jsx +1 -21
  70. package/lib/Button/ButtonTableList.d.ts +1 -2
  71. package/lib/Button/ButtonTableList.js +1 -1
  72. package/lib/Button/ButtonTableList.jsx +0 -3
  73. package/lib/CircleBadge.d.ts +4 -5
  74. package/lib/CircleBadge.js +1 -1
  75. package/lib/CircleBadge.jsx +0 -1
  76. package/lib/CircleOcticon.d.ts +1 -1
  77. package/lib/CounterLabel.d.ts +1 -2
  78. package/lib/CounterLabel.js +1 -1
  79. package/lib/CounterLabel.jsx +0 -1
  80. package/lib/Dialog/Dialog.d.ts +5 -9
  81. package/lib/Dialog/Dialog.js +17 -11
  82. package/lib/Dialog/Dialog.jsx +13 -7
  83. package/lib/Dialog.d.ts +4 -5
  84. package/lib/Dialog.js +1 -1
  85. package/lib/Dialog.jsx +0 -2
  86. package/lib/Dropdown.d.ts +10 -99
  87. package/lib/Dropdown.js +3 -3
  88. package/lib/Dropdown.jsx +0 -3
  89. package/lib/DropdownMenu/DropdownButton.d.ts +3 -47
  90. package/lib/DropdownMenu/DropdownButton.js +3 -1
  91. package/lib/DropdownMenu/DropdownButton.jsx +1 -1
  92. package/lib/FilterList.d.ts +264 -303
  93. package/lib/FilterList.js +2 -6
  94. package/lib/FilterList.jsx +2 -6
  95. package/lib/FilteredSearch.d.ts +1 -2
  96. package/lib/FilteredSearch.js +1 -1
  97. package/lib/FilteredSearch.jsx +0 -1
  98. package/lib/Flash.d.ts +1 -2
  99. package/lib/Flash.js +1 -1
  100. package/lib/Flash.jsx +0 -1
  101. package/lib/FormGroup.d.ts +4 -5
  102. package/lib/FormGroup.js +2 -2
  103. package/lib/FormGroup.jsx +0 -3
  104. package/lib/Header.d.ts +6 -7
  105. package/lib/Header.js +4 -4
  106. package/lib/Header.jsx +0 -7
  107. package/lib/Label.d.ts +1 -2
  108. package/lib/Label.js +2 -3
  109. package/lib/Label.jsx +1 -3
  110. package/lib/LabelGroup.d.ts +1 -2
  111. package/lib/LabelGroup.js +1 -1
  112. package/lib/LabelGroup.jsx +0 -1
  113. package/lib/Link.d.ts +1 -2
  114. package/lib/Link.js +1 -1
  115. package/lib/Link.jsx +0 -2
  116. package/lib/NewButton/button.js +34 -42
  117. package/lib/NewButton/button.jsx +24 -23
  118. package/lib/Overlay.d.ts +11 -10
  119. package/lib/Overlay.js +3 -4
  120. package/lib/Overlay.jsx +1 -3
  121. package/lib/Pagehead.d.ts +1 -2
  122. package/lib/Pagehead.js +1 -1
  123. package/lib/Pagehead.jsx +0 -1
  124. package/lib/Pagination/Pagination.js +1 -1
  125. package/lib/Pagination/Pagination.jsx +0 -2
  126. package/lib/Popover.d.ts +4 -5
  127. package/lib/Popover.js +4 -5
  128. package/lib/Popover.jsx +1 -9
  129. package/lib/Position.d.ts +4 -4
  130. package/lib/SelectMenu/SelectMenu.d.ts +21 -189
  131. package/lib/SelectMenu/SelectMenu.js +1 -3
  132. package/lib/SelectMenu/SelectMenu.jsx +0 -2
  133. package/lib/SelectMenu/SelectMenuDivider.d.ts +1 -2
  134. package/lib/SelectMenu/SelectMenuDivider.js +1 -1
  135. package/lib/SelectMenu/SelectMenuDivider.jsx +0 -1
  136. package/lib/SelectMenu/SelectMenuFilter.js +1 -1
  137. package/lib/SelectMenu/SelectMenuFilter.jsx +0 -1
  138. package/lib/SelectMenu/SelectMenuFooter.d.ts +1 -2
  139. package/lib/SelectMenu/SelectMenuFooter.js +1 -1
  140. package/lib/SelectMenu/SelectMenuFooter.jsx +0 -1
  141. package/lib/SelectMenu/SelectMenuHeader.d.ts +1 -2
  142. package/lib/SelectMenu/SelectMenuHeader.js +1 -1
  143. package/lib/SelectMenu/SelectMenuHeader.jsx +0 -2
  144. package/lib/SelectMenu/SelectMenuItem.d.ts +2 -3
  145. package/lib/SelectMenu/SelectMenuItem.js +1 -1
  146. package/lib/SelectMenu/SelectMenuItem.jsx +0 -1
  147. package/lib/SelectMenu/SelectMenuList.d.ts +1 -2
  148. package/lib/SelectMenu/SelectMenuList.js +1 -1
  149. package/lib/SelectMenu/SelectMenuList.jsx +0 -1
  150. package/lib/SelectMenu/SelectMenuLoadingAnimation.d.ts +2 -2
  151. package/lib/SelectMenu/SelectMenuLoadingAnimation.js +3 -1
  152. package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx +2 -1
  153. package/lib/SelectMenu/SelectMenuModal.d.ts +2 -3
  154. package/lib/SelectMenu/SelectMenuModal.js +1 -1
  155. package/lib/SelectMenu/SelectMenuModal.jsx +0 -1
  156. package/lib/SelectMenu/SelectMenuTab.d.ts +1 -2
  157. package/lib/SelectMenu/SelectMenuTab.js +1 -1
  158. package/lib/SelectMenu/SelectMenuTab.jsx +0 -1
  159. package/lib/SelectMenu/SelectMenuTabPanel.d.ts +1 -2
  160. package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
  161. package/lib/SelectMenu/SelectMenuTabPanel.jsx +0 -1
  162. package/lib/SelectMenu/SelectMenuTabs.d.ts +1 -2
  163. package/lib/SelectMenu/SelectMenuTabs.js +1 -1
  164. package/lib/SelectMenu/SelectMenuTabs.jsx +0 -1
  165. package/lib/SideNav.d.ts +11 -8
  166. package/lib/SideNav.js +8 -15
  167. package/lib/SideNav.jsx +2 -6
  168. package/lib/StateLabel.d.ts +1 -2
  169. package/lib/StateLabel.js +6 -5
  170. package/lib/StateLabel.jsx +1 -2
  171. package/lib/StyledOcticon.d.ts +1 -2
  172. package/lib/StyledOcticon.js +1 -3
  173. package/lib/StyledOcticon.jsx +0 -2
  174. package/lib/SubNav.d.ts +5 -11
  175. package/lib/SubNav.js +7 -12
  176. package/lib/SubNav.jsx +4 -7
  177. package/lib/TabNav.d.ts +3 -4
  178. package/lib/TabNav.js +2 -2
  179. package/lib/TabNav.jsx +0 -2
  180. package/lib/TextInputWithTokens.d.ts +3 -3
  181. package/lib/Timeline.d.ts +19 -393
  182. package/lib/Timeline.js +16 -13
  183. package/lib/Timeline.jsx +9 -10
  184. package/lib/Token/Token.d.ts +1 -1
  185. package/lib/Tooltip.d.ts +1 -2
  186. package/lib/Tooltip.js +1 -1
  187. package/lib/Tooltip.jsx +1 -1
  188. package/lib/Truncate.d.ts +1 -2
  189. package/lib/Truncate.js +1 -3
  190. package/lib/Truncate.jsx +0 -3
  191. package/lib/UnderlineNav.d.ts +2 -3
  192. package/lib/UnderlineNav.js +2 -2
  193. package/lib/UnderlineNav.jsx +0 -2
  194. package/lib/__tests__/Breadcrumbs.test.js +4 -1
  195. package/lib/__tests__/Breadcrumbs.test.jsx +1 -1
  196. package/lib/__tests__/Breadcrumbs.types.test.d.ts +3 -0
  197. package/lib/__tests__/Breadcrumbs.types.test.js +25 -0
  198. package/lib/__tests__/Breadcrumbs.types.test.jsx +24 -0
  199. package/lib/__tests__/Button.test.js +6 -2
  200. package/lib/__tests__/Button.test.jsx +2 -2
  201. package/lib/__tests__/CircleBadge.types.test.d.ts +3 -0
  202. package/lib/__tests__/CircleBadge.types.test.js +28 -0
  203. package/lib/__tests__/CircleBadge.types.test.jsx +17 -0
  204. package/lib/__tests__/CounterLabel.types.test.d.ts +3 -0
  205. package/lib/__tests__/CounterLabel.types.test.js +28 -0
  206. package/lib/__tests__/CounterLabel.types.test.jsx +17 -0
  207. package/lib/__tests__/Dialog.types.test.d.ts +3 -0
  208. package/lib/__tests__/Dialog.types.test.js +28 -0
  209. package/lib/__tests__/Dialog.types.test.jsx +17 -0
  210. package/lib/__tests__/Dialog2.types.test.d.ts +3 -0
  211. package/lib/__tests__/Dialog2.types.test.js +31 -0
  212. package/lib/__tests__/Dialog2.types.test.jsx +17 -0
  213. package/lib/__tests__/Dropdown.types.test.d.ts +3 -0
  214. package/lib/__tests__/Dropdown.types.test.js +31 -0
  215. package/lib/__tests__/Dropdown.types.test.jsx +25 -0
  216. package/lib/__tests__/FilterList.types.test.d.ts +3 -0
  217. package/lib/__tests__/FilterList.types.test.js +27 -0
  218. package/lib/__tests__/FilterList.types.test.jsx +21 -0
  219. package/lib/__tests__/FilteredSearch.types.test.d.ts +3 -0
  220. package/lib/__tests__/FilteredSearch.types.test.js +28 -0
  221. package/lib/__tests__/FilteredSearch.types.test.jsx +17 -0
  222. package/lib/__tests__/Flash.types.test.d.ts +3 -0
  223. package/lib/__tests__/Flash.types.test.js +28 -0
  224. package/lib/__tests__/Flash.types.test.jsx +17 -0
  225. package/lib/__tests__/FormGroup.types.test.d.ts +3 -0
  226. package/lib/__tests__/FormGroup.types.test.js +28 -0
  227. package/lib/__tests__/FormGroup.types.test.jsx +17 -0
  228. package/lib/__tests__/Header.types.test.d.ts +3 -0
  229. package/lib/__tests__/Header.types.test.js +29 -0
  230. package/lib/__tests__/Header.types.test.jsx +23 -0
  231. package/lib/__tests__/Label.types.test.d.ts +3 -0
  232. package/lib/__tests__/Label.types.test.js +28 -0
  233. package/lib/__tests__/Label.types.test.jsx +17 -0
  234. package/lib/__tests__/LabelGroup.types.test.d.ts +3 -0
  235. package/lib/__tests__/LabelGroup.types.test.js +28 -0
  236. package/lib/__tests__/LabelGroup.types.test.jsx +17 -0
  237. package/lib/__tests__/Link.test.js +11 -5
  238. package/lib/__tests__/Link.test.jsx +5 -5
  239. package/lib/__tests__/Link.types.test.d.ts +3 -0
  240. package/lib/__tests__/Link.types.test.js +28 -0
  241. package/lib/__tests__/Link.types.test.jsx +17 -0
  242. package/lib/__tests__/Overlay.types.test.d.ts +3 -0
  243. package/lib/__tests__/Overlay.types.test.js +35 -0
  244. package/lib/__tests__/Overlay.types.test.jsx +18 -0
  245. package/lib/__tests__/Pagehead.types.test.d.ts +3 -0
  246. package/lib/__tests__/Pagehead.types.test.js +28 -0
  247. package/lib/__tests__/Pagehead.types.test.jsx +17 -0
  248. package/lib/__tests__/Pagination.types.test.d.ts +3 -0
  249. package/lib/__tests__/Pagination.types.test.js +33 -0
  250. package/lib/__tests__/Pagination.types.test.jsx +17 -0
  251. package/lib/__tests__/Popover.types.test.d.ts +3 -0
  252. package/lib/__tests__/Popover.types.test.js +27 -0
  253. package/lib/__tests__/Popover.types.test.jsx +21 -0
  254. package/lib/__tests__/SelectMenu.types.test.d.ts +3 -0
  255. package/lib/__tests__/SelectMenu.types.test.js +47 -0
  256. package/lib/__tests__/SelectMenu.types.test.jsx +41 -0
  257. package/lib/__tests__/SideNav.types.test.d.ts +3 -0
  258. package/lib/__tests__/SideNav.types.test.js +28 -0
  259. package/lib/__tests__/SideNav.types.test.jsx +17 -0
  260. package/lib/__tests__/StateLabel.types.test.d.ts +3 -0
  261. package/lib/__tests__/StateLabel.types.test.js +28 -0
  262. package/lib/__tests__/StateLabel.types.test.jsx +17 -0
  263. package/lib/__tests__/StyledOcticon.types.test.d.ts +3 -0
  264. package/lib/__tests__/StyledOcticon.types.test.js +32 -0
  265. package/lib/__tests__/StyledOcticon.types.test.jsx +18 -0
  266. package/lib/__tests__/SubNav.types.test.d.ts +3 -0
  267. package/lib/__tests__/SubNav.types.test.js +27 -0
  268. package/lib/__tests__/SubNav.types.test.jsx +27 -0
  269. package/lib/__tests__/TabNav.types.test.d.ts +3 -0
  270. package/lib/__tests__/TabNav.types.test.js +25 -0
  271. package/lib/__tests__/TabNav.types.test.jsx +24 -0
  272. package/lib/__tests__/Timeline.types.test.d.ts +3 -0
  273. package/lib/__tests__/Timeline.types.test.js +31 -0
  274. package/lib/__tests__/Timeline.types.test.jsx +33 -0
  275. package/lib/__tests__/Tooltip.types.test.d.ts +3 -0
  276. package/lib/__tests__/Tooltip.types.test.js +28 -0
  277. package/lib/__tests__/Tooltip.types.test.jsx +17 -0
  278. package/lib/__tests__/Truncate.types.test.d.ts +3 -0
  279. package/lib/__tests__/Truncate.types.test.js +31 -0
  280. package/lib/__tests__/Truncate.types.test.jsx +17 -0
  281. package/lib/__tests__/UnderlineNav.types.test.d.ts +3 -0
  282. package/lib/__tests__/UnderlineNav.types.test.js +25 -0
  283. package/lib/__tests__/UnderlineNav.types.test.jsx +24 -0
  284. package/lib/stories/ActionList2.stories.js +4 -3
  285. package/lib/stories/ActionMenu.stories.js +1 -3
  286. package/lib/stories/ConfirmationDialog.stories.js +16 -8
  287. package/lib/stories/Dialog.stories.js +6 -2
  288. package/lib/stories/useFocusTrap.stories.js +6 -2
  289. package/lib/stories/useFocusZone.stories.js +13 -5
  290. package/lib/utils/testing.d.ts +1 -1
  291. package/lib-esm/ActionList2/Group.d.ts +28 -2
  292. package/lib-esm/ActionList2/Group.js +52 -5
  293. package/lib-esm/ActionList2/List.d.ts +1 -1
  294. package/lib-esm/Autocomplete/Autocomplete.d.ts +3 -3
  295. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +3 -3
  296. package/lib-esm/Breadcrumbs.d.ts +8 -7
  297. package/lib-esm/Breadcrumbs.js +8 -13
  298. package/lib-esm/Button/Button.d.ts +2 -3
  299. package/lib-esm/Button/Button.js +2 -2
  300. package/lib-esm/Button/ButtonBase.d.ts +5 -8
  301. package/lib-esm/Button/ButtonBase.js +1 -3
  302. package/lib-esm/Button/ButtonClose.d.ts +3 -46
  303. package/lib-esm/Button/ButtonClose.js +2 -2
  304. package/lib-esm/Button/ButtonDanger.d.ts +2 -3
  305. package/lib-esm/Button/ButtonDanger.js +2 -2
  306. package/lib-esm/Button/ButtonInvisible.d.ts +2 -3
  307. package/lib-esm/Button/ButtonInvisible.js +2 -2
  308. package/lib-esm/Button/ButtonOutline.d.ts +2 -3
  309. package/lib-esm/Button/ButtonOutline.js +2 -2
  310. package/lib-esm/Button/ButtonPrimary.d.ts +2 -3
  311. package/lib-esm/Button/ButtonPrimary.js +2 -2
  312. package/lib-esm/Button/ButtonTableList.d.ts +1 -2
  313. package/lib-esm/Button/ButtonTableList.js +2 -2
  314. package/lib-esm/CircleBadge.d.ts +4 -5
  315. package/lib-esm/CircleBadge.js +2 -2
  316. package/lib-esm/CircleOcticon.d.ts +1 -1
  317. package/lib-esm/CounterLabel.d.ts +1 -2
  318. package/lib-esm/CounterLabel.js +2 -2
  319. package/lib-esm/Dialog/Dialog.d.ts +5 -9
  320. package/lib-esm/Dialog/Dialog.js +12 -12
  321. package/lib-esm/Dialog.d.ts +4 -5
  322. package/lib-esm/Dialog.js +2 -2
  323. package/lib-esm/Dropdown.d.ts +10 -99
  324. package/lib-esm/Dropdown.js +4 -4
  325. package/lib-esm/DropdownMenu/DropdownButton.d.ts +3 -47
  326. package/lib-esm/DropdownMenu/DropdownButton.js +3 -1
  327. package/lib-esm/FilterList.d.ts +264 -303
  328. package/lib-esm/FilterList.js +3 -7
  329. package/lib-esm/FilteredSearch.d.ts +1 -2
  330. package/lib-esm/FilteredSearch.js +2 -2
  331. package/lib-esm/Flash.d.ts +1 -2
  332. package/lib-esm/Flash.js +2 -2
  333. package/lib-esm/FormGroup.d.ts +4 -5
  334. package/lib-esm/FormGroup.js +3 -3
  335. package/lib-esm/Header.d.ts +6 -7
  336. package/lib-esm/Header.js +5 -5
  337. package/lib-esm/Label.d.ts +1 -2
  338. package/lib-esm/Label.js +3 -4
  339. package/lib-esm/LabelGroup.d.ts +1 -2
  340. package/lib-esm/LabelGroup.js +2 -2
  341. package/lib-esm/Link.d.ts +1 -2
  342. package/lib-esm/Link.js +2 -2
  343. package/lib-esm/NewButton/button.js +31 -42
  344. package/lib-esm/Overlay.d.ts +11 -10
  345. package/lib-esm/Overlay.js +2 -3
  346. package/lib-esm/Pagehead.d.ts +1 -2
  347. package/lib-esm/Pagehead.js +2 -2
  348. package/lib-esm/Pagination/Pagination.js +2 -2
  349. package/lib-esm/Popover.d.ts +4 -5
  350. package/lib-esm/Popover.js +4 -5
  351. package/lib-esm/Position.d.ts +4 -4
  352. package/lib-esm/SelectMenu/SelectMenu.d.ts +21 -189
  353. package/lib-esm/SelectMenu/SelectMenu.js +1 -2
  354. package/lib-esm/SelectMenu/SelectMenuDivider.d.ts +1 -2
  355. package/lib-esm/SelectMenu/SelectMenuDivider.js +2 -2
  356. package/lib-esm/SelectMenu/SelectMenuFilter.js +2 -2
  357. package/lib-esm/SelectMenu/SelectMenuFooter.d.ts +1 -2
  358. package/lib-esm/SelectMenu/SelectMenuFooter.js +2 -2
  359. package/lib-esm/SelectMenu/SelectMenuHeader.d.ts +1 -2
  360. package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
  361. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +2 -3
  362. package/lib-esm/SelectMenu/SelectMenuItem.js +2 -2
  363. package/lib-esm/SelectMenu/SelectMenuList.d.ts +1 -2
  364. package/lib-esm/SelectMenu/SelectMenuList.js +2 -2
  365. package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.d.ts +2 -2
  366. package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +3 -2
  367. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +2 -3
  368. package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
  369. package/lib-esm/SelectMenu/SelectMenuTab.d.ts +1 -2
  370. package/lib-esm/SelectMenu/SelectMenuTab.js +2 -2
  371. package/lib-esm/SelectMenu/SelectMenuTabPanel.d.ts +1 -2
  372. package/lib-esm/SelectMenu/SelectMenuTabPanel.js +2 -2
  373. package/lib-esm/SelectMenu/SelectMenuTabs.d.ts +1 -2
  374. package/lib-esm/SelectMenu/SelectMenuTabs.js +2 -2
  375. package/lib-esm/SideNav.d.ts +11 -8
  376. package/lib-esm/SideNav.js +8 -16
  377. package/lib-esm/StateLabel.d.ts +1 -2
  378. package/lib-esm/StateLabel.js +7 -6
  379. package/lib-esm/StyledOcticon.d.ts +1 -2
  380. package/lib-esm/StyledOcticon.js +1 -2
  381. package/lib-esm/SubNav.d.ts +5 -11
  382. package/lib-esm/SubNav.js +8 -13
  383. package/lib-esm/TabNav.d.ts +3 -4
  384. package/lib-esm/TabNav.js +3 -3
  385. package/lib-esm/TextInputWithTokens.d.ts +3 -3
  386. package/lib-esm/Timeline.d.ts +19 -393
  387. package/lib-esm/Timeline.js +12 -13
  388. package/lib-esm/Token/Token.d.ts +1 -1
  389. package/lib-esm/Tooltip.d.ts +1 -2
  390. package/lib-esm/Tooltip.js +2 -2
  391. package/lib-esm/Truncate.d.ts +1 -2
  392. package/lib-esm/Truncate.js +1 -2
  393. package/lib-esm/UnderlineNav.d.ts +2 -3
  394. package/lib-esm/UnderlineNav.js +3 -3
  395. package/lib-esm/__tests__/Breadcrumbs.test.js +4 -1
  396. package/lib-esm/__tests__/Breadcrumbs.types.test.d.ts +3 -0
  397. package/lib-esm/__tests__/Breadcrumbs.types.test.js +12 -0
  398. package/lib-esm/__tests__/Button.test.js +6 -2
  399. package/lib-esm/__tests__/CircleBadge.types.test.d.ts +3 -0
  400. package/lib-esm/__tests__/CircleBadge.types.test.js +13 -0
  401. package/lib-esm/__tests__/CounterLabel.types.test.d.ts +3 -0
  402. package/lib-esm/__tests__/CounterLabel.types.test.js +13 -0
  403. package/lib-esm/__tests__/Dialog.types.test.d.ts +3 -0
  404. package/lib-esm/__tests__/Dialog.types.test.js +13 -0
  405. package/lib-esm/__tests__/Dialog2.types.test.d.ts +3 -0
  406. package/lib-esm/__tests__/Dialog2.types.test.js +16 -0
  407. package/lib-esm/__tests__/Dropdown.types.test.d.ts +3 -0
  408. package/lib-esm/__tests__/Dropdown.types.test.js +17 -0
  409. package/lib-esm/__tests__/FilterList.types.test.d.ts +3 -0
  410. package/lib-esm/__tests__/FilterList.types.test.js +13 -0
  411. package/lib-esm/__tests__/FilteredSearch.types.test.d.ts +3 -0
  412. package/lib-esm/__tests__/FilteredSearch.types.test.js +13 -0
  413. package/lib-esm/__tests__/Flash.types.test.d.ts +3 -0
  414. package/lib-esm/__tests__/Flash.types.test.js +13 -0
  415. package/lib-esm/__tests__/FormGroup.types.test.d.ts +3 -0
  416. package/lib-esm/__tests__/FormGroup.types.test.js +13 -0
  417. package/lib-esm/__tests__/Header.types.test.d.ts +3 -0
  418. package/lib-esm/__tests__/Header.types.test.js +15 -0
  419. package/lib-esm/__tests__/Label.types.test.d.ts +3 -0
  420. package/lib-esm/__tests__/Label.types.test.js +13 -0
  421. package/lib-esm/__tests__/LabelGroup.types.test.d.ts +3 -0
  422. package/lib-esm/__tests__/LabelGroup.types.test.js +13 -0
  423. package/lib-esm/__tests__/Link.test.js +11 -5
  424. package/lib-esm/__tests__/Link.types.test.d.ts +3 -0
  425. package/lib-esm/__tests__/Link.types.test.js +13 -0
  426. package/lib-esm/__tests__/Overlay.types.test.d.ts +3 -0
  427. package/lib-esm/__tests__/Overlay.types.test.js +20 -0
  428. package/lib-esm/__tests__/Pagehead.types.test.d.ts +3 -0
  429. package/lib-esm/__tests__/Pagehead.types.test.js +13 -0
  430. package/lib-esm/__tests__/Pagination.types.test.d.ts +3 -0
  431. package/lib-esm/__tests__/Pagination.types.test.js +18 -0
  432. package/lib-esm/__tests__/Popover.types.test.d.ts +3 -0
  433. package/lib-esm/__tests__/Popover.types.test.js +13 -0
  434. package/lib-esm/__tests__/SelectMenu.types.test.d.ts +3 -0
  435. package/lib-esm/__tests__/SelectMenu.types.test.js +33 -0
  436. package/lib-esm/__tests__/SideNav.types.test.d.ts +3 -0
  437. package/lib-esm/__tests__/SideNav.types.test.js +13 -0
  438. package/lib-esm/__tests__/StateLabel.types.test.d.ts +3 -0
  439. package/lib-esm/__tests__/StateLabel.types.test.js +13 -0
  440. package/lib-esm/__tests__/StyledOcticon.types.test.d.ts +3 -0
  441. package/lib-esm/__tests__/StyledOcticon.types.test.js +16 -0
  442. package/lib-esm/__tests__/SubNav.types.test.d.ts +3 -0
  443. package/lib-esm/__tests__/SubNav.types.test.js +14 -0
  444. package/lib-esm/__tests__/TabNav.types.test.d.ts +3 -0
  445. package/lib-esm/__tests__/TabNav.types.test.js +12 -0
  446. package/lib-esm/__tests__/Timeline.types.test.d.ts +3 -0
  447. package/lib-esm/__tests__/Timeline.types.test.js +18 -0
  448. package/lib-esm/__tests__/Tooltip.types.test.d.ts +3 -0
  449. package/lib-esm/__tests__/Tooltip.types.test.js +13 -0
  450. package/lib-esm/__tests__/Truncate.types.test.d.ts +3 -0
  451. package/lib-esm/__tests__/Truncate.types.test.js +16 -0
  452. package/lib-esm/__tests__/UnderlineNav.types.test.d.ts +3 -0
  453. package/lib-esm/__tests__/UnderlineNav.types.test.js +12 -0
  454. package/lib-esm/stories/ActionList2.stories.js +4 -3
  455. package/lib-esm/stories/ActionMenu.stories.js +1 -3
  456. package/lib-esm/stories/ConfirmationDialog.stories.js +16 -8
  457. package/lib-esm/stories/Dialog.stories.js +6 -2
  458. package/lib-esm/stories/useFocusTrap.stories.js +6 -2
  459. package/lib-esm/stories/useFocusZone.stories.js +13 -5
  460. package/lib-esm/theme-preval.js +446 -0
  461. package/lib-esm/utils/testing.d.ts +1 -1
  462. package/package-lock.json +16 -16
  463. package/package.json +3 -3
  464. package/src/ActionList2/Group.tsx +76 -7
  465. package/src/ActionList2/List.tsx +1 -1
  466. package/src/Breadcrumbs.tsx +11 -11
  467. package/src/Button/Button.tsx +2 -3
  468. package/src/Button/ButtonBase.tsx +2 -6
  469. package/src/Button/ButtonClose.tsx +2 -6
  470. package/src/Button/ButtonDanger.tsx +2 -3
  471. package/src/Button/ButtonInvisible.tsx +2 -3
  472. package/src/Button/ButtonOutline.tsx +2 -3
  473. package/src/Button/ButtonPrimary.tsx +2 -3
  474. package/src/Button/ButtonTableList.tsx +2 -15
  475. package/src/CircleBadge.tsx +2 -4
  476. package/src/CounterLabel.tsx +2 -4
  477. package/src/Dialog/Dialog.tsx +22 -11
  478. package/src/Dialog.tsx +2 -6
  479. package/src/Dropdown.tsx +3 -7
  480. package/src/DropdownMenu/DropdownButton.tsx +1 -1
  481. package/src/FilterList.tsx +5 -11
  482. package/src/FilteredSearch.tsx +2 -3
  483. package/src/Flash.tsx +2 -4
  484. package/src/FormGroup.tsx +3 -6
  485. package/src/Header.tsx +4 -14
  486. package/src/Label.tsx +2 -5
  487. package/src/LabelGroup.tsx +2 -3
  488. package/src/Link.tsx +2 -6
  489. package/src/NewButton/button.tsx +82 -78
  490. package/src/Overlay.tsx +13 -11
  491. package/src/Pagehead.tsx +2 -3
  492. package/src/Pagination/Pagination.tsx +3 -5
  493. package/src/Popover.tsx +3 -14
  494. package/src/SelectMenu/SelectMenu.tsx +1 -3
  495. package/src/SelectMenu/SelectMenuDivider.tsx +2 -3
  496. package/src/SelectMenu/SelectMenuFilter.tsx +2 -3
  497. package/src/SelectMenu/SelectMenuFooter.tsx +2 -3
  498. package/src/SelectMenu/SelectMenuHeader.tsx +2 -4
  499. package/src/SelectMenu/SelectMenuItem.tsx +2 -3
  500. package/src/SelectMenu/SelectMenuList.tsx +2 -3
  501. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +4 -3
  502. package/src/SelectMenu/SelectMenuModal.tsx +2 -4
  503. package/src/SelectMenu/SelectMenuTab.tsx +2 -3
  504. package/src/SelectMenu/SelectMenuTabPanel.tsx +2 -3
  505. package/src/SelectMenu/SelectMenuTabs.tsx +2 -3
  506. package/src/SideNav.tsx +11 -13
  507. package/src/StateLabel.tsx +3 -5
  508. package/src/StyledOcticon.tsx +1 -3
  509. package/src/SubNav.tsx +8 -13
  510. package/src/TabNav.tsx +3 -7
  511. package/src/Timeline.tsx +11 -12
  512. package/src/Tooltip.tsx +3 -3
  513. package/src/Truncate.tsx +0 -5
  514. package/src/UnderlineNav.tsx +3 -6
  515. package/src/__tests__/Breadcrumbs.test.tsx +1 -1
  516. package/src/__tests__/Breadcrumbs.types.test.tsx +22 -0
  517. package/src/__tests__/Button.test.tsx +2 -2
  518. package/src/__tests__/CircleBadge.types.test.tsx +11 -0
  519. package/src/__tests__/CounterLabel.types.test.tsx +11 -0
  520. package/src/__tests__/Dialog.types.test.tsx +11 -0
  521. package/src/__tests__/Dialog2.types.test.tsx +11 -0
  522. package/src/__tests__/Dropdown.types.test.tsx +21 -0
  523. package/src/__tests__/FilterList.types.test.tsx +17 -0
  524. package/src/__tests__/FilteredSearch.types.test.tsx +11 -0
  525. package/src/__tests__/Flash.types.test.tsx +11 -0
  526. package/src/__tests__/FormGroup.types.test.tsx +11 -0
  527. package/src/__tests__/Header.types.test.tsx +19 -0
  528. package/src/__tests__/Label.types.test.tsx +11 -0
  529. package/src/__tests__/LabelGroup.types.test.tsx +11 -0
  530. package/src/__tests__/Link.test.tsx +5 -5
  531. package/src/__tests__/Link.types.test.tsx +11 -0
  532. package/src/__tests__/Overlay.types.test.tsx +18 -0
  533. package/src/__tests__/Pagehead.types.test.tsx +11 -0
  534. package/src/__tests__/Pagination.types.test.tsx +11 -0
  535. package/src/__tests__/Popover.types.test.tsx +17 -0
  536. package/src/__tests__/SelectMenu.types.test.tsx +37 -0
  537. package/src/__tests__/SideNav.types.test.tsx +11 -0
  538. package/src/__tests__/StateLabel.types.test.tsx +11 -0
  539. package/src/__tests__/StyledOcticon.types.test.tsx +12 -0
  540. package/src/__tests__/SubNav.types.test.tsx +25 -0
  541. package/src/__tests__/TabNav.types.test.tsx +22 -0
  542. package/src/__tests__/Timeline.types.test.tsx +31 -0
  543. package/src/__tests__/Tooltip.types.test.tsx +11 -0
  544. package/src/__tests__/Truncate.types.test.tsx +11 -0
  545. package/src/__tests__/UnderlineNav.types.test.tsx +22 -0
  546. package/src/__tests__/__snapshots__/Label.test.tsx.snap +3 -4
  547. package/src/__tests__/__snapshots__/Link.test.tsx.snap +1 -2
  548. package/src/__tests__/__snapshots__/NewButton.test.tsx.snap +5 -0
  549. package/src/stories/ActionList2.stories.tsx +3 -3
  550. package/src/stories/ActionMenu.stories.tsx +1 -4
  551. package/src/stories/ConfirmationDialog.stories.tsx +4 -4
  552. package/src/stories/Dialog.stories.tsx +2 -2
  553. package/src/stories/useFocusTrap.stories.tsx +2 -2
  554. package/src/stories/useFocusZone.stories.tsx +4 -4
  555. package/stats.html +1 -1
@@ -33,7 +33,6 @@ const CounterLabel = styled_components_1.default.span `
33
33
  border-radius: 20px;
34
34
  ${colorStyles};
35
35
  ${bgStyles};
36
- ${constants_1.COMMON};
37
36
 
38
37
  &:empty {
39
38
  display: none;
@@ -148,15 +148,11 @@ export declare type DialogHeight = keyof typeof heightMap;
148
148
  export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
149
149
  children?: React.ReactNode;
150
150
  } & React.RefAttributes<HTMLDivElement>> & {
151
- Header: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp & {
152
- as: string;
153
- }, "as">;
154
- Title: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;
155
- Subtitle: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;
156
- Body: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;
157
- Footer: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp & {
158
- as: string;
159
- }, "as">;
151
+ Header: import("styled-components").StyledComponent<"div", any, {}, never>;
152
+ Title: import("styled-components").StyledComponent<"div", any, SxProp, never>;
153
+ Subtitle: import("styled-components").StyledComponent<"div", any, SxProp, never>;
154
+ Body: import("styled-components").StyledComponent<"div", any, SxProp, never>;
155
+ Footer: import("styled-components").StyledComponent<"div", any, SxProp, never>;
160
156
  Buttons: React.FC<{
161
157
  buttons: DialogButtonProps[];
162
158
  }>;
@@ -68,7 +68,7 @@ const widthMap = {
68
68
  const StyledDialog = _styledComponents.default.div.withConfig({
69
69
  displayName: "Dialog__StyledDialog",
70
70
  componentId: "sc-11pkgky-1"
71
- })(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";", ";", ";"], (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('shadows.overlay.shadow'), props => {
71
+ })(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";"], (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('shadows.overlay.shadow'), props => {
72
72
  var _props$width;
73
73
 
74
74
  return widthMap[(_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'xlarge'];
@@ -76,7 +76,7 @@ const StyledDialog = _styledComponents.default.div.withConfig({
76
76
  var _props$height;
77
77
 
78
78
  return heightMap[(_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : 'auto'];
79
- }, ANIMATION_DURATION, (0, _constants.get)('animation.easeOutCubic'), _constants.COMMON, _constants.POSITION, _sx.default);
79
+ }, ANIMATION_DURATION, (0, _constants.get)('animation.easeOutCubic'), _sx.default);
80
80
 
81
81
  const DefaultHeader = ({
82
82
  dialogLabelId,
@@ -189,30 +189,36 @@ const _Dialog = /*#__PURE__*/_react.default.forwardRef((props, forwardedRef) =>
189
189
  });
190
190
 
191
191
  _Dialog.displayName = 'Dialog';
192
- const Header = (0, _styledComponents.default)(_Box.default).attrs({
192
+
193
+ const Header = _styledComponents.default.div.attrs({
193
194
  as: 'header'
194
195
  }).withConfig({
195
196
  displayName: "Dialog__Header",
196
197
  componentId: "sc-11pkgky-2"
197
198
  })(["box-shadow:0 1px 0 ", ";padding:", ";z-index:1;flex-shrink:0;"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.2'));
198
- const Title = (0, _styledComponents.default)(_Box.default).withConfig({
199
+
200
+ const Title = _styledComponents.default.div.withConfig({
199
201
  displayName: "Dialog__Title",
200
202
  componentId: "sc-11pkgky-3"
201
- })(["font-size:", ";font-weight:", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'));
202
- const Subtitle = (0, _styledComponents.default)(_Box.default).withConfig({
203
+ })(["font-size:", ";font-weight:", ";", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'), _sx.default);
204
+
205
+ const Subtitle = _styledComponents.default.div.withConfig({
203
206
  displayName: "Dialog__Subtitle",
204
207
  componentId: "sc-11pkgky-4"
205
- })(["font-size:", ";margin-top:", ";color:", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.muted'));
206
- const Body = (0, _styledComponents.default)(_Box.default).withConfig({
208
+ })(["font-size:", ";margin-top:", ";color:", ";", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.muted'), _sx.default);
209
+
210
+ const Body = _styledComponents.default.div.withConfig({
207
211
  displayName: "Dialog__Body",
208
212
  componentId: "sc-11pkgky-5"
209
- })(["flex-grow:1;overflow:auto;padding:", ";"], (0, _constants.get)('space.3'));
210
- const Footer = (0, _styledComponents.default)(_Box.default).attrs({
213
+ })(["flex-grow:1;overflow:auto;padding:", ";", ";"], (0, _constants.get)('space.3'), _sx.default);
214
+
215
+ const Footer = _styledComponents.default.div.attrs({
211
216
  as: 'footer'
212
217
  }).withConfig({
213
218
  displayName: "Dialog__Footer",
214
219
  componentId: "sc-11pkgky-6"
215
- })(["box-shadow:0 -1px 0 ", ";padding:", ";display:flex;flex-flow:wrap;justify-content:flex-end;z-index:1;flex-shrink:0;button{margin-left:", ";&:first-child{margin-left:0;}}"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.3'), (0, _constants.get)('space.1'));
220
+ })(["box-shadow:0 -1px 0 ", ";padding:", ";display:flex;flex-flow:wrap;justify-content:flex-end;z-index:1;flex-shrink:0;button{margin-left:", ";&:first-child{margin-left:0;}}", ";"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.3'), (0, _constants.get)('space.1'), _sx.default);
221
+
216
222
  const buttonTypes = {
217
223
  normal: _Button.default,
218
224
  primary: _Button.ButtonPrimary,
@@ -96,8 +96,6 @@ const StyledDialog = styled_components_1.default.div `
96
96
  }
97
97
  }
98
98
 
99
- ${constants_1.COMMON};
100
- ${constants_1.POSITION};
101
99
  ${sx_1.default};
102
100
  `;
103
101
  const DefaultHeader = ({ dialogLabelId, title, subtitle, dialogDescriptionId, onClose }) => {
@@ -161,27 +159,33 @@ const _Dialog = react_1.default.forwardRef((props, forwardedRef) => {
161
159
  </>);
162
160
  });
163
161
  _Dialog.displayName = 'Dialog';
164
- const Header = styled_components_1.default(Box_1.default).attrs({ as: 'header' }) `
162
+ const Header = styled_components_1.default.div.attrs({ as: 'header' }) `
165
163
  box-shadow: 0 1px 0 ${constants_1.get('colors.border.default')};
166
164
  padding: ${constants_1.get('space.2')};
167
165
  z-index: 1;
168
166
  flex-shrink: 0;
169
167
  `;
170
- const Title = styled_components_1.default(Box_1.default) `
168
+ const Title = styled_components_1.default.div `
171
169
  font-size: ${constants_1.get('fontSizes.1')};
172
170
  font-weight: ${constants_1.get('fontWeights.bold')};
171
+
172
+ ${sx_1.default};
173
173
  `;
174
- const Subtitle = styled_components_1.default(Box_1.default) `
174
+ const Subtitle = styled_components_1.default.div `
175
175
  font-size: ${constants_1.get('fontSizes.0')};
176
176
  margin-top: ${constants_1.get('space.1')};
177
177
  color: ${constants_1.get('colors.fg.muted')};
178
+
179
+ ${sx_1.default};
178
180
  `;
179
- const Body = styled_components_1.default(Box_1.default) `
181
+ const Body = styled_components_1.default.div `
180
182
  flex-grow: 1;
181
183
  overflow: auto;
182
184
  padding: ${constants_1.get('space.3')};
185
+
186
+ ${sx_1.default};
183
187
  `;
184
- const Footer = styled_components_1.default(Box_1.default).attrs({ as: 'footer' }) `
188
+ const Footer = styled_components_1.default.div.attrs({ as: 'footer' }) `
185
189
  box-shadow: 0 -1px 0 ${constants_1.get('colors.border.default')};
186
190
  padding: ${constants_1.get('space.3')};
187
191
  display: flex;
@@ -196,6 +200,8 @@ const Footer = styled_components_1.default(Box_1.default).attrs({ as: 'footer' }
196
200
  margin-left: 0;
197
201
  }
198
202
  }
203
+
204
+ ${sx_1.default};
199
205
  `;
200
206
  const buttonTypes = {
201
207
  normal: Button_1.default,
package/lib/Dialog.d.ts CHANGED
@@ -1,11 +1,10 @@
1
1
  import React from 'react';
2
- import { SystemCommonProps, SystemLayoutProps } from './constants';
3
2
  import { SxProp } from './sx';
4
3
  import { ComponentProps } from './utils/types';
5
4
  declare const DialogBase: import("styled-components").StyledComponent<"div", any, {
6
5
  narrow?: boolean | undefined;
7
6
  wide?: boolean | undefined;
8
- } & SystemLayoutProps & SystemCommonProps & SxProp, never>;
7
+ } & SxProp, never>;
9
8
  declare const DialogHeaderBase: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;
10
9
  export declare type DialogHeaderProps = ComponentProps<typeof DialogHeaderBase>;
11
10
  declare function DialogHeader({ theme, children, backgroundColor, ...rest }: DialogHeaderProps): JSX.Element;
@@ -135,8 +134,8 @@ declare namespace DialogHeader {
135
134
  py?: React.Validator<import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
136
135
  paddingY?: React.Validator<import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
137
136
  size?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
138
- sx?: React.Validator<import("./sx").BetterSystemStyleObject | undefined> | undefined;
139
137
  role?: React.Validator<React.AriaRole | null | undefined> | undefined;
138
+ sx?: React.Validator<import("./sx").BetterSystemStyleObject | undefined> | undefined;
140
139
  key?: React.Validator<React.Key | null | undefined> | undefined;
141
140
  defaultChecked?: React.Validator<boolean | null | undefined> | undefined;
142
141
  defaultValue?: React.Validator<string | number | readonly string[] | null | undefined> | undefined;
@@ -398,9 +397,9 @@ declare type InternalDialogProps = {
398
397
  initialFocusRef?: React.RefObject<HTMLElement>;
399
398
  returnFocusRef?: React.RefObject<HTMLElement>;
400
399
  } & ComponentProps<typeof DialogBase>;
401
- declare const Dialog: React.ForwardRefExoticComponent<Pick<InternalDialogProps, "backgroundColor" | "color" | "display" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "verticalAlign" | "width" | "margin" | "overflow" | "padding" | "hidden" | "children" | "theme" | "p" | "slot" | "style" | "title" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "sx" | "role" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "initialFocusRef" | "returnFocusRef" | "isOpen" | "onDismiss" | "narrow" | "wide"> & React.RefAttributes<HTMLDivElement>>;
400
+ declare const Dialog: React.ForwardRefExoticComponent<Pick<InternalDialogProps, "color" | "translate" | "hidden" | "children" | "theme" | "slot" | "style" | "title" | "role" | "sx" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "initialFocusRef" | "returnFocusRef" | "isOpen" | "onDismiss" | "narrow" | "wide"> & React.RefAttributes<HTMLDivElement>>;
402
401
  export declare type DialogProps = ComponentProps<typeof Dialog>;
403
- declare const _default: React.ForwardRefExoticComponent<Pick<InternalDialogProps, "backgroundColor" | "color" | "display" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "verticalAlign" | "width" | "margin" | "overflow" | "padding" | "hidden" | "children" | "theme" | "p" | "slot" | "style" | "title" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "sx" | "role" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "initialFocusRef" | "returnFocusRef" | "isOpen" | "onDismiss" | "narrow" | "wide"> & React.RefAttributes<HTMLDivElement>> & {
402
+ declare const _default: React.ForwardRefExoticComponent<Pick<InternalDialogProps, "color" | "translate" | "hidden" | "children" | "theme" | "slot" | "style" | "title" | "role" | "sx" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "initialFocusRef" | "returnFocusRef" | "isOpen" | "onDismiss" | "narrow" | "wide"> & React.RefAttributes<HTMLDivElement>> & {
404
403
  Header: typeof DialogHeader;
405
404
  };
406
405
  export default _default;
package/lib/Dialog.js CHANGED
@@ -36,7 +36,7 @@ const noop = () => null;
36
36
  const DialogBase = _styledComponents.default.div.withConfig({
37
37
  displayName: "Dialog__DialogBase",
38
38
  componentId: "sc-1vcjhsg-0"
39
- })(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";", ";", ";"], (0, _constants.get)('shadows.shadow.large'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', _constants.LAYOUT, _constants.COMMON, _sx.default);
39
+ })(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";"], (0, _constants.get)('shadows.shadow.large'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', _sx.default);
40
40
 
41
41
  const DialogHeaderBase = (0, _styledComponents.default)(_Box.default).withConfig({
42
42
  displayName: "Dialog__DialogHeaderBase",
package/lib/Dialog.jsx CHANGED
@@ -53,8 +53,6 @@ const DialogBase = styled_components_1.default.div `
53
53
  height: 100vh;
54
54
  }
55
55
 
56
- ${constants_1.LAYOUT};
57
- ${constants_1.COMMON};
58
56
  ${sx_1.default};
59
57
  `;
60
58
  const DialogHeaderBase = styled_components_1.default(Box_1.default) `
package/lib/Dropdown.d.ts CHANGED
@@ -1,15 +1,14 @@
1
1
  import React from 'react';
2
2
  import { ButtonProps } from './Button';
3
- import { SystemCommonProps } from './constants';
4
3
  import { DetailsProps } from './Details';
5
4
  import { SxProp } from './sx';
6
5
  import { ComponentProps } from './utils/types';
7
6
  export declare type DropdownProps = DetailsProps;
8
7
  export declare type DropdownButtonProps = ButtonProps;
9
- declare const DropdownCaret: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
8
+ declare const DropdownCaret: import("styled-components").StyledComponent<"div", any, SxProp, never>;
10
9
  declare const DropdownMenu: import("styled-components").StyledComponent<"ul", any, {
11
10
  direction?: "s" | "ne" | "e" | "se" | "sw" | "w" | undefined;
12
- } & SystemCommonProps & SxProp, never>;
11
+ } & SxProp, never>;
13
12
  declare const DropdownItem: import("styled-components").StyledComponent<"li", any, SxProp, never>;
14
13
  export declare type DropdownCaretProps = ComponentProps<typeof DropdownCaret>;
15
14
  export declare type DropdownMenuProps = ComponentProps<typeof DropdownMenu>;
@@ -57,8 +56,8 @@ declare const _default: {
57
56
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
58
57
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
59
58
  open?: boolean | undefined;
60
- sx?: import("./sx").BetterSystemStyleObject | undefined;
61
59
  role?: React.AriaRole | undefined;
60
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
62
61
  key?: React.Key | null | undefined;
63
62
  defaultChecked?: boolean | undefined;
64
63
  defaultValue?: string | number | readonly string[] | undefined;
@@ -354,8 +353,8 @@ declare const _default: {
354
353
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
355
354
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
356
355
  open?: boolean | undefined;
357
- sx?: import("./sx").BetterSystemStyleObject | undefined;
358
356
  role?: React.AriaRole | undefined;
357
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
359
358
  key?: React.Key | null | undefined;
360
359
  defaultChecked?: boolean | undefined;
361
360
  defaultValue?: string | number | readonly string[] | undefined;
@@ -610,70 +609,26 @@ declare const _default: {
610
609
  theme?: any;
611
610
  }> | undefined;
612
611
  } & {
613
- Caret: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
612
+ Caret: import("styled-components").StyledComponent<"div", any, SxProp, never>;
614
613
  Menu: import("styled-components").StyledComponent<"ul", any, {
615
614
  direction?: "s" | "ne" | "e" | "se" | "sw" | "w" | undefined;
616
- } & SystemCommonProps & SxProp, never>;
615
+ } & SxProp, never>;
617
616
  Item: import("styled-components").StyledComponent<"li", any, SxProp, never>;
618
617
  Button: {
619
618
  ({ children, ...rest }: {
620
- backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
621
- color?: (string & import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>) | undefined;
622
- display?: import("styled-system").ResponsiveValue<import("csstype").Property.Display, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
623
- fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
624
- height?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
625
- marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
626
- marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
627
- marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
628
- marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
629
- maxHeight?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxHeight<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
630
- maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
631
- minHeight?: import("styled-system").ResponsiveValue<import("csstype").Property.MinHeight<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
632
- minWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
633
- opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
634
- overflowX?: import("styled-system").ResponsiveValue<import("csstype").Property.OverflowX, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
635
- overflowY?: import("styled-system").ResponsiveValue<import("csstype").Property.OverflowY, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
636
- paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
637
- paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
638
- paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
639
- paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
619
+ color?: string | undefined;
640
620
  translate?: "yes" | "no" | undefined;
641
- verticalAlign?: import("styled-system").ResponsiveValue<import("csstype").Property.VerticalAlign<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
642
- width?: import("styled-system").ResponsiveValue<import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
643
- margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
644
- overflow?: import("styled-system").ResponsiveValue<import("csstype").Property.Overflow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
645
- padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
646
621
  hidden?: boolean | undefined;
647
622
  children?: React.ReactNode;
648
623
  value?: string | number | readonly string[] | undefined;
649
624
  ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
650
625
  form?: string | undefined;
651
- p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
652
626
  slot?: string | undefined;
653
627
  style?: React.CSSProperties | undefined;
654
628
  title?: string | undefined;
655
- bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
656
- m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
657
- mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
658
- mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
659
- mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
660
- ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
661
- mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
662
- marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
663
- my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
664
- marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
665
- pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
666
- pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
667
- pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
668
- pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
669
- px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
670
- paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
671
- py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
672
- paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
673
- size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
674
- sx?: import("./sx").BetterSystemStyleObject | undefined;
675
629
  variant?: "small" | "medium" | "large" | undefined;
676
630
  role?: React.AriaRole | undefined;
631
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
677
632
  type?: "button" | "reset" | "submit" | undefined;
678
633
  name?: string | undefined;
679
634
  key?: React.Key | null | undefined;
@@ -937,63 +892,19 @@ declare const _default: {
937
892
  theme?: any;
938
893
  }): JSX.Element;
939
894
  defaultProps: Partial<{
940
- backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
941
- color?: (string & import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>) | undefined;
942
- display?: import("styled-system").ResponsiveValue<import("csstype").Property.Display, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
943
- fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
944
- height?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
945
- marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
946
- marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
947
- marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
948
- marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
949
- maxHeight?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxHeight<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
950
- maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
951
- minHeight?: import("styled-system").ResponsiveValue<import("csstype").Property.MinHeight<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
952
- minWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
953
- opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
954
- overflowX?: import("styled-system").ResponsiveValue<import("csstype").Property.OverflowX, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
955
- overflowY?: import("styled-system").ResponsiveValue<import("csstype").Property.OverflowY, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
956
- paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
957
- paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
958
- paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
959
- paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
895
+ color?: string | undefined;
960
896
  translate?: "yes" | "no" | undefined;
961
- verticalAlign?: import("styled-system").ResponsiveValue<import("csstype").Property.VerticalAlign<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
962
- width?: import("styled-system").ResponsiveValue<import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
963
- margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
964
- overflow?: import("styled-system").ResponsiveValue<import("csstype").Property.Overflow, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
965
- padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
966
897
  hidden?: boolean | undefined;
967
898
  children?: React.ReactNode;
968
899
  value?: string | number | readonly string[] | undefined;
969
900
  ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
970
901
  form?: string | undefined;
971
- p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
972
902
  slot?: string | undefined;
973
903
  style?: React.CSSProperties | undefined;
974
904
  title?: string | undefined;
975
- bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
976
- m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
977
- mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
978
- mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
979
- mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
980
- ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
981
- mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
982
- marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
983
- my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
984
- marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
985
- pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
986
- pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
987
- pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
988
- pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
989
- px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
990
- paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
991
- py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
992
- paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
993
- size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
994
- sx?: import("./sx").BetterSystemStyleObject | undefined;
995
905
  variant?: "small" | "medium" | "large" | undefined;
996
906
  role?: React.AriaRole | undefined;
907
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
997
908
  type?: "button" | "reset" | "submit" | undefined;
998
909
  name?: string | undefined;
999
910
  key?: React.Key | null | undefined;
package/lib/Dropdown.js CHANGED
@@ -62,17 +62,17 @@ DropdownButton.displayName = "DropdownButton";
62
62
  const DropdownCaret = _styledComponents.default.div.withConfig({
63
63
  displayName: "Dropdown__DropdownCaret",
64
64
  componentId: "sc-16yoecj-1"
65
- })(["border:4px solid transparent;margin-left:12px;border-top-color:currentcolor;border-bottom-width:0;content:'';display:inline-block;height:0;vertical-align:middle;width:0;", ";", ";"], _constants.COMMON, _sx.default);
65
+ })(["border:4px solid transparent;margin-left:12px;border-top-color:currentcolor;border-bottom-width:0;content:'';display:inline-block;height:0;vertical-align:middle;width:0;", ";"], _sx.default);
66
66
 
67
67
  const DropdownMenu = _styledComponents.default.ul.withConfig({
68
68
  displayName: "Dropdown__DropdownMenu",
69
69
  componentId: "sc-16yoecj-2"
70
- })(["background-clip:padding-box;background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";left:0;list-style:none;margin-top:2px;padding:5px 0 5px 0 !important;position:absolute;top:100%;width:160px;z-index:100;&::before{position:absolute;display:inline-block;content:'';}&::after{position:absolute;display:inline-block;content:'';}&::before{border:8px solid transparent;border-bottom-color:", ";}&::after{border:7px solid transparent;border-bottom-color:", ";}> ul{list-style:none;}", ";", ";", ";"], (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.shadow.large'), (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('colors.canvas.overlay'), props => props.direction ? (0, _DropdownStyles.default)(props.theme, props.direction) : '', _constants.COMMON, _sx.default);
70
+ })(["background-clip:padding-box;background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";left:0;list-style:none;margin-top:2px;padding:5px 0 5px 0 !important;position:absolute;top:100%;width:160px;z-index:100;&::before{position:absolute;display:inline-block;content:'';}&::after{position:absolute;display:inline-block;content:'';}&::before{border:8px solid transparent;border-bottom-color:", ";}&::after{border:7px solid transparent;border-bottom-color:", ";}> ul{list-style:none;}", ";", ";"], (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.shadow.large'), (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('colors.canvas.overlay'), props => props.direction ? (0, _DropdownStyles.default)(props.theme, props.direction) : '', _sx.default);
71
71
 
72
72
  const DropdownItem = _styledComponents.default.li.withConfig({
73
73
  displayName: "Dropdown__DropdownItem",
74
74
  componentId: "sc-16yoecj-3"
75
- })(["display:block;padding:", " 10px ", " 15px;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;a{color:", ";text-decoration:none;display:block;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;}&:focus,a:focus{color:", ";text-decoration:none;background-color:", ";}&:hover,&:hover a{color:", ";text-decoration:none;background-color:", ";outline:none;}", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), _constants.COMMON, _sx.default);
75
+ })(["display:block;padding:", " 10px ", " 15px;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;a{color:", ";text-decoration:none;display:block;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;}&:focus,a:focus{color:", ";text-decoration:none;background-color:", ";}&:hover,&:hover a{color:", ";text-decoration:none;background-color:", ";outline:none;}", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), _sx.default);
76
76
 
77
77
  DropdownMenu.defaultProps = {
78
78
  direction: 'sw'
package/lib/Dropdown.jsx CHANGED
@@ -37,7 +37,6 @@ const DropdownCaret = styled_components_1.default.div `
37
37
  height: 0;
38
38
  vertical-align: middle;
39
39
  width: 0;
40
- ${constants_1.COMMON};
41
40
  ${sx_1.default};
42
41
  `;
43
42
  const DropdownMenu = styled_components_1.default.ul `
@@ -82,7 +81,6 @@ const DropdownMenu = styled_components_1.default.ul `
82
81
  list-style: none;
83
82
  }
84
83
  ${props => (props.direction ? DropdownStyles_1.default(props.theme, props.direction) : '')};
85
- ${constants_1.COMMON};
86
84
  ${sx_1.default};
87
85
  `;
88
86
  const DropdownItem = styled_components_1.default.li `
@@ -116,7 +114,6 @@ const DropdownItem = styled_components_1.default.li `
116
114
  background-color: ${constants_1.get('colors.accent.emphasis')};
117
115
  outline: none;
118
116
  }
119
- ${constants_1.COMMON};
120
117
  ${sx_1.default};
121
118
  `;
122
119
  DropdownMenu.defaultProps = { direction: 'sw' };