@salutejs/plasma-new-hope 0.84.0-canary.1213.9221965842.0 → 0.84.1-canary.1209.9214674427.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (468) 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/Combobox/hooks/useFocusController.js +1 -0
  22. package/cjs/components/Combobox/hooks/useFocusController.js.map +1 -1
  23. package/cjs/components/Drawer/Drawer.css +6 -9
  24. package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  25. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  26. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  27. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  28. package/cjs/components/IconButton/IconButton.css +7 -10
  29. package/cjs/components/IconButton/IconButton.styles.js +1 -1
  30. package/cjs/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  31. package/cjs/components/Notification/Notification.css +6 -9
  32. package/cjs/components/Notification/NotificationsProvider.css +6 -9
  33. package/cjs/components/Pagination/Pagination.css +8 -11
  34. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  35. package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  36. package/cjs/components/Select/Select.css +6 -9
  37. package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  38. package/cjs/components/Slider/Slider.css +69 -0
  39. package/cjs/components/Slider/Slider.js +48 -0
  40. package/cjs/components/Slider/Slider.js.map +1 -0
  41. package/cjs/components/Slider/Slider.tokens.js +79 -0
  42. package/cjs/components/Slider/Slider.tokens.js.map +1 -0
  43. package/cjs/components/Slider/components/Double/Double.css +62 -0
  44. package/cjs/components/Slider/components/Double/Double.js +306 -0
  45. package/cjs/components/Slider/components/Double/Double.js.map +1 -0
  46. package/cjs/components/Slider/components/Double/Double.styles.js +61 -0
  47. package/cjs/components/Slider/components/Double/Double.styles.js.map +1 -0
  48. package/cjs/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
  49. package/cjs/components/Slider/components/Single/Single.css +16 -0
  50. package/cjs/components/Slider/components/Single/Single.js +164 -0
  51. package/cjs/components/Slider/components/Single/Single.js.map +1 -0
  52. package/cjs/components/Slider/components/Single/Single.styles.js +45 -0
  53. package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -0
  54. package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
  55. package/cjs/components/Slider/components/SliderBase/SliderBase.css +4 -0
  56. package/cjs/components/Slider/components/SliderBase/SliderBase.js +82 -0
  57. package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
  58. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +33 -0
  59. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
  60. package/cjs/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
  61. package/cjs/components/Slider/ui/Handler/Handler.css +4 -0
  62. package/cjs/components/Slider/ui/Handler/Handler.js +168 -0
  63. package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -0
  64. package/cjs/components/Slider/ui/Handler/Handler.styles.js +21 -0
  65. package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +1 -0
  66. package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
  67. package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -0
  68. package/cjs/components/Slider/ui/Thumb/Thumb.js +31 -0
  69. package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -0
  70. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +15 -0
  71. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
  72. package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
  73. package/cjs/components/Slider/utils/index.js +56 -0
  74. package/cjs/components/Slider/utils/index.js.map +1 -0
  75. package/cjs/components/Slider/variations/_disabled/base.js +9 -0
  76. package/cjs/components/Slider/variations/_disabled/base.js.map +1 -0
  77. package/cjs/components/Slider/variations/_disabled/base_x642ct.css +1 -0
  78. package/cjs/components/Slider/variations/_size/base.js +9 -0
  79. package/cjs/components/Slider/variations/_size/base.js.map +1 -0
  80. package/cjs/components/Slider/variations/_size/base_x642ct.css +1 -0
  81. package/cjs/components/Slider/variations/_view/base.js +9 -0
  82. package/cjs/components/Slider/variations/_view/base.js.map +1 -0
  83. package/cjs/components/Slider/variations/_view/base_x642ct.css +1 -0
  84. package/cjs/components/TextArea/TextArea.js +7 -5
  85. package/cjs/components/TextArea/TextArea.js.map +1 -1
  86. package/cjs/components/TextArea/TextArea.tokens.js +4 -0
  87. package/cjs/components/TextArea/TextArea.tokens.js.map +1 -1
  88. package/cjs/components/TextArea/TextArea_ob9y3r.css +1 -0
  89. package/cjs/components/TextField/TextField.js +12 -3
  90. package/cjs/components/TextField/TextField.js.map +1 -1
  91. package/cjs/components/Toast/Toast.css +6 -9
  92. package/cjs/components/Toast/ToastController.css +6 -9
  93. package/cjs/engines/common.js +4 -0
  94. package/cjs/engines/common.js.map +1 -1
  95. package/cjs/engines/index.js.map +1 -1
  96. package/cjs/hooks/useIsomorphicLayoutEffect.js +15 -0
  97. package/cjs/hooks/useIsomorphicLayoutEffect.js.map +1 -0
  98. package/cjs/index.css +35 -13
  99. package/cjs/index.js +14 -0
  100. package/cjs/index.js.map +1 -1
  101. package/cjs/utils/canUseDOM.js +12 -0
  102. package/cjs/utils/canUseDOM.js.map +1 -0
  103. package/cjs/utils/index.js.map +1 -1
  104. package/es/components/Button/Button.css +6 -9
  105. package/es/components/Button/Button.js +3 -17
  106. package/es/components/Button/Button.js.map +1 -1
  107. package/es/components/Button/Button.styles.js +11 -29
  108. package/es/components/Button/Button.styles.js.map +1 -1
  109. package/es/components/Button/Button.styles_uqvh6u.css +5 -0
  110. package/es/components/Button/Button.tokens.js +0 -5
  111. package/es/components/Button/Button.tokens.js.map +1 -1
  112. package/es/components/Button/variations/_stretching/base.js +1 -1
  113. package/es/components/Button/variations/_stretching/base.js.map +1 -1
  114. package/{cjs/components/Button/variations/_stretching/base_hy8dc.css → es/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
  115. package/es/components/ButtonGroup/ButtonGroup.css +2 -2
  116. package/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  117. package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  118. package/es/components/ButtonGroup/variations/_orientation/base.js +1 -1
  119. package/es/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  120. package/{cjs/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → es/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
  121. package/es/components/ButtonGroup/variations/_view/base.js +1 -1
  122. package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
  123. package/es/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
  124. package/es/components/Combobox/hooks/useFocusController.js +1 -0
  125. package/es/components/Combobox/hooks/useFocusController.js.map +1 -1
  126. package/es/components/Drawer/Drawer.css +6 -9
  127. package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  128. package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  129. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  130. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  131. package/es/components/IconButton/IconButton.css +7 -10
  132. package/es/components/IconButton/IconButton.styles.js +1 -1
  133. package/es/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  134. package/es/components/Notification/Notification.css +6 -9
  135. package/es/components/Notification/NotificationsProvider.css +6 -9
  136. package/es/components/Pagination/Pagination.css +8 -11
  137. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  138. package/es/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  139. package/es/components/Select/Select.css +6 -9
  140. package/es/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  141. package/es/components/Slider/Slider.css +69 -0
  142. package/es/components/Slider/Slider.js +43 -0
  143. package/es/components/Slider/Slider.js.map +1 -0
  144. package/es/components/Slider/Slider.tokens.js +74 -0
  145. package/es/components/Slider/Slider.tokens.js.map +1 -0
  146. package/es/components/Slider/components/Double/Double.css +62 -0
  147. package/es/components/Slider/components/Double/Double.js +302 -0
  148. package/es/components/Slider/components/Double/Double.js.map +1 -0
  149. package/es/components/Slider/components/Double/Double.styles.js +51 -0
  150. package/es/components/Slider/components/Double/Double.styles.js.map +1 -0
  151. package/es/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
  152. package/es/components/Slider/components/Single/Single.css +16 -0
  153. package/es/components/Slider/components/Single/Single.js +160 -0
  154. package/es/components/Slider/components/Single/Single.js.map +1 -0
  155. package/es/components/Slider/components/Single/Single.styles.js +36 -0
  156. package/es/components/Slider/components/Single/Single.styles.js.map +1 -0
  157. package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
  158. package/es/components/Slider/components/SliderBase/SliderBase.css +4 -0
  159. package/es/components/Slider/components/SliderBase/SliderBase.js +78 -0
  160. package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
  161. package/es/components/Slider/components/SliderBase/SliderBase.styles.js +26 -0
  162. package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
  163. package/es/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
  164. package/es/components/Slider/ui/Handler/Handler.css +4 -0
  165. package/es/components/Slider/ui/Handler/Handler.js +164 -0
  166. package/es/components/Slider/ui/Handler/Handler.js.map +1 -0
  167. package/es/components/Slider/ui/Handler/Handler.styles.js +16 -0
  168. package/es/components/Slider/ui/Handler/Handler.styles.js.map +1 -0
  169. package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
  170. package/es/components/Slider/ui/Thumb/Thumb.css +1 -0
  171. package/es/components/Slider/ui/Thumb/Thumb.js +27 -0
  172. package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -0
  173. package/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
  174. package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
  175. package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
  176. package/es/components/Slider/utils/index.js +50 -0
  177. package/es/components/Slider/utils/index.js.map +1 -0
  178. package/es/components/Slider/variations/_disabled/base.js +5 -0
  179. package/es/components/Slider/variations/_disabled/base.js.map +1 -0
  180. package/es/components/Slider/variations/_disabled/base_x642ct.css +1 -0
  181. package/es/components/Slider/variations/_size/base.js +5 -0
  182. package/es/components/Slider/variations/_size/base.js.map +1 -0
  183. package/es/components/Slider/variations/_size/base_x642ct.css +1 -0
  184. package/es/components/Slider/variations/_view/base.js +5 -0
  185. package/es/components/Slider/variations/_view/base.js.map +1 -0
  186. package/es/components/Slider/variations/_view/base_x642ct.css +1 -0
  187. package/es/components/TextArea/TextArea.js +7 -5
  188. package/es/components/TextArea/TextArea.js.map +1 -1
  189. package/es/components/TextArea/TextArea.tokens.js +4 -0
  190. package/es/components/TextArea/TextArea.tokens.js.map +1 -1
  191. package/es/components/TextArea/TextArea_ob9y3r.css +1 -0
  192. package/es/components/TextField/TextField.js +12 -3
  193. package/es/components/TextField/TextField.js.map +1 -1
  194. package/es/components/Toast/Toast.css +6 -9
  195. package/es/components/Toast/ToastController.css +6 -9
  196. package/es/engines/common.js +4 -0
  197. package/es/engines/common.js.map +1 -1
  198. package/es/engines/index.js.map +1 -1
  199. package/es/hooks/useIsomorphicLayoutEffect.js +11 -0
  200. package/es/hooks/useIsomorphicLayoutEffect.js.map +1 -0
  201. package/es/index.css +35 -13
  202. package/es/index.js +8 -0
  203. package/es/index.js.map +1 -1
  204. package/es/utils/canUseDOM.js +8 -0
  205. package/es/utils/canUseDOM.js.map +1 -0
  206. package/es/utils/index.js.map +1 -1
  207. package/package.json +3 -2
  208. package/styled-components/cjs/components/Button/Button.js +2 -16
  209. package/styled-components/cjs/components/Button/Button.styles.js +12 -20
  210. package/styled-components/cjs/components/Button/Button.template-doc.mdx +0 -42
  211. package/styled-components/cjs/components/Button/Button.tokens.js +0 -5
  212. package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
  213. package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  214. package/styled-components/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -2
  215. package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  216. package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  217. package/styled-components/cjs/components/Slider/Slider.js +47 -0
  218. package/styled-components/cjs/components/Slider/Slider.tokens.js +77 -0
  219. package/styled-components/cjs/components/Slider/Slider.types.js +5 -0
  220. package/styled-components/cjs/components/Slider/components/Double/Double.js +318 -0
  221. package/styled-components/cjs/components/Slider/components/Double/Double.styles.js +36 -0
  222. package/styled-components/cjs/components/Slider/components/Double/Double.types.js +5 -0
  223. package/styled-components/cjs/components/Slider/components/Single/Single.js +176 -0
  224. package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +27 -0
  225. package/styled-components/cjs/components/Slider/components/Single/Single.types.js +5 -0
  226. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +83 -0
  227. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +21 -0
  228. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.types.js +5 -0
  229. package/styled-components/cjs/components/Slider/components/index.js +27 -0
  230. package/styled-components/cjs/components/Slider/index.js +32 -0
  231. package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +177 -0
  232. package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +15 -0
  233. package/styled-components/cjs/components/Slider/ui/Handler/Handler.types.js +5 -0
  234. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +32 -0
  235. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +18 -0
  236. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.types.js +5 -0
  237. package/styled-components/cjs/components/Slider/ui/index.js +63 -0
  238. package/styled-components/cjs/components/Slider/utils/index.js +55 -0
  239. package/styled-components/cjs/components/Slider/variations/_disabled/base.js +8 -0
  240. package/styled-components/cjs/components/Slider/variations/_disabled/tokens.json +4 -0
  241. package/styled-components/cjs/components/Slider/variations/_size/base.js +8 -0
  242. package/styled-components/cjs/components/Slider/variations/_size/tokens.json +0 -0
  243. package/styled-components/cjs/components/Slider/variations/_view/base.js +8 -0
  244. package/styled-components/cjs/components/Slider/variations/_view/tokens.json +0 -0
  245. package/styled-components/cjs/components/TextArea/TextArea.js +6 -4
  246. package/styled-components/cjs/components/TextArea/TextArea.tokens.js +4 -0
  247. package/styled-components/cjs/components/TextArea/mixins/applyDynamicLabel.js +1 -1
  248. package/styled-components/cjs/components/TextField/TextField.js +12 -3
  249. package/styled-components/cjs/engines/common.js +4 -0
  250. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  251. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  252. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  253. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  254. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +29 -0
  255. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.js +16 -0
  256. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
  257. package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +4 -4
  258. package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
  259. package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  260. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  261. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  262. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +29 -0
  263. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.js +16 -0
  264. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
  265. package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +4 -4
  266. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
  267. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  268. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  269. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  270. package/styled-components/cjs/hooks/index.js +8 -1
  271. package/styled-components/cjs/hooks/useIsomorphicLayoutEffect.js +12 -0
  272. package/styled-components/cjs/index.js +11 -0
  273. package/styled-components/cjs/utils/canUseDOM.js +11 -0
  274. package/styled-components/cjs/utils/index.js +7 -0
  275. package/styled-components/es/components/Button/Button.js +3 -17
  276. package/styled-components/es/components/Button/Button.styles.js +11 -19
  277. package/styled-components/es/components/Button/Button.template-doc.mdx +0 -42
  278. package/styled-components/es/components/Button/Button.tokens.js +0 -5
  279. package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
  280. package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  281. package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js +2 -3
  282. package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
  283. package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  284. package/styled-components/es/components/Slider/Slider.js +38 -0
  285. package/styled-components/es/components/Slider/Slider.tokens.js +71 -0
  286. package/styled-components/es/components/Slider/Slider.types.js +1 -0
  287. package/styled-components/es/components/Slider/components/Double/Double.js +310 -0
  288. package/styled-components/es/components/Slider/components/Double/Double.styles.js +29 -0
  289. package/styled-components/es/components/Slider/components/Double/Double.types.js +1 -0
  290. package/styled-components/es/components/Slider/components/Single/Single.js +168 -0
  291. package/styled-components/es/components/Slider/components/Single/Single.styles.js +20 -0
  292. package/styled-components/es/components/Slider/components/Single/Single.types.js +1 -0
  293. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +74 -0
  294. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +14 -0
  295. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.types.js +1 -0
  296. package/styled-components/es/components/Slider/components/index.js +3 -0
  297. package/styled-components/es/components/Slider/index.js +3 -0
  298. package/styled-components/es/components/Slider/ui/Handler/Handler.js +168 -0
  299. package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +8 -0
  300. package/styled-components/es/components/Slider/ui/Handler/Handler.types.js +1 -0
  301. package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +25 -0
  302. package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
  303. package/styled-components/es/components/Slider/ui/Thumb/Thumb.types.js +1 -0
  304. package/styled-components/es/components/Slider/ui/index.js +5 -0
  305. package/styled-components/es/components/Slider/utils/index.js +47 -0
  306. package/styled-components/es/components/Slider/variations/_disabled/base.js +2 -0
  307. package/styled-components/es/components/Slider/variations/_disabled/tokens.json +4 -0
  308. package/styled-components/es/components/Slider/variations/_size/base.js +2 -0
  309. package/styled-components/es/components/Slider/variations/_size/tokens.json +0 -0
  310. package/styled-components/es/components/Slider/variations/_view/base.js +2 -0
  311. package/styled-components/es/components/Slider/variations/_view/tokens.json +0 -0
  312. package/styled-components/es/components/TextArea/TextArea.js +6 -4
  313. package/styled-components/es/components/TextArea/TextArea.tokens.js +4 -0
  314. package/styled-components/es/components/TextArea/mixins/applyDynamicLabel.js +1 -1
  315. package/styled-components/es/components/TextField/TextField.js +12 -3
  316. package/styled-components/es/engines/common.js +4 -0
  317. package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  318. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  319. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  320. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  321. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +23 -0
  322. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.js +10 -0
  323. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
  324. package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +4 -4
  325. package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
  326. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  327. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  328. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  329. package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +23 -0
  330. package/styled-components/es/examples/plasma_web/components/Slider/Slider.js +10 -0
  331. package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
  332. package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.config.js +4 -4
  333. package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
  334. package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  335. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  336. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  337. package/styled-components/es/hooks/index.js +2 -1
  338. package/styled-components/es/hooks/useIsomorphicLayoutEffect.js +7 -0
  339. package/styled-components/es/index.js +2 -1
  340. package/styled-components/es/utils/canUseDOM.js +5 -0
  341. package/styled-components/es/utils/index.js +1 -0
  342. package/types/components/Button/Button.d.ts.map +1 -1
  343. package/types/components/Button/Button.styles.d.ts +1 -5
  344. package/types/components/Button/Button.styles.d.ts.map +1 -1
  345. package/types/components/Button/Button.tokens.d.ts +0 -5
  346. package/types/components/Button/Button.tokens.d.ts.map +1 -1
  347. package/types/components/Button/Button.types.d.ts +4 -16
  348. package/types/components/Button/Button.types.d.ts.map +1 -1
  349. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +0 -1
  350. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
  351. package/types/components/ButtonGroup/variations/_orientation/base.d.ts.map +1 -1
  352. package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
  353. package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts.map +1 -1
  354. package/types/components/Notification/Notification.styles.d.ts +1 -43
  355. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  356. package/types/components/Pagination/Pagination.styles.d.ts +2 -86
  357. package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
  358. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts +1 -43
  359. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts.map +1 -1
  360. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts +1 -43
  361. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts.map +1 -1
  362. package/types/components/Slider/Slider.d.ts +27 -0
  363. package/types/components/Slider/Slider.d.ts.map +1 -0
  364. package/types/components/Slider/Slider.tokens.d.ts +72 -0
  365. package/types/components/Slider/Slider.tokens.d.ts.map +1 -0
  366. package/types/components/Slider/Slider.types.d.ts +3 -0
  367. package/types/components/Slider/Slider.types.d.ts.map +1 -0
  368. package/types/components/Slider/components/Double/Double.d.ts +4 -0
  369. package/types/components/Slider/components/Double/Double.d.ts.map +1 -0
  370. package/types/components/Slider/components/Double/Double.styles.d.ts +43 -0
  371. package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -0
  372. package/types/components/Slider/components/Double/Double.types.d.ts +65 -0
  373. package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -0
  374. package/types/components/Slider/components/Single/Single.d.ts +4 -0
  375. package/types/components/Slider/components/Single/Single.d.ts.map +1 -0
  376. package/types/components/Slider/components/Single/Single.styles.d.ts +8 -0
  377. package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -0
  378. package/types/components/Slider/components/Single/Single.types.d.ts +55 -0
  379. package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -0
  380. package/types/components/Slider/components/SliderBase/SliderBase.d.ts +4 -0
  381. package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -0
  382. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +6 -0
  383. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -0
  384. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +45 -0
  385. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -0
  386. package/types/components/Slider/components/index.d.ts +6 -0
  387. package/types/components/Slider/components/index.d.ts.map +1 -0
  388. package/types/components/Slider/index.d.ts +6 -0
  389. package/types/components/Slider/index.d.ts.map +1 -0
  390. package/types/components/Slider/ui/Handler/Handler.d.ts +9 -0
  391. package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -0
  392. package/types/components/Slider/ui/Handler/Handler.styles.d.ts +4 -0
  393. package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -0
  394. package/types/components/Slider/ui/Handler/Handler.types.d.ts +24 -0
  395. package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -0
  396. package/types/components/Slider/ui/Thumb/Thumb.d.ts +4 -0
  397. package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -0
  398. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts +5 -0
  399. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -0
  400. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +12 -0
  401. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -0
  402. package/types/components/Slider/ui/index.d.ts +6 -0
  403. package/types/components/Slider/ui/index.d.ts.map +1 -0
  404. package/types/components/Slider/utils/index.d.ts +33 -0
  405. package/types/components/Slider/utils/index.d.ts.map +1 -0
  406. package/types/components/Slider/variations/_disabled/base.d.ts +2 -0
  407. package/types/components/Slider/variations/_disabled/base.d.ts.map +1 -0
  408. package/types/components/Slider/variations/_size/base.d.ts +2 -0
  409. package/types/components/Slider/variations/_size/base.d.ts.map +1 -0
  410. package/types/components/Slider/variations/_view/base.d.ts +2 -0
  411. package/types/components/Slider/variations/_view/base.d.ts.map +1 -0
  412. package/types/components/TextArea/TextArea.d.ts.map +1 -1
  413. package/types/components/TextArea/TextArea.tokens.d.ts +4 -0
  414. package/types/components/TextArea/TextArea.tokens.d.ts.map +1 -1
  415. package/types/components/TextArea/mixins/applyDynamicLabel.d.ts.map +1 -1
  416. package/types/components/TextField/TextField.d.ts.map +1 -1
  417. package/types/components/Toast/Toast.styles.d.ts +1 -43
  418. package/types/components/Toast/Toast.styles.d.ts.map +1 -1
  419. package/types/components/Toast/utils.d.ts +1 -43
  420. package/types/components/Toast/utils.d.ts.map +1 -1
  421. package/types/engines/common.d.ts +3 -3
  422. package/types/engines/common.d.ts.map +1 -1
  423. package/types/engines/index.d.ts +1 -1
  424. package/types/engines/index.d.ts.map +1 -1
  425. package/types/engines/types.d.ts +4 -0
  426. package/types/engines/types.d.ts.map +1 -1
  427. package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
  428. package/types/examples/plasma_b2c/components/Button/Button.d.ts +1 -43
  429. package/types/examples/plasma_b2c/components/Button/Button.d.ts.map +1 -1
  430. package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  431. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +1 -43
  432. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
  433. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts +22 -0
  434. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -0
  435. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +21 -0
  436. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -0
  437. package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts.map +1 -1
  438. package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
  439. package/types/examples/plasma_web/components/Button/Button.d.ts +1 -43
  440. package/types/examples/plasma_web/components/Button/Button.d.ts.map +1 -1
  441. package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  442. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +1 -43
  443. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
  444. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts +22 -0
  445. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -0
  446. package/types/examples/plasma_web/components/Slider/Slider.d.ts +21 -0
  447. package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -0
  448. package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts.map +1 -1
  449. package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
  450. package/types/examples/sds_engineer/components/Button/Button.d.ts +1 -43
  451. package/types/examples/sds_engineer/components/Button/Button.d.ts.map +1 -1
  452. package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  453. package/types/hooks/index.d.ts +1 -0
  454. package/types/hooks/index.d.ts.map +1 -1
  455. package/types/hooks/useIsomorphicLayoutEffect.d.ts +6 -0
  456. package/types/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
  457. package/types/index.d.ts +1 -0
  458. package/types/index.d.ts.map +1 -1
  459. package/types/utils/canUseDOM.d.ts +6 -0
  460. package/types/utils/canUseDOM.d.ts.map +1 -0
  461. package/types/utils/index.d.ts +1 -0
  462. package/types/utils/index.d.ts.map +1 -1
  463. package/cjs/components/Button/Button.styles_1oz1dew.css +0 -8
  464. package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
  465. package/cjs/components/TextArea/TextArea_qicm5y.css +0 -1
  466. package/es/components/Button/Button.styles_1oz1dew.css +0 -8
  467. package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
  468. package/es/components/TextArea/TextArea_qicm5y.css +0 -1
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -0,0 +1,63 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _exportNames = {
7
+ ThumbBase: true
8
+ };
9
+ Object.defineProperty(exports, "ThumbBase", {
10
+ enumerable: true,
11
+ get: function get() {
12
+ return _Thumb2.ThumbBase;
13
+ }
14
+ });
15
+ var _Handler = /*#__PURE__*/require("./Handler/Handler");
16
+ Object.keys(_Handler).forEach(function (key) {
17
+ if (key === "default" || key === "__esModule") return;
18
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
19
+ if (key in exports && exports[key] === _Handler[key]) return;
20
+ Object.defineProperty(exports, key, {
21
+ enumerable: true,
22
+ get: function get() {
23
+ return _Handler[key];
24
+ }
25
+ });
26
+ });
27
+ var _Thumb = /*#__PURE__*/require("./Thumb/Thumb");
28
+ Object.keys(_Thumb).forEach(function (key) {
29
+ if (key === "default" || key === "__esModule") return;
30
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
31
+ if (key in exports && exports[key] === _Thumb[key]) return;
32
+ Object.defineProperty(exports, key, {
33
+ enumerable: true,
34
+ get: function get() {
35
+ return _Thumb[key];
36
+ }
37
+ });
38
+ });
39
+ var _Thumb2 = /*#__PURE__*/require("./Thumb/Thumb.styles");
40
+ var _Handler2 = /*#__PURE__*/require("./Handler/Handler.types");
41
+ Object.keys(_Handler2).forEach(function (key) {
42
+ if (key === "default" || key === "__esModule") return;
43
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
44
+ if (key in exports && exports[key] === _Handler2[key]) return;
45
+ Object.defineProperty(exports, key, {
46
+ enumerable: true,
47
+ get: function get() {
48
+ return _Handler2[key];
49
+ }
50
+ });
51
+ });
52
+ var _Thumb3 = /*#__PURE__*/require("./Thumb/Thumb.types");
53
+ Object.keys(_Thumb3).forEach(function (key) {
54
+ if (key === "default" || key === "__esModule") return;
55
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
56
+ if (key in exports && exports[key] === _Thumb3[key]) return;
57
+ Object.defineProperty(exports, key, {
58
+ enumerable: true,
59
+ get: function get() {
60
+ return _Thumb3[key];
61
+ }
62
+ });
63
+ });
@@ -0,0 +1,55 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getOffsets = getOffsets;
7
+ exports.getSliderThumbValue = getSliderThumbValue;
8
+ exports.sizeData = void 0;
9
+ /**
10
+ * Расчитать значение слайдера с учетом его координат и шага изменений.
11
+ * @param {number} handleCenterXRelative
12
+ * @param {number} stepSize
13
+ * @param {number} min
14
+ * @param {number} max
15
+ * @return {number}
16
+ */
17
+ function getSliderThumbValue(handleCenterXRelative, stepSize, min, max) {
18
+ var newValue = Math.round(handleCenterXRelative / stepSize) + min;
19
+ return Math.min(Math.max(newValue, min), max);
20
+ }
21
+
22
+ /**
23
+ * Расчитывает значение отступа слайдера на основе его положения (справа, слева) на отрезке слайдера.
24
+ * Значение используется для правильного расчета ограничения движения слайдера.
25
+ * @param ref
26
+ * @param {'left' | 'right'} side
27
+ * @return Array<number>
28
+ */
29
+ function getOffsets(ref, side) {
30
+ if (!ref || !('current' in ref) || !ref.current || !side) {
31
+ return [0, 0];
32
+ }
33
+ var size = ref.current.clientWidth;
34
+ if (side === 'left') {
35
+ return [0, size];
36
+ }
37
+ if (side === 'right') {
38
+ return [size, 0];
39
+ }
40
+ return [0, 0];
41
+ }
42
+ var sizeData = exports.sizeData = {
43
+ s: {
44
+ indent: 0.5,
45
+ fontSizeMultiplier: 16
46
+ },
47
+ m: {
48
+ indent: 0.75,
49
+ fontSizeMultiplier: 16
50
+ },
51
+ l: {
52
+ indent: 0.75,
53
+ fontSizeMultiplier: 16
54
+ }
55
+ };
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
@@ -0,0 +1,4 @@
1
+ {
2
+ "type": "boolean",
3
+ "tokens": ["--plasma-slider-disabled-opacity"]
4
+ }
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.base = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
@@ -57,16 +57,17 @@ var getDynamicLabelClasses = exports.getDynamicLabelClasses = function getDynami
57
57
  labelPlacement = props.labelPlacement,
58
58
  autoResize = props.autoResize,
59
59
  rows = props.rows,
60
- value = props.value;
60
+ value = props.value,
61
+ size = props.size;
61
62
 
62
63
  // Добавить класс отвечающий за изменение цвета плейсхолдера при фокусе
63
64
  var withFocusedOuterUpPlaceholder = !readOnly && focused && (!label || labelPlacement === 'outer') ? focusedOuterPlaceholderColor : undefined;
64
65
 
65
66
  // Добавить класс отвечающий за поднятие и уменьшение плейсхолдера
66
- var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !autoResize && !rows && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
67
+ var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !autoResize && !rows && size !== 'xs' && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
67
68
 
68
69
  // Добавить класс отвечающий за скрытие плейсхолдера
69
- var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && (rows || autoResize) || labelPlacement === 'outer' && value ? hidePlaceHolder : undefined;
70
+ var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && (rows || autoResize) || labelPlacement === 'outer' && value || labelPlacement === 'inner' && size === 'xs' && value ? hidePlaceHolder : undefined;
70
71
  return [withFocusedOuterUpPlaceholder, withInnerPlaceholderUp, withHidePlaceholder];
71
72
  };
72
73
  var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
@@ -118,7 +119,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
118
119
  var overriddenView = status !== undefined ? fallbackStatusMap[status] : view;
119
120
  var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
120
121
  var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
121
- var placeLabel = labelPlacement === 'inner' && label ? label : placeholder;
122
+ var placeLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;
122
123
  (0, _plasmaCore.useResizeObserver)(outerRef, function (currentElement) {
123
124
  var _currentElement$style = currentElement.style,
124
125
  inlineWidth = _currentElement$style.width,
@@ -144,6 +145,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
144
145
  onChange === null || onChange === void 0 || onChange(event);
145
146
  }, [value, onChange]);
146
147
  var dynamicLabelClasses = getDynamicLabelClasses({
148
+ size: size,
147
149
  readOnly: readOnly,
148
150
  label: label,
149
151
  labelPlacement: labelPlacement,
@@ -121,6 +121,10 @@ var tokens = exports.tokens = {
121
121
  labelInnerLetterSpacing: '--plasma-textarea-label-inner-letter-spacing',
122
122
  /** Высота строки для элемента label, когда он внутри и уменьшен */
123
123
  labelInnerLineHeight: '--plasma-textarea-label-inner-line-height',
124
+ /** Отступ сверху для элемента textarea при фокусе */
125
+ labelInnerTop: '--plasma-textarea-label-inner-top',
126
+ /** Отступ между Label и TextArea */
127
+ labelInnerMarginBottom: '--plasma-textarea-label-inner-margin-bottom',
124
128
  /** Шрифт для элемента textarea */
125
129
  inputFontFamily: '--plasma-textarea-input-font-family',
126
130
  /** Размер шрифта для элемента textarea */
@@ -11,4 +11,4 @@ var innerPlaceholderUp = _TextArea.classes.innerPlaceholderUp,
11
11
  styledTextArea = _TextArea.classes.styledTextArea,
12
12
  styledTextAreaWrapper = _TextArea.classes.styledTextAreaWrapper,
13
13
  styledPlaceholder = _TextArea.classes.styledPlaceholder;
14
- var applyDynamicLabel = exports.applyDynamicLabel = /*#__PURE__*/"\n .".concat(String(innerPlaceholderUp), " {\n .").concat(String(styledTextArea), " {\n height: calc(var(--plasma_private-textarea-input-actual-height) - 1rem);\n }\n\n .").concat(String(styledTextAreaWrapper), " {\n padding-top: calc(var(").concat(_TextArea.tokens.inputPaddingTop, ") + 1rem);\n }\n\n .").concat(String(styledPlaceholder), " {\n font-family: var(").concat(_TextArea.tokens.labelInnerFontFamily, ");\n font-size: var(").concat(_TextArea.tokens.labelInnerFontSize, ");\n font-style: var(").concat(_TextArea.tokens.labelInnerFontStyle, ");\n font-weight: var(").concat(_TextArea.tokens.labelInnerFontWeight, ");\n letter-spacing: var(").concat(_TextArea.tokens.labelInnerLetterSpacing, ");\n line-height: var(").concat(_TextArea.tokens.labelInnerLineHeight, ");\n }\n }\n\n .").concat(String(hidePlaceHolder), " {\n .").concat(String(styledPlaceholder), " {\n display: none;\n }\n }\n\n .").concat(String(focusedOuterPlaceholderColor), " {\n .").concat(String(styledPlaceholder), " {\n color: var(").concat(_TextArea.tokens.placeholderColorFocus, ");\n }\n }\n");
14
+ var applyDynamicLabel = exports.applyDynamicLabel = /*#__PURE__*/"\n .".concat(String(innerPlaceholderUp), " {\n .").concat(String(styledTextArea), " {\n height: calc(var(--plasma_private-textarea-input-actual-height) - var(").concat(_TextArea.tokens.labelInnerTop, "));\n }\n\n .").concat(String(styledTextAreaWrapper), " {\n padding-top: calc(calc(var(").concat(_TextArea.tokens.labelInnerTop, ") + var(").concat(_TextArea.tokens.labelInnerFontSize, ")) + var(").concat(_TextArea.tokens.labelInnerMarginBottom, "));\n }\n\n .").concat(String(styledPlaceholder), " {\n font-family: var(").concat(_TextArea.tokens.labelInnerFontFamily, ");\n font-size: var(").concat(_TextArea.tokens.labelInnerFontSize, ");\n font-style: var(").concat(_TextArea.tokens.labelInnerFontStyle, ");\n font-weight: var(").concat(_TextArea.tokens.labelInnerFontWeight, ");\n letter-spacing: var(").concat(_TextArea.tokens.labelInnerLetterSpacing, ");\n line-height: var(").concat(_TextArea.tokens.labelInnerLineHeight, ");\n top: var(").concat(_TextArea.tokens.labelInnerTop, ");\n }\n }\n\n .").concat(String(hidePlaceHolder), " {\n .").concat(String(styledPlaceholder), " {\n display: none;\n }\n }\n\n .").concat(String(focusedOuterPlaceholderColor), " {\n .").concat(String(styledPlaceholder), " {\n color: var(").concat(_TextArea.tokens.placeholderColorFocus, ");\n }\n }\n");
@@ -18,7 +18,7 @@ var _TextField = /*#__PURE__*/require("./TextField.styles");
18
18
  var _TextField2 = /*#__PURE__*/require("./TextField.tokens");
19
19
  var _ui = /*#__PURE__*/require("./ui");
20
20
  var _hooks = /*#__PURE__*/require("./hooks");
21
- var _excluded = ["id", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch"];
21
+ var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
22
22
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
23
23
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
24
24
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -34,6 +34,8 @@ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:bloc
34
34
  var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
35
35
  return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
36
36
  var id = _ref.id,
37
+ className = _ref.className,
38
+ style = _ref.style,
37
39
  contentLeft = _ref.contentLeft,
38
40
  contentRight = _ref.contentRight,
39
41
  label = _ref.label,
@@ -52,6 +54,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
52
54
  onChange = _ref.onChange,
53
55
  onChangeChips = _ref.onChangeChips,
54
56
  onSearch = _ref.onSearch,
57
+ onKeyDown = _ref.onKeyDown,
55
58
  rest = _objectWithoutProperties(_ref, _excluded);
56
59
  var contentRef = (0, _react.useRef)(null);
57
60
  var inputRef = (0, _react.useRef)(null);
@@ -131,6 +134,10 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
131
134
  chipsRefs.current[index] = element;
132
135
  }
133
136
  };
137
+ var handleOnKeyDown = function handleOnKeyDown(event) {
138
+ handleInputKeydown(event);
139
+ onKeyDown && onKeyDown(event);
140
+ };
134
141
  (0, _react.useEffect)(function () {
135
142
  if (!isChipEnumeration && !(values !== null && values !== void 0 && values.length)) {
136
143
  return;
@@ -149,7 +156,9 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
149
156
  disabled: disabled,
150
157
  readOnly: !disabled && readOnly,
151
158
  labelPlacement: innerLabelPlacementValue,
152
- onClick: handleInputFocus
159
+ onClick: handleInputFocus,
160
+ className: className,
161
+ style: style
153
162
  }, labelInside || innerLabelValue && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
154
163
  id: labelId,
155
164
  htmlFor: id
@@ -190,7 +199,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
190
199
  disabled: disabled,
191
200
  readOnly: !disabled && readOnly,
192
201
  onChange: handleChange,
193
- onKeyDown: handleInputKeydown
202
+ onKeyDown: handleOnKeyDown
194
203
  })), labelInside && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
195
204
  id: labelId,
196
205
  htmlFor: innerId
@@ -21,6 +21,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
21
21
  function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
22
22
  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
23
23
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
24
+ //
25
+ // Тип HTMLAttributesOmitOnChange требуется чтобы использовать компонент с кастомным пропсом onChange
26
+ //
27
+
24
28
  var getStaticVariants = exports.getStaticVariants = function getStaticVariants(config) {
25
29
  if (!config.variations) {
26
30
  return [];
@@ -14,27 +14,27 @@ var config = exports.config = {
14
14
  },
15
15
  variations: {
16
16
  view: {
17
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
18
- accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
19
- secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
20
- clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
21
- positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
22
- warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
23
- negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
24
- dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
25
- black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
26
- white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive)
17
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
18
+ accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
19
+ secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
20
+ clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
21
+ positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
22
+ warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
23
+ negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
24
+ dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
25
+ black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
26
+ white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive)
27
27
  },
28
28
  size: {
29
- l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 -0.125rem;", ":0 -0.125rem 0 0.5rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
30
- lr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 0;", ":0 0 0 0.5rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
31
- m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 -0.125rem;", ":0 -0.125rem 0 0.375rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
32
- mr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 0;", ":0 0 0 0.375rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
33
- s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
34
- sr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
35
- xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
36
- xsr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
37
- xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin)
29
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
30
+ lr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
31
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
32
+ mr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
33
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
34
+ sr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
35
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
36
+ xsr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
37
+ xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor)
38
38
  },
39
39
  disabled: {
40
40
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Button.buttonTokens.buttonDisabledOpacity)
@@ -4,103 +4,57 @@ import type { StoryObj, Meta } from '@storybook/react';
4
4
  import { disableProps } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { IconMic } from '../../../../components/_Icon';
7
- import { WithTheme } from '../../../_helpers';
7
+ import { buttonConfig } from '../../../../components/Button';
8
+ import { mergeConfig } from '../../../../engines';
9
+ import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
10
 
11
+ import { config } from './Button.config';
9
12
  import { Button } from './Button';
10
13
 
11
- const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
12
- const sizes = ['l', 'm', 's', 'xs', 'xxs'];
13
- const stretchingValues = ['auto', 'filled', 'fixed'];
14
- const pinValues = [
15
- '',
16
- 'square-square',
17
- 'square-clear',
18
- 'clear-square',
19
- 'clear-clear',
20
- 'clear-circle',
21
- 'circle-clear',
22
- 'circle-circle',
23
- ];
24
- const contentPlacinValues = ['default', 'relaxed'];
25
-
26
14
  const meta: Meta<typeof Button> = {
27
15
  title: 'plasma_b2c/Button',
28
16
  decorators: [WithTheme],
29
17
  component: Button,
30
18
  args: {
19
+ text: 'Hello',
31
20
  view: 'default',
32
21
  size: 'm',
33
- contentPlacing: 'default',
34
- stretching: 'auto',
35
- text: 'Hello',
36
- value: 'Value',
37
22
  disabled: false,
38
23
  focused: true,
39
24
  square: false,
25
+ stretching: 'auto',
40
26
  isLoading: false,
41
27
  },
42
28
  argTypes: {
43
- view: {
44
- options: views,
45
- control: {
46
- type: 'select',
47
- },
48
- },
49
- size: {
50
- options: sizes,
51
- control: {
52
- type: 'select',
53
- },
54
- },
55
- contentPlacing: {
56
- options: contentPlacinValues,
29
+ ...argTypesFromConfig(mergeConfig(buttonConfig, config)),
30
+ pin: {
31
+ options: [
32
+ 'square-square',
33
+ 'square-clear',
34
+ 'clear-square',
35
+ 'clear-clear',
36
+ 'clear-circle',
37
+ 'circle-clear',
38
+ 'circle-circle',
39
+ '',
40
+ ],
57
41
  control: {
58
42
  type: 'select',
59
43
  },
44
+ table: { defaultValue: { summary: 'bottom' } },
60
45
  },
61
46
  stretching: {
62
- options: stretchingValues,
47
+ options: ['auto', 'filled', 'fixed'],
63
48
  control: {
64
49
  type: 'select',
65
50
  },
66
51
  },
67
- pin: {
68
- options: pinValues,
69
- control: {
70
- type: 'select',
71
- },
72
- table: { defaultValue: { summary: 'bottom' } },
73
- },
74
52
  },
75
53
  };
76
54
 
77
55
  export default meta;
78
56
 
79
- type StoryPropsDefault = ComponentProps<typeof Button> & {
80
- enableContentLeft: boolean;
81
- enableContentRight: boolean;
82
- };
83
-
84
- const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
85
- const iconSize = size === 'xs' ? 'xs' : 's';
86
-
87
- return (
88
- <Button
89
- contentLeft={enableContentLeft ? <IconMic size={iconSize} color="inherit" /> : undefined}
90
- contentRight={enableContentRight ? <IconMic size={iconSize} color="inherit" /> : undefined}
91
- size={size}
92
- {...rest}
93
- />
94
- );
95
- };
96
-
97
- export const Default: StoryObj<StoryPropsDefault> = {
98
- args: {
99
- enableContentLeft: false,
100
- enableContentRight: false,
101
- },
102
- render: (args) => <StoryDefault {...args} />,
103
- };
57
+ export const Default: StoryObj<ComponentProps<typeof Button>> = {};
104
58
 
105
59
  export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>> = {
106
60
  argTypes: { ...disableProps(['text']) },
@@ -13,16 +13,16 @@ var config = exports.config = {
13
13
  },
14
14
  variations: {
15
15
  view: {
16
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
17
- accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
18
- secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
19
- clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
20
- positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
21
- warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
22
- negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
23
- dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
24
- black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
25
- white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
16
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
17
+ accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
18
+ secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
19
+ clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
20
+ positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
21
+ warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
22
+ negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
23
+ dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
24
+ black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
25
+ white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
26
26
  },
27
27
  size: {
28
28
  l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _ButtonGroup.buttonGroupTokens.buttonDefaultRadius, _ButtonGroup.buttonGroupTokens.buttonSegmentedRadius, _ButtonGroup.buttonGroupTokens.buttonSideRadius, _ButtonGroup.buttonGroupTokens.buttonHeight, _ButtonGroup.buttonGroupTokens.buttonPadding, _ButtonGroup.buttonGroupTokens.buttonFontFamily, _ButtonGroup.buttonGroupTokens.buttonFontSize, _ButtonGroup.buttonGroupTokens.buttonFontStyle, _ButtonGroup.buttonGroupTokens.buttonFontWeight, _ButtonGroup.buttonGroupTokens.buttonLetterSpacing, _ButtonGroup.buttonGroupTokens.buttonLineHeight),
@@ -11,7 +11,7 @@ import { ButtonGroup } from './ButtonGroup';
11
11
  type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
12
12
  type Story = StoryObj<StoryProps>;
13
13
 
14
- const views = ['accent', 'default', 'secondary', 'positive', 'warning', 'negative', 'clear'];
14
+ const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear'];
15
15
  const sizes = ['l', 'm', 's', 'xs', 'xxs'];
16
16
  const orientationValues = ['horizontal', 'vertical'];
17
17
  const gapValues = ['none', 'dense', 'wide'];