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

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

@@ -65,13 +65,13 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalIconTabItem.styles__StyledContent",
-    componentId: "sc-8816136-0"
+    componentId: "sc-26248b38-0"
 })([
     `display:inline-block;width:fit-content;`
 ]);
 const ActionContent = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalIconTabItem.styles__ActionContent",
-    componentId: "sc-8816136-1"
+    componentId: "sc-26248b38-1"
 })([
     `display:flex;margin-left:var(`,
     `);`
@@ -86,7 +86,7 @@ const base = (0, _styledcomponents.css)([
     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/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalIconTabItem/variations/_size/base.js

@@ -11,8 +11,9 @@ Object.defineProperty(exports, "base", {
 const _styledcomponents = require("styled-components");
 const _tokens = require("../../../../../tokens");
 const base = (0, _styledcomponents.css)([
-    `--plasma_private-outline-radius:var(`,
+    ``,
+    `:var(`,
     `);border-radius:var(`,
     `);padding:var(`,
     `);`
-], _tokens.tokens.itemBorderRadius, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemPadding);
+], _tokens.privateTokens.outlineRadius, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemPadding);

package/dist/styled-components/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/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js

@@ -74,7 +74,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalTabItem.styles__StyledContent",
-    componentId: "sc-539a351a-0"
+    componentId: "sc-5b292fa4-0"
 })([
     `display:inline-block;width:fit-content;padding:0 var(`,
     `,var(`,
@@ -82,7 +82,7 @@ const StyledContent = _styledcomponents.default.div.withConfig({
 ], _tokens.tokens.itemContentPaddingClear, _tokens.tokens.itemContentPadding);
 const TabItemValue = _styledcomponents.default.span.withConfig({
     displayName: "HorizontalTabItem.styles__TabItemValue",
-    componentId: "sc-539a351a-1"
+    componentId: "sc-5b292fa4-1"
 })([
     `color:var(`,
     `);font-family:var(`,
@@ -101,19 +101,19 @@ const TabItemValue = _styledcomponents.default.span.withConfig({
 ], _tokens.tokens.itemValueColor, _tokens.tokens.valueFontFamily, _tokens.tokens.fontFamily, _tokens.tokens.valueFontSize, _tokens.tokens.fontSize, _tokens.tokens.valueFontStyle, _tokens.tokens.fontStyle, _tokens.tokens.valueFontWeight, _tokens.tokens.fontWeight, _tokens.tokens.valueLetterSpacing, _tokens.tokens.letterSpacing, _tokens.tokens.valueLineHeight, _tokens.tokens.lineHeight);
 const RightContent = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalTabItem.styles__RightContent",
-    componentId: "sc-539a351a-2"
+    componentId: "sc-5b292fa4-2"
 })([
     `display:flex;color:inherit;&:hover{color:inherit;}`
 ]);
 const LeftContent = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalTabItem.styles__LeftContent",
-    componentId: "sc-539a351a-3"
+    componentId: "sc-5b292fa4-3"
 })([
     `display:flex;color:inherit;&:hover{color:inherit;}`
 ]);
 const ActionContent = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalTabItem.styles__ActionContent",
-    componentId: "sc-539a351a-4"
+    componentId: "sc-5b292fa4-4"
 })([
     `display:flex;margin-left:var(`,
     `);`
@@ -133,7 +133,7 @@ const base = (0, _styledcomponents.css)([
     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/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_pilled/base.js

@@ -12,8 +12,9 @@ const _styledcomponents = require("styled-components");
 const _tokens = require("../../../../../tokens");
 const base = (0, _styledcomponents.css)([
     `&.`,
-    `{--plasma_private-outline-radius:var(`,
+    `{`,
+    `:var(`,
     `);border-radius:var(`,
     `);padding:var(`,
     `);}`
-], _tokens.classes.tabsPilled, _tokens.tokens.itemPilledBorderRadius, _tokens.tokens.itemPilledBorderRadius, _tokens.tokens.itemPaddingPilled);
+], _tokens.classes.tabsPilled, _tokens.privateTokens.outlineRadius, _tokens.tokens.itemPilledBorderRadius, _tokens.tokens.itemPilledBorderRadius, _tokens.tokens.itemPaddingPilled);

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

@@ -17,9 +17,13 @@ const base = (0, _styledcomponents.css)([
     `);font-weight:var(`,
     `);letter-spacing:var(`,
     `);line-height:var(`,
-    `);--plasma_private-outline-radius:var(`,
+    `);`,
+    `:var(`,
     `);border-radius:var(`,
     `);width:var(`,
     `);height:var(`,
-    `);`
-], _tokens.tokens.fontFamily, _tokens.tokens.fontSize, _tokens.tokens.fontStyle, _tokens.tokens.fontWeight, _tokens.tokens.letterSpacing, _tokens.tokens.lineHeight, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemWidth, _tokens.tokens.itemHeight);
+    `);&.`,
+    `{font-weight:var(`,
+    `,var(`,
+    `));}`
+], _tokens.tokens.fontFamily, _tokens.tokens.fontSize, _tokens.tokens.fontStyle, _tokens.tokens.fontWeight, _tokens.tokens.letterSpacing, _tokens.tokens.lineHeight, _tokens.privateTokens.outlineRadius, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemWidth, _tokens.tokens.itemHeight, _tokens.classes.selectedTabsItem, _tokens.tokens.fontWeightSelected, _tokens.tokens.fontWeight);

package/dist/styled-components/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/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.styles.js

@@ -67,17 +67,18 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const base = (0, _styledcomponents.css)([
-    `display:flex;gap:0.125rem;align-items:center;position:relative;`
-]);
+    `display:flex;gap:0.125rem;align-items:center;position:relative;padding:var(`,
+    `,0);`
+], _tokens.tokens.tabsPadding);
 const StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalTabs.styles__StyledContent",
-    componentId: "sc-4eb753d2-0"
+    componentId: "sc-504d34f0-0"
 })([
     `display:inline-flex;flex-direction:row;align-items:center;`
 ]);
 const StyledContentWrapper = _styledcomponents.default.div.withConfig({
     displayName: "HorizontalTabs.styles__StyledContentWrapper",
-    componentId: "sc-4eb753d2-1"
+    componentId: "sc-504d34f0-1"
 })([
     `box-sizing:content-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.`,
     `{overflow:scroll;scrollbar-width:none;::-webkit-scrollbar{display:none;}}&.`,
@@ -85,19 +86,22 @@ const StyledContentWrapper = _styledcomponents.default.div.withConfig({
 ], _tokens.classes.tabsClipScroll, _tokens.classes.tabsClipShowAll);
 const StyledArrow = _styledcomponents.default.button.withConfig({
     displayName: "HorizontalTabs.styles__StyledArrow",
-    componentId: "sc-4eb753d2-2"
+    componentId: "sc-504d34f0-2"
 })([
-    `display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;`,
-    `;&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:`,
-    `;padding-right:`,
-    `;padding-left:`,
-    `;color:var(`,
-    `);&:hover{color:var(`,
+    `display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;color:var(`,
+    `);margin-right:`,
+    `;margin-left:`,
+    `;`,
+    `:var(`,
+    `,inherit);`,
+    `:`,
+    `;`,
+    `;&[disabled]{cursor:not-allowed;}&:hover{color:var(`,
     `);}&:active{color:var(`,
     `);}`
-], (0, _mixins.addFocus)({
+], _tokens.tokens.arrowColor, ({ isLeftArrow })=>isLeftArrow ? `var(${_tokens.tokens.arrowInnerPadding})` : `var(${_tokens.privateTokens.outerPadding})`, ({ isLeftArrow })=>isLeftArrow ? `var(${_tokens.privateTokens.outerPadding})` : `var(${_tokens.tokens.arrowInnerPadding})`, _tokens.privateTokens.outlineRadius, _tokens.tokens.arrowBorderRadius, _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)'
-}), ({ isFilled })=>isFilled ? `var(${_tokens.tokens.arrowOuterPadding})` : '', ({ isLeftArrow })=>isLeftArrow ? `var(${_tokens.tokens.arrowInnerPadding})` : 'var(--plasma_private-outer-padding)', ({ isLeftArrow })=>isLeftArrow ? 'var(--plasma_private-outer-padding)' : `var(${_tokens.tokens.arrowInnerPadding})`, _tokens.tokens.arrowColor, _tokens.tokens.arrowColorHover, _tokens.tokens.arrowColorActive);
+    outlineRadius: `calc(var(${_tokens.privateTokens.outlineRadius}) - 0.063rem)`
+}), _tokens.tokens.arrowColorHover, _tokens.tokens.arrowColorActive);

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

@@ -12,7 +12,8 @@ const _styledcomponents = require("styled-components");
 const _tokens = require("../../../../../tokens");
 const base = (0, _styledcomponents.css)([
     `&.`,
-    `{--plasma_private-outline-radius:var(`,
+    `{`,
+    `:var(`,
     `);border-radius:var(`,
     `);}`
-], _tokens.classes.tabsPilled, _tokens.tokens.tabsPilledBorderRadius, _tokens.tokens.tabsPilledBorderRadius);
+], _tokens.classes.tabsPilled, _tokens.privateTokens.outlineRadius, _tokens.tokens.tabsPilledBorderRadius, _tokens.tokens.tabsPilledBorderRadius);

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

@@ -13,7 +13,8 @@ const _tokens = require("../../../../../tokens");
 const base = (0, _styledcomponents.css)([
     `width:var(`,
     `);height:var(`,
-    `);--plasma_private-outline-radius:var(`,
+    `);`,
+    `:var(`,
     `);border-radius:var(`,
     `);`
-], _tokens.tokens.tabsWidth, _tokens.tokens.tabsHeight, _tokens.tokens.tabsBorderRadius, _tokens.tokens.tabsBorderRadius);
+], _tokens.tokens.tabsWidth, _tokens.tokens.tabsHeight, _tokens.privateTokens.outlineRadius, _tokens.tokens.tabsBorderRadius, _tokens.tokens.tabsBorderRadius);

package/dist/styled-components/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/styled-components/cjs/components/Tabs/ui/vertical/VerticalIconTabItem/VerticalIconTabItem.styles.js

@@ -65,13 +65,13 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalIconTabItem.styles__StyledContent",
-    componentId: "sc-962c5ccb-0"
+    componentId: "sc-ef318f6d-0"
 })([
     `display:inline-block;width:fit-content;`
 ]);
 const ActionContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalIconTabItem.styles__ActionContent",
-    componentId: "sc-962c5ccb-1"
+    componentId: "sc-ef318f6d-1"
 })([
     `display:flex;margin-left:var(`,
     `);`
@@ -86,7 +86,7 @@ const base = (0, _styledcomponents.css)([
     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/styled-components/cjs/components/Tabs/ui/vertical/VerticalIconTabItem/variations/_size/base.js

@@ -11,8 +11,9 @@ Object.defineProperty(exports, "base", {
 const _styledcomponents = require("styled-components");
 const _tokens = require("../../../../../tokens");
 const base = (0, _styledcomponents.css)([
-    `--plasma_private-outline-radius:var(`,
+    ``,
+    `:var(`,
     `);border-radius:var(`,
     `);padding:var(`,
     `);`
-], _tokens.tokens.itemBorderRadius, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemPaddingOrientationVertical);
+], _tokens.privateTokens.outlineRadius, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemPaddingOrientationVertical);

package/dist/styled-components/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/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js

@@ -74,7 +74,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalTabItem.styles__StyledContent",
-    componentId: "sc-276e9ba8-0"
+    componentId: "sc-cd7168be-0"
 })([
     `display:inline-block;width:fit-content;padding:0 var(`,
     `,var(`,
@@ -82,7 +82,7 @@ const StyledContent = _styledcomponents.default.div.withConfig({
 ], _tokens.tokens.itemContentPaddingClear, _tokens.tokens.itemContentPadding);
 const TabItemValue = _styledcomponents.default.span.withConfig({
     displayName: "VerticalTabItem.styles__TabItemValue",
-    componentId: "sc-276e9ba8-1"
+    componentId: "sc-cd7168be-1"
 })([
     `white-space:nowrap;color:var(`,
     `);font-family:var(`,
@@ -101,19 +101,19 @@ const TabItemValue = _styledcomponents.default.span.withConfig({
 ], _tokens.tokens.itemValueColor, _tokens.tokens.valueFontFamily, _tokens.tokens.fontFamily, _tokens.tokens.valueFontSize, _tokens.tokens.fontSize, _tokens.tokens.valueFontStyle, _tokens.tokens.fontStyle, _tokens.tokens.valueFontWeight, _tokens.tokens.fontWeight, _tokens.tokens.valueLetterSpacing, _tokens.tokens.letterSpacing, _tokens.tokens.valueLineHeight, _tokens.tokens.lineHeight);
 const RightContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalTabItem.styles__RightContent",
-    componentId: "sc-276e9ba8-2"
+    componentId: "sc-cd7168be-2"
 })([
     `display:flex;color:inherit;&:hover{color:inherit;}`
 ]);
 const LeftContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalTabItem.styles__LeftContent",
-    componentId: "sc-276e9ba8-3"
+    componentId: "sc-cd7168be-3"
 })([
     `display:flex;color:inherit;&:hover{color:inherit;}`
 ]);
 const ActionContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalTabItem.styles__ActionContent",
-    componentId: "sc-276e9ba8-4"
+    componentId: "sc-cd7168be-4"
 })([
     `display:flex;margin-left:var(`,
     `);`
@@ -132,7 +132,7 @@ const base = (0, _styledcomponents.css)([
     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/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_pilled/base.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "base", {
+    enumerable: true,
+    get: function() {
+        return base;
+    }
+});
+const _styledcomponents = require("styled-components");
+const _tokens = require("../../../../../tokens");
+const base = (0, _styledcomponents.css)([
+    `&.`,
+    `{`,
+    `:var(`,
+    `);border-radius:var(`,
+    `);padding:var(`,
+    `,var(`,
+    `));}`
+], _tokens.classes.tabsPilled, _tokens.privateTokens.outlineRadius, _tokens.tokens.itemPilledBorderRadius, _tokens.tokens.itemPilledBorderRadius, _tokens.tokens.itemPaddingPilled, _tokens.tokens.itemPaddingOrientationVertical);

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

@@ -17,8 +17,12 @@ const base = (0, _styledcomponents.css)([
     `);font-weight:var(`,
     `);letter-spacing:var(`,
     `);line-height:var(`,
-    `);--plasma_private-outline-radius:var(`,
+    `);`,
+    `:var(`,
     `);border-radius:var(`,
     `);width:100%;height:var(`,
-    `);`
-], _tokens.tokens.fontFamily, _tokens.tokens.fontSize, _tokens.tokens.fontStyle, _tokens.tokens.fontWeight, _tokens.tokens.letterSpacing, _tokens.tokens.lineHeight, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemHeight);
+    `);&.`,
+    `{font-weight:var(`,
+    `,var(`,
+    `));}`
+], _tokens.tokens.fontFamily, _tokens.tokens.fontSize, _tokens.tokens.fontStyle, _tokens.tokens.fontWeight, _tokens.tokens.letterSpacing, _tokens.tokens.lineHeight, _tokens.privateTokens.outlineRadius, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemHeight, _tokens.classes.selectedTabsItem, _tokens.tokens.fontWeightSelected, _tokens.tokens.fontWeight);

package/dist/styled-components/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: {

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

@@ -67,17 +67,18 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const base = (0, _styledcomponents.css)([
-    `position:relative;display:flex;flex-direction:column;gap:0.125rem;align-items:center;`
-]);
+    `position:relative;display:flex;flex-direction:column;gap:0.125rem;align-items:center;padding:var(`,
+    `,0);`
+], _tokens.tokens.tabsPadding);
 const StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "VerticalTabs.styles__StyledContent",
-    componentId: "sc-b42f65d2-0"
+    componentId: "sc-4ccc4fa5-0"
 })([
     `display:inline-flex;flex-direction:column;align-items:flex-start;`
 ]);
 const StyledContentWrapper = _styledcomponents.default.div.withConfig({
     displayName: "VerticalTabs.styles__StyledContentWrapper",
-    componentId: "sc-b42f65d2-1"
+    componentId: "sc-4ccc4fa5-1"
 })([
     `box-sizing:border-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.`,
     `{overflow:scroll;scrollbar-width:none;::-webkit-scrollbar{display:none;}`,
@@ -86,16 +87,18 @@ const StyledContentWrapper = _styledcomponents.default.div.withConfig({
 ], _tokens.classes.tabsClipScroll, StyledContent, _tokens.classes.tabsClipShowAll);
 const StyledArrow = _styledcomponents.default.button.withConfig({
     displayName: "VerticalTabs.styles__StyledArrow",
-    componentId: "sc-b42f65d2-2"
+    componentId: "sc-4ccc4fa5-2"
 })([
-    `display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;transform:rotate(90deg);`,
-    `;&[disabled]{cursor:not-allowed;}color:var(`,
-    `);&:hover{color:var(`,
+    `display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;transform:rotate(90deg);color:var(`,
+    `);`,
+    `:var(`,
+    `,inherit);`,
+    `;&[disabled]{cursor:not-allowed;}&:hover{color:var(`,
     `);}&:active{color:var(`,
     `);}`
-], (0, _mixins.addFocus)({
+], _tokens.tokens.arrowColor, _tokens.privateTokens.outlineRadius, _tokens.tokens.arrowBorderRadius, (0, _mixins.addFocus)({
     outlineSize: '0.063rem',
     outlineOffset: '0',
     outlineColor: `var(${_tokens.tokens.outlineFocusColor})`,
-    outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)'
-}), _tokens.tokens.arrowColor, _tokens.tokens.arrowColorHover, _tokens.tokens.arrowColorActive);
+    outlineRadius: `calc(var(${_tokens.privateTokens.outlineRadius}) - 0.063rem)`
+}), _tokens.tokens.arrowColorHover, _tokens.tokens.arrowColorActive);