@salutejs/plasma-new-hope 0.165.2-canary.1478.11345360096.0 → 0.166.0-canary.1392.11342835439.0

package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.js

@@ -15,7 +15,7 @@ var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_pilled/base");
 var _SegmentItem = /*#__PURE__*/require("./SegmentItem.styles");
-var _excluded = ["size", "view", "id", "label", "value", "pilled", "customHandleSelect", "aria-label"];
+var _excluded = ["size", "view", "id", "label", "value", "pilled", "contentLeft", "contentRight", "customHandleSelect", "skipSelection", "aria-label"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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); }
@@ -24,12 +24,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var segmentItemRoot = exports.segmentItemRoot = function segmentItemRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (props, outerRef) {
     var size = props.size,
-      view = props.view,
+      _props$view = props.view,
+      view = _props$view === void 0 ? 'default' : _props$view,
       id = props.id,
       label = props.label,
       value = props.value,
       pilled = props.pilled,
+      contentLeft = props.contentLeft,
+      contentRight = props.contentRight,
       customHandleSelect = props.customHandleSelect,
+      skipSelection = props.skipSelection,
       ariaLabelExternal = props['aria-label'],
       rest = _objectWithoutProperties(props, _excluded);
     var _useSegmentInner = (0, _SegmentProvider.useSegmentInner)(),
@@ -42,17 +46,20 @@ var segmentItemRoot = exports.segmentItemRoot = function segmentItemRoot(Root) {
     var ariaLabelDefault = (0, _react.useMemo)(function () {
       return (0, _utils.extractTextFrom)(label);
     }, [label]);
-    var pilledAttr = view !== 'clear' && pilled;
-    var pilledClass = pilledAttr ? _tokens.classes.segmentPilled : undefined;
+    var pilledClass = pilled ? _tokens.classes.segmentPilled : undefined;
+    var xsSize = size === 'xs' ? _tokens.classes.segmentXsSize : undefined;
     var isSelected = selectedSegmentItems === null || selectedSegmentItems === void 0 ? void 0 : selectedSegmentItems.includes(value || ariaLabelDefault);
     var selectedClass = isSelected ? _tokens.classes.selectedSegmentItem : undefined;
     var handleSelectSegment = (0, _react.useCallback)(function (event) {
       if (disabledGroup) {
         return;
       }
+      if (skipSelection) {
+        return;
+      }
       customHandleSelect === null || customHandleSelect === void 0 || customHandleSelect(event);
       handleSelect === null || handleSelect === void 0 || handleSelect(value || ariaLabelDefault);
-    }, [selectionMode]);
+    }, [selectionMode, disabledGroup, skipSelection]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,
       size: size,
@@ -60,12 +67,14 @@ var segmentItemRoot = exports.segmentItemRoot = function segmentItemRoot(Root) {
       ref: outerRef,
       "aria-label": ariaLabelExternal || ariaLabelDefault,
       value: value,
-      pilled: pilledAttr,
-      className: (0, _utils.cx)(selectedClass, pilledClass),
+      pilled: pilled,
+      className: (0, _utils.cx)(selectedClass, pilledClass, xsSize),
       onClick: handleSelectSegment,
       tabIndex: disabledGroup ? -1 : 0,
       disabled: disabledGroup
-    }, rest), /*#__PURE__*/_react["default"].createElement(_SegmentItem.StyledContent, null, label || value));
+    }, rest), contentLeft && /*#__PURE__*/_react["default"].createElement(_SegmentItem.LeftContent, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_SegmentItem.StyledContent, null, label || value), contentRight && /*#__PURE__*/_react["default"].createElement(_SegmentItem.RightContent, {
+      className: typeof contentRight === 'string' ? _tokens.classes.segmentAdditionalText : ''
+    }, contentRight));
   });
 };
 var segmentItemConfig = exports.segmentItemConfig = {
@@ -90,7 +99,7 @@ var segmentItemConfig = exports.segmentItemConfig = {
     }
   },
   defaults: {
-    view: 'clear',
+    view: 'default',
     size: 'xs'
   }
 };

package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js

@@ -4,19 +4,31 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.StyledContent = void 0;
+exports.base = exports.StyledContent = exports.RightContent = exports.LeftContent = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
 var _mixins = /*#__PURE__*/require("../../../../mixins");
 var _tokens = /*#__PURE__*/require("../../tokens");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ");-webkit-tap-highlight-color:rgba(0,0,0,0);&:first-child{margin-left:0;}", ";"], _tokens.tokens.itemMarginLeft, /*#__PURE__*/(0, _mixins.addFocus)({
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;appearance:none;border:none;outline:none;cursor:pointer;margin-left:var(", ");-webkit-tap-highlight-color:rgba(0,0,0,0);&:first-child{margin-left:0;}", ";"], _tokens.tokens.itemMarginLeft, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.063rem',
-  outlineOffset: '-0.125rem',
+  outlineOffset: '-0.063rem',
   outlineColor: /*#__PURE__*/"var(".concat(_tokens.tokens.outlineFocusColor, ")"),
   outlineRadius: 'calc(var(--plasma_private-outline-radius) + 0.063rem)',
   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        ")
 }));
 var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-m3m328-0"
-})(["display:inline-block;width:fit-content;", ";"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
+})(["display:inline-block;width:fit-content;padding:var(", ");", ";margin-right:", ";margin-left:", ";"], _tokens.tokens.itemContentPadding, /*#__PURE__*/(0, _mixins.applyEllipsis)(), function (_ref) {
+  var hasRightMargin = _ref.hasRightMargin;
+  return hasRightMargin ? "var(".concat(_tokens.tokens.itemIconMargin, ")") : '0';
+}, function (_ref2) {
+  var hasLeftMargin = _ref2.hasLeftMargin;
+  return hasLeftMargin ? "var(".concat(_tokens.tokens.itemIconMargin, ")") : '0';
+});
+var RightContent = exports.RightContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-m3m328-1"
+})(["display:flex;margin-left:var(", ");overflow:hidden;color:var(", ");&.", "{text-overflow:ellipsis;overflow:hidden;color:var(", ");}"], _tokens.tokens.itemIconMargin, _tokens.tokens.itemColor, _tokens.classes.segmentAdditionalText, _tokens.tokens.itemAdditionalColor);
+var LeftContent = exports.LeftContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-m3m328-2"
+})(["display:flex;margin-right:var(", ");color:inherit;"], _tokens.tokens.itemIconMargin);

package/styled-components/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _tokens = /*#__PURE__*/require("../../../../tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{--plasma_private-outline-radius:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(_tokens.classes.segmentPilled), _tokens.tokens.itemPilledBorderRadius, _tokens.tokens.itemPilledBorderRadius);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{--plasma_private-outline-radius:var(", ");border-radius:var(", ");padding:var(", ");}"], /*#__PURE__*/String(_tokens.classes.segmentPilled), _tokens.tokens.itemPilledBorderRadius, _tokens.tokens.itemPilledBorderRadius, _tokens.tokens.itemPilledPadding);

package/styled-components/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js

@@ -6,4 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _tokens = /*#__PURE__*/require("../../../../tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");}&.", "{color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");}}"], _tokens.tokens.itemColor, _tokens.tokens.itemBackgroundColor, _tokens.tokens.itemColorHover, _tokens.tokens.itemBackgroundColorHover, /*#__PURE__*/String(_tokens.classes.selectedSegmentItem), _tokens.tokens.itemSelectedColor, _tokens.tokens.itemSelectedBackgroundColor, _tokens.tokens.itemSelectedColorHover, _tokens.tokens.itemSelectedBackgroundColorHover);
+var _SegmentItem = /*#__PURE__*/require("../../SegmentItem.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}", ".", "{color:var(", ");}}&.", "{color:var(", ");background-color:var(", ");", "{color:var(", ");}", ".", "{color:var(", ");}&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}}}"], _tokens.tokens.itemColor, _tokens.tokens.itemBackgroundColor, _tokens.tokens.itemColorHover, _tokens.tokens.itemBackgroundColorHover, _SegmentItem.RightContent, _tokens.tokens.itemColorHover, _SegmentItem.RightContent, _tokens.classes.segmentAdditionalText, _tokens.tokens.itemAdditionalColorHover, /*#__PURE__*/String(_tokens.classes.selectedSegmentItem), _tokens.tokens.itemSelectedColor, _tokens.tokens.itemSelectedBackgroundColor, _SegmentItem.RightContent, _tokens.tokens.itemSelectedColor, _SegmentItem.RightContent, _tokens.classes.segmentAdditionalText, _tokens.tokens.itemSelectedAdditionalColor, _tokens.tokens.itemSelectedColorHover, _tokens.tokens.itemSelectedBackgroundColorHover, _SegmentItem.RightContent, _tokens.tokens.itemSelectedAdditionalColorHover);

package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureDownWithOffset.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DisclosureDownWithOffset = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _path;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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); }
+var DisclosureDownWithOffset = exports.DisclosureDownWithOffset = function DisclosureDownWithOffset(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
+    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",
+    fillRule: "evenodd",
+    fill: "currentColor"
+  })));
+};

package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DisclosureLeftWithOffset = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _path;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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); }
+var DisclosureLeftWithOffset = exports.DisclosureLeftWithOffset = function DisclosureLeftWithOffset(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M6.09 6.96c.29.3.29.77 0 1.07L2.12 12l3.97 3.96c.29.3.29.77 0 1.07-.3.29-.77.29-1.06 0L0 12l5.03-5.04c.29-.29.76-.29 1.06 0Z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })));
+};

package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureRightWithOffset.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DisclosureRightWithOffset = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _path;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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); }
+var DisclosureRightWithOffset = exports.DisclosureRightWithOffset = function DisclosureRightWithOffset(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M18.21 6.96c-.29.3-.29.77 0 1.07L22.18 12l-3.97 3.96c-.29.3-.29.77 0 1.07.3.29.77.29 1.07 0L24.31 12l-5.03-5.04a.767.767 0 0 0-1.07 0Z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })));
+};

package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureUpWithOffset.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DisclosureUpWithOffset = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _path;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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); }
+var DisclosureUpWithOffset = exports.DisclosureUpWithOffset = function DisclosureUpWithOffset(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
+    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",
+    fillRule: "evenodd",
+    fill: "currentColor"
+  })));
+};

package/styled-components/cjs/components/_Icon/Icons/IconDisclosureDownWithOffset.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconDisclosureDownWithOffset = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _DisclosureDownWithOffset = /*#__PURE__*/require("../Icon.assets/DisclosureDownWithOffset");
+var _IconRoot = /*#__PURE__*/require("../IconRoot");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var IconDisclosureDownWithOffset = exports.IconDisclosureDownWithOffset = function IconDisclosureDownWithOffset(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: _DisclosureDownWithOffset.DisclosureDownWithOffset
+  });
+};

package/styled-components/cjs/components/_Icon/Icons/IconDisclosureLeftWithOffset.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconDisclosureLeftWithOffset = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _DisclosureLeftWithOffset = /*#__PURE__*/require("../Icon.assets/DisclosureLeftWithOffset");
+var _IconRoot = /*#__PURE__*/require("../IconRoot");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var IconDisclosureLeftWithOffset = exports.IconDisclosureLeftWithOffset = function IconDisclosureLeftWithOffset(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: _DisclosureLeftWithOffset.DisclosureLeftWithOffset
+  });
+};

package/styled-components/cjs/components/_Icon/Icons/IconDisclosureRightWithOffset.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconDisclosureRightWithOffset = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _DisclosureRightWithOffset = /*#__PURE__*/require("../Icon.assets/DisclosureRightWithOffset");
+var _IconRoot = /*#__PURE__*/require("../IconRoot");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var IconDisclosureRightWithOffset = exports.IconDisclosureRightWithOffset = function IconDisclosureRightWithOffset(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: _DisclosureRightWithOffset.DisclosureRightWithOffset
+  });
+};

package/styled-components/cjs/components/_Icon/Icons/IconDisclosureUpWithOffset.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconDisclosureUpWithOffset = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _DisclosureUpWithOffset = /*#__PURE__*/require("../Icon.assets/DisclosureUpWithOffset");
+var _IconRoot = /*#__PURE__*/require("../IconRoot");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var IconDisclosureUpWithOffset = exports.IconDisclosureUpWithOffset = function IconDisclosureUpWithOffset(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: _DisclosureUpWithOffset.DisclosureUpWithOffset
+  });
+};

package/styled-components/cjs/components/_Icon/index.js

@@ -93,12 +93,24 @@ Object.defineProperty(exports, "IconDisclosureDownFill", {
     return _IconDisclosureDownFill.IconDisclosureDownFill;
   }
 });
+Object.defineProperty(exports, "IconDisclosureDownWithOffset", {
+  enumerable: true,
+  get: function get() {
+    return _IconDisclosureDownWithOffset.IconDisclosureDownWithOffset;
+  }
+});
 Object.defineProperty(exports, "IconDisclosureLeft", {
   enumerable: true,
   get: function get() {
     return _IconDisclosureLeft.IconDisclosureLeft;
   }
 });
+Object.defineProperty(exports, "IconDisclosureLeftWithOffset", {
+  enumerable: true,
+  get: function get() {
+    return _IconDisclosureLeftWithOffset.IconDisclosureLeftWithOffset;
+  }
+});
 Object.defineProperty(exports, "IconDisclosureRight", {
   enumerable: true,
   get: function get() {
@@ -111,6 +123,18 @@ Object.defineProperty(exports, "IconDisclosureRightCentered", {
     return _IconDisclosureRightCentered.IconDisclosureRightCentered;
   }
 });
+Object.defineProperty(exports, "IconDisclosureRightWithOffset", {
+  enumerable: true,
+  get: function get() {
+    return _IconDisclosureRightWithOffset.IconDisclosureRightWithOffset;
+  }
+});
+Object.defineProperty(exports, "IconDisclosureUpWithOffset", {
+  enumerable: true,
+  get: function get() {
+    return _IconDisclosureUpWithOffset.IconDisclosureUpWithOffset;
+  }
+});
 Object.defineProperty(exports, "IconDone", {
   enumerable: true,
   get: function get() {
@@ -135,9 +159,13 @@ Object.defineProperty(exports, "IconPlus", {
     return _IconPlus.IconPlus;
   }
 });
+var _IconDisclosureLeftWithOffset = /*#__PURE__*/require("./Icons/IconDisclosureLeftWithOffset");
 var _IconDisclosureLeft = /*#__PURE__*/require("./Icons/IconDisclosureLeft");
 var _IconDisclosureRight = /*#__PURE__*/require("./Icons/IconDisclosureRight");
+var _IconDisclosureRightWithOffset = /*#__PURE__*/require("./Icons/IconDisclosureRightWithOffset");
 var _IconDisclosureDownFill = /*#__PURE__*/require("./Icons/IconDisclosureDownFill");
+var _IconDisclosureDownWithOffset = /*#__PURE__*/require("./Icons/IconDisclosureDownWithOffset");
+var _IconDisclosureUpWithOffset = /*#__PURE__*/require("./Icons/IconDisclosureUpWithOffset");
 var _IconMic = /*#__PURE__*/require("./Icons/IconMic");
 var _IconChevronLeft = /*#__PURE__*/require("./Icons/IconChevronLeft");
 var _IconChevronDoubleLeft = /*#__PURE__*/require("./Icons/IconChevronDoubleLeft");

package/styled-components/cjs/examples/plasma_b2c/components/Segment/Segment.stories.tsx

@@ -1,23 +1,56 @@
 import React from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { segmentGroupConfig } from '../../../../components/Segment';
 import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { SegmentProvider } from '../../../../components/Segment/SegmentProvider';
+import { Counter } from '../Counter/Counter';
+import { IconMic } from '../../../../components/_Icon';
 
 import { config } from './SegmentGroup.config';
 import { SegmentItem, SegmentGroup } from './Segment';
 
-const segmentItemViews = ['clear', 'default', 'secondary'];
+const contentLeftOptions = ['none', 'icon'];
+const contentRightOptions = ['none', 'text', 'counter', 'icon'];
 
-type CustomStorySegmentProps = {
-    segmentItemView?: string;
-    contentItemsNumber?: number;
+const segmentItemViews = ['default', 'secondary'];
+type Size = typeof sizes[number];
+
+type CustomStoryProps = {
+    itemQuantity: number;
+    contentLeft: string;
+    contentRight: string;
+    segmentItemView?: 'default' | 'secondary';
+    clip: boolean;
+};
+
+type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStoryProps;
+
+const sizes = ['xs', 's', 'm', 'l'] as const;
+
+const getContentLeft = (contentLeftOption: string, size: Size) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+    return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
 };
 
-type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStorySegmentProps;
+const getContentRight = (contentRightOption: string, size: Size) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+    const counterSize = size === 'xs' ? 'xxs' : 'xs';
+
+    switch (contentRightOption) {
+        case 'icon':
+            return <IconMic size={iconSize} color="inherit" />;
+        case 'counter':
+            return <Counter size={counterSize} count={1} view="positive" />;
+        case 'text':
+            return 'Text';
+        default:
+            return undefined;
+    }
+};
 
 const meta: Meta<StorySegmentProps> = {
     title: 'plasma_b2c/Segment',
@@ -25,6 +58,25 @@ const meta: Meta<StorySegmentProps> = {
     component: SegmentGroup,
     argTypes: {
         ...argTypesFromConfig(mergeConfig(segmentGroupConfig, config)),
+        ...disableProps(['filledBackground', 'view', 'selectionMode']),
+        clip: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'stretch', truthy: false },
+        },
+        stretch: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'orientation', eq: 'horizontal' },
+        },
+        orientation: {
+            options: ['horizontal', 'vertical'],
+            control: {
+                type: 'select',
+            },
+        },
         selectionMode: {
             options: ['single', 'multiple'],
             control: {
@@ -37,60 +89,90 @@ const meta: Meta<StorySegmentProps> = {
                 type: 'select',
             },
         },
+        contentLeft: {
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        contentRight: {
+            options: contentRightOptions,
+            control: {
+                type: 'select',
+            },
+        },
     },
 };
 
 export default meta;
 
-const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view, ...args }: StorySegmentProps) => {
-    const contentItems = Array(contentItemsNumber).fill(0);
+const StoryDefault = (props: StorySegmentProps) => {
+    const {
+        clip,
+        disabled,
+        itemQuantity,
+        size,
+        stretch,
+        orientation,
+
+        segmentItemView,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        ...args
+    } = props;
+    const items = Array(itemQuantity).fill(0);
+    const isVertical = orientation === 'vertical';
+
+    const style = clip ? { width: isVertical ? 'auto' : '20rem', height: isVertical ? '10rem' : 'auto' } : undefined;
 
     return (
-        <>
-            <h3>Segment with auto width</h3>
-            <SegmentProvider>
-                <SegmentGroup view={view} selectionMode={selectionMode} {...args}>
-                    {contentItems.map((_, i) => (
-                        <SegmentItem
-                            view={segmentItemView}
-                            label={`Label ${i}`}
-                            value={`label_${i}`}
-                            key={`label_${i}`}
-                            {...args}
-                        />
-                    ))}
-                </SegmentGroup>
-            </SegmentProvider>
-
-            <h3>Segment with fixed width</h3>
-            <SegmentProvider>
-                <SegmentGroup view={view} style={{ width: '28.5rem' }} selectionMode={selectionMode} {...args}>
-                    {contentItems.map((_, i) => (
-                        <SegmentItem
-                            view={segmentItemView}
-                            label={`Label ${i}`}
-                            value={`label_${i}`}
-                            key={`label_${i}`}
-                            {...args}
-                        />
-                    ))}
-                </SegmentGroup>
-            </SegmentProvider>
-        </>
+        <SegmentProvider>
+            <SegmentGroup
+                stretch={stretch}
+                disabled={disabled}
+                clip={clip}
+                size={size}
+                orientation={orientation}
+                style={style}
+                {...args}
+            >
+                {items.map((_, i) => (
+                    <SegmentItem
+                        view={segmentItemView}
+                        label={`Label ${i}`}
+                        value={`label_${i}`}
+                        size={size}
+                        key={`label_${i}`}
+                        contentLeft={getContentLeft(contentLeftOption, size)}
+                        contentRight={getContentRight(contentRightOption, size)}
+                        {...args}
+                    >
+                        {`Label${i + 1}`}
+                    </SegmentItem>
+                ))}
+            </SegmentGroup>
+        </SegmentProvider>
     );
 };
 
 export const Default: StoryObj<StorySegmentProps> = {
     args: {
-        view: 'clear',
+        itemQuantity: 8,
         size: 'xs',
-        segmentItemView: 'clear',
+        segmentItemView: 'default',
         selectionMode: 'single',
-        contentItemsNumber: 11,
         pilled: false,
         filledBackground: false,
+        hasBackground: false,
         disabled: false,
         stretch: false,
+        clip: false,
+        orientation: 'horizontal',
+        contentRight: 'none',
+        contentLeft: 'none',
+    },
+    argTypes: {
+        ...disableProps(['filledBackground', 'view', 'selectionMode']),
     },
-    render: (args) => <StoryDefault {...args} />,
+    render: (args: StorySegmentProps) => <StoryDefault {...args} />,
 };

package/styled-components/cjs/examples/plasma_b2c/components/Segment/SegmentGroup.config.js

@@ -13,26 +13,29 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":tranparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.arrowColor, _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor),
-      filled: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.arrowColor, _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor)
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused,var(--text-accent));"], _Segment.segmentTokens.arrowColor, _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor),
+      filled: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused,var(--text-accent));"], _Segment.segmentTokens.arrowColor, _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor)
     },
     size: {
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight)
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":1.125rem;", ":auto;", ":auto;", ":0.25rem 0.75rem;", ":0.75rem 0;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupPilledBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight, _Segment.segmentTokens.groupArrowPadding, _Segment.segmentTokens.groupVerticalArrowPadding),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":1.375rem;", ":auto;", ":auto;", ":0.5rem 0.875rem;", ":0.875rem 0;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupPilledBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight, _Segment.segmentTokens.groupArrowPadding, _Segment.segmentTokens.groupVerticalArrowPadding),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":1.625rem;", ":auto;", ":auto;", ":0.75rem 1.25rem;", ":1.25rem 0;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupPilledBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight, _Segment.segmentTokens.groupArrowPadding, _Segment.segmentTokens.groupVerticalArrowPadding),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.875rem;", ":auto;", ":auto;", ":1rem 1.375rem;", ":1.375rem 0;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupPilledBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight, _Segment.segmentTokens.groupArrowPadding, _Segment.segmentTokens.groupVerticalArrowPadding)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Segment.segmentTokens.disabledOpacity)
     },
     pilled: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;"], _Segment.segmentTokens.groupPilledBorderRadius)
+      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     },
     stretch: {
       "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     },
     filledBackground: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-surface-liquid02);"], _Segment.segmentTokens.groupFilledBackgroundColor)
+    },
+    orientation: {
+      vertical: /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };