@salutejs/plasma-new-hope 0.161.1-canary.1471.11182853822.0 → 0.162.0-canary.1392.11210877000.0

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

@@ -1,4 +1,4 @@
-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 _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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -11,16 +11,20 @@ import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as pilledCSS } from './variations/_pilled/base';
-import { StyledContent, base } from './SegmentItem.styles';
+import { StyledContent, base, LeftContent, RightContent } from './SegmentItem.styles';
 export var segmentItemRoot = function segmentItemRoot(Root) {
   return /*#__PURE__*/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 = useSegmentInner(),
@@ -33,17 +37,21 @@ export var segmentItemRoot = function segmentItemRoot(Root) {
     var ariaLabelDefault = useMemo(function () {
       return extractTextFrom(label);
     }, [label]);
-    var pilledAttr = view !== 'clear' && pilled;
+    var pilledAttr = pilled;
     var pilledClass = pilledAttr ? classes.segmentPilled : undefined;
+    var xsSize = size === 'xs' ? classes.segmentXsSize : undefined;
     var isSelected = selectedSegmentItems === null || selectedSegmentItems === void 0 ? void 0 : selectedSegmentItems.includes(value || ariaLabelDefault);
     var selectedClass = isSelected ? classes.selectedSegmentItem : undefined;
     var handleSelectSegment = 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.createElement(Root, _extends({
       view: view,
       size: size,
@@ -52,11 +60,13 @@ export var segmentItemRoot = function segmentItemRoot(Root) {
       "aria-label": ariaLabelExternal || ariaLabelDefault,
       value: value,
       pilled: pilledAttr,
-      className: cx(selectedClass, pilledClass),
+      className: cx(selectedClass, pilledClass, xsSize),
       onClick: handleSelectSegment,
       tabIndex: disabledGroup ? -1 : 0,
       disabled: disabledGroup
-    }, rest), /*#__PURE__*/React.createElement(StyledContent, null, label || value));
+    }, rest), contentLeft && /*#__PURE__*/React.createElement(LeftContent, null, contentLeft), /*#__PURE__*/React.createElement(StyledContent, null, label || value), contentRight && /*#__PURE__*/React.createElement(RightContent, {
+      className: typeof contentRight === 'string' ? classes.segmentAdditionalText : ''
+    }, contentRight));
   });
 };
 export var segmentItemConfig = {
@@ -81,7 +91,7 @@ export var segmentItemConfig = {
     }
   },
   defaults: {
-    view: 'clear',
+    view: 'default',
     size: 'xs'
   }
 };

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

@@ -1,14 +1,26 @@
 import styled from 'styled-components';
 import { css } from 'styled-components';
 import { addFocus, applyEllipsis } from '../../../../mixins';
-import { tokens } from '../../tokens';
-export var base = /*#__PURE__*/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.itemMarginLeft, /*#__PURE__*/addFocus({
+import { classes, tokens } from '../../tokens';
+export var base = /*#__PURE__*/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.itemMarginLeft, /*#__PURE__*/addFocus({
   outlineSize: '0.063rem',
-  outlineOffset: '-0.125rem',
+  outlineOffset: '-0.063rem',
   outlineColor: /*#__PURE__*/"var(".concat(tokens.outlineFocusColor, ")"),
-  outlineRadius: 'calc(var(--plasma_private-outline-radius) + 0.063rem)',
+  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.outlineFocusColor, ");\n                }\n            }\n        ")
 }));
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-m3m328-0"
-})(["display:inline-block;width:fit-content;", ";"], /*#__PURE__*/applyEllipsis());
+})(["display:inline-block;width:fit-content;padding:var(", ");", ";margin-right:", ";margin-left:", ";"], tokens.itemContentPadding, /*#__PURE__*/applyEllipsis(), function (_ref) {
+  var hasRightMargin = _ref.hasRightMargin;
+  return hasRightMargin ? "var(".concat(tokens.itemIconMargin, ")") : '0';
+}, function (_ref2) {
+  var hasLeftMargin = _ref2.hasLeftMargin;
+  return hasLeftMargin ? "var(".concat(tokens.itemIconMargin, ")") : '0';
+});
+export var RightContent = /*#__PURE__*/styled.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.itemIconMargin, tokens.itemColor, classes.segmentAdditionalText, tokens.itemAdditionalColor);
+export var LeftContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-m3m328-2"
+})(["display:flex;margin-right:var(", ");color:inherit;"], tokens.itemIconMargin);

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

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../../../tokens';
-export var base = /*#__PURE__*/css(["&.", "{--plasma_private-outline-radius:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(classes.segmentPilled), tokens.itemPilledBorderRadius, tokens.itemPilledBorderRadius);
+export var base = /*#__PURE__*/css(["&.", "{--plasma_private-outline-radius:var(", ");border-radius:var(", ");padding:var(", ");}"], /*#__PURE__*/String(classes.segmentPilled), tokens.itemPilledBorderRadius, tokens.itemPilledBorderRadius, tokens.itemPilledPadding);

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

@@ -1,3 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../../../tokens';
-export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");}&.", "{color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");}}"], tokens.itemColor, tokens.itemBackgroundColor, tokens.itemColorHover, tokens.itemBackgroundColorHover, /*#__PURE__*/String(classes.selectedSegmentItem), tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor, tokens.itemSelectedColorHover, tokens.itemSelectedBackgroundColorHover);
+import { RightContent } from '../../SegmentItem.styles';
+export var base = /*#__PURE__*/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.itemColor, tokens.itemBackgroundColor, tokens.itemColorHover, tokens.itemBackgroundColorHover, RightContent, tokens.itemColorHover, RightContent, classes.segmentAdditionalText, tokens.itemAdditionalColorHover, /*#__PURE__*/String(classes.selectedSegmentItem), tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor, RightContent, tokens.itemSelectedColor, RightContent, classes.segmentAdditionalText, tokens.itemSelectedAdditionalColor, tokens.itemSelectedColorHover, tokens.itemSelectedBackgroundColorHover, RightContent, tokens.itemSelectedAdditionalColorHover);

package/styled-components/es/components/Tabs/ui/Tabs/Tabs.js

@@ -10,7 +10,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import { safeUseId } from '@salutejs/plasma-core';
-import { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
+import { IconDisclosureLeftCentered, IconDisclosureRightCentered } from '../../../_Icon';
 import { classes, tokens } from '../../tokens';
 import { cx } from '../../../../utils';
 import { TabItemRefs, TabsContext } from '../../TabsContext';
@@ -114,7 +114,7 @@ export var tabsRoot = function tabsRoot(Root) {
         isFilled: isFilled,
         ref: leftArrowRef,
         isLeftArrow: true
-      }, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
+      }, /*#__PURE__*/React.createElement(IconDisclosureLeftCentered, {
         color: "var(".concat(tokens.arrowColor, ")")
       }));
     }, [onPrev, disabled, isFilled]);
@@ -126,7 +126,7 @@ export var tabsRoot = function tabsRoot(Root) {
         tabIndex: disabled ? -1 : 0,
         disabled: disabled,
         isFilled: isFilled
-      }, /*#__PURE__*/React.createElement(IconDisclosureRight, {
+      }, /*#__PURE__*/React.createElement(IconDisclosureRightCentered, {
         color: "var(".concat(tokens.arrowColor, ")")
       }));
     }, [onNext, disabled, isFilled]);
@@ -136,7 +136,7 @@ export var tabsRoot = function tabsRoot(Root) {
       var scrollLeft = Math.round(event.currentTarget.scrollLeft);
       setFirstItemVisible(scrollLeft <= 0);
       setLastItemVisible(scrollLeft >= maxScrollLeft);
-    }, [setFirstItemVisible, setLastItemVisible]);
+    }, []);
     var onKeyDown = useCallback(function (event) {
       if (index === undefined) {
         return;
@@ -184,7 +184,7 @@ export var tabsRoot = function tabsRoot(Root) {
       scrollRef.current.scrollTo({
         left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
       });
-    }, [firstItemVisible, scrollRef, leftArrowRef]);
+    }, [firstItemVisible]);
     return /*#__PURE__*/React.createElement(TabsContext.Provider, {
       value: refs
     }, /*#__PURE__*/React.createElement(Root, _extends({

package/styled-components/es/components/TextArea/TextArea.styles.js

@@ -27,7 +27,7 @@ export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledTextArea = /*#__PURE__*/styled.textarea.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-5"
-})(["display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(", ");caret-color:var(", ");resize:", ";--plasma_private-textarea-height:", ";--plasma_private-textarea-width:", ";--plasma_private-textarea-computed-height:", ";--plasma_private-textarea-computed-width:", ";height:var(--plasma_private-textarea-computed-height);width:var(--plasma_private-textarea-computed-width);min-width:", ";max-width:", ";min-height:var(", ");padding-right:", ";padding-left:var(", ");padding-top:0;padding-bottom:0;--plasma_private-textarea-helpers-computed-height:calc( var(", ") + var(", ") + var(", ") );--plasma_private-textarea-input-with-helpers-height:calc( var(--plasma_private-textarea-height) - var(--plasma_private-textarea-helpers-computed-height) + var(", ") );--plasma_private-textarea-input-without-helpers-height:calc( var(--plasma_private-textarea-computed-height) - var(", ") );--plasma_private-textarea-input-actual-height:", ";height:var(--plasma_private-textarea-input-actual-height);font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&::placeholder{opacity:0;}&:read-only{cursor:default;}&:focus:not(:disabled){color:var(", ");}&::-webkit-scrollbar{width:var(", ");}&::-webkit-scrollbar-thumb{background-color:var(", ");background-clip:content-box;border:var(", ") solid transparent;border-radius:1rem;}&::-webkit-scrollbar-track{background-color:var(", ");background-clip:content-box;border:var(", ") solid transparent;border-radius:1rem;}"], tokens.inputColor, tokens.inputCaretColor, function (_ref4) {
+})(["display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(", ");caret-color:var(", ");resize:", ";--plasma_private-textarea-height:", ";--plasma_private-textarea-width:", ";--plasma_private-textarea-computed-height:", ";--plasma_private-textarea-computed-width:", ";height:var(--plasma_private-textarea-computed-height);width:var(--plasma_private-textarea-computed-width);min-width:", ";max-width:", ";min-height:var(", ");padding-right:", ";padding-left:var(", ");padding-top:0;padding-bottom:0;--plasma_private-textarea-helpers-computed-height:calc( var(", ") + var(", ") + var(", ") );--plasma_private-textarea-input-with-helpers-height:calc( var(--plasma_private-textarea-height) - var(--plasma_private-textarea-helpers-computed-height) + var(", ") );--plasma_private-textarea-input-without-helpers-height:calc( var(--plasma_private-textarea-computed-height) - var(", ") );--plasma_private-textarea-input-actual-height:", ";height:var(--plasma_private-textarea-input-actual-height);font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&::placeholder{opacity:0;}&:read-only{cursor:default;}&:focus:not(:disabled){color:var(", ");}"], tokens.inputColor, tokens.inputCaretColor, function (_ref4) {
   var resize = _ref4.resize;
   return resize || 'none';
 }, function (_ref5) {
@@ -55,7 +55,7 @@ export var StyledTextArea = /*#__PURE__*/styled.textarea.withConfig({
   var hasHelper = _ref12.hasHelper,
     rows = _ref12.rows;
   return hasHelper && !rows ? 'var(--plasma_private-textarea-input-with-helpers-height)' : 'var(--plasma_private-textarea-input-without-helpers-height)';
-}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight, tokens.inputColorFocus, tokens.scrollbarWidth, tokens.scrollbarThumbBackgroundColor, tokens.scrollbarBorderWidth, tokens.scrollbarTrackBackgroundColor, tokens.scrollbarBorderWidth);
+}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight, tokens.inputColorFocus);
 export var StyledHelpers = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-6"
 })(["box-sizing:border-box;display:flex;justify-content:space-between;transition:background-color 0.1s ease-in-out;background-color:var(", ");padding-top:var(", ");padding-right:var(", ");padding-bottom:var(", ");padding-left:var(", ");border-bottom-left-radius:var(", ");border-bottom-right-radius:var(", ");"], tokens.helpersBackgroundColor, tokens.helpersPaddingTop, tokens.helpersPaddingRight, tokens.helpersPaddingBottom, tokens.helpersPaddingLeft, tokens.borderRadius, tokens.borderRadius);

package/styled-components/es/components/TextArea/TextArea.tokens.js

@@ -185,14 +185,6 @@ export var tokens = {
   indicatorLabelPlacementOuterRight: '--plasma-textarea-indicator-placement-outer-right',
   clearIndicatorLabelPlacementInner: '--plasma-textarea__clear-indicator-placement-inner',
   clearIndicatorLabelPlacementInnerRight: '--plasma-textarea__clear-indicator-placement-inner-right',
-  scrollbarWidth: '--plasma-textarea-scrollbar-width',
-  scrollbarBorderWidth: '--plasma-textarea-scrollbar-border-width',
-  scrollbarThumbBackgroundColor: '--plasma-textarea-scrollbar-thumb-background-color',
-  scrollbarThumbBackgroundColorHover: '--plasma-textarea-scrollbar-thumb-background-color-hover',
-  scrollbarThumbBackgroundColorActive: '--plasma-textarea-scrollbar-thumb-background-color-active',
-  scrollbarTrackBackgroundColor: '--plasma-textarea-scrollbar-track-background-color',
-  scrollbarTrackBackgroundColorHover: '--plasma-textarea-scrollbar-track-background-color-hover',
-  scrollbarTrackBackgroundColorActive: '--plasma-textarea-scrollbar-track-background-color-active',
   dividerColor: '--plasma-textfield-divider-color',
   dividerColorHover: '--plasma-textfield-divider-color-hover',
   dividerColorFocus: '--plasma-textfield-divider-color-focus',

package/styled-components/es/components/_Icon/Icon.assets/DisclosureDown.js

@@ -0,0 +1,14 @@
+var _path;
+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); }
+import React from 'react';
+export var DisclosureDown = function DisclosureDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.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/es/components/_Icon/Icon.assets/DisclosureLeft.js

@@ -7,9 +7,8 @@ export var DisclosureLeft = function DisclosureLeft(props) {
     viewBox: "0 0 24 24",
     fill: "none"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M14.5309 6.96967C14.8238 7.26256 14.8238 7.73744 14.5309 8.03033L10.5613 12L14.5309 15.9697C14.8238 16.2626 14.8238 16.7374 14.5309 17.0303C14.238 17.3232 13.7632 17.3232 13.4703 17.0303L8.43994 12L13.4703 6.96967C13.7632 6.67678 14.238 6.67678 14.5309 6.96967Z",
-    fill: "currentColor"
+    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/es/components/_Icon/Icon.assets/DisclosureLeftCentered.js

@@ -0,0 +1,15 @@
+var _path;
+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); }
+import React from 'react';
+export var DisclosureLeftCentered = function DisclosureLeftCentered(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.5309 6.96967C14.8238 7.26256 14.8238 7.73744 14.5309 8.03033L10.5613 12L14.5309 15.9697C14.8238 16.2626 14.8238 16.7374 14.5309 17.0303C14.238 17.3232 13.7632 17.3232 13.4703 17.0303L8.43994 12L13.4703 6.96967C13.7632 6.67678 14.238 6.67678 14.5309 6.96967Z",
+    fill: "currentColor"
+  })));
+};

package/styled-components/es/components/_Icon/Icon.assets/DisclosureRight.js

@@ -7,9 +7,8 @@ export var DisclosureRight = function DisclosureRight(props) {
     viewBox: "0 0 24 24",
     fill: "none"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M9.46967 6.96967C9.17678 7.26256 9.17678 7.73744 9.46967 8.03033L13.4393 12L9.46967 15.9697C9.17678 16.2626 9.17678 16.7374 9.46967 17.0303C9.76256 17.3232 10.2374 17.3232 10.5303 17.0303L15.5607 12L10.5303 6.96967C10.2374 6.67678 9.76256 6.67678 9.46967 6.96967Z",
-    fill: "currentColor"
+    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/es/components/_Icon/Icon.assets/DisclosureUp.js

@@ -0,0 +1,14 @@
+var _path;
+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); }
+import React from 'react';
+export var DisclosureUp = function DisclosureUp(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.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/es/components/_Icon/Icons/IconDisclosureDown.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DisclosureDown } from '../Icon.assets/DisclosureDown';
+import { IconRoot } from '../IconRoot';
+export var IconDisclosureDown = function IconDisclosureDown(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: DisclosureDown
+  });
+};

package/styled-components/es/components/_Icon/Icons/IconDisclosureLeftCentered.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IconRoot } from '../IconRoot';
+import { DisclosureLeftCentered } from '../Icon.assets/DisclosureLeftCentered';
+export var IconDisclosureLeftCentered = function IconDisclosureLeftCentered(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: DisclosureLeftCentered
+  });
+};

package/styled-components/es/components/_Icon/Icons/IconDisclosureUp.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DisclosureUp } from '../Icon.assets/DisclosureUp';
+import { IconRoot } from '../IconRoot';
+export var IconDisclosureUp = function IconDisclosureUp(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: DisclosureUp
+  });
+};

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

@@ -1,6 +1,8 @@
 export { IconDisclosureLeft } from './Icons/IconDisclosureLeft';
 export { IconDisclosureRight } from './Icons/IconDisclosureRight';
 export { IconDisclosureDownFill } from './Icons/IconDisclosureDownFill';
+export { IconDisclosureDown } from './Icons/IconDisclosureDown';
+export { IconDisclosureUp } from './Icons/IconDisclosureUp';
 export { IconMic } from './Icons/IconMic';
 export { IconChevronLeft } from './Icons/IconChevronLeft';
 export { IconChevronDoubleLeft } from './Icons/IconChevronDoubleLeft';
@@ -9,6 +11,7 @@ export { IconChevronDownFill } from './Icons/IconChevronDownFill';
 export { IconClose } from './Icons/IconClose';
 export { IconCross } from './Icons/IconCross';
 export { IconDone } from './Icons/IconDone';
+export { IconDisclosureLeftCentered } from './Icons/IconDisclosureLeftCentered';
 export { IconDisclosureRightCentered } from './Icons/IconDisclosureRightCentered';
 export { IconDisclosureDownCentered } from './Icons/IconDisclosureDownCentered';
 export { IconMinus } from './Icons/IconMinus';

package/styled-components/es/examples/plasma_b2c/components/Editable/Editable.stories.tsx

@@ -3,7 +3,7 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
-import { IconDisclosureLeft } from '../../../../components/_Icon';
+import { IconDisclosureLeftCentered } from '../../../../components/_Icon';
 import { WithTheme } from '../../../_helpers';
 
 import { Editable, typographyVariants } from './Editable';
@@ -50,7 +50,7 @@ const StoryDefault = ({ defaultValue, componentName, iconSize, ...rest }: StoryP
     return (
         <Editable
             {...rest}
-            icon={<IconDisclosureLeft size={iconSize} color="inherit" />}
+            icon={<IconDisclosureLeftCentered size={iconSize} color="inherit" />}
             textComponent={typographyVariants[componentName]}
             value={defaultValue}
             onChange={handleChange}

package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx

@@ -12,7 +12,7 @@ import {
 import { WithTheme } from '../../../_helpers';
 import { PopupProvider } from '../Popup/Popup';
 import { NotificationProps } from '../../../../components/Notification';
-import { IconDisclosureRight } from '../../../../components/_Icon';
+import { IconDisclosureRightCentered } from '../../../../components/_Icon';
 
 import { Notification, NotificationsProvider } from './Notification';
 
@@ -55,7 +55,7 @@ const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIc
     return (
         <Notification
             title={title}
-            icon={showLeftIcon ? <IconDisclosureRight /> : ''}
+            icon={showLeftIcon ? <IconDisclosureRightCentered /> : ''}
             iconPlacement={iconPlacement}
             actions={
                 <Button
@@ -116,7 +116,10 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
 const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
     const count = useRef(0);
     const handleClick = useCallback(() => {
-        addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
+        addNotification(
+            { icon: <IconDisclosureRightCentered />, ...rest, ...getNotificationProps(count.current) },
+            timeout,
+        );
         count.current++;
     }, [count, rest]);
 

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

@@ -1,23 +1,55 @@
 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';
+};
+
+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 +57,19 @@ const meta: Meta<StorySegmentProps> = {
     component: SegmentGroup,
     argTypes: {
         ...argTypesFromConfig(mergeConfig(segmentGroupConfig, config)),
+        ...disableProps(['filledBackground', 'view', 'selectionMode']),
+        stretch: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'orientation', eq: 'horizontal' },
+        },
+        orientation: {
+            options: ['horizontal', 'vertical'],
+            control: {
+                type: 'select',
+            },
+        },
         selectionMode: {
             options: ['single', 'multiple'],
             control: {
@@ -37,60 +82,91 @@ 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 {
+        disabled,
+        itemQuantity,
+        size,
+        stretch,
+        orientation,
+
+        segmentItemView,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        ...args
+    } = props;
+    const items = Array(itemQuantity).fill(0);
 
     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} size={size} orientation={orientation} {...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,
+        orientation: 'horizontal',
+        contentRight: 'none',
+        contentLeft: 'none',
+    },
+    argTypes: {
+        stretch: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'orientation', eq: 'horizontal' },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['filledBackground', 'view', 'selectionMode', 'vertical']),
+    },
+    render: (args: StorySegmentProps) => {
+        return <StoryDefault {...args} />;
     },
-    render: (args) => <StoryDefault {...args} />,
 };