@salutejs/plasma-new-hope 0.83.0-canary.1213.9176450261.0 → 0.84.0-canary.1208.9187471531.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (402) 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/TextField/TextField.js +10 -4
  59. package/cjs/components/TextField/TextField.js.map +1 -1
  60. package/cjs/components/TextField/TextField.styles.js +13 -1
  61. package/cjs/components/TextField/TextField.styles.js.map +1 -1
  62. package/cjs/components/TextField/{TextField.styles_1b1mddp.css → TextField.styles_aqmut.css} +2 -0
  63. package/cjs/components/TextField/TextField.tokens.js +5 -0
  64. package/cjs/components/TextField/TextField.tokens.js.map +1 -1
  65. package/cjs/components/TextField/variations/_label-placement/inner.js +1 -1
  66. package/cjs/components/TextField/variations/_label-placement/inner.js.map +1 -1
  67. package/cjs/components/TextField/variations/_label-placement/inner_7c08qb.css +1 -0
  68. package/cjs/components/TextField/variations/_size/base.js +1 -1
  69. package/cjs/components/TextField/variations/_size/base.js.map +1 -1
  70. package/cjs/components/TextField/variations/_size/{base_1khzr9t.css → base_ntoddv.css} +1 -1
  71. package/cjs/components/TextField/variations/_view/base.js +1 -1
  72. package/cjs/components/TextField/variations/_view/base.js.map +1 -1
  73. package/cjs/components/TextField/variations/_view/{base_1qd77x6.css → base_19gxyva.css} +1 -1
  74. package/cjs/components/Toast/Toast.css +6 -9
  75. package/cjs/components/Toast/ToastController.css +6 -9
  76. package/cjs/index.css +37 -21
  77. package/cjs/index.js +5 -0
  78. package/cjs/index.js.map +1 -1
  79. package/es/components/Button/Button.css +6 -9
  80. package/es/components/Button/Button.js +3 -17
  81. package/es/components/Button/Button.js.map +1 -1
  82. package/es/components/Button/Button.styles.js +11 -29
  83. package/es/components/Button/Button.styles.js.map +1 -1
  84. package/es/components/Button/Button.styles_uqvh6u.css +5 -0
  85. package/es/components/Button/Button.tokens.js +0 -5
  86. package/es/components/Button/Button.tokens.js.map +1 -1
  87. package/es/components/Button/variations/_stretching/base.js +1 -1
  88. package/es/components/Button/variations/_stretching/base.js.map +1 -1
  89. package/{cjs/components/Button/variations/_stretching/base_hy8dc.css → es/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
  90. package/es/components/ButtonGroup/ButtonGroup.css +2 -2
  91. package/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  92. package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  93. package/es/components/ButtonGroup/variations/_orientation/base.js +1 -1
  94. package/es/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  95. package/{cjs/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → es/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
  96. package/es/components/ButtonGroup/variations/_view/base.js +1 -1
  97. package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
  98. package/es/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
  99. package/es/components/Drawer/Drawer.css +6 -9
  100. package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  101. package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  102. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  103. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  104. package/es/components/IconButton/IconButton.css +7 -10
  105. package/es/components/IconButton/IconButton.styles.js +1 -1
  106. package/es/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  107. package/es/components/Notification/Notification.css +6 -9
  108. package/es/components/Notification/NotificationsProvider.css +6 -9
  109. package/es/components/Pagination/Pagination.css +8 -11
  110. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  111. package/es/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  112. package/es/components/Range/Range.css +63 -0
  113. package/es/components/Range/Range.js +141 -0
  114. package/es/components/Range/Range.js.map +1 -0
  115. package/es/components/Range/Range.styles.js +52 -0
  116. package/es/components/Range/Range.styles.js.map +1 -0
  117. package/es/components/Range/Range.styles_mc4w65.css +8 -0
  118. package/es/components/Range/Range.tokens.js +101 -0
  119. package/es/components/Range/Range.tokens.js.map +1 -0
  120. package/es/components/Range/utils/index.js +19 -0
  121. package/es/components/Range/utils/index.js.map +1 -0
  122. package/es/components/Range/variations/_disabled/base.js +5 -0
  123. package/es/components/Range/variations/_disabled/base.js.map +1 -0
  124. package/es/components/Range/variations/_disabled/base_1ufizo4.css +1 -0
  125. package/es/components/Range/variations/_readonly/base.js +5 -0
  126. package/es/components/Range/variations/_readonly/base.js.map +1 -0
  127. package/es/components/Range/variations/_readonly/base_tzdxy8.css +1 -0
  128. package/es/components/Range/variations/_size/base.js +5 -0
  129. package/es/components/Range/variations/_size/base.js.map +1 -0
  130. package/es/components/Range/variations/_size/base_16xiubi.css +1 -0
  131. package/es/components/Range/variations/_view/base.js +5 -0
  132. package/es/components/Range/variations/_view/base.js.map +1 -0
  133. package/es/components/Range/variations/_view/base_5iz3nr.css +1 -0
  134. package/es/components/Select/Select.css +6 -9
  135. package/es/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  136. package/es/components/TextField/TextField.js +11 -5
  137. package/es/components/TextField/TextField.js.map +1 -1
  138. package/es/components/TextField/TextField.styles.js +12 -2
  139. package/es/components/TextField/TextField.styles.js.map +1 -1
  140. package/es/components/TextField/{TextField.styles_1b1mddp.css → TextField.styles_aqmut.css} +2 -0
  141. package/es/components/TextField/TextField.tokens.js +5 -0
  142. package/es/components/TextField/TextField.tokens.js.map +1 -1
  143. package/es/components/TextField/variations/_label-placement/inner.js +1 -1
  144. package/es/components/TextField/variations/_label-placement/inner.js.map +1 -1
  145. package/es/components/TextField/variations/_label-placement/inner_7c08qb.css +1 -0
  146. package/es/components/TextField/variations/_size/base.js +1 -1
  147. package/es/components/TextField/variations/_size/base.js.map +1 -1
  148. package/es/components/TextField/variations/_size/{base_1khzr9t.css → base_ntoddv.css} +1 -1
  149. package/es/components/TextField/variations/_view/base.js +1 -1
  150. package/es/components/TextField/variations/_view/base.js.map +1 -1
  151. package/es/components/TextField/variations/_view/{base_1qd77x6.css → base_19gxyva.css} +1 -1
  152. package/es/components/Toast/Toast.css +6 -9
  153. package/es/components/Toast/ToastController.css +6 -9
  154. package/es/index.css +37 -21
  155. package/es/index.js +2 -0
  156. package/es/index.js.map +1 -1
  157. package/package.json +2 -2
  158. package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +3 -1
  159. package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
  160. package/styled-components/cjs/components/Button/Button.js +2 -16
  161. package/styled-components/cjs/components/Button/Button.styles.js +12 -20
  162. package/styled-components/cjs/components/Button/Button.template-doc.mdx +8 -51
  163. package/styled-components/cjs/components/Button/Button.tokens.js +0 -5
  164. package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
  165. package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  166. package/styled-components/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -2
  167. package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  168. package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +68 -0
  169. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  170. package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
  171. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
  172. package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
  173. package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +57 -0
  174. package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
  175. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  176. package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  177. package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +156 -0
  178. package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
  179. package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
  180. package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +85 -33
  181. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +1 -2
  182. package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +130 -0
  183. package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
  184. package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +70 -74
  185. package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +33 -0
  186. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  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 +2 -2
  203. package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  204. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
  205. package/styled-components/cjs/components/TextField/TextField.js +10 -4
  206. package/styled-components/cjs/components/TextField/TextField.styles.js +7 -1
  207. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
  208. package/styled-components/cjs/components/TextField/TextField.tokens.js +5 -0
  209. package/styled-components/cjs/components/TextField/variations/_label-placement/inner.js +1 -1
  210. package/styled-components/cjs/components/TextField/variations/_size/base.js +1 -1
  211. package/styled-components/cjs/components/TextField/variations/_view/base.js +1 -1
  212. package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  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/Avatar/Avatar.template-doc.mdx +3 -1
  235. package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
  236. package/styled-components/es/components/Button/Button.js +3 -17
  237. package/styled-components/es/components/Button/Button.styles.js +11 -19
  238. package/styled-components/es/components/Button/Button.template-doc.mdx +8 -51
  239. package/styled-components/es/components/Button/Button.tokens.js +0 -5
  240. package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
  241. package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  242. package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js +2 -3
  243. package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
  244. package/styled-components/es/components/Cell/Cell.template-doc.mdx +68 -0
  245. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  246. package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
  247. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
  248. package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
  249. package/styled-components/es/components/Divider/Divider.template-docs.mdx +57 -0
  250. package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
  251. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  252. package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  253. package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +156 -0
  254. package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
  255. package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
  256. package/styled-components/es/components/Modal/Modal.template-doc.mdx +85 -33
  257. package/styled-components/es/components/Notification/Notification.template-doc.mdx +1 -2
  258. package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +130 -0
  259. package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
  260. package/styled-components/es/components/Popup/Popup.template-doc.mdx +70 -74
  261. package/styled-components/es/components/Progress/Progress.template-doc.mdx +33 -0
  262. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  263. package/styled-components/es/components/Range/Range.js +139 -0
  264. package/styled-components/es/components/Range/Range.styles.js +31 -0
  265. package/styled-components/es/components/Range/Range.template-doc.mdx +323 -0
  266. package/styled-components/es/components/Range/Range.tokens.js +98 -0
  267. package/styled-components/es/components/Range/Range.types.js +1 -0
  268. package/styled-components/es/components/Range/index.js +2 -0
  269. package/styled-components/es/components/Range/utils/index.js +16 -0
  270. package/styled-components/es/components/Range/variations/_disabled/base.js +3 -0
  271. package/styled-components/es/components/Range/variations/_disabled/tokens.json +4 -0
  272. package/styled-components/es/components/Range/variations/_readonly/base.js +4 -0
  273. package/styled-components/es/components/Range/variations/_readonly/tokens.json +4 -0
  274. package/styled-components/es/components/Range/variations/_size/base.js +4 -0
  275. package/styled-components/es/components/Range/variations/_size/tokens.json +26 -0
  276. package/styled-components/es/components/Range/variations/_view/base.js +4 -0
  277. package/styled-components/es/components/Range/variations/_view/tokens.json +6 -0
  278. package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
  279. package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  280. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
  281. package/styled-components/es/components/TextField/TextField.js +11 -5
  282. package/styled-components/es/components/TextField/TextField.styles.js +6 -0
  283. package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
  284. package/styled-components/es/components/TextField/TextField.tokens.js +5 -0
  285. package/styled-components/es/components/TextField/variations/_label-placement/inner.js +2 -2
  286. package/styled-components/es/components/TextField/variations/_size/base.js +2 -2
  287. package/styled-components/es/components/TextField/variations/_view/base.js +2 -2
  288. package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  289. package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  290. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  291. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  292. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  293. package/styled-components/es/examples/plasma_b2c/components/Range/Range.config.js +25 -0
  294. package/styled-components/es/examples/plasma_b2c/components/Range/Range.js +5 -0
  295. package/styled-components/es/examples/plasma_b2c/components/Range/Range.stories.tsx +312 -0
  296. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +8 -8
  297. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -0
  298. package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
  299. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  300. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  301. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  302. package/styled-components/es/examples/plasma_web/components/Range/Range.config.js +25 -0
  303. package/styled-components/es/examples/plasma_web/components/Range/Range.js +5 -0
  304. package/styled-components/es/examples/plasma_web/components/Range/Range.stories.tsx +312 -0
  305. package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
  306. package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  307. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  308. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  309. package/styled-components/es/index.js +2 -1
  310. package/types/components/Button/Button.d.ts.map +1 -1
  311. package/types/components/Button/Button.styles.d.ts +1 -5
  312. package/types/components/Button/Button.styles.d.ts.map +1 -1
  313. package/types/components/Button/Button.tokens.d.ts +0 -5
  314. package/types/components/Button/Button.tokens.d.ts.map +1 -1
  315. package/types/components/Button/Button.types.d.ts +4 -16
  316. package/types/components/Button/Button.types.d.ts.map +1 -1
  317. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +0 -1
  318. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
  319. package/types/components/ButtonGroup/variations/_orientation/base.d.ts.map +1 -1
  320. package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
  321. package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts.map +1 -1
  322. package/types/components/Notification/Notification.styles.d.ts +1 -43
  323. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  324. package/types/components/Pagination/Pagination.styles.d.ts +2 -86
  325. package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
  326. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts +1 -43
  327. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts.map +1 -1
  328. package/types/components/Range/Range.d.ts +31 -0
  329. package/types/components/Range/Range.d.ts.map +1 -0
  330. package/types/components/Range/Range.styles.d.ts +48 -0
  331. package/types/components/Range/Range.styles.d.ts.map +1 -0
  332. package/types/components/Range/Range.tokens.d.ts +99 -0
  333. package/types/components/Range/Range.tokens.d.ts.map +1 -0
  334. package/types/components/Range/Range.types.d.ts +143 -0
  335. package/types/components/Range/Range.types.d.ts.map +1 -0
  336. package/types/components/Range/index.d.ts +4 -0
  337. package/types/components/Range/index.d.ts.map +1 -0
  338. package/types/components/Range/utils/index.d.ts +5 -0
  339. package/types/components/Range/utils/index.d.ts.map +1 -0
  340. package/types/components/Range/variations/_disabled/base.d.ts +2 -0
  341. package/types/components/Range/variations/_disabled/base.d.ts.map +1 -0
  342. package/types/components/Range/variations/_readonly/base.d.ts +2 -0
  343. package/types/components/Range/variations/_readonly/base.d.ts.map +1 -0
  344. package/types/components/Range/variations/_size/base.d.ts +2 -0
  345. package/types/components/Range/variations/_size/base.d.ts.map +1 -0
  346. package/types/components/Range/variations/_view/base.d.ts +2 -0
  347. package/types/components/Range/variations/_view/base.d.ts.map +1 -0
  348. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts +1 -43
  349. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts.map +1 -1
  350. package/types/components/TextField/TextField.d.ts.map +1 -1
  351. package/types/components/TextField/TextField.styles.d.ts +2 -0
  352. package/types/components/TextField/TextField.styles.d.ts.map +1 -1
  353. package/types/components/TextField/TextField.tokens.d.ts +5 -0
  354. package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
  355. package/types/components/TextField/TextField.types.d.ts +8 -0
  356. package/types/components/TextField/TextField.types.d.ts.map +1 -1
  357. package/types/components/TextField/variations/_label-placement/inner.d.ts.map +1 -1
  358. package/types/components/TextField/variations/_size/base.d.ts.map +1 -1
  359. package/types/components/TextField/variations/_view/base.d.ts.map +1 -1
  360. package/types/components/Toast/Toast.styles.d.ts +1 -43
  361. package/types/components/Toast/Toast.styles.d.ts.map +1 -1
  362. package/types/components/Toast/utils.d.ts +1 -43
  363. package/types/components/Toast/utils.d.ts.map +1 -1
  364. package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
  365. package/types/examples/plasma_b2c/components/Button/Button.d.ts +1 -43
  366. package/types/examples/plasma_b2c/components/Button/Button.d.ts.map +1 -1
  367. package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  368. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +1 -43
  369. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
  370. package/types/examples/plasma_b2c/components/Range/Range.config.d.ts +24 -0
  371. package/types/examples/plasma_b2c/components/Range/Range.config.d.ts.map +1 -0
  372. package/types/examples/plasma_b2c/components/Range/Range.d.ts +127 -0
  373. package/types/examples/plasma_b2c/components/Range/Range.d.ts.map +1 -0
  374. package/types/examples/plasma_b2c/components/TextField/TextField.config.d.ts.map +1 -1
  375. package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +4 -0
  376. package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
  377. package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
  378. package/types/examples/plasma_web/components/Button/Button.d.ts +1 -43
  379. package/types/examples/plasma_web/components/Button/Button.d.ts.map +1 -1
  380. package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  381. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +1 -43
  382. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
  383. package/types/examples/plasma_web/components/Range/Range.config.d.ts +24 -0
  384. package/types/examples/plasma_web/components/Range/Range.config.d.ts.map +1 -0
  385. package/types/examples/plasma_web/components/Range/Range.d.ts +127 -0
  386. package/types/examples/plasma_web/components/Range/Range.d.ts.map +1 -0
  387. package/types/examples/plasma_web/components/TextField/TextField.d.ts +4 -0
  388. package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
  389. package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
  390. package/types/examples/sds_engineer/components/Button/Button.d.ts +1 -43
  391. package/types/examples/sds_engineer/components/Button/Button.d.ts.map +1 -1
  392. package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  393. package/types/examples/sds_engineer/components/TextField/TextField.d.ts +4 -0
  394. package/types/examples/sds_engineer/components/TextField/TextField.d.ts.map +1 -1
  395. package/types/index.d.ts +1 -0
  396. package/types/index.d.ts.map +1 -1
  397. package/cjs/components/Button/Button.styles_nedem1.css +0 -8
  398. package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
  399. package/cjs/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
  400. package/es/components/Button/Button.styles_nedem1.css +0 -8
  401. package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
  402. package/es/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
@@ -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)
@@ -1,117 +1,55 @@
1
- import * as React from 'react';
2
- import type { ComponentProps } from 'react';
1
+ import { ComponentProps } from 'react';
3
2
  import type { StoryObj, Meta } from '@storybook/react';
4
- import { disableProps } from '@salutejs/plasma-sb-utils';
5
3
 
6
- import { IconMic } from '../../../../components/_Icon';
7
- import { WithTheme } from '../../../_helpers';
4
+ import { buttonConfig } from '../../../../components/Button';
5
+ import { mergeConfig } from '../../../../engines';
6
+ import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
7
 
8
+ import { config } from './Button.config';
9
9
  import { Button } from './Button';
10
10
 
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
11
  const meta: Meta<typeof Button> = {
27
12
  title: 'sds_engineer/Button',
28
13
  decorators: [WithTheme],
29
14
  component: Button,
30
- args: {
31
- view: 'default',
32
- size: 'm',
33
- contentPlacing: 'default',
34
- stretching: 'auto',
35
- text: 'Hello',
36
- value: 'Value',
37
- disabled: false,
38
- focused: true,
39
- square: false,
40
- isLoading: false,
41
- },
42
15
  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,
16
+ ...argTypesFromConfig(mergeConfig(buttonConfig, config)),
17
+ pin: {
18
+ options: [
19
+ 'square-square',
20
+ 'square-clear',
21
+ 'clear-square',
22
+ 'clear-clear',
23
+ 'clear-circle',
24
+ 'circle-clear',
25
+ 'circle-circle',
26
+ '',
27
+ ],
57
28
  control: {
58
29
  type: 'select',
59
30
  },
31
+ table: { defaultValue: { summary: 'bottom' } },
60
32
  },
61
33
  stretching: {
62
- options: stretchingValues,
63
- control: {
64
- type: 'select',
65
- },
66
- },
67
- pin: {
68
- options: pinValues,
34
+ options: ['auto', 'filled', 'fixed'],
69
35
  control: {
70
36
  type: 'select',
71
37
  },
72
- table: { defaultValue: { summary: 'bottom' } },
73
38
  },
74
39
  },
75
40
  };
76
41
 
77
42
  export default meta;
78
43
 
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> = {
44
+ export const Default: StoryObj<ComponentProps<typeof Button>> = {
98
45
  args: {
99
- enableContentLeft: false,
100
- enableContentRight: false,
101
- },
102
- render: (args) => <StoryDefault {...args} />,
103
- };
104
-
105
- export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>> = {
106
- argTypes: { ...disableProps(['text']) },
107
- render: (props: ComponentProps<typeof Button>) => {
108
- const args = { ...props, text: undefined };
109
-
110
- return (
111
- <Button {...args}>
112
- <IconMic color="inherit" />
113
- <span>Включить микрофон</span>
114
- </Button>
115
- );
46
+ children: 'Hello',
47
+ view: 'default',
48
+ size: 'm',
49
+ disabled: false,
50
+ focused: true,
51
+ square: false,
52
+ stretching: 'auto',
53
+ isLoading: false,
116
54
  },
117
55
  };
@@ -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'];
@@ -508,4 +508,15 @@ Object.keys(_Toolbar).forEach(function (key) {
508
508
  return _Toolbar[key];
509
509
  }
510
510
  });
511
+ });
512
+ var _Range = /*#__PURE__*/require("./components/Range");
513
+ Object.keys(_Range).forEach(function (key) {
514
+ if (key === "default" || key === "__esModule") return;
515
+ if (key in exports && exports[key] === _Range[key]) return;
516
+ Object.defineProperty(exports, key, {
517
+ enumerable: true,
518
+ get: function get() {
519
+ return _Range[key];
520
+ }
521
+ });
511
522
  });
@@ -32,7 +32,9 @@ export function App() {
32
32
  ```
33
33
 
34
34
  ### Инициалы вместо фотографии
35
- Инициалы можно задать с помощью свойства `name`. Желательный формат строки - "Имя Фамилия". Также не должно быть свойства url.
35
+ Инициалы можно задать с помощью свойства `name`.
36
+ Желательный формат строки - "Имя Фамилия".
37
+ Также не должно быть свойства url.
36
38
 
37
39
  ```tsx live
38
40
  import React from 'react';
@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
11
11
 
12
12
  ## Примеры
13
13
 
14
- ### Размер бейджа
14
+ ### Размер badge
15
15
  Размер задается с помощью свойства `size`.
16
16
 
17
17
  Возможные значения свойства: `"l"`, `"m"`, `"s"`.
@@ -31,7 +31,7 @@ export function App() {
31
31
  }
32
32
  ```
33
33
 
34
- ### Скругленность бейджа
34
+ ### Скругленность badge
35
35
  Скругленность задается с помощью свойства `pilled`:
36
36
 
37
37
  ```tsx live
@@ -49,16 +49,16 @@ export function App() {
49
49
  }
50
50
  ```
51
51
 
52
- ### Вид бейджа
53
- Вид бейджа задается с помощью свойства `view`. Возможные значения свойства `view`:
52
+ ### Вид badge
53
+ Вид `badge` задается с помощью свойства `view`. Возможные значения свойства `view`:
54
54
 
55
- + `"primary"` – основной бейдж;
55
+ + `"primary"` – основной badge;
56
56
  + `"accent"` – бейдж акцентного цвета;
57
57
  + `"positive"` – успешное завершение;
58
58
  + `"warning"` – предупреждение;
59
59
  + `"negative"` – ошибка;
60
- + `"dark"` – темный бэйдж;
61
- + `"light"` – светлый бэйдж.
60
+ + `"dark"` – темный badge;
61
+ + `"light"` – светлый badge.
62
62
 
63
63
  ```tsx live
64
64
  import React from 'react';
@@ -79,7 +79,7 @@ export function App() {
79
79
  }
80
80
  ```
81
81
 
82
- так же на вид бейджа влияет свойство `transparent`:
82
+ Так же на вид badge влияет свойство `transparent`:
83
83
 
84
84
  ```tsx live
85
85
  import React from 'react';
@@ -101,7 +101,7 @@ export function App() {
101
101
  ```
102
102
 
103
103
  ### Иконка слева / справа
104
- В левой и/или правой части бейджа можно отобразить иконку:
104
+ В левой и/или правой части badge можно отобразить иконку:
105
105
 
106
106
  ```tsx live
107
107
  import React from 'react';
@@ -1,6 +1,6 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
2
  var _StyledSpinner;
3
- var _excluded = ["children", "view", "size", "text", "value", "contentLeft", "contentRight", "contentPlacing", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
3
+ var _excluded = ["children", "view", "size", "text", "contentLeft", "contentRight", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
4
4
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
5
5
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
6
6
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -18,7 +18,7 @@ import { base as disabledCSS } from './variations/_disabled/base';
18
18
  import { base as focusedCSS } from './variations/_focused/base';
19
19
  import { base as stretchingCSS } from './variations/_stretching/base';
20
20
  import { base as blurredCSS } from './variations/_blurred/base';
21
- import { base, ButtonText, ButtonValue, Loader, LoadWrap, StyledContentLeft, StyledContentRight, StyledSpinner } from './Button.styles';
21
+ import { base, ButtonText, Loader, LoadWrap, StyledSpinner } from './Button.styles';
22
22
  import { classes, tokens } from './Button.tokens';
23
23
  export var buttonRoot = function buttonRoot(Root) {
24
24
  return /*#__PURE__*/forwardRef(function (props, ref) {
@@ -26,11 +26,8 @@ export var buttonRoot = function buttonRoot(Root) {
26
26
  view = props.view,
27
27
  size = props.size,
28
28
  text = props.text,
29
- value = props.value,
30
29
  contentLeft = props.contentLeft,
31
30
  contentRight = props.contentRight,
32
- _props$contentPlacing = props.contentPlacing,
33
- contentPlacing = _props$contentPlacing === void 0 ? 'default' : _props$contentPlacing,
34
31
  isLoading = props.isLoading,
35
32
  loader = props.loader,
36
33
  stretch = props.stretch,
@@ -47,34 +44,23 @@ export var buttonRoot = function buttonRoot(Root) {
47
44
  rest = _objectWithoutProperties(props, _excluded);
48
45
  var txt = typeof children === 'string' ? children : text;
49
46
  var stretchingClass = stretch ? classes.filledStretching : classes["".concat(stretching, "Stretching")];
50
- var contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
51
47
  var squareClass = square ? classes.buttonSquare : undefined;
52
48
  var buttonBorderRadius = pin ? convertRoundnessMatrix(pin, "var(".concat(tokens.buttonRadius, ")"), "var(".concat(tokens.buttonHeight, ")")) : "var(".concat(tokens.buttonRadius, ", calc(var(").concat(tokens.buttonHeight, ") / 4))");
53
- var contentPlacingMapper = {
54
- "default": 'center',
55
- relaxed: 'space-between'
56
- };
57
- var contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';
58
49
  return /*#__PURE__*/React.createElement(Root, _extends({
59
50
  type: "button",
60
51
  ref: ref,
61
52
  view: view,
62
53
  size: size,
63
- value: value,
64
54
  disabled: disabled,
65
55
  focused: focused || outlined,
66
- contentPlacing: contentPlacing,
67
56
  className: cx(squareClass, stretchingClass, classes.buttonItem, className),
68
57
  style: _objectSpread(_objectSpread({}, style), {}, {
69
58
  '--plasma_computed-btn-br': buttonBorderRadius,
70
59
  '--plasma_private-blur': blur
71
60
  })
72
61
  }, rest), /*#__PURE__*/React.createElement(LoadWrap, {
73
- contentPlacing: contentPlacementValue,
74
62
  isLoading: isLoading
75
- }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(ButtonText, {
76
- className: contentRelaxedClass
77
- }, txt) : children, value && /*#__PURE__*/React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), isLoading && /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))));
63
+ }, contentLeft, txt ? /*#__PURE__*/React.createElement(ButtonText, null, txt) : children, contentRight), isLoading && /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))));
78
64
  });
79
65
  };
80
66
  export var buttonConfig = {
@@ -10,36 +10,28 @@ import { classes, tokens } from './Button.tokens';
10
10
  // issue #823
11
11
  var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig);
12
12
  var Spinner = /*#__PURE__*/component(mergedConfig);
13
+ export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
14
+
15
+ // TODO: PLASMA-2164
16
+ // WHY do we need applyEllipsis ??
17
+ // Если внутри кнопки тескт и на нее решили повесить square пропс
13
18
  export var ButtonText = /*#__PURE__*/styled.span.withConfig({
14
19
  componentId: "plasma-new-hope__sc-9d9bqj-0"
15
- })(["min-width:4ch;flex-shrink:2;", " &.", "{text-align:start;flex-grow:2;}"], /*#__PURE__*/applyEllipsis(), /*#__PURE__*/String(classes.contentRelaxed));
16
- export var ButtonValue = /*#__PURE__*/styled.span.withConfig({
17
- componentId: "plasma-new-hope__sc-9d9bqj-1"
18
- })(["color:var(", ");margin:var(", ");min-width:4ch;", ""], tokens.buttonValueColor, tokens.buttonValueMargin, /*#__PURE__*/applyEllipsis());
20
+ })([":not(:last-child){margin-right:0.375rem;}:not(:first-child){margin-left:0.375rem;}", ""], /*#__PURE__*/applyEllipsis());
19
21
 
20
22
  // TODO: #720
21
23
  export var LoadWrap = /*#__PURE__*/styled.div.withConfig({
22
- componentId: "plasma-new-hope__sc-9d9bqj-2"
23
- })(["opacity:", ";display:flex;align-items:inherit;justify-content:", ";height:100%;width:100%;"], function (_ref) {
24
+ componentId: "plasma-new-hope__sc-9d9bqj-1"
25
+ })(["opacity:", ";display:flex;width:100%;align-items:inherit;justify-content:inherit;height:100%;"], function (_ref) {
24
26
  var isLoading = _ref.isLoading;
25
27
  return isLoading ? '0' : '1';
26
- }, function (_ref2) {
27
- var contentPlacing = _ref2.contentPlacing;
28
- return contentPlacing;
29
28
  });
30
29
  export var Loader = /*#__PURE__*/styled.div.withConfig({
31
- componentId: "plasma-new-hope__sc-9d9bqj-3"
30
+ componentId: "plasma-new-hope__sc-9d9bqj-2"
32
31
  })(["position:absolute;"]);
33
32
  export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
34
- componentId: "plasma-new-hope__sc-9d9bqj-4"
33
+ componentId: "plasma-new-hope__sc-9d9bqj-3"
35
34
  })(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
36
- export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
37
- componentId: "plasma-new-hope__sc-9d9bqj-5"
38
- })(["margin:var(", ");"], tokens.buttonLeftContentMargin);
39
- export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
40
- componentId: "plasma-new-hope__sc-9d9bqj-6"
41
- })(["margin:var(", ");"], tokens.buttonRightContentMargin);
42
- export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
43
35
 
44
36
  // INFO: Для возможности переиспользования стилей в других компонентах
45
37
  export var baseContent = /*#__PURE__*/"\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.".concat(String(classes.buttonSquare), " {\n width: var(").concat(tokens.buttonHeight, ");\n padding: 0;\n }\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n\n :hover {\n color: var(").concat(tokens.buttonColorHover, ", var(").concat(tokens.buttonColor, "));\n background-color: var(").concat(tokens.buttonBackgroundColorHover, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(tokens.buttonScaleHover, ");\n }\n\n :active {\n color: var(").concat(tokens.buttonColorActive, ", var(").concat(tokens.buttonColor, "));\n background-color: var(").concat(tokens.buttonBackgroundColorActive, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(tokens.buttonScaleActive, ");\n }\n\n height: var(").concat(tokens.buttonHeight, ");\n width: var(").concat(tokens.buttonWidth, ");\n\n /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n padding: 0 var(").concat(tokens.buttonPadding, ", calc(var(").concat(tokens.buttonHeight, ") * 1.618 / 4));\n\n font-family: var(").concat(tokens.buttonFontFamily, ");\n font-size: var(").concat(tokens.buttonFontSize, ");\n font-style: var(").concat(tokens.buttonFontStyle, ");\n font-weight: var(").concat(tokens.buttonFontWeight, ");\n letter-spacing: var(").concat(tokens.buttonLetterSpacing, ");\n line-height: var(").concat(tokens.buttonLineHeight, ");\n\n /* TODO: #710 make it token API ? */\n --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n :focus {\n outline: none;\n }\n\n ").concat(addFocus({
@@ -47,4 +39,4 @@ export var baseContent = /*#__PURE__*/"\n position: relative;\n display: i
47
39
  outlineSize: 'var(--plasma_private-btn-outline-size)',
48
40
  outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
49
41
  outlineColor: "var(".concat(tokens.buttonFocusColor, ")")
50
- }), "\n\n &[disabled] {\n opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(classes.fixedStretching, " {\n width: var(").concat(tokens.buttonWidth, ");\n }\n &.").concat(classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(classes.autoStretching, " {\n width: fit-content;\n }\n");
42
+ }), "\n\n &[disabled] {\n opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(classes.fixedStretching, " {\n width: var(").concat(tokens.buttonWidth, ");\n }\n &.").concat(classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(classes.autoStretching, " {\n width: auto;\n }\n");