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

package/dist/emotion/cjs/components/DateTimePicker/utils/getCalendarEdgeDates.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getCalendarEdgeDates", {
+    enumerable: true,
+    get: function() {
+        return getCalendarEdgeDates;
+    }
+});
+const hasTime = (date)=>date.getHours() !== 0 || date.getMinutes() !== 0 || date.getSeconds() !== 0 || date.getMilliseconds() !== 0;
+const getCalendarEdgeDates = (min, max, type, includeEdgeDates)=>{
+    if (type !== 'Days' || includeEdgeDates) {
+        return {
+            calendarMin: min,
+            calendarMax: max
+        };
+    }
+    let calendarMin = min;
+    if (min) {
+        calendarMin = new Date(min);
+        calendarMin.setDate(calendarMin.getDate() - 1);
+    }
+    let calendarMax = max;
+    if (max && hasTime(max)) {
+        calendarMax = new Date(max);
+        calendarMax.setDate(calendarMax.getDate() + 1);
+    }
+    return {
+        calendarMin,
+        calendarMax
+    };
+};

package/dist/emotion/cjs/components/DateTimePicker/utils/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _export_star(require("./getFormattedDateTime"), exports);
 _export_star(require("./normalizeDateTime"), exports);
+_export_star(require("./getCalendarEdgeDates"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/emotion/cjs/components/Drawer/Drawer.js

@@ -76,7 +76,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const drawerRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, zIndex, popupInfo, withBlur, children, view, size, width, height, isOpen, opened, initialFocusRef, focusAfterRef, animationInfo, className, customBackgroundColor, customContentBackgroundColor, onClose, onOverlayClick, onEscKeyDown, offset, frame, positionFixed = false, borderRadius = 'none', placement = 'right', closeOnEsc = true, closeOnOverlayClick = true, asModal = true, draggable, ...rest }, outerRef)=>{
+const drawerRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, zIndex, popupInfo, withBlur, overlayProps, children, view, size, width, height, isOpen, opened, initialFocusRef, focusAfterRef, animationInfo, className, customBackgroundColor, customContentBackgroundColor, onClose, onOverlayClick, onEscKeyDown, offset, frame, positionFixed = false, borderRadius = 'none', placement = 'right', closeOnEsc = true, closeOnOverlayClick = true, asModal = true, draggable, ...rest }, outerRef)=>{
         const innerIsOpen = Boolean(isOpen || opened);
         const trapRef = (0, _hooks.useFocusTrap)(true, initialFocusRef, focusAfterRef);
         const popupController = (0, _Popup.usePopupContext)();
@@ -86,6 +86,7 @@ const drawerRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, zIndex, p
         const overlayBackgroundToken = withBlur ? `var(${_Drawertokens.tokens.drawerOverlayWithBlurColor})` : `var(${_Drawertokens.tokens.drawerOverlayColor})`;
         const innerWidth = width ? (0, _utils.getSizeValueFromProp)(width) : '100%';
         const innerHeight = height ? (0, _utils.getSizeValueFromProp)(height) : '100%';
+        const overlayPosition = overlayProps?.position ?? (frame === undefined || frame === 'document' ? 'fixed' : 'absolute');
         const placementClass = placement ? _Drawertokens.classes[`${placement}Placement`] : undefined;
         const { drawerInfo } = (0, _hooks1.useDrawer)({
             id: innerId,
@@ -136,7 +137,11 @@ const drawerRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, zIndex, p
                 withBlur: withBlur,
                 transparent: transparent,
                 isClickable: closeOnOverlayClick,
-                onOverlayClick: onDrawerOverlayKeyDown
+                onOverlayClick: onDrawerOverlayKeyDown,
+                style: {
+                    ...overlayProps,
+                    position: overlayPosition
+                }
             })),
             ...rest
         }, /*#__PURE__*/ _react.default.createElement(Root, {

package/dist/emotion/cjs/components/LinkButton/LinkButton.js

@@ -17,10 +17,17 @@ _export(exports, {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _constants = require("../../utils/constants");
 const _base = require("./variations/_view/base");
 const _base1 = require("./variations/_size/base");
 const _base2 = require("./variations/_disabled/base");
 const _LinkButtonstyles = require("./LinkButton.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();
@@ -106,7 +113,9 @@ const linkButtonRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, ref)
             }
         }, contentLeft && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentLeft, {
             hasContent: hasContent
-        }, contentLeft), txt ? /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.LinkButtonText, null, txt) : children, additionalContent && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledAdditionalContent, null, additionalContent), contentRight && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentRight, {
+        }, contentLeft), txt ? /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.LinkButtonText, {
+            className: (0, _classnames.default)(_constants.GRADIENT_TEXT_CLASS)
+        }, txt) : children, additionalContent && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledAdditionalContent, null, additionalContent), contentRight && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledContentRight, {
             hasContent: hasContent
         }, contentRight)), !disabled && isLoading && /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.Loader, null, loader || /*#__PURE__*/ _react.default.createElement(_LinkButtonstyles.StyledSpinner, null)));
     });

package/dist/emotion/cjs/components/Modal/Modal.js

@@ -72,10 +72,10 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 // issue #823
 const Popup = (0, _engines.component)(_Popup.popupConfig);
-const modalRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, withAnimation, onClose, onOverlayClick, onEscKeyDown, closeOnEsc = true, closeOnOverlayClick = true, withBlur, isFocusTrapped = true, initialFocusRef, focusAfterRef, zIndex, popupInfo, children, view, opened, isOpen, hasBody, hasClose, resizable, draggable, overlay, ...rest }, outerRootRef)=>{
+const modalRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ id, withAnimation, onClose, onOverlayClick, onEscKeyDown, closeOnEsc = true, closeOnOverlayClick = true, withBlur, isFocusTrapped = true, initialFocusRef, focusAfterRef, focusTrapSelectors, zIndex, popupInfo, children, view, opened, isOpen, hasBody, hasClose, resizable, draggable, overlay, ...rest }, outerRootRef)=>{
         const innerIsOpen = Boolean(isOpen || opened);
         const innerHasClose = hasClose === undefined && hasBody || hasClose;
-        const trapRef = (0, _hooks.useFocusTrap)(isFocusTrapped, initialFocusRef, focusAfterRef, true, !isFocusTrapped);
+        const trapRef = (0, _hooks.useFocusTrap)(isFocusTrapped, initialFocusRef, focusAfterRef, true, !isFocusTrapped, focusTrapSelectors);
         const popupController = (0, _Popup.usePopupContext)();
         const innerRef = (0, _hooks.useForkRef)(trapRef, outerRootRef);
         const uniqId = (0, _utils.safeUseId)();

package/dist/emotion/cjs/components/Notification/NotificationsContext.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get NotificationsContext () {
+        return NotificationsContext;
+    },
+    get useNotifications () {
+        return useNotifications;
+    }
+});
+const _react = require("react");
+const NotificationsContext = (0, _react.createContext)(null);
+const useNotifications = ()=>{
+    const context = (0, _react.useContext)(NotificationsContext);
+    if (!context) {
+        throw new Error('useNotifications must be used within a NotificationsProvider');
+    }
+    return context;
+};

package/dist/emotion/cjs/components/Notification/NotificationsPortal.js

@@ -14,7 +14,7 @@ const _styled = /*#__PURE__*/ _interop_require_default(require("@emotion/styled"
 const _engines = require("../../engines");
 const _utils = require("../../utils");
 const _Popup = require("../Popup");
-const _NotificationsStore = require("./NotificationsStore");
+const _NotificationsContext = require("./NotificationsContext");
 const _Notificationstyles = require("./Notification.styles");
 const _Notificationtokens = require("./Notification.tokens");
 function _interop_require_default(obj) {
@@ -66,11 +66,12 @@ function _interop_require_wildcard(obj, nodeInterop) {
 // issue #823
 const Popup = (0, _engines.component)(_Popup.popupConfig);
 const StyledPopup = /*#__PURE__*/ (0, _styled.default)(Popup, {
-    target: "el7fuu0",
+    target: "e11fxyis0",
     label: "StyledPopup"
 })("& > .", _Popup.popupClasses.root, "{overflow:hidden;}");
 const NotificationsPortal = ({ config, frame, placement = 'bottom-right', UNSAFE_SSR_ENABLED, className })=>{
     const { notifications } = (0, _react1.useStoreon)('notifications');
+    const { closeNotification } = (0, _NotificationsContext.useNotifications)();
     const Notification = (0, _react.useMemo)(()=>(0, _engines.component)(config), []);
     const hasLeftAnimationClass = [
         'left',
@@ -94,7 +95,7 @@ const NotificationsPortal = ({ config, frame, placement = 'bottom-right', UNSAFE
         }, /*#__PURE__*/ _react.default.createElement(Notification, {
             key: id,
             id: id,
-            onCloseButtonClick: ()=>(0, _NotificationsStore.closeNotification)(id),
+            onCloseButtonClick: ()=>closeNotification(id),
             ...rest
         }))))));
 };

package/dist/emotion/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/emotion/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/emotion/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/emotion/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/emotion/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/emotion/cjs/components/Slider/components/Single/Single.styles.js

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

@@ -26,29 +26,42 @@ _export(exports, {
     }
 });
 const _styled = /*#__PURE__*/ _interop_require_default(require("@emotion/styled"));
+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 = (0, /*#__PURE__*/ _styled.default)("label", {
-    target: "e4cidsi0",
+    target: "evk726k0",
     label: "Label"
 })("font-family:var(", _Slidertokens.tokens.labelFontFamily, ");font-size:var(", _Slidertokens.tokens.labelFontSize, ");font-style:var(", _Slidertokens.tokens.labelFontStyle, ");font-weight:var(", _Slidertokens.tokens.labelFontWeight, ");letter-spacing:var(", _Slidertokens.tokens.labelLetterSpacing, ");line-height:var(", _Slidertokens.tokens.labelLineHeight, ");");
 const LabelWrapper = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e4cidsi1",
+    target: "evk726k1",
     label: "LabelWrapper"
 })("color:var(", _Slidertokens.tokens.labelColor, ");display:flex;align-items:center;gap:var(", _Slidertokens.tokens.labelWrapperGap, ");");
 const BaseSliderContainer = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e4cidsi2",
+    target: "evk726k2",
     label: "BaseSliderContainer"
 })("position:relative;display:grid;align-items:center;height:var(", _Slidertokens.tokens.size, ");");
 const BaseStyledTrack = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e4cidsi3",
+    target: "evk726k3",
     label: "BaseStyledTrack"
 })("position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);height:var(", _Slidertokens.tokens.railThickness, ");border-radius:var(", _Slidertokens.tokens.railBorderRadius, ");background-color:var(", _Slidertokens.tokens.railBackgroundColor, ");pointer-events:none;");
 const BaseStyledRange = (0, /*#__PURE__*/ _styled.default)("input", {
-    target: "e4cidsi4",
+    target: "evk726k4",
     label: "BaseStyledRange"
-})("appearance:none;outline:none;background:transparent;border:none;width:calc(100% + var(", _Slidertokens.tokens.thumbSize, ",0rem));height:var(", _Slidertokens.tokens.size, ");margin:0;margin-left:calc(var(", _Slidertokens.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(", _Slidertokens.tokens.thumbSize, ");height:var(", _Slidertokens.tokens.thumbHeight, ",var(", _Slidertokens.tokens.thumbSize, "));border-radius:var(", _Slidertokens.tokens.thumbBorderRadius, ",50%);cursor:grab;border-style:var(", _Slidertokens.tokens.thumbBorderStyle, ",solid);border-color:transparent;border-width:var(", _Slidertokens.tokens.thumbBorderWidth, ",0.0625rem);background:none no-repeat center,linear-gradient(var(", _Slidertokens.tokens.thumbBackgroundColor, "),var(", _Slidertokens.tokens.thumbBackgroundColor, ")) padding-box,var(", _Slidertokens.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(", _Slidertokens.tokens.thumbInnerContent, ",none) no-repeat center,linear-gradient(var(", _Slidertokens.tokens.thumbBackgroundColor, "),var(", _Slidertokens.tokens.thumbBackgroundColor, ")) padding-box,var(", _Slidertokens.tokens.thumbFocusBorderColor, ") border-box;}&::-webkit-slider-thumb:active{cursor:grabbing;}&::-moz-range-track{background:transparent;height:var(", _Slidertokens.tokens.railThickness, ");}&::-moz-range-progress{background:transparent;}&::-moz-range-thumb{width:var(", _Slidertokens.tokens.thumbSize, ");height:var(", _Slidertokens.tokens.thumbHeight, ",var(", _Slidertokens.tokens.thumbSize, "));border-radius:var(", _Slidertokens.tokens.thumbBorderRadius, ",50%);cursor:grab;border-style:var(", _Slidertokens.tokens.thumbBorderStyle, ",solid);border-color:transparent;border-width:var(", _Slidertokens.tokens.thumbBorderWidth, ",0.0625rem);background:none no-repeat center,linear-gradient(var(", _Slidertokens.tokens.thumbBackgroundColor, "),var(", _Slidertokens.tokens.thumbBackgroundColor, ")) padding-box,var(", _Slidertokens.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(", _Slidertokens.tokens.thumbInnerContent, ",none) no-repeat center,linear-gradient(var(", _Slidertokens.tokens.thumbBackgroundColor, "),var(", _Slidertokens.tokens.thumbBackgroundColor, ")) padding-box,var(", _Slidertokens.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(", _Slidertokens.tokens.thumbWidth, ",0rem));height:var(", _Slidertokens.tokens.size, ");margin:0;margin-left:calc(var(", _Slidertokens.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(", _Slidertokens.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;}}");