@salutejs/plasma-new-hope 0.154.0-canary.1392.11041436795.0 → 0.154.0-canary.1428.11047556363.0

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 { IconDisclosureLeftCentered, IconDisclosureRightCentered } from '../../../_Icon';
+import { IconDisclosureLeft, IconDisclosureRight } 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(IconDisclosureLeftCentered, {
+      }, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
         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(IconDisclosureRightCentered, {
+      }, /*#__PURE__*/React.createElement(IconDisclosureRight, {
         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]);
+    }, [firstItemVisible, scrollRef, leftArrowRef]);
     return /*#__PURE__*/React.createElement(TabsContext.Provider, {
       value: refs
     }, /*#__PURE__*/React.createElement(Root, _extends({

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

@@ -7,8 +7,9 @@ export var DisclosureLeft = function DisclosureLeft(props) {
     viewBox: "0 0 24 24",
     fill: "none"
   }, props), _path || (_path = /*#__PURE__*/React.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"
+    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,8 +7,9 @@ export var DisclosureRight = function DisclosureRight(props) {
     viewBox: "0 0 24 24",
     fill: "none"
   }, props), _path || (_path = /*#__PURE__*/React.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"
+    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"
   })));
 };

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

@@ -1,8 +1,6 @@
 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';
@@ -11,7 +9,6 @@ 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/Calendar/Calendar.stories.tsx

@@ -32,6 +32,12 @@ const meta: Meta<typeof CalendarBase> = {
                 type: 'inline-radio',
             },
         },
+        locale: {
+            options: ['ru', 'en'],
+            control: {
+                type: 'select',
+            },
+        },
     },
 };
 
@@ -75,7 +81,7 @@ const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumb
 };
 
 const StoryDefault = (args: CalendarProps) => {
-    const { isRange, isDouble, min, max, date, includeEdgeDates, size } = args;
+    const { isRange, isDouble, min, max, date, includeEdgeDates, size, locale } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
 
@@ -97,6 +103,7 @@ const StoryDefault = (args: CalendarProps) => {
             min={min}
             max={max}
             includeEdgeDates={includeEdgeDates}
+            locale={locale}
             onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
         />
     );
@@ -110,12 +117,13 @@ export const Default: StoryObj<CalendarProps> = {
         isRange: false,
         includeEdgeDates: false,
         size: 'm',
+        locale: 'ru',
     },
     render: (args) => <StoryDefault {...args} />,
 };
 
 const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
-    const { min, max, includeEdgeDates, size, displayDouble } = args;
+    const { min, max, includeEdgeDates, size, displayDouble, locale } = args;
     const [value, setValue] = useState(new Date(2023, 6, 7));
     const [currentState, setCurrentState] = useState('Days');
 
@@ -142,6 +150,7 @@ const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
                 max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
+                locale={locale}
                 onChangeValue={handleOnChange}
                 {...rest}
             />
@@ -153,6 +162,7 @@ const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
                 max={max}
                 includeEdgeDates={includeEdgeDates}
                 type={type}
+                locale={locale}
                 onChangeValue={handleOnChange}
                 {...rest}
             />
@@ -194,12 +204,13 @@ export const Base: StoryObj<CalendarBaseProps & { displayDouble: boolean }> = {
         max: defaultMaxDate,
         includeEdgeDates: false,
         displayDouble: false,
+        locale: 'ru',
     },
     render: (args) => <StoryBase {...args} />,
 };
 
 const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) => {
-    const { min, max, includeEdgeDates, size, displayDouble } = args;
+    const { min, max, includeEdgeDates, size, displayDouble, locale } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 6, 1), new Date(2023, 6, 16)]);
     const [currentState, setCurrentState] = useState('Days');
 
@@ -227,6 +238,7 @@ const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) =
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 onChangeValue={handleOnChange}
+                locale={locale}
                 {...rest}
             />
         ) : (
@@ -238,6 +250,7 @@ const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) =
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 onChangeValue={handleOnChange}
+                locale={locale}
                 {...rest}
             />
         );
@@ -278,6 +291,7 @@ export const Range: StoryObj<CalendarBaseRangeProps & { displayDouble: boolean }
         max: defaultMaxDate,
         includeEdgeDates: false,
         displayDouble: false,
+        locale: 'ru',
     },
     render: (args) => <StoryRange {...args} />,
 };

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

@@ -176,6 +176,7 @@ const StoryRange = ({
     secondValueError,
     secondValueSuccess,
     size,
+    lang,
     ...rest
 }: StoryPropsRange) => {
     const rangeRef = useRef<RangeInputRefs>(null);
@@ -234,6 +235,7 @@ const StoryRange = ({
             onCommitSecondDate={(currentValue) => {
                 firstDate && currentValue && setIsOpen(false);
             }}
+            lang={lang}
             {...dividerIconProps}
             {...rest}
         />

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 { IconDisclosureLeftCentered } from '../../../../components/_Icon';
+import { IconDisclosureLeft } 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={<IconDisclosureLeftCentered size={iconSize} color="inherit" />}
+            icon={<IconDisclosureLeft 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 { IconDisclosureRightCentered } from '../../../../components/_Icon';
+import { IconDisclosureRight } 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 ? <IconDisclosureRightCentered /> : ''}
+            icon={showLeftIcon ? <IconDisclosureRight /> : ''}
             iconPlacement={iconPlacement}
             actions={
                 <Button
@@ -116,10 +116,7 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
 const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
     const count = useRef(0);
     const handleClick = useCallback(() => {
-        addNotification(
-            { icon: <IconDisclosureRightCentered />, ...rest, ...getNotificationProps(count.current) },
-            timeout,
-        );
+        addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
         count.current++;
     }, [count, rest]);
 

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

@@ -1,55 +1,23 @@
 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 contentLeftOptions = ['none', 'icon'];
-const contentRightOptions = ['none', 'text', 'counter', 'icon'];
+const segmentItemViews = ['clear', 'default', 'secondary'];
 
-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 CustomStorySegmentProps = {
+    segmentItemView?: string;
+    contentItemsNumber?: number;
 };
 
-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 <div style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}>Text</div>;
-        default:
-            return undefined;
-    }
-};
+type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStorySegmentProps;
 
 const meta: Meta<StorySegmentProps> = {
     title: 'plasma_b2c/Segment',
@@ -57,19 +25,6 @@ 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: {
@@ -82,91 +37,60 @@ const meta: Meta<StorySegmentProps> = {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
-            },
-        },
     },
 };
 
 export default meta;
 
-const StoryDefault = (props: StorySegmentProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        size,
-        stretch,
-        orientation,
-
-        segmentItemView,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        ...args
-    } = props;
-    const items = Array(itemQuantity).fill(0);
+const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view, ...args }: StorySegmentProps) => {
+    const contentItems = Array(contentItemsNumber).fill(0);
 
     return (
-        <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>
+        <>
+            <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>
+        </>
     );
 };
 
 export const Default: StoryObj<StorySegmentProps> = {
     args: {
-        itemQuantity: 8,
+        view: 'clear',
         size: 'xs',
-        segmentItemView: 'default',
+        segmentItemView: 'clear',
         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} />,
 };

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

@@ -7,29 +7,26 @@ export var config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/css(["", ":tranparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor),
-      filled: /*#__PURE__*/css(["", ":transparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor)
+      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":tranparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor),
+      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor)
     },
     size: {
-      xs: /*#__PURE__*/css(["", ":0.625rem;", ":1.125rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      s: /*#__PURE__*/css(["", ":0.75rem;", ":1.375rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      m: /*#__PURE__*/css(["", ":0.875rem;", ":1.625rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      l: /*#__PURE__*/css(["", ":1rem;", ":1.875rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight)
+      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)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], segmentTokens.disabledOpacity)
     },
     pilled: {
-      "true": /*#__PURE__*/css([""])
+      "true": /*#__PURE__*/css(["", ":1.75rem;"], segmentTokens.groupPilledBorderRadius)
     },
     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-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)
+      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)
     },
     size: {
-      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)
+      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)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], segmentTokens.disabledOpacity)
     },
     pilled: {
-      "true": /*#__PURE__*/css(["", ":1.75rem;"], segmentTokens.itemPilledBorderRadius)
+      "true": /*#__PURE__*/css(["", ":1.5rem;"], 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 { IconDisclosureRightCentered } from '../../../../components/_Icon';
+import { IconDisclosureRight } 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={<IconDisclosureRightCentered size="xs" />}
+                    contentLeft={<IconDisclosureRight size="xs" />}
                     {...args}
                     id="example-tooltip-firstname"
                     text={text}