@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
@@ -117,7 +117,7 @@ export function App() {
117
117
 
118
118
  ```tsx live
119
119
  import React from 'react';
120
- import { TextField } from '@salutejs/{{ package }};
120
+ import { TextField } from '@salutejs/{{ package }}';
121
121
 
122
122
  export function App() {
123
123
  return (
@@ -133,4 +133,4 @@ export function App() {
133
133
  </div>
134
134
  );
135
135
  }
136
- ```
136
+ ```
@@ -62,6 +62,11 @@ export var tokens = {
62
62
  leftHelperFontWeight: '--plasma-textfield__left-helper-font-weight',
63
63
  leftHelperLetterSpacing: '--plasma-textfield__left-helper-letter-spacing',
64
64
  leftHelperLineHeight: '--plasma-textfield__left-helper-line-height',
65
+ /** Токены вспомогательного текста */
66
+ textBeforeColor: '--plasma-textfield__before-text-color',
67
+ textAfterColor: '--plasma-textfield__after-text-color',
68
+ textBeforeMargin: '--plasma-textfield__before-text-margin',
69
+ textAfterMargin: '--plasma-textfield__after-text-margin',
65
70
  /** Прозрачность для всего компонента в состоянии disabled */
66
71
  disabledOpacity: '--plasma-textfield-disabled-opacity',
67
72
  /** Токены чипа */
@@ -1,4 +1,4 @@
1
1
  import { css } from 'styled-components';
2
- import { Input, Label } from '../../TextField.styles';
2
+ import { Input, Label, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
3
3
  import { tokens } from '../../TextField.tokens';
4
- export var labelPlacement_inner = /*#__PURE__*/css(["", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], Input, tokens.contentLabelInnerPadding, Input, Label, Input, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Input, Input, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.height);
4
+ export var labelPlacement_inner = /*#__PURE__*/css(["", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], Input, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Input, Input, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.height);
@@ -1,4 +1,4 @@
1
1
  import { css } from 'styled-components';
2
2
  import { classes, tokens } from '../../TextField.tokens';
3
- import { Input, InputWrapper, Label, LeftHelper } from '../../TextField.styles';
4
- export var base = /*#__PURE__*/css(["", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], Input, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);
3
+ import { Input, InputWrapper, Label, LeftHelper, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
4
+ export var base = /*#__PURE__*/css(["", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");}"], Input, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, StyledTextBefore, StyledTextAfter, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, StyledTextBefore, tokens.textBeforeMargin, StyledTextAfter, tokens.textAfterMargin);
@@ -1,4 +1,4 @@
1
1
  import { css } from 'styled-components';
2
2
  import { tokens } from '../../TextField.tokens';
3
- import { Input, InputWrapper, LeftHelper } from '../../TextField.styles';
4
- export var base = /*#__PURE__*/css(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], InputWrapper, /*#__PURE__*/String(tokens.borderColor), /*#__PURE__*/String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.caretColor, InputWrapper, tokens.borderColorHover, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorHover, /*#__PURE__*/String(tokens.backgroundColor), InputWrapper, tokens.borderColorFocus, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorFocus, /*#__PURE__*/String(tokens.backgroundColor), Input, tokens.placeholderColor, Input, tokens.color, LeftHelper, tokens.leftHelperColor);
3
+ import { Input, InputWrapper, LeftHelper, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
4
+ export var base = /*#__PURE__*/css(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], InputWrapper, /*#__PURE__*/String(tokens.borderColor), /*#__PURE__*/String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.caretColor, InputWrapper, tokens.borderColorHover, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorHover, /*#__PURE__*/String(tokens.backgroundColor), InputWrapper, tokens.borderColorFocus, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorFocus, /*#__PURE__*/String(tokens.backgroundColor), Input, tokens.placeholderColor, Input, tokens.color, LeftHelper, tokens.leftHelperColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor);
@@ -0,0 +1,120 @@
1
+ ---
2
+ id: toolbar
3
+ title: Toolbar
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ # Toolbar
9
+ Toolbar может отображаться в горизонтальном и вертикальном положении с разными размерами.
10
+
11
+ ## Toolbar
12
+ <Description name="Toolbar" />
13
+ <PropsTable name="Toolbar" exclude={['css', 'focused']} />
14
+
15
+ ## Использование
16
+ Компонент `Toolbar` должен содержать контент передаваемый в `children`.
17
+ Для разделения элементов можно использовать ToolbarDivider.
18
+
19
+ ```tsx live
20
+ import React from 'react';
21
+ import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
22
+ import { IconEdit } from '@salutejs/plasma-icons';
23
+
24
+ export function App() {
25
+ return (
26
+ <Toolbar>
27
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
28
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
29
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
30
+ <ToolbarDivider />
31
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
32
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
33
+ </Toolbar>
34
+ );
35
+ }
36
+ ```
37
+
38
+ ## Примеры
39
+
40
+ ### Размер Toolbar
41
+ Размер Toolbar задается с помощью свойства `size`.
42
+
43
+ Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
44
+
45
+ ```tsx live
46
+ import React from 'react';
47
+ import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
48
+ import { IconEdit } from '@salutejs/plasma-icons';
49
+
50
+ export function App() {
51
+ return (
52
+ <div>
53
+ <Toolbar size="l">
54
+ <Button square size="l" view="clear" contentLeft={<IconEdit />} />
55
+ <Button square size="l" view="clear" contentLeft={<IconEdit />} />
56
+ <ToolbarDivider />
57
+ <Button square size="l" view="clear" contentLeft={<IconEdit />} />
58
+ <Button square size="l" view="clear" contentLeft={<IconEdit />} />
59
+ </Toolbar>
60
+
61
+ <Toolbar size="m">
62
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
63
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
64
+ <ToolbarDivider />
65
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
66
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
67
+ </Toolbar>
68
+
69
+ <Toolbar size="m">
70
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
71
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
72
+ <ToolbarDivider />
73
+ <Button square size="s" view="clear" contentLeft={<IconEdit />} />
74
+ <Button square size="s" view="clear" contentLeft={<IconEdit />} />
75
+ </Toolbar>
76
+
77
+ <Toolbar size="xs">
78
+ <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
79
+ <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
80
+ <ToolbarDivider />
81
+ <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
82
+ <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
83
+ </Toolbar>
84
+ </div>
85
+ );
86
+ }
87
+ ```
88
+
89
+ ### Положение Toolbar
90
+ Положение Toolbar задается с помощью свойства `orientation`. Возможные значения свойства `orientation`:
91
+ + `"vertical"` – вертикальное положение;
92
+ + `"horizontal"` – горизонтальное положение;
93
+
94
+ ```tsx live
95
+ import React from 'react';
96
+ import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
97
+ import { IconEdit } from '@salutejs/plasma-icons';
98
+
99
+ export function App() {
100
+ return (
101
+ <div>
102
+ <Toolbar orientation="vertical">
103
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
104
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
105
+ <ToolbarDivider />
106
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
107
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
108
+ </Toolbar>
109
+
110
+ <Toolbar orientation="horizontal">
111
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
112
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
113
+ <ToolbarDivider />
114
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
115
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
116
+ </Toolbar>
117
+ </div>
118
+ );
119
+ }
120
+ ```
@@ -8,27 +8,27 @@ export var config = {
8
8
  },
9
9
  variations: {
10
10
  view: {
11
- "default": /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
12
- accent: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
13
- secondary: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
14
- clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
15
- positive: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
16
- warning: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
17
- negative: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
18
- dark: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
19
- black: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
20
- white: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
11
+ "default": /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
12
+ accent: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
13
+ secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
14
+ clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
15
+ positive: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
16
+ warning: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
17
+ negative: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
18
+ dark: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
19
+ black: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
20
+ white: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
21
21
  },
22
22
  size: {
23
- l: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
24
- lr: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
25
- m: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
26
- mr: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
27
- s: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
28
- sr: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
29
- xs: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
30
- xsr: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
31
- xxs: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin)
23
+ l: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
24
+ lr: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
25
+ m: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
26
+ mr: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
27
+ s: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
28
+ sr: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
29
+ xs: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
30
+ xsr: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
31
+ xxs: /*#__PURE__*/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;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor)
32
32
  },
33
33
  disabled: {
34
34
  "true": /*#__PURE__*/css(["", ":0.4;"], buttonTokens.buttonDisabledOpacity)
@@ -4,103 +4,57 @@ import type { StoryObj, Meta } from '@storybook/react';
4
4
  import { disableProps } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { IconMic } from '../../../../components/_Icon';
7
- import { WithTheme } from '../../../_helpers';
7
+ import { buttonConfig } from '../../../../components/Button';
8
+ import { mergeConfig } from '../../../../engines';
9
+ import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
10
 
11
+ import { config } from './Button.config';
9
12
  import { Button } from './Button';
10
13
 
11
- const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
12
- const sizes = ['l', 'm', 's', 'xs', 'xxs'];
13
- const stretchingValues = ['auto', 'filled', 'fixed'];
14
- const pinValues = [
15
- '',
16
- 'square-square',
17
- 'square-clear',
18
- 'clear-square',
19
- 'clear-clear',
20
- 'clear-circle',
21
- 'circle-clear',
22
- 'circle-circle',
23
- ];
24
- const contentPlacinValues = ['default', 'relaxed'];
25
-
26
14
  const meta: Meta<typeof Button> = {
27
15
  title: 'plasma_b2c/Button',
28
16
  decorators: [WithTheme],
29
17
  component: Button,
30
18
  args: {
19
+ text: 'Hello',
31
20
  view: 'default',
32
21
  size: 'm',
33
- contentPlacing: 'default',
34
- stretching: 'auto',
35
- text: 'Hello',
36
- value: 'Value',
37
22
  disabled: false,
38
23
  focused: true,
39
24
  square: false,
25
+ stretching: 'auto',
40
26
  isLoading: false,
41
27
  },
42
28
  argTypes: {
43
- view: {
44
- options: views,
45
- control: {
46
- type: 'select',
47
- },
48
- },
49
- size: {
50
- options: sizes,
51
- control: {
52
- type: 'select',
53
- },
54
- },
55
- contentPlacing: {
56
- options: contentPlacinValues,
29
+ ...argTypesFromConfig(mergeConfig(buttonConfig, config)),
30
+ pin: {
31
+ options: [
32
+ 'square-square',
33
+ 'square-clear',
34
+ 'clear-square',
35
+ 'clear-clear',
36
+ 'clear-circle',
37
+ 'circle-clear',
38
+ 'circle-circle',
39
+ '',
40
+ ],
57
41
  control: {
58
42
  type: 'select',
59
43
  },
44
+ table: { defaultValue: { summary: 'bottom' } },
60
45
  },
61
46
  stretching: {
62
- options: stretchingValues,
47
+ options: ['auto', 'filled', 'fixed'],
63
48
  control: {
64
49
  type: 'select',
65
50
  },
66
51
  },
67
- pin: {
68
- options: pinValues,
69
- control: {
70
- type: 'select',
71
- },
72
- table: { defaultValue: { summary: 'bottom' } },
73
- },
74
52
  },
75
53
  };
76
54
 
77
55
  export default meta;
78
56
 
79
- type StoryPropsDefault = ComponentProps<typeof Button> & {
80
- enableContentLeft: boolean;
81
- enableContentRight: boolean;
82
- };
83
-
84
- const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
85
- const iconSize = size === 'xs' ? 'xs' : 's';
86
-
87
- return (
88
- <Button
89
- contentLeft={enableContentLeft ? <IconMic size={iconSize} color="inherit" /> : undefined}
90
- contentRight={enableContentRight ? <IconMic size={iconSize} color="inherit" /> : undefined}
91
- size={size}
92
- {...rest}
93
- />
94
- );
95
- };
96
-
97
- export const Default: StoryObj<StoryPropsDefault> = {
98
- args: {
99
- enableContentLeft: false,
100
- enableContentRight: false,
101
- },
102
- render: (args) => <StoryDefault {...args} />,
103
- };
57
+ export const Default: StoryObj<ComponentProps<typeof Button>> = {};
104
58
 
105
59
  export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>> = {
106
60
  argTypes: { ...disableProps(['text']) },
@@ -7,16 +7,16 @@ export var config = {
7
7
  },
8
8
  variations: {
9
9
  view: {
10
- "default": /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
11
- accent: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
12
- secondary: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
13
- clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
14
- positive: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
15
- warning: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
16
- negative: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
17
- dark: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
18
- black: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
19
- white: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive)
10
+ "default": /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
11
+ accent: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
12
+ secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
13
+ clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
14
+ positive: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
15
+ warning: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
16
+ negative: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
17
+ dark: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
18
+ black: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
19
+ white: /*#__PURE__*/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);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive)
20
20
  },
21
21
  size: {
22
22
  l: /*#__PURE__*/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);"], buttonGroupTokens.buttonDefaultRadius, buttonGroupTokens.buttonSegmentedRadius, buttonGroupTokens.buttonSideRadius, buttonGroupTokens.buttonHeight, buttonGroupTokens.buttonPadding, buttonGroupTokens.buttonFontFamily, buttonGroupTokens.buttonFontSize, buttonGroupTokens.buttonFontStyle, buttonGroupTokens.buttonFontWeight, buttonGroupTokens.buttonLetterSpacing, 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'];
@@ -0,0 +1,25 @@
1
+ import { css } from 'styled-components';
2
+ import { rangeTokens as tokens } from '../../../../components/Range';
3
+ export var config = {
4
+ defaults: {
5
+ view: 'default',
6
+ size: 'l'
7
+ },
8
+ variations: {
9
+ view: {
10
+ "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor)
11
+ },
12
+ size: {
13
+ l: /*#__PURE__*/css(["", ":0.875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0.375rem 0 1rem;", ":0;", ":0 0 0.75rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":0.875rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin),
14
+ m: /*#__PURE__*/css(["", ":0.75rem;", ":0 0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0 0.375rem 0 0.875rem;", ":0;", ":0 0 0.625rem 0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":3rem;", ":0.75rem;", ":0.875rem 1rem 0.875rem 1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin),
15
+ s: /*#__PURE__*/css(["", ":0.625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0 0.375rem 0 0.75rem;", ":0;", ":0 0 0.5rem 0;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":2.5rem;", ":0.625rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin),
16
+ xs: /*#__PURE__*/css(["", ":0.5rem;", ":0 0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0 0.25rem 0 0.5rem;", ":0;", ":0 0 0.375rem 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":2rem;", ":0.5rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin)
17
+ },
18
+ disabled: {
19
+ "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
20
+ },
21
+ readOnly: {
22
+ "true": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
23
+ }
24
+ }
25
+ };
@@ -0,0 +1,5 @@
1
+ import { component, mergeConfig } from '../../../../engines';
2
+ import { rangeConfig } from '../../../../components/Range';
3
+ import { config } from './Range.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(rangeConfig, config);
5
+ export var Range = /*#__PURE__*/component(mergedConfig);