@salutejs/plasma-new-hope 0.173.1-canary.1502.11462220468.0 → 0.173.2-canary.1506.11489879161.0

package/styled-components/es/components/Pagination/Pagination.styles.js

@@ -25,7 +25,7 @@ export var PaginationButtonGroup = /*#__PURE__*/styled(ButtonGroup).withConfig({
 })(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], buttonGroupTokens.buttonColor, tokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, tokens.buttonHoverColor, buttonGroupTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, tokens.buttonActiveColor, buttonGroupTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive, buttonGroupTokens.buttonFontFamily, tokens.paginationFontFamily, buttonGroupTokens.buttonFontSize, tokens.paginationFontSize, buttonGroupTokens.buttonFontStyle, tokens.paginationFontStyle, buttonGroupTokens.buttonFontWeight, tokens.paginationFontWeight, buttonGroupTokens.buttonLetterSpacing, tokens.paginationLetterSpacing, buttonGroupTokens.buttonLineHeight, tokens.paginationLineHeight, buttonGroupTokens.buttonWidth, tokens.buttonWidth, buttonGroupTokens.buttonHeight, tokens.buttonHeight, buttonGroupTokens.buttonDefaultRadius, tokens.buttonRadius, buttonGroupTokens.buttonSideRadius, tokens.buttonRadius, buttonGroupTokens.buttonSegmentedRadius, tokens.buttonRadius, buttonGroupTokens.buttonRadiusCircle, tokens.buttonRadius);
 export var PaginationButton = /*#__PURE__*/styled(Button).withConfig({
   componentId: "plasma-new-hope__sc-13na7gd-5"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}:focus{outline:none;}", ""], buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonHoverColor, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonActiveColor, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive, buttonTokens.buttonFontFamily, tokens.paginationFontFamily, buttonTokens.buttonFontSize, tokens.paginationFontSize, buttonTokens.buttonFontStyle, tokens.paginationFontStyle, buttonTokens.buttonFontWeight, tokens.paginationFontWeight, buttonTokens.buttonLetterSpacing, tokens.paginationLetterSpacing, buttonTokens.buttonLineHeight, tokens.paginationLineHeight, buttonTokens.buttonWidth, tokens.buttonWidth, buttonTokens.buttonHeight, tokens.buttonHeight, buttonTokens.buttonRadius, tokens.buttonRadius, buttonTokens.buttonDisabledOpacity, tokens.buttonDisabledOpacity, buttonTokens.buttonFocusColor, tokens.buttonFocusColor, classes.paginationPageButtonActive, buttonTokens.buttonColor, tokens.paginationCurrentButtonColor, buttonTokens.buttonBackgroundColor, tokens.paginationCurrentButtonBackgroundColor, buttonTokens.buttonColorHover, tokens.paginationCurrentButtonHoverColor, buttonTokens.buttonBackgroundColorHover, tokens.paginationCurrentButtonHoverBackgroundColor, buttonTokens.buttonColorActive, tokens.paginationCurrentButtonActiveColor, buttonTokens.buttonBackgroundColorActive, tokens.paginationCurrentButtonActiveBackgroundColor, /*#__PURE__*/addFocus({
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}&.", "{", ":var(", ",var(", "));", ":var(", ",var(", "));}:focus{outline:none;}", ""], buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonHoverColor, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonActiveColor, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive, buttonTokens.buttonFontFamily, tokens.paginationFontFamily, buttonTokens.buttonFontSize, tokens.paginationFontSize, buttonTokens.buttonFontStyle, tokens.paginationFontStyle, buttonTokens.buttonFontWeight, tokens.paginationFontWeight, buttonTokens.buttonLetterSpacing, tokens.paginationLetterSpacing, buttonTokens.buttonLineHeight, tokens.paginationLineHeight, buttonTokens.buttonWidth, tokens.buttonWidth, buttonTokens.buttonHeight, tokens.buttonHeight, buttonTokens.buttonRadius, tokens.buttonRadius, buttonTokens.buttonDisabledOpacity, tokens.buttonDisabledOpacity, buttonTokens.buttonFocusColor, tokens.buttonFocusColor, classes.paginationPageButtonActive, buttonTokens.buttonColor, tokens.paginationCurrentButtonColor, buttonTokens.buttonBackgroundColor, tokens.paginationCurrentButtonBackgroundColor, buttonTokens.buttonColorHover, tokens.paginationCurrentButtonHoverColor, buttonTokens.buttonBackgroundColorHover, tokens.paginationCurrentButtonHoverBackgroundColor, buttonTokens.buttonColorActive, tokens.paginationCurrentButtonActiveColor, buttonTokens.buttonBackgroundColorActive, tokens.paginationCurrentButtonActiveBackgroundColor, classes.buttonDisabled, buttonTokens.buttonColor, tokens.paginationDisabledButtonColor, tokens.buttonColor, buttonTokens.buttonBackgroundColor, tokens.paginationDisabledButtonBackgroundColor, tokens.buttonBackgroundColor, /*#__PURE__*/addFocus({
   outlineOffset: 'calc(-1 * var(--plasma_private-btn-outline-size))',
   outlineSize: 'var(--plasma_private-btn-outline-size)',
   outlineRadius: 'var(--plasma_private-btn-br)',

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

@@ -11,7 +11,8 @@ export var classes = {
   withHasPerPageSelect: 'pagination-has-perpage-select',
   paginationPageButton: 'pagination-page-button',
   paginationPageButtonActive: 'pagination-page-button-active',
-  paginationIconReverse: 'pagination-icon-reverse'
+  paginationIconReverse: 'pagination-icon-reverse',
+  buttonDisabled: 'pagination-button-disabled'
 };
 export var tokens = {
   paginationWidth: '--plasma-pagination-width',
@@ -35,6 +36,8 @@ export var tokens = {
   paginationCurrentButtonHoverColor: '--plasma-pagination-button-current-color-hover',
   paginationCurrentButtonActiveBackgroundColor: '--plasma-pagination-button-current-bg-color-active',
   paginationCurrentButtonActiveColor: '--plasma-pagination--button-current-color-active',
+  paginationDisabledButtonColor: '--plasma-pagination--button-color-disabled',
+  paginationDisabledButtonBackgroundColor: '--plasma-pagination--button-bg-color-disabled',
   buttonDisabledOpacity: '--plasma-pagination-button-disabled-opacity',
   buttonHeight: '--plasma-pagination-button-height',
   buttonWidthShorter: '--plasma-pagination-button-width-shorter',

package/styled-components/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js

@@ -9,7 +9,7 @@ export var SelectPerPageRoot = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;align-items:center;gap:0.5rem;"]);
 export var SelectPerPageSelect = /*#__PURE__*/styled(Select).withConfig({
   componentId: "plasma-new-hope__sc-1g304l9-1"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":0.125rem;", ":0.125rem;", ":var(", ");", ":calc(var(", ") - 0.125rem);", ":0 0.375rem 0 0;", ":1.5rem;", ":var(", ");"], selectTokens.targetButtonColor, tokens.buttonColor, selectTokens.targetButtonColorHover, tokens.buttonColorHover, selectTokens.targetButtonColorActive, tokens.buttonColorActive, selectTokens.targetButtonBackgroundColor, tokens.buttonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, tokens.buttonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive, tokens.buttonBackgroundColorActive, selectTokens.targetHeight, tokens.buttonHeight, selectTokens.targetButtonPadding, tokens.selectTargetPadding, selectTokens.borderRadius, tokens.buttonRadius, selectTokens.targetButtonArrowColor, tokens.buttonArrowColor, selectTokens.targetButtonArrowColorHover, tokens.buttonArrowColorHover, selectTokens.targetButtonArrowColorActive, tokens.buttonArrowColorActive, selectTokens.targetButtonArrowMargin, tokens.buttonArrowMargin, selectTokens.padding, selectTokens.focusOffset, selectTokens.itemPadding, tokens.selectItemPadding, selectTokens.itemBorderRadius, tokens.buttonRadius, selectTokens.itemIconMargin, selectTokens.itemIconSize, selectTokens.itemHeight, tokens.selectItemHeight);
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":0.125rem;", ":0.125rem;", ":var(", ");", ":calc(var(", ") - 0.125rem);", ":0 0.375rem 0 0;", ":1.5rem;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], selectTokens.targetButtonColor, tokens.buttonColor, selectTokens.targetButtonColorHover, tokens.buttonColorHover, selectTokens.targetButtonColorActive, tokens.buttonColorActive, selectTokens.targetButtonBackgroundColor, tokens.buttonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, tokens.buttonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive, tokens.buttonBackgroundColorActive, selectTokens.targetHeight, tokens.buttonHeight, selectTokens.targetButtonPadding, tokens.selectTargetPadding, selectTokens.borderRadius, tokens.buttonRadius, selectTokens.targetButtonArrowColor, tokens.buttonArrowColor, selectTokens.targetButtonArrowColorHover, tokens.buttonArrowColorHover, selectTokens.targetButtonArrowColorActive, tokens.buttonArrowColorActive, selectTokens.targetButtonArrowMargin, tokens.buttonArrowMargin, selectTokens.padding, selectTokens.focusOffset, selectTokens.itemPadding, tokens.selectItemPadding, selectTokens.itemBorderRadius, tokens.buttonRadius, selectTokens.itemIconMargin, selectTokens.itemIconSize, selectTokens.itemHeight, tokens.selectItemHeight, selectTokens.fontFamily, tokens.paginationFontFamily, selectTokens.fontSize, tokens.paginationFontSize, selectTokens.fontStyle, tokens.paginationFontStyle, selectTokens.fontWeight, tokens.paginationFontWeight, selectTokens.fontLetterSpacing, tokens.paginationLetterSpacing, selectTokens.fontLineHeight, tokens.paginationLineHeight);
 export var SelectPerPageTypography = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1g304l9-2"
 })(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.paginationFontFamily, tokens.paginationFontSize, tokens.paginationFontStyle, tokens.paginationFontWeight, tokens.paginationLetterSpacing, tokens.paginationLineHeight);

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

@@ -76,5 +76,11 @@ export var tokens = {
   fontStyle: '--plasma-tab-item-font-style',
   fontWeight: '--plasma-tab-item-font-weight',
   letterSpacing: '--plasma-tab-item-letter-spacing',
-  lineHeight: '--plasma-tab-item-lineheight'
+  lineHeight: '--plasma-tab-item-lineheight',
+  valueFontFamily: '--plasma-tab-item-value-font-family',
+  valueFontSize: '--plasma-tab-item-value-font-size',
+  valueFontStyle: '--plasma-tab-item-value-font-style',
+  valueFontWeight: '--plasma-tab-item-value-font-weight',
+  valueLetterSpacing: '--plasma-tab-item-value-letter-spacing',
+  valueLineHeight: '--plasma-tab-item-value-lineheight'
 };

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"];
 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';
@@ -13,7 +7,6 @@ import { useForkRef } from '@salutejs/plasma-core';
 import { classes } from '../../../tokens';
 import { cx } from '../../../../../utils';
 import { TabsContext } from '../../../TabsContext';
-import { isHeaderSize } from '../const';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as pilledCSS } from './variations/_pilled/base';
@@ -41,12 +34,6 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
       className = props.className,
       onClick = props.onClick,
       rest = _objectWithoutProperties(props, _excluded);
-    var restRootProps = size && isHeaderSize(size) ? _objectSpread({
-      size: size
-    }, rest) : _objectSpread({
-      size: size,
-      pilled: pilled
-    }, rest);
     var innerRef = useRef(null);
     var ref = useForkRef(outerRef, innerRef);
     var refs = useContext(TabsContext);
@@ -103,13 +90,15 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
       disabled: disabled,
+      pilled: pilled,
       role: role,
       view: view,
+      size: size,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
       className: cx(pilledClass, selectedClass, animatedClass, className),
       onClick: handleClick
-    }, restRootProps), /*#__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

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

@@ -14,7 +14,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-lremls-1"
-})(["color:var(", ");"], tokens.itemValueColor);
+})(["color:var(", ");font-family:var(", ",var(", "));font-size:var(", ",var(", "));font-style:var(", ",var(", "));font-weight:var(", ",var(", "));letter-spacing:var(", ",var(", "));line-height:var(", ",var(", "));"], tokens.itemValueColor, tokens.valueFontFamily, tokens.fontFamily, tokens.valueFontSize, tokens.fontSize, tokens.valueFontStyle, tokens.fontStyle, tokens.valueFontWeight, tokens.fontWeight, tokens.valueLetterSpacing, tokens.letterSpacing, tokens.valueLineHeight, tokens.lineHeight);
 export var RightContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-lremls-2"
 })(["display:flex;color:inherit;&:hover{color:inherit;}"]);

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

@@ -1,5 +1,4 @@
-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 = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className", "hasDivider", "outsideScroll"];
+var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"];
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -7,11 +6,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-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, useCallback, useMemo, useState, useEffect, useRef } from 'react';
@@ -20,7 +14,6 @@ import { IconDisclosureLeft, IconDisclosureRight } from '../../../../_Icon';
 import { classes, tokens } from '../../../tokens';
 import { cx } from '../../../../../utils';
 import { TabItemRefs, TabsContext } from '../../../TabsContext';
-import { isHeaderSize } from '../const';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
@@ -50,17 +43,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
       pilled = _props$pilled === void 0 ? false : _props$pilled,
       index = props.index,
       className = props.className,
-      _props$hasDivider = props.hasDivider,
-      hasDivider = _props$hasDivider === void 0 ? true : _props$hasDivider,
-      outsideScroll = props.outsideScroll,
       rest = _objectWithoutProperties(props, _excluded);
-    var restRootProps = size && isHeaderSize(size) ? _objectSpread({
-      size: size
-    }, rest) : _objectSpread({
-      size: size,
-      pilled: pilled,
-      outsideScroll: outsideScroll
-    }, rest);
     var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
       firstItemVisible = _useState2[0],
@@ -77,7 +60,6 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
     var isFilled = view === 'filled'; // outer padding is only for filled view
     var pilledAttr = view !== 'clear' && pilled;
     var pilledClass = pilledAttr ? classes.tabsPilled : undefined;
-    var noDividerClass = !hasDivider ? classes.tabsNoDivider : undefined;
     var stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;
     var hasLeftArrowClass = !firstItemVisible ? classes.tabsHasLeftArrow : undefined;
     var hasRightArrowClass = !lastItemVisible ? classes.tabsHasRightArrow : undefined;
@@ -208,12 +190,14 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
     }, /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       role: "tablist",
+      size: size,
+      pilled: pilled,
       id: tabsId,
       ref: outerRef,
       disabled: disabled,
-      className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, noDividerClass, className),
+      className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
       onKeyDown: onKeyDown
-    }, restRootProps), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
+    }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
       className: cx(clipScrollClass, clipShowAllClass),
       ref: scrollRef,
       onScroll: handleScroll

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

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../../../../tokens';
-export var base = /*#__PURE__*/css(["background-color:var(", ");&::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(", ");height:var(", ");border-radius:var(", ");}&.", "{&::after{left:1.5rem;}}&.", "{&::after{right:1.5rem;}}&.", "{&::after{height:0;}}"], tokens.tabsBackgroundColor, tokens.tabsDividerColor, tokens.tabsDividerHeight, tokens.tabsDividerBorderRadius, classes.tabsHasLeftArrow, classes.tabsHasRightArrow, classes.tabsNoDivider);
+export var base = /*#__PURE__*/css(["background-color:var(", ");&::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(", ");height:var(", ");border-radius:var(", ");}&.", "{&::after{left:1.5rem;}}&.", "{&::after{right:1.5rem;}}"], tokens.tabsBackgroundColor, tokens.tabsDividerColor, tokens.tabsDividerHeight, tokens.tabsDividerBorderRadius, classes.tabsHasLeftArrow, classes.tabsHasRightArrow);

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

@@ -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"
-})(["color:var(", ");"], tokens.itemValueColor);
+})(["color:var(", ");font-family:var(", ",var(", "));font-size:var(", ",var(", "));font-style:var(", ",var(", "));font-weight:var(", ",var(", "));letter-spacing:var(", ",var(", "));line-height:var(", ",var(", "));"], tokens.itemValueColor, tokens.valueFontFamily, tokens.fontFamily, tokens.valueFontSize, tokens.fontSize, tokens.valueFontStyle, tokens.fontStyle, tokens.valueFontWeight, tokens.fontWeight, tokens.valueLetterSpacing, tokens.letterSpacing, tokens.valueLineHeight, tokens.lineHeight);
 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/Tabs/Tabs.stories.tsx

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

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

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

package/styled-components/package.json

@@ -1,5 +1,6 @@
 {
     "module": "es/index.js",
     "main": "cjs/index.js",
-    "types": "../types/index.d.ts"
+    "types": "../types/index.d.ts",
+    "sideEffects": false
 }

package/types/components/Autocomplete/Autocomplete.tokens.d.ts

@@ -61,6 +61,7 @@ export declare const tokens: {
     textFieldDisabledOpacity: string;
     textFieldFocusColor: string;
     textFieldContentSlotColor: string;
+    textFieldContentSlotRightColor: string;
     background: string;
     boxShadow: string;
     borderRadius: string;

package/types/components/Autocomplete/Autocomplete.tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FlB,CAAC"}
+{"version":3,"file":"Autocomplete.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FlB,CAAC"}