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

package/dist/emotion/es/components/Slider/components/Single/Single.styles.js

@@ -3,43 +3,43 @@ import { classes, tokens } from "../../Slider.tokens";
 import { Label, LabelWrapper, BaseSliderContainer, BaseStyledTrack, BaseStyledRange } from "../SliderBase/SliderBase.styles";
 export { Label, LabelWrapper };
 export const LabelContent = /*#__PURE__*/ styled("div", {
-    target: "eqs1aq20",
+    target: "eqpq01o0",
     label: "LabelContent"
 })("display:inline-flex;");
 export const StyledRangeValue = /*#__PURE__*/ styled("span", {
-    target: "eqs1aq21",
+    target: "eqpq01o1",
     label: "StyledRangeValue"
 })("grid-area:b;color:var(", tokens.rangeValueColor, ");font-family:var(", tokens.valueFontFamily, ");font-size:var(", tokens.valueFontSize, ");font-style:var(", tokens.valueFontStyle, ");font-weight:var(", tokens.valueFontWeight, ");letter-spacing:var(", tokens.valueLetterSpacing, ");line-height:var(", tokens.valueLineHeight, ");transition:opacity 0.1s ease-in-out;&.", classes.hideMinValue, ",&.", classes.hideMaxValue, "{opacity:0;}&.", classes.activeRangeValue, "{color:var(", tokens.labelColor, ");}&.", classes.maxRangeValue, "{grid-area:c;}");
 export const SliderContainer = /*#__PURE__*/ styled(BaseSliderContainer, {
-    target: "eqs1aq22",
+    target: "eqpq01o2",
     label: "SliderContainer"
 })("grid-area:a;flex:1;z-index:1;&.", classes.reversed, "{transform:scaleX(-1);}&.", classes.verticalOrientation, "{width:var(", tokens.size, ");height:100%;transform:scaleY(-1);container-type:size;&.", classes.reversed, "{transform:none;}}");
 export const StyledTrack = /*#__PURE__*/ styled(BaseStyledTrack, {
-    target: "eqs1aq23",
+    target: "eqpq01o3",
     label: "StyledTrack"
 })(".", classes.verticalOrientation, " &{top:0;bottom:0;left:50%;right:auto;transform:translateX(-50%);width:var(", tokens.railThickness, ");height:auto;}");
 export const StyledProgress = /*#__PURE__*/ styled("div", {
-    target: "eqs1aq24",
+    target: "eqpq01o4",
     label: "StyledProgress"
 })("position:absolute;top:50%;left:0;transform:translateY(-50%);height:var(", tokens.railThickness, ");border-radius:var(", tokens.railBorderRadius, ");background:var(", tokens.fillColor, ");pointer-events:none;.", classes.verticalOrientation, " &{bottom:0;left:50%;top:auto;transform:translateX(-50%);width:var(", tokens.railThickness, ");height:0;}");
 export const TrackSegment = /*#__PURE__*/ styled("div", {
-    target: "eqs1aq25",
+    target: "eqpq01o5",
     label: "TrackSegment"
 })("position:absolute;top:50%;right:auto;transform:translateY(-50%);height:var(", tokens.railThickness, ");border-radius:var(", tokens.trackSegmentBorderRadius, ");background-color:var(", tokens.railBackgroundColor, ");pointer-events:none;.", classes.verticalOrientation, " &{top:auto;bottom:auto;left:50%;transform:translateX(-50%);width:var(", tokens.railThickness, ");height:auto;}");
 export const ProgressSegment = /*#__PURE__*/ styled(TrackSegment, {
-    target: "eqs1aq26",
+    target: "eqpq01o6",
     label: "ProgressSegment"
 })("background-color:var(", tokens.fillColor, ");");
 export const StyledCurrentValue = /*#__PURE__*/ styled("span", {
-    target: "eqs1aq27",
+    target: "eqpq01o7",
     label: "StyledCurrentValue"
 })("position:absolute;top:var(", tokens.currentValueTopOffset, ");transform:translateX(-50%);pointer-events:none;white-space:nowrap;z-index:2;font-family:var(", tokens.valueFontFamily, ");font-size:var(", tokens.valueFontSize, ");font-style:var(", tokens.valueFontStyle, ");font-weight:var(", tokens.valueFontWeight, ");letter-spacing:var(", tokens.valueLetterSpacing, ");line-height:var(", tokens.valueLineHeight, ");color:var(", tokens.rangeValueColor, ");.", classes.reversed, " &{transform:translateX(-50%) scaleX(-1);}.", classes.verticalOrientation, " &{top:auto;left:var(", tokens.currentValueTopOffset, ");transform:translateY(-50%) scaleY(-1);}.", classes.labelAlignLeft, " .", classes.verticalOrientation, " &{left:unset;right:var(", tokens.currentValueTopOffset, ");}.", classes.verticalOrientation, ".", classes.reversed, " &{transform:translateY(-50%);}.", classes.valuePlacementTop, " &{top:auto;bottom:var(", tokens.currentValueTopOffset, ");}.", classes.valuePlacementBottom, " &{top:var(", tokens.currentValueTopOffset, ");bottom:auto;}.", classes.verticalOrientation, ".", classes.valuePlacementRight, " &{left:var(", tokens.currentValueTopOffset, ");right:auto;}.", classes.verticalOrientation, ".", classes.valuePlacementLeft, " &{left:auto;right:var(", tokens.currentValueTopOffset, ");}.", classes.valuePlacementNone, " &{display:none;}");
 export const ScaleTick = /*#__PURE__*/ styled("div", {
-    target: "eqs1aq28",
+    target: "eqpq01o8",
     label: "ScaleTick"
 })("position:absolute;width:0;overflow:visible;font-family:var(", tokens.valueFontFamily, ");font-size:var(", tokens.valueFontSize, ");font-style:var(", tokens.valueFontStyle, ");font-weight:var(", tokens.valueFontWeight, ");letter-spacing:var(", tokens.valueLetterSpacing, ");line-height:var(", tokens.valueLineHeight, ");");
 export const ScaleTickLabel = /*#__PURE__*/ styled("span", {
-    target: "eqs1aq29",
+    target: "eqpq01o9",
     label: "ScaleTickLabel"
 })("position:absolute;white-space:nowrap;cursor:pointer;color:var(", tokens.rangeValueColor, ");top:", ({ isVertical, scaleAlign })=>{
     if (isVertical) {
@@ -83,7 +83,7 @@ export const ScaleTickLabel = /*#__PURE__*/ styled("span", {
     return 'translateX(-50%)';
 }, ";");
 export const ScaleTickDot = /*#__PURE__*/ styled("span", {
-    target: "eqs1aq210",
+    target: "eqpq01o10",
     label: "ScaleTickDot"
 })("position:absolute;z-index:0;top:", ({ isVertical, scaleAlign })=>{
     if (isVertical) {
@@ -103,7 +103,7 @@ export const ScaleTickDot = /*#__PURE__*/ styled("span", {
     return '0';
 }, ";transform:translate(-50%,-50%);border-radius:50%;display:block;width:var(", tokens.tickSize, ");height:var(", tokens.tickSize, ");background-color:", ({ filled })=>filled ? `var(${tokens.tickDotFilledColor})` : `var(${tokens.tickDotColor})`, ";");
 export const TickSeparator = /*#__PURE__*/ styled("span", {
-    target: "eqs1aq211",
+    target: "eqpq01o11",
     label: "TickSeparator"
 })("position:absolute;z-index:0;pointer-events:none;top:", ({ isVertical, scaleAlign })=>{
     if (isVertical) {
@@ -123,19 +123,19 @@ export const TickSeparator = /*#__PURE__*/ styled("span", {
     return '0';
 }, ";transform:translate(-50%,-50%);display:block;border-radius:var(", tokens.tickSeparatorBorderRadius, ");width:var(", tokens.tickSeparatorWidth, ");height:var(", tokens.tickSeparatorHeight, ");.", classes.verticalOrientation, " &{width:var(", tokens.tickSeparatorHeight, ");height:var(", tokens.tickSeparatorWidth, ");}background-color:", ({ filled })=>filled ? `var(${tokens.tickDotFilledColor})` : `var(${tokens.tickDotColor})`, ";");
 export const ScaleTicksWrapper = /*#__PURE__*/ styled("datalist", {
-    target: "eqs1aq212",
+    target: "eqpq01o12",
     label: "ScaleTicksWrapper"
 })("position:relative;display:block;grid-column-start:", ({ isVertical })=>isVertical ? 'b' : 'b', ";grid-column-end:", ({ isVertical })=>isVertical ? 'b' : 'c', ";grid-row-start:", ({ isVertical })=>isVertical ? 'b' : 'b', ";grid-row-end:", ({ isVertical })=>isVertical ? 'c' : 'b', ";");
 export const StyledRange = /*#__PURE__*/ styled(BaseStyledRange, {
-    target: "eqs1aq213",
+    target: "eqpq01o13",
     label: "StyledRange"
-})("position:relative;z-index:1;&::-webkit-slider-thumb{pointer-events:", ({ showPointer })=>showPointer === false ? 'none' : 'auto', ";}.", classes.verticalOrientation, " &{position:absolute;width:calc(100cqh + var(", tokens.thumbSize, ",0rem));height:var(", tokens.size, ");top:calc(50% - var(", tokens.size, ") / 2);left:calc(50% - (100cqh + var(", tokens.thumbSize, ",0rem)) / 2);margin-left:0;transform:rotate(-90deg);}");
+})("position:relative;z-index:1;&::-webkit-slider-thumb{pointer-events:", ({ showPointer })=>showPointer === false ? 'none' : 'auto', ";}.", classes.verticalOrientation, " &{position:absolute;width:calc(100cqh + var(", tokens.thumbWidth, ",0rem));height:var(", tokens.size, ");top:calc(50% - var(", tokens.size, ") / 2);left:calc(50% - (100cqh + var(", tokens.thumbWidth, ",0rem)) / 2);margin-left:0;transform:rotate(-90deg);}");
 export const SliderBaseWrapper = /*#__PURE__*/ styled("div", {
-    target: "eqs1aq214",
+    target: "eqpq01o14",
     label: "SliderBaseWrapper"
 })("display:flex;flex:1;position:relative;&:has(", StyledRange, ":disabled) ", ScaleTicksWrapper, " ", ScaleTickLabel, "{cursor:not-allowed;}&:has(.", classes.valuePlacementTop, "){padding-top:var(", tokens.currentValueTopOffset, ");}&.", classes.rangeValuesPlacementOuter, "{display:grid;grid-template-areas:'a a'\n            'b c';", StyledRangeValue, "{width:fit-content;&.", classes.maxRangeValue, "{justify-self:end;}}&.", classes.scalePlacementTop, "{grid-template-areas:'b c'\n                'a a';padding-top:var(", tokens.valueLineHeight, ");}}&.", classes.rangeValuesPlacementInner, "{align-items:center;", StyledRangeValue, "{margin-right:var(", tokens.rangeValueHorizontalMargin, ");&.", classes.maxRangeValue, "{margin-right:0;margin-left:var(", tokens.rangeValueHorizontalMargin, ");}}}");
 export const SingleWrapper = /*#__PURE__*/ styled("div", {
-    target: "eqs1aq215",
+    target: "eqpq01o15",
     label: "SingleWrapper"
 })("display:flex;width:100%;opacity:var(", tokens.disabledOpacity, ");&.", classes.labelPlacementOuter, "{flex-direction:column;", LabelWrapper, "{margin-bottom:var(", tokens.labelWrapperMarginBottom, ");}&.", classes.scalePlacementTop, "{", LabelWrapper, "{margin-bottom:var(", tokens.valueLineHeight, ");}}}&.", classes.labelPlacementInner, "{align-items:flex-start;", LabelWrapper, "{margin-right:var(", tokens.labelWrapperMarginRight, ");}", LabelWrapper, ":not(:has(", Label, ")):has(", LabelContent, "){margin-right:var(", tokens.labelWrapperOnlyIconMarginRight, ");}", LabelWrapper, ":has(", Label, "){margin-right:var(", tokens.labelWrapperMarginRight, ");}}&.", classes.verticalOrientation, "{flex-direction:column;align-items:center;width:fit-content;&.", classes.labelAlignCenter, "{", LabelWrapper, "{flex-direction:column-reverse;}&.", classes.labelPlacementBottom, "{", LabelWrapper, "{flex-direction:column;}&.", classes.labelContentReversed, "{", LabelWrapper, "{flex-direction:column-reverse;}}}&.", classes.labelContentReversed, "{", LabelWrapper, "{flex-direction:column;}}}", LabelWrapper, "{align-items:center;}", SliderBaseWrapper, "{width:var(", tokens.size, ");}&.", classes.labelPlacementInner, "{", LabelWrapper, "{margin-right:0;margin-bottom:var(", tokens.labelWrapperVerticalMargin, ");}}&.", classes.labelAlignLeft, "{align-items:flex-end;", LabelWrapper, "{flex-direction:row-reverse;}}&.", classes.labelAlignRight, "{align-items:flex-start;}&.", classes.labelPlacementBottom, "{flex-direction:column-reverse;", LabelWrapper, "{margin-top:var(", tokens.labelWrapperVerticalMargin, ");margin-right:0;margin-bottom:0;}}}&.", classes.verticalOrientation, "{flex-direction:column;align-items:center;justify-content:center;", SliderBaseWrapper, "{display:grid;grid-template-areas:", ({ hasTicks })=>hasTicks ? `'a b'
                 'a c'` : `'b'

package/dist/emotion/es/components/Slider/components/SliderBase/SliderBase.styles.js

@@ -1,32 +1,45 @@
 import styled from "@emotion/styled";
+import { applySliderThumb, applySliderThumbFocus } from "../../../../mixins";
 import { tokens } from "../../Slider.tokens";
+const thumbTokens = {
+    width: tokens.thumbWidth,
+    height: tokens.thumbHeight,
+    borderRadius: tokens.thumbBorderRadius,
+    borderWidth: tokens.thumbBorderWidth,
+    borderColor: tokens.thumbBorderColor,
+    focusBorderColor: tokens.thumbFocusBorderColor,
+    background: tokens.thumbBackgroundColor,
+    innerContent: tokens.thumbInnerContent
+};
+const thumb = applySliderThumb(thumbTokens);
+const thumbFocused = applySliderThumbFocus(thumbTokens);
 /**
  * Подпись слайдера
  */ export const Label = /*#__PURE__*/ styled("label", {
-    target: "e4cidsi0",
+    target: "evk726k0",
     label: "Label"
 })("font-family:var(", tokens.labelFontFamily, ");font-size:var(", tokens.labelFontSize, ");font-style:var(", tokens.labelFontStyle, ");font-weight:var(", tokens.labelFontWeight, ");letter-spacing:var(", tokens.labelLetterSpacing, ");line-height:var(", tokens.labelLineHeight, ");");
 /**
  * Обёртка вокруг иконки и подписи
  */ export const LabelWrapper = /*#__PURE__*/ styled("div", {
-    target: "e4cidsi1",
+    target: "evk726k1",
     label: "LabelWrapper"
 })("color:var(", tokens.labelColor, ");display:flex;align-items:center;gap:var(", tokens.labelWrapperGap, ");");
 /**
  * Базовый контейнер слайдера
  */ export const BaseSliderContainer = /*#__PURE__*/ styled("div", {
-    target: "e4cidsi2",
+    target: "evk726k2",
     label: "BaseSliderContainer"
 })("position:relative;display:grid;align-items:center;height:var(", tokens.size, ");");
 /**
  * Рельс (неактивная часть дорожки)
  */ export const BaseStyledTrack = /*#__PURE__*/ styled("div", {
-    target: "e4cidsi3",
+    target: "evk726k3",
     label: "BaseStyledTrack"
 })("position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);height:var(", tokens.railThickness, ");border-radius:var(", tokens.railBorderRadius, ");background-color:var(", tokens.railBackgroundColor, ");pointer-events:none;");
 /**
  * Нативный range-input
  */ export const BaseStyledRange = /*#__PURE__*/ styled("input", {
-    target: "e4cidsi4",
+    target: "evk726k4",
     label: "BaseStyledRange"
-})("appearance:none;outline:none;background:transparent;border:none;width:calc(100% + var(", tokens.thumbSize, ",0rem));height:var(", tokens.size, ");margin:0;margin-left:calc(var(", tokens.thumbSize, ",0rem) / -2);cursor:pointer;&:disabled{cursor:not-allowed;}&::-webkit-slider-runnable-track{background:transparent;}&::-webkit-slider-thumb{-webkit-appearance:none;outline:none;width:var(", tokens.thumbSize, ");height:var(", tokens.thumbHeight, ",var(", tokens.thumbSize, "));border-radius:var(", tokens.thumbBorderRadius, ",50%);cursor:grab;border-style:var(", tokens.thumbBorderStyle, ",solid);border-color:transparent;border-width:var(", tokens.thumbBorderWidth, ",0.0625rem);background:none no-repeat center,linear-gradient(var(", tokens.thumbBackgroundColor, "),var(", tokens.thumbBackgroundColor, ")) padding-box,var(", tokens.thumbBorderColor, ") border-box;transition:background-color 0.1s ease-in-out,background-image 0.1s ease-in-out;opacity:", ({ showPointer })=>showPointer === false ? '0' : '1', ";}&:not(:disabled)::-webkit-slider-thumb:hover,&:not(:disabled)::-webkit-slider-thumb:active,&:focus-visible::-webkit-slider-thumb{background:var(", tokens.thumbInnerContent, ",none) no-repeat center,linear-gradient(var(", tokens.thumbBackgroundColor, "),var(", tokens.thumbBackgroundColor, ")) padding-box,var(", tokens.thumbFocusBorderColor, ") border-box;}&::-webkit-slider-thumb:active{cursor:grabbing;}&::-moz-range-track{background:transparent;height:var(", tokens.railThickness, ");}&::-moz-range-progress{background:transparent;}&::-moz-range-thumb{width:var(", tokens.thumbSize, ");height:var(", tokens.thumbHeight, ",var(", tokens.thumbSize, "));border-radius:var(", tokens.thumbBorderRadius, ",50%);cursor:grab;border-style:var(", tokens.thumbBorderStyle, ",solid);border-color:transparent;border-width:var(", tokens.thumbBorderWidth, ",0.0625rem);background:none no-repeat center,linear-gradient(var(", tokens.thumbBackgroundColor, "),var(", tokens.thumbBackgroundColor, ")) padding-box,var(", tokens.thumbBorderColor, ") border-box;transition:background-color 0.1s ease-in-out,background-image 0.1s ease-in-out;opacity:", ({ showPointer })=>showPointer === false ? '0' : '1', ";}&:not(:disabled)::-moz-range-thumb:hover,&:not(:disabled)::-moz-range-thumb:active{background:var(", tokens.thumbInnerContent, ",none) no-repeat center,linear-gradient(var(", tokens.thumbBackgroundColor, "),var(", tokens.thumbBackgroundColor, ")) padding-box,var(", tokens.thumbFocusBorderColor, ") border-box;}&::-moz-range-thumb:active{cursor:grabbing;}&:disabled{&::-webkit-slider-thumb{cursor:not-allowed;}&::-webkit-slider-thumb:active{cursor:not-allowed;}&::-moz-range-thumb{cursor:not-allowed;}&::-moz-range-thumb:active{cursor:not-allowed;}}");
+})("appearance:none;outline:none;background:transparent;border:none;width:calc(100% + var(", tokens.thumbWidth, ",0rem));height:var(", tokens.size, ");margin:0;margin-left:calc(var(", tokens.thumbWidth, ",0rem) / -2);cursor:pointer;&:disabled{cursor:not-allowed;}&::-webkit-slider-runnable-track{background:transparent;}&::-webkit-slider-thumb{-webkit-appearance:none;outline:none;", thumb, "        opacity:", ({ showPointer })=>showPointer === false ? '0' : '1', ";}&:not(:disabled)::-webkit-slider-thumb:hover,&:not(:disabled)::-webkit-slider-thumb:active,&:focus-visible::-webkit-slider-thumb{", thumbFocused, "}&::-webkit-slider-thumb:active{cursor:grabbing;}&::-moz-range-track{background:transparent;height:var(", tokens.railThickness, ");}&::-moz-range-progress{background:transparent;}&::-moz-range-thumb{", thumb, "        opacity:", ({ showPointer })=>showPointer === false ? '0' : '1', ";}&:not(:disabled)::-moz-range-thumb:hover,&:not(:disabled)::-moz-range-thumb:active{", thumbFocused, "}&::-moz-range-thumb:active{cursor:grabbing;}&:disabled{&::-webkit-slider-thumb{cursor:not-allowed;}&::-webkit-slider-thumb:active{cursor:not-allowed;}&::-moz-range-thumb{cursor:not-allowed;}&::-moz-range-thumb:active{cursor:not-allowed;}}");

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useLayoutEffect } from "react";
-export const useTabItem = ({ refs, innerRef, itemIndex, selected, orientation, disabled, onIndexChange, onClick })=>{
+export 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 = useCallback((event)=>{
@@ -52,7 +52,7 @@ export const useTabItem = ({ refs, innerRef, itemIndex, selected, orientation, d
         refs
     ]);
     useLayoutEffect(()=>{
-        if (!selected || !innerRef.current) {
+        if (!selected || disableScroll || !innerRef.current) {
             return;
         }
         const scrollEl = innerRef.current.parentElement?.parentElement;
@@ -71,6 +71,7 @@ export const useTabItem = ({ refs, innerRef, itemIndex, selected, orientation, d
         });
     }, [
         selected,
+        disableScroll,
         orientation
     ]);
     return {

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

@@ -18,6 +18,10 @@ export const classes = {
     tabsTruncate: 'tabs-truncate',
     dividerAlignRight: 'divider-align-right'
 };
+export const privateTokens = {
+    outlineRadius: '--plasma_private-outline-radius',
+    outerPadding: '--plasma_private-outer-padding'
+};
 export const tokens = {
     disabledOpacity: '--plasma-tabs-disabled-opacity',
     containerWidth: '--plasma-tabs-container-width',
@@ -46,6 +50,7 @@ export 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',
@@ -60,6 +65,8 @@ export 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/es/components/Tabs/ui/horizontal/HorizontalIconTabItem/HorizontalIconTabItem.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef, useContext } from "react";
 import { useForkRef } from "../../../../../hooks";
-import { cx } from "../../../../../utils";
+import cls from "classnames";
 import { TabsContext } from "../../..";
 import { classes } from "../../../tokens";
 import { useTabItem } from "../../../hooks/useTabItem";
@@ -9,7 +9,7 @@ import { base as sizeCSS } from "./variations/_size/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
 import { ActionContent, StyledContent, base } from "./HorizontalIconTabItem.styles";
 export const horizontalIconTabItemRoot = (Root)=>/*#__PURE__*/ 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 = useRef(null);
         const ref = useForkRef(outerRef, innerRef);
         const refs = useContext(TabsContext);
@@ -21,6 +21,7 @@ export const horizontalIconTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props
             innerRef,
             itemIndex,
             selected,
+            disableScroll,
             disabled,
             onIndexChange,
             onClick,
@@ -28,7 +29,7 @@ export const horizontalIconTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props
         });
         return /*#__PURE__*/ React.createElement(Root, {
             ref: ref,
-            className: cx(selectedClass, animatedClass, className),
+            className: cls(selectedClass, animatedClass, className),
             disabled: disabled,
             role: role,
             view: view,

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

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

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

@@ -1,3 +1,3 @@
 import { css } from "@emotion/react";
-import { tokens } from "../../../../../tokens";
-export const base = /*#__PURE__*/ css("--plasma_private-outline-radius:var(", tokens.itemBorderRadius, ");border-radius:var(", tokens.itemBorderRadius, ");padding:var(", tokens.itemPadding, ");", "base");
+import { privateTokens, tokens } from "../../../../../tokens";
+export const base = /*#__PURE__*/ css(privateTokens.outlineRadius, ":var(", tokens.itemBorderRadius, ");border-radius:var(", tokens.itemBorderRadius, ");padding:var(", tokens.itemPadding, ");", "base");

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

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef, useContext } from "react";
 import { useForkRef } from "../../../../../hooks";
-import { cx } from "../../../../../utils";
+import cls from "classnames";
 import { TabsContext } from "../../..";
 import { classes } from "../../../tokens";
 import { useTabItem } from "../../../hooks/useTabItem";
@@ -10,7 +10,7 @@ import { base as pilledCSS } from "./variations/_pilled/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
 import { ActionContent, LeftContent, RightContent, StyledContent, TabItemValue, base } from "./HorizontalTabItem.styles";
 export const horizontalTabItemRoot = (Root)=>/*#__PURE__*/ 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 = useRef(null);
         const ref = useForkRef(outerRef, innerRef);
         const refs = useContext(TabsContext);
@@ -25,6 +25,7 @@ export const horizontalTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props, ou
             innerRef,
             itemIndex,
             selected,
+            disableScroll,
             disabled,
             onIndexChange,
             onClick,
@@ -40,7 +41,7 @@ export const horizontalTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props, ou
             size: size,
             onFocus: onItemFocus,
             tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-            className: cx(pilledClass, selectedClass, animatedClass, truncateClass, className),
+            className: cls(pilledClass, selectedClass, animatedClass, truncateClass, className),
             onClick: handleClick,
             ...rest,
             style: {

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

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

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

@@ -1,3 +1,3 @@
 import { css } from "@emotion/react";
-import { classes, tokens } from "../../../../../tokens";
-export const base = /*#__PURE__*/ css("&.", classes.tabsPilled, "{--plasma_private-outline-radius:var(", tokens.itemPilledBorderRadius, ");border-radius:var(", tokens.itemPilledBorderRadius, ");padding:var(", tokens.itemPaddingPilled, ");}", "base");
+import { classes, privateTokens, tokens } from "../../../../../tokens";
+export const base = /*#__PURE__*/ css("&.", classes.tabsPilled, "{", privateTokens.outlineRadius, ":var(", tokens.itemPilledBorderRadius, ");border-radius:var(", tokens.itemPilledBorderRadius, ");padding:var(", tokens.itemPaddingPilled, ");}", "base");

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

@@ -1,3 +1,3 @@
 import { css } from "@emotion/react";
-import { tokens } from "../../../../../tokens";
-export const base = /*#__PURE__*/ css("font-family:var(", tokens.fontFamily, ");font-size:var(", tokens.fontSize, ");font-style:var(", tokens.fontStyle, ");font-weight:var(", tokens.fontWeight, ");letter-spacing:var(", tokens.letterSpacing, ");line-height:var(", tokens.lineHeight, ");--plasma_private-outline-radius:var(", tokens.itemBorderRadius, ");border-radius:var(", tokens.itemBorderRadius, ");width:var(", tokens.itemWidth, ");height:var(", tokens.itemHeight, ");", "base");
+import { classes, privateTokens, tokens } from "../../../../../tokens";
+export const base = /*#__PURE__*/ css("font-family:var(", tokens.fontFamily, ");font-size:var(", tokens.fontSize, ");font-style:var(", tokens.fontStyle, ");font-weight:var(", tokens.fontWeight, ");letter-spacing:var(", tokens.letterSpacing, ");line-height:var(", tokens.lineHeight, ");", privateTokens.outlineRadius, ":var(", tokens.itemBorderRadius, ");border-radius:var(", tokens.itemBorderRadius, ");width:var(", tokens.itemWidth, ");height:var(", tokens.itemHeight, ");&.", classes.selectedTabsItem, "{font-weight:var(", tokens.fontWeightSelected, ",var(", tokens.fontWeight, "));}", "base");

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

@@ -1,7 +1,8 @@
 import React, { forwardRef, useCallback, useMemo, useState, useRef, useLayoutEffect } from "react";
-import { cx, safeUseId } from "../../../../../utils";
+import cls from "classnames";
+import { safeUseId } from "../../../../../utils";
 import { IconDisclosureLeft, IconDisclosureRight } from "../../../../_Icon";
-import { classes } from "../../../tokens";
+import { classes, tokens } from "../../../tokens";
 import { TabItemRefs, TabsContext } from "../../../TabsContext";
 import { getFirstOverflowingTab, getLastOverflowingTab } from "../../../utils";
 import { base as sizeCSS } from "./variations/_size/base";
@@ -93,6 +94,7 @@ export const horizontalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outer
                 isLeftArrow: true
             }, /*#__PURE__*/ React.createElement(IconDisclosureLeft, {
                 size: getIconSize(size),
+                sizeCustomProperty: tokens.arrowSize,
                 color: "inherit"
             })), [
             onPrev,
@@ -109,6 +111,7 @@ export const horizontalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outer
                 isFilled: isFilled
             }, /*#__PURE__*/ React.createElement(IconDisclosureRight, {
                 size: getIconSize(size),
+                sizeCustomProperty: tokens.arrowSize,
                 color: "inherit"
             })), [
             onNext,
@@ -173,9 +176,13 @@ export const horizontalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outer
             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);
         }, [
@@ -195,11 +202,11 @@ export const horizontalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outer
             id: tabsId,
             ref: outerRef,
             disabled: disabled,
-            className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, noDividerClass, className),
+            className: cls(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, noDividerClass, className),
             onKeyDown: onKeyDown,
             ...rest
         }, !firstItemVisible && clip === 'scroll' && PreviousButton, /*#__PURE__*/ React.createElement(StyledContentWrapper, {
-            className: cx(clipScrollClass, clipShowAllClass),
+            className: cls(clipScrollClass, clipShowAllClass),
             ref: scrollRef,
             onScroll: handleScroll
         }, /*#__PURE__*/ React.createElement(StyledContent, {

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

@@ -1,22 +1,22 @@
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { addFocus } from "../../../../../mixins";
-import { classes, tokens } from "../../../tokens";
-export const base = /*#__PURE__*/ css("display:flex;gap:0.125rem;align-items:center;position:relative;", "base");
+import { classes, privateTokens, tokens } from "../../../tokens";
+export const base = /*#__PURE__*/ css("display:flex;gap:0.125rem;align-items:center;position:relative;padding:var(", tokens.tabsPadding, ",0);", "base");
 export const StyledContent = /*#__PURE__*/ styled("div", {
-    target: "e18d38b70",
+    target: "e1tv5svm0",
     label: "StyledContent"
 })("display:inline-flex;flex-direction:row;align-items:center;");
 export const StyledContentWrapper = /*#__PURE__*/ styled("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;&.", classes.tabsClipScroll, "{overflow:scroll;scrollbar-width:none;::-webkit-scrollbar{display:none;}}&.", classes.tabsClipShowAll, "{overflow:visible;}");
 export const StyledArrow = /*#__PURE__*/ styled("button", {
-    target: "e18d38b72",
+    target: "e1tv5svm2",
     label: "StyledArrow"
-})("display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;", addFocus({
+})("display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;color:var(", tokens.arrowColor, ");margin-right:", ({ isLeftArrow })=>isLeftArrow ? `var(${tokens.arrowInnerPadding})` : `var(${privateTokens.outerPadding})`, ";margin-left:", ({ isLeftArrow })=>isLeftArrow ? `var(${privateTokens.outerPadding})` : `var(${tokens.arrowInnerPadding})`, ";", privateTokens.outlineRadius, ":var(", tokens.arrowBorderRadius, ",inherit);", privateTokens.outerPadding, ":", ({ isFilled })=>isFilled ? `var(${tokens.arrowOuterPadding})` : '', ";", addFocus({
     outlineSize: '0.063rem',
     outlineOffset: '0',
     outlineColor: `var(${tokens.outlineFocusColor})`,
-    outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)'
-}), ";&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:", ({ isFilled })=>isFilled ? `var(${tokens.arrowOuterPadding})` : '', ";padding-right:", ({ isLeftArrow })=>isLeftArrow ? `var(${tokens.arrowInnerPadding})` : 'var(--plasma_private-outer-padding)', ";padding-left:", ({ isLeftArrow })=>isLeftArrow ? 'var(--plasma_private-outer-padding)' : `var(${tokens.arrowInnerPadding})`, ";color:var(", tokens.arrowColor, ");&:hover{color:var(", tokens.arrowColorHover, ");}&:active{color:var(", tokens.arrowColorActive, ");}");
+    outlineRadius: `calc(var(${privateTokens.outlineRadius}) - 0.063rem)`
+}), ";&[disabled]{cursor:not-allowed;}&:hover{color:var(", tokens.arrowColorHover, ");}&:active{color:var(", tokens.arrowColorActive, ");}");

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

@@ -1,3 +1,3 @@
 import { css } from "@emotion/react";
-import { classes, tokens } from "../../../../../tokens";
-export const base = /*#__PURE__*/ css("&.", classes.tabsPilled, "{--plasma_private-outline-radius:var(", tokens.tabsPilledBorderRadius, ");border-radius:var(", tokens.tabsPilledBorderRadius, ");}", "base");
+import { classes, privateTokens, tokens } from "../../../../../tokens";
+export const base = /*#__PURE__*/ css("&.", classes.tabsPilled, "{", privateTokens.outlineRadius, ":var(", tokens.tabsPilledBorderRadius, ");border-radius:var(", tokens.tabsPilledBorderRadius, ");}", "base");

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

@@ -1,3 +1,3 @@
 import { css } from "@emotion/react";
-import { tokens } from "../../../../../tokens";
-export const base = /*#__PURE__*/ css("width:var(", tokens.tabsWidth, ");height:var(", tokens.tabsHeight, ");--plasma_private-outline-radius:var(", tokens.tabsBorderRadius, ");border-radius:var(", tokens.tabsBorderRadius, ");", "base");
+import { privateTokens, tokens } from "../../../../../tokens";
+export const base = /*#__PURE__*/ css("width:var(", tokens.tabsWidth, ");height:var(", tokens.tabsHeight, ");", privateTokens.outlineRadius, ":var(", tokens.tabsBorderRadius, ");border-radius:var(", tokens.tabsBorderRadius, ");", "base");

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

@@ -9,7 +9,7 @@ import { base as sizeCSS } from "./variations/_size/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
 import { ActionContent, base, StyledContent } from "./VerticalIconTabItem.styles";
 export const verticalIconTabItemRoot = (Root)=>/*#__PURE__*/ 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 = useRef(null);
         const ref = useForkRef(outerRef, innerRef);
         const refs = useContext(TabsContext);
@@ -19,6 +19,7 @@ export const verticalIconTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props,
             innerRef,
             itemIndex,
             selected,
+            disableScroll,
             disabled,
             onIndexChange,
             onClick,

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

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

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

@@ -1,3 +1,3 @@
 import { css } from "@emotion/react";
-import { tokens } from "../../../../../tokens";
-export const base = /*#__PURE__*/ css("--plasma_private-outline-radius:var(", tokens.itemBorderRadius, ");border-radius:var(", tokens.itemBorderRadius, ");padding:var(", tokens.itemPaddingOrientationVertical, ");", "base");
+import { privateTokens, tokens } from "../../../../../tokens";
+export const base = /*#__PURE__*/ css(privateTokens.outlineRadius, ":var(", tokens.itemBorderRadius, ");border-radius:var(", tokens.itemBorderRadius, ");padding:var(", tokens.itemPaddingOrientationVertical, ");", "base");

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

@@ -1,19 +1,22 @@
 import React, { forwardRef, useRef, useContext } from "react";
 import { useForkRef } from "../../../../../hooks";
-import { cx } from "../../../../../utils";
+import cls from "classnames";
 import { TabsContext } from "../../..";
 import { useTabItem } from "../../../hooks/useTabItem";
 import { classes } from "../../../tokens";
 import { ActionContent, base, LeftContent, RightContent, StyledContent, TabItemValue } from "./VerticalTabItem.styles";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
+import { base as pilledCSS } from "./variations/_pilled/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
 export const verticalTabItemRoot = (Root)=>/*#__PURE__*/ 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 = useRef(null);
         const ref = useForkRef(outerRef, innerRef);
         const refs = useContext(TabsContext);
         const role = 'tab';
+        const pilledAttr = view !== 'clear' && pilled;
+        const pilledClass = pilledAttr ? classes.tabsPilled : undefined;
         const selectedClass = selected ? classes.selectedTabsItem : undefined;
         const truncateClass = maxWidth !== 'auto' ? classes.tabsTruncate : undefined;
         const { hasKeyNavigation, navigationTabIndex, onItemFocus, handleClick } = useTabItem({
@@ -21,6 +24,7 @@ export const verticalTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props, oute
             innerRef,
             itemIndex,
             selected,
+            disableScroll,
             disabled,
             onIndexChange,
             onClick,
@@ -29,12 +33,13 @@ export const verticalTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props, oute
         return /*#__PURE__*/ React.createElement(Root, {
             ref: ref,
             disabled: disabled,
+            pilled: pilled,
             role: role,
             view: view,
             size: size,
             onFocus: onItemFocus,
             tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-            className: cx(selectedClass, truncateClass, className),
+            className: cls(pilledClass, selectedClass, truncateClass, className),
             onClick: handleClick,
             ...rest,
             style: {
@@ -64,6 +69,9 @@ export const verticalTabItemConfig = {
         disabled: {
             css: disabledCSS,
             attrs: true
+        },
+        pilled: {
+            css: pilledCSS
         }
     },
     defaults: {