@pareto-engineering/design-system 4.0.0-alpha.3 → 4.0.0-alpha.34

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 (431) hide show
  1. package/babel.config.js +24 -16
  2. package/dist/cjs/a/AnimatedBlobs/AnimatedBlobs.js +90 -0
  3. package/dist/cjs/a/AnimatedBlobs/index.js +13 -0
  4. package/dist/cjs/a/AnimatedBlobs/styles.scss +87 -0
  5. package/dist/cjs/a/AnimatedGradient/AnimatedGradient.js +60 -0
  6. package/dist/cjs/a/AnimatedGradient/index.js +13 -0
  7. package/dist/cjs/a/AnimatedGradient/styles.scss +14 -0
  8. package/dist/cjs/a/AnimatedGradient/webGIRenderer.js +528 -0
  9. package/dist/cjs/a/AppContext/Context.js +1 -1
  10. package/dist/cjs/a/AppContext/ContextProvider.js +19 -17
  11. package/dist/cjs/a/AppContext/index.js +4 -4
  12. package/dist/cjs/a/AppContext/useTheme.js +7 -11
  13. package/dist/cjs/a/BlurOverlay/BlurOverlay.js +59 -0
  14. package/dist/cjs/a/BlurOverlay/index.js +13 -0
  15. package/dist/cjs/a/BlurOverlay/styles.scss +31 -0
  16. package/dist/cjs/a/ContentTree/ContentTree.js +17 -11
  17. package/dist/cjs/a/ContentTree/common/Tree/Tree.js +24 -17
  18. package/dist/cjs/a/ContentTree/common/Tree/index.js +1 -1
  19. package/dist/cjs/a/ContentTree/common/index.js +3 -3
  20. package/dist/cjs/a/ContentTree/common/useContentTree.js +14 -14
  21. package/dist/cjs/a/ContentTree/common/useFirstVisibleNode.js +10 -11
  22. package/dist/cjs/a/ContentTree/index.js +1 -1
  23. package/dist/cjs/a/ContentTree/styles.scss +34 -11
  24. package/dist/cjs/a/Conversation/Context.js +1 -1
  25. package/dist/cjs/a/Conversation/Conversation.js +17 -22
  26. package/dist/cjs/a/Conversation/common/Message/Message.js +22 -19
  27. package/dist/cjs/a/Conversation/common/Message/index.js +1 -1
  28. package/dist/cjs/a/Conversation/common/index.js +1 -1
  29. package/dist/cjs/a/Conversation/index.js +3 -3
  30. package/dist/cjs/a/Conversation/styles.scss +56 -124
  31. package/dist/cjs/a/DotInfo/DotInfo.js +12 -16
  32. package/dist/cjs/a/DotInfo/index.js +1 -1
  33. package/dist/cjs/a/Figure/Figure.js +7 -7
  34. package/dist/cjs/a/Figure/index.js +1 -1
  35. package/dist/cjs/a/HamburgerButton/HamburgerButton.js +18 -21
  36. package/dist/cjs/a/HamburgerButton/index.js +1 -1
  37. package/dist/cjs/a/IconList/IconList.js +20 -27
  38. package/dist/cjs/a/IconList/common/Item/Item.js +18 -25
  39. package/dist/cjs/a/IconList/common/Item/index.js +1 -1
  40. package/dist/cjs/a/IconList/common/index.js +1 -1
  41. package/dist/cjs/a/IconList/index.js +1 -1
  42. package/dist/cjs/a/Label/Label.js +20 -12
  43. package/dist/cjs/a/Label/index.js +1 -1
  44. package/dist/cjs/a/Label/styles.scss +4 -4
  45. package/dist/cjs/a/LoadingCircle/LoadingCircle.js +12 -16
  46. package/dist/cjs/a/LoadingCircle/index.js +1 -1
  47. package/dist/cjs/a/MetaCard/MetaCard.js +65 -0
  48. package/dist/cjs/a/MetaCard/index.js +13 -0
  49. package/dist/cjs/a/MetaCard/styles.scss +45 -0
  50. package/dist/cjs/a/People/People.js +10 -14
  51. package/dist/cjs/a/People/common/Person/Person.js +8 -8
  52. package/dist/cjs/a/People/common/Person/index.js +1 -1
  53. package/dist/cjs/a/People/common/index.js +1 -1
  54. package/dist/cjs/a/People/index.js +1 -1
  55. package/dist/cjs/a/Popover/Popover.js +12 -12
  56. package/dist/cjs/a/Popover/index.js +1 -1
  57. package/dist/cjs/a/Popover/styles.scss +1 -1
  58. package/dist/cjs/a/ProgressBar/ProgressBar.js +12 -16
  59. package/dist/cjs/a/ProgressBar/index.js +1 -1
  60. package/dist/cjs/a/Quote/Quote.js +8 -8
  61. package/dist/cjs/a/Quote/index.js +1 -1
  62. package/dist/cjs/a/SVG/SVG.js +24 -27
  63. package/dist/cjs/a/SVG/common/UseSVG/UseSVG.js +9 -11
  64. package/dist/cjs/a/SVG/common/UseSVG/index.js +1 -1
  65. package/dist/cjs/a/SVG/common/index.js +1 -1
  66. package/dist/cjs/a/SVG/index.js +1 -1
  67. package/dist/cjs/a/SnapScroller/SnapScroller.js +7 -7
  68. package/dist/cjs/a/SnapScroller/index.js +1 -1
  69. package/dist/cjs/a/SnapScroller/styles.scss +30 -9
  70. package/dist/cjs/a/Spinner/Spinner.js +8 -8
  71. package/dist/cjs/a/Spinner/index.js +1 -1
  72. package/dist/cjs/a/TextSteps/TextSteps.js +70 -0
  73. package/dist/cjs/a/TextSteps/index.js +13 -0
  74. package/dist/cjs/a/TextSteps/styles.scss +29 -0
  75. package/dist/cjs/a/Timestamp/Timestamp.js +13 -13
  76. package/dist/cjs/a/Timestamp/index.js +1 -1
  77. package/dist/cjs/a/Tip/Tip.js +72 -0
  78. package/dist/cjs/a/Tip/index.js +13 -0
  79. package/dist/cjs/a/Tip/styles.scss +22 -0
  80. package/dist/cjs/a/index.js +63 -21
  81. package/dist/cjs/b/Button/Button.js +38 -28
  82. package/dist/cjs/b/Button/common/Group/Group.js +57 -0
  83. package/dist/cjs/b/Button/common/Group/index.js +13 -0
  84. package/dist/cjs/b/Button/common/Group/styles.scss +11 -0
  85. package/dist/cjs/b/Button/common/index.js +12 -0
  86. package/dist/cjs/b/Button/index.js +1 -1
  87. package/dist/cjs/b/Button/styles.scss +38 -8
  88. package/dist/cjs/b/Card/Card.js +74 -0
  89. package/dist/cjs/b/Card/common/Group/Group.js +73 -0
  90. package/dist/cjs/b/Card/common/Group/index.js +13 -0
  91. package/dist/cjs/b/Card/common/Group/styles.scss +38 -0
  92. package/dist/cjs/b/Card/common/Section/Section.js +59 -0
  93. package/dist/cjs/b/Card/common/Section/index.js +13 -0
  94. package/dist/cjs/b/Card/common/index.js +19 -0
  95. package/dist/cjs/b/Card/index.js +13 -0
  96. package/dist/cjs/b/Card/styles.scss +57 -0
  97. package/dist/cjs/b/Logo/Logo.js +14 -14
  98. package/dist/cjs/b/Logo/index.js +1 -1
  99. package/dist/cjs/b/Page/Context.js +1 -1
  100. package/dist/cjs/b/Page/Page.js +31 -24
  101. package/dist/cjs/b/Page/common/PageHelmet/PageHelmet.js +42 -44
  102. package/dist/cjs/b/Page/common/PageHelmet/index.js +1 -1
  103. package/dist/cjs/b/Page/common/Section/Section.js +26 -19
  104. package/dist/cjs/b/Page/common/Section/index.js +1 -1
  105. package/dist/cjs/b/Page/common/index.js +2 -2
  106. package/dist/cjs/b/Page/index.js +3 -3
  107. package/dist/cjs/b/Page/styles.scss +25 -4
  108. package/dist/cjs/b/SocialMediaButton/SocialMediaButton.js +22 -26
  109. package/dist/cjs/b/SocialMediaButton/index.js +1 -1
  110. package/dist/cjs/b/SocialMediaButton/styles.scss +1 -15
  111. package/dist/cjs/b/ThemeSelector/ThemeSelector.js +27 -39
  112. package/dist/cjs/b/ThemeSelector/index.js +1 -1
  113. package/dist/cjs/b/ThemeSelector/styles.scss +2 -7
  114. package/dist/cjs/b/Title/Title.js +10 -8
  115. package/dist/cjs/b/Title/index.js +1 -1
  116. package/dist/cjs/b/index.js +14 -7
  117. package/dist/cjs/c/ContentSlides/ContentSlides.js +34 -31
  118. package/dist/cjs/c/ContentSlides/Context.js +1 -1
  119. package/dist/cjs/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +9 -11
  120. package/dist/cjs/c/ContentSlides/common/HorizontalMenu/index.js +1 -1
  121. package/dist/cjs/c/ContentSlides/common/Navigator/Navigator.js +7 -7
  122. package/dist/cjs/c/ContentSlides/common/Navigator/index.js +1 -1
  123. package/dist/cjs/c/ContentSlides/common/Sidebar/Sidebar.js +5 -7
  124. package/dist/cjs/c/ContentSlides/common/Sidebar/index.js +1 -1
  125. package/dist/cjs/c/ContentSlides/common/Slide/Slide.js +6 -6
  126. package/dist/cjs/c/ContentSlides/common/Slide/index.js +1 -1
  127. package/dist/cjs/c/ContentSlides/common/index.js +4 -4
  128. package/dist/cjs/c/ContentSlides/index.js +3 -3
  129. package/dist/cjs/c/ContentSlides/styles.scss +2 -2
  130. package/dist/cjs/c/Modal/Modal.js +8 -8
  131. package/dist/cjs/c/Modal/common/ModalHeader/ModalHeader.js +6 -6
  132. package/dist/cjs/c/Modal/common/ModalHeader/index.js +1 -1
  133. package/dist/cjs/c/Modal/common/index.js +1 -1
  134. package/dist/cjs/c/Modal/index.js +1 -1
  135. package/dist/cjs/c/Modal/styles.scss +9 -13
  136. package/dist/cjs/c/Shortener/Shortener.js +11 -11
  137. package/dist/cjs/c/Shortener/index.js +1 -1
  138. package/dist/cjs/c/SocialMediaShareButton/SocialMediaShareButton.js +13 -13
  139. package/dist/cjs/c/SocialMediaShareButton/index.js +1 -1
  140. package/dist/cjs/c/index.js +5 -5
  141. package/dist/cjs/f/FormInput/FormInput.js +15 -20
  142. package/dist/cjs/f/FormInput/index.js +1 -1
  143. package/dist/cjs/f/common/Debugger/Debugger.js +9 -9
  144. package/dist/cjs/f/common/Debugger/index.js +1 -1
  145. package/dist/cjs/f/common/Description/Description.js +9 -9
  146. package/dist/cjs/f/common/Description/index.js +1 -1
  147. package/dist/cjs/f/common/Label/Label.js +8 -8
  148. package/dist/cjs/f/common/Label/index.js +1 -1
  149. package/dist/cjs/f/common/Label/styles.scss +1 -1
  150. package/dist/cjs/f/common/index.js +3 -3
  151. package/dist/cjs/f/fields/Checkbox/Checkbox.js +8 -8
  152. package/dist/cjs/f/fields/Checkbox/index.js +1 -1
  153. package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js +30 -25
  154. package/dist/cjs/f/fields/ChoicesInput/common/Choice/Choice.js +8 -8
  155. package/dist/cjs/f/fields/ChoicesInput/common/Choice/index.js +1 -1
  156. package/dist/cjs/f/fields/ChoicesInput/common/index.js +1 -1
  157. package/dist/cjs/f/fields/ChoicesInput/index.js +1 -1
  158. package/dist/cjs/f/fields/ChoicesInput/styles.scss +26 -32
  159. package/dist/cjs/f/fields/QueryChoices/QueryChoices.js +26 -31
  160. package/dist/cjs/f/fields/QueryChoices/index.js +1 -1
  161. package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js +22 -24
  162. package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js +16 -16
  163. package/dist/cjs/f/fields/QueryCombobox/common/Combobox/index.js +1 -1
  164. package/dist/cjs/f/fields/QueryCombobox/common/Menu/Menu.js +15 -18
  165. package/dist/cjs/f/fields/QueryCombobox/common/Menu/index.js +1 -1
  166. package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +25 -29
  167. package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/index.js +1 -1
  168. package/dist/cjs/f/fields/QueryCombobox/common/index.js +3 -3
  169. package/dist/cjs/f/fields/QueryCombobox/index.js +1 -1
  170. package/dist/cjs/f/fields/QueryCombobox/styles.scss +13 -11
  171. package/dist/cjs/f/fields/QuerySelect/QuerySelect.js +12 -12
  172. package/dist/cjs/f/fields/QuerySelect/index.js +1 -1
  173. package/dist/cjs/f/fields/RatingsInput/RatingsInput.js +10 -10
  174. package/dist/cjs/f/fields/RatingsInput/common/Rating/Rating.js +11 -11
  175. package/dist/cjs/f/fields/RatingsInput/common/Rating/index.js +1 -1
  176. package/dist/cjs/f/fields/RatingsInput/common/index.js +1 -1
  177. package/dist/cjs/f/fields/RatingsInput/index.js +1 -1
  178. package/dist/cjs/f/fields/SelectInput/SelectInput.js +13 -13
  179. package/dist/cjs/f/fields/SelectInput/index.js +1 -1
  180. package/dist/cjs/f/fields/SelectInput/styles.scss +33 -22
  181. package/dist/cjs/f/fields/TextInput/TextInput.js +25 -14
  182. package/dist/cjs/f/fields/TextInput/index.js +1 -1
  183. package/dist/cjs/f/fields/TextInput/styles.scss +44 -14
  184. package/dist/cjs/f/fields/TextareaInput/TextareaInput.js +14 -14
  185. package/dist/cjs/f/fields/TextareaInput/index.js +1 -1
  186. package/dist/cjs/f/fields/TextareaInput/styles.scss +7 -5
  187. package/dist/cjs/f/fields/index.js +9 -9
  188. package/dist/cjs/f/index.js +3 -3
  189. package/dist/cjs/form.scss +1 -1
  190. package/dist/cjs/index.js +8 -8
  191. package/dist/cjs/r/SwitchRouteMap/SwitchRouteMap.js +8 -11
  192. package/dist/cjs/r/SwitchRouteMap/index.js +1 -1
  193. package/dist/cjs/r/common/PrivateRoute/PrivateRoute.js +14 -17
  194. package/dist/cjs/r/common/PrivateRoute/index.js +1 -1
  195. package/dist/cjs/r/common/index.js +1 -1
  196. package/dist/cjs/r/index.js +2 -2
  197. package/dist/cjs/test/QueryLoader/QueryLoader.js +6 -4
  198. package/dist/cjs/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js +1 -1
  199. package/dist/cjs/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js +4 -4
  200. package/dist/cjs/test/QueryLoader/common/PreloadedTestData/index.js +1 -1
  201. package/dist/cjs/test/QueryLoader/common/index.js +1 -1
  202. package/dist/cjs/test/QueryLoader/index.js +1 -1
  203. package/dist/cjs/test/index.js +1 -1
  204. package/dist/cjs/utils/hooks/index.js +2 -2
  205. package/dist/cjs/utils/hooks/useDynamicPosition.js +24 -24
  206. package/dist/cjs/utils/hooks/useWindowSize.js +6 -6
  207. package/dist/cjs/utils/index.js +2 -2
  208. package/dist/es/a/AnimatedBlobs/AnimatedBlobs.js +82 -0
  209. package/dist/es/a/AnimatedBlobs/index.js +1 -0
  210. package/dist/es/a/AnimatedBlobs/styles.scss +87 -0
  211. package/dist/es/a/AnimatedGradient/AnimatedGradient.js +52 -0
  212. package/dist/es/a/AnimatedGradient/index.js +1 -0
  213. package/dist/es/a/AnimatedGradient/styles.scss +14 -0
  214. package/dist/es/a/AnimatedGradient/webGIRenderer.js +492 -0
  215. package/dist/es/a/AppContext/useTheme.js +0 -4
  216. package/dist/es/a/BlurOverlay/BlurOverlay.js +51 -0
  217. package/dist/es/a/BlurOverlay/index.js +2 -0
  218. package/dist/es/a/BlurOverlay/styles.scss +31 -0
  219. package/dist/es/a/ContentTree/ContentTree.js +11 -5
  220. package/dist/es/a/ContentTree/common/Tree/Tree.js +12 -5
  221. package/dist/es/a/ContentTree/styles.scss +34 -11
  222. package/dist/es/a/Conversation/Conversation.js +12 -17
  223. package/dist/es/a/Conversation/common/Message/Message.js +15 -12
  224. package/dist/es/a/Conversation/styles.scss +56 -124
  225. package/dist/es/a/DotInfo/DotInfo.js +2 -2
  226. package/dist/es/a/Figure/Figure.js +2 -2
  227. package/dist/es/a/HamburgerButton/HamburgerButton.js +2 -2
  228. package/dist/es/a/IconList/IconList.js +2 -2
  229. package/dist/es/a/Label/Label.js +14 -6
  230. package/dist/es/a/Label/styles.scss +4 -4
  231. package/dist/es/a/LoadingCircle/LoadingCircle.js +2 -2
  232. package/dist/es/a/MetaCard/MetaCard.js +57 -0
  233. package/dist/es/a/MetaCard/index.js +1 -0
  234. package/dist/es/a/MetaCard/styles.scss +45 -0
  235. package/dist/es/a/People/People.js +2 -2
  236. package/dist/es/a/People/common/Person/Person.js +1 -1
  237. package/dist/es/a/Popover/Popover.js +4 -4
  238. package/dist/es/a/Popover/styles.scss +1 -1
  239. package/dist/es/a/ProgressBar/ProgressBar.js +2 -2
  240. package/dist/es/a/Quote/Quote.js +2 -2
  241. package/dist/es/a/SVG/SVG.js +2 -2
  242. package/dist/es/a/SnapScroller/SnapScroller.js +2 -2
  243. package/dist/es/a/SnapScroller/styles.scss +30 -9
  244. package/dist/es/a/Spinner/Spinner.js +2 -2
  245. package/dist/es/a/TextSteps/TextSteps.js +61 -0
  246. package/dist/es/a/TextSteps/index.js +1 -0
  247. package/dist/es/a/TextSteps/styles.scss +29 -0
  248. package/dist/es/a/Timestamp/Timestamp.js +2 -2
  249. package/dist/es/a/Tip/Tip.js +64 -0
  250. package/dist/es/a/Tip/index.js +2 -0
  251. package/dist/es/a/Tip/styles.scss +22 -0
  252. package/dist/es/a/index.js +7 -1
  253. package/dist/es/b/Button/Button.js +21 -7
  254. package/dist/es/b/Button/common/Group/Group.js +49 -0
  255. package/dist/es/b/Button/common/Group/index.js +1 -0
  256. package/dist/es/b/Button/common/Group/styles.scss +11 -0
  257. package/dist/es/b/Button/common/index.js +1 -0
  258. package/dist/es/b/Button/styles.scss +38 -8
  259. package/dist/es/b/Card/Card.js +66 -0
  260. package/dist/es/b/Card/common/Group/Group.js +65 -0
  261. package/dist/es/b/Card/common/Group/index.js +1 -0
  262. package/dist/es/b/Card/common/Group/styles.scss +38 -0
  263. package/dist/es/b/Card/common/Section/Section.js +48 -0
  264. package/dist/es/b/Card/common/Section/index.js +1 -0
  265. package/dist/es/b/Card/common/index.js +2 -0
  266. package/dist/es/b/Card/index.js +1 -0
  267. package/dist/es/b/Card/styles.scss +57 -0
  268. package/dist/es/b/Logo/Logo.js +2 -2
  269. package/dist/es/b/Page/Page.js +16 -5
  270. package/dist/es/b/Page/common/PageHelmet/PageHelmet.js +4 -2
  271. package/dist/es/b/Page/common/Section/Section.js +12 -2
  272. package/dist/es/b/Page/styles.scss +25 -4
  273. package/dist/es/b/SocialMediaButton/SocialMediaButton.js +2 -2
  274. package/dist/es/b/SocialMediaButton/styles.scss +1 -15
  275. package/dist/es/b/ThemeSelector/ThemeSelector.js +19 -32
  276. package/dist/es/b/ThemeSelector/styles.scss +2 -7
  277. package/dist/es/b/Title/Title.js +18 -12
  278. package/dist/es/b/index.js +2 -1
  279. package/dist/es/c/ContentSlides/ContentSlides.js +3 -3
  280. package/dist/es/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +1 -1
  281. package/dist/es/c/ContentSlides/styles.scss +2 -2
  282. package/dist/es/c/Modal/Modal.js +3 -3
  283. package/dist/es/c/Modal/common/ModalHeader/ModalHeader.js +1 -1
  284. package/dist/es/c/Modal/styles.scss +9 -13
  285. package/dist/es/c/Shortener/Shortener.js +2 -2
  286. package/dist/es/c/SocialMediaShareButton/SocialMediaShareButton.js +2 -2
  287. package/dist/es/f/FormInput/FormInput.js +2 -2
  288. package/dist/es/f/common/Debugger/Debugger.js +2 -2
  289. package/dist/es/f/common/Description/Description.js +2 -2
  290. package/dist/es/f/common/Label/Label.js +2 -2
  291. package/dist/es/f/common/Label/styles.scss +1 -1
  292. package/dist/es/f/fields/Checkbox/Checkbox.js +2 -2
  293. package/dist/es/f/fields/ChoicesInput/ChoicesInput.js +21 -12
  294. package/dist/es/f/fields/ChoicesInput/styles.scss +26 -32
  295. package/dist/es/f/fields/QueryCombobox/QueryCombobox.js +3 -3
  296. package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js +3 -3
  297. package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +2 -2
  298. package/dist/es/f/fields/QueryCombobox/styles.scss +13 -11
  299. package/dist/es/f/fields/QuerySelect/QuerySelect.js +1 -1
  300. package/dist/es/f/fields/RatingsInput/RatingsInput.js +2 -2
  301. package/dist/es/f/fields/RatingsInput/common/Rating/Rating.js +3 -3
  302. package/dist/es/f/fields/SelectInput/SelectInput.js +4 -4
  303. package/dist/es/f/fields/SelectInput/styles.scss +33 -22
  304. package/dist/es/f/fields/TextInput/TextInput.js +18 -7
  305. package/dist/es/f/fields/TextInput/styles.scss +44 -14
  306. package/dist/es/f/fields/TextareaInput/TextareaInput.js +8 -8
  307. package/dist/es/f/fields/TextareaInput/styles.scss +7 -5
  308. package/dist/es/form.scss +1 -1
  309. package/package.json +17 -16
  310. package/src/stories/a/BlurOverlay.stories.jsx +39 -0
  311. package/src/stories/a/Conversation.stories.jsx +11 -42
  312. package/src/stories/a/MetaCard.stories.jsx +35 -0
  313. package/src/stories/a/People.stories.jsx +2 -2
  314. package/src/stories/a/Quote.stories.jsx +1 -1
  315. package/src/stories/a/SnapScroller.stories.jsx +2 -2
  316. package/src/stories/a/Spinner.stories.jsx +1 -1
  317. package/src/stories/a/TextSteps.stories.jsx +19 -0
  318. package/src/stories/a/Tip.stories.jsx +28 -0
  319. package/src/stories/b/{Button.stories.jsx → Button/Button.stories.jsx} +18 -0
  320. package/src/stories/b/Button/Group.stories.jsx +35 -0
  321. package/src/stories/b/Card/Card.stories.jsx +59 -0
  322. package/src/stories/b/Card/Group.stories.jsx +59 -0
  323. package/src/stories/b/Page.stories.jsx +19 -3
  324. package/src/stories/b/ThemeSelector.stories.jsx +1 -1
  325. package/src/stories/b/Title.stories.jsx +1 -1
  326. package/src/stories/c/ContentSlides.stories.jsx +1 -1
  327. package/src/stories/colors.js +22 -10
  328. package/src/stories/f/SelectInput.stories.jsx +7 -0
  329. package/src/stories/f/TextInput.stories.jsx +11 -4
  330. package/src/ui/a/AnimatedBlobs/AnimatedBlobs.jsx +102 -0
  331. package/src/ui/a/AnimatedBlobs/index.js +1 -0
  332. package/src/ui/a/AnimatedBlobs/styles.scss +87 -0
  333. package/src/ui/a/AnimatedGradient/AnimatedGradient.jsx +73 -0
  334. package/src/ui/a/AnimatedGradient/index.js +1 -0
  335. package/src/ui/a/AnimatedGradient/styles.scss +14 -0
  336. package/src/ui/a/AnimatedGradient/webGIRenderer.js +541 -0
  337. package/src/ui/a/AppContext/useTheme.js +0 -4
  338. package/src/ui/a/BlurOverlay/BlurOverlay.jsx +75 -0
  339. package/src/ui/a/BlurOverlay/index.js +2 -0
  340. package/src/ui/a/BlurOverlay/styles.scss +31 -0
  341. package/src/ui/a/ContentTree/ContentTree.jsx +10 -6
  342. package/src/ui/a/ContentTree/common/Tree/Tree.jsx +19 -7
  343. package/src/ui/a/ContentTree/styles.scss +34 -11
  344. package/src/ui/a/Conversation/Conversation.jsx +16 -20
  345. package/src/ui/a/Conversation/common/Message/Message.jsx +18 -11
  346. package/src/ui/a/Conversation/styles.scss +56 -124
  347. package/src/ui/a/DotInfo/DotInfo.jsx +2 -2
  348. package/src/ui/a/Figure/Figure.jsx +2 -2
  349. package/src/ui/a/HamburgerButton/HamburgerButton.jsx +2 -2
  350. package/src/ui/a/IconList/IconList.jsx +2 -2
  351. package/src/ui/a/Label/Label.jsx +13 -4
  352. package/src/ui/a/Label/styles.scss +4 -4
  353. package/src/ui/a/LoadingCircle/LoadingCircle.jsx +2 -2
  354. package/src/ui/a/MetaCard/MetaCard.jsx +81 -0
  355. package/src/ui/a/MetaCard/index.js +1 -0
  356. package/src/ui/a/MetaCard/styles.scss +45 -0
  357. package/src/ui/a/People/People.jsx +2 -2
  358. package/src/ui/a/People/common/Person/Person.jsx +1 -1
  359. package/src/ui/a/Popover/Popover.jsx +4 -4
  360. package/src/ui/a/Popover/styles.scss +1 -1
  361. package/src/ui/a/ProgressBar/ProgressBar.jsx +2 -2
  362. package/src/ui/a/Quote/Quote.jsx +2 -2
  363. package/src/ui/a/SVG/SVG.jsx +2 -2
  364. package/src/ui/a/SnapScroller/SnapScroller.jsx +2 -2
  365. package/src/ui/a/SnapScroller/styles.scss +30 -9
  366. package/src/ui/a/Spinner/Spinner.jsx +2 -2
  367. package/src/ui/a/TextSteps/TextSteps.jsx +87 -0
  368. package/src/ui/a/TextSteps/index.js +1 -0
  369. package/src/ui/a/TextSteps/styles.scss +29 -0
  370. package/src/ui/a/Timestamp/Timestamp.jsx +2 -2
  371. package/src/ui/a/Tip/Tip.jsx +88 -0
  372. package/src/ui/a/Tip/index.js +2 -0
  373. package/src/ui/a/Tip/styles.scss +22 -0
  374. package/src/ui/a/index.js +6 -0
  375. package/src/ui/b/Button/Button.jsx +26 -7
  376. package/src/ui/b/Button/common/Group/Group.jsx +71 -0
  377. package/src/ui/b/Button/common/Group/index.js +1 -0
  378. package/src/ui/b/Button/common/Group/styles.scss +11 -0
  379. package/src/ui/b/Button/common/index.js +1 -0
  380. package/src/ui/b/Button/styles.scss +38 -8
  381. package/src/ui/b/Card/Card.jsx +94 -0
  382. package/src/ui/b/Card/common/Group/Group.jsx +91 -0
  383. package/src/ui/b/Card/common/Group/index.js +1 -0
  384. package/src/ui/b/Card/common/Group/styles.scss +38 -0
  385. package/src/ui/b/Card/common/Section/Section.jsx +70 -0
  386. package/src/ui/b/Card/common/Section/index.js +1 -0
  387. package/src/ui/b/Card/common/index.js +2 -0
  388. package/src/ui/b/Card/index.js +1 -0
  389. package/src/ui/b/Card/styles.scss +57 -0
  390. package/src/ui/b/Logo/Logo.jsx +2 -2
  391. package/src/ui/b/Page/Page.jsx +13 -3
  392. package/src/ui/b/Page/common/PageHelmet/PageHelmet.jsx +2 -3
  393. package/src/ui/b/Page/common/Section/Section.jsx +16 -1
  394. package/src/ui/b/Page/styles.scss +25 -4
  395. package/src/ui/b/SocialMediaButton/SocialMediaButton.jsx +2 -2
  396. package/src/ui/b/SocialMediaButton/styles.scss +1 -15
  397. package/src/ui/b/ThemeSelector/ThemeSelector.jsx +12 -30
  398. package/src/ui/b/ThemeSelector/styles.scss +2 -7
  399. package/src/ui/b/Title/Title.jsx +30 -23
  400. package/src/ui/b/index.js +1 -0
  401. package/src/ui/c/ContentSlides/ContentSlides.jsx +3 -3
  402. package/src/ui/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.jsx +1 -1
  403. package/src/ui/c/ContentSlides/styles.scss +2 -2
  404. package/src/ui/c/Modal/Modal.jsx +3 -3
  405. package/src/ui/c/Modal/common/ModalHeader/ModalHeader.jsx +1 -1
  406. package/src/ui/c/Modal/styles.scss +9 -13
  407. package/src/ui/c/Shortener/Shortener.jsx +2 -2
  408. package/src/ui/c/SocialMediaShareButton/SocialMediaShareButton.jsx +2 -2
  409. package/src/ui/f/FormInput/FormInput.jsx +2 -2
  410. package/src/ui/f/common/Debugger/Debugger.jsx +2 -2
  411. package/src/ui/f/common/Description/Description.jsx +2 -2
  412. package/src/ui/f/common/Label/Label.jsx +2 -2
  413. package/src/ui/f/common/Label/styles.scss +1 -1
  414. package/src/ui/f/fields/Checkbox/Checkbox.jsx +2 -2
  415. package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx +16 -9
  416. package/src/ui/f/fields/ChoicesInput/styles.scss +26 -32
  417. package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx +3 -3
  418. package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx +3 -3
  419. package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx +2 -2
  420. package/src/ui/f/fields/QueryCombobox/styles.scss +13 -11
  421. package/src/ui/f/fields/QuerySelect/QuerySelect.jsx +1 -1
  422. package/src/ui/f/fields/RatingsInput/RatingsInput.jsx +2 -2
  423. package/src/ui/f/fields/RatingsInput/common/Rating/Rating.jsx +3 -3
  424. package/src/ui/f/fields/SelectInput/SelectInput.jsx +4 -4
  425. package/src/ui/f/fields/SelectInput/styles.scss +33 -22
  426. package/src/ui/f/fields/TextInput/TextInput.jsx +25 -12
  427. package/src/ui/f/fields/TextInput/styles.scss +44 -14
  428. package/src/ui/f/fields/TextareaInput/TextareaInput.jsx +10 -10
  429. package/src/ui/f/fields/TextareaInput/styles.scss +7 -5
  430. package/src/ui/form.scss +1 -1
  431. package/tests/__snapshots__/Storyshots.test.js.snap +8572 -2878
@@ -5,20 +5,32 @@
5
5
  @use "../../../form.scss";
6
6
 
7
7
 
8
- $default-padding: .75em;
9
- $default-margin: 1em;
8
+ $default-spacing-size: 1em;
9
+ $default-padding: .5em;
10
+ $default-bg-gradient: var(--background-far);
11
+ $default-input-border-radius: var(--theme-default-input-border-radius);
10
12
 
11
13
  .#{bem.$base}.select-input {
12
14
  display: flex;
13
15
  flex-direction: column;
14
16
 
15
17
  .#{bem.$base}.label {
16
- margin-bottom: $default-margin;
18
+ margin-bottom: $default-spacing-size;
17
19
  }
18
20
 
19
- .select-wrapper {
21
+ >.select-wrapper {
22
+ background-color: var(--background-inputs);
23
+ border-radius: $default-input-border-radius;
24
+ padding: $default-padding 0 $default-padding calc($default-padding * 1.5);
20
25
  position: relative;
21
26
 
27
+ &::after {
28
+ border-radius: $default-input-border-radius;
29
+ }
30
+
31
+ &:not(:disabled):hover {
32
+ box-shadow: var(--default-input-box-shadow);
33
+ }
22
34
  >.#{bem.$base}.loading-circle {
23
35
  position: absolute;
24
36
  right: 0;
@@ -26,24 +38,23 @@ $default-margin: 1em;
26
38
  transform: translateY(-50%);
27
39
  }
28
40
 
29
- >.input {
30
- background: var(--soft-y);
31
- border: var(--theme-border-style) var(--hard-y);
32
- color: var(--on-y);
33
- padding: $default-padding;
34
- width: 100%;
35
-
36
- &:not(:disabled):hover {
37
- border: var(--theme-border-style) var(--soft-background4);
38
- }
39
-
40
- &:disabled {
41
- appearance: none;
42
- background-color: var(--hard-y);
43
- }
44
-
45
- &:focus {
46
- background: var(--y);
41
+ select {
42
+ appearance: none;
43
+ background-color: transparent;
44
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
45
+ background-position: calc(100% - $default-spacing-size);
46
+ background-repeat: no-repeat;
47
+ background-size: $default-spacing-size;
48
+ padding-right: $default-spacing-size;
49
+
50
+ &.input {
51
+ color: var(--paragraph);
52
+ width: 100%;
53
+
54
+ &:disabled {
55
+ appearance: none;
56
+ opacity: 35%;
57
+ }
47
58
  }
48
59
  }
49
60
  }
@@ -11,18 +11,18 @@ var _formik = require("formik");
11
11
  var _common = require("../../common");
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
  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); }
14
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /* @pareto-engineering/generator-front 1.0.12 */
16
16
  // Local Definitions
17
17
 
18
- var baseClassName = _exports.default.base;
19
- var componentClassName = 'text-input';
18
+ const baseClassName = _exports.default.base;
19
+ const componentClassName = 'text-input';
20
20
 
21
21
  /**
22
22
  * This is the component description.
23
23
  */
24
- var TextInput = _ref => {
25
- var {
24
+ const TextInput = _ref => {
25
+ let {
26
26
  id,
27
27
  className: userClassName,
28
28
  style,
@@ -37,19 +37,23 @@ var TextInput = _ref => {
37
37
  disabled,
38
38
  placeholder,
39
39
  optional,
40
- autoComplete
40
+ autoComplete,
41
+ symbol
41
42
  // ...otherProps
42
43
  } = _ref;
43
- (0, React.useLayoutEffect)(() => {
44
+ (0, React.useInsertionEffect)(() => {
44
45
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
45
46
  }, []);
46
- var [field] = (0, _formik.useField)({
47
+ const [field] = (0, _formik.useField)({
47
48
  name,
48
49
  validate
49
50
  });
51
+ const symbolStyle = symbol ? {
52
+ '--symbol': symbol
53
+ } : {};
50
54
  return /*#__PURE__*/React.createElement("div", {
51
55
  id: id,
52
- className: [baseClassName, componentClassName, userClassName, "y-".concat(color)].filter(e => e).join(' '),
56
+ className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
53
57
  style: style
54
58
  // {...otherProps}
55
59
  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
@@ -57,14 +61,17 @@ var TextInput = _ref => {
57
61
  name: name,
58
62
  color: labelColor,
59
63
  optional: optional
60
- }, label), /*#__PURE__*/React.createElement("input", _extends({
64
+ }, label), /*#__PURE__*/React.createElement("div", {
65
+ className: `input-wrapper with-faded-border ${symbol ? 'has-symbol' : ''}`,
66
+ style: symbolStyle
67
+ }, /*#__PURE__*/React.createElement("input", _extends({
61
68
  id: name,
62
69
  className: "input",
63
70
  type: type,
64
71
  disabled: disabled,
65
72
  placeholder: placeholder,
66
73
  autoComplete: autoComplete
67
- }, field)), /*#__PURE__*/React.createElement(_common.FormDescription, {
74
+ }, field))), /*#__PURE__*/React.createElement(_common.FormDescription, {
68
75
  className: "v50 mt-v s-1",
69
76
  description: description,
70
77
  name: name
@@ -131,11 +138,15 @@ TextInput.propTypes = {
131
138
  * The autoComplete value that the browser should watch for the input
132
139
  * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
133
140
  */
134
- autoComplete: _propTypes.default.string
141
+ autoComplete: _propTypes.default.string,
142
+ /**
143
+ * A symbol to be set inside the input field
144
+ */
145
+ symbol: _propTypes.default.string
135
146
  };
136
147
  TextInput.defaultProps = {
137
148
  type: 'text',
138
- color: 'background2',
149
+ color: 'main',
139
150
  disabled: false
140
151
  };
141
152
  var _default = /*#__PURE__*/(0, React.memo)(TextInput);
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  Object.defineProperty(exports, "TextInput", {
7
7
  enumerable: true,
8
- get: function get() {
8
+ get: function () {
9
9
  return _TextInput.default;
10
10
  }
11
11
  });
@@ -4,31 +4,61 @@
4
4
  @use "../../../form.scss";
5
5
 
6
6
  $default-padding: .75em .75em .55em;
7
+ $default-symbol-left: 1em;
8
+ $default-padding-with-symbol:
9
+ .75em
10
+ calc($default-symbol-left - 1em)
11
+ .75em
12
+ calc($default-symbol-left + 1em);
13
+ $default-input-border-radius: var(--theme-default-input-border-radius);
14
+
7
15
 
8
16
  .#{bem.$base}.text-input {
9
17
  display: flex;
10
18
  flex-direction: column;
11
19
 
12
- .input {
13
- background: var(--soft-y);
14
- border: var(--theme-border-style) var(--hard-y);
15
- color: var(--on-y);
16
- padding: $default-padding;
20
+ >.input-wrapper {
21
+ position: relative;
17
22
 
18
- &::placeholder {
19
- color: var(--metadata);
23
+ &::after {
24
+ border-radius: $default-input-border-radius;
20
25
  }
21
26
 
22
- &:not(:disabled):hover {
23
- border: var(--theme-border-style) var(--soft-background4);
24
- }
27
+ &.has-symbol {
28
+ &::before {
29
+ color: var(--interactive);
30
+ content: var(--symbol);
31
+ left: $default-symbol-left;
32
+ position: absolute;
33
+ top: 50%;
34
+ transform: translate(-50%, -50%);
35
+ }
25
36
 
26
- &:disabled {
27
- background-color: var(--hard-y);
37
+ input {
38
+ padding: $default-padding-with-symbol;
39
+ }
28
40
  }
29
41
 
30
- &:focus {
31
- background: var(--soft-background4);
42
+ > input {
43
+ background-color: var(--background-inputs);
44
+ border-radius: $default-input-border-radius;
45
+ color: var(--paragraph);
46
+ height: 100%;
47
+ padding: $default-padding;
48
+ width: 100%;
49
+
50
+ &::placeholder {
51
+ color: var(--metadata);
52
+ }
53
+
54
+ &:disabled {
55
+ background-color: var(--hard-x);
56
+ }
57
+
58
+ &:not(:disabled):hover {
59
+ border-radius: $default-input-border-radius;
60
+ box-shadow: var(--theme-default-input-box-shadow);
61
+ }
32
62
  }
33
63
  }
34
64
  }
@@ -11,16 +11,16 @@ var _formik = require("formik");
11
11
  var _common = require("../../common");
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
  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); }
14
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
16
- var baseClassName = _exports.default.base;
17
- var componentClassName = 'text-area-input';
14
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /* @pareto-engineering/generator-front 1.0.12 */ // Local Definitions
16
+ const baseClassName = _exports.default.base;
17
+ const componentClassName = 'text-area-input';
18
18
 
19
19
  /**
20
20
  * This is the component description.
21
21
  */
22
- var TextareaInput = _ref => {
23
- var {
22
+ const TextareaInput = _ref => {
23
+ let {
24
24
  id,
25
25
  className: userClassName,
26
26
  style,
@@ -31,7 +31,7 @@ var TextareaInput = _ref => {
31
31
  textAreaId,
32
32
  rows,
33
33
  optional,
34
- textAreaColor,
34
+ backgroundColor,
35
35
  labelColor,
36
36
  description,
37
37
  disabled,
@@ -40,16 +40,16 @@ var TextareaInput = _ref => {
40
40
  resize
41
41
  // ...otherProps
42
42
  } = _ref;
43
- (0, React.useLayoutEffect)(() => {
43
+ (0, React.useInsertionEffect)(() => {
44
44
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
45
45
  }, []);
46
- var [field] = (0, _formik.useField)({
46
+ const [field] = (0, _formik.useField)({
47
47
  name,
48
48
  validate
49
49
  });
50
50
  return /*#__PURE__*/React.createElement("div", {
51
51
  id: id,
52
- className: [baseClassName, componentClassName, userClassName, "y-".concat(textAreaColor)].filter(e => e).join(' '),
52
+ className: [baseClassName, componentClassName, userClassName, `y-${backgroundColor}`].filter(e => e).join(' '),
53
53
  style: style
54
54
  // {...otherProps}
55
55
  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
@@ -112,9 +112,9 @@ TextareaInput.propTypes = {
112
112
  */
113
113
  rows: _propTypes.default.number,
114
114
  /**
115
- * Text area base color
115
+ * Text area background color
116
116
  */
117
- textAreaColor: _propTypes.default.string,
117
+ backgroundColor: _propTypes.default.string,
118
118
  /**
119
119
  * Label base color
120
120
  */
@@ -146,8 +146,8 @@ TextareaInput.propTypes = {
146
146
  optional: _propTypes.default.bool
147
147
  };
148
148
  TextareaInput.defaultProps = {
149
- rows: 3,
150
- textAreaColor: 'background2',
149
+ rows: 10,
150
+ backgroundColor: 'background-inputs',
151
151
  disabled: false,
152
152
  resize: 'vertical'
153
153
  };
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  Object.defineProperty(exports, "TextareaInput", {
7
7
  enumerable: true,
8
- get: function get() {
8
+ get: function () {
9
9
  return _TextareaInput.default;
10
10
  }
11
11
  });
@@ -2,15 +2,17 @@
2
2
 
3
3
  @use "@pareto-engineering/bem";
4
4
 
5
- $default-padding: .5em;
5
+ $default-padding: var(--theme-default-padding);
6
+ $active-border-color: var(--on-y);
6
7
 
7
8
  .#{bem.$base}.text-area-input {
8
9
  display: flex;
9
10
  flex-direction: column;
10
11
 
11
12
  .textarea {
12
- background: var(--soft-y);
13
- border: var(--theme-border-style) var(--hard-y);
13
+ background: var(--y);
14
+ border: var(--theme-default-border-style) var(--hard-y);
15
+ border-radius: calc(var(--theme-default-border-radius) / 2);
14
16
  color: var(--on-y);
15
17
  padding: $default-padding;
16
18
 
@@ -19,7 +21,7 @@ $default-padding: .5em;
19
21
  }
20
22
 
21
23
  &:not(:disabled):hover {
22
- border: var(--theme-border-style) var(--soft-background4);
24
+ border: var(--theme-default-border-style) $active-border-color;
23
25
  }
24
26
 
25
27
  &:disabled {
@@ -27,7 +29,7 @@ $default-padding: .5em;
27
29
  }
28
30
 
29
31
  &:focus {
30
- background: var(--soft-background4);
32
+ border: var(--theme-default-border-style) $active-border-color;
31
33
  }
32
34
  }
33
35
  }
@@ -5,55 +5,55 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  Object.defineProperty(exports, "Checkbox", {
7
7
  enumerable: true,
8
- get: function get() {
8
+ get: function () {
9
9
  return _Checkbox.Checkbox;
10
10
  }
11
11
  });
12
12
  Object.defineProperty(exports, "ChoicesInput", {
13
13
  enumerable: true,
14
- get: function get() {
14
+ get: function () {
15
15
  return _ChoicesInput.ChoicesInput;
16
16
  }
17
17
  });
18
18
  Object.defineProperty(exports, "QueryChoices", {
19
19
  enumerable: true,
20
- get: function get() {
20
+ get: function () {
21
21
  return _QueryChoices.QueryChoices;
22
22
  }
23
23
  });
24
24
  Object.defineProperty(exports, "QueryCombobox", {
25
25
  enumerable: true,
26
- get: function get() {
26
+ get: function () {
27
27
  return _QueryCombobox.QueryCombobox;
28
28
  }
29
29
  });
30
30
  Object.defineProperty(exports, "QuerySelect", {
31
31
  enumerable: true,
32
- get: function get() {
32
+ get: function () {
33
33
  return _QuerySelect.QuerySelect;
34
34
  }
35
35
  });
36
36
  Object.defineProperty(exports, "RatingsInput", {
37
37
  enumerable: true,
38
- get: function get() {
38
+ get: function () {
39
39
  return _RatingsInput.RatingsInput;
40
40
  }
41
41
  });
42
42
  Object.defineProperty(exports, "SelectInput", {
43
43
  enumerable: true,
44
- get: function get() {
44
+ get: function () {
45
45
  return _SelectInput.SelectInput;
46
46
  }
47
47
  });
48
48
  Object.defineProperty(exports, "TextInput", {
49
49
  enumerable: true,
50
- get: function get() {
50
+ get: function () {
51
51
  return _TextInput.TextInput;
52
52
  }
53
53
  });
54
54
  Object.defineProperty(exports, "TextareaInput", {
55
55
  enumerable: true,
56
- get: function get() {
56
+ get: function () {
57
57
  return _TextareaInput.TextareaInput;
58
58
  }
59
59
  });
@@ -8,7 +8,7 @@ var _exportNames = {
8
8
  };
9
9
  Object.defineProperty(exports, "FormInput", {
10
10
  enumerable: true,
11
- get: function get() {
11
+ get: function () {
12
12
  return _FormInput.FormInput;
13
13
  }
14
14
  });
@@ -19,7 +19,7 @@ Object.keys(_common).forEach(function (key) {
19
19
  if (key in exports && exports[key] === _common[key]) return;
20
20
  Object.defineProperty(exports, key, {
21
21
  enumerable: true,
22
- get: function get() {
22
+ get: function () {
23
23
  return _common[key];
24
24
  }
25
25
  });
@@ -31,7 +31,7 @@ Object.keys(_fields).forEach(function (key) {
31
31
  if (key in exports && exports[key] === _fields[key]) return;
32
32
  Object.defineProperty(exports, key, {
33
33
  enumerable: true,
34
- get: function get() {
34
+ get: function () {
35
35
  return _fields[key];
36
36
  }
37
37
  });
@@ -1,6 +1,6 @@
1
1
  @use "form-reset.scss";
2
2
 
3
- $form-input-border-bottom: 1px solid var(--hard-background1);
3
+ $form-input-border-bottom: 1px solid var(--hard-background-far);
4
4
  $form-input-on-focus-border-bottom: 1px solid var(--soft-main1);
5
5
  $form-input-on-error-border-bottom: 1px solid var(--error);
6
6
  $label-input-heigth-width: 100%;
package/dist/cjs/index.js CHANGED
@@ -9,7 +9,7 @@ Object.keys(_r).forEach(function (key) {
9
9
  if (key in exports && exports[key] === _r[key]) return;
10
10
  Object.defineProperty(exports, key, {
11
11
  enumerable: true,
12
- get: function get() {
12
+ get: function () {
13
13
  return _r[key];
14
14
  }
15
15
  });
@@ -20,7 +20,7 @@ Object.keys(_a).forEach(function (key) {
20
20
  if (key in exports && exports[key] === _a[key]) return;
21
21
  Object.defineProperty(exports, key, {
22
22
  enumerable: true,
23
- get: function get() {
23
+ get: function () {
24
24
  return _a[key];
25
25
  }
26
26
  });
@@ -31,7 +31,7 @@ Object.keys(_b).forEach(function (key) {
31
31
  if (key in exports && exports[key] === _b[key]) return;
32
32
  Object.defineProperty(exports, key, {
33
33
  enumerable: true,
34
- get: function get() {
34
+ get: function () {
35
35
  return _b[key];
36
36
  }
37
37
  });
@@ -42,7 +42,7 @@ Object.keys(_c).forEach(function (key) {
42
42
  if (key in exports && exports[key] === _c[key]) return;
43
43
  Object.defineProperty(exports, key, {
44
44
  enumerable: true,
45
- get: function get() {
45
+ get: function () {
46
46
  return _c[key];
47
47
  }
48
48
  });
@@ -53,7 +53,7 @@ Object.keys(_d).forEach(function (key) {
53
53
  if (key in exports && exports[key] === _d[key]) return;
54
54
  Object.defineProperty(exports, key, {
55
55
  enumerable: true,
56
- get: function get() {
56
+ get: function () {
57
57
  return _d[key];
58
58
  }
59
59
  });
@@ -64,7 +64,7 @@ Object.keys(_f).forEach(function (key) {
64
64
  if (key in exports && exports[key] === _f[key]) return;
65
65
  Object.defineProperty(exports, key, {
66
66
  enumerable: true,
67
- get: function get() {
67
+ get: function () {
68
68
  return _f[key];
69
69
  }
70
70
  });
@@ -75,7 +75,7 @@ Object.keys(_utils).forEach(function (key) {
75
75
  if (key in exports && exports[key] === _utils[key]) return;
76
76
  Object.defineProperty(exports, key, {
77
77
  enumerable: true,
78
- get: function get() {
78
+ get: function () {
79
79
  return _utils[key];
80
80
  }
81
81
  });
@@ -86,7 +86,7 @@ Object.keys(_test).forEach(function (key) {
86
86
  if (key in exports && exports[key] === _test[key]) return;
87
87
  Object.defineProperty(exports, key, {
88
88
  enumerable: true,
89
- get: function get() {
89
+ get: function () {
90
90
  return _test[key];
91
91
  }
92
92
  });
@@ -8,30 +8,27 @@ var React = _interopRequireWildcard(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _reactRouterDom = require("react-router-dom");
10
10
  var _common = require("../common");
11
- var _excluded = ["isPrivate"];
12
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
12
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
14
13
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
15
- 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); }
16
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
17
- 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; }
14
+ 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); } /* @pareto-engineering/generator-front 0.2.2 */
18
15
  /* eslint-disable react/no-children-prop */
19
16
  /**
20
17
  * **Dependencies : `react-router-dom.Router`,**
21
18
  * **`SessionContextProvider` in case you're using PrivateRoutes. **
22
19
  * `SwitchRouteMap` generates a routing `Switch` from an array of route Props
23
20
  */
24
- var SwitchRouteMap = _ref => {
25
- var {
21
+ const SwitchRouteMap = _ref => {
22
+ let {
26
23
  routes,
27
24
  NotFound
28
25
  } = _ref;
29
26
  return /*#__PURE__*/React.createElement(_reactRouterDom.Switch, {
30
27
  children: [...routes.map(_ref2 => {
31
- var {
32
- isPrivate
33
- } = _ref2,
34
- routeProps = _objectWithoutProperties(_ref2, _excluded);
28
+ let {
29
+ isPrivate,
30
+ ...routeProps
31
+ } = _ref2;
35
32
  return isPrivate ? /*#__PURE__*/React.createElement(_common.PrivateRoute, _extends({
36
33
  key: routeProps.path
37
34
  }, routeProps)) : /*#__PURE__*/React.createElement(_reactRouterDom.Route, _extends({
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  Object.defineProperty(exports, "SwitchRouteMap", {
7
7
  enumerable: true,
8
- get: function get() {
8
+ get: function () {
9
9
  return _SwitchRouteMap.default;
10
10
  }
11
11
  });