@salutejs/plasma-new-hope 0.163.1-canary.1476.11275359231.0 → 0.163.1-canary.1478.11288767669.0

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

@@ -50,8 +50,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
 };
 
 type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
-type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
-type VerticalStoryTabsProps = StoryTabsProps & { height: string };
 
 const meta: Meta<StoryTabsProps> = {
     title: 'plasma_b2c/Tabs',
@@ -81,7 +79,7 @@ const meta: Meta<StoryTabsProps> = {
 
 export default meta;
 
-const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
+const StoryHorizontalDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -136,7 +134,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
+const StoryHorizontalScroll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -146,13 +144,18 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        width,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
+        <Tabs
+            clip={clip}
+            view={hasDivider ? 'divider' : 'clear'}
+            disabled={disabled}
+            size={size}
+            style={{ width: '15rem' }}
+        >
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -192,7 +195,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
+const StoryHorizontalShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -279,15 +282,13 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
+export const HorizontalTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
         disabled: false,
         hasDivider: true,
         helperText: '',
         itemQuantity: 8,
-        stretch: false,
-        width: '15rem',
     },
     argTypes: {
         contentLeft: {
@@ -309,12 +310,6 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
             },
             if: { arg: 'stretch', truthy: false },
         },
-        width: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
         size: {
             options: sizes,
             control: {
@@ -334,7 +329,7 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
     },
 };
 
-const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
+const StoryVerticalDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -390,7 +385,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
     );
 };
 
-const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
+const StoryVerticalScroll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -400,7 +395,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        height,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -411,8 +405,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
             size={size as Size}
             disabled={disabled}
             clip={clip}
+            style={{ height: '10rem' }}
             hasDivider={hasDivider}
-            style={{ height }}
         >
             {items.map((_, i) => {
                 if (helperText !== '') {
@@ -455,7 +449,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
     );
 };
 
-const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
+const StoryVerticalShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -543,7 +537,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
     );
 };
 
-export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
+export const VerticalTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
         disabled: false,
@@ -551,7 +545,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
         itemQuantity: 8,
         orientation: 'vertical',
         helperText: '',
-        height: '10rem',
     },
     argTypes: {
         contentLeft: {
@@ -584,12 +577,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
                 disable: true,
             },
         },
-        height: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
     },
     render: (args) => {
         switch (args.clip) {

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

@@ -14,7 +14,7 @@ var config = exports.config = {
   variations: {
     view: {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
-      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
       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: {

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

@@ -50,8 +50,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
 };
 
 type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
-type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
-type VerticalStoryTabsProps = StoryTabsProps & { height: string };
 
 const meta: Meta<StoryTabsProps> = {
     title: 'plasma_web/Tabs',
@@ -81,7 +79,7 @@ const meta: Meta<StoryTabsProps> = {
 
 export default meta;
 
-const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
+const StoryHorizontalDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -136,7 +134,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
+const StoryHorizontalScroll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -146,13 +144,18 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        width,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
+        <Tabs
+            clip={clip}
+            view={hasDivider ? 'divider' : 'clear'}
+            disabled={disabled}
+            size={size}
+            style={{ width: '15rem' }}
+        >
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -192,7 +195,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
+const StoryHorizontalShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -279,15 +282,13 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
+export const HorizontalTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
         disabled: false,
         hasDivider: true,
         helperText: '',
         itemQuantity: 8,
-        stretch: false,
-        width: '15rem',
     },
     argTypes: {
         contentLeft: {
@@ -309,12 +310,6 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
             },
             if: { arg: 'stretch', truthy: false },
         },
-        width: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
         size: {
             options: sizes,
             control: {
@@ -334,7 +329,7 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
     },
 };
 
-const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
+const StoryVerticalDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -390,7 +385,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
     );
 };
 
-const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
+const StoryVerticalScroll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -400,7 +395,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        height,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -411,8 +405,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
             size={size as Size}
             disabled={disabled}
             clip={clip}
+            style={{ height: '10rem' }}
             hasDivider={hasDivider}
-            style={{ height }}
         >
             {items.map((_, i) => {
                 if (helperText !== '') {
@@ -455,7 +449,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
     );
 };
 
-const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
+const StoryVerticalShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -543,7 +537,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
     );
 };
 
-export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
+export const VerticalTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
         disabled: false,
@@ -551,7 +545,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
         itemQuantity: 8,
         orientation: 'vertical',
         helperText: '',
-        height: '10rem',
     },
     argTypes: {
         contentLeft: {
@@ -584,12 +577,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
                 disable: true,
             },
         },
-        height: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
     },
     render: (args) => {
         switch (args.clip) {

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

@@ -14,7 +14,7 @@ var config = exports.config = {
   variations: {
     view: {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
-      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
       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: {

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

@@ -83,7 +83,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
       });
       firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
         block: 'nearest',
-        inline: 'start'
+        inline: 'nearest'
       });
     }, [disabled, scrollRef, refs]);
     var onNext = useCallback(function () {
@@ -101,7 +101,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
       });
       lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
         block: 'nearest',
-        inline: 'end'
+        inline: 'nearest'
       });
     }, [disabled, scrollRef, refs]);
     var PreviousButton = useMemo(function () {

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

@@ -76,7 +76,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
         return tabStartY < scrollTop;
       });
       firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
-        block: 'start',
+        block: 'nearest',
         inline: 'nearest'
       });
     }, [disabled, scrollRef, refs]);
@@ -94,7 +94,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
         return tabEndY > scrollBottom;
       });
       lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
-        block: 'end',
+        block: 'nearest',
         inline: 'nearest'
       });
     }, [disabled, scrollRef, refs]);

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

@@ -50,8 +50,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
 };
 
 type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
-type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
-type VerticalStoryTabsProps = StoryTabsProps & { height: string };
 
 const meta: Meta<StoryTabsProps> = {
     title: 'plasma_b2c/Tabs',
@@ -81,7 +79,7 @@ const meta: Meta<StoryTabsProps> = {
 
 export default meta;
 
-const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
+const StoryHorizontalDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -136,7 +134,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
+const StoryHorizontalScroll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -146,13 +144,18 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        width,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
+        <Tabs
+            clip={clip}
+            view={hasDivider ? 'divider' : 'clear'}
+            disabled={disabled}
+            size={size}
+            style={{ width: '15rem' }}
+        >
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -192,7 +195,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
+const StoryHorizontalShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -279,15 +282,13 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
+export const HorizontalTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
         disabled: false,
         hasDivider: true,
         helperText: '',
         itemQuantity: 8,
-        stretch: false,
-        width: '15rem',
     },
     argTypes: {
         contentLeft: {
@@ -309,12 +310,6 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
             },
             if: { arg: 'stretch', truthy: false },
         },
-        width: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
         size: {
             options: sizes,
             control: {
@@ -334,7 +329,7 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
     },
 };
 
-const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
+const StoryVerticalDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -390,7 +385,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
     );
 };
 
-const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
+const StoryVerticalScroll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -400,7 +395,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        height,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -411,8 +405,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
             size={size as Size}
             disabled={disabled}
             clip={clip}
+            style={{ height: '10rem' }}
             hasDivider={hasDivider}
-            style={{ height }}
         >
             {items.map((_, i) => {
                 if (helperText !== '') {
@@ -455,7 +449,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
     );
 };
 
-const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
+const StoryVerticalShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -543,7 +537,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
     );
 };
 
-export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
+export const VerticalTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
         disabled: false,
@@ -551,7 +545,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
         itemQuantity: 8,
         orientation: 'vertical',
         helperText: '',
-        height: '10rem',
     },
     argTypes: {
         contentLeft: {
@@ -584,12 +577,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
                 disable: true,
             },
         },
-        height: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
     },
     render: (args) => {
         switch (args.clip) {

package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.config.js

@@ -8,7 +8,7 @@ export var config = {
   variations: {
     view: {
       "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
-      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
       light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
     },
     size: {