@salutejs/plasma-new-hope 0.147.1-dev.0 → 0.148.0-canary.1392.10919911798.0

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,57 @@
-import React from 'react';
+import React, { useState } 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 { Dropdown } from '../Dropdown/Dropdown';
+import { Counter } from '../Counter/Counter';
+import { IconMic } from '../../../../components/_Icon';
 
 import { config } from './SegmentGroup.config';
 import { SegmentItem, SegmentGroup } from './Segment';
 
+const contentLeftOptions = ['none', 'icon'];
+const contentRightOptions = ['none', 'text', 'counter', 'icon'];
+
 const segmentItemViews = ['clear', 'default', 'secondary'];
+type Size = typeof sizes[number];
+
+type CustomStoryProps = {
+    itemQuantity: number;
+    contentLeft: string;
+    contentRight: string;
+    segmentItemView?: 'clear' | 'default' | 'secondary';
+    clip: 'scroll' | 'showAll';
+};
+
+type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStoryProps;
 
-type CustomStorySegmentProps = {
-    segmentItemView?: string;
-    contentItemsNumber?: number;
+const clips = ['none', 'scroll', 'showAll'];
+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';
+
+    switch (contentRightOption) {
+        case 'icon':
+            return <IconMic size={iconSize} color="inherit" />;
+        case 'counter':
+            return <Counter size="s" count={1} view="positive" />;
+        case 'text':
+            return <div>Text</div>;
+        default:
+            return undefined;
+    }
+};
 
 const meta: Meta<StorySegmentProps> = {
     title: 'plasma_b2c/Segment',
@@ -25,6 +59,26 @@ const meta: Meta<StorySegmentProps> = {
     component: SegmentGroup,
     argTypes: {
         ...argTypesFromConfig(mergeConfig(segmentGroupConfig, config)),
+        ...disableProps(['filledBackground', 'view', 'selectionMode']),
+        clip: {
+            options: clips,
+            control: {
+                type: 'select',
+            },
+            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 +91,234 @@ 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);
 
     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) => (
+        <SegmentProvider>
+            <SegmentGroup
+                stretch={stretch}
+                disabled={disabled}
+                clip={clip}
+                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, args.size as Size)}
+                        contentRight={getContentRight(contentRightOption, args.size as Size)}
+                        {...args}
+                    >
+                        {`Label${i + 1}`}
+                    </SegmentItem>
+                ))}
+            </SegmentGroup>
+        </SegmentProvider>
+    );
+};
+
+const StoryScroll = (props: StorySegmentProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        size,
+        stretch,
+        orientation,
+
+        segmentItemView,
+        clip,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        ...args
+    } = props;
+    const items = Array(itemQuantity).fill(0);
+
+    const isVertical = orientation === 'vertical';
+
+    return (
+        <SegmentProvider>
+            <SegmentGroup
+                stretch={stretch}
+                disabled={disabled}
+                size={size}
+                clip={clip}
+                orientation={orientation}
+                style={{ width: isVertical ? 'auto' : '15rem', height: isVertical ? '10rem' : 'auto' }}
+                {...args}
+            >
+                {items.map((_, i) => (
+                    <SegmentItem
+                        view={segmentItemView}
+                        label={`Label ${i}`}
+                        value={`label_${i}`}
+                        size={size}
+                        key={`label_${i}`}
+                        contentLeft={getContentLeft(contentLeftOption, args.size as Size)}
+                        contentRight={getContentRight(contentRightOption, args.size as Size)}
+                        {...args}
+                    />
+                ))}
+            </SegmentGroup>
+        </SegmentProvider>
+    );
+};
+
+const StoryShowAll = (props: StorySegmentProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        size,
+        clip,
+        stretch,
+        orientation,
+
+        segmentItemView,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        ...args
+    } = props;
+    const maxItemQuantity = 3;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    const visibleItems = items.slice(0, maxItemQuantity);
+    const otherItems = items.slice(maxItemQuantity);
+
+    const dropdownItems = otherItems.map((_, i) => {
+        const itemIndex = maxItemQuantity + i;
+
+        return {
+            label: `Label${itemIndex + 1}`,
+            value: itemIndex,
+        };
+    });
+
+    return (
+        <SegmentProvider>
+            <SegmentGroup
+                size={size}
+                clip={clip}
+                stretch={stretch}
+                disabled={disabled}
+                orientation={orientation}
+                {...args}
+            >
+                {visibleItems.map((_, i) => (
+                    <SegmentItem
+                        view={segmentItemView}
+                        label={`Label ${i}`}
+                        value={`label_${i}`}
+                        key={`label_${i}`}
+                        size={size}
+                        contentLeft={getContentLeft(contentLeftOption, args.size as Size)}
+                        contentRight={getContentRight(contentRightOption, args.size as Size)}
+                        {...args}
+                    />
+                ))}
+                {dropdownItems.length > 0 && (
+                    <Dropdown
+                        size={size as typeof sizes[number]}
+                        items={dropdownItems}
+                        onItemSelect={(item) => setIndex(item.value as number)}
+                    >
                         <SegmentItem
                             view={segmentItemView}
-                            label={`Label ${i}`}
-                            value={`label_${i}`}
-                            key={`label_${i}`}
+                            size={size}
+                            label="show all"
+                            value="ShowAll"
+                            key="ShowAll"
+                            skipSelection
                             {...args}
                         />
-                    ))}
-                </SegmentGroup>
-            </SegmentProvider>
-        </>
+                    </Dropdown>
+                )}
+            </SegmentGroup>
+        </SegmentProvider>
     );
 };
 
 export const Default: StoryObj<StorySegmentProps> = {
     args: {
-        view: 'clear',
+        itemQuantity: 8,
         size: 'xs',
         segmentItemView: 'clear',
         selectionMode: 'single',
-        contentItemsNumber: 11,
         pilled: false,
         filledBackground: false,
+        hasBackground: false,
         disabled: false,
         stretch: false,
+        clip: 'none',
+        orientation: 'horizontal',
+        contentRight: 'none',
+        contentLeft: 'none',
+    },
+    argTypes: {
+        clip: {
+            options: clips,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'stretch', truthy: false },
+        },
+        stretch: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'orientation', eq: 'horizontal' },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['filledBackground', 'view', 'selectionMode', 'vertical']),
+    },
+    render: (args: StorySegmentProps) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryScroll {...args} />;
+            case 'showAll':
+                return <StoryShowAll {...args} />;
+            default:
+                return <StoryDefault {...args} />;
+        }
     },
-    render: (args) => <StoryDefault {...args} />,
 };

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

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

package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentItem.config.js

@@ -7,21 +7,21 @@ export var config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.outlineFocusColor),
-      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.outlineFocusColor),
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.outlineFocusColor)
+      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor),
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor)
     },
     size: {
-      xs: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0 0.625rem;", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
-      s: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2rem;", ":0 0.75rem;", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
-      m: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0 0.875rem;", ":0.125rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
-      l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":3rem;", ":0 1rem;", ":0.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight)
+      xs: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2rem;", ":0.5rem 0.75rem;", ":0.5rem 0.5rem;", ":0.0625rem 0.125rem;", ":0.125rem;", ":0;", ":var(--plasma-typo-body-xs-bold-font-family);", ":var(--plasma-typo-body-xs-bold-font-size);", ":var(--plasma-typo-body-xs-bold-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-bold-letter-spacing);", ":var(--plasma-typo-body-xs-bold-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemPilledPadding, segmentTokens.itemContentPadding, segmentTokens.itemIconMargin, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
+      s: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.5rem 1rem;", ":0.5rem 0.5rem;", ":0.1875rem 0.125rem;", ":0.125rem;", ":0rem;", ":var(--plasma-typo-body-s-bold-font-family);", ":var(--plasma-typo-body-s-bold-font-size);", ":var(--plasma-typo-body-s-bold-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-bold-letter-spacing);", ":var(--plasma-typo-body-s-bold-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemPilledPadding, segmentTokens.itemContentPadding, segmentTokens.itemIconMargin, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
+      m: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":3rem;", ":0.75rem 1.25rem;", ":0.75rem 0.75rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":var(--plasma-typo-body-m-bold-font-family);", ":var(--plasma-typo-body-m-bold-font-size);", ":var(--plasma-typo-body-m-bold-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-bold-letter-spacing);", ":var(--plasma-typo-body-m-bold-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemPilledPadding, segmentTokens.itemContentPadding, segmentTokens.itemIconMargin, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
+      l: /*#__PURE__*/css(["", ":0.875rem;", ":auto;", ":3.5rem;", ":1rem 1.5rem;", ":1rem 1rem;", ":0.0625rem 0.125rem;", ":0.375rem;", ":0;", ":var(--plasma-typo-body-l-bold-font-family);", ":var(--plasma-typo-body-l-bold-font-size);", ":var(--plasma-typo-body-l-bold-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-bold-letter-spacing);", ":var(--plasma-typo-body-l-bold-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemPilledPadding, segmentTokens.itemContentPadding, segmentTokens.itemIconMargin, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], segmentTokens.disabledOpacity)
     },
     pilled: {
-      "true": /*#__PURE__*/css(["", ":1.5rem;"], segmentTokens.itemPilledBorderRadius)
+      "true": /*#__PURE__*/css(["", ":1.75rem;"], segmentTokens.itemPilledBorderRadius)
     }
   }
 };

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

@@ -5,7 +5,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { WithTheme } from '../../../_helpers';
 import { Button } from '../Button/Button';
 import { PopoverPlacement } from '../Popover/Popover';
-import { IconDisclosureRight } from '../../../../components/_Icon';
+import { IconDisclosureRightCentered } from '../../../../components/_Icon';
 
 import { Tooltip } from './Tooltip';
 import type { TooltipProps } from './Tooltip';
@@ -166,7 +166,7 @@ const StoryLive = (args: TooltipProps) => {
                             aria-describedby="example-tooltip-firstname"
                         />
                     }
-                    contentLeft={<IconDisclosureRight size="xs" />}
+                    contentLeft={<IconDisclosureRightCentered size="xs" />}
                     {...args}
                     id="example-tooltip-firstname"
                     text={text}

package/styled-components/es/examples/plasma_web/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}