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

package/dist/styled-components/es/components/Notification/NotificationsPortal.js

@@ -4,14 +4,14 @@ import styled from "styled-components";
 import { component } from "../../engines";
 import { cx } from "../../utils";
 import { PopupProvider, popupConfig, popupClasses } from "../Popup";
-import { closeNotification } from "./NotificationsStore";
+import { useNotifications } from "./NotificationsContext";
 import { StyledItemWrapper, StyledRoot } from "./Notification.styles";
 import { classes } from "./Notification.tokens";
 // issue #823
 const Popup = component(popupConfig);
 const StyledPopup = styled(Popup).withConfig({
     displayName: "NotificationsPortal__StyledPopup",
-    componentId: "sc-e2f738ff-0"
+    componentId: "sc-90565c10-0"
 })([
     `& > .`,
     `{overflow:hidden;}`
@@ -20,6 +20,7 @@ const StyledPopup = styled(Popup).withConfig({
  * Обертка для визуального представления уведомлений.
  */ export const NotificationsPortal = ({ config, frame, placement = 'bottom-right', UNSAFE_SSR_ENABLED, className })=>{
     const { notifications } = useStoreon('notifications');
+    const { closeNotification } = useNotifications();
     const Notification = useMemo(()=>component(config), []);
     const hasLeftAnimationClass = [
         'left',

package/dist/styled-components/es/components/Notification/NotificationsProvider.js

@@ -1,15 +1,52 @@
-import React from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { StoreContext } from "storeon/react";
-import { NotificationsStore } from "./NotificationsStore";
+import { NotificationsContext } from "./NotificationsContext";
+import { createNotificationsApi, createNotificationsStore, GlobalNotificationsApi, NotificationsStore } from "./NotificationsStore";
 import { NotificationsPortal } from "./NotificationsPortal";
+// Глобальные addNotification/closeNotification работают с одним модульным NotificationsStore.
+// Поэтому среди всех смонтированных NotificationsProvider только один должен отображать его портал,
+// иначе одна глобальная нотификация будет отрисована по количеству провайдеров на странице.
+const globalPortalSubscribers = new Set();
+const updateGlobalPortalProvider = ()=>{
+    const activeSubscriber = globalPortalSubscribers.values().next().value;
+    globalPortalSubscribers.forEach((subscriber)=>{
+        subscriber(subscriber === activeSubscriber);
+    });
+};
+const subscribeGlobalPortalProvider = (subscriber)=>{
+    globalPortalSubscribers.add(subscriber);
+    updateGlobalPortalProvider();
+    return ()=>{
+        globalPortalSubscribers.delete(subscriber);
+        updateGlobalPortalProvider();
+    };
+};
 export const NotificationsProvider = ({ children, config, frame, placement, UNSAFE_SSR_ENABLED, className })=>{
-    return /*#__PURE__*/ React.createElement(StoreContext.Provider, {
-        value: NotificationsStore
+    const [store] = useState(createNotificationsStore);
+    const notificationsApi = useMemo(()=>createNotificationsApi(store), [
+        store
+    ]);
+    const [isGlobalPortalActive, setIsGlobalPortalActive] = useState(false);
+    useEffect(()=>subscribeGlobalPortalProvider(setIsGlobalPortalActive), []);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(NotificationsContext.Provider, {
+        value: notificationsApi
+    }, /*#__PURE__*/ React.createElement(StoreContext.Provider, {
+        value: store
     }, children, /*#__PURE__*/ React.createElement(NotificationsPortal, {
         frame: frame,
         placement: placement,
         config: config,
         UNSAFE_SSR_ENABLED: UNSAFE_SSR_ENABLED,
         className: className
-    }));
+    }))), isGlobalPortalActive && /*#__PURE__*/ React.createElement(NotificationsContext.Provider, {
+        value: GlobalNotificationsApi
+    }, /*#__PURE__*/ React.createElement(StoreContext.Provider, {
+        value: NotificationsStore
+    }, /*#__PURE__*/ React.createElement(NotificationsPortal, {
+        frame: frame,
+        placement: placement,
+        config: config,
+        UNSAFE_SSR_ENABLED: UNSAFE_SSR_ENABLED,
+        className: className
+    }))));
 };

package/dist/styled-components/es/components/Notification/NotificationsStore.js

@@ -1,45 +1,47 @@
 import { createStoreon } from "storeon";
 /**
  * Создает хранилище с ключом `notifications` к массиву с окнами.
- */ export const NotificationsStore = createStoreon([
-    (store)=>{
-        store.on('@init', ()=>({
-                notifications: []
-            }));
-        store.on('add', ({ notifications }, notif)=>{
-            return {
-                notifications: notifications.concat([
-                    notif
-                ])
-            };
-        });
-        store.on('hide', ({ notifications }, id)=>{
-            return {
-                notifications: notifications.map((notif)=>id === notif.id ? {
-                        ...notif,
-                        isHidden: true
-                    } : notif)
-            };
-        });
-        store.on('remove', ({ notifications }, id)=>{
-            return {
-                notifications: notifications.filter((notif)=>id !== notif.id)
-            };
-        });
-    }
-]);
-export const closeNotification = (id, delay = 380)=>{
-    const { dispatch } = NotificationsStore;
+ */ export const createNotificationsStore = ()=>createStoreon([
+        (store)=>{
+            store.on('@init', ()=>({
+                    notifications: []
+                }));
+            store.on('add', ({ notifications }, notif)=>{
+                return {
+                    notifications: notifications.concat([
+                        notif
+                    ])
+                };
+            });
+            store.on('hide', ({ notifications }, id)=>{
+                return {
+                    notifications: notifications.map((notif)=>id === notif.id ? {
+                            ...notif,
+                            isHidden: true
+                        } : notif)
+                };
+            });
+            store.on('remove', ({ notifications }, id)=>{
+                return {
+                    notifications: notifications.filter((notif)=>id !== notif.id)
+                };
+            });
+        }
+    ]);
+export const NotificationsStore = createNotificationsStore();
+let notificationIdCounter = 0;
+const createNotificationId = ()=>{
+    notificationIdCounter += 1;
+    return `plasma-notification-${Date.now()}-${notificationIdCounter}`;
+};
+const closeNotificationInStore = (store, id, delay = 380)=>{
+    const { dispatch } = store;
     dispatch('hide', id);
     setTimeout(()=>dispatch('remove', id), delay);
 };
-/**
- * Открыть новое оповещение.
- * @param props Пропсы всплывающего оповещения
- * @return Идентификатор нового оповещения
- */ export function addNotification({ id: externalId, onTimeoutClose, ...rest }, timeout = 2000) {
-    const id = externalId || `plasma-notification-${Date.now()}`;
-    const { dispatch, get } = NotificationsStore;
+const addNotificationToStore = (store, { id: externalId, onTimeoutClose, ...rest }, timeout = 2000)=>{
+    const id = externalId || createNotificationId();
+    const { dispatch, get } = store;
     dispatch('add', {
         ...rest,
         id,
@@ -53,9 +55,20 @@ export const closeNotification = (id, delay = 380)=>{
             if (!notification) {
                 return;
             }
-            closeNotification(id);
+            closeNotificationInStore(store, id);
             onTimeoutClose?.();
         }, timeout);
     }
     return id;
-}
+};
+export const createNotificationsApi = (store)=>({
+        addNotification: (props, timeout = 2000)=>addNotificationToStore(store, props, timeout),
+        closeNotification: (id, delay = 380)=>closeNotificationInStore(store, id, delay)
+    });
+export const GlobalNotificationsApi = createNotificationsApi(NotificationsStore);
+export const closeNotification = (id, delay = 380)=>closeNotificationInStore(NotificationsStore, id, delay);
+/**
+ * Открыть новое оповещение.
+ * @param props Пропсы всплывающего оповещения
+ * @return Идентификатор нового оповещения
+ */ export const addNotification = (props, timeout = 2000)=>addNotificationToStore(NotificationsStore, props, timeout);

package/dist/styled-components/es/components/Notification/index.js

@@ -1,4 +1,5 @@
 export { NotificationsProvider } from "./NotificationsProvider";
 export { notificationRoot, notificationConfig } from "./Notification";
 export { addNotification, closeNotification } from "./NotificationsStore";
+export { useNotifications } from "./NotificationsContext";
 export { classes as notificationClasses, tokens as notificationTokens } from "./Notification.tokens";

package/dist/styled-components/es/components/Range/Range.js

@@ -19,7 +19,7 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
         0
     ], hintWidth, hintContentLeft, // layout
     label, leftHelper, titleCaption, contentLeft, contentRight, firstTextfieldContentLeft, firstTextfieldContentRight, secondTextfieldContentLeft, secondTextfieldContentRight, firstTextfieldTextBefore, secondTextfieldTextBefore, firstTextfieldTextAfter, secondTextfieldTextAfter, dividerVariant = 'dash', dividerIcon, autoComplete, onChangeFirstValue, onChangeSecondValue, onSearchFirstValue, onSearchSecondValue, onFocusFirstTextfield, onFocusSecondTextfield, onBlurFirstTextfield, onBlurSecondTextfield, ...rest }, ref)=>{
-        const { inputWrapperRef, ...rootProps } = rest;
+        const { inputWrapperRef, firstTextfieldInputWrapperRef, secondTextfieldInputWrapperRef, ...rootProps } = rest;
         const rangeRef = useRef(null);
         const firstTextFieldRef = useRef(null);
         const secondTextFieldRef = useRef(null);
@@ -131,6 +131,7 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
             className: cx(clearClass, clearDividerClass, rangeErrorClass, rangeSuccessClass, rangeEditedClass)
         }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/ React.createElement(StyledInput, {
             ref: firstTextFieldRef,
+            inputWrapperRef: firstTextfieldInputWrapperRef,
             className: cx(firstValueErrorClass, firstValueSuccessClass, firstValueEditedClass),
             value: firstValue,
             readOnly: readOnly,
@@ -150,6 +151,7 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
             hasDivider: hasClearDivider
         }), Divider, /*#__PURE__*/ React.createElement(StyledInput, {
             ref: secondTextFieldRef,
+            inputWrapperRef: secondTextfieldInputWrapperRef,
             className: cx(secondValueErrorClass, secondValueSuccessClass, secondValueEditedClass),
             value: secondValue,
             readOnly: readOnly,

package/dist/styled-components/es/components/Slider/Slider.tokens.js

@@ -54,9 +54,8 @@ export const tokens = {
     valueLineHeight: '--plasma-slider-value-line-height',
     doubleWrapperGap: '--plasma-slider-double-wrapper-gap',
     doubleBoxShadow: '--plasma-slider-double-box-shadow',
-    thumbSize: '--plasma-slider-thumb-size',
+    thumbWidth: '--plasma-slider-thumb-width',
     thumbHeight: '--plasma-slider-thumb-height',
-    thumbBorderStyle: '--plasma-slider-thumb-border-style',
     thumbBorderWidth: '--plasma-slider-thumb-border-width',
     thumbBorderRadius: '--plasma-slider-thumb-border-radius',
     thumbBorderColor: '--plasma-slider-thumb-border-color',

package/dist/styled-components/es/components/Slider/components/Single/Single.styles.js

@@ -4,13 +4,13 @@ import { Label, LabelWrapper, BaseSliderContainer, BaseStyledTrack, BaseStyledRa
 export { Label, LabelWrapper };
 export const LabelContent = styled.div.withConfig({
     displayName: "Single.styles__LabelContent",
-    componentId: "sc-76a27e11-0"
+    componentId: "sc-473ef018-0"
 })([
     `display:inline-flex;`
 ]);
 export const StyledRangeValue = styled.span.withConfig({
     displayName: "Single.styles__StyledRangeValue",
-    componentId: "sc-76a27e11-1"
+    componentId: "sc-473ef018-1"
 })([
     `grid-area:b;color:var(`,
     `);font-family:var(`,
@@ -28,7 +28,7 @@ export const StyledRangeValue = styled.span.withConfig({
 ], tokens.rangeValueColor, tokens.valueFontFamily, tokens.valueFontSize, tokens.valueFontStyle, tokens.valueFontWeight, tokens.valueLetterSpacing, tokens.valueLineHeight, classes.hideMinValue, classes.hideMaxValue, classes.activeRangeValue, tokens.labelColor, classes.maxRangeValue);
 export const SliderContainer = styled(BaseSliderContainer).withConfig({
     displayName: "Single.styles__SliderContainer",
-    componentId: "sc-76a27e11-2"
+    componentId: "sc-473ef018-2"
 })([
     `grid-area:a;flex:1;z-index:1;&.`,
     `{transform:scaleX(-1);}&.`,
@@ -38,7 +38,7 @@ export const SliderContainer = styled(BaseSliderContainer).withConfig({
 ], classes.reversed, classes.verticalOrientation, tokens.size, classes.reversed);
 export const StyledTrack = styled(BaseStyledTrack).withConfig({
     displayName: "Single.styles__StyledTrack",
-    componentId: "sc-76a27e11-3"
+    componentId: "sc-473ef018-3"
 })([
     `.`,
     ` &{top:0;bottom:0;left:50%;right:auto;transform:translateX(-50%);width:var(`,
@@ -46,7 +46,7 @@ export const StyledTrack = styled(BaseStyledTrack).withConfig({
 ], classes.verticalOrientation, tokens.railThickness);
 export const StyledProgress = styled.div.withConfig({
     displayName: "Single.styles__StyledProgress",
-    componentId: "sc-76a27e11-4"
+    componentId: "sc-473ef018-4"
 })([
     `position:absolute;top:50%;left:0;transform:translateY(-50%);height:var(`,
     `);border-radius:var(`,
@@ -57,7 +57,7 @@ export const StyledProgress = styled.div.withConfig({
 ], tokens.railThickness, tokens.railBorderRadius, tokens.fillColor, classes.verticalOrientation, tokens.railThickness);
 export const TrackSegment = styled.div.withConfig({
     displayName: "Single.styles__TrackSegment",
-    componentId: "sc-76a27e11-5"
+    componentId: "sc-473ef018-5"
 })([
     `position:absolute;top:50%;right:auto;transform:translateY(-50%);height:var(`,
     `);border-radius:var(`,
@@ -68,14 +68,14 @@ export const TrackSegment = styled.div.withConfig({
 ], tokens.railThickness, tokens.trackSegmentBorderRadius, tokens.railBackgroundColor, classes.verticalOrientation, tokens.railThickness);
 export const ProgressSegment = styled(TrackSegment).withConfig({
     displayName: "Single.styles__ProgressSegment",
-    componentId: "sc-76a27e11-6"
+    componentId: "sc-473ef018-6"
 })([
     `background-color:var(`,
     `);`
 ], tokens.fillColor);
 export const StyledCurrentValue = styled.span.withConfig({
     displayName: "Single.styles__StyledCurrentValue",
-    componentId: "sc-76a27e11-7"
+    componentId: "sc-473ef018-7"
 })([
     `position:absolute;top:var(`,
     `);transform:translateX(-50%);pointer-events:none;white-space:nowrap;z-index:2;font-family:var(`,
@@ -108,7 +108,7 @@ export const StyledCurrentValue = styled.span.withConfig({
 ], tokens.currentValueTopOffset, tokens.valueFontFamily, tokens.valueFontSize, tokens.valueFontStyle, tokens.valueFontWeight, tokens.valueLetterSpacing, tokens.valueLineHeight, tokens.rangeValueColor, classes.reversed, classes.verticalOrientation, tokens.currentValueTopOffset, classes.labelAlignLeft, classes.verticalOrientation, tokens.currentValueTopOffset, classes.verticalOrientation, classes.reversed, classes.valuePlacementTop, tokens.currentValueTopOffset, classes.valuePlacementBottom, tokens.currentValueTopOffset, classes.verticalOrientation, classes.valuePlacementRight, tokens.currentValueTopOffset, classes.verticalOrientation, classes.valuePlacementLeft, tokens.currentValueTopOffset, classes.valuePlacementNone);
 export const ScaleTick = styled.div.withConfig({
     displayName: "Single.styles__ScaleTick",
-    componentId: "sc-76a27e11-8"
+    componentId: "sc-473ef018-8"
 })([
     `position:absolute;width:0;overflow:visible;font-family:var(`,
     `);font-size:var(`,
@@ -120,7 +120,7 @@ export const ScaleTick = styled.div.withConfig({
 ], tokens.valueFontFamily, tokens.valueFontSize, tokens.valueFontStyle, tokens.valueFontWeight, tokens.valueLetterSpacing, tokens.valueLineHeight);
 export const ScaleTickLabel = styled.span.withConfig({
     displayName: "Single.styles__ScaleTickLabel",
-    componentId: "sc-76a27e11-9"
+    componentId: "sc-473ef018-9"
 })([
     `position:absolute;white-space:nowrap;cursor:pointer;color:var(`,
     `);top:`,
@@ -172,7 +172,7 @@ export const ScaleTickLabel = styled.span.withConfig({
 });
 export const ScaleTickDot = styled.span.withConfig({
     displayName: "Single.styles__ScaleTickDot",
-    componentId: "sc-76a27e11-10"
+    componentId: "sc-473ef018-10"
 })([
     `position:absolute;z-index:0;top:`,
     `;left:`,
@@ -199,7 +199,7 @@ export const ScaleTickDot = styled.span.withConfig({
 }, tokens.tickSize, tokens.tickSize, ({ filled })=>filled ? `var(${tokens.tickDotFilledColor})` : `var(${tokens.tickDotColor})`);
 export const TickSeparator = styled.span.withConfig({
     displayName: "Single.styles__TickSeparator",
-    componentId: "sc-76a27e11-11"
+    componentId: "sc-473ef018-11"
 })([
     `position:absolute;z-index:0;pointer-events:none;top:`,
     `;left:`,
@@ -230,7 +230,7 @@ export const TickSeparator = styled.span.withConfig({
 }, tokens.tickSeparatorBorderRadius, tokens.tickSeparatorWidth, tokens.tickSeparatorHeight, classes.verticalOrientation, tokens.tickSeparatorHeight, tokens.tickSeparatorWidth, ({ filled })=>filled ? `var(${tokens.tickDotFilledColor})` : `var(${tokens.tickDotColor})`);
 export const ScaleTicksWrapper = styled.datalist.withConfig({
     displayName: "Single.styles__ScaleTicksWrapper",
-    componentId: "sc-76a27e11-12"
+    componentId: "sc-473ef018-12"
 })([
     `position:relative;display:block;grid-column-start:`,
     `;grid-column-end:`,
@@ -240,7 +240,7 @@ export const ScaleTicksWrapper = styled.datalist.withConfig({
 ], ({ isVertical })=>isVertical ? 'b' : 'b', ({ isVertical })=>isVertical ? 'b' : 'c', ({ isVertical })=>isVertical ? 'b' : 'b', ({ isVertical })=>isVertical ? 'c' : 'b');
 export const StyledRange = styled(BaseStyledRange).withConfig({
     displayName: "Single.styles__StyledRange",
-    componentId: "sc-76a27e11-13"
+    componentId: "sc-473ef018-13"
 })([
     `position:relative;z-index:1;&::-webkit-slider-thumb{pointer-events:`,
     `;}.`,
@@ -249,10 +249,10 @@ export const StyledRange = styled(BaseStyledRange).withConfig({
     `);top:calc(50% - var(`,
     `) / 2);left:calc(50% - (100cqh + var(`,
     `,0rem)) / 2);margin-left:0;transform:rotate(-90deg);}`
-], ({ showPointer })=>showPointer === false ? 'none' : 'auto', classes.verticalOrientation, tokens.thumbSize, tokens.size, tokens.size, tokens.thumbSize);
+], ({ showPointer })=>showPointer === false ? 'none' : 'auto', classes.verticalOrientation, tokens.thumbWidth, tokens.size, tokens.size, tokens.thumbWidth);
 export const SliderBaseWrapper = styled.div.withConfig({
     displayName: "Single.styles__SliderBaseWrapper",
-    componentId: "sc-76a27e11-14"
+    componentId: "sc-473ef018-14"
 })([
     `display:flex;flex:1;position:relative;&:has(`,
     `:disabled) `,
@@ -273,7 +273,7 @@ export const SliderBaseWrapper = styled.div.withConfig({
 ], StyledRange, ScaleTicksWrapper, ScaleTickLabel, classes.valuePlacementTop, tokens.currentValueTopOffset, classes.rangeValuesPlacementOuter, StyledRangeValue, classes.maxRangeValue, classes.scalePlacementTop, tokens.valueLineHeight, classes.rangeValuesPlacementInner, StyledRangeValue, tokens.rangeValueHorizontalMargin, classes.maxRangeValue, tokens.rangeValueHorizontalMargin);
 export const SingleWrapper = styled.div.withConfig({
     displayName: "Single.styles__SingleWrapper",
-    componentId: "sc-76a27e11-15"
+    componentId: "sc-473ef018-15"
 })([
     `display:flex;width:100%;opacity:var(`,
     `);&.`,

package/dist/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js

@@ -1,10 +1,23 @@
 import styled from "styled-components";
+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 = styled.label.withConfig({
     displayName: "SliderBase.styles__Label",
-    componentId: "sc-2d5ccbbf-0"
+    componentId: "sc-a6c1cfe4-0"
 })([
     `font-family:var(`,
     `);font-size:var(`,
@@ -18,7 +31,7 @@ import { tokens } from "../../Slider.tokens";
  * Обёртка вокруг иконки и подписи
  */ export const LabelWrapper = styled.div.withConfig({
     displayName: "SliderBase.styles__LabelWrapper",
-    componentId: "sc-2d5ccbbf-1"
+    componentId: "sc-a6c1cfe4-1"
 })([
     `color:var(`,
     `);display:flex;align-items:center;gap:var(`,
@@ -28,7 +41,7 @@ import { tokens } from "../../Slider.tokens";
  * Базовый контейнер слайдера
  */ export const BaseSliderContainer = styled.div.withConfig({
     displayName: "SliderBase.styles__BaseSliderContainer",
-    componentId: "sc-2d5ccbbf-2"
+    componentId: "sc-a6c1cfe4-2"
 })([
     `position:relative;display:grid;align-items:center;height:var(`,
     `);`
@@ -37,7 +50,7 @@ import { tokens } from "../../Slider.tokens";
  * Рельс (неактивная часть дорожки)
  */ export const BaseStyledTrack = styled.div.withConfig({
     displayName: "SliderBase.styles__BaseStyledTrack",
-    componentId: "sc-2d5ccbbf-3"
+    componentId: "sc-a6c1cfe4-3"
 })([
     `position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);height:var(`,
     `);border-radius:var(`,
@@ -48,39 +61,17 @@ import { tokens } from "../../Slider.tokens";
  * Нативный range-input
  */ export const BaseStyledRange = styled.input.withConfig({
     displayName: "SliderBase.styles__BaseStyledRange",
-    componentId: "sc-2d5ccbbf-4"
+    componentId: "sc-a6c1cfe4-4"
 })([
     `appearance:none;outline:none;background:transparent;border:none;width:calc(100% + var(`,
     `,0rem));height:var(`,
     `);margin:0;margin-left:calc(var(`,
-    `,0rem) / -2);cursor:pointer;&:disabled{cursor:not-allowed;}&::-webkit-slider-runnable-track{background:transparent;}&::-webkit-slider-thumb{-webkit-appearance:none;outline:none;width:var(`,
-    `);height:var(`,
-    `,var(`,
-    `));border-radius:var(`,
-    `,50%);cursor:grab;border-style:var(`,
-    `,solid);border-color:transparent;border-width:var(`,
-    `,0.0625rem);background:none no-repeat center,linear-gradient(var(`,
-    `),var(`,
-    `)) padding-box,var(`,
-    `) border-box;transition:background-color 0.1s ease-in-out,background-image 0.1s ease-in-out;opacity:`,
-    `;}&:not(:disabled)::-webkit-slider-thumb:hover,&:not(:disabled)::-webkit-slider-thumb:active,&:focus-visible::-webkit-slider-thumb{background:var(`,
-    `,none) no-repeat center,linear-gradient(var(`,
-    `),var(`,
-    `)) padding-box,var(`,
-    `) border-box;}&::-webkit-slider-thumb:active{cursor:grabbing;}&::-moz-range-track{background:transparent;height:var(`,
-    `);}&::-moz-range-progress{background:transparent;}&::-moz-range-thumb{width:var(`,
-    `);height:var(`,
-    `,var(`,
-    `));border-radius:var(`,
-    `,50%);cursor:grab;border-style:var(`,
-    `,solid);border-color:transparent;border-width:var(`,
-    `,0.0625rem);background:none no-repeat center,linear-gradient(var(`,
-    `),var(`,
-    `)) padding-box,var(`,
-    `) border-box;transition:background-color 0.1s ease-in-out,background-image 0.1s ease-in-out;opacity:`,
-    `;}&:not(:disabled)::-moz-range-thumb:hover,&:not(:disabled)::-moz-range-thumb:active{background:var(`,
-    `,none) no-repeat center,linear-gradient(var(`,
-    `),var(`,
-    `)) padding-box,var(`,
-    `) 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;}}`
-], tokens.thumbSize, tokens.size, tokens.thumbSize, tokens.thumbSize, tokens.thumbHeight, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbBorderStyle, tokens.thumbBorderWidth, tokens.thumbBackgroundColor, tokens.thumbBackgroundColor, tokens.thumbBorderColor, ({ showPointer })=>showPointer === false ? '0' : '1', tokens.thumbInnerContent, tokens.thumbBackgroundColor, tokens.thumbBackgroundColor, tokens.thumbFocusBorderColor, tokens.railThickness, tokens.thumbSize, tokens.thumbHeight, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbBorderStyle, tokens.thumbBorderWidth, tokens.thumbBackgroundColor, tokens.thumbBackgroundColor, tokens.thumbBorderColor, ({ showPointer })=>showPointer === false ? '0' : '1', tokens.thumbInnerContent, tokens.thumbBackgroundColor, tokens.thumbBackgroundColor, tokens.thumbFocusBorderColor);
+    `,0rem) / -2);cursor:pointer;&:disabled{cursor:not-allowed;}&::-webkit-slider-runnable-track{background:transparent;}&::-webkit-slider-thumb{-webkit-appearance:none;outline:none;`,
+    ` opacity:`,
+    `;}&:not(:disabled)::-webkit-slider-thumb:hover,&:not(:disabled)::-webkit-slider-thumb:active,&:focus-visible::-webkit-slider-thumb{`,
+    `}&::-webkit-slider-thumb:active{cursor:grabbing;}&::-moz-range-track{background:transparent;height:var(`,
+    `);}&::-moz-range-progress{background:transparent;}&::-moz-range-thumb{`,
+    ` opacity:`,
+    `;}&:not(:disabled)::-moz-range-thumb:hover,&:not(:disabled)::-moz-range-thumb:active{`,
+    `}&::-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;}}`
+], tokens.thumbWidth, tokens.size, tokens.thumbWidth, thumb, ({ showPointer })=>showPointer === false ? '0' : '1', thumbFocused, tokens.railThickness, thumb, ({ showPointer })=>showPointer === false ? '0' : '1', thumbFocused);

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

@@ -1,15 +1,15 @@
 import styled, { css } from "styled-components";
 import { addFocus } from "../../../../../mixins";
-import { tokens } from "../../../tokens";
+import { privateTokens, tokens } from "../../../tokens";
 export const StyledContent = styled.div.withConfig({
     displayName: "HorizontalIconTabItem.styles__StyledContent",
-    componentId: "sc-8816136-0"
+    componentId: "sc-26248b38-0"
 })([
     `display:inline-block;width:fit-content;`
 ]);
 export const ActionContent = styled.div.withConfig({
     displayName: "HorizontalIconTabItem.styles__ActionContent",
-    componentId: "sc-8816136-1"
+    componentId: "sc-26248b38-1"
 })([
     `display:flex;margin-left:var(`,
     `);`
@@ -24,7 +24,7 @@ export const base = css([
     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/styled-components/es/components/Tabs/ui/horizontal/HorizontalIconTabItem/variations/_size/base.js

@@ -1,8 +1,9 @@
 import { css } from "styled-components";
-import { tokens } from "../../../../../tokens";
+import { privateTokens, tokens } from "../../../../../tokens";
 export const base = css([
-    `--plasma_private-outline-radius:var(`,
+    ``,
+    `:var(`,
     `);border-radius:var(`,
     `);padding:var(`,
     `);`
-], tokens.itemBorderRadius, tokens.itemBorderRadius, tokens.itemPadding);
+], privateTokens.outlineRadius, tokens.itemBorderRadius, tokens.itemBorderRadius, tokens.itemPadding);

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