@salutejs/plasma-new-hope 0.131.0-canary.1390.10557448117.0 → 0.131.0-canary.1392.10557537816.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (178) hide show
  1. package/cjs/components/Segment/tokens.js +15 -1
  2. package/cjs/components/Segment/tokens.js.map +1 -1
  3. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.css +10 -4
  4. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +160 -83
  5. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
  6. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +37 -1
  7. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
  8. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles_1rr47x4.css +8 -0
  9. package/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/base.js +9 -0
  10. package/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/base.js.map +1 -0
  11. package/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/base_11agnr.css +1 -0
  12. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.css +7 -3
  13. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +4 -2
  14. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js.map +1 -1
  15. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +31 -2
  16. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js.map +1 -1
  17. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles_f1jpip.css +6 -0
  18. package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
  19. package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js.map +1 -1
  20. package/cjs/components/Segment/ui/SegmentItem/variations/_view/base_168a47w.css +1 -0
  21. package/cjs/components/Tabs/ui/Tabs/Tabs.js +2 -2
  22. package/cjs/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
  23. package/cjs/components/_Icon/Icon.assets/DisclosureDown.js +22 -0
  24. package/cjs/components/_Icon/Icon.assets/DisclosureDown.js.map +1 -0
  25. package/cjs/components/_Icon/Icon.assets/DisclosureUp.js +22 -0
  26. package/cjs/components/_Icon/Icon.assets/DisclosureUp.js.map +1 -0
  27. package/cjs/components/_Icon/Icons/IconDisclosureDown.js +23 -0
  28. package/cjs/components/_Icon/Icons/IconDisclosureDown.js.map +1 -0
  29. package/cjs/components/_Icon/Icons/IconDisclosureUp.js +23 -0
  30. package/cjs/components/_Icon/Icons/IconDisclosureUp.js.map +1 -0
  31. package/cjs/index.css +17 -7
  32. package/emotion/cjs/components/Segment/README.md +61 -0
  33. package/emotion/cjs/components/Segment/tokens.js +15 -1
  34. package/emotion/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +156 -82
  35. package/emotion/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +25 -17
  36. package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/base.js +10 -0
  37. package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/tokens.json +1 -0
  38. package/emotion/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +4 -2
  39. package/emotion/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +28 -6
  40. package/emotion/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
  41. package/emotion/cjs/components/Tabs/ui/Tabs/Tabs.js +2 -2
  42. package/emotion/cjs/components/_Icon/Icon.assets/DisclosureDown.js +21 -0
  43. package/emotion/cjs/components/_Icon/Icon.assets/DisclosureUp.js +21 -0
  44. package/emotion/cjs/components/_Icon/Icons/IconDisclosureDown.js +22 -0
  45. package/emotion/cjs/components/_Icon/Icons/IconDisclosureUp.js +22 -0
  46. package/emotion/cjs/components/_Icon/index.js +14 -0
  47. package/emotion/cjs/examples/plasma_web/components/Segment/Segment.stories.tsx +143 -2
  48. package/emotion/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js +12 -9
  49. package/emotion/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js +9 -9
  50. package/emotion/es/components/Segment/README.md +61 -0
  51. package/emotion/es/components/Segment/tokens.js +15 -1
  52. package/emotion/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +159 -85
  53. package/emotion/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +25 -17
  54. package/emotion/es/components/Segment/ui/SegmentGroup/variations/_vertical/base.js +4 -0
  55. package/emotion/es/components/Segment/ui/SegmentGroup/variations/_vertical/tokens.json +1 -0
  56. package/emotion/es/components/Segment/ui/SegmentItem/SegmentItem.js +5 -3
  57. package/emotion/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +27 -5
  58. package/emotion/es/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
  59. package/emotion/es/components/Tabs/ui/Tabs/Tabs.js +2 -2
  60. package/emotion/es/components/_Icon/Icon.assets/DisclosureDown.js +14 -0
  61. package/emotion/es/components/_Icon/Icon.assets/DisclosureUp.js +14 -0
  62. package/emotion/es/components/_Icon/Icons/IconDisclosureDown.js +15 -0
  63. package/emotion/es/components/_Icon/Icons/IconDisclosureUp.js +15 -0
  64. package/emotion/es/components/_Icon/index.js +2 -0
  65. package/emotion/es/examples/plasma_web/components/Segment/Segment.stories.tsx +143 -2
  66. package/emotion/es/examples/plasma_web/components/Segment/SegmentGroup.config.js +12 -9
  67. package/emotion/es/examples/plasma_web/components/Segment/SegmentItem.config.js +9 -9
  68. package/es/components/Segment/tokens.js +15 -1
  69. package/es/components/Segment/tokens.js.map +1 -1
  70. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.css +10 -4
  71. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +163 -87
  72. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
  73. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +34 -2
  74. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
  75. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles_1rr47x4.css +8 -0
  76. package/es/components/Segment/ui/SegmentGroup/variations/_vertical/base.js +5 -0
  77. package/es/components/Segment/ui/SegmentGroup/variations/_vertical/base.js.map +1 -0
  78. package/es/components/Segment/ui/SegmentGroup/variations/_vertical/base_11agnr.css +1 -0
  79. package/es/components/Segment/ui/SegmentItem/SegmentItem.css +7 -3
  80. package/es/components/Segment/ui/SegmentItem/SegmentItem.js +5 -3
  81. package/es/components/Segment/ui/SegmentItem/SegmentItem.js.map +1 -1
  82. package/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +30 -3
  83. package/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js.map +1 -1
  84. package/es/components/Segment/ui/SegmentItem/SegmentItem.styles_f1jpip.css +6 -0
  85. package/es/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
  86. package/es/components/Segment/ui/SegmentItem/variations/_view/base.js.map +1 -1
  87. package/es/components/Segment/ui/SegmentItem/variations/_view/base_168a47w.css +1 -0
  88. package/es/components/Tabs/ui/Tabs/Tabs.js +2 -2
  89. package/es/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
  90. package/es/components/_Icon/Icon.assets/DisclosureDown.js +18 -0
  91. package/es/components/_Icon/Icon.assets/DisclosureDown.js.map +1 -0
  92. package/es/components/_Icon/Icon.assets/DisclosureUp.js +18 -0
  93. package/es/components/_Icon/Icon.assets/DisclosureUp.js.map +1 -0
  94. package/es/components/_Icon/Icons/IconDisclosureDown.js +19 -0
  95. package/es/components/_Icon/Icons/IconDisclosureDown.js.map +1 -0
  96. package/es/components/_Icon/Icons/IconDisclosureUp.js +19 -0
  97. package/es/components/_Icon/Icons/IconDisclosureUp.js.map +1 -0
  98. package/es/index.css +17 -7
  99. package/package.json +2 -2
  100. package/styled-components/cjs/components/Segment/README.md +61 -0
  101. package/styled-components/cjs/components/Segment/tokens.js +15 -1
  102. package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +156 -82
  103. package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +16 -4
  104. package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/base.js +10 -0
  105. package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/tokens.json +1 -0
  106. package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +4 -2
  107. package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +23 -5
  108. package/styled-components/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
  109. package/styled-components/cjs/components/Tabs/ui/Tabs/Tabs.js +2 -2
  110. package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureDown.js +21 -0
  111. package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureUp.js +21 -0
  112. package/styled-components/cjs/components/_Icon/Icons/IconDisclosureDown.js +22 -0
  113. package/styled-components/cjs/components/_Icon/Icons/IconDisclosureUp.js +22 -0
  114. package/styled-components/cjs/components/_Icon/index.js +14 -0
  115. package/styled-components/cjs/examples/plasma_web/components/Segment/Segment.stories.tsx +143 -2
  116. package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js +7 -4
  117. package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
  118. package/styled-components/es/components/Segment/README.md +61 -0
  119. package/styled-components/es/components/Segment/tokens.js +15 -1
  120. package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +159 -85
  121. package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +16 -4
  122. package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_vertical/base.js +4 -0
  123. package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_vertical/tokens.json +1 -0
  124. package/styled-components/es/components/Segment/ui/SegmentItem/SegmentItem.js +5 -3
  125. package/styled-components/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +22 -4
  126. package/styled-components/es/components/Segment/ui/SegmentItem/variations/_view/base.js +2 -1
  127. package/styled-components/es/components/Tabs/ui/Tabs/Tabs.js +2 -2
  128. package/styled-components/es/components/_Icon/Icon.assets/DisclosureDown.js +14 -0
  129. package/styled-components/es/components/_Icon/Icon.assets/DisclosureUp.js +14 -0
  130. package/styled-components/es/components/_Icon/Icons/IconDisclosureDown.js +15 -0
  131. package/styled-components/es/components/_Icon/Icons/IconDisclosureUp.js +15 -0
  132. package/styled-components/es/components/_Icon/index.js +2 -0
  133. package/styled-components/es/examples/plasma_web/components/Segment/Segment.stories.tsx +143 -2
  134. package/styled-components/es/examples/plasma_web/components/Segment/SegmentGroup.config.js +7 -4
  135. package/styled-components/es/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
  136. package/types/components/Segment/tokens.d.ts +14 -0
  137. package/types/components/Segment/tokens.d.ts.map +1 -1
  138. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts +7 -0
  139. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts.map +1 -1
  140. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.styles.d.ts +12 -0
  141. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.styles.d.ts.map +1 -1
  142. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts +5 -1
  143. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts.map +1 -1
  144. package/types/components/Segment/ui/SegmentGroup/variations/_vertical/base.d.ts +2 -0
  145. package/types/components/Segment/ui/SegmentGroup/variations/_vertical/base.d.ts.map +1 -0
  146. package/types/components/Segment/ui/SegmentItem/SegmentItem.d.ts +4 -0
  147. package/types/components/Segment/ui/SegmentItem/SegmentItem.d.ts.map +1 -1
  148. package/types/components/Segment/ui/SegmentItem/SegmentItem.styles.d.ts +9 -1
  149. package/types/components/Segment/ui/SegmentItem/SegmentItem.styles.d.ts.map +1 -1
  150. package/types/components/Segment/ui/SegmentItem/SegmentItem.types.d.ts +8 -0
  151. package/types/components/Segment/ui/SegmentItem/SegmentItem.types.d.ts.map +1 -1
  152. package/types/components/Segment/ui/SegmentItem/variations/_view/base.d.ts.map +1 -1
  153. package/types/components/Tabs/ui/Tabs/Tabs.d.ts.map +1 -1
  154. package/types/components/_Icon/Icon.assets/DisclosureDown.d.ts +4 -0
  155. package/types/components/_Icon/Icon.assets/DisclosureDown.d.ts.map +1 -0
  156. package/types/components/_Icon/Icon.assets/DisclosureUp.d.ts +4 -0
  157. package/types/components/_Icon/Icon.assets/DisclosureUp.d.ts.map +1 -0
  158. package/types/components/_Icon/Icons/IconDisclosureDown.d.ts +4 -0
  159. package/types/components/_Icon/Icons/IconDisclosureDown.d.ts.map +1 -0
  160. package/types/components/_Icon/Icons/IconDisclosureUp.d.ts +4 -0
  161. package/types/components/_Icon/Icons/IconDisclosureUp.d.ts.map +1 -0
  162. package/types/components/_Icon/index.d.ts +2 -0
  163. package/types/components/_Icon/index.d.ts.map +1 -1
  164. package/types/examples/plasma_b2c/components/Segment/Segment.d.ts +3 -0
  165. package/types/examples/plasma_b2c/components/Segment/Segment.d.ts.map +1 -1
  166. package/types/examples/plasma_web/components/Segment/Segment.d.ts +6 -0
  167. package/types/examples/plasma_web/components/Segment/Segment.d.ts.map +1 -1
  168. package/types/examples/plasma_web/components/Segment/SegmentGroup.config.d.ts +3 -0
  169. package/types/examples/plasma_web/components/Segment/SegmentGroup.config.d.ts.map +1 -1
  170. package/types/examples/plasma_web/components/Segment/SegmentItem.config.d.ts.map +1 -1
  171. package/types/examples/sds_engineer/components/Segment/Segment.d.ts +3 -0
  172. package/types/examples/sds_engineer/components/Segment/Segment.d.ts.map +1 -1
  173. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles_m9i9p0.css +0 -4
  174. package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles_18h1p52.css +0 -2
  175. package/cjs/components/Segment/ui/SegmentItem/variations/_view/base_1m1u2ys.css +0 -1
  176. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles_m9i9p0.css +0 -4
  177. package/es/components/Segment/ui/SegmentItem/SegmentItem.styles_18h1p52.css +0 -2
  178. package/es/components/Segment/ui/SegmentItem/variations/_view/base_1m1u2ys.css +0 -1
@@ -3,20 +3,42 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.base = exports.StyledContent = void 0;
6
+ exports.base = exports.StyledRightIcon = exports.StyledLeftIcon = exports.StyledContent = exports.RightContent = exports.LeftContent = void 0;
7
7
  var _base = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("@emotion/styled/base"));
8
8
  var _react = /*#__PURE__*/require("@emotion/react");
9
9
  var _mixins = /*#__PURE__*/require("../../../../mixins");
10
10
  var _tokens = /*#__PURE__*/require("../../tokens");
11
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
12
- var base = exports.base = /*#__PURE__*/(0, _react.css)("position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;align-items:center;appearance:none;border:none;outline:none;cursor:pointer;margin-left:var(", _tokens.tokens.itemMarginLeft, ");-webkit-tap-highlight-color:rgba(0, 0, 0, 0);&:first-child{margin-left:0;}", /*#__PURE__*/(0, _mixins.addFocus)({
12
+ var base = exports.base = /*#__PURE__*/(0, _react.css)("position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;appearance:none;border:none;outline:none;cursor:pointer;margin-left:var(", _tokens.tokens.itemMarginLeft, ");-webkit-tap-highlight-color:rgba(0, 0, 0, 0);&:first-child{margin-left:0;}", /*#__PURE__*/(0, _mixins.addFocus)({
13
13
  outlineSize: '0.063rem',
14
- outlineOffset: '-0.125rem',
14
+ outlineOffset: '0.063rem',
15
15
  outlineColor: /*#__PURE__*/"var(".concat(_tokens.tokens.outlineFocusColor, ")"),
16
16
  outlineRadius: 'calc(var(--plasma_private-outline-radius) + 0.063rem)',
17
17
  customFocusRules: /*#__PURE__*/"\n &.focus-visible:focus,\n &[data-focus-visible-added] {\n &::before {\n z-index: 1;\n outline: none;\n box-shadow: 0 0 0 0.063rem var(".concat(_tokens.tokens.outlineFocusColor, ");\n }\n }\n ")
18
- }), ";;label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS9TZWdtZW50SXRlbS5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTXVCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS9TZWdtZW50SXRlbS5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGFkZEZvY3VzLCBhcHBseUVsbGlwc2lzIH0gZnJvbSAnLi4vLi4vLi4vLi4vbWl4aW5zJztcbmltcG9ydCB7IHRva2VucyB9IGZyb20gJy4uLy4uL3Rva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgIGFwcGVhcmFuY2U6IG5vbmU7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIG91dGxpbmU6IG5vbmU7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIG1hcmdpbi1sZWZ0OiB2YXIoJHt0b2tlbnMuaXRlbU1hcmdpbkxlZnR9KTtcbiAgICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHJnYmEoMCwgMCwgMCwgMCk7XG5cbiAgICAmOmZpcnN0LWNoaWxkIHtcbiAgICAgICAgbWFyZ2luLWxlZnQ6IDA7XG4gICAgfVxuXG4gICAgJHthZGRGb2N1cyh7XG4gICAgICAgIG91dGxpbmVTaXplOiAnMC4wNjNyZW0nLFxuICAgICAgICBvdXRsaW5lT2Zmc2V0OiAnLTAuMTI1cmVtJyxcbiAgICAgICAgb3V0bGluZUNvbG9yOiBgdmFyKCR7dG9rZW5zLm91dGxpbmVGb2N1c0NvbG9yfSlgLFxuICAgICAgICBvdXRsaW5lUmFkaXVzOiAnY2FsYyh2YXIoLS1wbGFzbWFfcHJpdmF0ZS1vdXRsaW5lLXJhZGl1cykgKyAwLjA2M3JlbSknLFxuICAgICAgICBjdXN0b21Gb2N1c1J1bGVzOiBgXG4gICAgICAgICAgICAmLmZvY3VzLXZpc2libGU6Zm9jdXMsXG4gICAgICAgICAgICAmW2RhdGEtZm9jdXMtdmlzaWJsZS1hZGRlZF0ge1xuICAgICAgICAgICAgICAgICY6OmJlZm9yZSB7XG4gICAgICAgICAgICAgICAgICAgIHotaW5kZXg6IDE7XG4gICAgICAgICAgICAgICAgICAgIG91dGxpbmU6IG5vbmU7XG4gICAgICAgICAgICAgICAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDAuMDYzcmVtIHZhcigke3Rva2Vucy5vdXRsaW5lRm9jdXNDb2xvcn0pO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgYCxcbiAgICB9KX07XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGVudCA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIHdpZHRoOiBmaXQtY29udGVudDtcbiAgICAke2FwcGx5RWxsaXBzaXMoKX07XG5gO1xuIl19 */"));
18
+ }), ";;label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS9TZWdtZW50SXRlbS5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTXVCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS9TZWdtZW50SXRlbS5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGFkZEZvY3VzLCBhcHBseUVsbGlwc2lzIH0gZnJvbSAnLi4vLi4vLi4vLi4vbWl4aW5zJztcbmltcG9ydCB7IHRva2VucyB9IGZyb20gJy4uLy4uL3Rva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBtYXJnaW4tbGVmdDogdmFyKCR7dG9rZW5zLml0ZW1NYXJnaW5MZWZ0fSk7XG4gICAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiByZ2JhKDAsIDAsIDAsIDApO1xuXG4gICAgJjpmaXJzdC1jaGlsZCB7XG4gICAgICAgIG1hcmdpbi1sZWZ0OiAwO1xuICAgIH1cblxuICAgICR7YWRkRm9jdXMoe1xuICAgICAgICBvdXRsaW5lU2l6ZTogJzAuMDYzcmVtJyxcbiAgICAgICAgb3V0bGluZU9mZnNldDogJzAuMDYzcmVtJyxcbiAgICAgICAgb3V0bGluZUNvbG9yOiBgdmFyKCR7dG9rZW5zLm91dGxpbmVGb2N1c0NvbG9yfSlgLFxuICAgICAgICBvdXRsaW5lUmFkaXVzOiAnY2FsYyh2YXIoLS1wbGFzbWFfcHJpdmF0ZS1vdXRsaW5lLXJhZGl1cykgKyAwLjA2M3JlbSknLFxuICAgICAgICBjdXN0b21Gb2N1c1J1bGVzOiBgXG4gICAgICAgICAgICAmLmZvY3VzLXZpc2libGU6Zm9jdXMsXG4gICAgICAgICAgICAmW2RhdGEtZm9jdXMtdmlzaWJsZS1hZGRlZF0ge1xuICAgICAgICAgICAgICAgICY6OmJlZm9yZSB7XG4gICAgICAgICAgICAgICAgICAgIHotaW5kZXg6IDE7XG4gICAgICAgICAgICAgICAgICAgIG91dGxpbmU6IG5vbmU7XG4gICAgICAgICAgICAgICAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDAuMDYzcmVtIHZhcigke3Rva2Vucy5vdXRsaW5lRm9jdXNDb2xvcn0pO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgYCxcbiAgICB9KX07XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGVmdEljb24gPSBzdHlsZWQuZGl2YFxuICAgIG1hcmdpbi1yaWdodDogdmFyKCR7dG9rZW5zLml0ZW1JY29uTWFyZ2lufSk7XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUmlnaHRJY29uID0gc3R5bGVkLmRpdmBcbiAgICBtYXJnaW4tbGVmdDogdmFyKCR7dG9rZW5zLml0ZW1JY29uTWFyZ2lufSk7XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGVudCA9IHN0eWxlZC5kaXY8e1xuICAgIGhhc1JpZ2h0TWFyZ2luPzogYm9vbGVhbjtcbiAgICBoYXNMZWZ0TWFyZ2luPzogYm9vbGVhbjtcbiAgICBpc1NlY29uZGFyeT86IGJvb2xlYW47XG59PmBcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgd2lkdGg6IGZpdC1jb250ZW50O1xuICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5pdGVtQ29udGVudFBhZGRpbmd9KTtcbiAgICAke2FwcGx5RWxsaXBzaXMoKX07XG5cbiAgICBtYXJnaW4tcmlnaHQ6ICR7KHsgaGFzUmlnaHRNYXJnaW4gfSkgPT4gKGhhc1JpZ2h0TWFyZ2luID8gYHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pYCA6ICcwJyl9O1xuICAgIG1hcmdpbi1sZWZ0OiAkeyh7IGhhc0xlZnRNYXJnaW4gfSkgPT4gKGhhc0xlZnRNYXJnaW4gPyBgdmFyKCR7dG9rZW5zLml0ZW1JY29uTWFyZ2lufSlgIDogJzAnKX07XG5gO1xuXG5leHBvcnQgY29uc3QgUmlnaHRDb250ZW50ID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIG1hcmdpbi1sZWZ0OiB2YXIoJHt0b2tlbnMuaXRlbUljb25NYXJnaW59KTtcblxuICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMuaXRlbUFkZGl0aW9uYWxDb2xvcn0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IExlZnRDb250ZW50ID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIG1hcmdpbi1yaWdodDogdmFyKCR7dG9rZW5zLml0ZW1JY29uTWFyZ2lufSk7XG5cbiAgICBjb2xvcjogaW5oZXJpdDtcbmA7XG4iXX0= */"));
19
+ var StyledLeftIcon = exports.StyledLeftIcon = /*#__PURE__*/(0, _base["default"])("div", {
20
+ target: "e1hjv4i54",
21
+ label: "plasma-new-hope__StyledLeftIcon"
22
+ })("margin-right:var(", _tokens.tokens.itemIconMargin, ");" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS9TZWdtZW50SXRlbS5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEN3QyIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1NlZ21lbnQvdWkvU2VnbWVudEl0ZW0vU2VnbWVudEl0ZW0uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBhZGRGb2N1cywgYXBwbHlFbGxpcHNpcyB9IGZyb20gJy4uLy4uLy4uLy4uL21peGlucyc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuLi8uLi90b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgbWFyZ2luLWxlZnQ6IHZhcigke3Rva2Vucy5pdGVtTWFyZ2luTGVmdH0pO1xuICAgIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwKTtcblxuICAgICY6Zmlyc3QtY2hpbGQge1xuICAgICAgICBtYXJnaW4tbGVmdDogMDtcbiAgICB9XG5cbiAgICAke2FkZEZvY3VzKHtcbiAgICAgICAgb3V0bGluZVNpemU6ICcwLjA2M3JlbScsXG4gICAgICAgIG91dGxpbmVPZmZzZXQ6ICcwLjA2M3JlbScsXG4gICAgICAgIG91dGxpbmVDb2xvcjogYHZhcigke3Rva2Vucy5vdXRsaW5lRm9jdXNDb2xvcn0pYCxcbiAgICAgICAgb3V0bGluZVJhZGl1czogJ2NhbGModmFyKC0tcGxhc21hX3ByaXZhdGUtb3V0bGluZS1yYWRpdXMpICsgMC4wNjNyZW0pJyxcbiAgICAgICAgY3VzdG9tRm9jdXNSdWxlczogYFxuICAgICAgICAgICAgJi5mb2N1cy12aXNpYmxlOmZvY3VzLFxuICAgICAgICAgICAgJltkYXRhLWZvY3VzLXZpc2libGUtYWRkZWRdIHtcbiAgICAgICAgICAgICAgICAmOjpiZWZvcmUge1xuICAgICAgICAgICAgICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgICAgICAgICAgICAgICBib3gtc2hhZG93OiAwIDAgMCAwLjA2M3JlbSB2YXIoJHt0b2tlbnMub3V0bGluZUZvY3VzQ29sb3J9KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIGAsXG4gICAgfSl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExlZnRJY29uID0gc3R5bGVkLmRpdmBcbiAgICBtYXJnaW4tcmlnaHQ6IHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJpZ2h0SWNvbiA9IHN0eWxlZC5kaXZgXG4gICAgbWFyZ2luLWxlZnQ6IHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRlbnQgPSBzdHlsZWQuZGl2PHtcbiAgICBoYXNSaWdodE1hcmdpbj86IGJvb2xlYW47XG4gICAgaGFzTGVmdE1hcmdpbj86IGJvb2xlYW47XG4gICAgaXNTZWNvbmRhcnk/OiBib29sZWFuO1xufT5gXG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIHdpZHRoOiBmaXQtY29udGVudDtcbiAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMuaXRlbUNvbnRlbnRQYWRkaW5nfSk7XG4gICAgJHthcHBseUVsbGlwc2lzKCl9O1xuXG4gICAgbWFyZ2luLXJpZ2h0OiAkeyh7IGhhc1JpZ2h0TWFyZ2luIH0pID0+IChoYXNSaWdodE1hcmdpbiA/IGB2YXIoJHt0b2tlbnMuaXRlbUljb25NYXJnaW59KWAgOiAnMCcpfTtcbiAgICBtYXJnaW4tbGVmdDogJHsoeyBoYXNMZWZ0TWFyZ2luIH0pID0+IChoYXNMZWZ0TWFyZ2luID8gYHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pYCA6ICcwJyl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0Q29udGVudCA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBtYXJnaW4tbGVmdDogdmFyKCR7dG9rZW5zLml0ZW1JY29uTWFyZ2lufSk7XG5cbiAgICBjb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1BZGRpdGlvbmFsQ29sb3J9KTtcbmA7XG5cbmV4cG9ydCBjb25zdCBMZWZ0Q29udGVudCA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBtYXJnaW4tcmlnaHQ6IHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pO1xuXG4gICAgY29sb3I6IGluaGVyaXQ7XG5gO1xuIl19 */"));
23
+ var StyledRightIcon = exports.StyledRightIcon = /*#__PURE__*/(0, _base["default"])("div", {
24
+ target: "e1hjv4i53",
25
+ label: "plasma-new-hope__StyledRightIcon"
26
+ })("margin-left:var(", _tokens.tokens.itemIconMargin, ");" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS9TZWdtZW50SXRlbS5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEN5QyIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1NlZ21lbnQvdWkvU2VnbWVudEl0ZW0vU2VnbWVudEl0ZW0uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBhZGRGb2N1cywgYXBwbHlFbGxpcHNpcyB9IGZyb20gJy4uLy4uLy4uLy4uL21peGlucyc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuLi8uLi90b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgbWFyZ2luLWxlZnQ6IHZhcigke3Rva2Vucy5pdGVtTWFyZ2luTGVmdH0pO1xuICAgIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwKTtcblxuICAgICY6Zmlyc3QtY2hpbGQge1xuICAgICAgICBtYXJnaW4tbGVmdDogMDtcbiAgICB9XG5cbiAgICAke2FkZEZvY3VzKHtcbiAgICAgICAgb3V0bGluZVNpemU6ICcwLjA2M3JlbScsXG4gICAgICAgIG91dGxpbmVPZmZzZXQ6ICcwLjA2M3JlbScsXG4gICAgICAgIG91dGxpbmVDb2xvcjogYHZhcigke3Rva2Vucy5vdXRsaW5lRm9jdXNDb2xvcn0pYCxcbiAgICAgICAgb3V0bGluZVJhZGl1czogJ2NhbGModmFyKC0tcGxhc21hX3ByaXZhdGUtb3V0bGluZS1yYWRpdXMpICsgMC4wNjNyZW0pJyxcbiAgICAgICAgY3VzdG9tRm9jdXNSdWxlczogYFxuICAgICAgICAgICAgJi5mb2N1cy12aXNpYmxlOmZvY3VzLFxuICAgICAgICAgICAgJltkYXRhLWZvY3VzLXZpc2libGUtYWRkZWRdIHtcbiAgICAgICAgICAgICAgICAmOjpiZWZvcmUge1xuICAgICAgICAgICAgICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgICAgICAgICAgICAgICBib3gtc2hhZG93OiAwIDAgMCAwLjA2M3JlbSB2YXIoJHt0b2tlbnMub3V0bGluZUZvY3VzQ29sb3J9KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIGAsXG4gICAgfSl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExlZnRJY29uID0gc3R5bGVkLmRpdmBcbiAgICBtYXJnaW4tcmlnaHQ6IHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJpZ2h0SWNvbiA9IHN0eWxlZC5kaXZgXG4gICAgbWFyZ2luLWxlZnQ6IHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRlbnQgPSBzdHlsZWQuZGl2PHtcbiAgICBoYXNSaWdodE1hcmdpbj86IGJvb2xlYW47XG4gICAgaGFzTGVmdE1hcmdpbj86IGJvb2xlYW47XG4gICAgaXNTZWNvbmRhcnk/OiBib29sZWFuO1xufT5gXG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIHdpZHRoOiBmaXQtY29udGVudDtcbiAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMuaXRlbUNvbnRlbnRQYWRkaW5nfSk7XG4gICAgJHthcHBseUVsbGlwc2lzKCl9O1xuXG4gICAgbWFyZ2luLXJpZ2h0OiAkeyh7IGhhc1JpZ2h0TWFyZ2luIH0pID0+IChoYXNSaWdodE1hcmdpbiA/IGB2YXIoJHt0b2tlbnMuaXRlbUljb25NYXJnaW59KWAgOiAnMCcpfTtcbiAgICBtYXJnaW4tbGVmdDogJHsoeyBoYXNMZWZ0TWFyZ2luIH0pID0+IChoYXNMZWZ0TWFyZ2luID8gYHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pYCA6ICcwJyl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0Q29udGVudCA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBtYXJnaW4tbGVmdDogdmFyKCR7dG9rZW5zLml0ZW1JY29uTWFyZ2lufSk7XG5cbiAgICBjb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1BZGRpdGlvbmFsQ29sb3J9KTtcbmA7XG5cbmV4cG9ydCBjb25zdCBMZWZ0Q29udGVudCA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBtYXJnaW4tcmlnaHQ6IHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pO1xuXG4gICAgY29sb3I6IGluaGVyaXQ7XG5gO1xuIl19 */"));
19
27
  var StyledContent = exports.StyledContent = /*#__PURE__*/(0, _base["default"])("div", {
20
- target: "e1hjv4i50",
28
+ target: "e1hjv4i52",
21
29
  label: "plasma-new-hope__StyledContent"
22
- })("display:inline-block;width:fit-content;", /*#__PURE__*/(0, _mixins.applyEllipsis)(), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS9TZWdtZW50SXRlbS5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkN1QyIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1NlZ21lbnQvdWkvU2VnbWVudEl0ZW0vU2VnbWVudEl0ZW0uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBhZGRGb2N1cywgYXBwbHlFbGxpcHNpcyB9IGZyb20gJy4uLy4uLy4uLy4uL21peGlucyc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuLi8uLi90b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBtYXJnaW4tbGVmdDogdmFyKCR7dG9rZW5zLml0ZW1NYXJnaW5MZWZ0fSk7XG4gICAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiByZ2JhKDAsIDAsIDAsIDApO1xuXG4gICAgJjpmaXJzdC1jaGlsZCB7XG4gICAgICAgIG1hcmdpbi1sZWZ0OiAwO1xuICAgIH1cblxuICAgICR7YWRkRm9jdXMoe1xuICAgICAgICBvdXRsaW5lU2l6ZTogJzAuMDYzcmVtJyxcbiAgICAgICAgb3V0bGluZU9mZnNldDogJy0wLjEyNXJlbScsXG4gICAgICAgIG91dGxpbmVDb2xvcjogYHZhcigke3Rva2Vucy5vdXRsaW5lRm9jdXNDb2xvcn0pYCxcbiAgICAgICAgb3V0bGluZVJhZGl1czogJ2NhbGModmFyKC0tcGxhc21hX3ByaXZhdGUtb3V0bGluZS1yYWRpdXMpICsgMC4wNjNyZW0pJyxcbiAgICAgICAgY3VzdG9tRm9jdXNSdWxlczogYFxuICAgICAgICAgICAgJi5mb2N1cy12aXNpYmxlOmZvY3VzLFxuICAgICAgICAgICAgJltkYXRhLWZvY3VzLXZpc2libGUtYWRkZWRdIHtcbiAgICAgICAgICAgICAgICAmOjpiZWZvcmUge1xuICAgICAgICAgICAgICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgICAgICAgICAgICAgICBib3gtc2hhZG93OiAwIDAgMCAwLjA2M3JlbSB2YXIoJHt0b2tlbnMub3V0bGluZUZvY3VzQ29sb3J9KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIGAsXG4gICAgfSl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRlbnQgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICB3aWR0aDogZml0LWNvbnRlbnQ7XG4gICAgJHthcHBseUVsbGlwc2lzKCl9O1xuYDtcbiJdfQ== */"));
30
+ })("display:inline-block;width:fit-content;padding:var(", _tokens.tokens.itemContentPadding, ");", /*#__PURE__*/(0, _mixins.applyEllipsis)(), ";margin-right:", function (_ref) {
31
+ var hasRightMargin = _ref.hasRightMargin;
32
+ return hasRightMargin ? "var(".concat(_tokens.tokens.itemIconMargin, ")") : '0';
33
+ }, ";margin-left:", function (_ref2) {
34
+ var hasLeftMargin = _ref2.hasLeftMargin;
35
+ return hasLeftMargin ? "var(".concat(_tokens.tokens.itemIconMargin, ")") : '0';
36
+ }, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS9TZWdtZW50SXRlbS5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0RFIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS9TZWdtZW50SXRlbS5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGFkZEZvY3VzLCBhcHBseUVsbGlwc2lzIH0gZnJvbSAnLi4vLi4vLi4vLi4vbWl4aW5zJztcbmltcG9ydCB7IHRva2VucyB9IGZyb20gJy4uLy4uL3Rva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBtYXJnaW4tbGVmdDogdmFyKCR7dG9rZW5zLml0ZW1NYXJnaW5MZWZ0fSk7XG4gICAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiByZ2JhKDAsIDAsIDAsIDApO1xuXG4gICAgJjpmaXJzdC1jaGlsZCB7XG4gICAgICAgIG1hcmdpbi1sZWZ0OiAwO1xuICAgIH1cblxuICAgICR7YWRkRm9jdXMoe1xuICAgICAgICBvdXRsaW5lU2l6ZTogJzAuMDYzcmVtJyxcbiAgICAgICAgb3V0bGluZU9mZnNldDogJzAuMDYzcmVtJyxcbiAgICAgICAgb3V0bGluZUNvbG9yOiBgdmFyKCR7dG9rZW5zLm91dGxpbmVGb2N1c0NvbG9yfSlgLFxuICAgICAgICBvdXRsaW5lUmFkaXVzOiAnY2FsYyh2YXIoLS1wbGFzbWFfcHJpdmF0ZS1vdXRsaW5lLXJhZGl1cykgKyAwLjA2M3JlbSknLFxuICAgICAgICBjdXN0b21Gb2N1c1J1bGVzOiBgXG4gICAgICAgICAgICAmLmZvY3VzLXZpc2libGU6Zm9jdXMsXG4gICAgICAgICAgICAmW2RhdGEtZm9jdXMtdmlzaWJsZS1hZGRlZF0ge1xuICAgICAgICAgICAgICAgICY6OmJlZm9yZSB7XG4gICAgICAgICAgICAgICAgICAgIHotaW5kZXg6IDE7XG4gICAgICAgICAgICAgICAgICAgIG91dGxpbmU6IG5vbmU7XG4gICAgICAgICAgICAgICAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDAuMDYzcmVtIHZhcigke3Rva2Vucy5vdXRsaW5lRm9jdXNDb2xvcn0pO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgYCxcbiAgICB9KX07XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGVmdEljb24gPSBzdHlsZWQuZGl2YFxuICAgIG1hcmdpbi1yaWdodDogdmFyKCR7dG9rZW5zLml0ZW1JY29uTWFyZ2lufSk7XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUmlnaHRJY29uID0gc3R5bGVkLmRpdmBcbiAgICBtYXJnaW4tbGVmdDogdmFyKCR7dG9rZW5zLml0ZW1JY29uTWFyZ2lufSk7XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGVudCA9IHN0eWxlZC5kaXY8e1xuICAgIGhhc1JpZ2h0TWFyZ2luPzogYm9vbGVhbjtcbiAgICBoYXNMZWZ0TWFyZ2luPzogYm9vbGVhbjtcbiAgICBpc1NlY29uZGFyeT86IGJvb2xlYW47XG59PmBcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgd2lkdGg6IGZpdC1jb250ZW50O1xuICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5pdGVtQ29udGVudFBhZGRpbmd9KTtcbiAgICAke2FwcGx5RWxsaXBzaXMoKX07XG5cbiAgICBtYXJnaW4tcmlnaHQ6ICR7KHsgaGFzUmlnaHRNYXJnaW4gfSkgPT4gKGhhc1JpZ2h0TWFyZ2luID8gYHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pYCA6ICcwJyl9O1xuICAgIG1hcmdpbi1sZWZ0OiAkeyh7IGhhc0xlZnRNYXJnaW4gfSkgPT4gKGhhc0xlZnRNYXJnaW4gPyBgdmFyKCR7dG9rZW5zLml0ZW1JY29uTWFyZ2lufSlgIDogJzAnKX07XG5gO1xuXG5leHBvcnQgY29uc3QgUmlnaHRDb250ZW50ID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIG1hcmdpbi1sZWZ0OiB2YXIoJHt0b2tlbnMuaXRlbUljb25NYXJnaW59KTtcblxuICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMuaXRlbUFkZGl0aW9uYWxDb2xvcn0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IExlZnRDb250ZW50ID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIG1hcmdpbi1yaWdodDogdmFyKCR7dG9rZW5zLml0ZW1JY29uTWFyZ2lufSk7XG5cbiAgICBjb2xvcjogaW5oZXJpdDtcbmA7XG4iXX0= */"));
37
+ var RightContent = exports.RightContent = /*#__PURE__*/(0, _base["default"])("div", {
38
+ target: "e1hjv4i51",
39
+ label: "plasma-new-hope__RightContent"
40
+ })("display:flex;margin-left:var(", _tokens.tokens.itemIconMargin, ");color:var(", _tokens.tokens.itemAdditionalColor, ");" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS9TZWdtZW50SXRlbS5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0VzQyIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1NlZ21lbnQvdWkvU2VnbWVudEl0ZW0vU2VnbWVudEl0ZW0uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBhZGRGb2N1cywgYXBwbHlFbGxpcHNpcyB9IGZyb20gJy4uLy4uLy4uLy4uL21peGlucyc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuLi8uLi90b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgbWFyZ2luLWxlZnQ6IHZhcigke3Rva2Vucy5pdGVtTWFyZ2luTGVmdH0pO1xuICAgIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwKTtcblxuICAgICY6Zmlyc3QtY2hpbGQge1xuICAgICAgICBtYXJnaW4tbGVmdDogMDtcbiAgICB9XG5cbiAgICAke2FkZEZvY3VzKHtcbiAgICAgICAgb3V0bGluZVNpemU6ICcwLjA2M3JlbScsXG4gICAgICAgIG91dGxpbmVPZmZzZXQ6ICcwLjA2M3JlbScsXG4gICAgICAgIG91dGxpbmVDb2xvcjogYHZhcigke3Rva2Vucy5vdXRsaW5lRm9jdXNDb2xvcn0pYCxcbiAgICAgICAgb3V0bGluZVJhZGl1czogJ2NhbGModmFyKC0tcGxhc21hX3ByaXZhdGUtb3V0bGluZS1yYWRpdXMpICsgMC4wNjNyZW0pJyxcbiAgICAgICAgY3VzdG9tRm9jdXNSdWxlczogYFxuICAgICAgICAgICAgJi5mb2N1cy12aXNpYmxlOmZvY3VzLFxuICAgICAgICAgICAgJltkYXRhLWZvY3VzLXZpc2libGUtYWRkZWRdIHtcbiAgICAgICAgICAgICAgICAmOjpiZWZvcmUge1xuICAgICAgICAgICAgICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgICAgICAgICAgICAgICBib3gtc2hhZG93OiAwIDAgMCAwLjA2M3JlbSB2YXIoJHt0b2tlbnMub3V0bGluZUZvY3VzQ29sb3J9KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIGAsXG4gICAgfSl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExlZnRJY29uID0gc3R5bGVkLmRpdmBcbiAgICBtYXJnaW4tcmlnaHQ6IHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJpZ2h0SWNvbiA9IHN0eWxlZC5kaXZgXG4gICAgbWFyZ2luLWxlZnQ6IHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRlbnQgPSBzdHlsZWQuZGl2PHtcbiAgICBoYXNSaWdodE1hcmdpbj86IGJvb2xlYW47XG4gICAgaGFzTGVmdE1hcmdpbj86IGJvb2xlYW47XG4gICAgaXNTZWNvbmRhcnk/OiBib29sZWFuO1xufT5gXG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIHdpZHRoOiBmaXQtY29udGVudDtcbiAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMuaXRlbUNvbnRlbnRQYWRkaW5nfSk7XG4gICAgJHthcHBseUVsbGlwc2lzKCl9O1xuXG4gICAgbWFyZ2luLXJpZ2h0OiAkeyh7IGhhc1JpZ2h0TWFyZ2luIH0pID0+IChoYXNSaWdodE1hcmdpbiA/IGB2YXIoJHt0b2tlbnMuaXRlbUljb25NYXJnaW59KWAgOiAnMCcpfTtcbiAgICBtYXJnaW4tbGVmdDogJHsoeyBoYXNMZWZ0TWFyZ2luIH0pID0+IChoYXNMZWZ0TWFyZ2luID8gYHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pYCA6ICcwJyl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0Q29udGVudCA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBtYXJnaW4tbGVmdDogdmFyKCR7dG9rZW5zLml0ZW1JY29uTWFyZ2lufSk7XG5cbiAgICBjb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1BZGRpdGlvbmFsQ29sb3J9KTtcbmA7XG5cbmV4cG9ydCBjb25zdCBMZWZ0Q29udGVudCA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBtYXJnaW4tcmlnaHQ6IHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pO1xuXG4gICAgY29sb3I6IGluaGVyaXQ7XG5gO1xuIl19 */"));
41
+ var LeftContent = exports.LeftContent = /*#__PURE__*/(0, _base["default"])("div", {
42
+ target: "e1hjv4i50",
43
+ label: "plasma-new-hope__LeftContent"
44
+ })("display:flex;margin-right:var(", _tokens.tokens.itemIconMargin, ");color:inherit;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS9TZWdtZW50SXRlbS5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUVxQyIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1NlZ21lbnQvdWkvU2VnbWVudEl0ZW0vU2VnbWVudEl0ZW0uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBhZGRGb2N1cywgYXBwbHlFbGxpcHNpcyB9IGZyb20gJy4uLy4uLy4uLy4uL21peGlucyc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuLi8uLi90b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgbWFyZ2luLWxlZnQ6IHZhcigke3Rva2Vucy5pdGVtTWFyZ2luTGVmdH0pO1xuICAgIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwKTtcblxuICAgICY6Zmlyc3QtY2hpbGQge1xuICAgICAgICBtYXJnaW4tbGVmdDogMDtcbiAgICB9XG5cbiAgICAke2FkZEZvY3VzKHtcbiAgICAgICAgb3V0bGluZVNpemU6ICcwLjA2M3JlbScsXG4gICAgICAgIG91dGxpbmVPZmZzZXQ6ICcwLjA2M3JlbScsXG4gICAgICAgIG91dGxpbmVDb2xvcjogYHZhcigke3Rva2Vucy5vdXRsaW5lRm9jdXNDb2xvcn0pYCxcbiAgICAgICAgb3V0bGluZVJhZGl1czogJ2NhbGModmFyKC0tcGxhc21hX3ByaXZhdGUtb3V0bGluZS1yYWRpdXMpICsgMC4wNjNyZW0pJyxcbiAgICAgICAgY3VzdG9tRm9jdXNSdWxlczogYFxuICAgICAgICAgICAgJi5mb2N1cy12aXNpYmxlOmZvY3VzLFxuICAgICAgICAgICAgJltkYXRhLWZvY3VzLXZpc2libGUtYWRkZWRdIHtcbiAgICAgICAgICAgICAgICAmOjpiZWZvcmUge1xuICAgICAgICAgICAgICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgICAgICAgICAgICAgICBib3gtc2hhZG93OiAwIDAgMCAwLjA2M3JlbSB2YXIoJHt0b2tlbnMub3V0bGluZUZvY3VzQ29sb3J9KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIGAsXG4gICAgfSl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExlZnRJY29uID0gc3R5bGVkLmRpdmBcbiAgICBtYXJnaW4tcmlnaHQ6IHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJpZ2h0SWNvbiA9IHN0eWxlZC5kaXZgXG4gICAgbWFyZ2luLWxlZnQ6IHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRlbnQgPSBzdHlsZWQuZGl2PHtcbiAgICBoYXNSaWdodE1hcmdpbj86IGJvb2xlYW47XG4gICAgaGFzTGVmdE1hcmdpbj86IGJvb2xlYW47XG4gICAgaXNTZWNvbmRhcnk/OiBib29sZWFuO1xufT5gXG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIHdpZHRoOiBmaXQtY29udGVudDtcbiAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMuaXRlbUNvbnRlbnRQYWRkaW5nfSk7XG4gICAgJHthcHBseUVsbGlwc2lzKCl9O1xuXG4gICAgbWFyZ2luLXJpZ2h0OiAkeyh7IGhhc1JpZ2h0TWFyZ2luIH0pID0+IChoYXNSaWdodE1hcmdpbiA/IGB2YXIoJHt0b2tlbnMuaXRlbUljb25NYXJnaW59KWAgOiAnMCcpfTtcbiAgICBtYXJnaW4tbGVmdDogJHsoeyBoYXNMZWZ0TWFyZ2luIH0pID0+IChoYXNMZWZ0TWFyZ2luID8gYHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pYCA6ICcwJyl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0Q29udGVudCA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBtYXJnaW4tbGVmdDogdmFyKCR7dG9rZW5zLml0ZW1JY29uTWFyZ2lufSk7XG5cbiAgICBjb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1BZGRpdGlvbmFsQ29sb3J9KTtcbmA7XG5cbmV4cG9ydCBjb25zdCBMZWZ0Q29udGVudCA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBtYXJnaW4tcmlnaHQ6IHZhcigke3Rva2Vucy5pdGVtSWNvbk1hcmdpbn0pO1xuXG4gICAgY29sb3I6IGluaGVyaXQ7XG5gO1xuIl19 */"));
@@ -6,4 +6,5 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.base = void 0;
7
7
  var _react = /*#__PURE__*/require("@emotion/react");
8
8
  var _tokens = /*#__PURE__*/require("../../../../tokens");
9
- var base = exports.base = /*#__PURE__*/(0, _react.css)("color:var(", _tokens.tokens.itemColor, ");background-color:var(", _tokens.tokens.itemBackgroundColor, ");&:hover{color:var(", _tokens.tokens.itemColorHover, ");background-color:var(", _tokens.tokens.itemBackgroundColorHover, ");}&.", /*#__PURE__*/String(_tokens.classes.selectedSegmentItem), "{color:var(", _tokens.tokens.itemSelectedColor, ");background-color:var(", _tokens.tokens.itemSelectedBackgroundColor, ");&:hover{color:var(", _tokens.tokens.itemSelectedColorHover, ");background-color:var(", _tokens.tokens.itemSelectedBackgroundColorHover, ");}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS92YXJpYXRpb25zL192aWV3L2Jhc2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXVCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS92YXJpYXRpb25zL192aWV3L2Jhc2UudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4uLy4uLy4uLy4uL3Rva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMuaXRlbUNvbG9yfSk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1CYWNrZ3JvdW5kQ29sb3J9KTtcblxuICAgICY6aG92ZXIge1xuICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1Db2xvckhvdmVyfSk7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5pdGVtQmFja2dyb3VuZENvbG9ySG92ZXJ9KTtcbiAgICB9XG5cbiAgICAmLiR7U3RyaW5nKGNsYXNzZXMuc2VsZWN0ZWRTZWdtZW50SXRlbSl9IHtcbiAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5pdGVtU2VsZWN0ZWRDb2xvcn0pO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoJHt0b2tlbnMuaXRlbVNlbGVjdGVkQmFja2dyb3VuZENvbG9yfSk7XG5cbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1TZWxlY3RlZENvbG9ySG92ZXJ9KTtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5pdGVtU2VsZWN0ZWRCYWNrZ3JvdW5kQ29sb3JIb3Zlcn0pO1xuICAgICAgICB9XG4gICAgfVxuYDtcbiJdfQ== */"));
9
+ var _SegmentItem = /*#__PURE__*/require("../../SegmentItem.styles");
10
+ var base = exports.base = /*#__PURE__*/(0, _react.css)("color:var(", _tokens.tokens.itemColor, ");background-color:var(", _tokens.tokens.itemBackgroundColor, ");&:hover{color:var(", _tokens.tokens.itemColorHover, ");background-color:var(", _tokens.tokens.itemBackgroundColorHover, ");", _SegmentItem.RightContent, "{color:var(", _tokens.tokens.itemAdditionalColorHover, ");}}&.", /*#__PURE__*/String(_tokens.classes.selectedSegmentItem), "{color:var(", _tokens.tokens.itemSelectedColor, ");background-color:var(", _tokens.tokens.itemSelectedBackgroundColor, ");", _SegmentItem.RightContent, "{color:var(", _tokens.tokens.itemSelectedAdditionalColor, ");}&:hover{color:var(", _tokens.tokens.itemSelectedColorHover, ");background-color:var(", _tokens.tokens.itemSelectedBackgroundColorHover, ");", _SegmentItem.RightContent, "{color:var(", _tokens.tokens.itemSelectedAdditionalColorHover, ");}}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS92YXJpYXRpb25zL192aWV3L2Jhc2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3VCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU2VnbWVudC91aS9TZWdtZW50SXRlbS92YXJpYXRpb25zL192aWV3L2Jhc2UudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4uLy4uLy4uLy4uL3Rva2Vucyc7XG5pbXBvcnQgeyBSaWdodENvbnRlbnQgfSBmcm9tICcuLi8uLi9TZWdtZW50SXRlbS5zdHlsZXMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBjb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1Db2xvcn0pO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5pdGVtQmFja2dyb3VuZENvbG9yfSk7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5pdGVtQ29sb3JIb3Zlcn0pO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoJHt0b2tlbnMuaXRlbUJhY2tncm91bmRDb2xvckhvdmVyfSk7XG5cbiAgICAgICAgJHtSaWdodENvbnRlbnR9IHtcbiAgICAgICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMuaXRlbUFkZGl0aW9uYWxDb2xvckhvdmVyfSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmLiR7U3RyaW5nKGNsYXNzZXMuc2VsZWN0ZWRTZWdtZW50SXRlbSl9IHtcbiAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5pdGVtU2VsZWN0ZWRDb2xvcn0pO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoJHt0b2tlbnMuaXRlbVNlbGVjdGVkQmFja2dyb3VuZENvbG9yfSk7XG5cbiAgICAgICAgJHtSaWdodENvbnRlbnR9IHtcbiAgICAgICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMuaXRlbVNlbGVjdGVkQWRkaXRpb25hbENvbG9yfSk7XG4gICAgICAgIH1cblxuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMuaXRlbVNlbGVjdGVkQ29sb3JIb3Zlcn0pO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1TZWxlY3RlZEJhY2tncm91bmRDb2xvckhvdmVyfSk7XG5cbiAgICAgICAgICAgICR7UmlnaHRDb250ZW50fSB7XG4gICAgICAgICAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5pdGVtU2VsZWN0ZWRBZGRpdGlvbmFsQ29sb3JIb3Zlcn0pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuYDtcbiJdfQ== */"));
@@ -145,7 +145,7 @@ var tabsRoot = exports.tabsRoot = function tabsRoot(Root) {
145
145
  var scrollLeft = Math.round(event.currentTarget.scrollLeft);
146
146
  setFirstItemVisible(scrollLeft <= 0);
147
147
  setLastItemVisible(scrollLeft >= maxScrollLeft);
148
- }, [setFirstItemVisible, setLastItemVisible]);
148
+ }, []);
149
149
  var onKeyDown = (0, _react.useCallback)(function (event) {
150
150
  if (index === undefined) {
151
151
  return;
@@ -193,7 +193,7 @@ var tabsRoot = exports.tabsRoot = function tabsRoot(Root) {
193
193
  scrollRef.current.scrollTo({
194
194
  left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
195
195
  });
196
- }, [firstItemVisible, scrollRef, leftArrowRef]);
196
+ }, [firstItemVisible]);
197
197
  return /*#__PURE__*/_react["default"].createElement(_TabsContext.TabsContext.Provider, {
198
198
  value: refs
199
199
  }, /*#__PURE__*/_react["default"].createElement(Root, _extends({
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.DisclosureDown = void 0;
7
+ var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
8
+ var _path;
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
11
+ var DisclosureDown = exports.DisclosureDown = function DisclosureDown(props) {
12
+ return /*#__PURE__*/_react["default"].createElement("svg", _extends({
13
+ width: "100%",
14
+ viewBox: "0 0 24 24",
15
+ fill: "none"
16
+ }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
17
+ d: "M17.78 18.21C17.48 17.92 17.01 17.92 16.71 18.21L12.75 22.18L8.78 18.21C8.48 17.92 8.01 17.92 7.71 18.21C7.42 18.51 7.42 18.98 7.71 19.28L12.75 24.31L17.78 19.28C18.07 18.98 18.07 18.51 17.78 18.21Z",
18
+ fillRule: "evenodd",
19
+ fill: "currentColor"
20
+ })));
21
+ };
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.DisclosureUp = void 0;
7
+ var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
8
+ var _path;
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
11
+ var DisclosureUp = exports.DisclosureUp = function DisclosureUp(props) {
12
+ return /*#__PURE__*/_react["default"].createElement("svg", _extends({
13
+ width: "100%",
14
+ viewBox: "0 0 24 24",
15
+ fill: "none"
16
+ }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
17
+ d: "M17.18 8.18C16.89 8.47 16.41 8.47 16.12 8.18L12.15 4.21L8.18 8.18C7.89 8.47 7.41 8.47 7.12 8.18C6.83 7.89 6.83 7.41 7.12 7.12L12.15 2.09L17.18 7.12C17.47 7.41 17.47 7.89 17.18 8.18Z",
18
+ fillRule: "evenodd",
19
+ fill: "currentColor"
20
+ })));
21
+ };
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.IconDisclosureDown = void 0;
7
+ var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
8
+ var _DisclosureDown = /*#__PURE__*/require("../Icon.assets/DisclosureDown");
9
+ var _IconRoot = /*#__PURE__*/require("../IconRoot");
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
+ var IconDisclosureDown = exports.IconDisclosureDown = function IconDisclosureDown(_ref) {
12
+ var _ref$size = _ref.size,
13
+ size = _ref$size === void 0 ? 's' : _ref$size,
14
+ color = _ref.color,
15
+ className = _ref.className;
16
+ return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, {
17
+ className: className,
18
+ size: size,
19
+ color: color,
20
+ icon: _DisclosureDown.DisclosureDown
21
+ });
22
+ };
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.IconDisclosureUp = void 0;
7
+ var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
8
+ var _DisclosureUp = /*#__PURE__*/require("../Icon.assets/DisclosureUp");
9
+ var _IconRoot = /*#__PURE__*/require("../IconRoot");
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
+ var IconDisclosureUp = exports.IconDisclosureUp = function IconDisclosureUp(_ref) {
12
+ var _ref$size = _ref.size,
13
+ size = _ref$size === void 0 ? 's' : _ref$size,
14
+ color = _ref.color,
15
+ className = _ref.className;
16
+ return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, {
17
+ className: className,
18
+ size: size,
19
+ color: color,
20
+ icon: _DisclosureUp.DisclosureUp
21
+ });
22
+ };
@@ -39,6 +39,12 @@ Object.defineProperty(exports, "IconCross", {
39
39
  return _IconCross.IconCross;
40
40
  }
41
41
  });
42
+ Object.defineProperty(exports, "IconDisclosureDown", {
43
+ enumerable: true,
44
+ get: function get() {
45
+ return _IconDisclosureDown.IconDisclosureDown;
46
+ }
47
+ });
42
48
  Object.defineProperty(exports, "IconDisclosureDownCentered", {
43
49
  enumerable: true,
44
50
  get: function get() {
@@ -69,6 +75,12 @@ Object.defineProperty(exports, "IconDisclosureRightCentered", {
69
75
  return _IconDisclosureRightCentered.IconDisclosureRightCentered;
70
76
  }
71
77
  });
78
+ Object.defineProperty(exports, "IconDisclosureUp", {
79
+ enumerable: true,
80
+ get: function get() {
81
+ return _IconDisclosureUp.IconDisclosureUp;
82
+ }
83
+ });
72
84
  Object.defineProperty(exports, "IconDone", {
73
85
  enumerable: true,
74
86
  get: function get() {
@@ -90,6 +102,8 @@ Object.defineProperty(exports, "IconMinus", {
90
102
  var _IconDisclosureLeft = /*#__PURE__*/require("./Icons/IconDisclosureLeft");
91
103
  var _IconDisclosureRight = /*#__PURE__*/require("./Icons/IconDisclosureRight");
92
104
  var _IconDisclosureDownFill = /*#__PURE__*/require("./Icons/IconDisclosureDownFill");
105
+ var _IconDisclosureDown = /*#__PURE__*/require("./Icons/IconDisclosureDown");
106
+ var _IconDisclosureUp = /*#__PURE__*/require("./Icons/IconDisclosureUp");
93
107
  var _IconMic = /*#__PURE__*/require("./Icons/IconMic");
94
108
  var _IconChevronLeft = /*#__PURE__*/require("./Icons/IconChevronLeft");
95
109
  var _IconChevronDoubleLeft = /*#__PURE__*/require("./Icons/IconChevronDoubleLeft");
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import styled from '@emotion/styled';
2
3
  import type { ComponentProps } from 'react';
3
4
  import type { StoryObj, Meta } from '@storybook/react';
4
5
 
@@ -6,6 +7,8 @@ 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 { IconMic } from '../../../../components/_Icon';
11
+ import { Counter } from '../Counter/Counter';
9
12
 
10
13
  import { config } from './SegmentGroup.config';
11
14
  import { SegmentItem, SegmentGroup } from './Segment';
@@ -19,6 +22,40 @@ type CustomStorySegmentProps = {
19
22
 
20
23
  type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStorySegmentProps;
21
24
 
25
+ const sizes = ['xs', 's', 'm', 'l'] as const;
26
+
27
+ type Size = typeof sizes[number];
28
+
29
+ const contentLeftOptions = ['none', 'icon'];
30
+ const contentRightOptions = ['none', 'text', 'counter', 'icon'];
31
+
32
+ const getContentLeft = (contentLeftOption: string, size: Size) => {
33
+ const iconSize = size === 'xs' ? 'xs' : 's';
34
+ return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
35
+ };
36
+
37
+ const getContentRight = (contentRightOption: string, size: Size) => {
38
+ const iconSize = size === 'xs' ? 'xs' : 's';
39
+ const counterSize = size === 'xs' ? 'xxs' : 'xs';
40
+
41
+ switch (contentRightOption) {
42
+ case 'icon':
43
+ return <IconMic size={iconSize} color="inherit" />;
44
+ case 'counter':
45
+ return <Counter size={counterSize} count={1} view="positive" />;
46
+ case 'text':
47
+ return <div>Text</div>;
48
+ default:
49
+ return undefined;
50
+ }
51
+ };
52
+
53
+ const Column = styled.div`
54
+ display: flex;
55
+ flex-direction: column;
56
+ align-items: flex-start;
57
+ `;
58
+
22
59
  const meta: Meta<StorySegmentProps> = {
23
60
  title: 'plasma_web/Segment',
24
61
  decorators: [WithTheme],
@@ -37,12 +74,32 @@ const meta: Meta<StorySegmentProps> = {
37
74
  type: 'select',
38
75
  },
39
76
  },
77
+ contentLeft: {
78
+ options: contentLeftOptions,
79
+ control: {
80
+ type: 'select',
81
+ },
82
+ },
83
+ contentRight: {
84
+ options: contentRightOptions,
85
+ control: {
86
+ type: 'select',
87
+ },
88
+ },
40
89
  },
41
90
  };
42
91
 
43
92
  export default meta;
44
93
 
45
- const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view, ...args }: StorySegmentProps) => {
94
+ const StoryDefault = ({
95
+ contentItemsNumber,
96
+ selectionMode,
97
+ segmentItemView,
98
+ view,
99
+ contentLeft: contentLeftOption,
100
+ contentRight: contentRightOption,
101
+ ...args
102
+ }: StorySegmentProps) => {
46
103
  const contentItems = Array(contentItemsNumber).fill(0);
47
104
 
48
105
  return (
@@ -56,6 +113,8 @@ const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view
56
113
  label={`Label ${i}`}
57
114
  value={`label_${i}`}
58
115
  key={`label_${i}`}
116
+ contentLeft={getContentLeft(contentLeftOption, args.size as Size)}
117
+ contentRight={getContentRight(contentRightOption, args.size as Size)}
59
118
  {...args}
60
119
  />
61
120
  ))}
@@ -64,13 +123,20 @@ const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view
64
123
 
65
124
  <h3>Segment with fixed width</h3>
66
125
  <SegmentProvider>
67
- <SegmentGroup view={view} style={{ width: '28.5rem' }} selectionMode={selectionMode} {...args}>
126
+ <SegmentGroup
127
+ view={view}
128
+ style={{ width: '329px' /* , position: 'relative', background: 'lightblue'*/ }}
129
+ selectionMode={selectionMode}
130
+ {...args}
131
+ >
68
132
  {contentItems.map((_, i) => (
69
133
  <SegmentItem
70
134
  view={segmentItemView}
71
135
  label={`Label ${i}`}
72
136
  value={`label_${i}`}
73
137
  key={`label_${i}`}
138
+ contentLeft={getContentLeft(contentLeftOption, args.size as Size)}
139
+ contentRight={getContentRight(contentRightOption, args.size as Size)}
74
140
  {...args}
75
141
  />
76
142
  ))}
@@ -90,6 +156,81 @@ export const Default: StoryObj<StorySegmentProps> = {
90
156
  pilled: false,
91
157
  filledBackground: false,
92
158
  disabled: false,
159
+ vertical: false,
93
160
  },
94
161
  render: (args) => <StoryDefault {...args} />,
95
162
  };
163
+
164
+ const StorySegmentItem = ({
165
+ contentItemsNumber,
166
+ selectionMode,
167
+ segmentItemView,
168
+ view,
169
+ contentLeft: contentLeftOption,
170
+ contentRight: contentRightOption,
171
+ ...args
172
+ }: StorySegmentProps) => {
173
+ return (
174
+ <>
175
+ <h3>Items</h3>
176
+ <Column>
177
+ <SegmentProvider>
178
+ <SegmentItem view={segmentItemView} size={args.size} label="Label" value="label_value" />
179
+ <SegmentItem
180
+ view={segmentItemView}
181
+ label="Label"
182
+ value="label_value"
183
+ contentLeft={<IconMic color="inherit" />}
184
+ {...args}
185
+ />
186
+ <SegmentItem
187
+ view={segmentItemView}
188
+ label="Label"
189
+ value="label_value"
190
+ contentRight={<IconMic color="inherit" />}
191
+ {...args}
192
+ />
193
+ <SegmentItem
194
+ view={segmentItemView}
195
+ label="Label"
196
+ value="label_value"
197
+ contentLeft={<IconMic color="inherit" />}
198
+ contentRight={<IconMic color="inherit" />}
199
+ {...args}
200
+ />
201
+ <SegmentItem
202
+ view={segmentItemView}
203
+ label="Label"
204
+ value="label_value"
205
+ contentLeft={<IconMic color="inherit" />}
206
+ contentRight="HelpText"
207
+ {...args}
208
+ />
209
+ <SegmentItem
210
+ view={segmentItemView}
211
+ label="Label"
212
+ value="label_value"
213
+ contentLeft={getContentLeft(contentLeftOption, args.size as Size)}
214
+ contentRight={getContentRight(contentRightOption, args.size as Size)}
215
+ {...args}
216
+ />
217
+ </SegmentProvider>
218
+ </Column>
219
+ </>
220
+ );
221
+ };
222
+
223
+ export const SegmentItemPage: StoryObj<StorySegmentProps> = {
224
+ args: {
225
+ view: 'clear',
226
+ size: 'xs',
227
+ segmentItemView: 'clear',
228
+ selectionMode: 'single',
229
+ contentItemsNumber: 11,
230
+ pilled: false,
231
+ filledBackground: false,
232
+ disabled: false,
233
+ vertical: false,
234
+ },
235
+ render: (args) => <StorySegmentItem {...args} />,
236
+ };