@salutejs/plasma-new-hope 0.177.0-canary.1500.11571505911.0 → 0.177.0-canary.1503.11571511639.0

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

@@ -1,11 +1,5 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick", "maxItemWidth"];
+var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';
@@ -17,7 +11,6 @@ import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as pilledCSS } from './variations/_pilled/base';
 import { base as disabledCSS } from './variations/_disabled/base';
-import { base as truncateCSS } from './variations/_truncate/base';
 import { LeftContent, RightContent, StyledContent, TabItemValue, base } from './HorizontalTabItem.styles';
 export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
@@ -40,13 +33,11 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
       tabIndex = props.tabIndex,
       className = props.className,
       onClick = props.onClick,
-      maxWidth = props.maxItemWidth,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = useRef(null);
     var ref = useForkRef(outerRef, innerRef);
     var refs = useContext(TabsContext);
     var role = 'tab';
-    var truncate = maxWidth !== 'auto';
     var pilledAttr = view !== 'clear' && pilled;
     var animatedClass = animated ? classes.tabItemAnimated : undefined;
     var pilledClass = pilledAttr ? classes.tabsPilled : undefined;
@@ -103,16 +94,11 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
       role: role,
       view: view,
       size: size,
-      truncate: truncate,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-      className: cx(pilledClass, selectedClass, animatedClass, truncate && classes.tabsTruncate, className),
+      className: cx(pilledClass, selectedClass, animatedClass, className),
       onClick: handleClick
-    }, rest, {
-      style: _objectSpread(_objectSpread({}, rest.style), {}, {
-        maxWidth: maxWidth
-      })
-    }), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
+    }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
       className: classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {
       className: classes.tabContent
@@ -139,9 +125,6 @@ export var horizontalTabItemConfig = {
     },
     pilled: {
       css: pilledCSS
-    },
-    truncate: {
-      css: truncateCSS
     }
   },
   defaults: {

package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { css } from 'styled-components';
 import { addFocus } from '../../../../../mixins';
 import { tokens } from '../../../tokens';
-export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;align-items:center;white-space:nowrap;gap:var(", ");padding:var(", ",var(", "));appearance:none;border:none;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;&:first-child{margin-left:0;}", ";"], tokens.itemContentGap, tokens.itemPaddingClear, tokens.itemPadding, /*#__PURE__*/addFocus({
+export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;align-items:center;gap:var(", ");padding:var(", ",var(", "));appearance:none;border:none;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;&:first-child{margin-left:0;}", ";"], tokens.itemContentGap, tokens.itemPaddingClear, tokens.itemPadding, /*#__PURE__*/addFocus({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
   outlineColor: /*#__PURE__*/"var(".concat(tokens.outlineFocusColor, ")"),

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

@@ -1,11 +1,5 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["size", "view", "selected", "disabled", "children", "value", "contentLeft", "contentRight", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick", "maxItemWidth"];
+var _excluded = ["size", "view", "selected", "disabled", "children", "value", "contentLeft", "contentRight", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';
@@ -17,7 +11,6 @@ import { base, LeftContent, RightContent, StyledContent, TabItemValue } from './
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as disabledCSS } from './variations/_disabled/base';
-import { base as truncateCSS } from './variations/_truncate/base';
 export var verticalTabItemRoot = function verticalTabItemRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var size = props.size,
@@ -34,13 +27,11 @@ export var verticalTabItemRoot = function verticalTabItemRoot(Root) {
       tabIndex = props.tabIndex,
       className = props.className,
       onClick = props.onClick,
-      maxWidth = props.maxItemWidth,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = useRef(null);
     var ref = useForkRef(outerRef, innerRef);
     var refs = useContext(TabsContext);
     var role = 'tab';
-    var truncate = maxWidth !== 'auto';
     var selectedClass = selected ? classes.selectedTabsItem : undefined;
     var hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;
     var navigationTabIndex = !disabled && (refs === null || refs === void 0 ? void 0 : refs.current) === itemIndex ? 0 : -1;
@@ -92,16 +83,11 @@ export var verticalTabItemRoot = function verticalTabItemRoot(Root) {
       role: role,
       view: view,
       size: size,
-      truncate: truncate,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-      className: cx(selectedClass, truncate && classes.tabsTruncate, className),
+      className: cx(selectedClass, className),
       onClick: handleClick
-    }, rest, {
-      style: _objectSpread(_objectSpread({}, rest.style), {}, {
-        maxWidth: maxWidth
-      })
-    }), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
+    }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
       className: classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {
       className: classes.tabContent
@@ -125,9 +111,6 @@ export var verticalTabItemConfig = {
     disabled: {
       css: disabledCSS,
       attrs: true
-    },
-    truncate: {
-      css: truncateCSS
     }
   },
   defaults: {

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js

@@ -4,7 +4,7 @@ import { css } from 'styled-components';
 import styled from 'styled-components';
 import { addFocus } from '../../../../../mixins';
 import { tokens } from '../../../tokens';
-export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    box-sizing: border-box;\n    align-items: center;\n    white-space: nowrap;\n\n    gap: var(", ");\n    padding: var(", ");\n\n    appearance: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    ", ";\n"])), tokens.itemContentGap, tokens.itemPaddingOrientationVertical, /*#__PURE__*/addFocus({
+export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    box-sizing: border-box;\n    align-items: center;\n\n    gap: var(", ");\n    padding: var(", ");\n\n    appearance: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    ", ";\n"])), tokens.itemContentGap, tokens.itemPaddingOrientationVertical, /*#__PURE__*/addFocus({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
   outlineColor: /*#__PURE__*/"var(".concat(tokens.outlineFocusColor, ")"),
@@ -16,7 +16,7 @@ export var StyledContent = /*#__PURE__*/styled.div.withConfig({
 })(["display:inline-block;width:fit-content;padding:0 var(", ",var(", "));"], tokens.itemContentPaddingClear, tokens.itemContentPadding);
 export var TabItemValue = /*#__PURE__*/styled.span.withConfig({
   componentId: "plasma-new-hope__sc-1pflgj8-1"
-})(["white-space:nowrap;color:var(", ");"], tokens.itemValueColor);
+})(["color:var(", ");"], tokens.itemValueColor);
 export var RightContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1pflgj8-2"
 })(["display:flex;color:inherit;&:hover{color:inherit;}"]);

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

@@ -29,9 +29,6 @@ export var config = {
     },
     clear: {
       "true": /*#__PURE__*/css([""])
-    },
-    truncate: {
-      "true": /*#__PURE__*/css([""])
     }
   }
 };

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

@@ -31,9 +31,6 @@ const meta: Meta<typeof Badge> = {
             control: { type: 'boolean' },
             if: { arg: 'clear', truthy: false },
         },
-        maxWidth: {
-            control: { type: 'text' },
-        },
         ...disableProps(['contentLeft', 'contentRight']),
     },
 };
@@ -67,7 +64,7 @@ export const Default: Story = {
         },
     },
     args: {
-        text: 'Hello Kitty',
+        text: 'Hello',
         view: 'default',
         size: 'm',
         enableContentLeft: false,
@@ -75,7 +72,6 @@ export const Default: Story = {
         clear: false,
         pilled: false,
         transparent: false,
-        maxWidth: '',
     },
     render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
         const iconSize = size === 'l' ? '1rem' : '0.75rem';

package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.js

@@ -1,16 +1,18 @@
 import React from 'react';
-import { noticationConfig, NotificationsProvider as Provider } from '../../../../components/Notification';
+import { notificationConfig, NotificationsProvider as Provider } from '../../../../components/Notification';
 import { component, mergeConfig } from '../../../../engines';
 import { config } from './Notification.config';
 export { modalClasses } from '../../../../components/Modal';
-var mergedConfig = /*#__PURE__*/mergeConfig(noticationConfig, config);
+var mergedConfig = /*#__PURE__*/mergeConfig(notificationConfig, config);
 export var Notification = /*#__PURE__*/component(mergedConfig);
 export var NotificationsProvider = function NotificationsProvider(_ref) {
   var children = _ref.children,
     _ref$frame = _ref.frame,
-    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame;
+    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame,
+    placement = _ref.placement;
   return /*#__PURE__*/React.createElement(Provider, {
     config: mergedConfig,
-    frame: frame
+    frame: frame,
+    placement: placement
   }, children);
 };

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

@@ -5,6 +5,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { Button } from '../Button/Button';
 import { Modal } from '../Modal/Modal';
 import {
+    NotificationPlacement,
     NotificationIconPlacement,
     NotificationLayout,
     addNotification,
@@ -20,6 +21,7 @@ const titles = ['Выполнено', 'Внимание', 'Ошибка'];
 const texts = ['SSH ключ успешно скопирован', 'Нельзя скопировать SSH ключ', 'Не удалось скопировать SSH ключ'];
 const size = ['xs', 'xxs'];
 const iconPlacement = ['top', 'left'];
+const notificationsPlacements = ['bottom-right', 'bottom-left'];
 
 const longText = `JavaScript frameworks are an essential part of modern front-end web development,
 providing developers with proven tools for building scalable, interactive web applications.
@@ -49,6 +51,7 @@ interface StoryDefaultProps {
     layout: NotificationLayout;
     size: 'xs' | 'xxs';
     iconPlacement: NotificationIconPlacement;
+    placement?: NotificationPlacement;
 }
 
 const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIcon, ...rest }: StoryDefaultProps) => {
@@ -111,9 +114,10 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
     layout: NotificationLayout;
     size: 'xs' | 'xxs';
     iconPlacement: NotificationIconPlacement;
+    placement?: NotificationPlacement;
 };
 
-const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
+const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
     const count = useRef(0);
     const handleClick = useCallback(() => {
         addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
@@ -121,7 +125,7 @@ const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
     }, [count, rest]);
 
     return (
-        <NotificationsProvider>
+        <NotificationsProvider placement={placement}>
             <Button text="Добавить уведомление" onClick={handleClick} />
         </NotificationsProvider>
     );
@@ -135,20 +139,28 @@ export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
                 type: 'select',
             },
         },
+        placement: {
+            options: notificationsPlacements,
+            control: {
+                type: 'select',
+            },
+        },
     },
     args: {
         timeout: 3000,
         role: 'alert',
         layout: 'vertical',
+        placement: 'bottom-right',
     },
     render: (args) => <StoryLiveDemo {...args} />,
 };
 
 type StoryWithModalProps = ComponentProps<typeof Notification> & {
     timeout: number;
+    placement?: NotificationPlacement;
 };
 
-const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
+const StoryWithModal = ({ timeout, placement }: StoryWithModalProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
     const count = useRef(0);
     const handleClick = useCallback(() => {
@@ -157,7 +169,7 @@ const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
     }, [count]);
 
     return (
-        <NotificationsProvider>
+        <NotificationsProvider placement={placement}>
             <PopupProvider>
                 <Button text="Open modal" onClick={() => setIsModalOpen(true)} />
                 <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
@@ -172,6 +184,15 @@ const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
 export const WithModal: StoryObj<StoryLiveDemoProps> = {
     args: {
         timeout: 3500,
+        placement: 'bottom-right',
+    },
+    argTypes: {
+        placement: {
+            options: notificationsPlacements,
+            control: {
+                type: 'select',
+            },
+        },
     },
     render: (args) => <StoryWithModal {...args} />,
 };

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

@@ -29,7 +29,6 @@ type CustomStoryTabsProps = {
 
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
-const labels = ['Label', 'Middle label', 'Very long label'];
 
 const getContentLeft = (contentLeftOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
@@ -77,12 +76,6 @@ const meta: Meta<StoryTabsProps> = {
             },
             if: { arg: 'helperText', eq: '' },
         },
-        maxItemWidth: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'stretch', truthy: false },
-        },
     },
 };
 
@@ -97,14 +90,13 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         stretch,
-        maxItemWidth,
         helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip="none" view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -118,9 +110,8 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxItemWidth={maxItemWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -136,9 +127,8 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxItemWidth={maxItemWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -157,7 +147,6 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
         hasDivider,
         helperText,
         width,
-        maxItemWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -177,9 +166,8 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxItemWidth={maxItemWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -195,9 +183,8 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxItemWidth={maxItemWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -215,7 +202,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        maxItemWidth,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -248,9 +234,8 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxItemWidth={maxItemWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -266,9 +251,8 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxItemWidth={maxItemWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -285,7 +269,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                             tabIndex={!disabled ? 0 : -1}
                             disabled={disabled}
                             size={size as Size}
-                            maxItemWidth="auto"
                         >
                             ShowAll
                         </TabItem>
@@ -302,10 +285,9 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         helperText: '',
-        itemQuantity: 6,
+        itemQuantity: 8,
         stretch: false,
         width: '15rem',
-        maxItemWidth: '',
     },
     argTypes: {
         contentLeft: {
@@ -361,7 +343,6 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        maxItemWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -382,9 +363,8 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxItemWidth={maxItemWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -401,9 +381,8 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxItemWidth={maxItemWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -422,7 +401,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
         hasDivider,
         helperText,
         height,
-        maxItemWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -450,9 +428,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxItemWidth={maxItemWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -469,9 +446,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxItemWidth={maxItemWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -489,7 +465,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        maxItemWidth,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -523,9 +498,8 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxItemWidth={maxItemWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -542,9 +516,8 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxItemWidth={maxItemWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -561,7 +534,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                         tabIndex={!disabled ? 0 : -1}
                         disabled={disabled}
                         size={size as Size}
-                        maxItemWidth="auto"
                     >
                         ShowAll
                     </TabItem>
@@ -576,11 +548,10 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
         size: 'xs',
         disabled: false,
         hasDivider: true,
-        itemQuantity: 6,
+        itemQuantity: 8,
         orientation: 'vertical',
         helperText: '',
         height: '10rem',
-        maxItemWidth: '',
     },
     argTypes: {
         contentLeft: {
@@ -641,7 +612,6 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         stretch,
-        maxItemWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -659,9 +629,8 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size as HeaderSize}
-                    maxItemWidth={maxItemWidth}
                 >
-                    {`${labels[i % labels.length]} ${i + 1}`}
+                    {`Label${i + 1}`}
                 </TabItem>
             ))}
         </Tabs>
@@ -674,7 +643,6 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         itemQuantity: 4,
-        maxItemWidth: '',
     },
     argTypes: {
         size: {

package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js

@@ -28,9 +28,6 @@ export var config = {
     },
     pilled: {
       "true": /*#__PURE__*/css(["", ":1.5rem;"], tabsTokens.itemPilledBorderRadius)
-    },
-    truncate: {
-      "true": /*#__PURE__*/css([""])
     }
   }
 };

package/styled-components/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js

@@ -17,9 +17,6 @@ export var config = {
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], tabsTokens.disabledOpacity)
-    },
-    truncate: {
-      "true": /*#__PURE__*/css([""])
     }
   }
 };

package/styled-components/es/examples/plasma_web/components/Notification/Notification.js

@@ -1,16 +1,18 @@
 import React from 'react';
-import { noticationConfig, NotificationsProvider as Provider } from '../../../../components/Notification';
+import { notificationConfig, NotificationsProvider as Provider } from '../../../../components/Notification';
 import { component, mergeConfig } from '../../../../engines';
 import { config } from './Notification.config';
 export { modalClasses } from '../../../../components/Modal';
-var mergedConfig = /*#__PURE__*/mergeConfig(noticationConfig, config);
+var mergedConfig = /*#__PURE__*/mergeConfig(notificationConfig, config);
 export var Notification = /*#__PURE__*/component(mergedConfig);
 export var NotificationsProvider = function NotificationsProvider(_ref) {
   var children = _ref.children,
     _ref$frame = _ref.frame,
-    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame;
+    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame,
+    placement = _ref.placement;
   return /*#__PURE__*/React.createElement(Provider, {
     config: mergedConfig,
-    frame: frame
+    frame: frame,
+    placement: placement
   }, children);
 };