@salutejs/plasma-new-hope 0.160.1-canary.1454.11177563590.0 → 0.161.0-canary.1392.11178979637.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (342) hide show
  1. package/cjs/components/Attach/Attach.js +9 -13
  2. package/cjs/components/Attach/Attach.js.map +1 -1
  3. package/cjs/components/Attach/utils/truncateFilename.js +24 -0
  4. package/cjs/components/Attach/utils/truncateFilename.js.map +1 -0
  5. package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +2 -2
  6. package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js.map +1 -1
  7. package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +5 -5
  8. package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js.map +1 -1
  9. package/cjs/components/Segment/tokens.js +14 -1
  10. package/cjs/components/Segment/tokens.js.map +1 -1
  11. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.css +8 -9
  12. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +68 -112
  13. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
  14. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +1 -7
  15. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
  16. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles_klze6h.css +3 -0
  17. package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
  18. package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js.map +1 -1
  19. package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_a7w5s0.css +1 -0
  20. package/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +9 -0
  21. package/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js.map +1 -0
  22. package/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base_1ejecy9.css +1 -0
  23. package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
  24. package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js.map +1 -1
  25. package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base_pxl3nb.css +1 -0
  26. package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
  27. package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js.map +1 -1
  28. package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base_18cpjsq.css +1 -0
  29. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.css +6 -4
  30. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +17 -7
  31. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js.map +1 -1
  32. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +30 -1
  33. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js.map +1 -1
  34. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles_1ir79py.css +4 -0
  35. package/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
  36. package/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js.map +1 -1
  37. package/cjs/components/Segment/ui/SegmentItem/variations/_pilled/{base_15s0fel.css → base_omc5u1.css} +1 -1
  38. package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
  39. package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js.map +1 -1
  40. package/cjs/components/Segment/ui/SegmentItem/variations/_view/base_dettiq.css +1 -0
  41. package/cjs/components/Tabs/ui/Tabs/Tabs.js +6 -6
  42. package/cjs/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
  43. package/cjs/components/_Icon/Icon.assets/{DisclosureLeft.js → DisclosureLeftCentered.js} +3 -3
  44. package/cjs/components/_Icon/Icon.assets/DisclosureLeftCentered.js.map +1 -0
  45. package/cjs/components/_Icon/Icon.assets/DisclosureRight.js +3 -4
  46. package/cjs/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
  47. package/cjs/components/_Icon/Icons/{IconDisclosureLeft.js → IconDisclosureLeftCentered.js} +5 -5
  48. package/cjs/components/_Icon/Icons/IconDisclosureLeftCentered.js.map +1 -0
  49. package/cjs/index.css +14 -11
  50. package/emotion/cjs/components/Attach/Attach.js +6 -9
  51. package/emotion/cjs/components/Attach/utils/index.js +7 -9
  52. package/emotion/cjs/components/Attach/utils/truncateFilename.js +23 -0
  53. package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +4 -4
  54. package/emotion/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +2 -2
  55. package/emotion/cjs/components/Segment/README.md +61 -0
  56. package/emotion/cjs/components/Segment/tokens.js +14 -1
  57. package/emotion/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +66 -115
  58. package/emotion/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +15 -33
  59. package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
  60. package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +10 -0
  61. package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +1 -0
  62. package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
  63. package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
  64. package/emotion/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +17 -7
  65. package/emotion/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +21 -7
  66. package/emotion/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
  67. package/emotion/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
  68. package/emotion/cjs/components/Tabs/ui/Tabs/Tabs.js +4 -4
  69. package/emotion/cjs/components/_Icon/Icon.assets/DisclosureDown.js +21 -0
  70. package/emotion/cjs/components/_Icon/Icon.assets/DisclosureLeft.js +3 -4
  71. package/emotion/cjs/components/_Icon/Icon.assets/DisclosureLeftCentered.js +22 -0
  72. package/emotion/cjs/components/_Icon/Icon.assets/DisclosureRight.js +3 -4
  73. package/emotion/cjs/components/_Icon/Icon.assets/DisclosureUp.js +21 -0
  74. package/emotion/cjs/components/_Icon/Icons/IconDisclosureDown.js +22 -0
  75. package/emotion/cjs/components/_Icon/Icons/IconDisclosureLeftCentered.js +22 -0
  76. package/emotion/cjs/components/_Icon/Icons/IconDisclosureUp.js +22 -0
  77. package/emotion/cjs/components/_Icon/index.js +21 -0
  78. package/emotion/cjs/examples/plasma_b2c/components/Editable/Editable.stories.tsx +2 -2
  79. package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +6 -3
  80. package/emotion/cjs/examples/plasma_b2c/components/Segment/Segment.stories.tsx +118 -42
  81. package/emotion/cjs/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +13 -10
  82. package/emotion/cjs/examples/plasma_b2c/components/Segment/SegmentItem.config.js +9 -9
  83. package/emotion/cjs/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx +2 -2
  84. package/emotion/cjs/examples/plasma_web/components/Editable/Editable.stories.tsx +2 -2
  85. package/emotion/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +6 -3
  86. package/emotion/cjs/examples/plasma_web/components/Segment/Segment.stories.tsx +119 -42
  87. package/emotion/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js +15 -9
  88. package/emotion/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js +9 -9
  89. package/emotion/cjs/examples/plasma_web/components/Tooltip/Tooltip.stories.tsx +2 -2
  90. package/emotion/es/components/Attach/Attach.js +7 -10
  91. package/emotion/es/components/Attach/utils/index.js +1 -2
  92. package/emotion/es/components/Attach/utils/truncateFilename.js +17 -0
  93. package/emotion/es/components/Breadcrumbs/Breadcrumbs.styles.js +5 -5
  94. package/emotion/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -3
  95. package/emotion/es/components/Segment/README.md +61 -0
  96. package/emotion/es/components/Segment/tokens.js +14 -1
  97. package/emotion/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +69 -118
  98. package/emotion/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +14 -32
  99. package/emotion/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
  100. package/emotion/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +4 -0
  101. package/emotion/es/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +1 -0
  102. package/emotion/es/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
  103. package/emotion/es/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
  104. package/emotion/es/components/Segment/ui/SegmentItem/SegmentItem.js +18 -8
  105. package/emotion/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +21 -7
  106. package/emotion/es/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
  107. package/emotion/es/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
  108. package/emotion/es/components/Tabs/ui/Tabs/Tabs.js +5 -5
  109. package/emotion/es/components/_Icon/Icon.assets/DisclosureDown.js +14 -0
  110. package/emotion/es/components/_Icon/Icon.assets/DisclosureLeft.js +3 -4
  111. package/emotion/es/components/_Icon/Icon.assets/DisclosureLeftCentered.js +15 -0
  112. package/emotion/es/components/_Icon/Icon.assets/DisclosureRight.js +3 -4
  113. package/emotion/es/components/_Icon/Icon.assets/DisclosureUp.js +14 -0
  114. package/emotion/es/components/_Icon/Icons/IconDisclosureDown.js +15 -0
  115. package/emotion/es/components/_Icon/Icons/IconDisclosureLeftCentered.js +15 -0
  116. package/emotion/es/components/_Icon/Icons/IconDisclosureUp.js +15 -0
  117. package/emotion/es/components/_Icon/index.js +3 -0
  118. package/emotion/es/examples/plasma_b2c/components/Editable/Editable.stories.tsx +2 -2
  119. package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +6 -3
  120. package/emotion/es/examples/plasma_b2c/components/Segment/Segment.stories.tsx +118 -42
  121. package/emotion/es/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +13 -10
  122. package/emotion/es/examples/plasma_b2c/components/Segment/SegmentItem.config.js +9 -9
  123. package/emotion/es/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx +2 -2
  124. package/emotion/es/examples/plasma_web/components/Editable/Editable.stories.tsx +2 -2
  125. package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx +6 -3
  126. package/emotion/es/examples/plasma_web/components/Segment/Segment.stories.tsx +119 -42
  127. package/emotion/es/examples/plasma_web/components/Segment/SegmentGroup.config.js +15 -9
  128. package/emotion/es/examples/plasma_web/components/Segment/SegmentItem.config.js +9 -9
  129. package/emotion/es/examples/plasma_web/components/Tooltip/Tooltip.stories.tsx +2 -2
  130. package/es/components/Attach/Attach.js +9 -13
  131. package/es/components/Attach/Attach.js.map +1 -1
  132. package/es/components/Attach/utils/truncateFilename.js +20 -0
  133. package/es/components/Attach/utils/truncateFilename.js.map +1 -0
  134. package/es/components/Breadcrumbs/Breadcrumbs.styles.js +2 -2
  135. package/es/components/Breadcrumbs/Breadcrumbs.styles.js.map +1 -1
  136. package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +5 -5
  137. package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js.map +1 -1
  138. package/es/components/Segment/tokens.js +14 -1
  139. package/es/components/Segment/tokens.js.map +1 -1
  140. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.css +8 -9
  141. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +73 -118
  142. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
  143. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +2 -7
  144. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
  145. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles_klze6h.css +3 -0
  146. package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
  147. package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js.map +1 -1
  148. package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_a7w5s0.css +1 -0
  149. package/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +5 -0
  150. package/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js.map +1 -0
  151. package/es/components/Segment/ui/SegmentGroup/variations/_orientation/base_1ejecy9.css +1 -0
  152. package/es/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
  153. package/es/components/Segment/ui/SegmentGroup/variations/_pilled/base.js.map +1 -1
  154. package/es/components/Segment/ui/SegmentGroup/variations/_pilled/base_pxl3nb.css +1 -0
  155. package/es/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
  156. package/es/components/Segment/ui/SegmentGroup/variations/_size/base.js.map +1 -1
  157. package/es/components/Segment/ui/SegmentGroup/variations/_size/base_18cpjsq.css +1 -0
  158. package/es/components/Segment/ui/SegmentItem/SegmentItem.css +6 -4
  159. package/es/components/Segment/ui/SegmentItem/SegmentItem.js +18 -8
  160. package/es/components/Segment/ui/SegmentItem/SegmentItem.js.map +1 -1
  161. package/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +29 -2
  162. package/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js.map +1 -1
  163. package/es/components/Segment/ui/SegmentItem/SegmentItem.styles_1ir79py.css +4 -0
  164. package/es/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
  165. package/es/components/Segment/ui/SegmentItem/variations/_pilled/base.js.map +1 -1
  166. package/es/components/Segment/ui/SegmentItem/variations/_pilled/{base_15s0fel.css → base_omc5u1.css} +1 -1
  167. package/es/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
  168. package/es/components/Segment/ui/SegmentItem/variations/_view/base.js.map +1 -1
  169. package/es/components/Segment/ui/SegmentItem/variations/_view/base_dettiq.css +1 -0
  170. package/es/components/Tabs/ui/Tabs/Tabs.js +6 -6
  171. package/es/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
  172. package/es/components/_Icon/Icon.assets/{DisclosureLeft.js → DisclosureLeftCentered.js} +3 -3
  173. package/es/components/_Icon/Icon.assets/DisclosureLeftCentered.js.map +1 -0
  174. package/es/components/_Icon/Icon.assets/DisclosureRight.js +3 -4
  175. package/es/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
  176. package/es/components/_Icon/Icons/{IconDisclosureLeft.js → IconDisclosureLeftCentered.js} +5 -5
  177. package/es/components/_Icon/Icons/IconDisclosureLeftCentered.js.map +1 -0
  178. package/es/index.css +14 -11
  179. package/package.json +2 -2
  180. package/styled-components/cjs/components/Attach/Attach.js +6 -9
  181. package/styled-components/cjs/components/Attach/utils/index.js +7 -9
  182. package/styled-components/cjs/components/Attach/utils/truncateFilename.js +23 -0
  183. package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +1 -1
  184. package/styled-components/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +2 -2
  185. package/styled-components/cjs/components/Segment/README.md +61 -0
  186. package/styled-components/cjs/components/Segment/tokens.js +14 -1
  187. package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +66 -115
  188. package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +4 -13
  189. package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
  190. package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +10 -0
  191. package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +1 -0
  192. package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
  193. package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
  194. package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +17 -7
  195. package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +17 -5
  196. package/styled-components/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
  197. package/styled-components/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
  198. package/styled-components/cjs/components/Tabs/ui/Tabs/Tabs.js +4 -4
  199. package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureDown.js +21 -0
  200. package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureLeft.js +3 -4
  201. package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureLeftCentered.js +22 -0
  202. package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureRight.js +3 -4
  203. package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureUp.js +21 -0
  204. package/styled-components/cjs/components/_Icon/Icons/IconDisclosureDown.js +22 -0
  205. package/styled-components/cjs/components/_Icon/Icons/IconDisclosureLeftCentered.js +22 -0
  206. package/styled-components/cjs/components/_Icon/Icons/IconDisclosureUp.js +22 -0
  207. package/styled-components/cjs/components/_Icon/index.js +21 -0
  208. package/styled-components/cjs/examples/plasma_b2c/components/Editable/Editable.stories.tsx +2 -2
  209. package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +6 -3
  210. package/styled-components/cjs/examples/plasma_b2c/components/Segment/Segment.stories.tsx +118 -42
  211. package/styled-components/cjs/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +10 -7
  212. package/styled-components/cjs/examples/plasma_b2c/components/Segment/SegmentItem.config.js +8 -8
  213. package/styled-components/cjs/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx +2 -2
  214. package/styled-components/cjs/examples/plasma_web/components/Editable/Editable.stories.tsx +2 -2
  215. package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +6 -3
  216. package/styled-components/cjs/examples/plasma_web/components/Segment/Segment.stories.tsx +119 -42
  217. package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js +13 -7
  218. package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
  219. package/styled-components/cjs/examples/plasma_web/components/Tooltip/Tooltip.stories.tsx +2 -2
  220. package/styled-components/es/components/Attach/Attach.js +7 -10
  221. package/styled-components/es/components/Attach/utils/index.js +1 -2
  222. package/styled-components/es/components/Attach/utils/truncateFilename.js +17 -0
  223. package/styled-components/es/components/Breadcrumbs/Breadcrumbs.styles.js +2 -2
  224. package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -3
  225. package/styled-components/es/components/Segment/README.md +61 -0
  226. package/styled-components/es/components/Segment/tokens.js +14 -1
  227. package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +69 -118
  228. package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +3 -12
  229. package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js +1 -1
  230. package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_orientation/base.js +4 -0
  231. package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_orientation/tokens.json +1 -0
  232. package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_pilled/base.js +1 -1
  233. package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_size/base.js +1 -1
  234. package/styled-components/es/components/Segment/ui/SegmentItem/SegmentItem.js +18 -8
  235. package/styled-components/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +17 -5
  236. package/styled-components/es/components/Segment/ui/SegmentItem/variations/_pilled/base.js +1 -1
  237. package/styled-components/es/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
  238. package/styled-components/es/components/Tabs/ui/Tabs/Tabs.js +5 -5
  239. package/styled-components/es/components/_Icon/Icon.assets/DisclosureDown.js +14 -0
  240. package/styled-components/es/components/_Icon/Icon.assets/DisclosureLeft.js +3 -4
  241. package/styled-components/es/components/_Icon/Icon.assets/DisclosureLeftCentered.js +15 -0
  242. package/styled-components/es/components/_Icon/Icon.assets/DisclosureRight.js +3 -4
  243. package/styled-components/es/components/_Icon/Icon.assets/DisclosureUp.js +14 -0
  244. package/styled-components/es/components/_Icon/Icons/IconDisclosureDown.js +15 -0
  245. package/styled-components/es/components/_Icon/Icons/IconDisclosureLeftCentered.js +15 -0
  246. package/styled-components/es/components/_Icon/Icons/IconDisclosureUp.js +15 -0
  247. package/styled-components/es/components/_Icon/index.js +3 -0
  248. package/styled-components/es/examples/plasma_b2c/components/Editable/Editable.stories.tsx +2 -2
  249. package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +6 -3
  250. package/styled-components/es/examples/plasma_b2c/components/Segment/Segment.stories.tsx +118 -42
  251. package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentGroup.config.js +10 -7
  252. package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentItem.config.js +8 -8
  253. package/styled-components/es/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx +2 -2
  254. package/styled-components/es/examples/plasma_web/components/Editable/Editable.stories.tsx +2 -2
  255. package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx +6 -3
  256. package/styled-components/es/examples/plasma_web/components/Segment/Segment.stories.tsx +119 -42
  257. package/styled-components/es/examples/plasma_web/components/Segment/SegmentGroup.config.js +13 -7
  258. package/styled-components/es/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
  259. package/styled-components/es/examples/plasma_web/components/Tooltip/Tooltip.stories.tsx +2 -2
  260. package/types/components/Attach/Attach.d.ts.map +1 -1
  261. package/types/components/Attach/utils/index.d.ts +1 -2
  262. package/types/components/Attach/utils/index.d.ts.map +1 -1
  263. package/types/components/Attach/utils/truncateFilename.d.ts +7 -0
  264. package/types/components/Attach/utils/truncateFilename.d.ts.map +1 -0
  265. package/types/components/Segment/tokens.d.ts +13 -0
  266. package/types/components/Segment/tokens.d.ts.map +1 -1
  267. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts +10 -1
  268. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts.map +1 -1
  269. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.styles.d.ts +0 -1
  270. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.styles.d.ts.map +1 -1
  271. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts +19 -1
  272. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts.map +1 -1
  273. package/types/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.d.ts.map +1 -1
  274. package/types/components/Segment/ui/SegmentGroup/variations/_orientation/base.d.ts +2 -0
  275. package/types/components/Segment/ui/SegmentGroup/variations/_orientation/base.d.ts.map +1 -0
  276. package/types/components/Segment/ui/SegmentGroup/variations/_pilled/base.d.ts.map +1 -1
  277. package/types/components/Segment/ui/SegmentGroup/variations/_size/base.d.ts.map +1 -1
  278. package/types/components/Segment/ui/SegmentItem/SegmentItem.d.ts +8 -2
  279. package/types/components/Segment/ui/SegmentItem/SegmentItem.d.ts.map +1 -1
  280. package/types/components/Segment/ui/SegmentItem/SegmentItem.styles.d.ts +7 -1
  281. package/types/components/Segment/ui/SegmentItem/SegmentItem.styles.d.ts.map +1 -1
  282. package/types/components/Segment/ui/SegmentItem/SegmentItem.types.d.ts +14 -1
  283. package/types/components/Segment/ui/SegmentItem/SegmentItem.types.d.ts.map +1 -1
  284. package/types/components/Segment/ui/SegmentItem/variations/_pilled/base.d.ts.map +1 -1
  285. package/types/components/Segment/ui/SegmentItem/variations/_view/base.d.ts.map +1 -1
  286. package/types/components/Tabs/ui/Tabs/Tabs.d.ts.map +1 -1
  287. package/types/components/_Icon/Icon.assets/DisclosureDown.d.ts +4 -0
  288. package/types/components/_Icon/Icon.assets/DisclosureDown.d.ts.map +1 -0
  289. package/types/components/_Icon/Icon.assets/DisclosureLeft.d.ts.map +1 -1
  290. package/types/components/_Icon/Icon.assets/DisclosureLeftCentered.d.ts +4 -0
  291. package/types/components/_Icon/Icon.assets/DisclosureLeftCentered.d.ts.map +1 -0
  292. package/types/components/_Icon/Icon.assets/DisclosureRight.d.ts.map +1 -1
  293. package/types/components/_Icon/Icon.assets/DisclosureUp.d.ts +4 -0
  294. package/types/components/_Icon/Icon.assets/DisclosureUp.d.ts.map +1 -0
  295. package/types/components/_Icon/Icons/IconDisclosureDown.d.ts +4 -0
  296. package/types/components/_Icon/Icons/IconDisclosureDown.d.ts.map +1 -0
  297. package/types/components/_Icon/Icons/IconDisclosureLeftCentered.d.ts +4 -0
  298. package/types/components/_Icon/Icons/IconDisclosureLeftCentered.d.ts.map +1 -0
  299. package/types/components/_Icon/Icons/IconDisclosureUp.d.ts +4 -0
  300. package/types/components/_Icon/Icons/IconDisclosureUp.d.ts.map +1 -0
  301. package/types/components/_Icon/index.d.ts +3 -0
  302. package/types/components/_Icon/index.d.ts.map +1 -1
  303. package/types/examples/plasma_b2c/components/Segment/Segment.d.ts +10 -1
  304. package/types/examples/plasma_b2c/components/Segment/Segment.d.ts.map +1 -1
  305. package/types/examples/plasma_b2c/components/Segment/SegmentGroup.config.d.ts +3 -0
  306. package/types/examples/plasma_b2c/components/Segment/SegmentGroup.config.d.ts.map +1 -1
  307. package/types/examples/plasma_b2c/components/Segment/SegmentItem.config.d.ts.map +1 -1
  308. package/types/examples/plasma_web/components/Segment/Segment.d.ts +13 -1
  309. package/types/examples/plasma_web/components/Segment/Segment.d.ts.map +1 -1
  310. package/types/examples/plasma_web/components/Segment/SegmentGroup.config.d.ts +6 -0
  311. package/types/examples/plasma_web/components/Segment/SegmentGroup.config.d.ts.map +1 -1
  312. package/types/examples/plasma_web/components/Segment/SegmentItem.config.d.ts.map +1 -1
  313. package/cjs/components/Attach/utils/addSeparator.js +0 -18
  314. package/cjs/components/Attach/utils/addSeparator.js.map +0 -1
  315. package/cjs/components/Attach/utils/index.js +0 -11
  316. package/cjs/components/Attach/utils/index.js.map +0 -1
  317. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles_m9i9p0.css +0 -4
  318. package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_escgtx.css +0 -1
  319. package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base_fqbatz.css +0 -1
  320. package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base_m358nl.css +0 -1
  321. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles_18h1p52.css +0 -2
  322. package/cjs/components/Segment/ui/SegmentItem/variations/_view/base_1m1u2ys.css +0 -1
  323. package/cjs/components/_Icon/Icon.assets/DisclosureLeft.js.map +0 -1
  324. package/cjs/components/_Icon/Icons/IconDisclosureLeft.js.map +0 -1
  325. package/emotion/cjs/components/Attach/utils/addSeparator.js +0 -16
  326. package/emotion/es/components/Attach/utils/addSeparator.js +0 -10
  327. package/es/components/Attach/utils/addSeparator.js +0 -14
  328. package/es/components/Attach/utils/addSeparator.js.map +0 -1
  329. package/es/components/Attach/utils/index.js +0 -7
  330. package/es/components/Attach/utils/index.js.map +0 -1
  331. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles_m9i9p0.css +0 -4
  332. package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_escgtx.css +0 -1
  333. package/es/components/Segment/ui/SegmentGroup/variations/_pilled/base_fqbatz.css +0 -1
  334. package/es/components/Segment/ui/SegmentGroup/variations/_size/base_m358nl.css +0 -1
  335. package/es/components/Segment/ui/SegmentItem/SegmentItem.styles_18h1p52.css +0 -2
  336. package/es/components/Segment/ui/SegmentItem/variations/_view/base_1m1u2ys.css +0 -1
  337. package/es/components/_Icon/Icon.assets/DisclosureLeft.js.map +0 -1
  338. package/es/components/_Icon/Icons/IconDisclosureLeft.js.map +0 -1
  339. package/styled-components/cjs/components/Attach/utils/addSeparator.js +0 -16
  340. package/styled-components/es/components/Attach/utils/addSeparator.js +0 -10
  341. package/types/components/Attach/utils/addSeparator.d.ts +0 -2
  342. package/types/components/Attach/utils/addSeparator.d.ts.map +0 -1
@@ -1,23 +1,55 @@
1
1
  import React from 'react';
2
2
  import type { ComponentProps } from 'react';
3
3
  import type { StoryObj, Meta } from '@storybook/react';
4
+ import { disableProps } from '@salutejs/plasma-sb-utils';
4
5
 
5
6
  import { segmentGroupConfig } from '../../../../components/Segment';
6
7
  import { mergeConfig } from '../../../../engines';
7
8
  import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
9
  import { SegmentProvider } from '../../../../components/Segment/SegmentProvider';
10
+ import { Counter } from '../Counter/Counter';
11
+ import { IconMic } from '../../../../components/_Icon';
9
12
 
10
13
  import { config } from './SegmentGroup.config';
11
14
  import { SegmentItem, SegmentGroup } from './Segment';
12
15
 
13
- const segmentItemViews = ['clear', 'default', 'secondary'];
16
+ const contentLeftOptions = ['none', 'icon'];
17
+ const contentRightOptions = ['none', 'text', 'counter', 'icon'];
14
18
 
15
- type CustomStorySegmentProps = {
16
- segmentItemView?: string;
17
- contentItemsNumber?: number;
19
+ const segmentItemViews = ['default', 'secondary'];
20
+ type Size = typeof sizes[number];
21
+
22
+ type CustomStoryProps = {
23
+ itemQuantity: number;
24
+ contentLeft: string;
25
+ contentRight: string;
26
+ segmentItemView?: 'default' | 'secondary';
27
+ };
28
+
29
+ type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStoryProps;
30
+
31
+ const sizes = ['xs', 's', 'm', 'l'] as const;
32
+
33
+ const getContentLeft = (contentLeftOption: string, size: Size) => {
34
+ const iconSize = size === 'xs' ? 'xs' : 's';
35
+ return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
18
36
  };
19
37
 
20
- type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStorySegmentProps;
38
+ const getContentRight = (contentRightOption: string, size: Size) => {
39
+ const iconSize = size === 'xs' ? 'xs' : 's';
40
+ const counterSize = size === 'xs' ? 'xxs' : 'xs';
41
+
42
+ switch (contentRightOption) {
43
+ case 'icon':
44
+ return <IconMic size={iconSize} color="inherit" />;
45
+ case 'counter':
46
+ return <Counter size={counterSize} count={1} view="positive" />;
47
+ case 'text':
48
+ return 'Text';
49
+ default:
50
+ return undefined;
51
+ }
52
+ };
21
53
 
22
54
  const meta: Meta<StorySegmentProps> = {
23
55
  title: 'plasma_web/Segment',
@@ -25,6 +57,19 @@ const meta: Meta<StorySegmentProps> = {
25
57
  component: SegmentGroup,
26
58
  argTypes: {
27
59
  ...argTypesFromConfig(mergeConfig(segmentGroupConfig, config)),
60
+ ...disableProps(['filledBackground', 'view', 'selectionMode']),
61
+ stretch: {
62
+ control: {
63
+ type: 'boolean',
64
+ },
65
+ if: { arg: 'orientation', eq: 'horizontal' },
66
+ },
67
+ orientation: {
68
+ options: ['horizontal', 'vertical'],
69
+ control: {
70
+ type: 'select',
71
+ },
72
+ },
28
73
  selectionMode: {
29
74
  options: ['single', 'multiple'],
30
75
  control: {
@@ -37,59 +82,91 @@ const meta: Meta<StorySegmentProps> = {
37
82
  type: 'select',
38
83
  },
39
84
  },
85
+ contentLeft: {
86
+ options: contentLeftOptions,
87
+ control: {
88
+ type: 'select',
89
+ },
90
+ },
91
+ contentRight: {
92
+ options: contentRightOptions,
93
+ control: {
94
+ type: 'select',
95
+ },
96
+ },
40
97
  },
41
98
  };
42
99
 
43
100
  export default meta;
44
101
 
45
- const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view, ...args }: StorySegmentProps) => {
46
- const contentItems = Array(contentItemsNumber).fill(0);
102
+ const StoryDefault = (props: StorySegmentProps) => {
103
+ const {
104
+ disabled,
105
+ itemQuantity,
106
+ size,
107
+ stretch,
108
+ orientation,
109
+
110
+ segmentItemView,
111
+ contentLeft: contentLeftOption,
112
+ contentRight: contentRightOption,
113
+ ...args
114
+ } = props;
115
+ const items = Array(itemQuantity).fill(0);
47
116
 
48
117
  return (
49
- <>
50
- <h3>Segment with auto width</h3>
51
- <SegmentProvider>
52
- <SegmentGroup view={view} selectionMode={selectionMode} {...args}>
53
- {contentItems.map((_, i) => (
54
- <SegmentItem
55
- view={segmentItemView}
56
- label={`Label ${i}`}
57
- value={`label_${i}`}
58
- key={`label_${i}`}
59
- {...args}
60
- />
61
- ))}
62
- </SegmentGroup>
63
- </SegmentProvider>
64
-
65
- <h3>Segment with fixed width</h3>
66
- <SegmentProvider>
67
- <SegmentGroup view={view} style={{ width: '28.5rem' }} selectionMode={selectionMode} {...args}>
68
- {contentItems.map((_, i) => (
69
- <SegmentItem
70
- view={segmentItemView}
71
- label={`Label ${i}`}
72
- value={`label_${i}`}
73
- key={`label_${i}`}
74
- {...args}
75
- />
76
- ))}
77
- </SegmentGroup>
78
- </SegmentProvider>
79
- </>
118
+ <SegmentProvider>
119
+ <SegmentGroup stretch={stretch} disabled={disabled} size={size} orientation={orientation} {...args}>
120
+ {items.map((_, i) => (
121
+ <SegmentItem
122
+ view={segmentItemView}
123
+ label={`Label ${i}`}
124
+ value={`label_${i}`}
125
+ size={size}
126
+ key={`label_${i}`}
127
+ contentLeft={getContentLeft(contentLeftOption, size)}
128
+ contentRight={getContentRight(contentRightOption, size)}
129
+ {...args}
130
+ >
131
+ {`Label${i + 1}`}
132
+ </SegmentItem>
133
+ ))}
134
+ </SegmentGroup>
135
+ </SegmentProvider>
80
136
  );
81
137
  };
82
138
 
83
139
  export const Default: StoryObj<StorySegmentProps> = {
84
140
  args: {
85
- view: 'clear',
141
+ itemQuantity: 8,
86
142
  size: 'xs',
87
- segmentItemView: 'clear',
143
+ segmentItemView: 'default',
88
144
  selectionMode: 'single',
89
- contentItemsNumber: 11,
90
145
  pilled: false,
91
146
  filledBackground: false,
147
+ hasBackground: false,
92
148
  disabled: false,
149
+ stretch: false,
150
+ orientation: 'horizontal',
151
+ contentRight: 'none',
152
+ contentLeft: 'none',
153
+ },
154
+ argTypes: {
155
+ stretch: {
156
+ control: {
157
+ type: 'boolean',
158
+ },
159
+ if: { arg: 'orientation', eq: 'horizontal' },
160
+ },
161
+ size: {
162
+ options: sizes,
163
+ control: {
164
+ type: 'select',
165
+ },
166
+ },
167
+ ...disableProps(['filledBackground', 'view', 'selectionMode', 'vertical']),
168
+ },
169
+ render: (args: StorySegmentProps) => {
170
+ return <StoryDefault {...args} />;
93
171
  },
94
- render: (args) => <StoryDefault {...args} />,
95
172
  };
@@ -13,23 +13,29 @@ var config = exports.config = {
13
13
  },
14
14
  variations: {
15
15
  view: {
16
- clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":tranparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.arrowColor, _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor),
17
- filled: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.arrowColor, _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor)
16
+ clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--plasma-colors-button-focused,var(--text-accent));"], _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor),
17
+ filled: /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--plasma-colors-button-focused,var(--text-accent));"], _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor)
18
18
  },
19
19
  size: {
20
- xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
21
- s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
22
- m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
23
- l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight)
20
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":1.125rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupPilledBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
21
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":1.375rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupPilledBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
22
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":1.625rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupPilledBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
23
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.875rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupPilledBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight)
24
24
  },
25
25
  disabled: {
26
26
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Segment.segmentTokens.disabledOpacity)
27
27
  },
28
28
  pilled: {
29
- "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;"], _Segment.segmentTokens.groupPilledBorderRadius)
29
+ "true": /*#__PURE__*/(0, _styledComponents.css)([""])
30
+ },
31
+ stretch: {
32
+ "true": /*#__PURE__*/(0, _styledComponents.css)([""])
30
33
  },
31
34
  filledBackground: {
32
35
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-surface-liquid02);"], _Segment.segmentTokens.groupFilledBackgroundColor)
36
+ },
37
+ orientation: {
38
+ vertical: /*#__PURE__*/(0, _styledComponents.css)([""])
33
39
  }
34
40
  }
35
41
  };
@@ -13,21 +13,21 @@ var config = exports.config = {
13
13
  },
14
14
  variations: {
15
15
  view: {
16
- clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor),
17
- secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor),
18
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor)
16
+ clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-primary-hover);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused,var(--text-accent));"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemAdditionalColor, _Segment.segmentTokens.itemAdditionalColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.itemSelectedAdditionalColor, _Segment.segmentTokens.itemSelectedAdditionalColorHover, _Segment.segmentTokens.outlineFocusColor),
17
+ secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-card);", ":var(--text-primary-hover);", ":var(--surface-transparent-card);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused,var(--text-accent));"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemAdditionalColor, _Segment.segmentTokens.itemAdditionalColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.itemSelectedAdditionalColor, _Segment.segmentTokens.itemSelectedAdditionalColorHover, _Segment.segmentTokens.outlineFocusColor),
18
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary-hover);", ":var(--surface-solid-default);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary);", ":var(--plasma-colors-button-focused,var(--text-accent));"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemAdditionalColor, _Segment.segmentTokens.itemAdditionalColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.itemSelectedAdditionalColor, _Segment.segmentTokens.itemSelectedAdditionalColorHover, _Segment.segmentTokens.outlineFocusColor)
19
19
  },
20
20
  size: {
21
- xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0 0.625rem;", ":0.125rem;", ":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-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
22
- s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0 0.75rem;", ":0.125rem;", ":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-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
23
- m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0 0.875rem;", ":0.125rem;", ":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-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
24
- l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":0 1rem;", ":0.125rem;", ":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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight)
21
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0.5rem 0.75rem;", ":0.5rem 0.5rem;", ":0.0625rem 0.125rem;", ":0.125rem;", ":0;", ":var(--plasma-typo-body-xs-bold-font-family);", ":var(--plasma-typo-body-xs-bold-font-size);", ":var(--plasma-typo-body-xs-bold-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-bold-letter-spacing);", ":var(--plasma-typo-body-xs-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemPilledPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
22
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.5rem 1rem;", ":0.5rem 0.5rem;", ":0.1875rem 0.125rem;", ":0.125rem;", ":0rem;", ":var(--plasma-typo-body-s-bold-font-family);", ":var(--plasma-typo-body-s-bold-font-size);", ":var(--plasma-typo-body-s-bold-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-bold-letter-spacing);", ":var(--plasma-typo-body-s-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemPilledPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
23
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":0.75rem 1.25rem;", ":0.75rem 0.75rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":var(--plasma-typo-body-m-bold-font-family);", ":var(--plasma-typo-body-m-bold-font-size);", ":var(--plasma-typo-body-m-bold-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-bold-letter-spacing);", ":var(--plasma-typo-body-m-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemPilledPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
24
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":auto;", ":3.5rem;", ":1rem 1.5rem;", ":1rem 1rem;", ":0.0625rem 0.125rem;", ":0.375rem;", ":0;", ":var(--plasma-typo-body-l-bold-font-family);", ":var(--plasma-typo-body-l-bold-font-size);", ":var(--plasma-typo-body-l-bold-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-bold-letter-spacing);", ":var(--plasma-typo-body-l-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemPilledPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight)
25
25
  },
26
26
  disabled: {
27
27
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Segment.segmentTokens.disabledOpacity)
28
28
  },
29
29
  pilled: {
30
- "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;"], _Segment.segmentTokens.itemPilledBorderRadius)
30
+ "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;"], _Segment.segmentTokens.itemPilledBorderRadius)
31
31
  }
32
32
  }
33
33
  };
@@ -5,7 +5,7 @@ import type { StoryObj, Meta } from '@storybook/react';
5
5
  import { WithTheme } from '../../../_helpers';
6
6
  import { Button } from '../Button/Button';
7
7
  import { PopoverPlacement } from '../Popover/Popover';
8
- import { IconDisclosureRight } from '../../../../components/_Icon';
8
+ import { IconDisclosureRightCentered } from '../../../../components/_Icon';
9
9
 
10
10
  import { Tooltip } from './Tooltip';
11
11
  import type { TooltipProps } from './Tooltip';
@@ -166,7 +166,7 @@ const StoryLive = (args: TooltipProps) => {
166
166
  aria-describedby="example-tooltip-firstname"
167
167
  />
168
168
  }
169
- contentLeft={<IconDisclosureRight size="xs" />}
169
+ contentLeft={<IconDisclosureRightCentered size="xs" />}
170
170
  {...args}
171
171
  id="example-tooltip-firstname"
172
172
  text={text}
@@ -17,7 +17,7 @@ import { base as sizeCSS } from './variations/_size/base';
17
17
  import { base as viewCSS } from './variations/_view/base';
18
18
  import { base, StyledHiddenInput, StyledHiddenInputHelper } from './Attach.styles';
19
19
  import { StyledCell } from './ui/Cell/Cell';
20
- import { extractExtension, getFileicon, addSeparator, separator } from './utils';
20
+ import { extractExtension, getFileicon, truncateFilename } from './utils';
21
21
  import { classes } from './Attach.tokens';
22
22
  import { AttachButton } from './components/AttachButton';
23
23
  import { StyledIconButtonCancel } from './ui/IconButton/IconButton.styles';
@@ -76,18 +76,15 @@ export var attachRoot = function attachRoot(Root) {
76
76
  cellLeft = _cellRef$current$getB.left;
77
77
  var leftDiff = cellLeft - parentLeft;
78
78
  var currentTextWidth = textWidth;
79
- if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth || currentTextWidth + emptyTextCellWidth.current < buttonWidth) {
80
- setTruncatedFilename(filename);
81
- return;
82
- }
83
- var currFilename = addSeparator(filename, separator);
84
- for (var i = currFilename.indexOf(separator) - 1; i > 0; i -= 1) {
79
+ var currFilename = filename;
80
+ for (var i = filename.length - 1; i > 0; i -= 1) {
85
81
  if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth) {
86
82
  break;
87
83
  }
88
- var left = currFilename.slice(0, i);
89
- var right = currFilename.slice(i + 1);
90
- var newFilename = "".concat(left).concat(right);
84
+ var newFilename = truncateFilename({
85
+ filename: inputHelperRef.current.textContent,
86
+ startNameTruncationIndex: i
87
+ });
91
88
  inputHelperRef.current.textContent = newFilename;
92
89
  currentTextWidth = inputHelperRef.current.offsetWidth;
93
90
  if (currentTextWidth + emptyTextCellWidth.current < buttonWidth) {
@@ -1,4 +1,3 @@
1
1
  export { extractExtension } from './extractExtension';
2
2
  export { getFileicon } from './getFileicon';
3
- export { addSeparator } from './addSeparator';
4
- export var separator = '...';
3
+ export { truncateFilename } from './truncateFilename';
@@ -0,0 +1,17 @@
1
+ export var truncateFilename = function truncateFilename(_ref) {
2
+ var filename = _ref.filename,
3
+ startNameTruncationIndex = _ref.startNameTruncationIndex,
4
+ _ref$separator = _ref.separator,
5
+ separator = _ref$separator === void 0 ? '...' : _ref$separator,
6
+ _ref$minNameLength = _ref.minNameLength,
7
+ minNameLength = _ref$minNameLength === void 0 ? 5 : _ref$minNameLength;
8
+ var strings = filename.split('.');
9
+ var extension = strings.length > 1 ? strings[strings.length - 1] : null;
10
+ var name = strings.length > 1 ? strings.slice(0, -1).join('.') : strings[0];
11
+ if (name.length <= minNameLength || startNameTruncationIndex >= name.length - 1) {
12
+ return filename;
13
+ }
14
+ var lastNameLetter = name[name.length - 1];
15
+ var truncatedName = "".concat(name.substring(0, startNameTruncationIndex)).concat(separator).concat(lastNameLetter);
16
+ return extension ? "".concat(truncatedName, ".").concat(extension) : truncatedName;
17
+ };
@@ -2,7 +2,7 @@ import styled from 'styled-components';
2
2
  import { css } from 'styled-components';
3
3
  import { linkConfig } from '../Link';
4
4
  import { component, mergeConfig } from '../../engines';
5
- import { IconDisclosureRight } from '../_Icon';
5
+ import { IconDisclosureRightCentered } from '../_Icon';
6
6
  import { addFocus } from '../../mixins';
7
7
  import { tokens } from './Breadcrumbs.tokens';
8
8
  var mergedLinkConfig = /*#__PURE__*/mergeConfig(linkConfig);
@@ -19,6 +19,6 @@ export var StyledLink = /*#__PURE__*/styled(Link).withConfig({
19
19
  outlineColor: /*#__PURE__*/"var(".concat(tokens.breadcrumbsFocusOutlineColor, ")")
20
20
  }));
21
21
  export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;align-items:center;gap:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.breadcrumbsGap, tokens.breadcrumbsColor, tokens.breadcrumbsFontFamily, tokens.breadcrumbsFontSize, tokens.breadcrumbsFontWeight, tokens.breadcrumbsFontStyle, tokens.breadcrumbsLetterSpacing, tokens.breadcrumbsLineHeight);
22
- export var Separator = /*#__PURE__*/styled(IconDisclosureRight).withConfig({
22
+ export var Separator = /*#__PURE__*/styled(IconDisclosureRightCentered).withConfig({
23
23
  componentId: "plasma-new-hope__sc-4bjoev-1"
24
24
  })(["color:var(", ");opacity:var(", ");"], tokens.breadcrumbsColor, tokens.breadcrumbsOpacity);
@@ -1,5 +1,5 @@
1
1
  import React, { useCallback, useMemo } from 'react';
2
- import { IconDisclosureDownFill, IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
2
+ import { IconDisclosureDownFill, IconDisclosureLeftCentered, IconDisclosureRightCentered } from '../../../_Icon';
3
3
  import { CalendarState } from '../../store/types';
4
4
  import { getCalendarType, MONTH_NAMES, YEAR_RENDER_COUNT } from '../../utils';
5
5
  import { classes } from '../../Calendar.tokens';
@@ -63,7 +63,7 @@ export var CalendarHeader = function CalendarHeader(_ref) {
63
63
  onClick: function onClick() {
64
64
  return onPrev();
65
65
  }
66
- }, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
66
+ }, /*#__PURE__*/React.createElement(IconDisclosureLeftCentered, {
67
67
  color: "inherit",
68
68
  size: size === 'xs' ? 'xs' : 's'
69
69
  }));
@@ -74,7 +74,7 @@ export var CalendarHeader = function CalendarHeader(_ref) {
74
74
  onClick: function onClick() {
75
75
  return onNext();
76
76
  }
77
- }, /*#__PURE__*/React.createElement(IconDisclosureRight, {
77
+ }, /*#__PURE__*/React.createElement(IconDisclosureRightCentered, {
78
78
  color: "inherit",
79
79
  size: size === 'xs' ? 'xs' : 's'
80
80
  }));
@@ -0,0 +1,61 @@
1
+ https://mui.com/material-ui/api/select/
2
+
3
+ Segment
4
+
5
+ SegmentGroup
6
+ variations/
7
+ SegmentGroup.tsx
8
+ SegmentGroup.styles.ts
9
+ SegmentGroup.types.ts
10
+
11
+ SegmentItem
12
+ variations/
13
+ SegmentItem.tsx
14
+ SegmentItem.styles.ts
15
+ SegmentItem.types.ts
16
+
17
+ ```ts
18
+ type SegmentValue = string | number;
19
+
20
+ interface SegmentItem {
21
+ value: SegmentValue;
22
+ label?: string;
23
+ }
24
+
25
+ interface SegmentGroup {
26
+ defaultValue?: SegmentValue | SegmentValue[];
27
+ value?: SegmentValue | SegmentValue[];
28
+ items: SegmentItem[];
29
+ customItem?: ({ item, selected, vertical }: { item: SegmentItem; selected: boolean; vertical: boolean }) => void;
30
+ onChange?: ({ item, selected }: { item: SegmentItem; selected: boolean }) => void;
31
+ view?: 'clear' | 'filled';
32
+ size?: 'm' | 's' | 'l' | 'xs';
33
+ disabled?: boolean;
34
+ pilled?: boolean;
35
+ filledBackground?: boolean;
36
+ stretch?: boolean;
37
+ vertical?: boolean;
38
+ selectionMode?: 'multiple' | 'single';
39
+ }
40
+
41
+ interface SegmentItem {
42
+ view?: 'clear' | 'filled';
43
+ size?: 'm' | 's' | 'l' | 'xs';
44
+ pilled?: boolean;
45
+ label?: ReactNode;
46
+ stretch?: boolean;
47
+ selectionMode?: 'multiple' | 'single';
48
+ }
49
+ ```
50
+
51
+ ```jsx
52
+ <SegmentGroup
53
+ defaultValue={['a']}
54
+ value={''}
55
+ items={[
56
+ { value: 'a', label: 'A' },
57
+ { value: 'b', label: 'B' },
58
+ ]}
59
+ onChange(({ value }) => void)
60
+ />
61
+ ```
@@ -2,7 +2,11 @@ export var classes = {
2
2
  selectedSegmentItem: 'selected-segment-item',
3
3
  segmentPilled: 'segment-pilled',
4
4
  segmentGroupFilledBackground: 'segment-group-filled-background',
5
- segmentStretch: 'segment-stretched'
5
+ segmentStretch: 'segment-stretched',
6
+ segmentVertical: 'segment-vertical',
7
+ segmentArrowPadding: 'segment-arrow-padding',
8
+ segmentXsSize: 'segment-xs-size',
9
+ segmentAdditionalText: 'segment-additional-text'
6
10
  };
7
11
  export var tokens = {
8
12
  fontFamily: '--plasma-segment-item-font-family',
@@ -17,6 +21,8 @@ export var tokens = {
17
21
  groupPilledBorderRadius: '--plasma-segment-group-pilled-border-radius',
18
22
  groupWidth: '--plasma-segment-group-width',
19
23
  groupHeight: '--plasma-segment-group-height',
24
+ groupArrowPadding: '--plasma-segment-group-arrow-padding',
25
+ groupVerticalArrowPadding: '--plasma-segment-group-vertical-arrow-padding',
20
26
  groupBackgroundColor: '--plasma-segment-group-background-color',
21
27
  groupFilledBackgroundColor: '--plasma-segment-group-filled-background-color',
22
28
  itemBorderRadius: '--plasma-segment-item-border-radius',
@@ -24,14 +30,21 @@ export var tokens = {
24
30
  itemWidth: '--plasma-segment-item-width',
25
31
  itemHeight: '--plasma-segment-item-height',
26
32
  itemPadding: '--plasma-segment-item-padding',
33
+ itemPilledPadding: '--plasma-segment-item-pilled-padding',
27
34
  itemMarginLeft: '--plasma-segment-item-margin-left',
35
+ itemContentPadding: '--plasma-segment-item-content-padding',
36
+ itemIconMargin: '--plasma-segment-item-content-icon-margin',
28
37
  itemColor: '--plasma-segment-item-color',
29
38
  itemBackgroundColor: '--plasma-segment-item-background-color',
30
39
  itemColorHover: '--plasma-segment-item-color-hover',
31
40
  itemBackgroundColorHover: '--plasma-segment-item-background-color-hover',
41
+ itemAdditionalColor: '--plasma-segment-item-additional-color',
42
+ itemAdditionalColorHover: '--plasma-segment-item-additional-color-hover',
32
43
  itemSelectedColor: '--plasma-segment-item-selected-color',
33
44
  itemSelectedBackgroundColor: '--plasma-segment-item-selected-background-color',
34
45
  itemSelectedColorHover: '--plasma-segment-item-selected-color-hover',
35
46
  itemSelectedBackgroundColorHover: '--plasma-segment-item-selected-background-color-hover',
47
+ itemSelectedAdditionalColor: '--plasma-segment-item-selected-additional-color',
48
+ itemSelectedAdditionalColorHover: '--plasma-segment-item-selected-additional-color-hover',
36
49
  disabledOpacity: '--plasma-segment-disabled-opacity'
37
50
  };