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

package/styled-components/cjs/components/Badge/Badge.js

@@ -12,12 +12,18 @@ var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _base3 = /*#__PURE__*/require("./variations/_pilled/base");
 var _base4 = /*#__PURE__*/require("./variations/_transparent/base");
 var _base5 = /*#__PURE__*/require("./variations/_clear/base");
+var _base6 = /*#__PURE__*/require("./variations/_truncate/base");
 var _Badge = /*#__PURE__*/require("./Badge.styles");
 var _Badge2 = /*#__PURE__*/require("./Badge.tokens");
-var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear"];
+var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear", "maxWidth"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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; }
 var badgeRoot = exports.badgeRoot = function badgeRoot(Root) {
@@ -35,20 +41,28 @@ var badgeRoot = exports.badgeRoot = function badgeRoot(Root) {
       transparent = _props$transparent === void 0 ? false : _props$transparent,
       _props$clear = props.clear,
       clear = _props$clear === void 0 ? false : _props$clear,
+      _props$maxWidth = props.maxWidth,
+      maxWidth = _props$maxWidth === void 0 ? 'auto' : _props$maxWidth,
       rest = _objectWithoutProperties(props, _excluded);
     var pilledClass = pilled ? _Badge2.classes.badgePilled : undefined;
     var transparentClass = transparent ? _Badge2.classes.badgeTransparent : undefined;
     var clearClass = clear ? _Badge2.classes.badgeClear : undefined;
     var txt = !text && typeof children === 'string' ? children : text;
+    var truncate = maxWidth !== 'auto';
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       ref: ref,
-      className: (0, _utils.cx)(pilledClass, transparentClass, clearClass, className),
+      className: (0, _utils.cx)(pilledClass, transparentClass, clearClass, truncate && _Badge2.classes.badgeTruncate, className),
       view: view,
       size: size,
       pilled: pilled,
       transparent: transparent,
-      clear: clear
-    }, rest), contentLeft && /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentRight, null, contentRight));
+      clear: clear,
+      truncate: truncate
+    }, rest, {
+      style: _objectSpread(_objectSpread({}, rest.style), {}, {
+        maxWidth: maxWidth
+      })
+    }), contentLeft && /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentRight, null, contentRight));
   });
 };
 var badgeConfig = exports.badgeConfig = {
@@ -74,6 +88,10 @@ var badgeConfig = exports.badgeConfig = {
     clear: {
       css: _base5.base,
       attrs: true
+    },
+    truncate: {
+      css: _base6.base,
+      attrs: true
     }
   },
   defaults: {

package/styled-components/cjs/components/Badge/Badge.tokens.js

@@ -7,7 +7,8 @@ exports.tokens = exports.classes = void 0;
 var classes = exports.classes = {
   badgePilled: 'badge-pilled',
   badgeTransparent: 'badge-transparent',
-  badgeClear: 'badge-clear'
+  badgeClear: 'badge-clear',
+  badgeTruncate: 'badge-truncate'
 };
 var tokens = exports.tokens = {
   background: '--plasma-badge-background',

package/styled-components/cjs/components/Badge/variations/_truncate/base.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Badge = /*#__PURE__*/require("../../Badge.tokens");
+var _Badge2 = /*#__PURE__*/require("../../Badge.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{max-width:100%;", "{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}"], _Badge.classes.badgeTruncate, _Badge2.StyledContentMain);

package/styled-components/cjs/components/Badge/variations/_truncate/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/cjs/components/Notification/Notification.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.notificationRoot = exports.notificationConfig = void 0;
+exports.notificationRoot = exports.noticationConfig = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 var _utils = /*#__PURE__*/require("../../utils");
 var _IconCross2 = /*#__PURE__*/require("../_Icon/Icons/IconCross");
@@ -94,7 +94,7 @@ var notificationRoot = exports.notificationRoot = function notificationRoot(Root
     })))));
   });
 };
-var notificationConfig = exports.notificationConfig = {
+var noticationConfig = exports.noticationConfig = {
   name: 'Notification',
   tag: 'div',
   layout: notificationRoot,

package/styled-components/cjs/components/Notification/Notification.styles.js

@@ -66,10 +66,7 @@ var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["defa
 })(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:var(", ");"], _Notification.tokens.contentFontFamily, _Notification.tokens.contentFontSize, _Notification.tokens.contentFontStyle, _Notification.tokens.contentFontWeight, _Notification.tokens.contentFontLetterSpacing, _Notification.tokens.contentFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), _Notification.tokens.contentColor);
 var StyledItemWrapper = exports.StyledItemWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-8"
-})(["margin-top:1rem;opacity:1;&&.", "{animation:0.4s showAnimation ease-out;&.", "{animation:0.4s showLeftToRightAnimation ease-out;}}&&.", "{animation:0.4s hideAnimation ease-out;&.", "{animation:0.4s hideLeftToRightAnimation ease-out;}}@keyframes showLeftToRightAnimation{0%{transform:translateX(-100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideLeftToRightAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(-100%);opacity:0;}}@keyframes showAnimation{0%{transform:translateX(100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(100%);opacity:0;}}"], _Notification.classes.notificationItemOpened, _Notification.classes.notificationLeftToRightAnimation, _Notification.classes.notificationItemHidden, _Notification.classes.notificationLeftToRightAnimation);
+})(["margin-top:1rem;opacity:1;&&.", "{animation:0.4s showAnimation ease-out;}&&.", "{animation:0.4s hideAnimation ease-out;}@keyframes showAnimation{0%{transform:translateX(100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(100%);opacity:0;}}"], _Notification.classes.notificationItemOpened, _Notification.classes.notificationItemHidden);
 var StyledRoot = exports.StyledRoot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-9"
-})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (_ref8) {
-  var placement = _ref8.placement;
-  return placement === 'bottom-left' ? 'flex-start' : 'flex-end';
-});
+})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:flex-end;"]);

package/styled-components/cjs/components/Notification/Notification.template-doc.mdx

@@ -10,15 +10,14 @@ import { PropsTable, Description } from '@site/src/components';
 <PropsTable name="Notification" />
 
 ## Использование
-Компонент `Notification` может использоваться для создания собственных систем оповещения.
+Компонент `Notification` может использоваться для создания собственных систем оповещения. 
 Вид компонента контролируется свойствами (props).
-Текстовая часть оповещения состоит из `title` и `children`.
+Текстовая часть оповещения состоит из `title` и `children`. 
 Слева или сверху от нее, также можно пробросить иконку через свойство `icon`.
 Также есть часть `actions`, в которой предполагается отображение кнопок для взаимодействия.
 
 ### Провайдер контекста
-Поместите `NotificationsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна.
-В качестве свойств можно указать контейнер для оповещений через `frame` и расположение в контейнере через свойство `placement`, как `bottom-right` _(по умолчанию)_ или `bottom-left`.
+Поместите `NotificationsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна:
 
 ```tsx title="index.ts"
 import ReactDOM from 'react-dom';
@@ -35,32 +34,24 @@ ReactDOM.render(
 ```
 
 ### Вызов уведомления
-После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`, который приведет к отображению оповещения.
-Функция принимает значения свойств компонента `Notification`, включая необязательное поле `id`. И возвращает сгенерированный или переданный `id`, по которому можно закрыть оповещение через вызов `closeNotification`.
+После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,который приведет к отображению оповещения.
+Функция принимает значения свойств компонента `Notification`:
 
 ```tsx live
 import React from 'react';
-import { Button, ButtonGroup, addNotification, closeNotification, NotificationsProvider } from '@salutejs/{{ package }}';
+import { Button, addNotification, NotificationsProvider } from '@salutejs/{{ package }}';
 
 export function App() {
-    const handleShow = React.useCallback(() => {
+    const handleClick = React.useCallback(() => {
         addNotification({
-            id: 'incoming-call',
             title: 'Входящий вызов',
             children: 'Принять?',
         }, 1000);
     }, []);
 
-    const handleHide = React.useCallback(() => {
-        closeNotification('incoming-call');
-    }, []);
-
     return (
         <NotificationsProvider>
-            <ButtonGroup>
-                <Button text="Показать оповещение" onClick={handleShow} />
-                <Button text="Скрыть оповещение" onClick={handleHide} />
-            </ButtonGroup>
+            <Button text="Показать оповещение" onClick={handleClick} />
         </NotificationsProvider>
     );
 }

package/styled-components/cjs/components/Notification/Notification.tokens.js

@@ -19,8 +19,7 @@ var classes = exports.classes = {
   withoutIcon: 'notification-without-icon',
   withoutCloseIcon: 'notification-without-close-icon',
   notificationItemOpened: 'notification-item-opened',
-  notificationItemHidden: 'notification-item-hidden',
-  notificationLeftToRightAnimation: 'notification-left-to-right-animation'
+  notificationItemHidden: 'notification-item-hidden'
 };
 var tokens = exports.tokens = {
   background: '--plasma-notification-backgorund',

package/styled-components/cjs/components/Notification/NotificationsPortal.js

@@ -33,9 +33,7 @@ var StyledPopup = /*#__PURE__*/(0, _styledComponents["default"])(Popup).withConf
  */
 var NotificationsPortal = exports.NotificationsPortal = function NotificationsPortal(_ref) {
   var config = _ref.config,
-    frame = _ref.frame,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'bottom-right' : _ref$placement;
+    frame = _ref.frame;
   var _useStoreon = (0, _react2.useStoreon)('notifications'),
     notifications = _useStoreon.notifications;
   var Notification = (0, _react.useMemo)(function () {
@@ -44,17 +42,15 @@ var NotificationsPortal = exports.NotificationsPortal = function NotificationsPo
   return /*#__PURE__*/_react["default"].createElement(_Popup.PopupProvider, null, notifications.length > 0 && /*#__PURE__*/_react["default"].createElement(StyledPopup, {
     opened: true,
     frame: frame,
-    placement: placement,
+    placement: "bottom-right",
     zIndex: "9100"
-  }, /*#__PURE__*/_react["default"].createElement(_Notification.StyledRoot, {
-    placement: placement
-  }, notifications.map(function (_ref2) {
+  }, /*#__PURE__*/_react["default"].createElement(_Notification.StyledRoot, null, notifications.map(function (_ref2) {
     var id = _ref2.id,
       isHidden = _ref2.isHidden,
       rest = _objectWithoutProperties(_ref2, _excluded);
     return /*#__PURE__*/_react["default"].createElement(_Notification.StyledItemWrapper, {
       key: id,
-      className: (0, _utils.cx)(isHidden ? _Notification2.classes.notificationItemHidden : _Notification2.classes.notificationItemOpened, placement === 'bottom-left' && _Notification2.classes.notificationLeftToRightAnimation),
+      className: (0, _utils.cx)(isHidden ? _Notification2.classes.notificationItemHidden : _Notification2.classes.notificationItemOpened),
       isHidden: isHidden || false
     }, /*#__PURE__*/_react["default"].createElement(Notification, _extends({
       key: id,

package/styled-components/cjs/components/Notification/NotificationsProvider.js

@@ -12,13 +12,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var NotificationsProvider = exports.NotificationsProvider = function NotificationsProvider(_ref) {
   var children = _ref.children,
     config = _ref.config,
-    frame = _ref.frame,
-    placement = _ref.placement;
+    frame = _ref.frame;
   return /*#__PURE__*/_react["default"].createElement(_react2.StoreContext.Provider, {
     value: _NotificationsStore.NotificationsStore
   }, children, /*#__PURE__*/_react["default"].createElement(_NotificationsPortal.NotificationsPortal, {
     frame: frame,
-    placement: placement,
     config: config
   }));
 };

package/styled-components/cjs/components/Notification/index.js

@@ -21,16 +21,16 @@ Object.defineProperty(exports, "closeNotification", {
     return _NotificationsStore.closeNotification;
   }
 });
-Object.defineProperty(exports, "notificationClasses", {
+Object.defineProperty(exports, "noticationConfig", {
   enumerable: true,
   get: function get() {
-    return _Notification2.classes;
+    return _Notification.noticationConfig;
   }
 });
-Object.defineProperty(exports, "notificationConfig", {
+Object.defineProperty(exports, "notificationClasses", {
   enumerable: true,
   get: function get() {
-    return _Notification.notificationConfig;
+    return _Notification2.classes;
   }
 });
 Object.defineProperty(exports, "notificationRoot", {

package/styled-components/cjs/components/Select/Select.tokens.js

@@ -99,8 +99,7 @@ var tokens = exports.tokens = {
   spinnerSize: '--plasma-select-spinner-size',
   spinnerSizeTight: '--plasma-select-spinner-size-tight',
   disclosureIconColor: '--plasma-select-disclosure-icon-color',
-  disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover',
-  contentLeftColor: '--plasma-select-content-left-color'
+  disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover'
 };
 var constants = exports.constants = {
   focusColor: '--surface-accent',

package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js

@@ -70,7 +70,7 @@ var InnerLabel = exports.InnerLabel = /*#__PURE__*/_styledComponents["default"].
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");text-align:left;"], _Select.constants.textfieldInnerLabelColor, _Select.constants.fontFamily, _Select.constants.fontSize, _Select.constants.fontStyle, _Select.constants.fontWeight, _Select.constants.fontLetterSpacing, _Select.constants.fontLineHeight);
 var ContentLeftWrapper = exports.ContentLeftWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-10"
-})(["flex:none;margin-left:-0.125rem;margin-right:0.375rem;line-height:0;color:var(", ");"], _Select.tokens.contentLeftColor);
+})(["flex:none;margin-left:-0.125rem;margin-right:0.375rem;line-height:0;"]);
 var Value = exports.Value = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-11"
 })(["", ""], /*#__PURE__*/(0, _mixins.applyEllipsis)());

package/styled-components/cjs/components/Tabs/tokens.js

@@ -20,7 +20,8 @@ var classes = exports.classes = {
   tabsHasTopArrow: 'tabs-has-top-arrow',
   tabsHasBottomArrow: 'tabs-has-bottom-arrow',
   tabsClipScroll: 'tabs-clip-scroll',
-  tabsClipShowAll: 'tabs-clip-show-all'
+  tabsClipShowAll: 'tabs-clip-show-all',
+  tabsTruncate: 'tabs-truncate'
 };
 var tokens = exports.tokens = {
   disabledOpacity: '--plasma-tabs-disabled-opacity',

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

@@ -14,11 +14,17 @@ var _base = /*#__PURE__*/require("./variations/_view/base");
 var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _base3 = /*#__PURE__*/require("./variations/_pilled/base");
 var _base4 = /*#__PURE__*/require("./variations/_disabled/base");
+var _base5 = /*#__PURE__*/require("./variations/_truncate/base");
 var _HorizontalTabItem = /*#__PURE__*/require("./HorizontalTabItem.styles");
-var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
+var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick", "maxItemWidth"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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; }
 var horizontalTabItemRoot = exports.horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
@@ -42,11 +48,13 @@ var horizontalTabItemRoot = exports.horizontalTabItemRoot = function horizontalT
       tabIndex = props.tabIndex,
       className = props.className,
       onClick = props.onClick,
+      maxWidth = props.maxItemWidth,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = (0, _react.useRef)(null);
     var ref = (0, _plasmaCore.useForkRef)(outerRef, innerRef);
     var refs = (0, _react.useContext)(_TabsContext.TabsContext);
     var role = 'tab';
+    var truncate = maxWidth !== 'auto';
     var pilledAttr = view !== 'clear' && pilled;
     var animatedClass = animated ? _tokens.classes.tabItemAnimated : undefined;
     var pilledClass = pilledAttr ? _tokens.classes.tabsPilled : undefined;
@@ -103,11 +111,16 @@ var horizontalTabItemRoot = exports.horizontalTabItemRoot = function horizontalT
       role: role,
       view: view,
       size: size,
+      truncate: truncate,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-      className: (0, _utils.cx)(pilledClass, selectedClass, animatedClass, className),
+      className: (0, _utils.cx)(pilledClass, selectedClass, animatedClass, truncate && _tokens.classes.tabsTruncate, className),
       onClick: handleClick
-    }, rest), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, contentLeft && /*#__PURE__*/_react["default"].createElement(_HorizontalTabItem.LeftContent, {
+    }, rest, {
+      style: _objectSpread(_objectSpread({}, rest.style), {}, {
+        maxWidth: maxWidth
+      })
+    }), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, contentLeft && /*#__PURE__*/_react["default"].createElement(_HorizontalTabItem.LeftContent, {
       className: _tokens.classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/_react["default"].createElement(_HorizontalTabItem.StyledContent, {
       className: _tokens.classes.tabContent
@@ -134,6 +147,9 @@ var horizontalTabItemConfig = exports.horizontalTabItemConfig = {
     },
     pilled: {
       css: _base3.base
+    },
+    truncate: {
+      css: _base5.base
     }
   },
   defaults: {

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

@@ -10,7 +10,7 @@ var _mixins = /*#__PURE__*/require("../../../../../mixins");
 var _tokens = /*#__PURE__*/require("../../../tokens");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.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.tokens.itemContentGap, _tokens.tokens.itemPaddingClear, _tokens.tokens.itemPadding, /*#__PURE__*/(0, _mixins.addFocus)({
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.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.tokens.itemContentGap, _tokens.tokens.itemPaddingClear, _tokens.tokens.itemPadding, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
   outlineColor: /*#__PURE__*/"var(".concat(_tokens.tokens.outlineFocusColor, ")"),

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _tokens = /*#__PURE__*/require("../../../../../tokens");
+var _HorizontalTabItem = /*#__PURE__*/require("../../HorizontalTabItem.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{overflow:hidden;text-overflow:ellipsis;}", "{overflow:hidden;text-overflow:ellipsis;}}"], _tokens.classes.tabsTruncate, _HorizontalTabItem.StyledContent, _HorizontalTabItem.TabItemValue);

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json

@@ -0,0 +1 @@
+[]

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

@@ -14,10 +14,16 @@ var _VerticalTabItem = /*#__PURE__*/require("./VerticalTabItem.styles");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
-var _excluded = ["size", "view", "selected", "disabled", "children", "value", "contentLeft", "contentRight", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
+var _base4 = /*#__PURE__*/require("./variations/_truncate/base");
+var _excluded = ["size", "view", "selected", "disabled", "children", "value", "contentLeft", "contentRight", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick", "maxItemWidth"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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; }
 var verticalTabItemRoot = exports.verticalTabItemRoot = function verticalTabItemRoot(Root) {
@@ -36,11 +42,13 @@ var verticalTabItemRoot = exports.verticalTabItemRoot = function verticalTabItem
       tabIndex = props.tabIndex,
       className = props.className,
       onClick = props.onClick,
+      maxWidth = props.maxItemWidth,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = (0, _react.useRef)(null);
     var ref = (0, _plasmaCore.useForkRef)(outerRef, innerRef);
     var refs = (0, _react.useContext)(_TabsContext.TabsContext);
     var role = 'tab';
+    var truncate = maxWidth !== 'auto';
     var selectedClass = selected ? _tokens.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,11 +100,16 @@ var verticalTabItemRoot = exports.verticalTabItemRoot = function verticalTabItem
       role: role,
       view: view,
       size: size,
+      truncate: truncate,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-      className: (0, _utils.cx)(selectedClass, className),
+      className: (0, _utils.cx)(selectedClass, truncate && _tokens.classes.tabsTruncate, className),
       onClick: handleClick
-    }, rest), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, contentLeft && /*#__PURE__*/_react["default"].createElement(_VerticalTabItem.LeftContent, {
+    }, rest, {
+      style: _objectSpread(_objectSpread({}, rest.style), {}, {
+        maxWidth: maxWidth
+      })
+    }), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, contentLeft && /*#__PURE__*/_react["default"].createElement(_VerticalTabItem.LeftContent, {
       className: _tokens.classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/_react["default"].createElement(_VerticalTabItem.StyledContent, {
       className: _tokens.classes.tabContent
@@ -120,6 +133,9 @@ var verticalTabItemConfig = exports.verticalTabItemConfig = {
     disabled: {
       css: _base3.base,
       attrs: true
+    },
+    truncate: {
+      css: _base4.base
     }
   },
   defaults: {

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

@@ -12,7 +12,7 @@ var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.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.tokens.itemContentGap, _tokens.tokens.itemPaddingOrientationVertical, /*#__PURE__*/(0, _mixins.addFocus)({
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.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.tokens.itemContentGap, _tokens.tokens.itemPaddingOrientationVertical, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
   outlineColor: /*#__PURE__*/"var(".concat(_tokens.tokens.outlineFocusColor, ")"),
@@ -24,7 +24,7 @@ var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["defa
 })(["display:inline-block;width:fit-content;padding:0 var(", ",var(", "));"], _tokens.tokens.itemContentPaddingClear, _tokens.tokens.itemContentPadding);
 var TabItemValue = exports.TabItemValue = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   componentId: "plasma-new-hope__sc-1pflgj8-1"
-})(["color:var(", ");"], _tokens.tokens.itemValueColor);
+})(["white-space:nowrap;color:var(", ");"], _tokens.tokens.itemValueColor);
 var RightContent = exports.RightContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1pflgj8-2"
 })(["display:flex;color:inherit;&:hover{color:inherit;}"]);

package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _tokens = /*#__PURE__*/require("../../../../../tokens");
+var _VerticalTabItem = /*#__PURE__*/require("../../VerticalTabItem.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{overflow:hidden;text-overflow:ellipsis;}", "{overflow:hidden;text-overflow:ellipsis;}}"], _tokens.classes.tabsTruncate, _VerticalTabItem.StyledContent, _VerticalTabItem.TabItemValue);

package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json

@@ -0,0 +1 @@
+[]

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

@@ -35,6 +35,9 @@ var config = exports.config = {
     },
     clear: {
       "true": /*#__PURE__*/(0, _styledComponents.css)([""])
+    },
+    truncate: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };

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

@@ -31,6 +31,9 @@ const meta: Meta<typeof Badge> = {
             control: { type: 'boolean' },
             if: { arg: 'clear', truthy: false },
         },
+        maxWidth: {
+            control: { type: 'text' },
+        },
         ...disableProps(['contentLeft', 'contentRight']),
     },
 };
@@ -64,7 +67,7 @@ export const Default: Story = {
         },
     },
     args: {
-        text: 'Hello',
+        text: 'Hello Kitty',
         view: 'default',
         size: 'm',
         enableContentLeft: false,
@@ -72,6 +75,7 @@ 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/cjs/examples/plasma_b2c/components/Notification/Notification.js

@@ -16,16 +16,14 @@ var _engines = /*#__PURE__*/require("../../../../engines");
 var _Notification2 = /*#__PURE__*/require("./Notification.config");
 var _Modal = /*#__PURE__*/require("../../../../components/Modal");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Notification.notificationConfig, _Notification2.config);
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Notification.noticationConfig, _Notification2.config);
 var Notification = exports.Notification = /*#__PURE__*/(0, _engines.component)(mergedConfig);
 var NotificationsProvider = exports.NotificationsProvider = function NotificationsProvider(_ref) {
   var children = _ref.children,
     _ref$frame = _ref.frame,
-    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame,
-    placement = _ref.placement;
+    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame;
   return /*#__PURE__*/_react["default"].createElement(_Notification.NotificationsProvider, {
     config: mergedConfig,
-    frame: frame,
-    placement: placement
+    frame: frame
   }, children);
 };