@salutejs/plasma-new-hope 0.377.0 → 0.377.1-dev.0

package/dist/emotion/cjs/components/Tabs/hooks/useTabItem.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "useTabItem", {
     }
 });
 const _react = require("react");
-const useTabItem = ({ refs, innerRef, itemIndex, selected, orientation, disabled, onIndexChange, onClick })=>{
+const useTabItem = ({ refs, innerRef, itemIndex, selected, disableScroll, orientation, disabled, onIndexChange, onClick })=>{
     const hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;
     const navigationTabIndex = !disabled && refs?.current === itemIndex ? 0 : -1;
     const onItemFocus = (0, _react.useCallback)((event)=>{
@@ -62,7 +62,7 @@ const useTabItem = ({ refs, innerRef, itemIndex, selected, orientation, disabled
         refs
     ]);
     (0, _react.useLayoutEffect)(()=>{
-        if (!selected || !innerRef.current) {
+        if (!selected || disableScroll || !innerRef.current) {
             return;
         }
         const scrollEl = innerRef.current.parentElement?.parentElement;
@@ -81,6 +81,7 @@ const useTabItem = ({ refs, innerRef, itemIndex, selected, orientation, disabled
         });
     }, [
         selected,
+        disableScroll,
         orientation
     ]);
     return {

package/dist/emotion/cjs/components/Tabs/tokens.js

@@ -12,6 +12,9 @@ _export(exports, {
     get classes () {
         return classes;
     },
+    get privateTokens () {
+        return privateTokens;
+    },
     get tokens () {
         return tokens;
     }
@@ -36,6 +39,10 @@ const classes = {
     tabsTruncate: 'tabs-truncate',
     dividerAlignRight: 'divider-align-right'
 };
+const privateTokens = {
+    outlineRadius: '--plasma_private-outline-radius',
+    outerPadding: '--plasma_private-outer-padding'
+};
 const tokens = {
     disabledOpacity: '--plasma-tabs-disabled-opacity',
     containerWidth: '--plasma-tabs-container-width',
@@ -64,6 +71,7 @@ const tokens = {
     tabsPilledBorderRadius: '--plasma-tabs-pilled-border-radius',
     itemBorderRadius: '--plasma-tab-item-border-radius',
     itemPilledBorderRadius: '--plasma-tab-item-pilled-border-radius',
+    itemOutlineRadius: '--plasma-tab-item-outline-radius',
     itemWidth: '--plasma-tab-item-width',
     itemHeight: '--plasma-tab-item-height',
     itemPadding: '--plasma-tab-item-padding',
@@ -78,6 +86,8 @@ const tokens = {
     arrowInnerPadding: '--plasma-tab-arrow-inner-padding',
     arrowOuterPadding: '--plasma-tab-arrow-outer-padding',
     arrowViewOuterPadding: '--plasma-tab-arrow-view-outer-padding',
+    arrowSize: '--plasma-tab-arrow-size',
+    arrowBorderRadius: '--plasma-tab-arrow-border-radius',
     itemColor: '--plasma-tab-item-color',
     itemValueColor: '--plasma-tab-item-value-color',
     itemBackgroundColor: '--plasma-tab-item-background-color',

package/dist/emotion/cjs/components/Tabs/ui/horizontal/HorizontalIconTabItem/HorizontalIconTabItem.js

@@ -18,7 +18,7 @@ _export(exports, {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _hooks = require("../../../../../hooks");
-const _utils = require("../../../../../utils");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _Tabs = require("../../..");
 const _tokens = require("../../../tokens");
 const _useTabItem = require("../../../hooks/useTabItem");
@@ -26,6 +26,11 @@ const _base = require("./variations/_view/base");
 const _base1 = require("./variations/_size/base");
 const _base2 = require("./variations/_disabled/base");
 const _HorizontalIconTabItemstyles = require("./HorizontalIconTabItem.styles");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -68,7 +73,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const horizontalIconTabItemRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, outerRef)=>{
-        const { size, view, children, selected, disabled = false, actionContent, itemIndex, tabIndex, className, onIndexChange, onClick, isActive, animated = true, ...rest } = props;
+        const { size, view, children, selected, disableScroll, disabled = false, actionContent, itemIndex, tabIndex, className, onIndexChange, onClick, isActive, animated = true, ...rest } = props;
         const innerRef = (0, _react.useRef)(null);
         const ref = (0, _hooks.useForkRef)(outerRef, innerRef);
         const refs = (0, _react.useContext)(_Tabs.TabsContext);
@@ -80,6 +85,7 @@ const horizontalIconTabItemRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((
             innerRef,
             itemIndex,
             selected,
+            disableScroll,
             disabled,
             onIndexChange,
             onClick,
@@ -87,7 +93,7 @@ const horizontalIconTabItemRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((
         });
         return /*#__PURE__*/ _react.default.createElement(Root, {
             ref: ref,
-            className: (0, _utils.cx)(selectedClass, animatedClass, className),
+            className: (0, _classnames.default)(selectedClass, animatedClass, className),
             disabled: disabled,
             role: role,
             view: view,

package/dist/emotion/cjs/components/Tabs/ui/horizontal/HorizontalIconTabItem/HorizontalIconTabItem.styles.js

@@ -29,18 +29,18 @@ function _interop_require_default(obj) {
     };
 }
 const StyledContent = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e3p12dc0",
+    target: "e7w8bb70",
     label: "StyledContent"
 })("display:inline-block;width:fit-content;");
 const ActionContent = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e3p12dc1",
+    target: "e7w8bb71",
     label: "ActionContent"
 })("display:flex;margin-left:var(", _tokens.tokens.actionContentMarginLeft, ");");
 const base = (0, /*#__PURE__*/ _react.css)("position:relative;display:flex;align-items:center;justify-content:center;gap:var(", _tokens.tokens.itemContentGap, ");appearance:none;border:none;outline:none;cursor:var(", _tokens.tokens.itemCursorOverNotSelected, ",var(", _tokens.tokens.itemCursor, "));white-space:nowrap;box-sizing:border-box;-webkit-tap-highlight-color:transparent;&:first-child{margin-left:0;}", (0, _mixins.addFocus)({
     outlineSize: '0.063rem',
     outlineOffset: '-0.063rem',
     outlineColor: `var(${_tokens.tokens.outlineFocusColor})`,
-    outlineRadius: 'var(--border-radius-m , calc(var(--plasma_private-outline-radius) + 0.063rem))',
+    outlineRadius: `var(--border-radius-m , calc(var(${_tokens.privateTokens.outlineRadius}) + 0.063rem))`,
     customFocusRules: `
             &.focus-visible:focus,
             &[data-focus-visible-added] {

package/dist/emotion/cjs/components/Tabs/ui/horizontal/HorizontalIconTabItem/variations/_size/base.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "base", {
 });
 const _react = require("@emotion/react");
 const _tokens = require("../../../../../tokens");
-const base = (0, /*#__PURE__*/ _react.css)("--plasma_private-outline-radius:var(", _tokens.tokens.itemBorderRadius, ");border-radius:var(", _tokens.tokens.itemBorderRadius, ");padding:var(", _tokens.tokens.itemPadding, ");", "base");
+const base = (0, /*#__PURE__*/ _react.css)(_tokens.privateTokens.outlineRadius, ":var(", _tokens.tokens.itemBorderRadius, ");border-radius:var(", _tokens.tokens.itemBorderRadius, ");padding:var(", _tokens.tokens.itemPadding, ");", "base");

package/dist/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js

@@ -18,7 +18,7 @@ _export(exports, {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _hooks = require("../../../../../hooks");
-const _utils = require("../../../../../utils");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _Tabs = require("../../..");
 const _tokens = require("../../../tokens");
 const _useTabItem = require("../../../hooks/useTabItem");
@@ -27,6 +27,11 @@ const _base1 = require("./variations/_size/base");
 const _base2 = require("./variations/_pilled/base");
 const _base3 = require("./variations/_disabled/base");
 const _HorizontalTabItemstyles = require("./HorizontalTabItem.styles");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -69,7 +74,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const horizontalTabItemRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, outerRef)=>{
-        const { size, view, isActive, selected, disabled = false, pilled = false, children, value, contentLeft, contentRight, actionContent, animated = true, onIndexChange, itemIndex, tabIndex, className, onClick, maxItemWidth: maxWidth = 'auto', ...rest } = props;
+        const { size, view, isActive, selected, disableScroll, disabled = false, pilled = false, children, value, contentLeft, contentRight, actionContent, animated = true, onIndexChange, itemIndex, tabIndex, className, onClick, maxItemWidth: maxWidth = 'auto', ...rest } = props;
         const innerRef = (0, _react.useRef)(null);
         const ref = (0, _hooks.useForkRef)(outerRef, innerRef);
         const refs = (0, _react.useContext)(_Tabs.TabsContext);
@@ -84,6 +89,7 @@ const horizontalTabItemRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((prop
             innerRef,
             itemIndex,
             selected,
+            disableScroll,
             disabled,
             onIndexChange,
             onClick,
@@ -99,7 +105,7 @@ const horizontalTabItemRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((prop
             size: size,
             onFocus: onItemFocus,
             tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-            className: (0, _utils.cx)(pilledClass, selectedClass, animatedClass, truncateClass, className),
+            className: (0, _classnames.default)(pilledClass, selectedClass, animatedClass, truncateClass, className),
             onClick: handleClick,
             ...rest,
             style: {

package/dist/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js

@@ -38,30 +38,30 @@ function _interop_require_default(obj) {
     };
 }
 const StyledContent = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1c7g9dx0",
+    target: "e1tvq35j0",
     label: "StyledContent"
 })("display:inline-block;width:fit-content;padding:0 var(", _tokens.tokens.itemContentPaddingClear, ",var(", _tokens.tokens.itemContentPadding, "));");
 const TabItemValue = (0, /*#__PURE__*/ _styled.default)("span", {
-    target: "e1c7g9dx1",
+    target: "e1tvq35j1",
     label: "TabItemValue"
 })("color:var(", _tokens.tokens.itemValueColor, ");font-family:var(", _tokens.tokens.valueFontFamily, ",var(", _tokens.tokens.fontFamily, "));font-size:var(", _tokens.tokens.valueFontSize, ",var(", _tokens.tokens.fontSize, "));font-style:var(", _tokens.tokens.valueFontStyle, ",var(", _tokens.tokens.fontStyle, "));font-weight:var(", _tokens.tokens.valueFontWeight, ",var(", _tokens.tokens.fontWeight, "));letter-spacing:var(", _tokens.tokens.valueLetterSpacing, ",var(", _tokens.tokens.letterSpacing, "));line-height:var(", _tokens.tokens.valueLineHeight, ",var(", _tokens.tokens.lineHeight, "));");
 const RightContent = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1c7g9dx2",
+    target: "e1tvq35j2",
     label: "RightContent"
 })("display:flex;color:inherit;&:hover{color:inherit;}");
 const LeftContent = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1c7g9dx3",
+    target: "e1tvq35j3",
     label: "LeftContent"
 })("display:flex;color:inherit;&:hover{color:inherit;}");
 const ActionContent = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1c7g9dx4",
+    target: "e1tvq35j4",
     label: "ActionContent"
 })("display:flex;margin-left:var(", _tokens.tokens.actionContentMarginLeft, ");");
 const base = (0, /*#__PURE__*/ _react.css)("position:relative;display:flex;align-items:center;justify-content:center;gap:var(", _tokens.tokens.itemContentGap, ");padding:var(", _tokens.tokens.itemPaddingClear, ",var(", _tokens.tokens.itemPadding, "));appearance:none;border:none;outline:none;cursor:var(", _tokens.tokens.itemCursorOverNotSelected, ",var(", _tokens.tokens.itemCursor, "));white-space:nowrap;box-sizing:border-box;-webkit-tap-highlight-color:transparent;&:first-child{margin-left:0;}", (0, _mixins.addFocus)({
     outlineSize: '0.063rem',
     outlineOffset: '-0.063rem',
     outlineColor: `var(${_tokens.tokens.outlineFocusColor})`,
-    outlineRadius: 'var(--border-radius-m , calc(var(--plasma_private-outline-radius) + 0.063rem))',
+    outlineRadius: `var(${_tokens.tokens.itemOutlineRadius}, var(--border-radius-m, calc(var(${_tokens.privateTokens.outlineRadius}) + 0.063rem)))`,
     customFocusRules: `
             &.focus-visible:focus,
             &[data-focus-visible-added] {

package/dist/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_pilled/base.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "base", {
 });
 const _react = require("@emotion/react");
 const _tokens = require("../../../../../tokens");
-const base = (0, /*#__PURE__*/ _react.css)("&.", _tokens.classes.tabsPilled, "{--plasma_private-outline-radius:var(", _tokens.tokens.itemPilledBorderRadius, ");border-radius:var(", _tokens.tokens.itemPilledBorderRadius, ");padding:var(", _tokens.tokens.itemPaddingPilled, ");}", "base");
+const base = (0, /*#__PURE__*/ _react.css)("&.", _tokens.classes.tabsPilled, "{", _tokens.privateTokens.outlineRadius, ":var(", _tokens.tokens.itemPilledBorderRadius, ");border-radius:var(", _tokens.tokens.itemPilledBorderRadius, ");padding:var(", _tokens.tokens.itemPaddingPilled, ");}", "base");

package/dist/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_size/base.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "base", {
 });
 const _react = require("@emotion/react");
 const _tokens = require("../../../../../tokens");
-const base = (0, /*#__PURE__*/ _react.css)("font-family:var(", _tokens.tokens.fontFamily, ");font-size:var(", _tokens.tokens.fontSize, ");font-style:var(", _tokens.tokens.fontStyle, ");font-weight:var(", _tokens.tokens.fontWeight, ");letter-spacing:var(", _tokens.tokens.letterSpacing, ");line-height:var(", _tokens.tokens.lineHeight, ");--plasma_private-outline-radius:var(", _tokens.tokens.itemBorderRadius, ");border-radius:var(", _tokens.tokens.itemBorderRadius, ");width:var(", _tokens.tokens.itemWidth, ");height:var(", _tokens.tokens.itemHeight, ");", "base");
+const base = (0, /*#__PURE__*/ _react.css)("font-family:var(", _tokens.tokens.fontFamily, ");font-size:var(", _tokens.tokens.fontSize, ");font-style:var(", _tokens.tokens.fontStyle, ");font-weight:var(", _tokens.tokens.fontWeight, ");letter-spacing:var(", _tokens.tokens.letterSpacing, ");line-height:var(", _tokens.tokens.lineHeight, ");", _tokens.privateTokens.outlineRadius, ":var(", _tokens.tokens.itemBorderRadius, ");border-radius:var(", _tokens.tokens.itemBorderRadius, ");width:var(", _tokens.tokens.itemWidth, ");height:var(", _tokens.tokens.itemHeight, ");&.", _tokens.classes.selectedTabsItem, "{font-weight:var(", _tokens.tokens.fontWeightSelected, ",var(", _tokens.tokens.fontWeight, "));}", "base");

package/dist/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js

@@ -17,6 +17,7 @@ _export(exports, {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _utils = require("../../../../../utils");
 const _Icon = require("../../../../_Icon");
 const _tokens = require("../../../tokens");
@@ -28,6 +29,11 @@ const _base2 = require("./variations/_disabled/base");
 const _base3 = require("./variations/_pilled/base");
 const _base4 = require("./variations/_stretch/base");
 const _HorizontalTabsstyles = require("./HorizontalTabs.styles");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -151,6 +157,7 @@ const horizontalTabsRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props,
                 isLeftArrow: true
             }, /*#__PURE__*/ _react.default.createElement(_Icon.IconDisclosureLeft, {
                 size: getIconSize(size),
+                sizeCustomProperty: _tokens.tokens.arrowSize,
                 color: "inherit"
             })), [
             onPrev,
@@ -167,6 +174,7 @@ const horizontalTabsRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props,
                 isFilled: isFilled
             }, /*#__PURE__*/ _react.default.createElement(_Icon.IconDisclosureRight, {
                 size: getIconSize(size),
+                sizeCustomProperty: _tokens.tokens.arrowSize,
                 color: "inherit"
             })), [
             onNext,
@@ -231,9 +239,13 @@ const horizontalTabsRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props,
             if (firstItemVisible || !shouldTriggerAdditionalScroll || !scrollRef.current || !leftArrowRef.current) {
                 return;
             }
-            const style = getComputedStyle(scrollRef.current);
+            const scrollStyle = getComputedStyle(scrollRef.current);
+            const arrowStyle = getComputedStyle(leftArrowRef.current);
+            const root = scrollRef.current.parentElement;
+            const rootGap = root ? parseInt(getComputedStyle(root).columnGap, 10) : 0;
+            const arrowOccupiedWidth = leftArrowRef.current.offsetWidth + parseInt(arrowStyle.marginLeft, 10) + parseInt(arrowStyle.marginRight, 10) + rootGap;
             scrollRef.current.scrollTo({
-                left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth + parseInt(style.paddingLeft, 10))
+                left: Math.round(scrollRef.current.scrollLeft + arrowOccupiedWidth + parseInt(scrollStyle.paddingLeft, 10))
             });
             setShouldTriggerAdditionalScroll(false);
         }, [
@@ -253,11 +265,11 @@ const horizontalTabsRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props,
             id: tabsId,
             ref: outerRef,
             disabled: disabled,
-            className: (0, _utils.cx)(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, noDividerClass, className),
+            className: (0, _classnames.default)(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, noDividerClass, className),
             onKeyDown: onKeyDown,
             ...rest
         }, !firstItemVisible && clip === 'scroll' && PreviousButton, /*#__PURE__*/ _react.default.createElement(_HorizontalTabsstyles.StyledContentWrapper, {
-            className: (0, _utils.cx)(clipScrollClass, clipShowAllClass),
+            className: (0, _classnames.default)(clipScrollClass, clipShowAllClass),
             ref: scrollRef,
             onScroll: handleScroll
         }, /*#__PURE__*/ _react.default.createElement(_HorizontalTabsstyles.StyledContent, {

package/dist/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.styles.js

@@ -31,21 +31,21 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const base = (0, /*#__PURE__*/ _react.css)("display:flex;gap:0.125rem;align-items:center;position:relative;", "base");
+const base = (0, /*#__PURE__*/ _react.css)("display:flex;gap:0.125rem;align-items:center;position:relative;padding:var(", _tokens.tokens.tabsPadding, ",0);", "base");
 const StyledContent = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e18d38b70",
+    target: "e1tv5svm0",
     label: "StyledContent"
 })("display:inline-flex;flex-direction:row;align-items:center;");
 const StyledContentWrapper = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e18d38b71",
+    target: "e1tv5svm1",
     label: "StyledContentWrapper"
 })("box-sizing:content-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.", _tokens.classes.tabsClipScroll, "{overflow:scroll;scrollbar-width:none;::-webkit-scrollbar{display:none;}}&.", _tokens.classes.tabsClipShowAll, "{overflow:visible;}");
 const StyledArrow = (0, /*#__PURE__*/ _styled.default)("button", {
-    target: "e18d38b72",
+    target: "e1tv5svm2",
     label: "StyledArrow"
-})("display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;", (0, _mixins.addFocus)({
+})("display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;color:var(", _tokens.tokens.arrowColor, ");margin-right:", ({ isLeftArrow })=>isLeftArrow ? `var(${_tokens.tokens.arrowInnerPadding})` : `var(${_tokens.privateTokens.outerPadding})`, ";margin-left:", ({ isLeftArrow })=>isLeftArrow ? `var(${_tokens.privateTokens.outerPadding})` : `var(${_tokens.tokens.arrowInnerPadding})`, ";", _tokens.privateTokens.outlineRadius, ":var(", _tokens.tokens.arrowBorderRadius, ",inherit);", _tokens.privateTokens.outerPadding, ":", ({ isFilled })=>isFilled ? `var(${_tokens.tokens.arrowOuterPadding})` : '', ";", (0, _mixins.addFocus)({
     outlineSize: '0.063rem',
     outlineOffset: '0',
     outlineColor: `var(${_tokens.tokens.outlineFocusColor})`,
-    outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)'
-}), ";&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:", ({ isFilled })=>isFilled ? `var(${_tokens.tokens.arrowOuterPadding})` : '', ";padding-right:", ({ isLeftArrow })=>isLeftArrow ? `var(${_tokens.tokens.arrowInnerPadding})` : 'var(--plasma_private-outer-padding)', ";padding-left:", ({ isLeftArrow })=>isLeftArrow ? 'var(--plasma_private-outer-padding)' : `var(${_tokens.tokens.arrowInnerPadding})`, ";color:var(", _tokens.tokens.arrowColor, ");&:hover{color:var(", _tokens.tokens.arrowColorHover, ");}&:active{color:var(", _tokens.tokens.arrowColorActive, ");}");
+    outlineRadius: `calc(var(${_tokens.privateTokens.outlineRadius}) - 0.063rem)`
+}), ";&[disabled]{cursor:not-allowed;}&:hover{color:var(", _tokens.tokens.arrowColorHover, ");}&:active{color:var(", _tokens.tokens.arrowColorActive, ");}");

package/dist/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabs/variations/_pilled/base.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "base", {
 });
 const _react = require("@emotion/react");
 const _tokens = require("../../../../../tokens");
-const base = (0, /*#__PURE__*/ _react.css)("&.", _tokens.classes.tabsPilled, "{--plasma_private-outline-radius:var(", _tokens.tokens.tabsPilledBorderRadius, ");border-radius:var(", _tokens.tokens.tabsPilledBorderRadius, ");}", "base");
+const base = (0, /*#__PURE__*/ _react.css)("&.", _tokens.classes.tabsPilled, "{", _tokens.privateTokens.outlineRadius, ":var(", _tokens.tokens.tabsPilledBorderRadius, ");border-radius:var(", _tokens.tokens.tabsPilledBorderRadius, ");}", "base");

package/dist/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabs/variations/_size/base.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "base", {
 });
 const _react = require("@emotion/react");
 const _tokens = require("../../../../../tokens");
-const base = (0, /*#__PURE__*/ _react.css)("width:var(", _tokens.tokens.tabsWidth, ");height:var(", _tokens.tokens.tabsHeight, ");--plasma_private-outline-radius:var(", _tokens.tokens.tabsBorderRadius, ");border-radius:var(", _tokens.tokens.tabsBorderRadius, ");", "base");
+const base = (0, /*#__PURE__*/ _react.css)("width:var(", _tokens.tokens.tabsWidth, ");height:var(", _tokens.tokens.tabsHeight, ");", _tokens.privateTokens.outlineRadius, ":var(", _tokens.tokens.tabsBorderRadius, ");border-radius:var(", _tokens.tokens.tabsBorderRadius, ");", "base");

package/dist/emotion/cjs/components/Tabs/ui/vertical/VerticalIconTabItem/VerticalIconTabItem.js

@@ -73,7 +73,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const verticalIconTabItemRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, outerRef)=>{
-        const { size, view, selected, disabled = false, children, actionContent, itemIndex, tabIndex, className, onIndexChange, onClick, ...rest } = props;
+        const { size, view, selected, disableScroll, disabled = false, children, actionContent, itemIndex, tabIndex, className, onIndexChange, onClick, ...rest } = props;
         const innerRef = (0, _react.useRef)(null);
         const ref = (0, _hooks.useForkRef)(outerRef, innerRef);
         const refs = (0, _react.useContext)(_Tabs.TabsContext);
@@ -83,6 +83,7 @@ const verticalIconTabItemRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((pr
             innerRef,
             itemIndex,
             selected,
+            disableScroll,
             disabled,
             onIndexChange,
             onClick,

package/dist/emotion/cjs/components/Tabs/ui/vertical/VerticalIconTabItem/VerticalIconTabItem.styles.js

@@ -29,18 +29,18 @@ function _interop_require_default(obj) {
     };
 }
 const StyledContent = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1v4dif10",
+    target: "e1sv9ufc0",
     label: "StyledContent"
 })("display:inline-block;width:fit-content;");
 const ActionContent = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1v4dif11",
+    target: "e1sv9ufc1",
     label: "ActionContent"
 })("display:flex;margin-left:var(", _tokens.tokens.actionContentMarginLeft, ");");
 const base = (0, /*#__PURE__*/ _react.css)("position:relative;display:flex;align-items:center;justify-content:flex-start;gap:var(", _tokens.tokens.itemContentGap, ");appearance:none;border:none;outline:none;cursor:var(", _tokens.tokens.itemCursorOverNotSelected, ",var(", _tokens.tokens.itemCursor, "));white-space:nowrap;box-sizing:border-box;-webkit-tap-highlight-color:transparent;", (0, _mixins.addFocus)({
     outlineSize: '0.063rem',
     outlineOffset: '-0.063rem',
     outlineColor: `var(${_tokens.tokens.outlineFocusColor})`,
-    outlineRadius: 'var(--border-radius-m , calc(var(--plasma_private-outline-radius) + 0.063rem))',
+    outlineRadius: `var(--border-radius-m , calc(var(${_tokens.privateTokens.outlineRadius}) + 0.063rem))`,
     customFocusRules: `
             &.focus-visible:focus,
             &[data-focus-visible-added] {

package/dist/emotion/cjs/components/Tabs/ui/vertical/VerticalIconTabItem/variations/_size/base.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "base", {
 });
 const _react = require("@emotion/react");
 const _tokens = require("../../../../../tokens");
-const base = (0, /*#__PURE__*/ _react.css)("--plasma_private-outline-radius:var(", _tokens.tokens.itemBorderRadius, ");border-radius:var(", _tokens.tokens.itemBorderRadius, ");padding:var(", _tokens.tokens.itemPaddingOrientationVertical, ");", "base");
+const base = (0, /*#__PURE__*/ _react.css)(_tokens.privateTokens.outlineRadius, ":var(", _tokens.tokens.itemBorderRadius, ");border-radius:var(", _tokens.tokens.itemBorderRadius, ");padding:var(", _tokens.tokens.itemPaddingOrientationVertical, ");", "base");

package/dist/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js

@@ -18,14 +18,20 @@ _export(exports, {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _hooks = require("../../../../../hooks");
-const _utils = require("../../../../../utils");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _Tabs = require("../../..");
 const _useTabItem = require("../../../hooks/useTabItem");
 const _tokens = require("../../../tokens");
 const _VerticalTabItemstyles = require("./VerticalTabItem.styles");
 const _base = require("./variations/_view/base");
 const _base1 = require("./variations/_size/base");
-const _base2 = require("./variations/_disabled/base");
+const _base2 = require("./variations/_pilled/base");
+const _base3 = require("./variations/_disabled/base");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -68,11 +74,13 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const verticalTabItemRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, outerRef)=>{
-        const { size, view, selected, disabled = false, children, value, contentLeft, contentRight, actionContent, onIndexChange, itemIndex, tabIndex, className, onClick, maxItemWidth: maxWidth = 'auto', ...rest } = props;
+        const { size, view, selected, disableScroll, disabled = false, pilled = false, children, value, contentLeft, contentRight, actionContent, onIndexChange, itemIndex, tabIndex, className, onClick, maxItemWidth: maxWidth = 'auto', ...rest } = props;
         const innerRef = (0, _react.useRef)(null);
         const ref = (0, _hooks.useForkRef)(outerRef, innerRef);
         const refs = (0, _react.useContext)(_Tabs.TabsContext);
         const role = 'tab';
+        const pilledAttr = view !== 'clear' && pilled;
+        const pilledClass = pilledAttr ? _tokens.classes.tabsPilled : undefined;
         const selectedClass = selected ? _tokens.classes.selectedTabsItem : undefined;
         const truncateClass = maxWidth !== 'auto' ? _tokens.classes.tabsTruncate : undefined;
         const { hasKeyNavigation, navigationTabIndex, onItemFocus, handleClick } = (0, _useTabItem.useTabItem)({
@@ -80,6 +88,7 @@ const verticalTabItemRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props,
             innerRef,
             itemIndex,
             selected,
+            disableScroll,
             disabled,
             onIndexChange,
             onClick,
@@ -88,12 +97,13 @@ const verticalTabItemRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props,
         return /*#__PURE__*/ _react.default.createElement(Root, {
             ref: ref,
             disabled: disabled,
+            pilled: pilled,
             role: role,
             view: view,
             size: size,
             onFocus: onItemFocus,
             tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-            className: (0, _utils.cx)(selectedClass, truncateClass, className),
+            className: (0, _classnames.default)(pilledClass, selectedClass, truncateClass, className),
             onClick: handleClick,
             ...rest,
             style: {
@@ -121,8 +131,11 @@ const verticalTabItemConfig = {
             css: _base.base
         },
         disabled: {
-            css: _base2.base,
+            css: _base3.base,
             attrs: true
+        },
+        pilled: {
+            css: _base2.base
         }
     },
     defaults: {

package/dist/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js

@@ -38,30 +38,30 @@ function _interop_require_default(obj) {
     };
 }
 const StyledContent = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1s73to0",
+    target: "eeiifmi0",
     label: "StyledContent"
 })("display:inline-block;width:fit-content;padding:0 var(", _tokens.tokens.itemContentPaddingClear, ",var(", _tokens.tokens.itemContentPadding, "));");
 const TabItemValue = (0, /*#__PURE__*/ _styled.default)("span", {
-    target: "e1s73to1",
+    target: "eeiifmi1",
     label: "TabItemValue"
 })("white-space:nowrap;color:var(", _tokens.tokens.itemValueColor, ");font-family:var(", _tokens.tokens.valueFontFamily, ",var(", _tokens.tokens.fontFamily, "));font-size:var(", _tokens.tokens.valueFontSize, ",var(", _tokens.tokens.fontSize, "));font-style:var(", _tokens.tokens.valueFontStyle, ",var(", _tokens.tokens.fontStyle, "));font-weight:var(", _tokens.tokens.valueFontWeight, ",var(", _tokens.tokens.fontWeight, "));letter-spacing:var(", _tokens.tokens.valueLetterSpacing, ",var(", _tokens.tokens.letterSpacing, "));line-height:var(", _tokens.tokens.valueLineHeight, ",var(", _tokens.tokens.lineHeight, "));");
 const RightContent = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1s73to2",
+    target: "eeiifmi2",
     label: "RightContent"
 })("display:flex;color:inherit;&:hover{color:inherit;}");
 const LeftContent = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1s73to3",
+    target: "eeiifmi3",
     label: "LeftContent"
 })("display:flex;color:inherit;&:hover{color:inherit;}");
 const ActionContent = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1s73to4",
+    target: "eeiifmi4",
     label: "ActionContent"
 })("display:flex;margin-left:var(", _tokens.tokens.actionContentMarginLeft, ");");
 const base = (0, /*#__PURE__*/ _react.css)("position:relative;display:flex;align-items:center;justify-content:flex-start;gap:var(", _tokens.tokens.itemContentGap, ");padding:var(", _tokens.tokens.itemPaddingOrientationVertical, ");appearance:none;border:none;outline:none;cursor:var(", _tokens.tokens.itemCursorOverNotSelected, ",var(", _tokens.tokens.itemCursor, "));white-space:nowrap;box-sizing:border-box;-webkit-tap-highlight-color:transparent;", (0, _mixins.addFocus)({
     outlineSize: '0.063rem',
     outlineOffset: '-0.063rem',
     outlineColor: `var(${_tokens.tokens.outlineFocusColor})`,
-    outlineRadius: 'var(--border-radius-m , calc(var(--plasma_private-outline-radius) + 0.063rem))',
+    outlineRadius: `var(${_tokens.tokens.itemOutlineRadius}, var(--border-radius-m, calc(var(${_tokens.privateTokens.outlineRadius}) + 0.063rem)))`,
     customFocusRules: `
             &.focus-visible:focus,
             &[data-focus-visible-added] {

package/dist/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_pilled/base.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "base", {
+    enumerable: true,
+    get: function() {
+        return base;
+    }
+});
+const _react = require("@emotion/react");
+const _tokens = require("../../../../../tokens");
+const base = (0, /*#__PURE__*/ _react.css)("&.", _tokens.classes.tabsPilled, "{", _tokens.privateTokens.outlineRadius, ":var(", _tokens.tokens.itemPilledBorderRadius, ");border-radius:var(", _tokens.tokens.itemPilledBorderRadius, ");padding:var(", _tokens.tokens.itemPaddingPilled, ",var(", _tokens.tokens.itemPaddingOrientationVertical, "));}", "base");

package/dist/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_size/base.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "base", {
 });
 const _react = require("@emotion/react");
 const _tokens = require("../../../../../tokens");
-const base = (0, /*#__PURE__*/ _react.css)("font-family:var(", _tokens.tokens.fontFamily, ");font-size:var(", _tokens.tokens.fontSize, ");font-style:var(", _tokens.tokens.fontStyle, ");font-weight:var(", _tokens.tokens.fontWeight, ");letter-spacing:var(", _tokens.tokens.letterSpacing, ");line-height:var(", _tokens.tokens.lineHeight, ");--plasma_private-outline-radius:var(", _tokens.tokens.itemBorderRadius, ");border-radius:var(", _tokens.tokens.itemBorderRadius, ");width:100%;height:var(", _tokens.tokens.itemHeight, ");", "base");
+const base = (0, /*#__PURE__*/ _react.css)("font-family:var(", _tokens.tokens.fontFamily, ");font-size:var(", _tokens.tokens.fontSize, ");font-style:var(", _tokens.tokens.fontStyle, ");font-weight:var(", _tokens.tokens.fontWeight, ");letter-spacing:var(", _tokens.tokens.letterSpacing, ");line-height:var(", _tokens.tokens.lineHeight, ");", _tokens.privateTokens.outlineRadius, ":var(", _tokens.tokens.itemBorderRadius, ");border-radius:var(", _tokens.tokens.itemBorderRadius, ");width:100%;height:var(", _tokens.tokens.itemHeight, ");&.", _tokens.classes.selectedTabsItem, "{font-weight:var(", _tokens.tokens.fontWeightSelected, ",var(", _tokens.tokens.fontWeight, "));}", "base");

package/dist/emotion/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js

@@ -27,6 +27,7 @@ const _VerticalTabsstyles = require("./VerticalTabs.styles");
 const _base = require("./variations/_size/base");
 const _base1 = require("./variations/_view/base");
 const _base2 = require("./variations/_disabled/base");
+const _base3 = require("./variations/_pilled/base");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -81,7 +82,7 @@ var Keys = /*#__PURE__*/ function(Keys) {
     return Keys;
 }(Keys || {});
 const verticalTabsRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, outerRef)=>{
-        const { id, disabled = false, clip = 'showAll', dividerAlign = 'left', size, view, children, index, className, orientation, hasDivider = true, ...rest } = props;
+        const { id, disabled = false, clip = 'showAll', dividerAlign = 'left', size, view, children, index, className, orientation, hasDivider = true, pilled = false, ...rest } = props;
         const [firstItemVisible, setFirstItemVisible] = (0, _react.useState)(true);
         const [lastItemVisible, setLastItemVisible] = (0, _react.useState)(false);
         // Триггер доп. скролла при появлении левой стрелки, которая отъедает ширину scroll-контейнера
@@ -89,6 +90,7 @@ const verticalTabsRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, ou
         const refs = (0, _react.useMemo)(()=>new _TabsContext.TabItemRefs(index), []);
         const uniqId = (0, _utils.safeUseId)();
         const tabsId = id || uniqId;
+        const pilledAttr = view !== 'clear' && pilled;
         const scrollRef = (0, _react.useRef)(null);
         const trackRef = (0, _react.useRef)(null);
         const upArrowRef = (0, _react.useRef)(null);
@@ -140,6 +142,7 @@ const verticalTabsRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, ou
             disabled: disabled,
             ref: upArrowRef
         }, /*#__PURE__*/ _react.default.createElement(_Icon.IconDisclosureLeft, {
+            sizeCustomProperty: _tokens.tokens.arrowSize,
             color: "inherit"
         }));
         const NextButton = /*#__PURE__*/ _react.default.createElement(_VerticalTabsstyles.StyledArrow, {
@@ -149,6 +152,7 @@ const verticalTabsRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, ou
             tabIndex: disabled ? -1 : 0,
             disabled: disabled
         }, /*#__PURE__*/ _react.default.createElement(_Icon.IconDisclosureRight, {
+            sizeCustomProperty: _tokens.tokens.arrowSize,
             color: "inherit"
         }));
         const handleScroll = (0, _react.useCallback)((event)=>{
@@ -228,7 +232,9 @@ const verticalTabsRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, ou
             id: tabsId,
             ref: outerRef,
             disabled: disabled,
+            pilled: pilled,
             className: (0, _classnames.default)(className, {
+                [_tokens.classes.tabsPilled]: pilledAttr,
                 [_tokens.classes.tabsNoDivider]: !hasDivider,
                 [_tokens.classes.tabsHasTopArrow]: !firstItemVisible,
                 [_tokens.classes.tabsHasBottomArrow]: !lastItemVisible,
@@ -263,6 +269,9 @@ const verticalTabsConfig = {
         disabled: {
             css: _base2.base,
             attrs: true
+        },
+        pilled: {
+            css: _base3.base
         }
     },
     defaults: {