@sproutsocial/racine 12.20.0 → 12.21.1

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 (621) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/README.md +46 -44
  3. package/__flow__/Avatar/index.js +26 -26
  4. package/__flow__/Avatar/index.stories.js +8 -8
  5. package/__flow__/Avatar/index.test.js +13 -13
  6. package/__flow__/Badge/constants.js +14 -14
  7. package/__flow__/Badge/index.js +18 -18
  8. package/__flow__/Badge/index.stories.js +8 -8
  9. package/__flow__/Badge/index.test.js +43 -43
  10. package/__flow__/Badge/styles.js +13 -9
  11. package/__flow__/Banner/index.js +21 -21
  12. package/__flow__/Banner/index.stories.js +56 -68
  13. package/__flow__/Banner/index.test.js +32 -34
  14. package/__flow__/Banner/styles.js +4 -4
  15. package/__flow__/Box/index.js +4 -4
  16. package/__flow__/Box/index.stories.js +58 -51
  17. package/__flow__/Box/index.test.js +7 -7
  18. package/__flow__/Box/styles.js +6 -6
  19. package/__flow__/Breadcrumb/index.js +9 -13
  20. package/__flow__/Breadcrumb/index.stories.js +14 -14
  21. package/__flow__/Breadcrumb/index.test.js +20 -20
  22. package/__flow__/Breadcrumb/styles.js +5 -5
  23. package/__flow__/Button/index.js +23 -23
  24. package/__flow__/Button/index.stories.js +34 -34
  25. package/__flow__/Button/styles.js +11 -11
  26. package/__flow__/Card/index.js +7 -7
  27. package/__flow__/Card/index.stories.js +14 -14
  28. package/__flow__/Card/styles.js +7 -7
  29. package/__flow__/CharacterCounter/index.js +7 -7
  30. package/__flow__/CharacterCounter/index.stories.js +25 -26
  31. package/__flow__/CharacterCounter/index.test.js +11 -11
  32. package/__flow__/CharacterCounter/styles.js +3 -3
  33. package/__flow__/ChartLegend/index.js +7 -7
  34. package/__flow__/ChartLegend/index.stories.js +22 -22
  35. package/__flow__/ChartLegend/index.test.js +27 -27
  36. package/__flow__/ChartLegend/styles.js +7 -7
  37. package/__flow__/Checkbox/index.js +10 -10
  38. package/__flow__/Checkbox/index.stories.js +24 -24
  39. package/__flow__/Checkbox/index.test.js +25 -25
  40. package/__flow__/Checkbox/styles.js +27 -28
  41. package/__flow__/Collapsible/index.js +15 -15
  42. package/__flow__/Collapsible/index.stories.js +13 -13
  43. package/__flow__/Collapsible/index.test.js +27 -27
  44. package/__flow__/Collapsible/styles.js +5 -5
  45. package/__flow__/DatePicker/DateRangePicker.js +5 -8
  46. package/__flow__/DatePicker/DateRangePicker.stories.js +19 -19
  47. package/__flow__/DatePicker/DateRangePicker.test.js +21 -21
  48. package/__flow__/DatePicker/SingleDatePicker.js +6 -9
  49. package/__flow__/DatePicker/SingleDatePicker.stories.js +10 -10
  50. package/__flow__/DatePicker/SingleDatePicker.test.js +21 -23
  51. package/__flow__/DatePicker/StatefulDateRangePicker.js +6 -6
  52. package/__flow__/DatePicker/StatefulSingleDatePicker.js +3 -3
  53. package/__flow__/DatePicker/common.js +13 -13
  54. package/__flow__/DatePicker/index.js +3 -3
  55. package/__flow__/DatePicker/styles.js +42 -42
  56. package/__flow__/Drawer/SlideTransition.js +10 -10
  57. package/__flow__/Drawer/index.js +29 -29
  58. package/__flow__/Drawer/index.stories.js +58 -141
  59. package/__flow__/Drawer/index.test.js +28 -28
  60. package/__flow__/Drawer/styles.js +4 -4
  61. package/__flow__/EmptyState/index.js +5 -5
  62. package/__flow__/EmptyState/index.stories.js +10 -10
  63. package/__flow__/EmptyState/index.test.js +27 -27
  64. package/__flow__/EnumIllustrationNames.js +1 -1
  65. package/__flow__/Fieldset/index.js +14 -14
  66. package/__flow__/Fieldset/index.stories.js +19 -20
  67. package/__flow__/Fieldset/index.test.js +14 -14
  68. package/__flow__/Fieldset/styles.js +5 -5
  69. package/__flow__/FormField/index.js +14 -14
  70. package/__flow__/FormField/index.stories.js +31 -21
  71. package/__flow__/FormField/index.test.js +19 -19
  72. package/__flow__/Icon/deprecatedIcons.js +36 -36
  73. package/__flow__/Icon/index.js +17 -17
  74. package/__flow__/Icon/index.stories.js +30 -30
  75. package/__flow__/Icon/index.test.js +15 -15
  76. package/__flow__/Icon/styles.js +12 -12
  77. package/__flow__/IllustrationViewBoxes.js +1 -1
  78. package/__flow__/Image/index.js +6 -7
  79. package/__flow__/Image/index.stories.js +5 -5
  80. package/__flow__/Image/index.test.js +24 -24
  81. package/__flow__/Image/styles.js +6 -5
  82. package/__flow__/Indicator/index.js +7 -7
  83. package/__flow__/Indicator/index.stories.js +8 -14
  84. package/__flow__/Indicator/index.test.js +6 -6
  85. package/__flow__/Indicator/styles.js +6 -6
  86. package/__flow__/Input/index.js +37 -37
  87. package/__flow__/Input/index.stories.js +96 -189
  88. package/__flow__/Input/index.test.js +117 -117
  89. package/__flow__/Input/styles.js +13 -13
  90. package/__flow__/KeyboardKey/index.js +5 -5
  91. package/__flow__/KeyboardKey/index.stories.js +9 -12
  92. package/__flow__/KeyboardKey/index.test.js +7 -7
  93. package/__flow__/KeyboardKey/styles.js +4 -4
  94. package/__flow__/Label/index.js +6 -6
  95. package/__flow__/Label/index.stories.js +5 -7
  96. package/__flow__/Label/index.test.js +8 -8
  97. package/__flow__/Link/constants.js +4 -4
  98. package/__flow__/Link/index.js +11 -11
  99. package/__flow__/Link/index.stories.js +61 -102
  100. package/__flow__/Link/index.test.js +40 -40
  101. package/__flow__/Link/styles.js +6 -6
  102. package/__flow__/Listbox/index.js +16 -16
  103. package/__flow__/Listbox/index.stories.js +35 -35
  104. package/__flow__/Listbox/index.test.js +63 -65
  105. package/__flow__/Loader/index.js +12 -12
  106. package/__flow__/Loader/index.stories.js +10 -10
  107. package/__flow__/Loader/index.test.js +17 -17
  108. package/__flow__/Loader/styles.js +9 -13
  109. package/__flow__/LoaderButton/index.js +25 -25
  110. package/__flow__/LoaderButton/index.stories.js +7 -7
  111. package/__flow__/LoaderButton/index.test.js +15 -15
  112. package/__flow__/Menu/constants.js +8 -8
  113. package/__flow__/Menu/descendants.js +89 -80
  114. package/__flow__/Menu/hooks.js +22 -22
  115. package/__flow__/Menu/index.flow.js +13 -13
  116. package/__flow__/Menu/index.js +56 -60
  117. package/__flow__/Menu/index.stories.js +19 -19
  118. package/__flow__/Menu/index.test.js +22 -22
  119. package/__flow__/Menu/names.js +4945 -4945
  120. package/__flow__/Menu/styles.js +5 -5
  121. package/__flow__/Message/index.js +33 -33
  122. package/__flow__/Message/index.stories.js +18 -13
  123. package/__flow__/Message/index.test.js +6 -6
  124. package/__flow__/Message/styles.js +15 -15
  125. package/__flow__/Modal/index.js +19 -19
  126. package/__flow__/Modal/index.stories.js +43 -43
  127. package/__flow__/Modal/index.test.js +29 -29
  128. package/__flow__/Modal/styles.js +27 -32
  129. package/__flow__/Numeral/index.js +22 -22
  130. package/__flow__/Numeral/index.stories.js +74 -74
  131. package/__flow__/Numeral/styles.js +3 -3
  132. package/__flow__/Numeral/tests/A11y.test.js +7 -7
  133. package/__flow__/Numeral/tests/abbreviate.test.js +40 -40
  134. package/__flow__/Numeral/tests/currency.test.js +24 -24
  135. package/__flow__/Numeral/tests/defaults.test.js +20 -20
  136. package/__flow__/Numeral/tests/invalid.test.js +9 -9
  137. package/__flow__/Numeral/tests/locale.test.js +38 -38
  138. package/__flow__/Numeral/tests/precision.test.js +76 -76
  139. package/__flow__/Numeral/tests/testNumeral.js +11 -11
  140. package/__flow__/Numeral/tests/zero.test.js +8 -8
  141. package/__flow__/OverflowList/index.flow.js +2 -2
  142. package/__flow__/OverflowList/index.js +12 -12
  143. package/__flow__/OverflowList/index.stories.js +10 -10
  144. package/__flow__/OverflowList/index.test.js +25 -25
  145. package/__flow__/OverflowList/styles.js +5 -5
  146. package/__flow__/PartnerLogo/TypePartnerNames.js +37 -37
  147. package/__flow__/PartnerLogo/index.js +20 -20
  148. package/__flow__/PartnerLogo/index.stories.js +52 -52
  149. package/__flow__/PartnerLogo/styles.js +12 -12
  150. package/__flow__/Popout/index.js +66 -67
  151. package/__flow__/Popout/index.stories.js +101 -82
  152. package/__flow__/Popout/index.test.js +43 -43
  153. package/__flow__/Popout/styles.js +4 -5
  154. package/__flow__/Portal/index.js +9 -9
  155. package/__flow__/Portal/index.stories.js +12 -12
  156. package/__flow__/Radio/index.js +4 -4
  157. package/__flow__/Radio/index.stories.js +11 -11
  158. package/__flow__/Radio/index.test.js +12 -12
  159. package/__flow__/Radio/styles.js +15 -16
  160. package/__flow__/SegmentedControl/index.js +7 -7
  161. package/__flow__/SegmentedControl/index.stories.js +7 -7
  162. package/__flow__/SegmentedControl/index.test.js +29 -29
  163. package/__flow__/SegmentedControl/styles.js +10 -9
  164. package/__flow__/Select/index.js +10 -10
  165. package/__flow__/Select/index.stories.js +33 -69
  166. package/__flow__/Select/index.test.js +14 -14
  167. package/__flow__/Select/styles.js +16 -16
  168. package/__flow__/Skeleton/index.js +4 -4
  169. package/__flow__/Skeleton/index.stories.js +5 -5
  170. package/__flow__/SpotIllustration/illustrationNames.js +118 -117
  171. package/__flow__/SpotIllustration/index.js +15 -11
  172. package/__flow__/SpotIllustration/index.stories.js +18 -18
  173. package/__flow__/SpotIllustration/spotIllustrations/molecule.svg +14 -0
  174. package/__flow__/Stack/index.js +43 -33
  175. package/__flow__/Stack/index.stories.js +41 -91
  176. package/__flow__/Stack/index.test.js +16 -7
  177. package/__flow__/Switch/index.js +8 -8
  178. package/__flow__/Switch/index.stories.js +5 -5
  179. package/__flow__/Switch/index.test.js +25 -29
  180. package/__flow__/Switch/styles.js +13 -9
  181. package/__flow__/Table/index.js +17 -17
  182. package/__flow__/Table/index.stories.js +99 -99
  183. package/__flow__/Table/index.test.js +32 -32
  184. package/__flow__/Table/styles.js +4 -4
  185. package/__flow__/TableCell/index.js +8 -7
  186. package/__flow__/TableCell/index.stories.js +20 -23
  187. package/__flow__/TableCell/index.test.js +11 -11
  188. package/__flow__/TableCell/styles.js +4 -5
  189. package/__flow__/TableHeaderCell/index.js +14 -14
  190. package/__flow__/TableHeaderCell/index.stories.js +35 -30
  191. package/__flow__/TableHeaderCell/index.test.js +11 -11
  192. package/__flow__/TableHeaderCell/styles.js +4 -4
  193. package/__flow__/TableRowAccordion/index.js +8 -8
  194. package/__flow__/TableRowAccordion/index.stories.js +36 -36
  195. package/__flow__/TableRowAccordion/index.test.js +28 -30
  196. package/__flow__/TableRowAccordion/styles.js +11 -7
  197. package/__flow__/Tabs/index.js +11 -11
  198. package/__flow__/Tabs/index.stories.js +28 -54
  199. package/__flow__/Tabs/index.test.js +54 -54
  200. package/__flow__/Tabs/styles.js +6 -7
  201. package/__flow__/Text/index.js +14 -14
  202. package/__flow__/Text/index.stories.js +84 -86
  203. package/__flow__/Text/index.test.js +29 -33
  204. package/__flow__/Text/styles.js +4 -4
  205. package/__flow__/Textarea/index.js +5 -5
  206. package/__flow__/Textarea/index.stories.js +54 -93
  207. package/__flow__/Textarea/index.test.js +30 -30
  208. package/__flow__/Textarea/styles.js +6 -6
  209. package/__flow__/ThemeProvider/index.js +4 -4
  210. package/__flow__/Toast/index.js +23 -23
  211. package/__flow__/Toast/index.stories.js +21 -21
  212. package/__flow__/Toast/styles.js +6 -6
  213. package/__flow__/ToggleHint/index.js +8 -8
  214. package/__flow__/ToggleHint/index.test.js +8 -8
  215. package/__flow__/ToggleHint/styles.js +8 -8
  216. package/__flow__/Token/index.js +10 -10
  217. package/__flow__/Token/index.stories.js +49 -54
  218. package/__flow__/Token/index.test.js +28 -28
  219. package/__flow__/Token/styles.js +11 -11
  220. package/__flow__/TokenInput/index.flow.js +1 -1
  221. package/__flow__/TokenInput/index.js +39 -39
  222. package/__flow__/TokenInput/index.stories.js +121 -128
  223. package/__flow__/TokenInput/styles.js +5 -5
  224. package/__flow__/TokenInput/tests/default/clicking.test.js +13 -13
  225. package/__flow__/TokenInput/tests/default/deleting.test.js +39 -39
  226. package/__flow__/TokenInput/tests/default/focusing.test.js +18 -18
  227. package/__flow__/TokenInput/tests/default/inputting.test.js +23 -23
  228. package/__flow__/TokenInput/tests/default/pasting.test.js +52 -52
  229. package/__flow__/TokenInput/tests/default/rendering.test.js +54 -54
  230. package/__flow__/TokenInput/util.js +4 -4
  231. package/__flow__/Tooltip/index.js +21 -21
  232. package/__flow__/Tooltip/index.stories.js +18 -18
  233. package/__flow__/Tooltip/index.test.js +54 -54
  234. package/__flow__/Tooltip/styles.js +4 -5
  235. package/__flow__/VisuallyHidden/index.js +3 -3
  236. package/__flow__/building-stories.stories.mdx +121 -0
  237. package/__flow__/dataviz/dataviz.stories.js +4 -4
  238. package/__flow__/dataviz/index.js +3 -3
  239. package/__flow__/index.js +72 -72
  240. package/__flow__/overview.stories.js +60 -0
  241. package/__flow__/setupTests.js +5 -5
  242. package/__flow__/systemProps/background.js +3 -3
  243. package/__flow__/systemProps/border.js +3 -3
  244. package/__flow__/systemProps/color.js +3 -3
  245. package/__flow__/systemProps/custom.js +3 -3
  246. package/__flow__/systemProps/flexbox.js +3 -3
  247. package/__flow__/systemProps/grid.js +3 -3
  248. package/__flow__/systemProps/index.js +14 -14
  249. package/__flow__/systemProps/layout.js +3 -3
  250. package/__flow__/systemProps/position.js +3 -3
  251. package/__flow__/systemProps/shadow.js +3 -3
  252. package/__flow__/systemProps/space.js +3 -7
  253. package/__flow__/systemProps/systemProps.js +14 -14
  254. package/__flow__/systemProps/tests/background.test.js +17 -17
  255. package/__flow__/systemProps/tests/border.test.js +61 -61
  256. package/__flow__/systemProps/tests/color.test.js +15 -15
  257. package/__flow__/systemProps/tests/custom.test.js +12 -12
  258. package/__flow__/systemProps/tests/flexbox.test.js +33 -33
  259. package/__flow__/systemProps/tests/grid.test.js +31 -31
  260. package/__flow__/systemProps/tests/layout.test.js +29 -29
  261. package/__flow__/systemProps/tests/position.test.js +19 -19
  262. package/__flow__/systemProps/tests/shadow.test.js +11 -11
  263. package/__flow__/systemProps/tests/space.test.js +11 -11
  264. package/__flow__/systemProps/tests/types.flow.js +18 -18
  265. package/__flow__/systemProps/tests/typography.test.js +21 -21
  266. package/__flow__/systemProps/tests/variant.test.js +9 -9
  267. package/__flow__/systemProps/types.flow.js +2 -2
  268. package/__flow__/systemProps/typography.js +4 -4
  269. package/__flow__/systemProps/variant.js +5 -5
  270. package/__flow__/themes/dark/dataviz-palette.js +21 -21
  271. package/__flow__/themes/dark/decorative-palettes.js +1 -1
  272. package/__flow__/themes/dark/theme.js +16 -16
  273. package/__flow__/themes/extendedThemes/README.md +1 -1
  274. package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js +4 -4
  275. package/__flow__/themes/extendedThemes/sproutTheme/index.js +2 -2
  276. package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js +4 -4
  277. package/__flow__/themes/light/dataviz-palette.js +21 -21
  278. package/__flow__/themes/light/decorative-palettes.js +1 -1
  279. package/__flow__/themes/light/literal-colors.js +133 -133
  280. package/__flow__/themes/light/theme.js +51 -51
  281. package/__flow__/types/system-props.flow.js +5 -5
  282. package/__flow__/types/theme.colors.flow.js +2 -2
  283. package/__flow__/types/theme.flow.js +5 -5
  284. package/__flow__/utils/a11yTest.js +1 -1
  285. package/__flow__/utils/chartColors.js +1 -1
  286. package/__flow__/utils/constants.js +1 -1
  287. package/__flow__/utils/dataQaLabelQueries.js +2 -2
  288. package/__flow__/utils/hooks.js +17 -17
  289. package/__flow__/utils/index.js +4 -4
  290. package/__flow__/utils/innerText.js +9 -9
  291. package/__flow__/utils/mixins.js +6 -6
  292. package/__flow__/utils/react-testing-library.js +6 -6
  293. package/__flow__/utils/responsiveProps/index.js +3 -3
  294. package/__flow__/utils/responsiveProps/index.test.js +8 -8
  295. package/__flow__/utils/system-props.js +3 -3
  296. package/__flow__/utils/useInteractiveColor.js +5 -5
  297. package/__flow__/writing-good-stories.stories.mdx +3 -0
  298. package/bin/racine-codemod.js +12 -12
  299. package/codemods/__tests__/migrate-2.x-to-3.x.test.js +2 -2
  300. package/codemods/migrate-2.x-to-3.x.js +29 -30
  301. package/commonjs/Avatar/index.js +33 -53
  302. package/commonjs/Badge/constants.js +18 -15
  303. package/commonjs/Badge/index.js +14 -28
  304. package/commonjs/Badge/styles.js +3 -9
  305. package/commonjs/Banner/index.js +16 -37
  306. package/commonjs/Banner/styles.js +0 -5
  307. package/commonjs/Box/index.js +2 -9
  308. package/commonjs/Box/styles.js +0 -4
  309. package/commonjs/Breadcrumb/index.js +13 -29
  310. package/commonjs/Breadcrumb/styles.js +1 -4
  311. package/commonjs/Button/index.js +29 -43
  312. package/commonjs/Button/styles.js +6 -15
  313. package/commonjs/Card/index.js +16 -26
  314. package/commonjs/Card/styles.js +1 -5
  315. package/commonjs/CharacterCounter/index.js +6 -23
  316. package/commonjs/CharacterCounter/styles.js +0 -5
  317. package/commonjs/ChartLegend/index.js +5 -20
  318. package/commonjs/ChartLegend/styles.js +2 -11
  319. package/commonjs/Checkbox/index.js +30 -53
  320. package/commonjs/Checkbox/styles.js +14 -35
  321. package/commonjs/Collapsible/index.js +31 -54
  322. package/commonjs/Collapsible/styles.js +3 -6
  323. package/commonjs/DatePicker/DateRangePicker.js +4 -17
  324. package/commonjs/DatePicker/SingleDatePicker.js +3 -17
  325. package/commonjs/DatePicker/StatefulDateRangePicker.js +16 -31
  326. package/commonjs/DatePicker/StatefulSingleDatePicker.js +7 -20
  327. package/commonjs/DatePicker/common.js +8 -22
  328. package/commonjs/DatePicker/index.js +0 -5
  329. package/commonjs/DatePicker/styles.js +8 -25
  330. package/commonjs/Drawer/SlideTransition.js +8 -18
  331. package/commonjs/Drawer/index.js +51 -90
  332. package/commonjs/Drawer/styles.js +0 -8
  333. package/commonjs/EmptyState/index.js +8 -20
  334. package/commonjs/Fieldset/index.js +15 -32
  335. package/commonjs/Fieldset/styles.js +2 -7
  336. package/commonjs/FormField/index.js +19 -36
  337. package/commonjs/Icon/deprecatedIcons.js +36 -36
  338. package/commonjs/Icon/index.js +19 -37
  339. package/commonjs/Icon/styles.js +7 -16
  340. package/commonjs/IllustrationViewBoxes.js +1 -0
  341. package/commonjs/Image/index.js +13 -41
  342. package/commonjs/Image/styles.js +1 -7
  343. package/commonjs/Indicator/index.js +8 -26
  344. package/commonjs/Indicator/styles.js +1 -7
  345. package/commonjs/Input/index.js +80 -119
  346. package/commonjs/Input/styles.js +9 -19
  347. package/commonjs/KeyboardKey/index.js +3 -20
  348. package/commonjs/KeyboardKey/styles.js +0 -4
  349. package/commonjs/Label/index.js +7 -27
  350. package/commonjs/Link/constants.js +3 -4
  351. package/commonjs/Link/index.js +16 -28
  352. package/commonjs/Link/styles.js +1 -8
  353. package/commonjs/Listbox/index.js +15 -36
  354. package/commonjs/Loader/index.js +15 -31
  355. package/commonjs/Loader/styles.js +2 -13
  356. package/commonjs/LoaderButton/index.js +26 -55
  357. package/commonjs/Menu/constants.js +9 -8
  358. package/commonjs/Menu/descendants.js +70 -105
  359. package/commonjs/Menu/hooks.js +23 -41
  360. package/commonjs/Menu/index.flow.js +0 -7
  361. package/commonjs/Menu/index.js +94 -164
  362. package/commonjs/Menu/names.js +1 -1
  363. package/commonjs/Menu/styles.js +0 -6
  364. package/commonjs/Message/index.js +37 -70
  365. package/commonjs/Message/styles.js +9 -24
  366. package/commonjs/Modal/index.js +31 -54
  367. package/commonjs/Modal/styles.js +17 -36
  368. package/commonjs/Numeral/index.js +39 -67
  369. package/commonjs/Numeral/styles.js +0 -3
  370. package/commonjs/Numeral/tests/testNumeral.js +13 -31
  371. package/commonjs/OverflowList/index.flow.js +0 -2
  372. package/commonjs/OverflowList/index.js +27 -41
  373. package/commonjs/OverflowList/styles.js +0 -7
  374. package/commonjs/PartnerLogo/index.js +19 -33
  375. package/commonjs/PartnerLogo/styles.js +7 -15
  376. package/commonjs/Popout/index.js +95 -127
  377. package/commonjs/Popout/styles.js +0 -5
  378. package/commonjs/Portal/index.js +8 -31
  379. package/commonjs/Radio/index.js +18 -42
  380. package/commonjs/Radio/styles.js +9 -21
  381. package/commonjs/SegmentedControl/index.js +17 -37
  382. package/commonjs/SegmentedControl/styles.js +2 -12
  383. package/commonjs/Select/index.js +24 -47
  384. package/commonjs/Select/styles.js +12 -24
  385. package/commonjs/Skeleton/index.js +0 -5
  386. package/commonjs/SpotIllustration/illustrationNames.js +1 -1
  387. package/commonjs/SpotIllustration/index.js +5 -11
  388. package/commonjs/Stack/index.js +27 -42
  389. package/commonjs/Switch/index.js +17 -42
  390. package/commonjs/Switch/styles.js +3 -11
  391. package/commonjs/Table/index.js +26 -50
  392. package/commonjs/Table/styles.js +0 -4
  393. package/commonjs/TableCell/index.js +12 -30
  394. package/commonjs/TableCell/styles.js +0 -5
  395. package/commonjs/TableHeaderCell/index.js +27 -56
  396. package/commonjs/TableHeaderCell/styles.js +0 -6
  397. package/commonjs/TableRowAccordion/index.js +12 -37
  398. package/commonjs/TableRowAccordion/styles.js +2 -9
  399. package/commonjs/Tabs/index.js +16 -66
  400. package/commonjs/Tabs/styles.js +2 -11
  401. package/commonjs/Text/index.js +12 -25
  402. package/commonjs/Text/styles.js +1 -6
  403. package/commonjs/Textarea/index.js +31 -55
  404. package/commonjs/Textarea/styles.js +2 -9
  405. package/commonjs/ThemeProvider/index.js +1 -10
  406. package/commonjs/Toast/index.js +19 -42
  407. package/commonjs/Toast/styles.js +1 -7
  408. package/commonjs/ToggleHint/index.js +15 -39
  409. package/commonjs/ToggleHint/styles.js +2 -9
  410. package/commonjs/Token/index.js +15 -29
  411. package/commonjs/Token/styles.js +5 -12
  412. package/commonjs/TokenInput/index.js +70 -122
  413. package/commonjs/TokenInput/styles.js +1 -7
  414. package/commonjs/TokenInput/util.js +2 -7
  415. package/commonjs/Tooltip/index.js +40 -63
  416. package/commonjs/Tooltip/styles.js +1 -5
  417. package/commonjs/VisuallyHidden/index.js +0 -4
  418. package/commonjs/dataviz/index.js +0 -4
  419. package/commonjs/index.js +0 -129
  420. package/commonjs/systemProps/background.js +0 -1
  421. package/commonjs/systemProps/border.js +0 -1
  422. package/commonjs/systemProps/color.js +0 -1
  423. package/commonjs/systemProps/custom.js +0 -1
  424. package/commonjs/systemProps/flexbox.js +0 -1
  425. package/commonjs/systemProps/grid.js +0 -1
  426. package/commonjs/systemProps/index.js +0 -28
  427. package/commonjs/systemProps/layout.js +0 -1
  428. package/commonjs/systemProps/position.js +0 -1
  429. package/commonjs/systemProps/shadow.js +0 -1
  430. package/commonjs/systemProps/space.js +1 -2
  431. package/commonjs/systemProps/systemProps.js +0 -13
  432. package/commonjs/systemProps/tests/types.flow.js +25 -22
  433. package/commonjs/systemProps/typography.js +0 -1
  434. package/commonjs/systemProps/variant.js +2 -3
  435. package/commonjs/themes/dark/dataviz-palette.js +20 -22
  436. package/commonjs/themes/dark/decorative-palettes.js +0 -2
  437. package/commonjs/themes/dark/theme.js +13 -27
  438. package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js +2 -9
  439. package/commonjs/themes/extendedThemes/sproutTheme/index.js +0 -5
  440. package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js +2 -9
  441. package/commonjs/themes/light/dataviz-palette.js +20 -22
  442. package/commonjs/themes/light/decorative-palettes.js +0 -2
  443. package/commonjs/themes/light/literal-colors.js +132 -134
  444. package/commonjs/themes/light/theme.js +43 -59
  445. package/commonjs/types/system-props.flow.js +1 -1
  446. package/commonjs/types/theme.colors.flow.js +0 -2
  447. package/commonjs/types/theme.flow.js +0 -1
  448. package/commonjs/utils/a11yTest.js +3 -10
  449. package/commonjs/utils/chartColors.js +0 -1
  450. package/commonjs/utils/constants.js +1 -1
  451. package/commonjs/utils/dataQaLabelQueries.js +12 -21
  452. package/commonjs/utils/hooks.js +39 -70
  453. package/commonjs/utils/index.js +2 -9
  454. package/commonjs/utils/innerText.js +10 -14
  455. package/commonjs/utils/mixins.js +2 -7
  456. package/commonjs/utils/react-testing-library.js +4 -26
  457. package/commonjs/utils/responsiveProps/index.js +1 -11
  458. package/commonjs/utils/system-props.js +2 -5
  459. package/commonjs/utils/useInteractiveColor.js +6 -8
  460. package/dist/illustration.svg +1 -1
  461. package/dist/illustrationList.js +1 -1
  462. package/lib/Avatar/index.js +40 -47
  463. package/lib/Badge/constants.js +19 -15
  464. package/lib/Badge/index.js +18 -25
  465. package/lib/Badge/styles.js +8 -6
  466. package/lib/Banner/index.js +20 -32
  467. package/lib/Banner/styles.js +3 -2
  468. package/lib/Box/index.js +4 -5
  469. package/lib/Box/styles.js +3 -2
  470. package/lib/Breadcrumb/index.js +19 -27
  471. package/lib/Breadcrumb/styles.js +3 -2
  472. package/lib/Button/index.js +31 -38
  473. package/lib/Button/styles.js +14 -11
  474. package/lib/Card/index.js +18 -24
  475. package/lib/Card/styles.js +5 -4
  476. package/lib/CharacterCounter/index.js +8 -20
  477. package/lib/CharacterCounter/styles.js +3 -2
  478. package/lib/ChartLegend/index.js +9 -17
  479. package/lib/ChartLegend/styles.js +5 -4
  480. package/lib/Checkbox/index.js +32 -51
  481. package/lib/Checkbox/styles.js +21 -26
  482. package/lib/Collapsible/index.js +36 -51
  483. package/lib/Collapsible/styles.js +6 -5
  484. package/lib/DatePicker/DateRangePicker.js +8 -14
  485. package/lib/DatePicker/SingleDatePicker.js +7 -13
  486. package/lib/DatePicker/StatefulDateRangePicker.js +19 -26
  487. package/lib/DatePicker/StatefulSingleDatePicker.js +9 -15
  488. package/lib/DatePicker/common.js +14 -13
  489. package/lib/DatePicker/index.js +2 -2
  490. package/lib/DatePicker/styles.js +12 -22
  491. package/lib/Drawer/SlideTransition.js +11 -14
  492. package/lib/Drawer/index.js +64 -88
  493. package/lib/Drawer/styles.js +4 -3
  494. package/lib/EmptyState/index.js +11 -17
  495. package/lib/Fieldset/index.js +19 -29
  496. package/lib/Fieldset/styles.js +5 -4
  497. package/lib/FormField/index.js +27 -33
  498. package/lib/Icon/deprecatedIcons.js +36 -36
  499. package/lib/Icon/index.js +25 -34
  500. package/lib/Icon/styles.js +11 -13
  501. package/lib/IllustrationViewBoxes.js +1 -0
  502. package/lib/Image/index.js +15 -38
  503. package/lib/Image/styles.js +4 -4
  504. package/lib/Indicator/index.js +11 -23
  505. package/lib/Indicator/styles.js +5 -5
  506. package/lib/Input/index.js +87 -115
  507. package/lib/Input/styles.js +13 -15
  508. package/lib/KeyboardKey/index.js +6 -17
  509. package/lib/KeyboardKey/styles.js +3 -2
  510. package/lib/Label/index.js +10 -24
  511. package/lib/Link/constants.js +5 -4
  512. package/lib/Link/index.js +18 -25
  513. package/lib/Link/styles.js +6 -5
  514. package/lib/Listbox/index.js +21 -29
  515. package/lib/Loader/index.js +17 -29
  516. package/lib/Loader/styles.js +6 -8
  517. package/lib/LoaderButton/index.js +34 -51
  518. package/lib/Menu/constants.js +10 -8
  519. package/lib/Menu/descendants.js +73 -94
  520. package/lib/Menu/hooks.js +28 -39
  521. package/lib/Menu/index.flow.js +6 -5
  522. package/lib/Menu/index.js +113 -150
  523. package/lib/Menu/names.js +1 -1
  524. package/lib/Menu/styles.js +4 -3
  525. package/lib/Message/index.js +42 -66
  526. package/lib/Message/styles.js +15 -23
  527. package/lib/Modal/index.js +38 -51
  528. package/lib/Modal/styles.js +23 -32
  529. package/lib/Numeral/index.js +45 -64
  530. package/lib/Numeral/styles.js +3 -2
  531. package/lib/Numeral/tests/testNumeral.js +17 -27
  532. package/lib/OverflowList/index.flow.js +2 -1
  533. package/lib/OverflowList/index.js +31 -38
  534. package/lib/OverflowList/styles.js +5 -4
  535. package/lib/PartnerLogo/index.js +23 -31
  536. package/lib/PartnerLogo/styles.js +11 -12
  537. package/lib/Popout/index.js +105 -121
  538. package/lib/Popout/styles.js +3 -3
  539. package/lib/Portal/index.js +11 -29
  540. package/lib/Radio/index.js +20 -40
  541. package/lib/Radio/styles.js +14 -14
  542. package/lib/SegmentedControl/index.js +21 -34
  543. package/lib/SegmentedControl/styles.js +7 -9
  544. package/lib/Select/index.js +27 -44
  545. package/lib/Select/styles.js +16 -20
  546. package/lib/Skeleton/index.js +7 -4
  547. package/lib/SpotIllustration/illustrationNames.js +2 -1
  548. package/lib/SpotIllustration/index.js +9 -10
  549. package/lib/Stack/index.js +31 -39
  550. package/lib/Switch/index.js +21 -39
  551. package/lib/Switch/styles.js +8 -7
  552. package/lib/Table/index.js +30 -40
  553. package/lib/Table/styles.js +3 -2
  554. package/lib/TableCell/index.js +14 -27
  555. package/lib/TableCell/styles.js +3 -3
  556. package/lib/TableHeaderCell/index.js +30 -52
  557. package/lib/TableHeaderCell/styles.js +3 -2
  558. package/lib/TableRowAccordion/index.js +16 -34
  559. package/lib/TableRowAccordion/styles.js +5 -3
  560. package/lib/Tabs/index.js +18 -63
  561. package/lib/Tabs/styles.js +6 -6
  562. package/lib/Text/index.js +15 -21
  563. package/lib/Text/styles.js +4 -3
  564. package/lib/Textarea/index.js +33 -53
  565. package/lib/Textarea/styles.js +6 -5
  566. package/lib/ThemeProvider/index.js +4 -7
  567. package/lib/Toast/index.js +26 -37
  568. package/lib/Toast/styles.js +5 -4
  569. package/lib/ToggleHint/index.js +18 -36
  570. package/lib/ToggleHint/styles.js +6 -5
  571. package/lib/Token/index.js +20 -26
  572. package/lib/Token/styles.js +10 -9
  573. package/lib/TokenInput/index.js +78 -118
  574. package/lib/TokenInput/styles.js +5 -4
  575. package/lib/TokenInput/util.js +5 -3
  576. package/lib/Tooltip/index.js +45 -60
  577. package/lib/Tooltip/styles.js +4 -4
  578. package/lib/VisuallyHidden/index.js +3 -2
  579. package/lib/dataviz/index.js +4 -3
  580. package/lib/index.js +66 -64
  581. package/lib/systemProps/background.js +3 -1
  582. package/lib/systemProps/border.js +3 -1
  583. package/lib/systemProps/color.js +3 -1
  584. package/lib/systemProps/custom.js +3 -1
  585. package/lib/systemProps/flexbox.js +3 -1
  586. package/lib/systemProps/grid.js +3 -1
  587. package/lib/systemProps/index.js +16 -14
  588. package/lib/systemProps/layout.js +3 -1
  589. package/lib/systemProps/position.js +3 -1
  590. package/lib/systemProps/shadow.js +3 -1
  591. package/lib/systemProps/space.js +2 -1
  592. package/lib/systemProps/systemProps.js +14 -13
  593. package/lib/systemProps/tests/types.flow.js +27 -22
  594. package/lib/systemProps/typography.js +3 -1
  595. package/lib/systemProps/variant.js +4 -3
  596. package/lib/themes/dark/dataviz-palette.js +23 -21
  597. package/lib/themes/dark/decorative-palettes.js +3 -1
  598. package/lib/themes/dark/theme.js +20 -23
  599. package/lib/themes/extendedThemes/sproutTheme/dark/theme.js +4 -7
  600. package/lib/themes/extendedThemes/sproutTheme/index.js +3 -2
  601. package/lib/themes/extendedThemes/sproutTheme/light/theme.js +4 -7
  602. package/lib/themes/light/dataviz-palette.js +23 -21
  603. package/lib/themes/light/decorative-palettes.js +3 -1
  604. package/lib/themes/light/literal-colors.js +135 -133
  605. package/lib/themes/light/theme.js +54 -55
  606. package/lib/types/system-props.flow.js +1 -1
  607. package/lib/types/theme.colors.flow.js +4 -2
  608. package/lib/types/theme.flow.js +3 -2
  609. package/lib/utils/a11yTest.js +5 -8
  610. package/lib/utils/chartColors.js +3 -1
  611. package/lib/utils/constants.js +3 -1
  612. package/lib/utils/dataQaLabelQueries.js +13 -21
  613. package/lib/utils/hooks.js +41 -64
  614. package/lib/utils/index.js +2 -5
  615. package/lib/utils/innerText.js +12 -14
  616. package/lib/utils/mixins.js +6 -5
  617. package/lib/utils/react-testing-library.js +10 -20
  618. package/lib/utils/responsiveProps/index.js +3 -8
  619. package/lib/utils/system-props.js +4 -3
  620. package/lib/utils/useInteractiveColor.js +10 -9
  621. package/package.json +6 -13
@@ -1,20 +1,15 @@
1
1
  var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "clearButtonLabel", "innerRef", "onBlur", "onChange", "onClear", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance", "size"];
2
-
3
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
-
2
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
5
3
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
6
-
7
4
  function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
8
-
9
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
10
-
11
- import * as React from "react";
12
- import Container, { Accessory } from "./styles";
13
- import Button from "../Button";
14
- import Icon from "../Icon";
15
- import styled from "styled-components";
16
- import { mergeRefs } from "../utils";
17
- import { useInteractiveColor } from "../utils/useInteractiveColor";
5
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
6
+ import * as React from 'react';
7
+ import Container, { Accessory } from './styles';
8
+ import Button from '../Button';
9
+ import Icon from '../Icon';
10
+ import styled from 'styled-components';
11
+ import { mergeRefs } from '../utils';
12
+ import { useInteractiveColor } from '../utils/useInteractiveColor';
18
13
  var InputContext = /*#__PURE__*/React.createContext({});
19
14
  var StyledButton = styled(Button).withConfig({
20
15
  displayName: "Input__StyledButton",
@@ -22,120 +17,102 @@ var StyledButton = styled(Button).withConfig({
22
17
  })(["&:hover,&:active{color:", ";}"], function (props) {
23
18
  return useInteractiveColor(props.theme.colors.icon.base);
24
19
  });
25
-
26
20
  var ClearButton = function ClearButton() {
27
21
  var _React$useContext = React.useContext(InputContext),
28
- handleClear = _React$useContext.handleClear,
29
- clearButtonLabel = _React$useContext.clearButtonLabel,
30
- hasValue = _React$useContext.hasValue,
31
- inputSize = _React$useContext.size; // Hide the button when there is no text to clear.
32
-
22
+ handleClear = _React$useContext.handleClear,
23
+ clearButtonLabel = _React$useContext.clearButtonLabel,
24
+ hasValue = _React$useContext.hasValue,
25
+ inputSize = _React$useContext.size;
33
26
 
27
+ // Hide the button when there is no text to clear.
34
28
  if (!hasValue) {
35
29
  return null;
36
- } // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
37
-
30
+ }
38
31
 
32
+ // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
39
33
  if (!clearButtonLabel) {
40
- console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.");
41
- } // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
42
- // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
43
-
34
+ console.warn('Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.');
35
+ }
44
36
 
45
- var py = inputSize === "small" ? 100 : undefined;
46
- var px = inputSize === "small" ? 200 : undefined;
47
- var buttonSize = inputSize === "small" ? "default" : inputSize;
37
+ // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
38
+ // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
39
+ var py = inputSize === 'small' ? 100 : undefined;
40
+ var px = inputSize === 'small' ? 200 : undefined;
41
+ var buttonSize = inputSize === 'small' ? 'default' : inputSize;
48
42
  return /*#__PURE__*/React.createElement(StyledButton, {
49
43
  onClick: handleClear,
50
44
  size: buttonSize,
51
45
  py: py,
52
46
  px: px,
53
- title: clearButtonLabel || "Clear",
54
- ariaLabel: clearButtonLabel || "Clear",
47
+ title: clearButtonLabel || 'Clear',
48
+ ariaLabel: clearButtonLabel || 'Clear',
55
49
  color: "icon.base"
56
50
  }, /*#__PURE__*/React.createElement(Icon, {
57
51
  name: "circlex"
58
52
  }));
59
- }; // Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
60
- // regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
61
-
53
+ };
62
54
 
55
+ // Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
56
+ // regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
63
57
  var isClearButton = function isClearButton(elem) {
64
58
  if (elem != null && elem.type) {
65
- return elem.type.displayName === "Input.ClearButton";
59
+ return elem.type.displayName === 'Input.ClearButton';
66
60
  }
67
-
68
61
  return false;
69
62
  };
70
-
71
63
  var Input = /*#__PURE__*/function (_React$Component) {
72
64
  _inheritsLoose(Input, _React$Component);
73
-
74
65
  function Input(props) {
75
66
  var _this;
76
-
77
67
  _this = _React$Component.call(this, props) || this;
78
68
  _this.inputRef = /*#__PURE__*/React.createRef();
79
-
80
69
  _this.handleBlur = function (e) {
81
70
  return _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
82
71
  };
83
-
84
72
  _this.handleClear = function (e) {
85
73
  var input = _this.inputRef.current;
86
-
87
74
  if (input) {
88
75
  var _Object$getOwnPropert;
89
-
90
76
  // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange
91
- var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) == null ? void 0 : _Object$getOwnPropert.set;
92
- nativeInputValueSetter == null ? void 0 : nativeInputValueSetter.call(input, "");
93
- var inputEvent = new Event("input", {
77
+ var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')) == null ? void 0 : _Object$getOwnPropert.set;
78
+ nativeInputValueSetter == null ? void 0 : nativeInputValueSetter.call(input, '');
79
+ var inputEvent = new Event('input', {
94
80
  bubbles: true
95
81
  });
96
- input.dispatchEvent(inputEvent); // Focus the input, update hasValue, and call any onClear callback
82
+ input.dispatchEvent(inputEvent);
97
83
 
84
+ // Focus the input, update hasValue, and call any onClear callback
98
85
  input.focus();
99
-
100
- _this.updateState("");
101
-
86
+ _this.updateState('');
102
87
  _this.props.onClear == null ? void 0 : _this.props.onClear(e);
103
88
  }
104
89
  };
105
-
106
90
  _this.handleChange = function (e) {
107
91
  _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
108
-
109
92
  _this.updateState(e.currentTarget.value);
110
93
  };
111
-
112
94
  _this.handleFocus = function (e) {
113
95
  return _this.props.onFocus == null ? void 0 : _this.props.onFocus(e);
114
96
  };
115
-
116
97
  _this.handleKeyDown = function (e) {
117
98
  return _this.props.onKeyDown == null ? void 0 : _this.props.onKeyDown(e, e.currentTarget.value);
118
99
  };
119
-
120
100
  _this.handleKeyUp = function (e) {
121
101
  return _this.props.onKeyUp == null ? void 0 : _this.props.onKeyUp(e, e.currentTarget.value);
122
102
  };
123
-
124
103
  _this.handlePaste = function (e) {
125
104
  return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
126
105
  };
127
-
128
106
  _this.updateState = function (inputValue) {
129
- var hasValue = inputValue !== "";
130
- var previousHasValue = _this.state.hasValue; // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
131
-
107
+ var hasValue = inputValue !== '';
108
+ var previousHasValue = _this.state.hasValue;
109
+ // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
132
110
  if (hasValue !== previousHasValue) {
133
111
  _this.setState({
134
112
  hasValue: hasValue
135
113
  });
136
114
  }
137
115
  };
138
-
139
116
  _this.state = {
140
117
  // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear
141
118
  // for both controlled and uncontrolled inputs.
@@ -143,60 +120,57 @@ var Input = /*#__PURE__*/function (_React$Component) {
143
120
  };
144
121
  return _this;
145
122
  }
146
-
147
123
  var _proto = Input.prototype;
148
-
149
124
  _proto.render = function render() {
150
125
  var _this$props = this.props,
151
- autoComplete = _this$props.autoComplete,
152
- autoFocus = _this$props.autoFocus,
153
- disabled = _this$props.disabled,
154
- readOnly = _this$props.readOnly,
155
- isInvalid = _this$props.isInvalid,
156
- hasWarning = _this$props.hasWarning,
157
- id = _this$props.id,
158
- name = _this$props.name,
159
- placeholder = _this$props.placeholder,
160
- type = _this$props.type,
161
- required = _this$props.required,
162
- value = _this$props.value,
163
- elemBefore = _this$props.elemBefore,
164
- elemAfter = _this$props.elemAfter,
165
- maxLength = _this$props.maxLength,
166
- ariaLabel = _this$props.ariaLabel,
167
- ariaDescribedby = _this$props.ariaDescribedby,
168
- clearButtonLabel = _this$props.clearButtonLabel,
169
- innerRef = _this$props.innerRef,
170
- onBlur = _this$props.onBlur,
171
- onChange = _this$props.onChange,
172
- onClear = _this$props.onClear,
173
- onFocus = _this$props.onFocus,
174
- onKeyDown = _this$props.onKeyDown,
175
- onKeyUp = _this$props.onKeyUp,
176
- onPaste = _this$props.onPaste,
177
- _this$props$inputProp = _this$props.inputProps,
178
- inputProps = _this$props$inputProp === void 0 ? {} : _this$props$inputProp,
179
- _this$props$qa = _this$props.qa,
180
- qa = _this$props$qa === void 0 ? {} : _this$props$qa,
181
- appearance = _this$props.appearance,
182
- size = _this$props.size,
183
- rest = _objectWithoutPropertiesLoose(_this$props, _excluded); // Convert autoComplete from a boolean prop to a string value.
184
-
185
-
126
+ autoComplete = _this$props.autoComplete,
127
+ autoFocus = _this$props.autoFocus,
128
+ disabled = _this$props.disabled,
129
+ readOnly = _this$props.readOnly,
130
+ isInvalid = _this$props.isInvalid,
131
+ hasWarning = _this$props.hasWarning,
132
+ id = _this$props.id,
133
+ name = _this$props.name,
134
+ placeholder = _this$props.placeholder,
135
+ type = _this$props.type,
136
+ required = _this$props.required,
137
+ value = _this$props.value,
138
+ elemBefore = _this$props.elemBefore,
139
+ elemAfter = _this$props.elemAfter,
140
+ maxLength = _this$props.maxLength,
141
+ ariaLabel = _this$props.ariaLabel,
142
+ ariaDescribedby = _this$props.ariaDescribedby,
143
+ clearButtonLabel = _this$props.clearButtonLabel,
144
+ innerRef = _this$props.innerRef,
145
+ onBlur = _this$props.onBlur,
146
+ onChange = _this$props.onChange,
147
+ onClear = _this$props.onClear,
148
+ onFocus = _this$props.onFocus,
149
+ onKeyDown = _this$props.onKeyDown,
150
+ onKeyUp = _this$props.onKeyUp,
151
+ onPaste = _this$props.onPaste,
152
+ _this$props$inputProp = _this$props.inputProps,
153
+ inputProps = _this$props$inputProp === void 0 ? {} : _this$props$inputProp,
154
+ _this$props$qa = _this$props.qa,
155
+ qa = _this$props$qa === void 0 ? {} : _this$props$qa,
156
+ appearance = _this$props.appearance,
157
+ size = _this$props.size,
158
+ rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
159
+
160
+ // Convert autoComplete from a boolean prop to a string value.
186
161
  var autoCompleteValue = undefined;
187
-
188
162
  if (autoComplete !== undefined) {
189
- autoCompleteValue = autoComplete ? "on" : "off";
190
- } // Add default elemBefore and elemAfter elements if type is search.
163
+ autoCompleteValue = autoComplete ? 'on' : 'off';
164
+ }
191
165
 
192
-
193
- var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(Icon, {
166
+ // Add default elemBefore and elemAfter elements if type is search.
167
+ var elementBefore = type === 'search' && !elemBefore ? /*#__PURE__*/React.createElement(Icon, {
194
168
  name: "search",
195
169
  ariaHidden: true,
196
170
  color: "icon.base"
197
- }) : elemBefore; // Do not add a ClearButton if an elemAfter prop was passed.
198
-
199
- var elementAfter = type === "search" && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
171
+ }) : elemBefore;
172
+ // Do not add a ClearButton if an elemAfter prop was passed.
173
+ var elementAfter = type === 'search' && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
200
174
  return /*#__PURE__*/React.createElement(Container, _extends({
201
175
  hasBeforeElement: !!elementBefore,
202
176
  hasAfterElement: !!elementAfter,
@@ -204,8 +178,8 @@ var Input = /*#__PURE__*/function (_React$Component) {
204
178
  invalid: !!isInvalid,
205
179
  warning: hasWarning,
206
180
  appearance: appearance,
207
- size: size // $FlowIssue - upgrade v0.112.0
208
-
181
+ size: size
182
+ // $FlowIssue - upgrade v0.112.0
209
183
  }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
210
184
  value: {
211
185
  handleClear: this.handleClear,
@@ -237,7 +211,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
237
211
  onKeyUp: this.handleKeyUp,
238
212
  onPaste: this.handlePaste,
239
213
  ref: mergeRefs([innerRef, this.inputRef]),
240
- "data-qa-input": name || "",
214
+ "data-qa-input": name || '',
241
215
  "data-qa-input-isdisabled": disabled === true,
242
216
  "data-qa-input-isrequired": required === true
243
217
  }, qa, inputProps)), elementAfter && /*#__PURE__*/React.createElement(Accessory, {
@@ -245,17 +219,15 @@ var Input = /*#__PURE__*/function (_React$Component) {
245
219
  isClearButton: isClearButton(elementAfter)
246
220
  }, elementAfter)));
247
221
  };
248
-
249
222
  return Input;
250
223
  }(React.Component);
251
-
252
224
  Input.defaultProps = {
253
225
  autoFocus: false,
254
226
  disabled: false,
255
- type: "text",
256
- size: "default",
257
- appearance: "primary"
227
+ type: 'text',
228
+ size: 'default',
229
+ appearance: 'primary'
258
230
  };
259
231
  Input.ClearButton = ClearButton;
260
- Input.ClearButton.displayName = "Input.ClearButton";
232
+ Input.ClearButton.displayName = 'Input.ClearButton';
261
233
  export default Input;
@@ -1,6 +1,7 @@
1
- import styled, { css } from "styled-components";
2
- import { COMMON } from "../utils/system-props";
3
- import { focusRing } from "../utils/mixins";
1
+
2
+ import styled, { css } from 'styled-components';
3
+ import { COMMON } from '../utils/system-props';
4
+ import { focusRing } from '../utils/mixins';
4
5
  var Container = styled.div.withConfig({
5
6
  displayName: "styles__Container",
6
7
  componentId: "sc-uozj0s-0"
@@ -24,23 +25,20 @@ var Container = styled.div.withConfig({
24
25
  return props.theme.fontWeights.normal;
25
26
  }, function (props) {
26
27
  switch (props.size) {
27
- case "large":
28
+ case 'large':
28
29
  return props.theme.space[400];
29
-
30
- case "small":
30
+ case 'small':
31
31
  return props.theme.space[200];
32
-
33
- case "default":
32
+ case 'default':
34
33
  default:
35
34
  return props.theme.space[300];
36
35
  }
37
36
  }, function (props) {
38
37
  switch (props.size) {
39
- case "large":
38
+ case 'large':
40
39
  return props.theme.typography[300].fontSize;
41
-
42
- case "small":
43
- case "default":
40
+ case 'small':
41
+ case 'default':
44
42
  default:
45
43
  return props.theme.typography[200].fontSize;
46
44
  }
@@ -53,7 +51,7 @@ var Container = styled.div.withConfig({
53
51
  }, function (props) {
54
52
  return props.disabled && css(["opacity:0.4;input{cursor:not-allowed;}"]);
55
53
  }, function (props) {
56
- return props.appearance === "primary" && css(["input{border:1px solid ", ";}"], function (props) {
54
+ return props.appearance === 'primary' && css(["input{border:1px solid ", ";}"], function (props) {
57
55
  return props.theme.colors.form.border.base;
58
56
  });
59
57
  }, function (props) {
@@ -75,6 +73,6 @@ export var Accessory = styled.div.withConfig({
75
73
  }, function (props) {
76
74
  return props.after && css(["right:", ";"], props.isClearButton ? 0 : props.theme.space[300]);
77
75
  });
78
- Container.displayName = "InputContainer";
79
- Accessory.displayName = "InputAccessory";
76
+ Container.displayName = 'InputContainer';
77
+ Accessory.displayName = 'InputAccessory';
80
78
  export default Container;
@@ -1,35 +1,24 @@
1
1
  var _excluded = ["children"];
2
-
3
2
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
4
-
5
3
  function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
6
-
7
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
8
-
9
- import * as React from "react";
10
- import Text from "../Text";
11
- import Container from "./styles";
12
-
4
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
5
+ import * as React from 'react';
6
+ import Text from '../Text';
7
+ import Container from './styles';
13
8
  var KeyboardKey = /*#__PURE__*/function (_React$Component) {
14
9
  _inheritsLoose(KeyboardKey, _React$Component);
15
-
16
10
  function KeyboardKey() {
17
11
  return _React$Component.apply(this, arguments) || this;
18
12
  }
19
-
20
13
  var _proto = KeyboardKey.prototype;
21
-
22
14
  _proto.render = function render() {
23
15
  var _this$props = this.props,
24
- children = _this$props.children,
25
- rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
26
-
16
+ children = _this$props.children,
17
+ rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
27
18
  return /*#__PURE__*/React.createElement(Container, rest, /*#__PURE__*/React.createElement("kbd", {
28
19
  "data-qa-keyboardkey": children
29
20
  }, /*#__PURE__*/React.createElement(Text, null, children)));
30
21
  };
31
-
32
22
  return KeyboardKey;
33
23
  }(React.Component);
34
-
35
24
  export { KeyboardKey as default };
@@ -1,5 +1,6 @@
1
- import styled from "styled-components";
2
- import { COMMON } from "../utils/system-props";
1
+
2
+ import styled from 'styled-components';
3
+ import { COMMON } from '../utils/system-props';
3
4
  var Container = styled.div.withConfig({
4
5
  displayName: "styles__Container",
5
6
  componentId: "sc-27h8p7-0"
@@ -1,54 +1,40 @@
1
- "no babel-plugin-flow-react-proptypes";
1
+ 'no babel-plugin-flow-react-proptypes';
2
2
 
3
3
  var _excluded = ["as"];
4
-
5
4
  function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
6
-
7
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
8
-
9
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
10
-
5
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
6
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
11
7
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
12
-
13
- import * as React from "react";
14
- import styled from "styled-components";
15
- import Text from "../Text";
16
-
8
+ import * as React from 'react';
9
+ import styled from 'styled-components';
10
+ import Text from '../Text';
17
11
  var LabelBase = function LabelBase(_ref) {
18
12
  var _ref$as = _ref.as,
19
- as = _ref$as === void 0 ? "label" : _ref$as,
20
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
21
-
13
+ as = _ref$as === void 0 ? 'label' : _ref$as,
14
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
22
15
  return /*#__PURE__*/React.createElement(Text, _extends({}, rest, {
23
16
  as: as
24
17
  }));
25
18
  };
26
-
27
19
  var StyledLabel = styled(LabelBase).withConfig({
28
20
  displayName: "Label__StyledLabel",
29
21
  componentId: "sc-rqdi0a-0"
30
22
  })(["display:flex;align-items:center;"]);
31
-
32
23
  var Label = /*#__PURE__*/function (_React$Component) {
33
24
  _inheritsLoose(Label, _React$Component);
34
-
35
25
  function Label() {
36
26
  return _React$Component.apply(this, arguments) || this;
37
27
  }
38
-
39
28
  var _proto = Label.prototype;
40
-
41
29
  _proto.render = function render() {
42
30
  return /*#__PURE__*/React.createElement(StyledLabel, _extends({
43
31
  fontSize: 200,
44
32
  fontWeight: "semibold",
45
33
  color: "text.headline",
46
- "data-qa-label": this.props.htmlFor // $FlowIssue - upgrade v0.112.0
47
-
34
+ "data-qa-label": this.props.htmlFor
35
+ // $FlowIssue - upgrade v0.112.0
48
36
  }, this.props));
49
37
  };
50
-
51
38
  return Label;
52
39
  }(React.Component);
53
-
54
40
  export { Label as default };
@@ -1,9 +1,10 @@
1
- import { COLOR_BLUE_900 } from "@sproutsocial/seeds-color";
1
+
2
+ import { COLOR_BLUE_900 } from '@sproutsocial/seeds-color';
2
3
  var defaultLink = {
3
- color: "link",
4
- hoverColor: "link.hover",
4
+ color: 'link',
5
+ hoverColor: 'link.hover',
5
6
  activeColor: COLOR_BLUE_900,
6
- fontWeight: "semibold"
7
+ fontWeight: 'semibold'
7
8
  };
8
9
  var linkTheme = {
9
10
  default: defaultLink
package/lib/Link/index.js CHANGED
@@ -1,42 +1,35 @@
1
1
  var _excluded = ["href", "external", "children", "disabled", "onClick", "as", "underline", "qa"];
2
-
3
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
-
2
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
5
3
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
6
-
7
- import * as React from "react";
8
- import Container from "./styles";
9
-
4
+ import * as React from 'react';
5
+ import Container from './styles';
10
6
  var Link = function Link(_ref) {
11
7
  var href = _ref.href,
12
- external = _ref.external,
13
- children = _ref.children,
14
- disabled = _ref.disabled,
15
- onClick = _ref.onClick,
16
- as = _ref.as,
17
- underline = _ref.underline,
18
- _ref$qa = _ref.qa,
19
- qa = _ref$qa === void 0 ? {} : _ref$qa,
20
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
21
-
8
+ external = _ref.external,
9
+ children = _ref.children,
10
+ disabled = _ref.disabled,
11
+ onClick = _ref.onClick,
12
+ as = _ref.as,
13
+ underline = _ref.underline,
14
+ _ref$qa = _ref.qa,
15
+ qa = _ref$qa === void 0 ? {} : _ref$qa,
16
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
22
17
  if (!href && external) {
23
- console.warn("Warning: external prop cannot be set without a href declaration");
18
+ console.warn('Warning: external prop cannot be set without a href declaration');
24
19
  }
25
-
26
- var type = as || (href ? "a" : "button");
20
+ var type = as || (href ? 'a' : 'button');
27
21
  return /*#__PURE__*/React.createElement(Container, _extends({
28
22
  href: href,
29
- target: external ? "_blank" : undefined,
30
- type: type === "button" ? "button" : undefined,
31
- rel: external ? "noopener noreferrer" : undefined,
23
+ target: external ? '_blank' : undefined,
24
+ type: type === 'button' ? 'button' : undefined,
25
+ rel: external ? 'noopener noreferrer' : undefined,
32
26
  forwardedAs: type,
33
27
  "aria-disabled": disabled ? disabled : undefined,
34
28
  disabled: disabled,
35
29
  onClick: onClick,
36
30
  underline: underline,
37
- "data-qa-link": "",
31
+ "data-qa-link": '',
38
32
  "data-qa-link-isdisabled": disabled === true
39
33
  }, qa, rest), children);
40
34
  };
41
-
42
35
  export default Link;
@@ -1,14 +1,15 @@
1
- import styled, { css } from "styled-components";
2
- import { focusRing, disabled } from "../utils/mixins";
3
- import Text from "../Text";
4
- import { TYPOGRAPHY, COMMON, FLEXBOX } from "../utils/system-props";
1
+
2
+ import styled, { css } from 'styled-components';
3
+ import { focusRing, disabled } from '../utils/mixins';
4
+ import Text from '../Text';
5
+ import { TYPOGRAPHY, COMMON, FLEXBOX } from '../utils/system-props';
5
6
  var Container = styled(Text).withConfig({
6
7
  displayName: "styles__Container",
7
8
  componentId: "sc-adcw4a-0"
8
9
  })(["border:0;font-family:", ";text-decoration:", ";appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", " ", ""], function (props) {
9
10
  return props.theme.fontFamily;
10
11
  }, function (props) {
11
- return props.underline ? "underline" : "none";
12
+ return props.underline ? 'underline' : 'none';
12
13
  }, function (props) {
13
14
  return props.disabled && css(["opacity:0.4;cursor:not-allowed;"]);
14
15
  }, function (props) {