@salutejs/plasma-new-hope 0.178.0-canary.1506.11573062130.0 → 0.178.0-canary.1513.11580788581.0

package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx

@@ -12,6 +12,7 @@ import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
 const clips = ['none', 'scroll', 'showAll'];
+const headerClips = ['none', 'scroll'];
 const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
@@ -20,7 +21,6 @@ type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
     itemQuantity: number;
-    hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
     stretch: boolean;
@@ -30,12 +30,12 @@ type CustomStoryTabsProps = {
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
 
-const getContentLeft = (contentLeftOption: string, size: Size) => {
+const getContentLeft = (contentLeftOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
 };
 
-const getContentRight = (contentRightOption: string, size: Size) => {
+const getContentRight = (contentRightOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
@@ -96,7 +96,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -152,7 +152,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -220,7 +220,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     });
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -603,31 +603,47 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderTabs = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-    } = props;
+const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="clear"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    value={helperText}
+                    size={size as HeaderSize}
+                >
+                    {`Label${i + 1}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText, width } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
-                    view="divider"
+                    view="clear"
                     selected={i === index}
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
+                    value={helperText}
                     size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
@@ -637,37 +653,60 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<StoryTabsProps> = {
+export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
-        hasDivider: true,
-        itemQuantity: 4,
+        helperText: '',
+        itemQuantity: 6,
+        width: '12rem',
     },
     argTypes: {
-        size: {
-            options: headerSizes,
+        clip: {
+            options: headerClips,
             control: {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
+        width: {
             control: {
-                type: 'select',
+                type: 'text',
+            },
+            if: { arg: 'clip', eq: 'scroll' },
+        },
+        stretch: {
+            table: {
+                disable: true,
+            },
+        },
+        contentLeft: {
+            table: {
+                disable: true,
             },
         },
         contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
+            table: {
+                disable: true,
             },
         },
-        clip: {
+        hasDivider: {
             table: {
                 disable: true,
             },
         },
+        size: {
+            options: headerSizes,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryHeaderScroll {...args} />;
+            default:
+                return <StoryHeaderDefault {...args} />;
+        }
     },
-    render: (args) => <StoryHeaderTabs {...args} />,
 };

package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js

@@ -26,8 +26,8 @@ var config = exports.config = {
       h5: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":3rem;", ":0rem;", ":1.75rem;", ":0.625rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
       h4: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":3.25rem;", ":0rem;", ":2rem;", ":0.625rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
       h3: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":3.875rem;", ":0rem;", ":2.25rem;", ":0.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
-      h2: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":4.5rem;", ":0rem;", ":2.5rem;", ":1rem;", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
-      h1: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":5.75rem;", ":0rem;", ":3.5rem;", ":0.5rem;", ":var(--plasma-typo-h1-font-family);", ":var(--plasma-typo-h1-font-size);", ":var(--plasma-typo-h1-font-style);", ":var(--plasma-typo-h1-font-weight);", ":var(--plasma-typo-h1-letter-spacing);", ":var(--plasma-typo-h1-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight)
+      h2: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":4.5rem;", ":0rem;", ":2.5rem;", ":0.875rem;", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
+      h1: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":5.75rem;", ":0rem;", ":3.5rem;", ":1rem;", ":var(--plasma-typo-h1-font-family);", ":var(--plasma-typo-h1-font-size);", ":var(--plasma-typo-h1-font-style);", ":var(--plasma-typo-h1-font-weight);", ":var(--plasma-typo-h1-letter-spacing);", ":var(--plasma-typo-h1-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Tabs.tabsTokens.disabledOpacity)

package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js

@@ -13,9 +13,9 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius),
-      filled: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius),
-      divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius)
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(---text-secondary-active);", ":transparent;", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.arrowColorHover, _Tabs.tabsTokens.arrowColorActive, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius),
+      filled: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(---text-secondary-active);", ":var(--surface-transparent-primary);", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.arrowColorHover, _Tabs.tabsTokens.arrowColorActive, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius),
+      divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(---text-secondary-active);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.arrowColorHover, _Tabs.tabsTokens.arrowColorActive, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius)
     },
     size: {
       xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":fit-content;", ":auto;", ":0rem;", ":0.125rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),

package/styled-components/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabs.config.js

@@ -13,7 +13,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerWidth, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius)
+      divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(---text-secondary-active);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.arrowColorHover, _Tabs.tabsTokens.arrowColorActive, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerWidth, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius)
     },
     size: {
       xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":fit-content;", ":auto;", ":0rem;", ":0.125rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),

package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx

@@ -37,6 +37,7 @@ const placements: Array<PopoverPlacement> = [
 ];
 
 type StoryTextAreaPropsCustom = {
+    hasHint?: boolean;
     enableContentRight?: boolean;
 };
 
@@ -92,43 +93,44 @@ const meta: Meta<StoryTextAreaProps> = {
         },
         hintText: {
             control: { type: 'text' },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintView: {
             options: hintViews,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hintText', neq: '' },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintSize: {
             options: hintSizes,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hintText', neq: '' },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintTrigger: {
             options: hintTriggers,
             control: {
                 type: 'inline-radio',
             },
-            if: { arg: 'hintText', neq: '' },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintPlacement: {
             options: placements,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hintText', neq: '' },
+            if: { arg: 'hasHint', truthy: true },
             mappers: placements,
         },
         hintHasArrow: {
             control: { type: 'boolean' },
-            if: { arg: 'hintText', neq: '' },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintWidth: {
             control: { type: 'text' },
-            if: { arg: 'hintText', neq: '' },
+            if: { arg: 'hasHint', truthy: true },
         },
     },
     args: {
@@ -152,6 +154,7 @@ const meta: Meta<StoryTextAreaProps> = {
         requiredPlacement: 'right',
         clear: false,
         hasDivider: false,
+        hasHint: true,
         hintText: 'Текст подсказки',
         hintTrigger: 'hover',
         hintView: 'default',

package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx

@@ -95,43 +95,44 @@ const meta: Meta<typeof TextField> = {
         },
         hintText: {
             control: { type: 'text' },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintView: {
             options: hintViews,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hintText', neq: '' },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintSize: {
             options: hintSizes,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hintText', neq: '' },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintTrigger: {
             options: hintTriggers,
             control: {
                 type: 'inline-radio',
             },
-            if: { arg: 'hintText', neq: '' },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintPlacement: {
             options: placements,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hintText', neq: '' },
+            if: { arg: 'hasHint', truthy: true },
             mappers: placements,
         },
         hintHasArrow: {
             control: { type: 'boolean' },
-            if: { arg: 'hintText', neq: '' },
+            if: { arg: 'hasHint', truthy: true },
         },
         hintWidth: {
             control: { type: 'text' },
-            if: { arg: 'hintText', neq: '' },
+            if: { arg: 'hasHint', truthy: true },
         },
     },
 };
@@ -158,6 +159,7 @@ type StoryPropsDefault = Omit<
     | 'chips'
     | 'onChangeChips'
 > & {
+    hasHint: boolean;
     enableContentLeft: boolean;
     enableContentRight: boolean;
 };
@@ -222,6 +224,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         optional: false,
         required: false,
         requiredPlacement: 'right',
+        hasHint: true,
         hintText: 'Текст подсказки',
         hintTrigger: 'hover',
         hintView: 'default',
@@ -251,6 +254,7 @@ type StoryPropsChips = Omit<
     | 'minLength'
     | 'enumerationType'
 > & {
+    hasHint: boolean;
     enableContentLeft: boolean;
     enableContentRight: boolean;
 };

package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.config.js

@@ -18,7 +18,7 @@ var config = exports.config = {
       light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
     },
     size: {
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":1rem;", ":1.5rem;", ":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);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.closeIconButtonSize, _Toast.toastTokens.closeIconSize, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":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);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
     },
     pilled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], _Toast.toastTokens.pilledBorderRadius, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)

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

@@ -62,7 +62,6 @@ export var tokens = {
   textFieldDisabledOpacity: '--plasma-autocomplete-textfield-disabled-opacity',
   textFieldFocusColor: '--plasma-autocomplete-textfield-focus-color',
   textFieldContentSlotColor: '--plasma-autocomplete-content-color',
-  textFieldContentSlotRightColor: '--plasma-autocomplete-content-right-color',
   // Токены для дропдауна
   background: '--plasma-autocomplete-background',
   boxShadow: '--plasma-autocomplete-box-shadow',

package/styled-components/es/components/Autocomplete/ui/TextField/TextField.styles.js

@@ -6,4 +6,4 @@ var mergedConfig = /*#__PURE__*/mergeConfig(textFieldConfig);
 var TextField = /*#__PURE__*/component(mergedConfig);
 export var StyledTextField = /*#__PURE__*/styled(TextField).withConfig({
   componentId: "plasma-new-hope__sc-1rp2ggs-0"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], textFieldTokens.color, autocompleteTokens.textFieldColor, textFieldTokens.placeholderColorFocus, autocompleteTokens.textFieldPlaceholderColorFocus, textFieldTokens.backgroundColor, autocompleteTokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, autocompleteTokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, autocompleteTokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, autocompleteTokens.textFieldBorderColor, textFieldTokens.borderColorHover, autocompleteTokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, autocompleteTokens.textFieldBorderColorFocus, textFieldTokens.colorReadOnly, autocompleteTokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, autocompleteTokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, autocompleteTokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, autocompleteTokens.textFieldPlaceholderColorReadOnly, textFieldTokens.caretColor, autocompleteTokens.textFieldCaretColor, textFieldTokens.placeholderColor, autocompleteTokens.textFieldPlaceholderColor, textFieldTokens.height, autocompleteTokens.textFieldHeight, textFieldTokens.borderWidth, autocompleteTokens.textFieldBorderWidth, textFieldTokens.borderRadius, autocompleteTokens.textFieldBorderRadius, textFieldTokens.padding, autocompleteTokens.textFieldPadding, textFieldTokens.leftContentMargin, autocompleteTokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, autocompleteTokens.textFieldRightContentMargin, textFieldTokens.fontFamily, autocompleteTokens.textFieldFontFamily, textFieldTokens.fontStyle, autocompleteTokens.textFieldFontStyle, textFieldTokens.fontSize, autocompleteTokens.textFieldFontSize, textFieldTokens.fontWeight, autocompleteTokens.textFieldFontWeight, textFieldTokens.letterSpacing, autocompleteTokens.textFieldLetterSpacing, textFieldTokens.lineHeight, autocompleteTokens.textFieldLineHeight, textFieldTokens.labelColor, autocompleteTokens.textFieldLabelColor, textFieldTokens.labelColorReadOnly, autocompleteTokens.textFieldLabelColorReadOnly, textFieldTokens.labelOffset, autocompleteTokens.textFieldLabelOffset, textFieldTokens.labelFontFamily, autocompleteTokens.textFieldLabelFontFamily, textFieldTokens.labelFontStyle, autocompleteTokens.textFieldLabelFontStyle, textFieldTokens.labelFontSize, autocompleteTokens.textFieldLabelFontSize, textFieldTokens.labelFontWeight, autocompleteTokens.textFieldLabelFontWeight, textFieldTokens.labelLetterSpacing, autocompleteTokens.textFieldLabelLetterSpacing, textFieldTokens.labelLineHeight, autocompleteTokens.textFieldLabelLineHeight, textFieldTokens.labelInnerFontFamily, autocompleteTokens.textFieldLabelInnerFontFamily, textFieldTokens.labelInnerFontStyle, autocompleteTokens.textFieldLabelInnerFontStyle, textFieldTokens.labelInnerFontSize, autocompleteTokens.textFieldLabelInnerFontSize, textFieldTokens.labelInnerFontWeight, autocompleteTokens.textFieldLabelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, autocompleteTokens.textFieldLabelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, autocompleteTokens.textFieldLabelInnerLineHeight, textFieldTokens.labelInnerPadding, autocompleteTokens.textFieldLabelInnerPadding, textFieldTokens.contentLabelInnerPadding, autocompleteTokens.textFieldContentLabelInnerPadding, textFieldTokens.leftHelperColor, autocompleteTokens.textFieldLeftHelperColor, textFieldTokens.leftHelperColorReadOnly, autocompleteTokens.textFieldLeftHelperColorReadOnly, textFieldTokens.leftHelperOffset, autocompleteTokens.textFieldLeftHelperOffset, textFieldTokens.leftHelperFontFamily, autocompleteTokens.textFieldLeftHelperFontFamily, textFieldTokens.leftHelperFontStyle, autocompleteTokens.textFieldLeftHelperFontStyle, textFieldTokens.leftHelperFontSize, autocompleteTokens.textFieldLeftHelperFontSize, textFieldTokens.leftHelperFontWeight, autocompleteTokens.textFieldLeftHelperFontWeight, textFieldTokens.leftHelperLetterSpacing, autocompleteTokens.textFieldLeftHelperLetterSpacing, textFieldTokens.leftHelperLineHeight, autocompleteTokens.textFieldLeftHelperLineHeight, textFieldTokens.textBeforeColor, autocompleteTokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, autocompleteTokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, autocompleteTokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, autocompleteTokens.textFieldTextAfterMargin, textFieldTokens.disabledOpacity, autocompleteTokens.textFieldDisabledOpacity, textFieldTokens.focusColor, autocompleteTokens.textFieldFocusColor, textFieldTokens.contentSlotColor, autocompleteTokens.textFieldContentSlotColor, textFieldTokens.contentSlotRightColor, autocompleteTokens.textFieldContentSlotRightColor);
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ",var(", "));"], textFieldTokens.color, autocompleteTokens.textFieldColor, textFieldTokens.placeholderColorFocus, autocompleteTokens.textFieldPlaceholderColorFocus, textFieldTokens.backgroundColor, autocompleteTokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, autocompleteTokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, autocompleteTokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, autocompleteTokens.textFieldBorderColor, textFieldTokens.borderColorHover, autocompleteTokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, autocompleteTokens.textFieldBorderColorFocus, textFieldTokens.colorReadOnly, autocompleteTokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, autocompleteTokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, autocompleteTokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, autocompleteTokens.textFieldPlaceholderColorReadOnly, textFieldTokens.caretColor, autocompleteTokens.textFieldCaretColor, textFieldTokens.placeholderColor, autocompleteTokens.textFieldPlaceholderColor, textFieldTokens.height, autocompleteTokens.textFieldHeight, textFieldTokens.borderWidth, autocompleteTokens.textFieldBorderWidth, textFieldTokens.borderRadius, autocompleteTokens.textFieldBorderRadius, textFieldTokens.padding, autocompleteTokens.textFieldPadding, textFieldTokens.leftContentMargin, autocompleteTokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, autocompleteTokens.textFieldRightContentMargin, textFieldTokens.fontFamily, autocompleteTokens.textFieldFontFamily, textFieldTokens.fontStyle, autocompleteTokens.textFieldFontStyle, textFieldTokens.fontSize, autocompleteTokens.textFieldFontSize, textFieldTokens.fontWeight, autocompleteTokens.textFieldFontWeight, textFieldTokens.letterSpacing, autocompleteTokens.textFieldLetterSpacing, textFieldTokens.lineHeight, autocompleteTokens.textFieldLineHeight, textFieldTokens.labelColor, autocompleteTokens.textFieldLabelColor, textFieldTokens.labelColorReadOnly, autocompleteTokens.textFieldLabelColorReadOnly, textFieldTokens.labelOffset, autocompleteTokens.textFieldLabelOffset, textFieldTokens.labelFontFamily, autocompleteTokens.textFieldLabelFontFamily, textFieldTokens.labelFontStyle, autocompleteTokens.textFieldLabelFontStyle, textFieldTokens.labelFontSize, autocompleteTokens.textFieldLabelFontSize, textFieldTokens.labelFontWeight, autocompleteTokens.textFieldLabelFontWeight, textFieldTokens.labelLetterSpacing, autocompleteTokens.textFieldLabelLetterSpacing, textFieldTokens.labelLineHeight, autocompleteTokens.textFieldLabelLineHeight, textFieldTokens.labelInnerFontFamily, autocompleteTokens.textFieldLabelInnerFontFamily, textFieldTokens.labelInnerFontStyle, autocompleteTokens.textFieldLabelInnerFontStyle, textFieldTokens.labelInnerFontSize, autocompleteTokens.textFieldLabelInnerFontSize, textFieldTokens.labelInnerFontWeight, autocompleteTokens.textFieldLabelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, autocompleteTokens.textFieldLabelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, autocompleteTokens.textFieldLabelInnerLineHeight, textFieldTokens.labelInnerPadding, autocompleteTokens.textFieldLabelInnerPadding, textFieldTokens.contentLabelInnerPadding, autocompleteTokens.textFieldContentLabelInnerPadding, textFieldTokens.leftHelperColor, autocompleteTokens.textFieldLeftHelperColor, textFieldTokens.leftHelperColorReadOnly, autocompleteTokens.textFieldLeftHelperColorReadOnly, textFieldTokens.leftHelperOffset, autocompleteTokens.textFieldLeftHelperOffset, textFieldTokens.leftHelperFontFamily, autocompleteTokens.textFieldLeftHelperFontFamily, textFieldTokens.leftHelperFontStyle, autocompleteTokens.textFieldLeftHelperFontStyle, textFieldTokens.leftHelperFontSize, autocompleteTokens.textFieldLeftHelperFontSize, textFieldTokens.leftHelperFontWeight, autocompleteTokens.textFieldLeftHelperFontWeight, textFieldTokens.leftHelperLetterSpacing, autocompleteTokens.textFieldLeftHelperLetterSpacing, textFieldTokens.leftHelperLineHeight, autocompleteTokens.textFieldLeftHelperLineHeight, textFieldTokens.textBeforeColor, autocompleteTokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, autocompleteTokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, autocompleteTokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, autocompleteTokens.textFieldTextAfterMargin, textFieldTokens.disabledOpacity, autocompleteTokens.textFieldDisabledOpacity, textFieldTokens.focusColor, autocompleteTokens.textFieldFocusColor, textFieldTokens.contentSlotColor, autocompleteTokens.textFieldContentSlotColor, autocompleteTokens.textFieldColor);

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

@@ -29,8 +29,6 @@ export var innerTokens = {
 export var tokens = {
   calendarWidth: '--plasma-calendar-width',
   calendarHeight: '--plasma-calendar-height',
-  calendarBorderWidth: '--plasma-calendar-border-width',
-  calendarBorderColor: '--plasma-calendar-border-color',
   /* Токены размера сетки лет */
   calendarYearsPadding: '--plasma-calendar-years-padding',
   calendarYearItemBorderRadius: '--plasma-calendar-year-item-border-radius',
@@ -93,7 +91,6 @@ export var tokens = {
   calendarHeaderFontLineHeight: '--plasma-calendar-header-line-height',
   calendarHeaderFontWeight: '--plasma-calendar-header-font-weight',
   calendarHeaderFontWeightBold: '--plasma-calendar-header-font-weight-bold',
-  calendarHeaderArrowColor: '--plasma-calendar-header-arrow-color',
   /* Токены стрелок навигации календаря */
   iconButtonColor: '--plasma-calendar-icon-button-color',
   iconButtonBackgroundColor: '--plasma-calendar-icon-button-background',
@@ -111,7 +108,6 @@ export var tokens = {
   calendarSelectedItemColor: '--plasma-calendar-selected-item-color',
   calendarSelectableItemBackgroundHover: '--plasma-calendar-selectable-item-bg-hover',
   calendarCurrentItemBorderColor: '--plasma-calendar-current-item-border-color',
-  calendarCurrentItemBorderWidth: '--plasma-calendar-current-item-border-width',
   calendarCurrentItemBackgroundHover: '--plasma-calendar-current-item-bg-hover',
   calendarCurrentItemColorHover: '--plasma-calendar-current-item-color-hover',
   calendarCurrentItemChildBackgroundHover: '--plasma-calendar-current-item-child-bg-hover',

package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.styles.js

@@ -3,7 +3,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 import { css } from 'styled-components';
 import styled from 'styled-components';
 import { tokens } from '../Calendar.tokens';
-export var StyledCalendar = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    user-select: none;\n    z-index: 1;\n\n    width: var(", ");\n    height: var(", ");\n    border: var(", ") solid var(", ");\n"])), tokens.calendarWidth, tokens.calendarHeight, tokens.calendarBorderWidth, tokens.calendarBorderColor);
+export var StyledCalendar = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    user-select: none;\n    z-index: 1;\n\n    width: var(", ");\n    height: var(", ");\n"])), tokens.calendarWidth, tokens.calendarHeight);
 export var IsOutOfRange = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1xkgu4c-0"
 })(["position:absolute;padding:0;margin:0;height:0;width:0;border:0;overflow:hidden;clip:rect(0 0 0 0);"]);

package/styled-components/es/components/Calendar/mixins/selected.js

@@ -6,7 +6,6 @@ export var addSelected = function addSelected(args) {
     selectedBackground = args.selectedBackground,
     selectedColor = args.selectedColor,
     selectableBackgroundHover = args.selectableBackgroundHover,
-    currentBorderColor = args.currentBorderColor,
-    currentBorderWidth = args.currentBorderWidth;
-  return "\n        outline: none;\n        cursor: pointer;\n\n        &:hover {\n            background-color: ".concat(selectableBackgroundHover, ";\n        };\n        \n\n        &.").concat(classes.hoveredItem, ", &.").concat(classes.hoveredItem, ":hover {\n            background-color: ").concat(selectedBackground, ";\n            color: ").concat(selectedColor, ";\n            cursor: pointer;\n            font-weight: ").concat(selectedFontWeight, ";\n        }\n\n        &.").concat(classes.selectedItem, ":not(.").concat(classes.currentItem, ") {\n            border: 0;\n            background-color: ").concat(selectedBackground, ";\n            color: ").concat(selectedColor, ";\n            cursor: default;\n            font-weight: ").concat(selectedFontWeight, ";\n        };\n\n        &.").concat(classes.currentItem, " {\n            border: ").concat(currentBorderWidth, " solid ").concat(currentBorderColor, ";\n\n            &.").concat(classes.selectedItem, " {\n                background-color: initial;\n                color: ").concat(selectedColor, ";\n                font-weight: ").concat(selectedFontWeight, ";\n\n                & > div:first-of-type {\n                    background-color: ").concat(selectedBackground, ";\n                    min-width: ").concat(minWidth, ";\n                    min-height: ").concat(minHeight, ";\n                }\n            }\n        };\n    ");
+    currentBorderColor = args.currentBorderColor;
+  return "\n        outline: none;\n        cursor: pointer;\n\n        &:hover {\n            background-color: ".concat(selectableBackgroundHover, ";\n        };\n        \n\n        &.").concat(classes.hoveredItem, ", &.").concat(classes.hoveredItem, ":hover {\n            background-color: ").concat(selectedBackground, ";\n            color: ").concat(selectedColor, ";\n            cursor: pointer;\n            font-weight: ").concat(selectedFontWeight, ";\n        }\n\n        &.").concat(classes.selectedItem, ":not(.").concat(classes.currentItem, ") {\n            border: 0;\n            background-color: ").concat(selectedBackground, ";\n            color: ").concat(selectedColor, ";\n            cursor: default;\n            font-weight: ").concat(selectedFontWeight, ";\n        };\n\n        &.").concat(classes.currentItem, " {\n            border: 0.063rem solid ").concat(currentBorderColor, ";\n\n            &.").concat(classes.selectedItem, " {\n                background-color: initial;\n                color: ").concat(selectedColor, ";\n                font-weight: ").concat(selectedFontWeight, ";\n\n                & > div:first-of-type {\n                    background-color: ").concat(selectedBackground, ";\n                    min-width: ").concat(minWidth, ";\n                    min-height: ").concat(minHeight, ";\n                }\n            }\n        };\n    ");
 };

package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js

@@ -1,10 +1,10 @@
 import React, { useCallback, useMemo } from 'react';
-import { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
+import { IconDisclosureDownFill, IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
 import { CalendarState } from '../../store/types';
 import { getCalendarType, MONTH_NAMES, YEAR_RENDER_COUNT } from '../../utils';
 import { classes } from '../../Calendar.tokens';
 import { sizeMap } from '../../store/reducer';
-import { StyledArrow, StyledArrows, StyledCalendarHeader, StyledDoubleHeaderWrapper, StyledHeader, StyledHeaderDate, StyledHeaderDouble, StyledNavigation, StyledHeaderArrow } from './CalendarHeader.styles';
+import { StyledArrow, StyledArrows, StyledCalendarHeader, StyledDoubleHeaderWrapper, StyledHeader, StyledHeaderDate, StyledHeaderDouble, StyledNavigation } from './CalendarHeader.styles';
 
 /**
  * Компонент шапки календаря.
@@ -36,20 +36,20 @@ export var CalendarHeader = function CalendarHeader(_ref) {
       return '';
     }
     if (type === CalendarState.Days) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeaderDate, null, MONTH_NAMES[locale][date.monthIndex]), /*#__PURE__*/React.createElement(StyledHeaderDate, null, date.year, /*#__PURE__*/React.createElement(StyledHeaderArrow, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeaderDate, null, MONTH_NAMES[locale][date.monthIndex]), /*#__PURE__*/React.createElement(StyledHeaderDate, null, date.year, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
         color: "inherit",
         size: size === 'xs' ? 'xs' : 's'
       })));
     }
     if (type === CalendarState.Months || type === CalendarState.Quarters) {
-      return /*#__PURE__*/React.createElement(StyledHeaderDate, null, date.year, /*#__PURE__*/React.createElement(StyledHeaderArrow, {
+      return /*#__PURE__*/React.createElement(StyledHeaderDate, null, date.year, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
         color: "inherit",
         size: size === 'xs' ? 'xs' : 's'
       }));
     }
     if (type === CalendarState.Years) {
       var yearValue = secondPart ? startYear + 12 : startYear;
-      return /*#__PURE__*/React.createElement(StyledHeaderDate, null, yearValue, "\u2014", yearValue + YEAR_RENDER_COUNT - 1, /*#__PURE__*/React.createElement(StyledHeaderArrow, {
+      return /*#__PURE__*/React.createElement(StyledHeaderDate, null, yearValue, "\u2014", yearValue + YEAR_RENDER_COUNT - 1, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
         color: "inherit",
         size: size === 'xs' ? 'xs' : 's'
       }));

package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js

@@ -4,7 +4,6 @@ import { component, mergeConfig } from '../../../../engines';
 import { iconButtonConfig, iconButtonTokens } from '../../../IconButton';
 import { flexCenter } from '../../mixins';
 import { addFocus } from '../../../../mixins';
-import { IconDisclosureDownFill } from '../../../_Icon';
 var mergedIconButtonConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
 var IconButton = /*#__PURE__*/component(mergedIconButtonConfig);
 export var StyledCalendarHeader = /*#__PURE__*/styled.div.withConfig({
@@ -42,7 +41,4 @@ export var StyledHeaderDouble = /*#__PURE__*/styled.button.withConfig({
   outlineOffset: '-0.125rem',
   outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
   outlineRadius: '0.563rem'
-}));
-export var StyledHeaderArrow = /*#__PURE__*/styled(IconDisclosureDownFill).withConfig({
-  componentId: "plasma-new-hope__sc-186pzg3-8"
-})(["color:var(", ");"], tokens.calendarHeaderArrowColor);
+}));

package/styled-components/es/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.js

@@ -36,7 +36,6 @@ export var StyledItemRoot = /*#__PURE__*/styled.div.withConfig({
   selectedColor: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemColor, ")"),
   selectableBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarSelectableItemBackgroundHover, ")"),
   currentBorderColor: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBorderColor, ")"),
-  currentBorderWidth: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBorderWidth, ")"),
   activeBackground: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemBackground, ")"),
   activeColor: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemColor, ")")
 }), /*#__PURE__*/addFocus({

package/styled-components/es/components/Combobox/ComboboxNew/Combobox.styles.js

@@ -23,12 +23,12 @@ export var Ul = /*#__PURE__*/styled.ul.withConfig({
 }, tokens.padding, classes.emptyStateWrapper);
 export var IconArrowWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-2kddkg-1"
-})(["line-height:0;color:var(", ");cursor:", ";.", "{transform:rotate(-180deg);}&:hover,&:active{color:", ";}"], tokens.disclosureIconColor, function (_ref5) {
+})(["line-height:0;color:var(", ");cursor:", ";.", "{transform:rotate(-180deg);}&:hover,&:active{color:", ";}"], constants.disclosureIconColor, function (_ref5) {
   var disabled = _ref5.disabled;
   return disabled ? 'inherit' : 'pointer';
 }, classes.arrowInverse, function (_ref6) {
   var disabled = _ref6.disabled;
-  return disabled ? "var(".concat(tokens.disclosureIconColor, ")") : "var(".concat(tokens.disclosureIconColorHover, ")");
+  return disabled ? "var(".concat(constants.disclosureIconColor, ")") : "var(".concat(constants.disclosureIconColorHover, ")");
 });
 export var StyledArrow = /*#__PURE__*/styled(IconDisclosureDownCentered).withConfig({
   componentId: "plasma-new-hope__sc-2kddkg-2"

package/styled-components/es/components/Combobox/ComboboxNew/Combobox.tokens.js

@@ -30,7 +30,6 @@ export var tokens = {
   itemIconSize: '--plasma-combobox-item-icon-size',
   itemIconSizeTight: '--plasma-combobox-item-icon-size-tight',
   itemIconMargin: '--plasma-combobox-item-icon-margin',
-  itemBackgroundHover: '--plasma-combobox-item-background-hover',
   cellPadding: '--plasma-combobox-cell-padding',
   cellPaddingLeftContent: '--plasma-combobox-cell-padding-left-content',
   cellPaddingContent: '--plasma-combobox-cell-padding-content',
@@ -146,16 +145,17 @@ export var tokens = {
   helperTextColor: '--plasma-combobox-helper-text-color',
   helperTextOffset: '--plasma-combobox-helper-text-offset',
   spinnerSize: '--plasma-combobox-spinner-size',
-  spinnerSizeTight: '--plasma-combobox-spinner-size-tight',
-  disclosureIconColor: '--plasma-combobox-disclosure-icon-color',
-  disclosureIconColorHover: '--plasma-combobox-disclosure-icon-color-hover'
+  spinnerSizeTight: '--plasma-combobox-spinner-size-tight'
 };
 export var constants = {
   focusColor: '--surface-accent',
   focusSize: '0.0625rem',
   background: '--surface-solid-card',
   boxShadow: '0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04)',
+  disclosureIconColor: '--text-secondary',
+  disclosureIconColorHover: '--text-secondary-hover',
   itemBackground: '--plasma-colors-transparent',
+  itemBackgroundHover: '--surface-transparent-secondary',
   textfieldTargetColor: '--text-primary',
   textfieldOuterLabelColor: '--text-primary',
   textfieldInnerLabelColor: '--text-secondary',