@salutejs/plasma-new-hope 0.175.0-canary.1452.11541985977.0 → 0.175.0-canary.1500.11549138907.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (370) hide show
  1. package/cjs/components/Badge/Badge.css +2 -0
  2. package/cjs/components/Badge/Badge.js +17 -4
  3. package/cjs/components/Badge/Badge.js.map +1 -1
  4. package/cjs/components/Badge/Badge.tokens.js +2 -1
  5. package/cjs/components/Badge/Badge.tokens.js.map +1 -1
  6. package/cjs/components/Badge/variations/_truncate/base.js +9 -0
  7. package/cjs/components/Badge/variations/_truncate/base.js.map +1 -0
  8. package/cjs/components/Badge/variations/_truncate/base_nf9u2h.css +1 -0
  9. package/cjs/components/Slider/Slider.css +13 -15
  10. package/cjs/components/Slider/Slider.js +2 -11
  11. package/cjs/components/Slider/Slider.js.map +1 -1
  12. package/cjs/components/Slider/Slider.tokens.js +17 -23
  13. package/cjs/components/Slider/Slider.tokens.js.map +1 -1
  14. package/cjs/components/Slider/components/Double/Double.css +8 -8
  15. package/cjs/components/Slider/components/Double/Double.js +23 -58
  16. package/cjs/components/Slider/components/Double/Double.js.map +1 -1
  17. package/cjs/components/Slider/components/Single/Single.css +14 -14
  18. package/cjs/components/Slider/components/Single/Single.js +33 -64
  19. package/cjs/components/Slider/components/Single/Single.js.map +1 -1
  20. package/cjs/components/Slider/components/Single/Single.styles.js +4 -4
  21. package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -1
  22. package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
  23. package/cjs/components/Slider/components/SliderBase/SliderBase.css +5 -5
  24. package/cjs/components/Slider/components/SliderBase/SliderBase.js +12 -31
  25. package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
  26. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
  27. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
  28. package/cjs/components/Slider/components/SliderBase/SliderBase.styles_9s4eb3.css +5 -0
  29. package/cjs/components/Slider/ui/Handler/Handler.css +3 -3
  30. package/cjs/components/Slider/ui/Handler/Handler.js +88 -49
  31. package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -1
  32. package/cjs/components/Slider/ui/Handler/Handler.styles.js +7 -17
  33. package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
  34. package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
  35. package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -1
  36. package/cjs/components/Slider/ui/Thumb/Thumb.js +2 -3
  37. package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -1
  38. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
  39. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
  40. package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
  41. package/cjs/components/Slider/utils/index.js +10 -28
  42. package/cjs/components/Slider/utils/index.js.map +1 -1
  43. package/cjs/components/Slider/variations/_view/base.js +1 -1
  44. package/cjs/components/Slider/variations/_view/base.js.map +1 -1
  45. package/cjs/components/Slider/variations/_view/base_x642ct.css +1 -0
  46. package/cjs/components/Tabs/tokens.js +2 -1
  47. package/cjs/components/Tabs/tokens.js.map +1 -1
  48. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.css +7 -5
  49. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +14 -3
  50. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
  51. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
  52. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js.map +1 -1
  53. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/{HorizontalTabItem.styles_hfqv5b.css → HorizontalTabItem.styles_1vj7dbl.css} +1 -1
  54. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js +9 -0
  55. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js.map +1 -0
  56. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base_1b34xv3.css +1 -0
  57. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.css +7 -5
  58. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +14 -3
  59. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js.map +1 -1
  60. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +1 -1
  61. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js.map +1 -1
  62. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles_6ssvos.css +5 -0
  63. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js +9 -0
  64. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js.map +1 -0
  65. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base_1nwonlh.css +1 -0
  66. package/cjs/index.css +29 -25
  67. package/emotion/cjs/components/Badge/Badge.js +22 -4
  68. package/emotion/cjs/components/Badge/Badge.tokens.js +2 -1
  69. package/emotion/cjs/components/Badge/variations/_truncate/base.js +10 -0
  70. package/emotion/cjs/components/Badge/variations/_truncate/tokens.json +1 -0
  71. package/emotion/cjs/components/Slider/Slider.js +2 -10
  72. package/emotion/cjs/components/Slider/Slider.template-doc.mdx +0 -26
  73. package/emotion/cjs/components/Slider/Slider.tokens.js +17 -23
  74. package/emotion/cjs/components/Slider/components/Double/Double.js +19 -54
  75. package/emotion/cjs/components/Slider/components/Single/Single.js +33 -64
  76. package/emotion/cjs/components/Slider/components/Single/Single.styles.js +9 -18
  77. package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.js +12 -31
  78. package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +10 -10
  79. package/emotion/cjs/components/Slider/ui/Handler/Handler.js +88 -52
  80. package/emotion/cjs/components/Slider/ui/Handler/Handler.styles.js +15 -9
  81. package/emotion/cjs/components/Slider/ui/Thumb/Thumb.js +2 -3
  82. package/emotion/cjs/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
  83. package/emotion/cjs/components/Slider/utils/index.js +10 -28
  84. package/emotion/cjs/components/Slider/variations/_view/base.js +1 -2
  85. package/emotion/cjs/components/Tabs/tokens.js +2 -1
  86. package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +19 -3
  87. package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +6 -6
  88. package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js +10 -0
  89. package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json +1 -0
  90. package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +19 -3
  91. package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +6 -6
  92. package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js +10 -0
  93. package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json +1 -0
  94. package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +17 -14
  95. package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +5 -1
  96. package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
  97. package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +16 -98
  98. package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +49 -16
  99. package/emotion/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +18 -15
  100. package/emotion/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +9 -6
  101. package/emotion/cjs/examples/plasma_web/components/Slider/Slider.config.js +7 -7
  102. package/emotion/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +15 -98
  103. package/emotion/es/components/Badge/Badge.js +23 -4
  104. package/emotion/es/components/Badge/Badge.tokens.js +2 -1
  105. package/emotion/es/components/Badge/variations/_truncate/base.js +4 -0
  106. package/emotion/es/components/Badge/variations/_truncate/tokens.json +1 -0
  107. package/emotion/es/components/Slider/Slider.js +2 -11
  108. package/emotion/es/components/Slider/Slider.template-doc.mdx +0 -26
  109. package/emotion/es/components/Slider/Slider.tokens.js +17 -23
  110. package/emotion/es/components/Slider/components/Double/Double.js +19 -54
  111. package/emotion/es/components/Slider/components/Single/Single.js +34 -65
  112. package/emotion/es/components/Slider/components/Single/Single.styles.js +8 -17
  113. package/emotion/es/components/Slider/components/SliderBase/SliderBase.js +12 -31
  114. package/emotion/es/components/Slider/components/SliderBase/SliderBase.styles.js +11 -11
  115. package/emotion/es/components/Slider/ui/Handler/Handler.js +86 -51
  116. package/emotion/es/components/Slider/ui/Handler/Handler.styles.js +16 -10
  117. package/emotion/es/components/Slider/ui/Thumb/Thumb.js +2 -3
  118. package/emotion/es/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
  119. package/emotion/es/components/Slider/utils/index.js +10 -28
  120. package/emotion/es/components/Slider/variations/_view/base.js +1 -2
  121. package/emotion/es/components/Tabs/tokens.js +2 -1
  122. package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +20 -3
  123. package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +6 -6
  124. package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js +4 -0
  125. package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json +1 -0
  126. package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +20 -3
  127. package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +6 -6
  128. package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js +4 -0
  129. package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json +1 -0
  130. package/emotion/es/examples/plasma_b2c/components/Badge/Badge.config.js +17 -14
  131. package/emotion/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +5 -1
  132. package/emotion/es/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
  133. package/emotion/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +16 -98
  134. package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +49 -16
  135. package/emotion/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +18 -15
  136. package/emotion/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +9 -6
  137. package/emotion/es/examples/plasma_web/components/Slider/Slider.config.js +7 -7
  138. package/emotion/es/examples/plasma_web/components/Slider/Slider.stories.tsx +15 -98
  139. package/es/components/Badge/Badge.css +2 -0
  140. package/es/components/Badge/Badge.js +18 -5
  141. package/es/components/Badge/Badge.js.map +1 -1
  142. package/es/components/Badge/Badge.tokens.js +2 -1
  143. package/es/components/Badge/Badge.tokens.js.map +1 -1
  144. package/es/components/Badge/variations/_truncate/base.js +5 -0
  145. package/es/components/Badge/variations/_truncate/base.js.map +1 -0
  146. package/es/components/Badge/variations/_truncate/base_nf9u2h.css +1 -0
  147. package/es/components/Slider/Slider.css +13 -15
  148. package/es/components/Slider/Slider.js +2 -11
  149. package/es/components/Slider/Slider.js.map +1 -1
  150. package/es/components/Slider/Slider.tokens.js +17 -23
  151. package/es/components/Slider/Slider.tokens.js.map +1 -1
  152. package/es/components/Slider/components/Double/Double.css +8 -8
  153. package/es/components/Slider/components/Double/Double.js +19 -54
  154. package/es/components/Slider/components/Double/Double.js.map +1 -1
  155. package/es/components/Slider/components/Single/Single.css +14 -14
  156. package/es/components/Slider/components/Single/Single.js +34 -65
  157. package/es/components/Slider/components/Single/Single.js.map +1 -1
  158. package/es/components/Slider/components/Single/Single.styles.js +4 -4
  159. package/es/components/Slider/components/Single/Single.styles.js.map +1 -1
  160. package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
  161. package/es/components/Slider/components/SliderBase/SliderBase.css +5 -5
  162. package/es/components/Slider/components/SliderBase/SliderBase.js +12 -31
  163. package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
  164. package/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
  165. package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
  166. package/es/components/Slider/components/SliderBase/SliderBase.styles_9s4eb3.css +5 -0
  167. package/es/components/Slider/ui/Handler/Handler.css +3 -3
  168. package/es/components/Slider/ui/Handler/Handler.js +87 -48
  169. package/es/components/Slider/ui/Handler/Handler.js.map +1 -1
  170. package/es/components/Slider/ui/Handler/Handler.styles.js +7 -17
  171. package/es/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
  172. package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
  173. package/es/components/Slider/ui/Thumb/Thumb.css +1 -1
  174. package/es/components/Slider/ui/Thumb/Thumb.js +2 -3
  175. package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -1
  176. package/es/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
  177. package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
  178. package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
  179. package/es/components/Slider/utils/index.js +10 -28
  180. package/es/components/Slider/utils/index.js.map +1 -1
  181. package/es/components/Slider/variations/_view/base.js +1 -1
  182. package/es/components/Slider/variations/_view/base.js.map +1 -1
  183. package/es/components/Slider/variations/_view/base_x642ct.css +1 -0
  184. package/es/components/Tabs/tokens.js +2 -1
  185. package/es/components/Tabs/tokens.js.map +1 -1
  186. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.css +7 -5
  187. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +15 -4
  188. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
  189. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
  190. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js.map +1 -1
  191. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/{HorizontalTabItem.styles_hfqv5b.css → HorizontalTabItem.styles_1vj7dbl.css} +1 -1
  192. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js +5 -0
  193. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js.map +1 -0
  194. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base_1b34xv3.css +1 -0
  195. package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.css +7 -5
  196. package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +15 -4
  197. package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js.map +1 -1
  198. package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +1 -1
  199. package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js.map +1 -1
  200. package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles_6ssvos.css +5 -0
  201. package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js +5 -0
  202. package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js.map +1 -0
  203. package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base_1nwonlh.css +1 -0
  204. package/es/index.css +29 -25
  205. package/package.json +2 -2
  206. package/styled-components/cjs/components/Badge/Badge.js +22 -4
  207. package/styled-components/cjs/components/Badge/Badge.tokens.js +2 -1
  208. package/styled-components/cjs/components/Badge/variations/_truncate/base.js +10 -0
  209. package/styled-components/cjs/components/Badge/variations/_truncate/tokens.json +1 -0
  210. package/styled-components/cjs/components/Slider/Slider.js +2 -10
  211. package/styled-components/cjs/components/Slider/Slider.template-doc.mdx +0 -26
  212. package/styled-components/cjs/components/Slider/Slider.tokens.js +17 -23
  213. package/styled-components/cjs/components/Slider/components/Double/Double.js +19 -54
  214. package/styled-components/cjs/components/Slider/components/Single/Single.js +33 -64
  215. package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +6 -6
  216. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +12 -31
  217. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +6 -6
  218. package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +88 -52
  219. package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +4 -7
  220. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +2 -3
  221. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
  222. package/styled-components/cjs/components/Slider/utils/index.js +10 -28
  223. package/styled-components/cjs/components/Slider/variations/_view/base.js +1 -2
  224. package/styled-components/cjs/components/Tabs/tokens.js +2 -1
  225. package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +19 -3
  226. package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
  227. package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js +10 -0
  228. package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json +1 -0
  229. package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +19 -3
  230. package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +2 -2
  231. package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js +10 -0
  232. package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json +1 -0
  233. package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +3 -0
  234. package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +5 -1
  235. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
  236. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +16 -98
  237. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +49 -16
  238. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +3 -0
  239. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +3 -0
  240. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +3 -3
  241. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +15 -98
  242. package/styled-components/es/components/Badge/Badge.js +23 -4
  243. package/styled-components/es/components/Badge/Badge.tokens.js +2 -1
  244. package/styled-components/es/components/Badge/variations/_truncate/base.js +4 -0
  245. package/styled-components/es/components/Badge/variations/_truncate/tokens.json +1 -0
  246. package/styled-components/es/components/Slider/Slider.js +2 -11
  247. package/styled-components/es/components/Slider/Slider.template-doc.mdx +0 -26
  248. package/styled-components/es/components/Slider/Slider.tokens.js +17 -23
  249. package/styled-components/es/components/Slider/components/Double/Double.js +19 -54
  250. package/styled-components/es/components/Slider/components/Single/Single.js +34 -65
  251. package/styled-components/es/components/Slider/components/Single/Single.styles.js +5 -5
  252. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +12 -31
  253. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
  254. package/styled-components/es/components/Slider/ui/Handler/Handler.js +86 -51
  255. package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +5 -8
  256. package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +2 -3
  257. package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
  258. package/styled-components/es/components/Slider/utils/index.js +10 -28
  259. package/styled-components/es/components/Slider/variations/_view/base.js +1 -2
  260. package/styled-components/es/components/Tabs/tokens.js +2 -1
  261. package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +20 -3
  262. package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
  263. package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js +4 -0
  264. package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json +1 -0
  265. package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +20 -3
  266. package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +2 -2
  267. package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js +4 -0
  268. package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json +1 -0
  269. package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.config.js +3 -0
  270. package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +5 -1
  271. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
  272. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +16 -98
  273. package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +49 -16
  274. package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +3 -0
  275. package/styled-components/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +3 -0
  276. package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +3 -3
  277. package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +15 -98
  278. package/types/components/Badge/Badge.d.ts +10 -2
  279. package/types/components/Badge/Badge.d.ts.map +1 -1
  280. package/types/components/Badge/Badge.tokens.d.ts +1 -0
  281. package/types/components/Badge/Badge.tokens.d.ts.map +1 -1
  282. package/types/components/Badge/Badge.types.d.ts +5 -0
  283. package/types/components/Badge/Badge.types.d.ts.map +1 -1
  284. package/types/components/Badge/variations/_truncate/base.d.ts +2 -0
  285. package/types/components/Badge/variations/_truncate/base.d.ts.map +1 -0
  286. package/types/components/Slider/Slider.d.ts.map +1 -1
  287. package/types/components/Slider/Slider.tokens.d.ts +16 -22
  288. package/types/components/Slider/Slider.tokens.d.ts.map +1 -1
  289. package/types/components/Slider/components/Double/Double.d.ts.map +1 -1
  290. package/types/components/Slider/components/Double/Double.types.d.ts +0 -1
  291. package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -1
  292. package/types/components/Slider/components/Single/Single.d.ts.map +1 -1
  293. package/types/components/Slider/components/Single/Single.styles.d.ts +1 -1
  294. package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -1
  295. package/types/components/Slider/components/Single/Single.types.d.ts +7 -79
  296. package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -1
  297. package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -1
  298. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +1 -1
  299. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -1
  300. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +0 -6
  301. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -1
  302. package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -1
  303. package/types/components/Slider/ui/Handler/Handler.styles.d.ts +2 -6
  304. package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -1
  305. package/types/components/Slider/ui/Handler/Handler.types.d.ts +1 -5
  306. package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -1
  307. package/types/components/Slider/ui/Thumb/Thumb.d.ts +1 -1
  308. package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -1
  309. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -1
  310. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +0 -1
  311. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -1
  312. package/types/components/Slider/utils/index.d.ts +8 -26
  313. package/types/components/Slider/utils/index.d.ts.map +1 -1
  314. package/types/components/Slider/variations/_view/base.d.ts.map +1 -1
  315. package/types/components/Tabs/TabItem.types.d.ts +5 -0
  316. package/types/components/Tabs/TabItem.types.d.ts.map +1 -1
  317. package/types/components/Tabs/tokens.d.ts +1 -0
  318. package/types/components/Tabs/tokens.d.ts.map +1 -1
  319. package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.d.ts +9 -2
  320. package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.d.ts.map +1 -1
  321. package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.d.ts.map +1 -1
  322. package/types/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.d.ts +2 -0
  323. package/types/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.d.ts.map +1 -0
  324. package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.d.ts +9 -2
  325. package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.d.ts.map +1 -1
  326. package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.d.ts.map +1 -1
  327. package/types/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.d.ts +2 -0
  328. package/types/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.d.ts.map +1 -0
  329. package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts +3 -0
  330. package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts.map +1 -1
  331. package/types/examples/plasma_b2c/components/Badge/Badge.d.ts +6 -0
  332. package/types/examples/plasma_b2c/components/Badge/Badge.d.ts.map +1 -1
  333. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -1
  334. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +2 -80
  335. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -1
  336. package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts +6 -0
  337. package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts.map +1 -1
  338. package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.d.ts +3 -0
  339. package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.d.ts.map +1 -1
  340. package/types/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.d.ts +3 -0
  341. package/types/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.d.ts.map +1 -1
  342. package/types/examples/plasma_web/components/Badge/Badge.d.ts +3 -0
  343. package/types/examples/plasma_web/components/Badge/Badge.d.ts.map +1 -1
  344. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -1
  345. package/types/examples/plasma_web/components/Slider/Slider.d.ts +2 -80
  346. package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -1
  347. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +0 -98
  348. package/cjs/components/Slider/components/Single/Single.styles_1h7n2s2.css +0 -6
  349. package/cjs/components/Slider/components/SliderBase/SliderBase.styles_1qt1224.css +0 -5
  350. package/cjs/components/Slider/ui/Handler/Handler.styles_irtcgm.css +0 -2
  351. package/cjs/components/Slider/ui/Handler/computeKeyPressData.js +0 -122
  352. package/cjs/components/Slider/ui/Handler/computeKeyPressData.js.map +0 -1
  353. package/cjs/components/Slider/ui/Thumb/Thumb.styles_uyn20e.css +0 -1
  354. package/cjs/components/Slider/variations/_view/base_1s3f6q8.css +0 -1
  355. package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles_16d3lah.css +0 -5
  356. package/emotion/cjs/components/Slider/ui/Handler/computeKeyPressData.js +0 -121
  357. package/emotion/es/components/Slider/ui/Handler/computeKeyPressData.js +0 -115
  358. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +0 -98
  359. package/es/components/Slider/components/Single/Single.styles_1h7n2s2.css +0 -6
  360. package/es/components/Slider/components/SliderBase/SliderBase.styles_1qt1224.css +0 -5
  361. package/es/components/Slider/ui/Handler/Handler.styles_irtcgm.css +0 -2
  362. package/es/components/Slider/ui/Handler/computeKeyPressData.js +0 -118
  363. package/es/components/Slider/ui/Handler/computeKeyPressData.js.map +0 -1
  364. package/es/components/Slider/ui/Thumb/Thumb.styles_uyn20e.css +0 -1
  365. package/es/components/Slider/variations/_view/base_1s3f6q8.css +0 -1
  366. package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles_16d3lah.css +0 -5
  367. package/styled-components/cjs/components/Slider/ui/Handler/computeKeyPressData.js +0 -121
  368. package/styled-components/es/components/Slider/ui/Handler/computeKeyPressData.js +0 -115
  369. package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts +0 -12
  370. package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts.map +0 -1
@@ -3,19 +3,16 @@ import type { ComponentProps } from 'react';
3
3
  import styled from 'styled-components';
4
4
  import { disableProps } from '@salutejs/plasma-sb-utils';
5
5
  import type { StoryObj, Meta } from '@storybook/react';
6
+ import { action } from '@storybook/addon-actions';
6
7
 
7
- import { IconMic } from '../../../../components/_Icon';
8
8
  import { WithTheme } from '../../../_helpers';
9
9
 
10
10
  import { Slider } from './Slider';
11
11
 
12
12
  const sizes = ['l', 'm', 's'];
13
- const pointerSizes = ['small', 'large', 'none'];
14
13
  const views = ['default', 'accent', 'gradient'];
15
- const sliderAligns = ['center', 'left', 'right', 'none'];
16
- const labelPlacements = ['top', 'left'];
17
- const scaleAligns = ['side', 'bottom'];
18
- const orientations: Array<string> = ['vertical', 'horizontal'];
14
+ const labelPlacements = ['outer', 'inner'];
15
+ const rangeValuesPlacement = ['outer', 'inner'];
19
16
 
20
17
  const meta: Meta<typeof Slider> = {
21
18
  title: 'plasma_b2c/Slider',
@@ -34,24 +31,9 @@ const meta: Meta<typeof Slider> = {
34
31
  type: 'inline-radio',
35
32
  },
36
33
  },
37
- pointerSize: {
38
- options: pointerSizes,
39
- control: {
40
- type: 'inline-radio',
41
- },
42
- },
43
- orientation: {
44
- options: orientations,
45
- control: {
46
- type: 'select',
47
- },
48
- },
49
34
  ...disableProps([
50
35
  'value',
51
36
  'onChangeCommitted',
52
- 'onChangeTextField',
53
- 'onBlurTextField',
54
- 'onKeyDownTextField',
55
37
  'ariaLabel',
56
38
  'onChange',
57
39
  'fontSizeMultiplier',
@@ -59,14 +41,6 @@ const meta: Meta<typeof Slider> = {
59
41
  'settings',
60
42
  'hasHoverAnimation',
61
43
  'type',
62
- 'labelContentLeft',
63
- 'rangeValuesPlacement',
64
- 'name',
65
- 'defaultValue',
66
- 'labelContent',
67
- 'showRangeValues',
68
- 'hideMinValueDiff',
69
- 'hideMaxValueDiff',
70
44
  ]),
71
45
  },
72
46
  };
@@ -79,9 +53,8 @@ type StorySingleProps = StoryProps;
79
53
  type StorySingle = StoryObj<StorySingleProps>;
80
54
  type StoryDouble = StoryObj<StoryProps>;
81
55
 
82
- const SliderWrapper = styled.div<{ isVertical?: boolean }>`
83
- width: ${({ isVertical }) => (isVertical ? 'auto' : '25rem')};
84
- height: ${({ isVertical }) => (isVertical ? '25rem' : 'auto')};
56
+ const SliderWrapper = styled.div`
57
+ width: 25rem;
85
58
  `;
86
59
 
87
60
  const StoryDefault = (args: StorySingleProps) => {
@@ -95,86 +68,41 @@ const StoryDefault = (args: StorySingleProps) => {
95
68
  setValue(values);
96
69
  };
97
70
 
98
- const { hasIcon, showIcon, orientation, labelPlacement, labelVerticalPlacement, ...rest } = args;
99
- const isVertical = orientation === 'vertical';
100
-
101
71
  return (
102
- <SliderWrapper isVertical={isVertical}>
103
- <Slider
104
- value={value}
105
- orientation={orientation}
106
- labelPlacement={labelPlacement}
107
- labelContent={showIcon ? <IconMic size={rest.size === 's' ? 'xs' : 's'} /> : null}
108
- onChangeCommitted={onChangeCommittedHandle}
109
- onChange={onChangeHandle}
110
- {...rest}
111
- />
72
+ <SliderWrapper>
73
+ <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={onChangeHandle} {...args} />
112
74
  </SliderWrapper>
113
75
  );
114
76
  };
115
77
 
116
78
  export const Default: StorySingle = {
117
79
  argTypes: {
118
- sliderAlign: {
119
- options: sliderAligns,
120
- control: {
121
- type: 'inline-radio',
122
- },
123
- if: { arg: 'orientation', eq: 'vertical' },
124
- },
125
80
  labelPlacement: {
126
81
  options: labelPlacements,
127
82
  control: {
128
83
  type: 'inline-radio',
129
84
  },
130
- if: { arg: 'orientation', eq: 'horizontal' },
131
- },
132
- labelReversed: {
133
- control: {
134
- type: 'boolean',
135
- expanded: true,
136
- },
137
- if: { arg: 'orientation', eq: 'vertical' },
138
- },
139
- scaleAlign: {
140
- options: scaleAligns,
141
- control: {
142
- type: 'inline-radio',
143
- },
144
- if: { arg: 'orientation', eq: 'horizontal' },
145
85
  },
146
- orientation: {
147
- options: orientations,
86
+ rangeValuesPlacement: {
87
+ options: rangeValuesPlacement,
148
88
  control: {
149
89
  type: 'inline-radio',
150
90
  },
151
91
  },
152
- reversed: {
153
- control: {
154
- type: 'boolean',
155
- },
156
- if: { arg: 'orientation', eq: 'vertical' },
157
- },
158
92
  },
159
93
  args: {
160
94
  view: 'default',
161
95
  size: 'm',
162
- pointerSize: 'small',
163
96
  min: 0,
164
97
  max: 100,
165
- orientation: 'horizontal',
166
- ariaLabel: 'Цена микрофона',
98
+ disabled: false,
99
+ ariaLabel: 'Цена товара',
167
100
  multipleStepSize: 10,
168
- label: 'Цена микрофона',
169
- labelPlacement: 'top',
170
- sliderAlign: 'center',
171
- scaleAlign: 'bottom',
172
- showScale: true,
101
+ label: 'Цена товара',
102
+ labelPlacement: 'outer',
103
+ rangeValuesPlacement: 'outer',
104
+ showRangeValues: true,
173
105
  showCurrentValue: false,
174
- showIcon: true,
175
- reversed: false,
176
- labelReversed: false,
177
- disabled: false,
178
106
  },
179
107
  render: (args) => <StoryDefault {...args} />,
180
108
  };
@@ -214,7 +142,7 @@ const StoryMultipleValues = (args: StoryProps) => {
214
142
  };
215
143
 
216
144
  return (
217
- <SliderWrapper isVertical={args.orientation === 'vertical'}>
145
+ <SliderWrapper>
218
146
  <Slider
219
147
  value={value}
220
148
  onKeyDownTextField={onKeyDownTextField}
@@ -231,7 +159,6 @@ export const MultipleValues: StoryDouble = {
231
159
  args: {
232
160
  view: 'default',
233
161
  size: 'm',
234
- pointerSize: 'small',
235
162
  min: 0,
236
163
  max: 100,
237
164
  disabled: false,
@@ -239,14 +166,5 @@ export const MultipleValues: StoryDouble = {
239
166
  ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
240
167
  multipleStepSize: 10,
241
168
  },
242
- argTypes: {
243
- pointerSize: {
244
- options: ['small', 'large'],
245
- control: {
246
- type: 'inline-radio',
247
- },
248
- },
249
- ...disableProps(['orientation']),
250
- },
251
169
  render: (args) => <StoryMultipleValues {...args} />,
252
170
  };
@@ -29,6 +29,7 @@ type CustomStoryTabsProps = {
29
29
 
30
30
  const contentLeftOptions = ['none', 'icon'];
31
31
  const contentRightOptions = ['none', 'counter', 'icon'];
32
+ const labels = ['Label', 'Middle label', 'Very long label'];
32
33
 
33
34
  const getContentLeft = (contentLeftOption: string, size: Size) => {
34
35
  const iconSize = size === 'xs' ? 'xs' : 's';
@@ -57,6 +58,9 @@ const meta: Meta<StoryTabsProps> = {
57
58
  title: 'plasma_b2c/Tabs',
58
59
  component: Tabs,
59
60
  decorators: [WithTheme],
61
+ args: {
62
+ maxWidth: '',
63
+ },
60
64
  argTypes: {
61
65
  ...disableProps([
62
66
  'orientation',
@@ -76,6 +80,12 @@ const meta: Meta<StoryTabsProps> = {
76
80
  },
77
81
  if: { arg: 'helperText', eq: '' },
78
82
  },
83
+ maxWidth: {
84
+ control: {
85
+ type: 'text',
86
+ },
87
+ if: { arg: 'stretch', truthy: false },
88
+ },
79
89
  },
80
90
  };
81
91
 
@@ -90,13 +100,14 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
90
100
  contentRight: contentRightOption,
91
101
  hasDivider,
92
102
  stretch,
103
+ maxWidth,
93
104
  helperText,
94
105
  } = props;
95
106
  const items = Array(itemQuantity).fill(0);
96
107
  const [index, setIndex] = useState(0);
97
108
 
98
109
  return (
99
- <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
110
+ <Tabs clip="none" view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
100
111
  {items.map((_, i) => {
101
112
  if (helperText !== '') {
102
113
  return (
@@ -110,8 +121,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
110
121
  value={helperText}
111
122
  contentLeft={getContentLeft(contentLeftOption, size as Size)}
112
123
  size={size as Size}
124
+ maxWidth={maxWidth}
113
125
  >
114
- {`Label${i + 1}`}
126
+ {`${labels[i % labels.length]} ${i + 1}`}
115
127
  </TabItem>
116
128
  );
117
129
  }
@@ -127,8 +139,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
127
139
  contentLeft={getContentLeft(contentLeftOption, size as Size)}
128
140
  contentRight={getContentRight(contentRightOption, size as Size)}
129
141
  size={size as Size}
142
+ maxWidth={maxWidth}
130
143
  >
131
- {`Label${i + 1}`}
144
+ {`${labels[i % labels.length]} ${i + 1}`}
132
145
  </TabItem>
133
146
  );
134
147
  })}
@@ -147,6 +160,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
147
160
  hasDivider,
148
161
  helperText,
149
162
  width,
163
+ maxWidth,
150
164
  } = props;
151
165
  const items = Array(itemQuantity).fill(0);
152
166
  const [index, setIndex] = useState(0);
@@ -166,8 +180,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
166
180
  value={helperText}
167
181
  contentLeft={getContentLeft(contentLeftOption, size as Size)}
168
182
  size={size as Size}
183
+ maxWidth={maxWidth}
169
184
  >
170
- {`Label${i + 1}`}
185
+ {`${labels[i % labels.length]} ${i + 1}`}
171
186
  </TabItem>
172
187
  );
173
188
  }
@@ -183,8 +198,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
183
198
  contentLeft={getContentLeft(contentLeftOption, size as Size)}
184
199
  contentRight={getContentRight(contentRightOption, size as Size)}
185
200
  size={size as Size}
201
+ maxWidth={maxWidth}
186
202
  >
187
- {`Label${i + 1}`}
203
+ {`${labels[i % labels.length]} ${i + 1}`}
188
204
  </TabItem>
189
205
  );
190
206
  })}
@@ -202,6 +218,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
202
218
  contentRight: contentRightOption,
203
219
  hasDivider,
204
220
  helperText,
221
+ maxWidth,
205
222
  } = props;
206
223
  const maxItemQuantity = 3;
207
224
  const items = Array(itemQuantity).fill(0);
@@ -234,8 +251,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
234
251
  value={helperText}
235
252
  contentLeft={getContentLeft(contentLeftOption, size as Size)}
236
253
  size={size as Size}
254
+ maxWidth={maxWidth}
237
255
  >
238
- {`Label${i + 1}`}
256
+ {`${labels[i % labels.length]} ${i + 1}`}
239
257
  </TabItem>
240
258
  );
241
259
  }
@@ -251,8 +269,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
251
269
  contentLeft={getContentLeft(contentLeftOption, size as Size)}
252
270
  contentRight={getContentRight(contentRightOption, size as Size)}
253
271
  size={size as Size}
272
+ maxWidth={maxWidth}
254
273
  >
255
- {`Label${i + 1}`}
274
+ {`${labels[i % labels.length]} ${i + 1}`}
256
275
  </TabItem>
257
276
  );
258
277
  })}
@@ -269,6 +288,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
269
288
  tabIndex={!disabled ? 0 : -1}
270
289
  disabled={disabled}
271
290
  size={size as Size}
291
+ maxWidth="auto"
272
292
  >
273
293
  ShowAll
274
294
  </TabItem>
@@ -285,7 +305,7 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
285
305
  disabled: false,
286
306
  hasDivider: true,
287
307
  helperText: '',
288
- itemQuantity: 8,
308
+ itemQuantity: 6,
289
309
  stretch: false,
290
310
  width: '15rem',
291
311
  },
@@ -343,6 +363,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
343
363
  contentRight: contentRightOption,
344
364
  hasDivider,
345
365
  helperText,
366
+ maxWidth,
346
367
  } = props;
347
368
  const items = Array(itemQuantity).fill(0);
348
369
  const [index, setIndex] = useState(0);
@@ -363,8 +384,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
363
384
  value={helperText}
364
385
  contentLeft={getContentLeft(contentLeftOption, size as Size)}
365
386
  size={size as Size}
387
+ maxWidth={maxWidth}
366
388
  >
367
- {`Label${i + 1}`}
389
+ {`${labels[i % labels.length]} ${i + 1}`}
368
390
  </TabItem>
369
391
  );
370
392
  }
@@ -381,8 +403,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
381
403
  contentLeft={getContentLeft(contentLeftOption, size as Size)}
382
404
  contentRight={getContentRight(contentRightOption, size as Size)}
383
405
  size={size as Size}
406
+ maxWidth={maxWidth}
384
407
  >
385
- {`Label${i + 1}`}
408
+ {`${labels[i % labels.length]} ${i + 1}`}
386
409
  </TabItem>
387
410
  );
388
411
  })}
@@ -401,6 +424,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
401
424
  hasDivider,
402
425
  helperText,
403
426
  height,
427
+ maxWidth,
404
428
  } = props;
405
429
  const items = Array(itemQuantity).fill(0);
406
430
  const [index, setIndex] = useState(0);
@@ -428,8 +452,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
428
452
  value={helperText}
429
453
  contentLeft={getContentLeft(contentLeftOption, size as Size)}
430
454
  size={size as Size}
455
+ maxWidth={maxWidth}
431
456
  >
432
- {`Label${i + 1}`}
457
+ {`${labels[i % labels.length]} ${i + 1}`}
433
458
  </TabItem>
434
459
  );
435
460
  }
@@ -446,8 +471,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
446
471
  contentLeft={getContentLeft(contentLeftOption, size as Size)}
447
472
  contentRight={getContentRight(contentRightOption, size as Size)}
448
473
  size={size as Size}
474
+ maxWidth={maxWidth}
449
475
  >
450
- {`Label${i + 1}`}
476
+ {`${labels[i % labels.length]} ${i + 1}`}
451
477
  </TabItem>
452
478
  );
453
479
  })}
@@ -465,6 +491,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
465
491
  contentRight: contentRightOption,
466
492
  hasDivider,
467
493
  helperText,
494
+ maxWidth,
468
495
  } = props;
469
496
  const maxItemQuantity = 3;
470
497
  const items = Array(itemQuantity).fill(0);
@@ -498,8 +525,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
498
525
  value={helperText}
499
526
  contentLeft={getContentLeft(contentLeftOption, size as Size)}
500
527
  size={size as Size}
528
+ maxWidth={maxWidth}
501
529
  >
502
- {`Label${i + 1}`}
530
+ {`${labels[i % labels.length]} ${i + 1}`}
503
531
  </TabItem>
504
532
  );
505
533
  }
@@ -516,8 +544,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
516
544
  contentLeft={getContentLeft(contentLeftOption, size as Size)}
517
545
  contentRight={getContentRight(contentRightOption, size as Size)}
518
546
  size={size as Size}
547
+ maxWidth={maxWidth}
519
548
  >
520
- {`Label${i + 1}`}
549
+ {`${labels[i % labels.length]} ${i + 1}`}
521
550
  </TabItem>
522
551
  );
523
552
  })}
@@ -534,6 +563,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
534
563
  tabIndex={!disabled ? 0 : -1}
535
564
  disabled={disabled}
536
565
  size={size as Size}
566
+ maxWidth="auto"
537
567
  >
538
568
  ShowAll
539
569
  </TabItem>
@@ -548,10 +578,11 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
548
578
  size: 'xs',
549
579
  disabled: false,
550
580
  hasDivider: true,
551
- itemQuantity: 8,
581
+ itemQuantity: 6,
552
582
  orientation: 'vertical',
553
583
  helperText: '',
554
584
  height: '10rem',
585
+ maxWidth: '',
555
586
  },
556
587
  argTypes: {
557
588
  contentLeft: {
@@ -612,6 +643,7 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
612
643
  contentRight: contentRightOption,
613
644
  hasDivider,
614
645
  stretch,
646
+ maxWidth,
615
647
  } = props;
616
648
  const items = Array(itemQuantity).fill(0);
617
649
  const [index, setIndex] = useState(0);
@@ -629,8 +661,9 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
629
661
  contentLeft={getContentLeft(contentLeftOption, size as Size)}
630
662
  contentRight={getContentRight(contentRightOption, size as Size)}
631
663
  size={size as HeaderSize}
664
+ maxWidth={maxWidth}
632
665
  >
633
- {`Label${i + 1}`}
666
+ {`${labels[i % labels.length]} ${i + 1}`}
634
667
  </TabItem>
635
668
  ))}
636
669
  </Tabs>