@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.40876133bb

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 (481) hide show
  1. package/Accordion/Accordion.d.ts +4 -4
  2. package/Accordion/Accordion.js +27 -13
  3. package/Accordion/Accordion.js.map +1 -0
  4. package/Accordion/Accordion.stories.js +34 -23
  5. package/Accordion/Accordion.stories.js.map +1 -0
  6. package/Accordion/AccordionItem.d.ts +8 -8
  7. package/Accordion/AccordionItem.js +68 -39
  8. package/Accordion/AccordionItem.js.map +1 -0
  9. package/Accordion/index.js +31 -2
  10. package/Accordion/index.js.map +1 -0
  11. package/Alert/Alert.d.ts +4 -4
  12. package/Alert/Alert.js +21 -10
  13. package/Alert/Alert.js.map +1 -0
  14. package/Alert/Alert.stories.js +22 -13
  15. package/Alert/Alert.stories.js.map +1 -0
  16. package/Alert/index.js +18 -1
  17. package/Alert/index.js.map +1 -0
  18. package/AutoComplete/AutoComplete.d.ts +12 -19
  19. package/AutoComplete/AutoComplete.js +150 -101
  20. package/AutoComplete/AutoComplete.js.map +1 -0
  21. package/AutoComplete/AutoComplete.stories.js +27 -17
  22. package/AutoComplete/AutoComplete.stories.js.map +1 -0
  23. package/AutoComplete/MultiAutoComplete.d.ts +44 -40
  24. package/AutoComplete/MultiAutoComplete.js +317 -248
  25. package/AutoComplete/MultiAutoComplete.js.map +1 -0
  26. package/AutoComplete/MultiAutoComplete.stories.js +39 -28
  27. package/AutoComplete/MultiAutoComplete.stories.js.map +1 -0
  28. package/AutoComplete/index.js +31 -2
  29. package/AutoComplete/index.js.map +1 -0
  30. package/AutoComplete/styles.js +14 -4
  31. package/AutoComplete/styles.js.map +1 -0
  32. package/AutoComplete/types.d.ts +4 -3
  33. package/AutoComplete/types.js +5 -1
  34. package/AutoComplete/types.js.map +1 -0
  35. package/AutoComplete/utils.d.ts +11 -5
  36. package/AutoComplete/utils.js +21 -6
  37. package/AutoComplete/utils.js.map +1 -0
  38. package/Avatar/Avatar.d.ts +5 -11
  39. package/Avatar/Avatar.js +39 -19
  40. package/Avatar/Avatar.js.map +1 -0
  41. package/Avatar/Avatar.stories.js +19 -10
  42. package/Avatar/Avatar.stories.js.map +1 -0
  43. package/Avatar/index.js +18 -1
  44. package/Avatar/index.js.map +1 -0
  45. package/Button/Button.d.ts +9 -23
  46. package/Button/Button.js +58 -43
  47. package/Button/Button.js.map +1 -0
  48. package/Button/Button.stories.js +42 -29
  49. package/Button/Button.stories.js.map +1 -0
  50. package/Button/Button.styles.d.ts +6 -0
  51. package/Button/Button.styles.js +15 -0
  52. package/Button/Button.styles.js.map +1 -0
  53. package/Button/CopyButton/CopyButton.d.ts +4 -7
  54. package/Button/CopyButton/CopyButton.js +24 -14
  55. package/Button/CopyButton/CopyButton.js.map +1 -0
  56. package/Button/CopyButton/CopyButton.stories.js +20 -10
  57. package/Button/CopyButton/CopyButton.stories.js.map +1 -0
  58. package/Button/IconButton/IconButton.d.ts +4 -7
  59. package/Button/IconButton/IconButton.js +14 -7
  60. package/Button/IconButton/IconButton.js.map +1 -0
  61. package/Button/IconButton/IconButton.stories.js +31 -19
  62. package/Button/IconButton/IconButton.stories.js.map +1 -0
  63. package/Button/index.js +44 -3
  64. package/Button/index.js.map +1 -0
  65. package/Carousel/Carousel.d.ts +3 -3
  66. package/Carousel/Carousel.js +34 -21
  67. package/Carousel/Carousel.js.map +1 -0
  68. package/Carousel/Carouser.stories.js +27 -17
  69. package/Carousel/Carouser.stories.js.map +1 -0
  70. package/Carousel/index.js +15 -1
  71. package/Carousel/index.js.map +1 -0
  72. package/Checkbox/Checkbox.d.ts +5 -9
  73. package/Checkbox/Checkbox.js +42 -28
  74. package/Checkbox/Checkbox.js.map +1 -0
  75. package/Checkbox/Checkbox.stories.js +27 -16
  76. package/Checkbox/Checkbox.stories.js.map +1 -0
  77. package/Checkbox/Checkbox.styles.js +11 -4
  78. package/Checkbox/Checkbox.styles.js.map +1 -0
  79. package/Checkbox/CheckboxGroup.d.ts +2 -2
  80. package/Checkbox/CheckboxGroup.js +36 -20
  81. package/Checkbox/CheckboxGroup.js.map +1 -0
  82. package/Checkbox/CheckboxGroup.stories.js +29 -18
  83. package/Checkbox/CheckboxGroup.stories.js.map +1 -0
  84. package/Checkbox/index.js +23 -2
  85. package/Checkbox/index.js.map +1 -0
  86. package/Chips/Chip.d.ts +3 -8
  87. package/Chips/Chip.js +21 -7
  88. package/Chips/Chip.js.map +1 -0
  89. package/Chips/Chips.d.ts +4 -4
  90. package/Chips/Chips.js +29 -12
  91. package/Chips/Chips.js.map +1 -0
  92. package/Chips/Chips.stories.js +33 -18
  93. package/Chips/Chips.stories.js.map +1 -0
  94. package/Chips/index.d.ts +0 -1
  95. package/Chips/index.js +31 -3
  96. package/Chips/index.js.map +1 -0
  97. package/Chips/styles.js +21 -9
  98. package/Chips/styles.js.map +1 -0
  99. package/CodeEditor/CodeEditor.d.ts +5 -8
  100. package/CodeEditor/CodeEditor.js +56 -35
  101. package/CodeEditor/CodeEditor.js.map +1 -0
  102. package/CodeEditor/CodeEditor.stories.js +30 -17
  103. package/CodeEditor/CodeEditor.stories.js.map +1 -0
  104. package/CodeEditor/index.js +18 -1
  105. package/CodeEditor/index.js.map +1 -0
  106. package/ColorPicker/ColorPicker.d.ts +9 -10
  107. package/ColorPicker/ColorPicker.js +63 -51
  108. package/ColorPicker/ColorPicker.js.map +1 -0
  109. package/ColorPicker/ColorPicker.stories.js +26 -15
  110. package/ColorPicker/ColorPicker.stories.js.map +1 -0
  111. package/ColorPicker/index.js +18 -1
  112. package/ColorPicker/index.js.map +1 -0
  113. package/ConfirmationDialog/ConfirmationDialog.d.ts +13 -13
  114. package/ConfirmationDialog/ConfirmationDialog.js +57 -45
  115. package/ConfirmationDialog/ConfirmationDialog.js.map +1 -0
  116. package/ConfirmationDialog/ConfirmationDialog.stories.js +22 -12
  117. package/ConfirmationDialog/ConfirmationDialog.stories.js.map +1 -0
  118. package/ConfirmationDialog/index.js +31 -2
  119. package/ConfirmationDialog/index.js.map +1 -0
  120. package/ConfirmationDialog/withConfirmation.d.ts +2 -2
  121. package/ConfirmationDialog/withConfirmation.js +19 -6
  122. package/ConfirmationDialog/withConfirmation.js.map +1 -0
  123. package/DataTable/DataTable.d.ts +20 -0
  124. package/DataTable/DataTable.js +157 -0
  125. package/DataTable/DataTable.js.map +1 -0
  126. package/DataTable/DataTable.stories.d.ts +1 -0
  127. package/DataTable/DataTable.stories.js +77 -0
  128. package/DataTable/DataTable.stories.js.map +1 -0
  129. package/DataTable/README.md +72 -0
  130. package/DataTable/index.d.ts +1 -0
  131. package/DataTable/index.js +18 -0
  132. package/DataTable/index.js.map +1 -0
  133. package/DataTable/styled.d.ts +1 -0
  134. package/DataTable/styled.js +18 -0
  135. package/DataTable/styled.js.map +1 -0
  136. package/DelayedOnChange/DelayedOnChange.d.ts +40 -0
  137. package/DelayedOnChange/DelayedOnChange.js +129 -0
  138. package/DelayedOnChange/DelayedOnChange.js.map +1 -0
  139. package/DelayedOnChange/index.d.ts +2 -0
  140. package/DelayedOnChange/index.js +23 -0
  141. package/DelayedOnChange/index.js.map +1 -0
  142. package/DelayedOnChange/withDelayedOnChange.d.ts +3 -0
  143. package/DelayedOnChange/withDelayedOnChange.js +37 -0
  144. package/DelayedOnChange/withDelayedOnChange.js.map +1 -0
  145. package/Dialog/Dialog.d.ts +22 -30
  146. package/Dialog/Dialog.js +75 -39
  147. package/Dialog/Dialog.js.map +1 -0
  148. package/Dialog/Dialog.stories.js +26 -16
  149. package/Dialog/Dialog.stories.js.map +1 -0
  150. package/Dialog/index.js +18 -1
  151. package/Dialog/index.js.map +1 -0
  152. package/Drawer/Drawer.d.ts +1 -1
  153. package/Drawer/Drawer.js +20 -6
  154. package/Drawer/Drawer.js.map +1 -0
  155. package/Drawer/Drawer.stories.js +26 -15
  156. package/Drawer/Drawer.stories.js.map +1 -0
  157. package/Drawer/index.js +18 -1
  158. package/Drawer/index.js.map +1 -0
  159. package/DynamicFieldset/Fieldset.d.ts +26 -16
  160. package/DynamicFieldset/Fieldset.js +82 -60
  161. package/DynamicFieldset/Fieldset.js.map +1 -0
  162. package/DynamicFieldset/index.js +15 -1
  163. package/DynamicFieldset/index.js.map +1 -0
  164. package/Elevation/Elevation.d.ts +1 -1
  165. package/Elevation/Elevation.js +17 -6
  166. package/Elevation/Elevation.js.map +1 -0
  167. package/Elevation/Elevation.stories.js +27 -16
  168. package/Elevation/Elevation.stories.js.map +1 -0
  169. package/Elevation/index.js +18 -1
  170. package/Elevation/index.js.map +1 -0
  171. package/FormElementMessage/FormElementMessage.d.ts +1 -1
  172. package/FormElementMessage/FormElementMessage.js +15 -5
  173. package/FormElementMessage/FormElementMessage.js.map +1 -0
  174. package/FormElementMessage/index.js +13 -1
  175. package/FormElementMessage/index.js.map +1 -0
  176. package/FullName/FullName.js +8 -1
  177. package/FullName/FullName.js.map +1 -0
  178. package/FullName/index.js +18 -1
  179. package/FullName/index.js.map +1 -0
  180. package/Grid/Grid.d.ts +1 -1
  181. package/Grid/Grid.js +26 -9
  182. package/Grid/Grid.js.map +1 -0
  183. package/Grid/Grid.stories.js +21 -12
  184. package/Grid/Grid.stories.js.map +1 -0
  185. package/Grid/index.js +18 -1
  186. package/Grid/index.js.map +1 -0
  187. package/Helpers/ClassNames.d.ts +4 -3
  188. package/Helpers/ClassNames.js +21 -10
  189. package/Helpers/ClassNames.js.map +1 -0
  190. package/Helpers/index.js +13 -2
  191. package/Helpers/index.js.map +1 -0
  192. package/Icon/Icon.d.ts +3 -6
  193. package/Icon/Icon.js +19 -10
  194. package/Icon/Icon.js.map +1 -0
  195. package/Icon/Icon.stories.js +33 -20
  196. package/Icon/Icon.stories.js.map +1 -0
  197. package/Icon/index.js +18 -1
  198. package/Icon/index.js.map +1 -0
  199. package/Image/Image.d.ts +5 -4
  200. package/Image/Image.js +22 -10
  201. package/Image/Image.js.map +1 -0
  202. package/Image/Image.stories.js +21 -11
  203. package/Image/Image.stories.js.map +1 -0
  204. package/Image/index.js +18 -1
  205. package/Image/index.js.map +1 -0
  206. package/ImageEditor/ImageEditor.d.ts +33 -34
  207. package/ImageEditor/ImageEditor.js +110 -83
  208. package/ImageEditor/ImageEditor.js.map +1 -0
  209. package/ImageEditor/index.js +18 -1
  210. package/ImageEditor/index.js.map +1 -0
  211. package/ImageEditor/toolbar/crop.js +34 -15
  212. package/ImageEditor/toolbar/crop.js.map +1 -0
  213. package/ImageEditor/toolbar/filter.js +76 -47
  214. package/ImageEditor/toolbar/filter.js.map +1 -0
  215. package/ImageEditor/toolbar/flip.js +35 -16
  216. package/ImageEditor/toolbar/flip.js.map +1 -0
  217. package/ImageEditor/toolbar/icons/index.js +69 -8
  218. package/ImageEditor/toolbar/icons/index.js.map +1 -0
  219. package/ImageEditor/toolbar/index.js +39 -4
  220. package/ImageEditor/toolbar/index.js.map +1 -0
  221. package/ImageEditor/toolbar/rotate.js +65 -36
  222. package/ImageEditor/toolbar/rotate.js.map +1 -0
  223. package/ImageEditor/toolbar/types.d.ts +23 -12
  224. package/ImageEditor/toolbar/types.js +5 -1
  225. package/ImageEditor/toolbar/types.js.map +1 -0
  226. package/ImageUpload/Image.d.ts +6 -6
  227. package/ImageUpload/Image.js +57 -35
  228. package/ImageUpload/Image.js.map +1 -0
  229. package/ImageUpload/ImageEditorDialog.d.ts +11 -6
  230. package/ImageUpload/ImageEditorDialog.js +54 -31
  231. package/ImageUpload/ImageEditorDialog.js.map +1 -0
  232. package/ImageUpload/MultiImageUpload.d.ts +10 -31
  233. package/ImageUpload/MultiImageUpload.js +117 -81
  234. package/ImageUpload/MultiImageUpload.js.map +1 -0
  235. package/ImageUpload/MultiImageUpload.stories.js +26 -15
  236. package/ImageUpload/MultiImageUpload.stories.js.map +1 -0
  237. package/ImageUpload/SingleImageUpload.d.ts +16 -37
  238. package/ImageUpload/SingleImageUpload.js +85 -54
  239. package/ImageUpload/SingleImageUpload.js.map +1 -0
  240. package/ImageUpload/SingleImageUpload.stories.js +27 -16
  241. package/ImageUpload/SingleImageUpload.stories.js.map +1 -0
  242. package/ImageUpload/index.js +39 -4
  243. package/ImageUpload/index.js.map +1 -0
  244. package/ImageUpload/styled.d.ts +20 -14
  245. package/ImageUpload/styled.js +29 -15
  246. package/ImageUpload/styled.js.map +1 -0
  247. package/Input/Input.d.ts +4 -8
  248. package/Input/Input.js +70 -41
  249. package/Input/Input.js.map +1 -0
  250. package/Input/Input.stories.js +62 -46
  251. package/Input/Input.stories.js.map +1 -0
  252. package/Input/__tests__/Input.test.js +65 -48
  253. package/Input/__tests__/Input.test.js.map +1 -0
  254. package/Input/index.js +18 -1
  255. package/Input/index.js.map +1 -0
  256. package/List/CollapsibleList/CollapsibleList.stories.js +27 -16
  257. package/List/CollapsibleList/CollapsibleList.stories.js.map +1 -0
  258. package/List/CollapsibleList/index.d.ts +2 -2
  259. package/List/CollapsibleList/index.js +21 -6
  260. package/List/CollapsibleList/index.js.map +1 -0
  261. package/List/DataList/DataList.d.ts +24 -43
  262. package/List/DataList/DataList.js +112 -68
  263. package/List/DataList/DataList.js.map +1 -0
  264. package/List/DataList/DataList.stories.js +37 -25
  265. package/List/DataList/DataList.stories.js.map +1 -0
  266. package/List/DataList/DataListModalOverlay/DataListModalOverlay.d.ts +8 -8
  267. package/List/DataList/DataListModalOverlay/DataListModalOverlay.js +29 -10
  268. package/List/DataList/DataListModalOverlay/DataListModalOverlay.js.map +1 -0
  269. package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.d.ts +3 -3
  270. package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js +27 -9
  271. package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js.map +1 -0
  272. package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.d.ts +9 -4
  273. package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js +29 -8
  274. package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js.map +1 -0
  275. package/List/DataList/DataListModalOverlay/index.js +35 -3
  276. package/List/DataList/DataListModalOverlay/index.js.map +1 -0
  277. package/List/DataList/DataListWithSections.d.ts +45 -0
  278. package/List/DataList/DataListWithSections.js +356 -0
  279. package/List/DataList/DataListWithSections.js.map +1 -0
  280. package/List/DataList/Loader.d.ts +2 -2
  281. package/List/DataList/Loader.js +53 -50
  282. package/List/DataList/Loader.js.map +1 -0
  283. package/List/DataList/NoData.d.ts +2 -2
  284. package/List/DataList/NoData.js +19 -6
  285. package/List/DataList/NoData.js.map +1 -0
  286. package/List/DataList/icons/index.d.ts +1 -1
  287. package/List/DataList/icons/index.js +83 -38
  288. package/List/DataList/icons/index.js.map +1 -0
  289. package/List/DataList/index.d.ts +1 -0
  290. package/List/DataList/index.js +64 -3
  291. package/List/DataList/index.js.map +1 -0
  292. package/List/DataList/types.d.ts +1 -1
  293. package/List/DataList/types.js +5 -1
  294. package/List/DataList/types.js.map +1 -0
  295. package/List/List.d.ts +3 -2
  296. package/List/List.js +92 -49
  297. package/List/List.js.map +1 -0
  298. package/List/List.stories.js +52 -37
  299. package/List/List.stories.js.map +1 -0
  300. package/List/icons/index.js +23 -3
  301. package/List/icons/index.js.map +1 -0
  302. package/List/index.d.ts +1 -1
  303. package/List/index.js +74 -3
  304. package/List/index.js.map +1 -0
  305. package/Menu/Menu.d.ts +14 -21
  306. package/Menu/Menu.js +61 -49
  307. package/Menu/Menu.js.map +1 -0
  308. package/Menu/Menu.stories.js +24 -14
  309. package/Menu/Menu.stories.js.map +1 -0
  310. package/Menu/index.js +18 -1
  311. package/Menu/index.js.map +1 -0
  312. package/Mosaic/Mosaic.d.ts +4 -14
  313. package/Mosaic/Mosaic.js +22 -5
  314. package/Mosaic/Mosaic.js.map +1 -0
  315. package/Mosaic/Mosaic.stories.js +37 -28
  316. package/Mosaic/Mosaic.stories.js.map +1 -0
  317. package/Mosaic/index.js +18 -1
  318. package/Mosaic/index.js.map +1 -0
  319. package/Progress/CircularProgress.d.ts +8 -16
  320. package/Progress/CircularProgress.js +38 -20
  321. package/Progress/CircularProgress.js.map +1 -0
  322. package/Progress/index.js +15 -1
  323. package/Progress/index.js.map +1 -0
  324. package/Radio/Radio.d.ts +2 -6
  325. package/Radio/Radio.js +42 -28
  326. package/Radio/Radio.js.map +1 -0
  327. package/Radio/Radio.styles.js +11 -4
  328. package/Radio/Radio.styles.js.map +1 -0
  329. package/Radio/RadioGroup.d.ts +1 -6
  330. package/Radio/RadioGroup.js +38 -26
  331. package/Radio/RadioGroup.js.map +1 -0
  332. package/Radio/RadioGroup.stories.js +29 -18
  333. package/Radio/RadioGroup.stories.js.map +1 -0
  334. package/Radio/index.js +23 -2
  335. package/Radio/index.js.map +1 -0
  336. package/RichTextEditor/RichTextEditor.d.ts +13 -9
  337. package/RichTextEditor/RichTextEditor.js +92 -57
  338. package/RichTextEditor/RichTextEditor.js.map +1 -0
  339. package/RichTextEditor/RichTextEditor.stories.js +22 -11
  340. package/RichTextEditor/RichTextEditor.stories.js.map +1 -0
  341. package/RichTextEditor/createPropsFromConfig.d.ts +11 -1
  342. package/RichTextEditor/createPropsFromConfig.js +20 -5
  343. package/RichTextEditor/createPropsFromConfig.js.map +1 -0
  344. package/RichTextEditor/index.d.ts +1 -0
  345. package/RichTextEditor/index.js +30 -2
  346. package/RichTextEditor/index.js.map +1 -0
  347. package/Ripple/Ripple.d.ts +4 -5
  348. package/Ripple/Ripple.js +16 -5
  349. package/Ripple/Ripple.js.map +1 -0
  350. package/Ripple/Ripple.stories.js +57 -42
  351. package/Ripple/Ripple.stories.js.map +1 -0
  352. package/Ripple/index.js +18 -1
  353. package/Ripple/index.js.map +1 -0
  354. package/Scrollbar/Scrollbar.d.ts +5 -5
  355. package/Scrollbar/Scrollbar.js +14 -4
  356. package/Scrollbar/Scrollbar.js.map +1 -0
  357. package/Scrollbar/Scrollbar.stories.js +18 -9
  358. package/Scrollbar/Scrollbar.stories.js.map +1 -0
  359. package/Scrollbar/index.js +18 -1
  360. package/Scrollbar/index.js.map +1 -0
  361. package/Section/Section.stories.js +22 -12
  362. package/Section/Section.stories.js.map +1 -0
  363. package/Section/index.d.ts +4 -5
  364. package/Section/index.js +30 -15
  365. package/Section/index.js.map +1 -0
  366. package/Select/Select.d.ts +7 -10
  367. package/Select/Select.js +101 -23
  368. package/Select/Select.js.map +1 -0
  369. package/Select/Select.stories.js +36 -25
  370. package/Select/Select.stories.js.map +1 -0
  371. package/Select/index.js +18 -1
  372. package/Select/index.js.map +1 -0
  373. package/Skeleton/README.md +21 -0
  374. package/Skeleton/Skeleton.d.ts +4 -0
  375. package/Skeleton/Skeleton.js +25 -0
  376. package/Skeleton/Skeleton.js.map +1 -0
  377. package/Skeleton/Skeleton.stories.d.ts +1 -0
  378. package/Skeleton/Skeleton.stories.js +28 -0
  379. package/Skeleton/Skeleton.stories.js.map +1 -0
  380. package/Skeleton/index.d.ts +1 -0
  381. package/Skeleton/index.js +18 -0
  382. package/Skeleton/index.js.map +1 -0
  383. package/Slider/Slider.d.ts +1 -6
  384. package/Slider/Slider.js +47 -33
  385. package/Slider/Slider.js.map +1 -0
  386. package/Slider/Slider.stories.js +27 -16
  387. package/Slider/Slider.stories.js.map +1 -0
  388. package/Slider/index.js +15 -1
  389. package/Slider/index.js.map +1 -0
  390. package/Snackbar/Snackbar.d.ts +5 -7
  391. package/Snackbar/Snackbar.js +38 -23
  392. package/Snackbar/Snackbar.js.map +1 -0
  393. package/Snackbar/Snackbar.stories.js +44 -30
  394. package/Snackbar/Snackbar.stories.js.map +1 -0
  395. package/Snackbar/index.js +19 -1
  396. package/Snackbar/index.js.map +1 -0
  397. package/Switch/Switch.d.ts +2 -6
  398. package/Switch/Switch.js +48 -33
  399. package/Switch/Switch.js.map +1 -0
  400. package/Switch/Switch.stories.js +27 -16
  401. package/Switch/Switch.stories.js.map +1 -0
  402. package/Switch/index.js +18 -1
  403. package/Switch/index.js.map +1 -0
  404. package/Tabs/Tab.d.ts +6 -2
  405. package/Tabs/Tab.js +37 -10
  406. package/Tabs/Tab.js.map +1 -0
  407. package/Tabs/Tabs.d.ts +43 -21
  408. package/Tabs/Tabs.js +131 -125
  409. package/Tabs/Tabs.js.map +1 -0
  410. package/Tabs/Tabs.stories.js +34 -22
  411. package/Tabs/Tabs.stories.js.map +1 -0
  412. package/Tabs/index.js +31 -2
  413. package/Tabs/index.js.map +1 -0
  414. package/Tags/Tags.d.ts +5 -10
  415. package/Tags/Tags.js +71 -47
  416. package/Tags/Tags.js.map +1 -0
  417. package/Tags/Tags.stories.js +27 -16
  418. package/Tags/Tags.stories.js.map +1 -0
  419. package/Tags/index.js +18 -1
  420. package/Tags/index.js.map +1 -0
  421. package/Tooltip/Tooltip.d.ts +9 -8
  422. package/Tooltip/Tooltip.js +44 -25
  423. package/Tooltip/Tooltip.js.map +1 -0
  424. package/Tooltip/Tooltip.stories.js +20 -11
  425. package/Tooltip/Tooltip.stories.js.map +1 -0
  426. package/Tooltip/index.js +18 -1
  427. package/Tooltip/index.js.map +1 -0
  428. package/TopAppBar/TopAppBar.d.ts +1 -1
  429. package/TopAppBar/TopAppBar.js +18 -7
  430. package/TopAppBar/TopAppBar.js.map +1 -0
  431. package/TopAppBar/TopAppBar.stories.js +39 -25
  432. package/TopAppBar/TopAppBar.stories.js.map +1 -0
  433. package/TopAppBar/TopAppBarActionItem.d.ts +1 -1
  434. package/TopAppBar/TopAppBarActionItem.js +14 -4
  435. package/TopAppBar/TopAppBarActionItem.js.map +1 -0
  436. package/TopAppBar/TopAppBarNavigationIcon.d.ts +1 -1
  437. package/TopAppBar/TopAppBarNavigationIcon.js +14 -4
  438. package/TopAppBar/TopAppBarNavigationIcon.js.map +1 -0
  439. package/TopAppBar/TopAppBarPrimary.js +18 -7
  440. package/TopAppBar/TopAppBarPrimary.js.map +1 -0
  441. package/TopAppBar/TopAppBarSecondary.js +18 -7
  442. package/TopAppBar/TopAppBarSecondary.js.map +1 -0
  443. package/TopAppBar/TopAppBarSection.d.ts +1 -1
  444. package/TopAppBar/TopAppBarSection.js +18 -7
  445. package/TopAppBar/TopAppBarSection.js.map +1 -0
  446. package/TopAppBar/TopAppBarTitle.d.ts +1 -1
  447. package/TopAppBar/TopAppBarTitle.js +18 -7
  448. package/TopAppBar/TopAppBarTitle.js.map +1 -0
  449. package/TopAppBar/index.js +96 -7
  450. package/TopAppBar/index.js.map +1 -0
  451. package/TopProgressBar/TopProgressBar.d.ts +7 -7
  452. package/TopProgressBar/TopProgressBar.js +20 -7
  453. package/TopProgressBar/TopProgressBar.js.map +1 -0
  454. package/TopProgressBar/TopProgressBar.stories.js +22 -12
  455. package/TopProgressBar/TopProgressBar.stories.js.map +1 -0
  456. package/TopProgressBar/hoc/index.js +15 -1
  457. package/TopProgressBar/hoc/index.js.map +1 -0
  458. package/TopProgressBar/hoc/withTopProgressBar.d.ts +1 -1
  459. package/TopProgressBar/hoc/withTopProgressBar.js +16 -5
  460. package/TopProgressBar/hoc/withTopProgressBar.js.map +1 -0
  461. package/TopProgressBar/index.js +18 -1
  462. package/TopProgressBar/index.js.map +1 -0
  463. package/Typography/Typography.d.ts +4 -4
  464. package/Typography/Typography.js +14 -4
  465. package/Typography/Typography.js.map +1 -0
  466. package/Typography/Typography.stories.js +43 -34
  467. package/Typography/Typography.stories.js.map +1 -0
  468. package/Typography/index.js +18 -1
  469. package/Typography/index.js.map +1 -0
  470. package/package.json +56 -63
  471. package/styles.scss +3 -4
  472. package/types.d.ts +2 -2
  473. package/types.js +5 -1
  474. package/types.js.map +1 -0
  475. package/Chips/ChipIcon.d.ts +0 -4
  476. package/Chips/ChipIcon.js +0 -8
  477. package/rmwc/textfield/code/index.d.ts +0 -135
  478. package/rmwc/textfield/code/index.js +0 -571
  479. package/rmwc/textfield/next/index.d.ts +0 -135
  480. package/rmwc/textfield/next/index.js +0 -560
  481. package/rmwc/textfield/package.json +0 -45
@@ -1,19 +1,28 @@
1
- import React from "react";
2
- import { storiesOf } from "@storybook/react";
3
- import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
4
- import readme from "./../Avatar/README.md";
5
- import { Avatar } from "./Avatar";
6
- var story = storiesOf("Components/Avatar", module);
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ var _react = _interopRequireDefault(require("react"));
6
+
7
+ var _react2 = require("@storybook/react");
8
+
9
+ var _Story = require("@webiny/storybook-utils/Story");
10
+
11
+ var _README = _interopRequireDefault(require("./../Avatar/README.md"));
12
+
13
+ var _Avatar = require("./Avatar");
14
+
15
+ var story = (0, _react2.storiesOf)("Components/Avatar", module);
7
16
  story.add("usage", function () {
8
- return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
17
+ return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
9
18
  title: "A simple avatar"
10
- }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Avatar, {
19
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
11
20
  width: 48,
12
21
  height: 48,
13
22
  alt: "Test alt.",
14
23
  fallbackText: "T",
15
24
  src: "http://i.pravatar.cc/150?img=49"
16
- }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Avatar, {
25
+ }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
17
26
  width: 64,
18
27
  height: 64,
19
28
  alt: "Test alt.",
@@ -22,6 +31,6 @@ story.add("usage", function () {
22
31
  }))));
23
32
  }, {
24
33
  info: {
25
- propTables: [Avatar]
34
+ propTables: [_Avatar.Avatar]
26
35
  }
27
36
  });
@@ -0,0 +1 @@
1
+ {"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Avatar"],"sources":["Avatar.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Avatar/README.md\";\nimport { Avatar } from \"./Avatar\";\n\nconst story = storiesOf(\"Components/Avatar\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"A simple avatar\"}>\n <div>\n <Avatar\n width={48}\n height={48}\n alt=\"Test alt.\"\n fallbackText=\"T\"\n src=\"http://i.pravatar.cc/150?img=49\"\n />\n\n <br />\n <br />\n\n <Avatar width={64} height={64} alt=\"Test alt.\" fallbackText=\"T\" src={\"\"} />\n </div>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Avatar] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,uDACI,6BAAC,cAAD;IACI,KAAK,EAAE,EADX;IAEI,MAAM,EAAE,EAFZ;IAGI,GAAG,EAAC,WAHR;IAII,YAAY,EAAC,GAJjB;IAKI,GAAG,EAAC;EALR,EADJ,eASI,wCATJ,eAUI,wCAVJ,eAYI,6BAAC,cAAD;IAAQ,KAAK,EAAE,EAAf;IAAmB,MAAM,EAAE,EAA3B;IAA+B,GAAG,EAAC,WAAnC;IAA+C,YAAY,EAAC,GAA5D;IAAgE,GAAG,EAAE;EAArE,EAZJ,CADJ,CAFJ,CADJ;AAqBH,CAxBL,EAyBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAD;EAAd;AAAR,CAzBJ"}
package/Avatar/index.js CHANGED
@@ -1 +1,18 @@
1
- export * from "./Avatar";
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ var _Avatar = require("./Avatar");
8
+
9
+ Object.keys(_Avatar).forEach(function (key) {
10
+ if (key === "default" || key === "__esModule") return;
11
+ if (key in exports && exports[key] === _Avatar[key]) return;
12
+ Object.defineProperty(exports, key, {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _Avatar[key];
16
+ }
17
+ });
18
+ });
@@ -0,0 +1 @@
1
+ {"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Avatar\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
@@ -1,8 +1,9 @@
1
- import * as React from "react";
1
+ /// <reference types="web" />
2
+ import React from "react";
2
3
  import { FabProps } from "@rmwc/fab";
3
4
  import { IconProps } from "../Icon/Icon";
4
5
  import { SyntheticEvent } from "react";
5
- export declare type ButtonProps = {
6
+ export interface ButtonProps {
6
7
  flat?: boolean;
7
8
  small?: boolean;
8
9
  onClick?: (event: React.MouseEvent<any, MouseEvent>) => void | null;
@@ -14,28 +15,19 @@ export declare type ButtonProps = {
14
15
  [key: string]: any;
15
16
  };
16
17
  "data-testid"?: string;
17
- };
18
+ }
18
19
  /**
19
20
  * Shows a default button, used typically when action is not of high priority.
20
- * @param props
21
- * @returns {*}
22
- * @constructor
23
21
  */
24
- export declare const ButtonDefault: (props: ButtonProps) => JSX.Element;
22
+ export declare const ButtonDefault: React.FC<ButtonProps>;
25
23
  /**
26
24
  * Shows primary button, eg. for submitting forms.
27
- * @param props
28
- * @returns {*}
29
- * @constructor
30
25
  */
31
- export declare const ButtonPrimary: (props: ButtonProps) => JSX.Element;
26
+ export declare const ButtonPrimary: React.FC<ButtonProps>;
32
27
  /**
33
28
  * Shows a secondary button - eg. for doing a reset on a form.
34
- * @param props
35
- * @returns {*}
36
- * @constructor
37
29
  */
38
- export declare const ButtonSecondary: (props: ButtonProps) => JSX.Element;
30
+ export declare const ButtonSecondary: React.FC<ButtonProps>;
39
31
  export declare type ButtonFloatingProps = ButtonProps & FabProps & {
40
32
  label?: React.ReactNode;
41
33
  icon?: React.ReactNode;
@@ -44,15 +36,9 @@ export declare type ButtonFloatingProps = ButtonProps & FabProps & {
44
36
  };
45
37
  /**
46
38
  * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.
47
- * @param props
48
- * @returns {*}
49
- * @constructor
50
39
  */
51
- export declare const ButtonFloating: (props: ButtonFloatingProps) => JSX.Element;
40
+ export declare const ButtonFloating: React.FC<ButtonFloatingProps>;
52
41
  /**
53
42
  * Shows an icon, suitable to be shown inside of a button.
54
- * @param props
55
- * @returns {*}
56
- * @constructor
57
43
  */
58
- export declare const ButtonIcon: (props: IconProps) => JSX.Element;
44
+ export declare const ButtonIcon: React.FC<IconProps>;
package/Button/Button.js CHANGED
@@ -1,18 +1,34 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2
- var _excluded = ["disabled", "icon", "onClick", "small", "label", "ripple", "className"];
3
- import * as React from "react";
4
- import * as R from "@rmwc/button";
5
- import { Fab } from "@rmwc/fab";
6
- import { Icon } from "../Icon/Icon";
7
- import classNames from "classnames";
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.ButtonSecondary = exports.ButtonPrimary = exports.ButtonIcon = exports.ButtonFloating = exports.ButtonDefault = void 0;
11
+
12
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
+
14
+ var _react = _interopRequireDefault(require("react"));
15
+
16
+ var RmwcButton = _interopRequireWildcard(require("@rmwc/button"));
17
+
18
+ var _fab = require("@rmwc/fab");
19
+
20
+ var _Icon = require("../Icon/Icon");
21
+
22
+ var _classnames = _interopRequireDefault(require("classnames"));
23
+
24
+ var _Button = require("./Button.styles");
25
+
26
+ var _excluded = ["disabled", "label", "icon", "onClick", "small", "ripple", "className"];
8
27
 
9
28
  /**
10
29
  * Shows a default button, used typically when action is not of high priority.
11
- * @param props
12
- * @returns {*}
13
- * @constructor
14
30
  */
15
- export var ButtonDefault = function ButtonDefault(props) {
31
+ var ButtonDefault = function ButtonDefault(props) {
16
32
  var disabled = props.disabled,
17
33
  onClick = props.onClick,
18
34
  children = props.children,
@@ -22,24 +38,24 @@ export var ButtonDefault = function ButtonDefault(props) {
22
38
  _props$className = props.className,
23
39
  className = _props$className === void 0 ? "" : _props$className,
24
40
  style = props.style;
25
- return /*#__PURE__*/React.createElement(R.Button, {
41
+ return /*#__PURE__*/_react.default.createElement(RmwcButton.Button, {
26
42
  style: style,
27
43
  disabled: disabled,
28
44
  dense: small,
29
45
  onClick: onClick,
30
46
  ripple: ripple,
31
- className: classNames("webiny-ui-button", className),
47
+ className: (0, _classnames.default)("webiny-ui-button", className),
32
48
  "data-testid": props["data-testid"]
33
49
  }, children);
34
50
  };
35
51
  /**
36
52
  * Shows primary button, eg. for submitting forms.
37
- * @param props
38
- * @returns {*}
39
- * @constructor
40
53
  */
41
54
 
42
- export var ButtonPrimary = function ButtonPrimary(props) {
55
+
56
+ exports.ButtonDefault = ButtonDefault;
57
+
58
+ var ButtonPrimary = function ButtonPrimary(props) {
43
59
  var disabled = props.disabled,
44
60
  onClick = props.onClick,
45
61
  children = props.children,
@@ -50,10 +66,10 @@ export var ButtonPrimary = function ButtonPrimary(props) {
50
66
  _props$ripple2 = props.ripple,
51
67
  ripple = _props$ripple2 === void 0 ? true : _props$ripple2,
52
68
  _props$style = props.style,
53
- style = _props$style === void 0 ? null : _props$style,
69
+ style = _props$style === void 0 ? {} : _props$style,
54
70
  _props$className2 = props.className,
55
71
  className = _props$className2 === void 0 ? null : _props$className2;
56
- return /*#__PURE__*/React.createElement(R.Button, {
72
+ return /*#__PURE__*/_react.default.createElement(RmwcButton.Button, {
57
73
  raised: !flat,
58
74
  dense: small,
59
75
  disabled: disabled,
@@ -61,18 +77,18 @@ export var ButtonPrimary = function ButtonPrimary(props) {
61
77
  ripple: ripple,
62
78
  onClick: onClick,
63
79
  style: style,
64
- className: classNames("webiny-ui-button webiny-ui-button--primary", className),
80
+ className: (0, _classnames.default)("webiny-ui-button webiny-ui-button--primary", className),
65
81
  "data-testid": props["data-testid"]
66
82
  }, children);
67
83
  };
68
84
  /**
69
85
  * Shows a secondary button - eg. for doing a reset on a form.
70
- * @param props
71
- * @returns {*}
72
- * @constructor
73
86
  */
74
87
 
75
- export var ButtonSecondary = function ButtonSecondary(props) {
88
+
89
+ exports.ButtonPrimary = ButtonPrimary;
90
+
91
+ var ButtonSecondary = function ButtonSecondary(props) {
76
92
  var disabled = props.disabled,
77
93
  onClick = props.onClick,
78
94
  children = props.children,
@@ -83,40 +99,37 @@ export var ButtonSecondary = function ButtonSecondary(props) {
83
99
  _props$className3 = props.className,
84
100
  className = _props$className3 === void 0 ? null : _props$className3,
85
101
  _props$style2 = props.style,
86
- style = _props$style2 === void 0 ? null : _props$style2;
87
- return /*#__PURE__*/React.createElement(R.Button, {
102
+ style = _props$style2 === void 0 ? {} : _props$style2;
103
+ return /*#__PURE__*/_react.default.createElement(RmwcButton.Button, {
88
104
  disabled: disabled,
89
105
  outlined: true,
90
106
  dense: small,
91
107
  ripple: ripple,
92
108
  onClick: onClick,
93
109
  style: style,
94
- className: classNames("webiny-ui-button webiny-ui-button--secondary", className),
110
+ className: (0, _classnames.default)("webiny-ui-button webiny-ui-button--secondary", _Button.webinyButtonStyles, className),
95
111
  "data-testid": props["data-testid"]
96
112
  }, children);
97
113
  };
98
114
 
115
+ exports.ButtonSecondary = ButtonSecondary;
116
+
99
117
  /**
100
118
  * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.
101
- * @param props
102
- * @returns {*}
103
- * @constructor
104
119
  */
105
- export var ButtonFloating = function ButtonFloating(props) {
120
+ var ButtonFloating = function ButtonFloating(props) {
106
121
  var disabled = props.disabled,
122
+ label = props.label,
107
123
  icon = props.icon,
108
124
  onClick = props.onClick,
109
125
  _props$small3 = props.small,
110
126
  small = _props$small3 === void 0 ? false : _props$small3,
111
- _props$label = props.label,
112
- label = _props$label === void 0 ? false : _props$label,
113
127
  _props$ripple4 = props.ripple,
114
128
  ripple = _props$ripple4 === void 0 ? true : _props$ripple4,
115
129
  _props$className4 = props.className,
116
130
  className = _props$className4 === void 0 ? null : _props$className4,
117
- rest = _objectWithoutProperties(props, _excluded);
118
-
119
- return /*#__PURE__*/React.createElement(Fab, Object.assign({
131
+ rest = (0, _objectWithoutProperties2.default)(props, _excluded);
132
+ return /*#__PURE__*/_react.default.createElement(_fab.Fab, Object.assign({
120
133
  "data-testid": props["data-testid"],
121
134
  disabled: disabled,
122
135
  mini: small,
@@ -124,16 +137,18 @@ export var ButtonFloating = function ButtonFloating(props) {
124
137
  label: label,
125
138
  ripple: ripple,
126
139
  icon: icon,
127
- className: classNames("webiny-ui-button--floating", className)
140
+ className: (0, _classnames.default)("webiny-ui-button--floating", className)
128
141
  }, rest));
129
142
  };
130
143
  /**
131
144
  * Shows an icon, suitable to be shown inside of a button.
132
- * @param props
133
- * @returns {*}
134
- * @constructor
135
145
  */
136
146
 
137
- export var ButtonIcon = function ButtonIcon(props) {
138
- return /*#__PURE__*/React.createElement(Icon, props);
139
- };
147
+
148
+ exports.ButtonFloating = ButtonFloating;
149
+
150
+ var ButtonIcon = function ButtonIcon(props) {
151
+ return /*#__PURE__*/_react.default.createElement(_Icon.Icon, props);
152
+ };
153
+
154
+ exports.ButtonIcon = ButtonIcon;
@@ -0,0 +1 @@
1
+ {"version":3,"names":["ButtonDefault","props","disabled","onClick","children","small","ripple","className","style","classNames","ButtonPrimary","flat","ButtonSecondary","webinyButtonStyles","ButtonFloating","label","icon","rest","ButtonIcon"],"sources":["Button.tsx"],"sourcesContent":["import React from \"react\";\nimport * as RmwcButton from \"@rmwc/button\";\nimport { Fab, FabProps } from \"@rmwc/fab\";\nimport { Icon, IconProps } from \"../Icon/Icon\";\nimport classNames from \"classnames\";\nimport { SyntheticEvent } from \"react\";\nimport { webinyButtonStyles } from \"./Button.styles\";\nexport interface ButtonProps {\n // Make button flat (only applicable to Primary button).\n flat?: boolean;\n\n // Make button smaller.\n small?: boolean;\n\n // onClick handler.\n onClick?: (event: React.MouseEvent<any, MouseEvent>) => void | null;\n\n // Label and optionally an icon (using Button.Icon component).\n children?: React.ReactNode;\n\n // Show ripple effect on button click. Default: true\n ripple?: boolean;\n\n className?: string;\n\n disabled?: boolean;\n\n style?: { [key: string]: any };\n\n // For testing purposes.\n \"data-testid\"?: string;\n}\n\n/**\n * Shows a default button, used typically when action is not of high priority.\n */\nexport const ButtonDefault: React.FC<ButtonProps> = props => {\n const { disabled, onClick, children, small, ripple = true, className = \"\", style } = props;\n\n return (\n <RmwcButton.Button\n style={style}\n disabled={disabled}\n dense={small}\n onClick={onClick}\n ripple={ripple}\n className={classNames(\"webiny-ui-button\", className)}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\n/**\n * Shows primary button, eg. for submitting forms.\n */\nexport const ButtonPrimary: React.FC<ButtonProps> = props => {\n const {\n disabled,\n onClick,\n children,\n small = false,\n flat = false,\n ripple = true,\n style = {},\n className = null\n } = props;\n return (\n <RmwcButton.Button\n raised={!flat}\n dense={small}\n disabled={disabled}\n unelevated={flat}\n ripple={ripple}\n onClick={onClick}\n style={style}\n className={classNames(\"webiny-ui-button webiny-ui-button--primary\", className)}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\n/**\n * Shows a secondary button - eg. for doing a reset on a form.\n */\nexport const ButtonSecondary: React.FC<ButtonProps> = props => {\n const {\n disabled,\n onClick,\n children,\n small = false,\n ripple = true,\n className = null,\n style = {}\n } = props;\n\n return (\n <RmwcButton.Button\n disabled={disabled}\n outlined\n dense={small}\n ripple={ripple}\n onClick={onClick}\n style={style}\n className={classNames(\n \"webiny-ui-button webiny-ui-button--secondary\",\n webinyButtonStyles,\n className\n )}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\nexport type ButtonFloatingProps = ButtonProps &\n FabProps & {\n label?: React.ReactNode;\n icon?: React.ReactNode;\n onMouseDown?: (e: SyntheticEvent) => void;\n onMouseUp?: (e: SyntheticEvent) => void;\n };\n\n/**\n * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.\n */\nexport const ButtonFloating: React.FC<ButtonFloatingProps> = props => {\n const {\n disabled,\n label,\n icon,\n onClick,\n small = false,\n ripple = true,\n className = null,\n ...rest\n } = props;\n return (\n <Fab\n data-testid={props[\"data-testid\"]}\n disabled={disabled}\n mini={small}\n onClick={onClick}\n label={label}\n ripple={ripple}\n icon={icon}\n className={classNames(\"webiny-ui-button--floating\", className)}\n {...rest}\n />\n );\n};\n\n/**\n * Shows an icon, suitable to be shown inside of a button.\n */\nexport const ButtonIcon: React.FC<IconProps> = props => <Icon {...props} />;\n"],"mappings":"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"}
@@ -1,53 +1,66 @@
1
- import React from "react";
2
- import { storiesOf } from "@storybook/react";
3
- import { withKnobs, text, boolean } from "@storybook/addon-knobs";
4
- import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
5
- import readme from "./../Button/README.md";
6
- import { ReactComponent as CloudIcon } from "@svgr/webpack!./assets/baseline-cloud_done-24px.svg";
7
- import { ButtonPrimary, ButtonSecondary, ButtonDefault, ButtonFloating, ButtonIcon } from "./Button";
8
- var story = storiesOf("Components/Button", module);
9
- story.addDecorator(withKnobs);
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ var _react = _interopRequireDefault(require("react"));
6
+
7
+ var _react2 = require("@storybook/react");
8
+
9
+ var _addonKnobs = require("@storybook/addon-knobs");
10
+
11
+ var _Story = require("@webiny/storybook-utils/Story");
12
+
13
+ var _README = _interopRequireDefault(require("./../Button/README.md"));
14
+
15
+ var _baselineCloud_done24px = require("./assets/baseline-cloud_done-24px.svg");
16
+
17
+ var _Button = require("./Button");
18
+
19
+ var story = (0, _react2.storiesOf)("Components/Button", module);
20
+ story.addDecorator(_addonKnobs.withKnobs);
10
21
  story.add("standard buttons", function () {
11
- var label = text("Label", "Click to proceed");
12
- var small = boolean("Small", false);
13
- var flat = boolean("Flat", false);
14
- var icon = /*#__PURE__*/React.createElement(ButtonIcon, {
15
- icon: /*#__PURE__*/React.createElement(CloudIcon, null)
22
+ var label = (0, _addonKnobs.text)("Label", "Click to proceed");
23
+ var small = (0, _addonKnobs.boolean)("Small", false);
24
+ var flat = (0, _addonKnobs.boolean)("Flat", false);
25
+
26
+ var icon = /*#__PURE__*/_react.default.createElement(_Button.ButtonIcon, {
27
+ icon: /*#__PURE__*/_react.default.createElement(_baselineCloud_done24px.ReactComponent, null)
16
28
  });
17
- return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
29
+
30
+ return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
18
31
  title: "Primary button"
19
- }, /*#__PURE__*/React.createElement(ButtonPrimary, {
32
+ }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
20
33
  small: small,
21
34
  flat: flat
22
- }, label)), /*#__PURE__*/React.createElement(StorySandbox, {
35
+ }, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
23
36
  title: "Primary button with icon"
24
- }, /*#__PURE__*/React.createElement(ButtonPrimary, {
37
+ }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
25
38
  small: small,
26
39
  flat: flat
27
- }, icon, label)), /*#__PURE__*/React.createElement(StorySandbox, {
40
+ }, icon, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
28
41
  title: "Secondary button"
29
- }, /*#__PURE__*/React.createElement(ButtonSecondary, {
42
+ }, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
30
43
  small: small
31
- }, label)), /*#__PURE__*/React.createElement(StorySandbox, {
44
+ }, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
32
45
  title: "Secondary button with icon"
33
- }, /*#__PURE__*/React.createElement(ButtonSecondary, {
46
+ }, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
34
47
  small: small
35
- }, icon, label)), /*#__PURE__*/React.createElement(StorySandbox, {
48
+ }, icon, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
36
49
  title: "Default button"
37
- }, /*#__PURE__*/React.createElement(ButtonDefault, {
50
+ }, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
38
51
  small: small
39
- }, label)), /*#__PURE__*/React.createElement(StorySandbox, {
52
+ }, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
40
53
  title: "Default button with icon"
41
- }, /*#__PURE__*/React.createElement(ButtonDefault, {
54
+ }, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
42
55
  small: small
43
- }, icon, label)), /*#__PURE__*/React.createElement(StorySandbox, {
56
+ }, icon, label)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
44
57
  title: "Floating button"
45
- }, /*#__PURE__*/React.createElement(ButtonFloating, {
58
+ }, /*#__PURE__*/_react.default.createElement(_Button.ButtonFloating, {
46
59
  small: small,
47
60
  icon: icon
48
61
  })));
49
62
  }, {
50
63
  info: {
51
- propTables: [ButtonPrimary, ButtonSecondary, ButtonDefault, ButtonFloating, ButtonIcon]
64
+ propTables: [_Button.ButtonPrimary, _Button.ButtonSecondary, _Button.ButtonDefault, _Button.ButtonFloating, _Button.ButtonIcon]
52
65
  }
53
66
  });
@@ -0,0 +1 @@
1
+ {"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","label","text","small","boolean","flat","icon","readme","info","propTables","ButtonPrimary","ButtonSecondary","ButtonDefault","ButtonFloating","ButtonIcon"],"sources":["Button.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { withKnobs, text, boolean } from \"@storybook/addon-knobs\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Button/README.md\";\nimport { ReactComponent as CloudIcon } from \"./assets/baseline-cloud_done-24px.svg\";\n\nimport {\n ButtonPrimary,\n ButtonSecondary,\n ButtonDefault,\n ButtonFloating,\n ButtonIcon\n} from \"./Button\";\n\nconst story = storiesOf(\"Components/Button\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n \"standard buttons\",\n () => {\n const label = text(\"Label\", \"Click to proceed\");\n const small = boolean(\"Small\", false);\n const flat = boolean(\"Flat\", false);\n const icon = <ButtonIcon icon={<CloudIcon />} />;\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Primary button\"}>\n <ButtonPrimary small={small} flat={flat}>\n {label}\n </ButtonPrimary>\n </StorySandbox>\n <StorySandbox title={\"Primary button with icon\"}>\n <ButtonPrimary small={small} flat={flat}>\n {icon}\n {label}\n </ButtonPrimary>\n </StorySandbox>\n <StorySandbox title={\"Secondary button\"}>\n <ButtonSecondary small={small}>{label}</ButtonSecondary>\n </StorySandbox>\n <StorySandbox title={\"Secondary button with icon\"}>\n <ButtonSecondary small={small}>\n {icon}\n {label}\n </ButtonSecondary>\n </StorySandbox>\n <StorySandbox title={\"Default button\"}>\n <ButtonDefault small={small}>{label}</ButtonDefault>\n </StorySandbox>\n <StorySandbox title={\"Default button with icon\"}>\n <ButtonDefault small={small}>\n {icon}\n {label}\n </ButtonDefault>\n </StorySandbox>\n <StorySandbox title={\"Floating button\"}>\n <ButtonFloating small={small} icon={icon} />\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTables: [ButtonPrimary, ButtonSecondary, ButtonDefault, ButtonFloating, ButtonIcon]\n }\n }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAQA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,kBADJ,EAEI,YAAM;EACF,IAAMC,KAAK,GAAG,IAAAC,gBAAA,EAAK,OAAL,EAAc,kBAAd,CAAd;EACA,IAAMC,KAAK,GAAG,IAAAC,mBAAA,EAAQ,OAAR,EAAiB,KAAjB,CAAd;EACA,IAAMC,IAAI,GAAG,IAAAD,mBAAA,EAAQ,MAAR,EAAgB,KAAhB,CAAb;;EACA,IAAME,IAAI,gBAAG,6BAAC,kBAAD;IAAY,IAAI,eAAE,6BAAC,sCAAD;EAAlB,EAAb;;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,qBAAD;IAAe,KAAK,EAAEJ,KAAtB;IAA6B,IAAI,EAAEE;EAAnC,GACKJ,KADL,CADJ,CAFJ,eAOI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,qBAAD;IAAe,KAAK,EAAEE,KAAtB;IAA6B,IAAI,EAAEE;EAAnC,GACKC,IADL,EAEKL,KAFL,CADJ,CAPJ,eAaI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,uBAAD;IAAiB,KAAK,EAAEE;EAAxB,GAAgCF,KAAhC,CADJ,CAbJ,eAgBI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,uBAAD;IAAiB,KAAK,EAAEE;EAAxB,GACKG,IADL,EAEKL,KAFL,CADJ,CAhBJ,eAsBI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,qBAAD;IAAe,KAAK,EAAEE;EAAtB,GAA8BF,KAA9B,CADJ,CAtBJ,eAyBI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,qBAAD;IAAe,KAAK,EAAEE;EAAtB,GACKG,IADL,EAEKL,KAFL,CADJ,CAzBJ,eA+BI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,sBAAD;IAAgB,KAAK,EAAEE,KAAvB;IAA8B,IAAI,EAAEG;EAApC,EADJ,CA/BJ,CADJ;AAqCH,CA7CL,EA8CI;EACIE,IAAI,EAAE;IACFC,UAAU,EAAE,CAACC,qBAAD,EAAgBC,uBAAhB,EAAiCC,qBAAjC,EAAgDC,sBAAhD,EAAgEC,kBAAhE;EADV;AADV,CA9CJ"}
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Controls the button styles
3
+ * @type {string}
4
+ */
5
+ declare const webinyButtonStyles: string;
6
+ export { webinyButtonStyles };
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.webinyButtonStyles = void 0;
7
+
8
+ var _emotion = require("emotion");
9
+
10
+ /**
11
+ * Controls the button styles
12
+ * @type {string}
13
+ */
14
+ var webinyButtonStyles = /*#__PURE__*/(0, _emotion.css)("&.webiny-ui-button--secondary:not(:disabled){border-color:var(--mdc-theme-primary);}}label:webinyButtonStyles;");
15
+ exports.webinyButtonStyles = webinyButtonStyles;
@@ -0,0 +1 @@
1
+ {"version":3,"names":["webinyButtonStyles","css"],"sources":["Button.styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\n/**\n * Controls the button styles\n * @type {string}\n */\nconst webinyButtonStyles = css`\n &.webiny-ui-button--secondary:not(:disabled) {\n border-color: var(--mdc-theme-primary);\n }\n }\n`;\n\nexport { webinyButtonStyles };\n"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACA,IAAMA,kBAAkB,oBAAGC,YAAH,mHAAxB"}
@@ -1,14 +1,11 @@
1
- /// <reference types="react" />
1
+ import React from "react";
2
2
  import { FormComponentProps } from "../../types";
3
- export declare type CopyButtonProps = FormComponentProps & {
3
+ export interface CopyButtonProps extends FormComponentProps {
4
4
  value: string;
5
5
  onCopy?: () => void;
6
- };
6
+ }
7
7
  /**
8
8
  * Shows the icon button.
9
- * @param props
10
- * @returns {*}
11
- * @constructor
12
9
  */
13
- declare const CopyButton: (props: CopyButtonProps) => JSX.Element;
10
+ declare const CopyButton: React.FC<CopyButtonProps>;
14
11
  export { CopyButton };
@@ -1,32 +1,42 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.CopyButton = void 0;
11
+
12
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
+
14
+ var _react = _interopRequireWildcard(require("react"));
15
+
16
+ var _file_copy24px = require("../assets/file_copy-24px.svg");
17
+
18
+ var _index = require("../index");
19
+
2
20
  var _excluded = ["value", "onCopy"];
3
- import * as React from "react";
4
- import { ReactComponent as CopyToClipboardIcon } from "@svgr/webpack!../assets/file_copy-24px.svg";
5
- import { IconButton } from "../index";
6
- import { useCallback } from "react";
7
21
 
8
22
  /**
9
23
  * Shows the icon button.
10
- * @param props
11
- * @returns {*}
12
- * @constructor
13
24
  */
14
25
  var CopyButton = function CopyButton(props) {
15
26
  var value = props.value,
16
27
  onCopy = props.onCopy,
17
- otherProps = _objectWithoutProperties(props, _excluded);
18
-
19
- var copyToClipboard = useCallback(function () {
28
+ otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
29
+ var copyToClipboard = (0, _react.useCallback)(function () {
20
30
  navigator.clipboard.writeText(value);
21
31
 
22
32
  if (typeof onCopy === "function") {
23
33
  onCopy();
24
34
  }
25
35
  }, [value]);
26
- return /*#__PURE__*/React.createElement(IconButton, Object.assign({}, otherProps, {
36
+ return /*#__PURE__*/_react.default.createElement(_index.IconButton, Object.assign({}, otherProps, {
27
37
  onClick: copyToClipboard,
28
- icon: /*#__PURE__*/React.createElement(CopyToClipboardIcon, null)
38
+ icon: /*#__PURE__*/_react.default.createElement(_file_copy24px.ReactComponent, null)
29
39
  }));
30
40
  };
31
41
 
32
- export { CopyButton };
42
+ exports.CopyButton = CopyButton;
@@ -0,0 +1 @@
1
+ {"version":3,"names":["CopyButton","props","value","onCopy","otherProps","copyToClipboard","useCallback","navigator","clipboard","writeText"],"sources":["CopyButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as CopyToClipboardIcon } from \"../assets/file_copy-24px.svg\";\nimport { IconButton } from \"../index\";\nimport { FormComponentProps } from \"../../types\";\nimport { useCallback } from \"react\";\n\nexport interface CopyButtonProps extends FormComponentProps {\n value: string;\n onCopy?: () => void;\n}\n\n/**\n * Shows the icon button.\n */\nconst CopyButton: React.FC<CopyButtonProps> = props => {\n const { value, onCopy, ...otherProps } = props;\n\n const copyToClipboard = useCallback(() => {\n navigator.clipboard.writeText(value);\n if (typeof onCopy === \"function\") {\n onCopy();\n }\n }, [value]);\n\n return <IconButton {...otherProps} onClick={copyToClipboard} icon={<CopyToClipboardIcon />} />;\n};\n\nexport { CopyButton };\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;AASA;AACA;AACA;AACA,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;EACnD,IAAQC,KAAR,GAAyCD,KAAzC,CAAQC,KAAR;EAAA,IAAeC,MAAf,GAAyCF,KAAzC,CAAeE,MAAf;EAAA,IAA0BC,UAA1B,0CAAyCH,KAAzC;EAEA,IAAMI,eAAe,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACtCC,SAAS,CAACC,SAAV,CAAoBC,SAApB,CAA8BP,KAA9B;;IACA,IAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;MAC9BA,MAAM;IACT;EACJ,CALuB,EAKrB,CAACD,KAAD,CALqB,CAAxB;EAOA,oBAAO,6BAAC,iBAAD,oBAAgBE,UAAhB;IAA4B,OAAO,EAAEC,eAArC;IAAsD,IAAI,eAAE,6BAAC,6BAAD;EAA5D,GAAP;AACH,CAXD"}
@@ -1,18 +1,28 @@
1
- import React from "react";
2
- import { storiesOf } from "@storybook/react";
3
- import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
4
- import readme from "./README.md";
5
- import { Menu, MenuItem } from "./../../Menu/index";
6
- import { CopyButton } from "./CopyButton";
7
- var story = storiesOf("Components/Button", module);
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ var _react = _interopRequireDefault(require("react"));
6
+
7
+ var _react2 = require("@storybook/react");
8
+
9
+ var _Story = require("@webiny/storybook-utils/Story");
10
+
11
+ var _README = _interopRequireDefault(require("./README.md"));
12
+
13
+ var _index = require("./../../Menu/index");
14
+
15
+ var _CopyButton = require("./CopyButton");
16
+
17
+ var story = (0, _react2.storiesOf)("Components/Button", module);
8
18
  story.add("copy button", function () {
9
- return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
19
+ return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
10
20
  title: "Copy button"
11
- }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "Click the button to copy the \"Hello\" value:"), /*#__PURE__*/React.createElement(CopyButton, {
21
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, "Click the button to copy the \"Hello\" value:"), /*#__PURE__*/_react.default.createElement(_CopyButton.CopyButton, {
12
22
  value: "Hello"
13
23
  }))));
14
24
  }, {
15
25
  info: {
16
- propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]
26
+ propTablesExclude: [_index.Menu, _index.MenuItem, _Story.Story, _Story.StoryReadme, _Story.StorySandbox]
17
27
  }
18
28
  });
@@ -0,0 +1 @@
1
+ {"version":3,"names":["story","storiesOf","module","add","readme","info","propTablesExclude","Menu","MenuItem","Story","StoryReadme","StorySandbox"],"sources":["CopyButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { Menu, MenuItem } from \"./../../Menu/index\";\n\nimport { CopyButton } from \"./CopyButton\";\n\nconst story = storiesOf(\"Components/Button\", module);\n\nstory.add(\n \"copy button\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Copy button\"}>\n <div>\n <span>Click the button to copy the &quot;Hello&quot; value:</span>\n <CopyButton value=\"Hello\" />\n </div>\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]\n }\n }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,aADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,uDACI,2FADJ,eAEI,6BAAC,sBAAD;IAAY,KAAK,EAAC;EAAlB,EAFJ,CADJ,CAFJ,CADJ;AAWH,CAdL,EAeI;EACIC,IAAI,EAAE;IACFC,iBAAiB,EAAE,CAACC,WAAD,EAAOC,eAAP,EAAiBC,YAAjB,EAAwBC,kBAAxB,EAAqCC,mBAArC;EADjB;AADV,CAfJ"}