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

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

@@ -8,23 +8,96 @@ Object.defineProperty(exports, "NotificationsProvider", {
         return NotificationsProvider;
     }
 });
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _react1 = require("storeon/react");
+const _NotificationsContext = require("./NotificationsContext");
 const _NotificationsStore = require("./NotificationsStore");
 const _NotificationsPortal = require("./NotificationsPortal");
-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();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
     };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
+// Глобальные 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();
+    };
+};
 const NotificationsProvider = ({ children, config, frame, placement, UNSAFE_SSR_ENABLED, className })=>{
-    return /*#__PURE__*/ _react.default.createElement(_react1.StoreContext.Provider, {
-        value: _NotificationsStore.NotificationsStore
+    const [store] = (0, _react.useState)(_NotificationsStore.createNotificationsStore);
+    const notificationsApi = (0, _react.useMemo)(()=>(0, _NotificationsStore.createNotificationsApi)(store), [
+        store
+    ]);
+    const [isGlobalPortalActive, setIsGlobalPortalActive] = (0, _react.useState)(false);
+    (0, _react.useEffect)(()=>subscribeGlobalPortalProvider(setIsGlobalPortalActive), []);
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_NotificationsContext.NotificationsContext.Provider, {
+        value: notificationsApi
+    }, /*#__PURE__*/ _react.default.createElement(_react1.StoreContext.Provider, {
+        value: store
     }, children, /*#__PURE__*/ _react.default.createElement(_NotificationsPortal.NotificationsPortal, {
         frame: frame,
         placement: placement,
         config: config,
         UNSAFE_SSR_ENABLED: UNSAFE_SSR_ENABLED,
         className: className
-    }));
+    }))), isGlobalPortalActive && /*#__PURE__*/ _react.default.createElement(_NotificationsContext.NotificationsContext.Provider, {
+        value: _NotificationsStore.GlobalNotificationsApi
+    }, /*#__PURE__*/ _react.default.createElement(_react1.StoreContext.Provider, {
+        value: _NotificationsStore.NotificationsStore
+    }, /*#__PURE__*/ _react.default.createElement(_NotificationsPortal.NotificationsPortal, {
+        frame: frame,
+        placement: placement,
+        config: config,
+        UNSAFE_SSR_ENABLED: UNSAFE_SSR_ENABLED,
+        className: className
+    }))));
 };

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

@@ -9,6 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get GlobalNotificationsApi () {
+        return GlobalNotificationsApi;
+    },
     get NotificationsStore () {
         return NotificationsStore;
     },
@@ -17,44 +20,56 @@ _export(exports, {
     },
     get closeNotification () {
         return closeNotification;
+    },
+    get createNotificationsApi () {
+        return createNotificationsApi;
+    },
+    get createNotificationsStore () {
+        return createNotificationsStore;
     }
 });
 const _storeon = require("storeon");
-const NotificationsStore = (0, _storeon.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)
-            };
-        });
-    }
-]);
-const closeNotification = (id, delay = 380)=>{
-    const { dispatch } = NotificationsStore;
+const createNotificationsStore = ()=>(0, _storeon.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)
+                };
+            });
+        }
+    ]);
+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);
 };
-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,
@@ -68,9 +83,16 @@ function addNotification({ id: externalId, onTimeoutClose, ...rest }, timeout =
             if (!notification) {
                 return;
             }
-            closeNotification(id);
+            closeNotificationInStore(store, id);
             onTimeoutClose?.();
         }, timeout);
     }
     return id;
-}
+};
+const createNotificationsApi = (store)=>({
+        addNotification: (props, timeout = 2000)=>addNotificationToStore(store, props, timeout),
+        closeNotification: (id, delay = 380)=>closeNotificationInStore(store, id, delay)
+    });
+const GlobalNotificationsApi = createNotificationsApi(NotificationsStore);
+const closeNotification = (id, delay = 380)=>closeNotificationInStore(NotificationsStore, id, delay);
+const addNotification = (props, timeout = 2000)=>addNotificationToStore(NotificationsStore, props, timeout);

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

@@ -29,9 +29,13 @@ _export(exports, {
     },
     get notificationTokens () {
         return _Notificationtokens.tokens;
+    },
+    get useNotifications () {
+        return _NotificationsContext.useNotifications;
     }
 });
 const _NotificationsProvider = require("./NotificationsProvider");
 const _Notification = require("./Notification");
 const _NotificationsStore = require("./NotificationsStore");
+const _NotificationsContext = require("./NotificationsContext");
 const _Notificationtokens = require("./Notification.tokens");

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

@@ -78,7 +78,7 @@ const rangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ className, //
         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 = (0, _react.useRef)(null);
         const firstTextFieldRef = (0, _react.useRef)(null);
         const secondTextFieldRef = (0, _react.useRef)(null);
@@ -190,6 +190,7 @@ const rangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ className, //
             className: (0, _utils.cx)(clearClass, clearDividerClass, rangeErrorClass, rangeSuccessClass, rangeEditedClass)
         }, contentLeft && /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledContentLeft, null, contentLeft), /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledInput, {
             ref: firstTextFieldRef,
+            inputWrapperRef: firstTextfieldInputWrapperRef,
             className: (0, _utils.cx)(firstValueErrorClass, firstValueSuccessClass, firstValueEditedClass),
             value: firstValue,
             readOnly: readOnly,
@@ -209,6 +210,7 @@ const rangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ className, //
             hasDivider: hasClearDivider
         }), Divider, /*#__PURE__*/ _react.default.createElement(_Rangestyles.StyledInput, {
             ref: secondTextFieldRef,
+            inputWrapperRef: secondTextfieldInputWrapperRef,
             className: (0, _utils.cx)(secondValueErrorClass, secondValueSuccessClass, secondValueEditedClass),
             value: secondValue,
             readOnly: readOnly,

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

@@ -72,9 +72,8 @@ 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/cjs/components/Slider/components/Single/Single.styles.js

@@ -74,13 +74,13 @@ function _interop_require_default(obj) {
 }
 const LabelContent = _styledcomponents.default.div.withConfig({
     displayName: "Single.styles__LabelContent",
-    componentId: "sc-76a27e11-0"
+    componentId: "sc-473ef018-0"
 })([
     `display:inline-flex;`
 ]);
 const StyledRangeValue = _styledcomponents.default.span.withConfig({
     displayName: "Single.styles__StyledRangeValue",
-    componentId: "sc-76a27e11-1"
+    componentId: "sc-473ef018-1"
 })([
     `grid-area:b;color:var(`,
     `);font-family:var(`,
@@ -98,7 +98,7 @@ const StyledRangeValue = _styledcomponents.default.span.withConfig({
 ], _Slidertokens.tokens.rangeValueColor, _Slidertokens.tokens.valueFontFamily, _Slidertokens.tokens.valueFontSize, _Slidertokens.tokens.valueFontStyle, _Slidertokens.tokens.valueFontWeight, _Slidertokens.tokens.valueLetterSpacing, _Slidertokens.tokens.valueLineHeight, _Slidertokens.classes.hideMinValue, _Slidertokens.classes.hideMaxValue, _Slidertokens.classes.activeRangeValue, _Slidertokens.tokens.labelColor, _Slidertokens.classes.maxRangeValue);
 const SliderContainer = (0, _styledcomponents.default)(_SliderBasestyles.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);}&.`,
@@ -108,7 +108,7 @@ const SliderContainer = (0, _styledcomponents.default)(_SliderBasestyles.BaseSli
 ], _Slidertokens.classes.reversed, _Slidertokens.classes.verticalOrientation, _Slidertokens.tokens.size, _Slidertokens.classes.reversed);
 const StyledTrack = (0, _styledcomponents.default)(_SliderBasestyles.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(`,
@@ -116,7 +116,7 @@ const StyledTrack = (0, _styledcomponents.default)(_SliderBasestyles.BaseStyledT
 ], _Slidertokens.classes.verticalOrientation, _Slidertokens.tokens.railThickness);
 const StyledProgress = _styledcomponents.default.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(`,
@@ -127,7 +127,7 @@ const StyledProgress = _styledcomponents.default.div.withConfig({
 ], _Slidertokens.tokens.railThickness, _Slidertokens.tokens.railBorderRadius, _Slidertokens.tokens.fillColor, _Slidertokens.classes.verticalOrientation, _Slidertokens.tokens.railThickness);
 const TrackSegment = _styledcomponents.default.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(`,
@@ -138,14 +138,14 @@ const TrackSegment = _styledcomponents.default.div.withConfig({
 ], _Slidertokens.tokens.railThickness, _Slidertokens.tokens.trackSegmentBorderRadius, _Slidertokens.tokens.railBackgroundColor, _Slidertokens.classes.verticalOrientation, _Slidertokens.tokens.railThickness);
 const ProgressSegment = (0, _styledcomponents.default)(TrackSegment).withConfig({
     displayName: "Single.styles__ProgressSegment",
-    componentId: "sc-76a27e11-6"
+    componentId: "sc-473ef018-6"
 })([
     `background-color:var(`,
     `);`
 ], _Slidertokens.tokens.fillColor);
 const StyledCurrentValue = _styledcomponents.default.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(`,
@@ -178,7 +178,7 @@ const StyledCurrentValue = _styledcomponents.default.span.withConfig({
 ], _Slidertokens.tokens.currentValueTopOffset, _Slidertokens.tokens.valueFontFamily, _Slidertokens.tokens.valueFontSize, _Slidertokens.tokens.valueFontStyle, _Slidertokens.tokens.valueFontWeight, _Slidertokens.tokens.valueLetterSpacing, _Slidertokens.tokens.valueLineHeight, _Slidertokens.tokens.rangeValueColor, _Slidertokens.classes.reversed, _Slidertokens.classes.verticalOrientation, _Slidertokens.tokens.currentValueTopOffset, _Slidertokens.classes.labelAlignLeft, _Slidertokens.classes.verticalOrientation, _Slidertokens.tokens.currentValueTopOffset, _Slidertokens.classes.verticalOrientation, _Slidertokens.classes.reversed, _Slidertokens.classes.valuePlacementTop, _Slidertokens.tokens.currentValueTopOffset, _Slidertokens.classes.valuePlacementBottom, _Slidertokens.tokens.currentValueTopOffset, _Slidertokens.classes.verticalOrientation, _Slidertokens.classes.valuePlacementRight, _Slidertokens.tokens.currentValueTopOffset, _Slidertokens.classes.verticalOrientation, _Slidertokens.classes.valuePlacementLeft, _Slidertokens.tokens.currentValueTopOffset, _Slidertokens.classes.valuePlacementNone);
 const ScaleTick = _styledcomponents.default.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(`,
@@ -190,7 +190,7 @@ const ScaleTick = _styledcomponents.default.div.withConfig({
 ], _Slidertokens.tokens.valueFontFamily, _Slidertokens.tokens.valueFontSize, _Slidertokens.tokens.valueFontStyle, _Slidertokens.tokens.valueFontWeight, _Slidertokens.tokens.valueLetterSpacing, _Slidertokens.tokens.valueLineHeight);
 const ScaleTickLabel = _styledcomponents.default.span.withConfig({
     displayName: "Single.styles__ScaleTickLabel",
-    componentId: "sc-76a27e11-9"
+    componentId: "sc-473ef018-9"
 })([
     `position:absolute;white-space:nowrap;cursor:pointer;color:var(`,
     `);top:`,
@@ -242,7 +242,7 @@ const ScaleTickLabel = _styledcomponents.default.span.withConfig({
 });
 const ScaleTickDot = _styledcomponents.default.span.withConfig({
     displayName: "Single.styles__ScaleTickDot",
-    componentId: "sc-76a27e11-10"
+    componentId: "sc-473ef018-10"
 })([
     `position:absolute;z-index:0;top:`,
     `;left:`,
@@ -269,7 +269,7 @@ const ScaleTickDot = _styledcomponents.default.span.withConfig({
 }, _Slidertokens.tokens.tickSize, _Slidertokens.tokens.tickSize, ({ filled })=>filled ? `var(${_Slidertokens.tokens.tickDotFilledColor})` : `var(${_Slidertokens.tokens.tickDotColor})`);
 const TickSeparator = _styledcomponents.default.span.withConfig({
     displayName: "Single.styles__TickSeparator",
-    componentId: "sc-76a27e11-11"
+    componentId: "sc-473ef018-11"
 })([
     `position:absolute;z-index:0;pointer-events:none;top:`,
     `;left:`,
@@ -300,7 +300,7 @@ const TickSeparator = _styledcomponents.default.span.withConfig({
 }, _Slidertokens.tokens.tickSeparatorBorderRadius, _Slidertokens.tokens.tickSeparatorWidth, _Slidertokens.tokens.tickSeparatorHeight, _Slidertokens.classes.verticalOrientation, _Slidertokens.tokens.tickSeparatorHeight, _Slidertokens.tokens.tickSeparatorWidth, ({ filled })=>filled ? `var(${_Slidertokens.tokens.tickDotFilledColor})` : `var(${_Slidertokens.tokens.tickDotColor})`);
 const ScaleTicksWrapper = _styledcomponents.default.datalist.withConfig({
     displayName: "Single.styles__ScaleTicksWrapper",
-    componentId: "sc-76a27e11-12"
+    componentId: "sc-473ef018-12"
 })([
     `position:relative;display:block;grid-column-start:`,
     `;grid-column-end:`,
@@ -310,7 +310,7 @@ const ScaleTicksWrapper = _styledcomponents.default.datalist.withConfig({
 ], ({ isVertical })=>isVertical ? 'b' : 'b', ({ isVertical })=>isVertical ? 'b' : 'c', ({ isVertical })=>isVertical ? 'b' : 'b', ({ isVertical })=>isVertical ? 'c' : 'b');
 const StyledRange = (0, _styledcomponents.default)(_SliderBasestyles.BaseStyledRange).withConfig({
     displayName: "Single.styles__StyledRange",
-    componentId: "sc-76a27e11-13"
+    componentId: "sc-473ef018-13"
 })([
     `position:relative;z-index:1;&::-webkit-slider-thumb{pointer-events:`,
     `;}.`,
@@ -319,10 +319,10 @@ const StyledRange = (0, _styledcomponents.default)(_SliderBasestyles.BaseStyledR
     `);top:calc(50% - var(`,
     `) / 2);left:calc(50% - (100cqh + var(`,
     `,0rem)) / 2);margin-left:0;transform:rotate(-90deg);}`
-], ({ showPointer })=>showPointer === false ? 'none' : 'auto', _Slidertokens.classes.verticalOrientation, _Slidertokens.tokens.thumbSize, _Slidertokens.tokens.size, _Slidertokens.tokens.size, _Slidertokens.tokens.thumbSize);
+], ({ showPointer })=>showPointer === false ? 'none' : 'auto', _Slidertokens.classes.verticalOrientation, _Slidertokens.tokens.thumbWidth, _Slidertokens.tokens.size, _Slidertokens.tokens.size, _Slidertokens.tokens.thumbWidth);
 const SliderBaseWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Single.styles__SliderBaseWrapper",
-    componentId: "sc-76a27e11-14"
+    componentId: "sc-473ef018-14"
 })([
     `display:flex;flex:1;position:relative;&:has(`,
     `:disabled) `,
@@ -343,7 +343,7 @@ const SliderBaseWrapper = _styledcomponents.default.div.withConfig({
 ], StyledRange, ScaleTicksWrapper, ScaleTickLabel, _Slidertokens.classes.valuePlacementTop, _Slidertokens.tokens.currentValueTopOffset, _Slidertokens.classes.rangeValuesPlacementOuter, StyledRangeValue, _Slidertokens.classes.maxRangeValue, _Slidertokens.classes.scalePlacementTop, _Slidertokens.tokens.valueLineHeight, _Slidertokens.classes.rangeValuesPlacementInner, StyledRangeValue, _Slidertokens.tokens.rangeValueHorizontalMargin, _Slidertokens.classes.maxRangeValue, _Slidertokens.tokens.rangeValueHorizontalMargin);
 const SingleWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Single.styles__SingleWrapper",
-    componentId: "sc-76a27e11-15"
+    componentId: "sc-473ef018-15"
 })([
     `display:flex;width:100%;opacity:var(`,
     `);&.`,

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

@@ -26,15 +26,28 @@ _export(exports, {
     }
 });
 const _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
+const _mixins = require("../../../../mixins");
 const _Slidertokens = require("../../Slider.tokens");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
+const thumbTokens = {
+    width: _Slidertokens.tokens.thumbWidth,
+    height: _Slidertokens.tokens.thumbHeight,
+    borderRadius: _Slidertokens.tokens.thumbBorderRadius,
+    borderWidth: _Slidertokens.tokens.thumbBorderWidth,
+    borderColor: _Slidertokens.tokens.thumbBorderColor,
+    focusBorderColor: _Slidertokens.tokens.thumbFocusBorderColor,
+    background: _Slidertokens.tokens.thumbBackgroundColor,
+    innerContent: _Slidertokens.tokens.thumbInnerContent
+};
+const thumb = (0, _mixins.applySliderThumb)(thumbTokens);
+const thumbFocused = (0, _mixins.applySliderThumbFocus)(thumbTokens);
 const Label = _styledcomponents.default.label.withConfig({
     displayName: "SliderBase.styles__Label",
-    componentId: "sc-2d5ccbbf-0"
+    componentId: "sc-a6c1cfe4-0"
 })([
     `font-family:var(`,
     `);font-size:var(`,
@@ -46,7 +59,7 @@ const Label = _styledcomponents.default.label.withConfig({
 ], _Slidertokens.tokens.labelFontFamily, _Slidertokens.tokens.labelFontSize, _Slidertokens.tokens.labelFontStyle, _Slidertokens.tokens.labelFontWeight, _Slidertokens.tokens.labelLetterSpacing, _Slidertokens.tokens.labelLineHeight);
 const LabelWrapper = _styledcomponents.default.div.withConfig({
     displayName: "SliderBase.styles__LabelWrapper",
-    componentId: "sc-2d5ccbbf-1"
+    componentId: "sc-a6c1cfe4-1"
 })([
     `color:var(`,
     `);display:flex;align-items:center;gap:var(`,
@@ -54,14 +67,14 @@ const LabelWrapper = _styledcomponents.default.div.withConfig({
 ], _Slidertokens.tokens.labelColor, _Slidertokens.tokens.labelWrapperGap);
 const BaseSliderContainer = _styledcomponents.default.div.withConfig({
     displayName: "SliderBase.styles__BaseSliderContainer",
-    componentId: "sc-2d5ccbbf-2"
+    componentId: "sc-a6c1cfe4-2"
 })([
     `position:relative;display:grid;align-items:center;height:var(`,
     `);`
 ], _Slidertokens.tokens.size);
 const BaseStyledTrack = _styledcomponents.default.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(`,
@@ -70,39 +83,17 @@ const BaseStyledTrack = _styledcomponents.default.div.withConfig({
 ], _Slidertokens.tokens.railThickness, _Slidertokens.tokens.railBorderRadius, _Slidertokens.tokens.railBackgroundColor);
 const BaseStyledRange = _styledcomponents.default.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;}}`
-], _Slidertokens.tokens.thumbSize, _Slidertokens.tokens.size, _Slidertokens.tokens.thumbSize, _Slidertokens.tokens.thumbSize, _Slidertokens.tokens.thumbHeight, _Slidertokens.tokens.thumbSize, _Slidertokens.tokens.thumbBorderRadius, _Slidertokens.tokens.thumbBorderStyle, _Slidertokens.tokens.thumbBorderWidth, _Slidertokens.tokens.thumbBackgroundColor, _Slidertokens.tokens.thumbBackgroundColor, _Slidertokens.tokens.thumbBorderColor, ({ showPointer })=>showPointer === false ? '0' : '1', _Slidertokens.tokens.thumbInnerContent, _Slidertokens.tokens.thumbBackgroundColor, _Slidertokens.tokens.thumbBackgroundColor, _Slidertokens.tokens.thumbFocusBorderColor, _Slidertokens.tokens.railThickness, _Slidertokens.tokens.thumbSize, _Slidertokens.tokens.thumbHeight, _Slidertokens.tokens.thumbSize, _Slidertokens.tokens.thumbBorderRadius, _Slidertokens.tokens.thumbBorderStyle, _Slidertokens.tokens.thumbBorderWidth, _Slidertokens.tokens.thumbBackgroundColor, _Slidertokens.tokens.thumbBackgroundColor, _Slidertokens.tokens.thumbBorderColor, ({ showPointer })=>showPointer === false ? '0' : '1', _Slidertokens.tokens.thumbInnerContent, _Slidertokens.tokens.thumbBackgroundColor, _Slidertokens.tokens.thumbBackgroundColor, _Slidertokens.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;}}`
+], _Slidertokens.tokens.thumbWidth, _Slidertokens.tokens.size, _Slidertokens.tokens.thumbWidth, thumb, ({ showPointer })=>showPointer === false ? '0' : '1', thumbFocused, _Slidertokens.tokens.railThickness, thumb, ({ showPointer })=>showPointer === false ? '0' : '1', thumbFocused);

package/dist/styled-components/cjs/components/Tabs/hooks/useTabItem.js

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

package/dist/styled-components/cjs/components/Tabs/tokens.js

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

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

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