@salutejs/plasma-new-hope 0.85.0-canary.1213.9224571157.0 → 0.86.0-canary.1220.9257117448.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (387) hide show
  1. package/cjs/components/Button/Button.css +6 -9
  2. package/cjs/components/Button/Button.js +2 -16
  3. package/cjs/components/Button/Button.js.map +1 -1
  4. package/cjs/components/Button/Button.styles.js +10 -31
  5. package/cjs/components/Button/Button.styles.js.map +1 -1
  6. package/cjs/components/Button/Button.styles_uqvh6u.css +5 -0
  7. package/cjs/components/Button/Button.tokens.js +0 -5
  8. package/cjs/components/Button/Button.tokens.js.map +1 -1
  9. package/cjs/components/Button/variations/_stretching/base.js +1 -1
  10. package/cjs/components/Button/variations/_stretching/base.js.map +1 -1
  11. package/{es/components/Button/variations/_stretching/base_hy8dc.css → cjs/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
  12. package/cjs/components/ButtonGroup/ButtonGroup.css +2 -2
  13. package/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  14. package/cjs/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  15. package/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -1
  16. package/cjs/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  17. package/{es/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → cjs/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
  18. package/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  19. package/cjs/components/ButtonGroup/variations/_view/base.js.map +1 -1
  20. package/cjs/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
  21. package/cjs/components/Drawer/Drawer.css +6 -9
  22. package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  23. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  24. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  25. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  26. package/cjs/components/IconButton/IconButton.css +7 -10
  27. package/cjs/components/IconButton/IconButton.styles.js +1 -1
  28. package/cjs/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  29. package/cjs/components/Notification/Notification.css +6 -9
  30. package/cjs/components/Notification/NotificationsProvider.css +6 -9
  31. package/cjs/components/Pagination/Pagination.css +8 -11
  32. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  33. package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  34. package/cjs/components/Range/Range.css +63 -0
  35. package/cjs/components/Range/Range.js +146 -0
  36. package/cjs/components/Range/Range.js.map +1 -0
  37. package/cjs/components/Range/Range.styles.js +63 -0
  38. package/cjs/components/Range/Range.styles.js.map +1 -0
  39. package/cjs/components/Range/Range.styles_mc4w65.css +8 -0
  40. package/cjs/components/Range/Range.tokens.js +106 -0
  41. package/cjs/components/Range/Range.tokens.js.map +1 -0
  42. package/cjs/components/Range/utils/index.js +24 -0
  43. package/cjs/components/Range/utils/index.js.map +1 -0
  44. package/cjs/components/Range/variations/_disabled/base.js +9 -0
  45. package/cjs/components/Range/variations/_disabled/base.js.map +1 -0
  46. package/cjs/components/Range/variations/_disabled/base_1ufizo4.css +1 -0
  47. package/cjs/components/Range/variations/_readonly/base.js +9 -0
  48. package/cjs/components/Range/variations/_readonly/base.js.map +1 -0
  49. package/cjs/components/Range/variations/_readonly/base_tzdxy8.css +1 -0
  50. package/cjs/components/Range/variations/_size/base.js +9 -0
  51. package/cjs/components/Range/variations/_size/base.js.map +1 -0
  52. package/cjs/components/Range/variations/_size/base_16xiubi.css +1 -0
  53. package/cjs/components/Range/variations/_view/base.js +9 -0
  54. package/cjs/components/Range/variations/_view/base.js.map +1 -0
  55. package/cjs/components/Range/variations/_view/base_5iz3nr.css +1 -0
  56. package/cjs/components/Select/Select.css +6 -9
  57. package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  58. package/cjs/components/Slider/Slider.css +11 -9
  59. package/cjs/components/Slider/components/Double/Double.css +11 -9
  60. package/cjs/components/Tabs/ui/TabItem/TabItem.js +7 -6
  61. package/cjs/components/Tabs/ui/TabItem/TabItem.js.map +1 -1
  62. package/cjs/components/Tabs/ui/Tabs/Tabs.css +4 -4
  63. package/cjs/components/Tabs/ui/Tabs/Tabs.js +3 -2
  64. package/cjs/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
  65. package/cjs/components/Tabs/ui/Tabs/Tabs.styles.js +1 -1
  66. package/cjs/components/Tabs/ui/Tabs/Tabs.styles.js.map +1 -1
  67. package/cjs/components/Tabs/ui/Tabs/{Tabs.styles_1mml8ws.css → Tabs.styles_194je23.css} +1 -1
  68. package/cjs/components/TextField/TextField.js +10 -10
  69. package/cjs/components/TextField/TextField.js.map +1 -1
  70. package/cjs/components/TextField/TextField.styles.js +13 -1
  71. package/cjs/components/TextField/TextField.styles.js.map +1 -1
  72. package/cjs/components/TextField/{TextField.styles_1b1mddp.css → TextField.styles_aqmut.css} +2 -0
  73. package/cjs/components/TextField/TextField.tokens.js +5 -0
  74. package/cjs/components/TextField/TextField.tokens.js.map +1 -1
  75. package/cjs/components/TextField/variations/_label-placement/inner.js +1 -1
  76. package/cjs/components/TextField/variations/_label-placement/inner.js.map +1 -1
  77. package/cjs/components/TextField/variations/_label-placement/inner_7c08qb.css +1 -0
  78. package/cjs/components/TextField/variations/_size/base.js +1 -1
  79. package/cjs/components/TextField/variations/_size/base.js.map +1 -1
  80. package/cjs/components/TextField/variations/_size/{base_1khzr9t.css → base_ntoddv.css} +1 -1
  81. package/cjs/components/TextField/variations/_view/base.js +1 -1
  82. package/cjs/components/TextField/variations/_view/base.js.map +1 -1
  83. package/cjs/components/TextField/variations/_view/{base_1qd77x6.css → base_19gxyva.css} +1 -1
  84. package/cjs/components/Toast/Toast.css +6 -9
  85. package/cjs/components/Toast/ToastController.css +6 -9
  86. package/cjs/index.css +41 -25
  87. package/cjs/index.js +5 -0
  88. package/cjs/index.js.map +1 -1
  89. package/es/components/Button/Button.css +6 -9
  90. package/es/components/Button/Button.js +3 -17
  91. package/es/components/Button/Button.js.map +1 -1
  92. package/es/components/Button/Button.styles.js +11 -29
  93. package/es/components/Button/Button.styles.js.map +1 -1
  94. package/es/components/Button/Button.styles_uqvh6u.css +5 -0
  95. package/es/components/Button/Button.tokens.js +0 -5
  96. package/es/components/Button/Button.tokens.js.map +1 -1
  97. package/es/components/Button/variations/_stretching/base.js +1 -1
  98. package/es/components/Button/variations/_stretching/base.js.map +1 -1
  99. package/{cjs/components/Button/variations/_stretching/base_hy8dc.css → es/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
  100. package/es/components/ButtonGroup/ButtonGroup.css +2 -2
  101. package/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  102. package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  103. package/es/components/ButtonGroup/variations/_orientation/base.js +1 -1
  104. package/es/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  105. package/{cjs/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → es/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
  106. package/es/components/ButtonGroup/variations/_view/base.js +1 -1
  107. package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
  108. package/es/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
  109. package/es/components/Drawer/Drawer.css +6 -9
  110. package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  111. package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  112. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  113. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  114. package/es/components/IconButton/IconButton.css +7 -10
  115. package/es/components/IconButton/IconButton.styles.js +1 -1
  116. package/es/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  117. package/es/components/Notification/Notification.css +6 -9
  118. package/es/components/Notification/NotificationsProvider.css +6 -9
  119. package/es/components/Pagination/Pagination.css +8 -11
  120. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  121. package/es/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  122. package/es/components/Range/Range.css +63 -0
  123. package/es/components/Range/Range.js +141 -0
  124. package/es/components/Range/Range.js.map +1 -0
  125. package/es/components/Range/Range.styles.js +52 -0
  126. package/es/components/Range/Range.styles.js.map +1 -0
  127. package/es/components/Range/Range.styles_mc4w65.css +8 -0
  128. package/es/components/Range/Range.tokens.js +101 -0
  129. package/es/components/Range/Range.tokens.js.map +1 -0
  130. package/es/components/Range/utils/index.js +19 -0
  131. package/es/components/Range/utils/index.js.map +1 -0
  132. package/es/components/Range/variations/_disabled/base.js +5 -0
  133. package/es/components/Range/variations/_disabled/base.js.map +1 -0
  134. package/es/components/Range/variations/_disabled/base_1ufizo4.css +1 -0
  135. package/es/components/Range/variations/_readonly/base.js +5 -0
  136. package/es/components/Range/variations/_readonly/base.js.map +1 -0
  137. package/es/components/Range/variations/_readonly/base_tzdxy8.css +1 -0
  138. package/es/components/Range/variations/_size/base.js +5 -0
  139. package/es/components/Range/variations/_size/base.js.map +1 -0
  140. package/es/components/Range/variations/_size/base_16xiubi.css +1 -0
  141. package/es/components/Range/variations/_view/base.js +5 -0
  142. package/es/components/Range/variations/_view/base.js.map +1 -0
  143. package/es/components/Range/variations/_view/base_5iz3nr.css +1 -0
  144. package/es/components/Select/Select.css +6 -9
  145. package/es/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  146. package/es/components/Slider/Slider.css +11 -9
  147. package/es/components/Slider/components/Double/Double.css +11 -9
  148. package/es/components/Tabs/ui/TabItem/TabItem.js +7 -6
  149. package/es/components/Tabs/ui/TabItem/TabItem.js.map +1 -1
  150. package/es/components/Tabs/ui/Tabs/Tabs.css +4 -4
  151. package/es/components/Tabs/ui/Tabs/Tabs.js +3 -2
  152. package/es/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
  153. package/es/components/Tabs/ui/Tabs/Tabs.styles.js +1 -1
  154. package/es/components/Tabs/ui/Tabs/Tabs.styles.js.map +1 -1
  155. package/es/components/Tabs/ui/Tabs/{Tabs.styles_1mml8ws.css → Tabs.styles_194je23.css} +1 -1
  156. package/es/components/TextField/TextField.js +11 -11
  157. package/es/components/TextField/TextField.js.map +1 -1
  158. package/es/components/TextField/TextField.styles.js +12 -2
  159. package/es/components/TextField/TextField.styles.js.map +1 -1
  160. package/es/components/TextField/{TextField.styles_1b1mddp.css → TextField.styles_aqmut.css} +2 -0
  161. package/es/components/TextField/TextField.tokens.js +5 -0
  162. package/es/components/TextField/TextField.tokens.js.map +1 -1
  163. package/es/components/TextField/variations/_label-placement/inner.js +1 -1
  164. package/es/components/TextField/variations/_label-placement/inner.js.map +1 -1
  165. package/es/components/TextField/variations/_label-placement/inner_7c08qb.css +1 -0
  166. package/es/components/TextField/variations/_size/base.js +1 -1
  167. package/es/components/TextField/variations/_size/base.js.map +1 -1
  168. package/es/components/TextField/variations/_size/{base_1khzr9t.css → base_ntoddv.css} +1 -1
  169. package/es/components/TextField/variations/_view/base.js +1 -1
  170. package/es/components/TextField/variations/_view/base.js.map +1 -1
  171. package/es/components/TextField/variations/_view/{base_1qd77x6.css → base_19gxyva.css} +1 -1
  172. package/es/components/Toast/Toast.css +6 -9
  173. package/es/components/Toast/ToastController.css +6 -9
  174. package/es/index.css +41 -25
  175. package/es/index.js +2 -0
  176. package/es/index.js.map +1 -1
  177. package/package.json +2 -2
  178. package/styled-components/cjs/components/Button/Button.js +2 -16
  179. package/styled-components/cjs/components/Button/Button.styles.js +12 -20
  180. package/styled-components/cjs/components/Button/Button.template-doc.mdx +0 -47
  181. package/styled-components/cjs/components/Button/Button.tokens.js +0 -5
  182. package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
  183. package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  184. package/styled-components/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -2
  185. package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  186. package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  187. package/styled-components/cjs/components/Range/Range.js +148 -0
  188. package/styled-components/cjs/components/Range/Range.styles.js +39 -0
  189. package/styled-components/cjs/components/Range/Range.template-doc.mdx +323 -0
  190. package/styled-components/cjs/components/Range/Range.tokens.js +104 -0
  191. package/styled-components/cjs/components/Range/Range.types.js +5 -0
  192. package/styled-components/cjs/components/Range/index.js +25 -0
  193. package/styled-components/cjs/components/Range/utils/index.js +22 -0
  194. package/styled-components/cjs/components/Range/variations/_disabled/base.js +9 -0
  195. package/styled-components/cjs/components/Range/variations/_disabled/tokens.json +4 -0
  196. package/styled-components/cjs/components/Range/variations/_readonly/base.js +10 -0
  197. package/styled-components/cjs/components/Range/variations/_readonly/tokens.json +4 -0
  198. package/styled-components/cjs/components/Range/variations/_size/base.js +10 -0
  199. package/styled-components/cjs/components/Range/variations/_size/tokens.json +26 -0
  200. package/styled-components/cjs/components/Range/variations/_view/base.js +10 -0
  201. package/styled-components/cjs/components/Range/variations/_view/tokens.json +6 -0
  202. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +5 -3
  203. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +36 -32
  204. package/styled-components/cjs/components/Tabs/ui/TabItem/TabItem.js +7 -6
  205. package/styled-components/cjs/components/Tabs/ui/Tabs/Tabs.js +3 -2
  206. package/styled-components/cjs/components/Tabs/ui/Tabs/Tabs.styles.js +1 -1
  207. package/styled-components/cjs/components/TextField/TextField.js +10 -10
  208. package/styled-components/cjs/components/TextField/TextField.styles.js +7 -1
  209. package/styled-components/cjs/components/TextField/TextField.tokens.js +5 -0
  210. package/styled-components/cjs/components/TextField/variations/_label-placement/inner.js +1 -1
  211. package/styled-components/cjs/components/TextField/variations/_size/base.js +1 -1
  212. package/styled-components/cjs/components/TextField/variations/_view/base.js +1 -1
  213. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  214. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  215. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  216. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  217. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.config.js +31 -0
  218. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.js +11 -0
  219. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.stories.tsx +312 -0
  220. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +8 -8
  221. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -0
  222. package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
  223. package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  224. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  225. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  226. package/styled-components/cjs/examples/plasma_web/components/Range/Range.config.js +31 -0
  227. package/styled-components/cjs/examples/plasma_web/components/Range/Range.js +11 -0
  228. package/styled-components/cjs/examples/plasma_web/components/Range/Range.stories.tsx +312 -0
  229. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
  230. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  231. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  232. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  233. package/styled-components/cjs/index.js +11 -0
  234. package/styled-components/es/components/Button/Button.js +3 -17
  235. package/styled-components/es/components/Button/Button.styles.js +11 -19
  236. package/styled-components/es/components/Button/Button.template-doc.mdx +0 -47
  237. package/styled-components/es/components/Button/Button.tokens.js +0 -5
  238. package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
  239. package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  240. package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js +2 -3
  241. package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
  242. package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  243. package/styled-components/es/components/Range/Range.js +139 -0
  244. package/styled-components/es/components/Range/Range.styles.js +31 -0
  245. package/styled-components/es/components/Range/Range.template-doc.mdx +323 -0
  246. package/styled-components/es/components/Range/Range.tokens.js +98 -0
  247. package/styled-components/es/components/Range/Range.types.js +1 -0
  248. package/styled-components/es/components/Range/index.js +2 -0
  249. package/styled-components/es/components/Range/utils/index.js +16 -0
  250. package/styled-components/es/components/Range/variations/_disabled/base.js +3 -0
  251. package/styled-components/es/components/Range/variations/_disabled/tokens.json +4 -0
  252. package/styled-components/es/components/Range/variations/_readonly/base.js +4 -0
  253. package/styled-components/es/components/Range/variations/_readonly/tokens.json +4 -0
  254. package/styled-components/es/components/Range/variations/_size/base.js +4 -0
  255. package/styled-components/es/components/Range/variations/_size/tokens.json +26 -0
  256. package/styled-components/es/components/Range/variations/_view/base.js +4 -0
  257. package/styled-components/es/components/Range/variations/_view/tokens.json +6 -0
  258. package/styled-components/es/components/Segment/Segment.template-doc.mdx +5 -3
  259. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +36 -32
  260. package/styled-components/es/components/Tabs/ui/TabItem/TabItem.js +7 -6
  261. package/styled-components/es/components/Tabs/ui/Tabs/Tabs.js +3 -2
  262. package/styled-components/es/components/Tabs/ui/Tabs/Tabs.styles.js +1 -1
  263. package/styled-components/es/components/TextField/TextField.js +11 -11
  264. package/styled-components/es/components/TextField/TextField.styles.js +6 -0
  265. package/styled-components/es/components/TextField/TextField.tokens.js +5 -0
  266. package/styled-components/es/components/TextField/variations/_label-placement/inner.js +2 -2
  267. package/styled-components/es/components/TextField/variations/_size/base.js +2 -2
  268. package/styled-components/es/components/TextField/variations/_view/base.js +2 -2
  269. package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  270. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  271. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  272. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  273. package/styled-components/es/examples/plasma_b2c/components/Range/Range.config.js +25 -0
  274. package/styled-components/es/examples/plasma_b2c/components/Range/Range.js +5 -0
  275. package/styled-components/es/examples/plasma_b2c/components/Range/Range.stories.tsx +312 -0
  276. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +8 -8
  277. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -0
  278. package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
  279. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  280. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  281. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  282. package/styled-components/es/examples/plasma_web/components/Range/Range.config.js +25 -0
  283. package/styled-components/es/examples/plasma_web/components/Range/Range.js +5 -0
  284. package/styled-components/es/examples/plasma_web/components/Range/Range.stories.tsx +312 -0
  285. package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
  286. package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  287. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  288. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  289. package/styled-components/es/index.js +2 -1
  290. package/types/components/Button/Button.d.ts.map +1 -1
  291. package/types/components/Button/Button.styles.d.ts +1 -5
  292. package/types/components/Button/Button.styles.d.ts.map +1 -1
  293. package/types/components/Button/Button.tokens.d.ts +0 -5
  294. package/types/components/Button/Button.tokens.d.ts.map +1 -1
  295. package/types/components/Button/Button.types.d.ts +4 -28
  296. package/types/components/Button/Button.types.d.ts.map +1 -1
  297. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +0 -1
  298. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
  299. package/types/components/ButtonGroup/variations/_orientation/base.d.ts.map +1 -1
  300. package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
  301. package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts.map +1 -1
  302. package/types/components/Notification/Notification.styles.d.ts +1 -43
  303. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  304. package/types/components/Pagination/Pagination.styles.d.ts +2 -86
  305. package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
  306. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts +1 -43
  307. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts.map +1 -1
  308. package/types/components/Range/Range.d.ts +31 -0
  309. package/types/components/Range/Range.d.ts.map +1 -0
  310. package/types/components/Range/Range.styles.d.ts +48 -0
  311. package/types/components/Range/Range.styles.d.ts.map +1 -0
  312. package/types/components/Range/Range.tokens.d.ts +99 -0
  313. package/types/components/Range/Range.tokens.d.ts.map +1 -0
  314. package/types/components/Range/Range.types.d.ts +143 -0
  315. package/types/components/Range/Range.types.d.ts.map +1 -0
  316. package/types/components/Range/index.d.ts +4 -0
  317. package/types/components/Range/index.d.ts.map +1 -0
  318. package/types/components/Range/utils/index.d.ts +5 -0
  319. package/types/components/Range/utils/index.d.ts.map +1 -0
  320. package/types/components/Range/variations/_disabled/base.d.ts +2 -0
  321. package/types/components/Range/variations/_disabled/base.d.ts.map +1 -0
  322. package/types/components/Range/variations/_readonly/base.d.ts +2 -0
  323. package/types/components/Range/variations/_readonly/base.d.ts.map +1 -0
  324. package/types/components/Range/variations/_size/base.d.ts +2 -0
  325. package/types/components/Range/variations/_size/base.d.ts.map +1 -0
  326. package/types/components/Range/variations/_view/base.d.ts +2 -0
  327. package/types/components/Range/variations/_view/base.d.ts.map +1 -0
  328. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts +1 -43
  329. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts.map +1 -1
  330. package/types/components/Slider/components/Double/Double.styles.d.ts +4 -0
  331. package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
  332. package/types/components/Tabs/ui/TabItem/TabItem.d.ts.map +1 -1
  333. package/types/components/Tabs/ui/Tabs/Tabs.d.ts.map +1 -1
  334. package/types/components/Tabs/ui/Tabs/Tabs.styles.d.ts.map +1 -1
  335. package/types/components/TextField/TextField.d.ts.map +1 -1
  336. package/types/components/TextField/TextField.styles.d.ts +2 -0
  337. package/types/components/TextField/TextField.styles.d.ts.map +1 -1
  338. package/types/components/TextField/TextField.tokens.d.ts +5 -0
  339. package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
  340. package/types/components/TextField/TextField.types.d.ts +8 -0
  341. package/types/components/TextField/TextField.types.d.ts.map +1 -1
  342. package/types/components/TextField/variations/_label-placement/inner.d.ts.map +1 -1
  343. package/types/components/TextField/variations/_size/base.d.ts.map +1 -1
  344. package/types/components/TextField/variations/_view/base.d.ts.map +1 -1
  345. package/types/components/Toast/Toast.styles.d.ts +1 -43
  346. package/types/components/Toast/Toast.styles.d.ts.map +1 -1
  347. package/types/components/Toast/utils.d.ts +1 -43
  348. package/types/components/Toast/utils.d.ts.map +1 -1
  349. package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
  350. package/types/examples/plasma_b2c/components/Button/Button.d.ts +1 -43
  351. package/types/examples/plasma_b2c/components/Button/Button.d.ts.map +1 -1
  352. package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  353. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +1 -43
  354. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
  355. package/types/examples/plasma_b2c/components/Range/Range.config.d.ts +24 -0
  356. package/types/examples/plasma_b2c/components/Range/Range.config.d.ts.map +1 -0
  357. package/types/examples/plasma_b2c/components/Range/Range.d.ts +127 -0
  358. package/types/examples/plasma_b2c/components/Range/Range.d.ts.map +1 -0
  359. package/types/examples/plasma_b2c/components/TextField/TextField.config.d.ts.map +1 -1
  360. package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +4 -0
  361. package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
  362. package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
  363. package/types/examples/plasma_web/components/Button/Button.d.ts +1 -43
  364. package/types/examples/plasma_web/components/Button/Button.d.ts.map +1 -1
  365. package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  366. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +1 -43
  367. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
  368. package/types/examples/plasma_web/components/Range/Range.config.d.ts +24 -0
  369. package/types/examples/plasma_web/components/Range/Range.config.d.ts.map +1 -0
  370. package/types/examples/plasma_web/components/Range/Range.d.ts +127 -0
  371. package/types/examples/plasma_web/components/Range/Range.d.ts.map +1 -0
  372. package/types/examples/plasma_web/components/TextField/TextField.d.ts +4 -0
  373. package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
  374. package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
  375. package/types/examples/sds_engineer/components/Button/Button.d.ts +1 -43
  376. package/types/examples/sds_engineer/components/Button/Button.d.ts.map +1 -1
  377. package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  378. package/types/examples/sds_engineer/components/TextField/TextField.d.ts +4 -0
  379. package/types/examples/sds_engineer/components/TextField/TextField.d.ts.map +1 -1
  380. package/types/index.d.ts +1 -0
  381. package/types/index.d.ts.map +1 -1
  382. package/cjs/components/Button/Button.styles_1oz1dew.css +0 -8
  383. package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
  384. package/cjs/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
  385. package/es/components/Button/Button.styles_1oz1dew.css +0 -8
  386. package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
  387. package/es/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
@@ -39,21 +39,23 @@ export function App() {
39
39
  const [index, setIndex] = useState(0);
40
40
 
41
41
  return (
42
- <Tabs view="filled" stretch size="xs">
43
- {items.map((_, i) => (
44
- <TabItem
45
- view="secondary"
46
- key={`item:${i}`}
47
- size="xs"
48
- selected={i === index}
49
- tabIndex={0}
50
- contentLeft={<IconClock size="xs" color="inherit" />}
51
- onClick={() => setIndex(i)}
52
- >
53
- Label
54
- </TabItem>
55
- ))}
56
- </Tabs>
42
+ <div>
43
+ <Tabs view="filled" stretch size="xs">
44
+ {items.map((_, i) => (
45
+ <TabItem
46
+ view="secondary"
47
+ key={`item:${i}`}
48
+ size="xs"
49
+ selected={i === index}
50
+ tabIndex={0}
51
+ contentLeft={<IconClock size="xs" color="inherit" />}
52
+ onClick={() => setIndex(i)}
53
+ >
54
+ Label
55
+ </TabItem>
56
+ ))}
57
+ </Tabs>
58
+ </div>
57
59
  );
58
60
  }
59
61
  ```
@@ -72,23 +74,25 @@ export function App() {
72
74
  const [index, setIndex] = useState(0);
73
75
 
74
76
  return (
75
- <Tabs view="filled" stretch size="xs" index={index}>
76
- {items.map((_, i) => (
77
- <TabItem
78
- view="secondary"
79
- key={`item:${i}`}
80
- size="xs"
81
- itemIndex={i}
82
- onIndexChange={(i) => setIndex(i)}
83
- selected={i === index}
84
- tabIndex={0}
85
- contentLeft={<IconClock size="xs" color="inherit" />}
86
- onClick={() => setIndex(i)}
87
- >
88
- Label
89
- </TabItem>
90
- ))}
91
- </Tabs>
77
+ <div>
78
+ <Tabs view="filled" stretch size="xs" index={index}>
79
+ {items.map((_, i) => (
80
+ <TabItem
81
+ view="secondary"
82
+ key={`item:${i}`}
83
+ size="xs"
84
+ itemIndex={i}
85
+ onIndexChange={(i) => setIndex(i)}
86
+ selected={i === index}
87
+ tabIndex={0}
88
+ contentLeft={<IconClock size="xs" color="inherit" />}
89
+ onClick={() => setIndex(i)}
90
+ >
91
+ Label
92
+ </TabItem>
93
+ ))}
94
+ </Tabs>
95
+ </div>
92
96
  );
93
97
  }
94
98
  ```
@@ -15,7 +15,7 @@ var _base2 = /*#__PURE__*/require("./variations/_size/base");
15
15
  var _base3 = /*#__PURE__*/require("./variations/_pilled/base");
16
16
  var _base4 = /*#__PURE__*/require("./variations/_disabled/base");
17
17
  var _TabItem = /*#__PURE__*/require("./TabItem.styles");
18
- var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex"];
18
+ var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className"];
19
19
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
20
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
21
21
  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); }
@@ -39,6 +39,7 @@ var tabItemRoot = exports.tabItemRoot = function tabItemRoot(Root) {
39
39
  onIndexChange = props.onIndexChange,
40
40
  itemIndex = props.itemIndex,
41
41
  tabIndex = props.tabIndex,
42
+ className = props.className,
42
43
  rest = _objectWithoutProperties(props, _excluded);
43
44
  var innerRef = (0, _react.useRef)(null);
44
45
  var ref = (0, _plasmaCore.useForkRef)(outerRef, innerRef);
@@ -60,10 +61,10 @@ var tabItemRoot = exports.tabItemRoot = function tabItemRoot(Root) {
60
61
  };
61
62
  }, [refs]);
62
63
  var onItemFocus = (0, _react.useCallback)(function (event) {
63
- if (!hasKeyNavigation) {
64
- event.target.scrollIntoView({
65
- block: 'center',
66
- inline: 'center',
64
+ if (!hasKeyNavigation && innerRef !== null && innerRef !== void 0 && innerRef.current) {
65
+ innerRef.current.scrollTo({
66
+ top: 0,
67
+ left: innerRef.current.offsetLeft,
67
68
  behavior: 'smooth'
68
69
  });
69
70
  return;
@@ -89,7 +90,7 @@ var tabItemRoot = exports.tabItemRoot = function tabItemRoot(Root) {
89
90
  size: size,
90
91
  onFocus: onItemFocus,
91
92
  tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
92
- className: (0, _utils.cx)(pilledClass, selectedClass, animatedClass)
93
+ className: (0, _utils.cx)(pilledClass, selectedClass, animatedClass, className)
93
94
  }, rest), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, contentLeft && /*#__PURE__*/_react["default"].createElement(_TabItem.LeftContent, {
94
95
  className: _tokens.classes.tabLeftContent
95
96
  }, contentLeft), /*#__PURE__*/_react["default"].createElement(_TabItem.StyledContent, {
@@ -17,7 +17,7 @@ var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
17
17
  var _base4 = /*#__PURE__*/require("./variations/_pilled/base");
18
18
  var _base5 = /*#__PURE__*/require("./variations/_stretch/base");
19
19
  var _Tabs = /*#__PURE__*/require("./Tabs.styles");
20
- var _excluded = ["id", "stretch", "disabled", "size", "view", "children", "pilled", "index"];
20
+ var _excluded = ["id", "stretch", "disabled", "size", "view", "children", "pilled", "index", "className"];
21
21
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
22
22
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
23
23
  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); }
@@ -48,6 +48,7 @@ var tabsRoot = exports.tabsRoot = function tabsRoot(Root) {
48
48
  children = props.children,
49
49
  pilled = props.pilled,
50
50
  index = props.index,
51
+ className = props.className,
51
52
  rest = _objectWithoutProperties(props, _excluded);
52
53
  var _useState = (0, _react.useState)(true),
53
54
  _useState2 = _slicedToArray(_useState, 2),
@@ -155,7 +156,7 @@ var tabsRoot = exports.tabsRoot = function tabsRoot(Root) {
155
156
  id: tabsId,
156
157
  ref: outerRef,
157
158
  disabled: disabled,
158
- className: (0, _utils.cx)(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass),
159
+ className: (0, _utils.cx)(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
159
160
  onKeyDown: onKeyDown
160
161
  }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/_react["default"].createElement(_Tabs.StyledContentWrapper, {
161
162
  ref: scrollRef,
@@ -18,7 +18,7 @@ var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["defa
18
18
  })(["display:inline-flex;flex-direction:row;align-items:center;"]);
19
19
  var StyledContentWrapper = exports.StyledContentWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
20
20
  componentId: "plasma-new-hope__sc-1ibkmsl-1"
21
- })(["margin:-0.125rem;padding:0.25rem;overflow:scroll;position:relative;height:100%;width:100%;display:flex;align-items:center;::-webkit-scrollbar{display:none;}overscroll-behavior:contain;"]);
21
+ })(["margin:-0.125rem;padding:0.25rem;box-sizing:content-box;overflow:scroll;position:relative;height:100%;width:100%;display:flex;align-items:center;::-webkit-scrollbar{display:none;}overscroll-behavior:contain;"]);
22
22
  var StyledArrow = exports.StyledArrow = /*#__PURE__*/_styledComponents["default"].button.withConfig({
23
23
  componentId: "plasma-new-hope__sc-1ibkmsl-2"
24
24
  })(["display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;", ";&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:", ";padding-right:", ";padding-left:", ";"], /*#__PURE__*/(0, _mixins.addFocus)({
@@ -18,7 +18,7 @@ var _TextField = /*#__PURE__*/require("./TextField.styles");
18
18
  var _TextField2 = /*#__PURE__*/require("./TextField.tokens");
19
19
  var _ui = /*#__PURE__*/require("./ui");
20
20
  var _hooks = /*#__PURE__*/require("./hooks");
21
- var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
21
+ var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
22
22
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
23
23
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
24
24
  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); }
@@ -40,6 +40,8 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
40
40
  contentRight = _ref.contentRight,
41
41
  label = _ref.label,
42
42
  labelPlacement = _ref.labelPlacement,
43
+ textBefore = _ref.textBefore,
44
+ textAfter = _ref.textAfter,
43
45
  placeholder = _ref.placeholder,
44
46
  leftHelper = _ref.leftHelper,
45
47
  _ref$enumerationType = _ref.enumerationType,
@@ -120,14 +122,12 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
120
122
  if (readOnly || disabled || !(inputRef !== null && inputRef !== void 0 && inputRef.current)) {
121
123
  return;
122
124
  }
123
- inputRef.current.scrollIntoView({
124
- behavior: 'smooth',
125
- block: 'center',
126
- inline: 'center'
127
- });
128
- inputRef.current.focus({
129
- preventScroll: true
125
+ inputRef.current.scrollTo({
126
+ top: 0,
127
+ left: inputRef.current.offsetLeft,
128
+ behavior: 'smooth'
130
129
  });
130
+ inputRef.current.focus();
131
131
  };
132
132
  var getRef = function getRef(element, index) {
133
133
  if (element && chipsRefs !== null && chipsRefs !== void 0 && chipsRefs.current) {
@@ -169,7 +169,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
169
169
  ref: contentRef,
170
170
  onKeyDown: handleContentKeyDown,
171
171
  className: withHasChips
172
- }, isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/_react["default"].createElement(_TextField.StyledChips, null, chips === null || chips === void 0 ? void 0 : chips.map(function (_ref2, index) {
172
+ }, textBefore && /*#__PURE__*/_react["default"].createElement(_TextField.StyledTextBefore, null, textBefore), isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/_react["default"].createElement(_TextField.StyledChips, null, chips === null || chips === void 0 ? void 0 : chips.map(function (_ref2, index) {
173
173
  var chipId = _ref2.id,
174
174
  text = _ref2.text;
175
175
  return /*#__PURE__*/_react["default"].createElement(_ui.TextFieldChip, {
@@ -203,7 +203,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
203
203
  })), labelInside && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
204
204
  id: labelId,
205
205
  htmlFor: innerId
206
- }, innerLabelValue)), contentRight && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/_react["default"].createElement(_TextField.LeftHelper, {
206
+ }, innerLabelValue), textAfter && /*#__PURE__*/_react["default"].createElement(_TextField.StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/_react["default"].createElement(_TextField.LeftHelper, {
207
207
  id: helperTextId
208
208
  }, leftHelper));
209
209
  });
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.StyledContentRight = exports.StyledContentLeft = exports.StyledChips = exports.LeftHelper = exports.Label = exports.InputWrapper = exports.InputLabelWrapper = exports.Input = void 0;
6
+ exports.StyledTextBefore = exports.StyledTextAfter = exports.StyledContentRight = exports.StyledContentLeft = exports.StyledChips = exports.LeftHelper = exports.Label = exports.InputWrapper = exports.InputLabelWrapper = exports.Input = void 0;
7
7
  var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
8
8
  var _TextField = /*#__PURE__*/require("./TextField.tokens");
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -30,4 +30,10 @@ var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledCompon
30
30
  })(["margin:var(", ");"], _TextField.tokens.rightContentMargin);
31
31
  var LeftHelper = exports.LeftHelper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
32
32
  componentId: "plasma-new-hope__sc-g4vxbb-7"
33
+ })([""]);
34
+ var StyledTextBefore = exports.StyledTextBefore = /*#__PURE__*/_styledComponents["default"].div.withConfig({
35
+ componentId: "plasma-new-hope__sc-g4vxbb-8"
36
+ })([""]);
37
+ var StyledTextAfter = exports.StyledTextAfter = /*#__PURE__*/_styledComponents["default"].div.withConfig({
38
+ componentId: "plasma-new-hope__sc-g4vxbb-9"
33
39
  })([""]);
@@ -68,6 +68,11 @@ var tokens = exports.tokens = {
68
68
  leftHelperFontWeight: '--plasma-textfield__left-helper-font-weight',
69
69
  leftHelperLetterSpacing: '--plasma-textfield__left-helper-letter-spacing',
70
70
  leftHelperLineHeight: '--plasma-textfield__left-helper-line-height',
71
+ /** Токены вспомогательного текста */
72
+ textBeforeColor: '--plasma-textfield__before-text-color',
73
+ textAfterColor: '--plasma-textfield__after-text-color',
74
+ textBeforeMargin: '--plasma-textfield__before-text-margin',
75
+ textAfterMargin: '--plasma-textfield__after-text-margin',
71
76
  /** Прозрачность для всего компонента в состоянии disabled */
72
77
  disabledOpacity: '--plasma-textfield-disabled-opacity',
73
78
  /** Токены чипа */
@@ -7,4 +7,4 @@ exports.labelPlacement_inner = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _TextField = /*#__PURE__*/require("../../TextField.styles");
9
9
  var _TextField2 = /*#__PURE__*/require("../../TextField.tokens");
10
- var labelPlacement_inner = exports.labelPlacement_inner = /*#__PURE__*/(0, _styledComponents.css)(["", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], _TextField.Input, _TextField2.tokens.contentLabelInnerPadding, _TextField.Input, _TextField.Label, _TextField.Input, _TextField.Label, _TextField2.tokens.labelInnerPadding, _TextField2.tokens.labelInnerFontFamily, _TextField2.tokens.labelInnerFontSize, _TextField2.tokens.labelInnerFontStyle, _TextField2.tokens.labelInnerFontWeight, _TextField2.tokens.labelInnerLetterSpacing, _TextField2.tokens.labelInnerLineHeight, _TextField.Input, _TextField.Input, _TextField.Label, _TextField2.tokens.placeholderColor, _TextField2.tokens.height, _TextField2.tokens.height, _TextField2.tokens.height);
10
+ var labelPlacement_inner = exports.labelPlacement_inner = /*#__PURE__*/(0, _styledComponents.css)(["", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], _TextField.Input, _TextField2.tokens.contentLabelInnerPadding, _TextField.StyledTextAfter, _TextField.StyledTextBefore, _TextField2.tokens.contentLabelInnerPadding, _TextField.Input, _TextField.Label, _TextField.Input, _TextField.Label, _TextField2.tokens.labelInnerPadding, _TextField2.tokens.labelInnerFontFamily, _TextField2.tokens.labelInnerFontSize, _TextField2.tokens.labelInnerFontStyle, _TextField2.tokens.labelInnerFontWeight, _TextField2.tokens.labelInnerLetterSpacing, _TextField2.tokens.labelInnerLineHeight, _TextField.Input, _TextField.Input, _TextField.Label, _TextField2.tokens.placeholderColor, _TextField2.tokens.height, _TextField2.tokens.height, _TextField2.tokens.height);
@@ -7,4 +7,4 @@ exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _TextField = /*#__PURE__*/require("../../TextField.tokens");
9
9
  var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
10
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], _TextField2.Input, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.InputWrapper, _TextField.tokens.height, _TextField.tokens.borderRadius, _TextField.tokens.padding, _TextField.classes.hasChips, _TextField.tokens.paddingWithChips, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentLeft, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentRight, _TextField.tokens.paddingWithChips, _TextField2.Label, _TextField.tokens.labelFontFamily, _TextField.tokens.labelFontSize, _TextField.tokens.labelFontStyle, _TextField.tokens.labelFontWeight, _TextField.tokens.labelLetterSpacing, _TextField.tokens.labelLineHeight, _TextField2.LeftHelper, _TextField.tokens.leftHelperOffset, _TextField.tokens.leftHelperFontFamily, _TextField.tokens.leftHelperFontSize, _TextField.tokens.leftHelperFontStyle, _TextField.tokens.leftHelperFontWeight, _TextField.tokens.leftHelperLetterSpacing, _TextField.tokens.leftHelperLineHeight);
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");}"], _TextField2.Input, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.InputWrapper, _TextField.tokens.height, _TextField.tokens.borderRadius, _TextField.tokens.padding, _TextField.classes.hasChips, _TextField.tokens.paddingWithChips, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentLeft, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentRight, _TextField.tokens.paddingWithChips, _TextField2.Label, _TextField.tokens.labelFontFamily, _TextField.tokens.labelFontSize, _TextField.tokens.labelFontStyle, _TextField.tokens.labelFontWeight, _TextField.tokens.labelLetterSpacing, _TextField.tokens.labelLineHeight, _TextField2.LeftHelper, _TextField.tokens.leftHelperOffset, _TextField.tokens.leftHelperFontFamily, _TextField.tokens.leftHelperFontSize, _TextField.tokens.leftHelperFontStyle, _TextField.tokens.leftHelperFontWeight, _TextField.tokens.leftHelperLetterSpacing, _TextField.tokens.leftHelperLineHeight, _TextField2.StyledTextBefore, _TextField2.StyledTextAfter, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.StyledTextBefore, _TextField.tokens.textBeforeMargin, _TextField2.StyledTextAfter, _TextField.tokens.textAfterMargin);
@@ -7,4 +7,4 @@ exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _TextField = /*#__PURE__*/require("../../TextField.tokens");
9
9
  var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
10
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.borderColor), /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField.tokens.color, _TextField.tokens.borderWidth, _TextField.tokens.caretColor, _TextField2.InputWrapper, _TextField.tokens.borderColorHover, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorHover, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.InputWrapper, _TextField.tokens.borderColorFocus, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorFocus, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.Input, _TextField.tokens.placeholderColor, _TextField2.Input, _TextField.tokens.color, _TextField2.LeftHelper, _TextField.tokens.leftHelperColor);
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.borderColor), /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField.tokens.color, _TextField.tokens.borderWidth, _TextField.tokens.caretColor, _TextField2.InputWrapper, _TextField.tokens.borderColorHover, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorHover, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.InputWrapper, _TextField.tokens.borderColorFocus, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorFocus, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.Input, _TextField.tokens.placeholderColor, _TextField2.Input, _TextField.tokens.color, _TextField2.LeftHelper, _TextField.tokens.leftHelperColor, _TextField2.StyledTextBefore, _TextField.tokens.textBeforeColor, _TextField2.StyledTextAfter, _TextField.tokens.textAfterColor);
@@ -14,27 +14,27 @@ var config = exports.config = {
14
14
  },
15
15
  variations: {
16
16
  view: {
17
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
18
- accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
19
- secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
20
- clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
21
- positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
22
- warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
23
- negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
24
- dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
25
- black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
26
- white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive)
17
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
18
+ accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
19
+ secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
20
+ clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
21
+ positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
22
+ warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
23
+ negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
24
+ dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
25
+ black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
26
+ white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive)
27
27
  },
28
28
  size: {
29
- l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 -0.125rem;", ":0 -0.125rem 0 0.5rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
30
- lr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 0;", ":0 0 0 0.5rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
31
- m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 -0.125rem;", ":0 -0.125rem 0 0.375rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
32
- mr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 0;", ":0 0 0 0.375rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
33
- s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
34
- sr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
35
- xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
36
- xsr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
37
- xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin)
29
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
30
+ lr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
31
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
32
+ mr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
33
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
34
+ sr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
35
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
36
+ xsr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
37
+ xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor)
38
38
  },
39
39
  disabled: {
40
40
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Button.buttonTokens.buttonDisabledOpacity)
@@ -4,103 +4,57 @@ import type { StoryObj, Meta } from '@storybook/react';
4
4
  import { disableProps } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { IconMic } from '../../../../components/_Icon';
7
- import { WithTheme } from '../../../_helpers';
7
+ import { buttonConfig } from '../../../../components/Button';
8
+ import { mergeConfig } from '../../../../engines';
9
+ import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
10
 
11
+ import { config } from './Button.config';
9
12
  import { Button } from './Button';
10
13
 
11
- const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
12
- const sizes = ['l', 'm', 's', 'xs', 'xxs'];
13
- const stretchingValues = ['auto', 'filled', 'fixed'];
14
- const pinValues = [
15
- '',
16
- 'square-square',
17
- 'square-clear',
18
- 'clear-square',
19
- 'clear-clear',
20
- 'clear-circle',
21
- 'circle-clear',
22
- 'circle-circle',
23
- ];
24
- const contentPlacinValues = ['default', 'relaxed'];
25
-
26
14
  const meta: Meta<typeof Button> = {
27
15
  title: 'plasma_b2c/Button',
28
16
  decorators: [WithTheme],
29
17
  component: Button,
30
18
  args: {
19
+ text: 'Hello',
31
20
  view: 'default',
32
21
  size: 'm',
33
- contentPlacing: 'default',
34
- stretching: 'auto',
35
- text: 'Hello',
36
- value: 'Value',
37
22
  disabled: false,
38
23
  focused: true,
39
24
  square: false,
25
+ stretching: 'auto',
40
26
  isLoading: false,
41
27
  },
42
28
  argTypes: {
43
- view: {
44
- options: views,
45
- control: {
46
- type: 'select',
47
- },
48
- },
49
- size: {
50
- options: sizes,
51
- control: {
52
- type: 'select',
53
- },
54
- },
55
- contentPlacing: {
56
- options: contentPlacinValues,
29
+ ...argTypesFromConfig(mergeConfig(buttonConfig, config)),
30
+ pin: {
31
+ options: [
32
+ 'square-square',
33
+ 'square-clear',
34
+ 'clear-square',
35
+ 'clear-clear',
36
+ 'clear-circle',
37
+ 'circle-clear',
38
+ 'circle-circle',
39
+ '',
40
+ ],
57
41
  control: {
58
42
  type: 'select',
59
43
  },
44
+ table: { defaultValue: { summary: 'bottom' } },
60
45
  },
61
46
  stretching: {
62
- options: stretchingValues,
47
+ options: ['auto', 'filled', 'fixed'],
63
48
  control: {
64
49
  type: 'select',
65
50
  },
66
51
  },
67
- pin: {
68
- options: pinValues,
69
- control: {
70
- type: 'select',
71
- },
72
- table: { defaultValue: { summary: 'bottom' } },
73
- },
74
52
  },
75
53
  };
76
54
 
77
55
  export default meta;
78
56
 
79
- type StoryPropsDefault = ComponentProps<typeof Button> & {
80
- enableContentLeft: boolean;
81
- enableContentRight: boolean;
82
- };
83
-
84
- const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
85
- const iconSize = size === 'xs' ? 'xs' : 's';
86
-
87
- return (
88
- <Button
89
- contentLeft={enableContentLeft ? <IconMic size={iconSize} color="inherit" /> : undefined}
90
- contentRight={enableContentRight ? <IconMic size={iconSize} color="inherit" /> : undefined}
91
- size={size}
92
- {...rest}
93
- />
94
- );
95
- };
96
-
97
- export const Default: StoryObj<StoryPropsDefault> = {
98
- args: {
99
- enableContentLeft: false,
100
- enableContentRight: false,
101
- },
102
- render: (args) => <StoryDefault {...args} />,
103
- };
57
+ export const Default: StoryObj<ComponentProps<typeof Button>> = {};
104
58
 
105
59
  export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>> = {
106
60
  argTypes: { ...disableProps(['text']) },
@@ -13,16 +13,16 @@ var config = exports.config = {
13
13
  },
14
14
  variations: {
15
15
  view: {
16
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
17
- accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
18
- secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
19
- clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
20
- positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
21
- warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
22
- negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
23
- dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
24
- black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
25
- white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
16
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
17
+ accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
18
+ secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
19
+ clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
20
+ positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
21
+ warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
22
+ negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
23
+ dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
24
+ black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
25
+ white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
26
26
  },
27
27
  size: {
28
28
  l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _ButtonGroup.buttonGroupTokens.buttonDefaultRadius, _ButtonGroup.buttonGroupTokens.buttonSegmentedRadius, _ButtonGroup.buttonGroupTokens.buttonSideRadius, _ButtonGroup.buttonGroupTokens.buttonHeight, _ButtonGroup.buttonGroupTokens.buttonPadding, _ButtonGroup.buttonGroupTokens.buttonFontFamily, _ButtonGroup.buttonGroupTokens.buttonFontSize, _ButtonGroup.buttonGroupTokens.buttonFontStyle, _ButtonGroup.buttonGroupTokens.buttonFontWeight, _ButtonGroup.buttonGroupTokens.buttonLetterSpacing, _ButtonGroup.buttonGroupTokens.buttonLineHeight),
@@ -11,7 +11,7 @@ import { ButtonGroup } from './ButtonGroup';
11
11
  type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
12
12
  type Story = StoryObj<StoryProps>;
13
13
 
14
- const views = ['accent', 'default', 'secondary', 'positive', 'warning', 'negative', 'clear'];
14
+ const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear'];
15
15
  const sizes = ['l', 'm', 's', 'xs', 'xxs'];
16
16
  const orientationValues = ['horizontal', 'vertical'];
17
17
  const gapValues = ['none', 'dense', 'wide'];