@sberbusiness/triplex-next 0.45.0 → 0.47.0

package/components/SliderExtended/components/SliderExtendedTooltip/SliderExtendedTooltip.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useContext, useCallback } from "react";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
 import { createSizeToClassNameMap } from "../../../../utils/classNameMaps.js";
 import { SliderExtendedContext } from "../../SliderExtendedContext.js";
-import { setForwardedRef } from "../../utils.js";
-const sliderExtendedTooltipOverlay = "sliderExtendedTooltipOverlay__cd02a194";
-const lg = "lg__ddd15eb6";
-const tooltipBody = "tooltipBody__59f82f83";
-const tooltipTip = "tooltipTip__ab07d9c5";
+import { setForwardedRef } from "../../../../helpers/setForwardedRef.js";
+const sliderExtendedTooltipOverlay = "sliderExtendedTooltipOverlay__e58e0c50";
+const lg = "lg__f0151eda";
+const tooltipBody = "tooltipBody__0b5641e1";
+const tooltipTip = "tooltipTip__fef750c6";
 const styles = {
   sliderExtendedTooltipOverlay,
   lg,

package/components/SliderExtended/components/SliderExtendedTooltip/SliderExtendedTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderExtendedTooltip.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedTooltip/SliderExtendedTooltip.tsx"],"sourcesContent":["import React, { useCallback, useContext, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { SliderExtendedContext } from \"../../SliderExtendedContext\";\nimport { setForwardedRef } from \"../../utils\";\nimport styles from \"./styles/SliderExtendedTooltip.module.less\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Половина ширины уголка тултипа, px. */\nconst TIP_HALF_WIDTH = 8;\n\n/** Минимальный отступ тултипа от края полосы слайдера, px. */\nconst OFFSET_FROM_SIDE = 16;\n\n/**\n * Возвращает сдвиг тела тултипа по горизонтали, px.\n * У краёв полосы тултип сдвигается к центру, чтобы не выходить за её границы, в середине сдвиг равен нулю.\n */\nconst getTooltipBodyOffset = ({\n    contentWidth,\n    max,\n    min,\n    value,\n}: {\n    contentWidth: number;\n    max: number;\n    min: number;\n    value?: number;\n}): number => {\n    if (value === undefined || max === min) {\n        return 0;\n    }\n\n    const normalizedValue = (value - min) / (max - min);\n\n    return (contentWidth / 2 - TIP_HALF_WIDTH - OFFSET_FROM_SIDE) * (1 - 2 * normalizedValue);\n};\n\n/** Свойства компонента SliderExtendedTooltip. */\nexport interface ISliderExtendedTooltipProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Значение позиции ползунка, над которым показан тултип. Нужно для сдвига тултипа у краёв полосы. */\n    value?: number;\n}\n\n/**\n * Компонент SliderExtendedTooltip — подсказка над ползунком.\n * Рендерится внутри SliderExtended.Dot и видима, пока ползунок в фокусе или под курсором.\n */\nexport const SliderExtendedTooltip = React.forwardRef<HTMLDivElement, ISliderExtendedTooltipProps>(\n    ({ children, className, value, ...htmlDivAttributes }, ref) => {\n        // Узел тултипа в состоянии, а не в ref: его ширина нужна во время рендера для расчёта сдвига.\n        const [contentNode, setContentNode] = useState<HTMLDivElement | null>(null);\n        const { min, max, size } = useContext(SliderExtendedContext);\n\n        const setRef = useCallback(\n            (instance: HTMLDivElement | null) => {\n                setContentNode(instance);\n                setForwardedRef(ref, instance);\n            },\n            [ref],\n        );\n\n        const offset = getTooltipBodyOffset({ contentWidth: contentNode?.clientWidth ?? 0, max, min, value });\n\n        return (\n            <div\n                className={clsx(styles.sliderExtendedTooltipOverlay, sizeToClassNameMap[size], className)}\n                {...htmlDivAttributes}\n                ref={setRef}\n            >\n                <div className={styles.tooltipBody} style={{ left: `${offset}px` }}>\n                    {children}\n                </div>\n                <div className={styles.tooltipTip} />\n            </div>\n        );\n    },\n);\n\nSliderExtendedTooltip.displayName = \"SliderExtendedTooltip\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAOA,MAAM,qBAAqB,yBAAyB,MAAM;AAG1D,MAAM,iBAAiB;AAGvB,MAAM,mBAAmB;AAMzB,MAAM,uBAAuB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAKc;AACV,MAAI,UAAU,UAAa,QAAQ,KAAK;AACpC,WAAO;AAAA,EACX;AAEA,QAAM,mBAAmB,QAAQ,QAAQ,MAAM;AAE/C,UAAQ,eAAe,IAAI,iBAAiB,qBAAqB,IAAI,IAAI;AAC7E;AAYO,MAAM,wBAAwB,MAAM;AAAA,EACvC,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,kBAAA,GAAqB,QAAQ;AAE3D,UAAM,CAAC,aAAa,cAAc,IAAI,SAAgC,IAAI;AAC1E,UAAM,EAAE,KAAK,KAAK,KAAA,IAAS,WAAW,qBAAqB;AAE3D,UAAM,SAAS;AAAA,MACX,CAAC,aAAoC;AACjC,uBAAe,QAAQ;AACvB,wBAAgB,KAAK,QAAQ;AAAA,MACjC;AAAA,MACA,CAAC,GAAG;AAAA,IAAA;AAGR,UAAM,SAAS,qBAAqB,EAAE,eAAc,2CAAa,gBAAe,GAAG,KAAK,KAAK,OAAO;AAEpG,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,8BAA8B,mBAAmB,IAAI,GAAG,SAAS;AAAA,QACvF,GAAG;AAAA,QACJ,KAAK;AAAA,QAEL,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAa,OAAO,EAAE,MAAM,GAAG,MAAM,KAAA,GACvD,SAAA,CACL;AAAA,UACA,oBAAC,OAAA,EAAI,WAAW,OAAO,WAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG/C;AACJ;AAEA,sBAAsB,cAAc;"}
+{"version":3,"file":"SliderExtendedTooltip.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedTooltip/SliderExtendedTooltip.tsx"],"sourcesContent":["import React, { useCallback, useContext, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { SliderExtendedContext } from \"../../SliderExtendedContext\";\nimport { setForwardedRef } from \"../../../../helpers/setForwardedRef\";\nimport styles from \"./styles/SliderExtendedTooltip.module.less\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Половина ширины уголка тултипа, px. */\nconst TIP_HALF_WIDTH = 8;\n\n/** Минимальный отступ тултипа от края полосы слайдера, px. */\nconst OFFSET_FROM_SIDE = 16;\n\n/**\n * Возвращает сдвиг тела тултипа по горизонтали, px.\n * У краёв полосы тултип сдвигается к центру, чтобы не выходить за её границы, в середине сдвиг равен нулю.\n */\nconst getTooltipBodyOffset = ({\n    contentWidth,\n    max,\n    min,\n    value,\n}: {\n    contentWidth: number;\n    max: number;\n    min: number;\n    value?: number;\n}): number => {\n    if (value === undefined || max === min) {\n        return 0;\n    }\n\n    const normalizedValue = (value - min) / (max - min);\n\n    return (contentWidth / 2 - TIP_HALF_WIDTH - OFFSET_FROM_SIDE) * (1 - 2 * normalizedValue);\n};\n\n/** Свойства компонента SliderExtendedTooltip. */\nexport interface ISliderExtendedTooltipProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Значение позиции ползунка, над которым показан тултип. Нужно для сдвига тултипа у краёв полосы. */\n    value?: number;\n}\n\n/**\n * Компонент SliderExtendedTooltip — подсказка над ползунком.\n * Рендерится внутри SliderExtended.Dot и видима, пока ползунок в фокусе или под курсором.\n */\nexport const SliderExtendedTooltip = React.forwardRef<HTMLDivElement, ISliderExtendedTooltipProps>(\n    ({ children, className, value, ...htmlDivAttributes }, ref) => {\n        // Узел тултипа в состоянии, а не в ref: его ширина нужна во время рендера для расчёта сдвига.\n        const [contentNode, setContentNode] = useState<HTMLDivElement | null>(null);\n        const { min, max, size } = useContext(SliderExtendedContext);\n\n        const setRef = useCallback(\n            (instance: HTMLDivElement | null) => {\n                setContentNode(instance);\n                setForwardedRef(ref, instance);\n            },\n            [ref],\n        );\n\n        const offset = getTooltipBodyOffset({ contentWidth: contentNode?.clientWidth ?? 0, max, min, value });\n\n        return (\n            <div\n                className={clsx(styles.sliderExtendedTooltipOverlay, sizeToClassNameMap[size], className)}\n                {...htmlDivAttributes}\n                ref={setRef}\n            >\n                <div className={styles.tooltipBody} style={{ left: `${offset}px` }}>\n                    {children}\n                </div>\n                <div className={styles.tooltipTip} />\n            </div>\n        );\n    },\n);\n\nSliderExtendedTooltip.displayName = \"SliderExtendedTooltip\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAOA,MAAM,qBAAqB,yBAAyB,MAAM;AAG1D,MAAM,iBAAiB;AAGvB,MAAM,mBAAmB;AAMzB,MAAM,uBAAuB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAKc;AACV,MAAI,UAAU,UAAa,QAAQ,KAAK;AACpC,WAAO;AAAA,EACX;AAEA,QAAM,mBAAmB,QAAQ,QAAQ,MAAM;AAE/C,UAAQ,eAAe,IAAI,iBAAiB,qBAAqB,IAAI,IAAI;AAC7E;AAYO,MAAM,wBAAwB,MAAM;AAAA,EACvC,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,kBAAA,GAAqB,QAAQ;AAE3D,UAAM,CAAC,aAAa,cAAc,IAAI,SAAgC,IAAI;AAC1E,UAAM,EAAE,KAAK,KAAK,KAAA,IAAS,WAAW,qBAAqB;AAE3D,UAAM,SAAS;AAAA,MACX,CAAC,aAAoC;AACjC,uBAAe,QAAQ;AACvB,wBAAgB,KAAK,QAAQ;AAAA,MACjC;AAAA,MACA,CAAC,GAAG;AAAA,IAAA;AAGR,UAAM,SAAS,qBAAqB,EAAE,eAAc,2CAAa,gBAAe,GAAG,KAAK,KAAK,OAAO;AAEpG,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,8BAA8B,mBAAmB,IAAI,GAAG,SAAS;AAAA,QACvF,GAAG;AAAA,QACJ,KAAK;AAAA,QAEL,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAa,OAAO,EAAE,MAAM,GAAG,MAAM,KAAA,GACvD,SAAA,CACL;AAAA,UACA,oBAAC,OAAA,EAAI,WAAW,OAAO,WAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG/C;AACJ;AAEA,sBAAsB,cAAc;"}

package/components/SliderExtended/components/SliderExtendedTrack/SliderExtendedTrack.js

@@ -1,21 +1,21 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React, { useState, useContext, useRef, useCallback } from "react";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
 import { KeyDownListener } from "../../../KeyDownListener/KeyDownListener.js";
 import "../../../KeyDownListener/ComposedKeyDownListener.js";
 import { EVENT_KEY_CODES } from "../../../../utils/keyboard.js";
 import { createSizeToClassNameMap } from "../../../../utils/classNameMaps.js";
 import { SliderExtendedContext } from "../../SliderExtendedContext.js";
 import { SliderExtendedUtils } from "../../SliderExtendedUtils.js";
-import { setForwardedRef } from "../../utils.js";
+import { setForwardedRef } from "../../../../helpers/setForwardedRef.js";
 import { SliderExtendedMoveHandler } from "../SliderExtendedMoveHandler.js";
 import { SliderExtendedTrackActions } from "./SliderExtendedTrackActions.js";
-const sliderExtendedTrack = "sliderExtendedTrack__9e87b384";
-const lg = "lg__ddd15eb6";
-const focusedByClick = "focusedByClick__f724ee9d";
-const hoverOrDragByMouse = "hoverOrDragByMouse__d8bebcf7";
-const staticSlider = "staticSlider__da50feae";
-const disabled = "disabled__0b574a73";
+const sliderExtendedTrack = "sliderExtendedTrack__8c957491";
+const lg = "lg__f0151eda";
+const focusedByClick = "focusedByClick__bcb819e9";
+const hoverOrDragByMouse = "hoverOrDragByMouse__2b801cbf";
+const staticSlider = "staticSlider__fe117bd4";
+const disabled = "disabled__376f826e";
 const styles = {
   sliderExtendedTrack,
   lg,

package/components/SliderExtended/components/SliderExtendedTrack/SliderExtendedTrack.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderExtendedTrack.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedTrack/SliderExtendedTrack.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { KeyDownListener } from \"@sberbusiness/triplex-next/components/KeyDownListener\";\nimport { EVENT_KEY_CODES } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { SliderExtendedContext } from \"../../SliderExtendedContext\";\nimport { SliderExtendedUtils } from \"../../SliderExtendedUtils\";\nimport { setForwardedRef } from \"../../utils\";\nimport { SliderExtendedMoveHandler, TOnTargetMouseDown, TOnTargetTouchStart } from \"../SliderExtendedMoveHandler\";\nimport { SliderExtendedTrackActions } from \"./SliderExtendedTrackActions\";\nimport styles from \"./styles/SliderExtendedTrack.module.less\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Интервал троттлинга перемещения трека мышью, мс. */\nconst MOUSE_MOVE_WAIT = 100;\n\n/** tabIndex трека, когда слайдер в фокусе. Между ползунками с tabIndex 1 и 3. */\nconst FOCUSED_TAB_INDEX = 2;\n\n/** Свойства компонента SliderExtendedTrack. */\nexport interface ISliderExtendedTrackProps extends React.HTMLAttributes<HTMLSpanElement> {\n    /** Трек не имеет содержимого. */\n    children?: never;\n    /** Трек можно передвигать. Работает только при двух SliderExtended.Dot. По умолчанию true. */\n    draggable?: boolean;\n}\n\n/**\n * Компонент SliderExtendedTrack — заполненная часть полосы слайдера.\n * При одном SliderExtended.Dot тянется от начала полосы до ползунка, при двух — между ползунками\n * и может перемещаться целиком, сдвигая оба ползунка.\n */\nexport const SliderExtendedTrack = React.forwardRef<HTMLSpanElement, ISliderExtendedTrackProps>(\n    (\n        {\n            className,\n            draggable = true,\n            onBlur,\n            onFocus,\n            onMouseDown,\n            onMouseOver,\n            onMouseOut,\n            onTouchStart,\n            style,\n            ...htmlSpanAttributes\n        },\n        ref,\n    ) => {\n        // Элемент в фокусе.\n        const [isFocused, setIsFocused] = useState(false);\n        // Track получил фокус при клике.\n        const [isFocusedByClick, setIsFocusedByClick] = useState(false);\n        // Track в текущий момент перетаскивается мышью.\n        const [isDragged, setIsDragged] = useState(false);\n\n        const {\n            disabled,\n            dots,\n            focused: focusedSlider,\n            isHoverOrDragTrack,\n            railNode,\n            setIsHoverOrDragTrack,\n            reverse,\n            setFocused: setFocusedSlider,\n            steps,\n            size,\n        } = useContext(SliderExtendedContext);\n        // Предыдущая позиция курсора при перемещении SliderExtended.Track.\n        const cursorPrevNormalizedValue = useRef(0);\n\n        const trackRef = useRef<HTMLSpanElement | null>(null);\n\n        // Перемещать трек можно только когда он ограничен двумя ползунками.\n        const innerDraggable = draggable && dots.length > 1;\n        const tabIndex = !disabled && innerDraggable && focusedSlider ? FOCUSED_TAB_INDEX : -1;\n\n        /** Сохраняет узел трека локально (для слушателей перемещения) и пробрасывает во внешний ref. */\n        const setRef = useCallback(\n            (instance: HTMLSpanElement | null) => {\n                trackRef.current = instance;\n                setForwardedRef(ref, instance);\n            },\n            [ref],\n        );\n\n        const handleDocumentMouseUp = (event: MouseEvent) => {\n            setIsDragged(false);\n            // Курсор отпущен за пределами Track.\n            if (event.target !== trackRef.current) {\n                setIsHoverOrDragTrack(false);\n            }\n\n            document.removeEventListener(\"mouseup\", handleDocumentMouseUp);\n        };\n\n        const handleMouseDown =\n            (onTargetMouseDown: TOnTargetMouseDown) => (event: React.MouseEvent<HTMLSpanElement>) => {\n                setIsFocusedByClick(true);\n                setIsDragged(true);\n\n                document.addEventListener(\"mouseup\", handleDocumentMouseUp);\n\n                if (railNode) {\n                    cursorPrevNormalizedValue.current = SliderExtendedUtils.getNormalizedCursorValue({\n                        cursorXPosition: event.clientX,\n                        railNode,\n                    });\n                }\n\n                onTargetMouseDown(event);\n                onMouseDown?.(event);\n            };\n\n        const handleMouseMove = (event: MouseEvent) =>\n            SliderExtendedTrackActions.dragDots({\n                cursorPrevNormalizedValue,\n                cursorXPosition: event.clientX,\n                dots,\n                railNode,\n                reverse,\n                steps,\n            });\n\n        const handleDocumentTouchEnd = (event: TouchEvent) => {\n            if (event.cancelable) {\n                event.preventDefault();\n            }\n\n            setIsDragged(false);\n            // Курсор отпущен за пределами Track.\n            if (event.target !== trackRef.current) {\n                setIsHoverOrDragTrack(false);\n            }\n\n            document.removeEventListener(\"touchend\", handleDocumentTouchEnd);\n        };\n\n        const handleTouchStart =\n            (onTargetTouchStart: TOnTargetTouchStart) => (event: React.TouchEvent<HTMLSpanElement>) => {\n                if (event.touches.length !== 1) {\n                    return;\n                }\n\n                setIsFocusedByClick(true);\n                setIsDragged(true);\n\n                document.addEventListener(\"touchend\", handleDocumentTouchEnd);\n\n                if (railNode) {\n                    cursorPrevNormalizedValue.current = SliderExtendedUtils.getNormalizedCursorValue({\n                        cursorXPosition: event.touches[0].clientX,\n                        railNode,\n                    });\n                }\n\n                onTargetTouchStart(event);\n                onTouchStart?.(event);\n            };\n\n        const handleTouchMove = (event: TouchEvent) => {\n            if (event.touches.length !== 1) {\n                return;\n            }\n\n            if (event.cancelable) {\n                event.preventDefault();\n            }\n\n            SliderExtendedTrackActions.dragDots({\n                cursorPrevNormalizedValue,\n                cursorXPosition: event.touches[0].clientX,\n                dots,\n                railNode,\n                reverse,\n                steps,\n            });\n        };\n\n        /** Обработчик сочетаний клавиш, меняющих значение слайдера на меньшее. */\n        const handleKeyDownToMoveLeft = (event: KeyboardEvent) => {\n            // Предотвращает скролл страницы.\n            event.preventDefault();\n\n            SliderExtendedTrackActions.moveToPrevStep(dots, steps);\n        };\n\n        /** Обработчик сочетаний клавиш, меняющих значение слайдера на большее. */\n        const handleKeyDownToMoveRight = (event: KeyboardEvent) => {\n            // Предотвращает скролл страницы.\n            event.preventDefault();\n\n            SliderExtendedTrackActions.moveToNextStep(dots, steps);\n        };\n\n        const handleFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n            if (!focusedSlider) {\n                setFocusedSlider(true);\n            }\n\n            setIsFocused(true);\n            onFocus?.(event);\n        };\n\n        const handleBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n            if (focusedSlider) {\n                setFocusedSlider(false);\n            }\n\n            setIsFocusedByClick(false);\n            setIsFocused(false);\n            onBlur?.(event);\n        };\n\n        const handleMouseOver = (event: React.MouseEvent<HTMLSpanElement>) => {\n            setIsHoverOrDragTrack(true);\n            onMouseOver?.(event);\n        };\n\n        const handleMouseOut = (event: React.MouseEvent<HTMLSpanElement>) => {\n            // Track в текущий момент не перетаскивается мышью.\n            if (!isDragged) {\n                setIsHoverOrDragTrack(false);\n            }\n            onMouseOut?.(event);\n        };\n\n        if (!dots.length) {\n            return null;\n        }\n\n        const { left, right } = SliderExtendedTrackActions.getTrackPosition({ dots, reverse });\n\n        return (\n            <>\n                {isFocused && (\n                    <>\n                        <KeyDownListener\n                            onMatch={handleKeyDownToMoveLeft}\n                            eventKeyCode={[EVENT_KEY_CODES.ARROW_LEFT, EVENT_KEY_CODES.ARROW_DOWN]}\n                        />\n                        <KeyDownListener\n                            onMatch={handleKeyDownToMoveRight}\n                            eventKeyCode={[EVENT_KEY_CODES.ARROW_RIGHT, EVENT_KEY_CODES.ARROW_UP]}\n                        />\n                    </>\n                )}\n\n                <SliderExtendedMoveHandler\n                    mouseMoveWait={MOUSE_MOVE_WAIT}\n                    onMouseMove={handleMouseMove}\n                    onTouchMove={handleTouchMove}\n                    targetRef={trackRef}\n                >\n                    {({ onTargetMouseDown, onTargetTouchStart }) => (\n                        <span\n                            role=\"button\"\n                            tabIndex={tabIndex}\n                            {...htmlSpanAttributes}\n                            className={clsx(styles.sliderExtendedTrack, sizeToClassNameMap[size], className, {\n                                [styles.disabled]: disabled,\n                                [styles.focusedByClick]: isFocusedByClick,\n                                [styles.hoverOrDragByMouse]: isHoverOrDragTrack,\n                                // Не перетаскиваемый.\n                                [styles.staticSlider]: !innerDraggable,\n                            })}\n                            onBlur={handleBlur}\n                            onFocus={handleFocus}\n                            onMouseDown={handleMouseDown(onTargetMouseDown)}\n                            onMouseOver={handleMouseOver}\n                            onMouseOut={handleMouseOut}\n                            onTouchStart={handleTouchStart(onTargetTouchStart)}\n                            ref={setRef}\n                            style={{\n                                ...style,\n                                left: `${left}%`,\n                                right: `${right}%`,\n                            }}\n                        />\n                    )}\n                </SliderExtendedMoveHandler>\n            </>\n        );\n    },\n);\n\nSliderExtendedTrack.displayName = \"SliderExtendedTrack\";\n"],"names":["disabled"],"mappings":"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"}
+{"version":3,"file":"SliderExtendedTrack.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedTrack/SliderExtendedTrack.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { KeyDownListener } from \"@sberbusiness/triplex-next/components/KeyDownListener\";\nimport { EVENT_KEY_CODES } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { SliderExtendedContext } from \"../../SliderExtendedContext\";\nimport { SliderExtendedUtils } from \"../../SliderExtendedUtils\";\nimport { setForwardedRef } from \"../../../../helpers/setForwardedRef\";\nimport { SliderExtendedMoveHandler, TOnTargetMouseDown, TOnTargetTouchStart } from \"../SliderExtendedMoveHandler\";\nimport { SliderExtendedTrackActions } from \"./SliderExtendedTrackActions\";\nimport styles from \"./styles/SliderExtendedTrack.module.less\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Интервал троттлинга перемещения трека мышью, мс. */\nconst MOUSE_MOVE_WAIT = 100;\n\n/** tabIndex трека, когда слайдер в фокусе. Между ползунками с tabIndex 1 и 3. */\nconst FOCUSED_TAB_INDEX = 2;\n\n/** Свойства компонента SliderExtendedTrack. */\nexport interface ISliderExtendedTrackProps extends React.HTMLAttributes<HTMLSpanElement> {\n    /** Трек не имеет содержимого. */\n    children?: never;\n    /** Трек можно передвигать. Работает только при двух SliderExtended.Dot. По умолчанию true. */\n    draggable?: boolean;\n}\n\n/**\n * Компонент SliderExtendedTrack — заполненная часть полосы слайдера.\n * При одном SliderExtended.Dot тянется от начала полосы до ползунка, при двух — между ползунками\n * и может перемещаться целиком, сдвигая оба ползунка.\n */\nexport const SliderExtendedTrack = React.forwardRef<HTMLSpanElement, ISliderExtendedTrackProps>(\n    (\n        {\n            className,\n            draggable = true,\n            onBlur,\n            onFocus,\n            onMouseDown,\n            onMouseOver,\n            onMouseOut,\n            onTouchStart,\n            style,\n            ...htmlSpanAttributes\n        },\n        ref,\n    ) => {\n        // Элемент в фокусе.\n        const [isFocused, setIsFocused] = useState(false);\n        // Track получил фокус при клике.\n        const [isFocusedByClick, setIsFocusedByClick] = useState(false);\n        // Track в текущий момент перетаскивается мышью.\n        const [isDragged, setIsDragged] = useState(false);\n\n        const {\n            disabled,\n            dots,\n            focused: focusedSlider,\n            isHoverOrDragTrack,\n            railNode,\n            setIsHoverOrDragTrack,\n            reverse,\n            setFocused: setFocusedSlider,\n            steps,\n            size,\n        } = useContext(SliderExtendedContext);\n        // Предыдущая позиция курсора при перемещении SliderExtended.Track.\n        const cursorPrevNormalizedValue = useRef(0);\n\n        const trackRef = useRef<HTMLSpanElement | null>(null);\n\n        // Перемещать трек можно только когда он ограничен двумя ползунками.\n        const innerDraggable = draggable && dots.length > 1;\n        const tabIndex = !disabled && innerDraggable && focusedSlider ? FOCUSED_TAB_INDEX : -1;\n\n        /** Сохраняет узел трека локально (для слушателей перемещения) и пробрасывает во внешний ref. */\n        const setRef = useCallback(\n            (instance: HTMLSpanElement | null) => {\n                trackRef.current = instance;\n                setForwardedRef(ref, instance);\n            },\n            [ref],\n        );\n\n        const handleDocumentMouseUp = (event: MouseEvent) => {\n            setIsDragged(false);\n            // Курсор отпущен за пределами Track.\n            if (event.target !== trackRef.current) {\n                setIsHoverOrDragTrack(false);\n            }\n\n            document.removeEventListener(\"mouseup\", handleDocumentMouseUp);\n        };\n\n        const handleMouseDown =\n            (onTargetMouseDown: TOnTargetMouseDown) => (event: React.MouseEvent<HTMLSpanElement>) => {\n                setIsFocusedByClick(true);\n                setIsDragged(true);\n\n                document.addEventListener(\"mouseup\", handleDocumentMouseUp);\n\n                if (railNode) {\n                    cursorPrevNormalizedValue.current = SliderExtendedUtils.getNormalizedCursorValue({\n                        cursorXPosition: event.clientX,\n                        railNode,\n                    });\n                }\n\n                onTargetMouseDown(event);\n                onMouseDown?.(event);\n            };\n\n        const handleMouseMove = (event: MouseEvent) =>\n            SliderExtendedTrackActions.dragDots({\n                cursorPrevNormalizedValue,\n                cursorXPosition: event.clientX,\n                dots,\n                railNode,\n                reverse,\n                steps,\n            });\n\n        const handleDocumentTouchEnd = (event: TouchEvent) => {\n            if (event.cancelable) {\n                event.preventDefault();\n            }\n\n            setIsDragged(false);\n            // Курсор отпущен за пределами Track.\n            if (event.target !== trackRef.current) {\n                setIsHoverOrDragTrack(false);\n            }\n\n            document.removeEventListener(\"touchend\", handleDocumentTouchEnd);\n        };\n\n        const handleTouchStart =\n            (onTargetTouchStart: TOnTargetTouchStart) => (event: React.TouchEvent<HTMLSpanElement>) => {\n                if (event.touches.length !== 1) {\n                    return;\n                }\n\n                setIsFocusedByClick(true);\n                setIsDragged(true);\n\n                document.addEventListener(\"touchend\", handleDocumentTouchEnd);\n\n                if (railNode) {\n                    cursorPrevNormalizedValue.current = SliderExtendedUtils.getNormalizedCursorValue({\n                        cursorXPosition: event.touches[0].clientX,\n                        railNode,\n                    });\n                }\n\n                onTargetTouchStart(event);\n                onTouchStart?.(event);\n            };\n\n        const handleTouchMove = (event: TouchEvent) => {\n            if (event.touches.length !== 1) {\n                return;\n            }\n\n            if (event.cancelable) {\n                event.preventDefault();\n            }\n\n            SliderExtendedTrackActions.dragDots({\n                cursorPrevNormalizedValue,\n                cursorXPosition: event.touches[0].clientX,\n                dots,\n                railNode,\n                reverse,\n                steps,\n            });\n        };\n\n        /** Обработчик сочетаний клавиш, меняющих значение слайдера на меньшее. */\n        const handleKeyDownToMoveLeft = (event: KeyboardEvent) => {\n            // Предотвращает скролл страницы.\n            event.preventDefault();\n\n            SliderExtendedTrackActions.moveToPrevStep(dots, steps);\n        };\n\n        /** Обработчик сочетаний клавиш, меняющих значение слайдера на большее. */\n        const handleKeyDownToMoveRight = (event: KeyboardEvent) => {\n            // Предотвращает скролл страницы.\n            event.preventDefault();\n\n            SliderExtendedTrackActions.moveToNextStep(dots, steps);\n        };\n\n        const handleFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n            if (!focusedSlider) {\n                setFocusedSlider(true);\n            }\n\n            setIsFocused(true);\n            onFocus?.(event);\n        };\n\n        const handleBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n            if (focusedSlider) {\n                setFocusedSlider(false);\n            }\n\n            setIsFocusedByClick(false);\n            setIsFocused(false);\n            onBlur?.(event);\n        };\n\n        const handleMouseOver = (event: React.MouseEvent<HTMLSpanElement>) => {\n            setIsHoverOrDragTrack(true);\n            onMouseOver?.(event);\n        };\n\n        const handleMouseOut = (event: React.MouseEvent<HTMLSpanElement>) => {\n            // Track в текущий момент не перетаскивается мышью.\n            if (!isDragged) {\n                setIsHoverOrDragTrack(false);\n            }\n            onMouseOut?.(event);\n        };\n\n        if (!dots.length) {\n            return null;\n        }\n\n        const { left, right } = SliderExtendedTrackActions.getTrackPosition({ dots, reverse });\n\n        return (\n            <>\n                {isFocused && (\n                    <>\n                        <KeyDownListener\n                            onMatch={handleKeyDownToMoveLeft}\n                            eventKeyCode={[EVENT_KEY_CODES.ARROW_LEFT, EVENT_KEY_CODES.ARROW_DOWN]}\n                        />\n                        <KeyDownListener\n                            onMatch={handleKeyDownToMoveRight}\n                            eventKeyCode={[EVENT_KEY_CODES.ARROW_RIGHT, EVENT_KEY_CODES.ARROW_UP]}\n                        />\n                    </>\n                )}\n\n                <SliderExtendedMoveHandler\n                    mouseMoveWait={MOUSE_MOVE_WAIT}\n                    onMouseMove={handleMouseMove}\n                    onTouchMove={handleTouchMove}\n                    targetRef={trackRef}\n                >\n                    {({ onTargetMouseDown, onTargetTouchStart }) => (\n                        <span\n                            role=\"button\"\n                            tabIndex={tabIndex}\n                            {...htmlSpanAttributes}\n                            className={clsx(styles.sliderExtendedTrack, sizeToClassNameMap[size], className, {\n                                [styles.disabled]: disabled,\n                                [styles.focusedByClick]: isFocusedByClick,\n                                [styles.hoverOrDragByMouse]: isHoverOrDragTrack,\n                                // Не перетаскиваемый.\n                                [styles.staticSlider]: !innerDraggable,\n                            })}\n                            onBlur={handleBlur}\n                            onFocus={handleFocus}\n                            onMouseDown={handleMouseDown(onTargetMouseDown)}\n                            onMouseOver={handleMouseOver}\n                            onMouseOut={handleMouseOut}\n                            onTouchStart={handleTouchStart(onTargetTouchStart)}\n                            ref={setRef}\n                            style={{\n                                ...style,\n                                left: `${left}%`,\n                                right: `${right}%`,\n                            }}\n                        />\n                    )}\n                </SliderExtendedMoveHandler>\n            </>\n        );\n    },\n);\n\nSliderExtendedTrack.displayName = \"SliderExtendedTrack\";\n"],"names":["disabled"],"mappings":"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"}

package/components/SliderRange/SliderRange.js

@@ -4,6 +4,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
 import { SliderExtended } from "../SliderExtended/SliderExtended.js";
+const sortValues = (values) => [...values].sort((a, b) => a - b);
+const isSameValues = (values, otherValues) => values.join("") === otherValues.join("");
 class SliderRange extends React.Component {
   constructor(props) {
     super(props);
@@ -11,10 +13,10 @@ class SliderRange extends React.Component {
     __publicField(this, "validateValues", () => {
       const { onChange, values } = this.props;
       if (values[0] > values[1]) {
-        onChange(this.sortValues(values));
+        onChange(sortValues(values));
       }
     });
-    __publicField(this, "sortValues", (values) => [...values].sort((a, b) => a - b));
+    /** Возвращает обработчик изменения значения ползунка с индексом valueIndex. */
     __publicField(this, "handleChange", (valueIndex) => {
       return (value) => {
         const { onChange } = this.props;
@@ -22,7 +24,7 @@ class SliderRange extends React.Component {
           const { innerValues } = prevState;
           const nextVal = [...innerValues];
           nextVal[valueIndex] = value;
-          const sortedVal = nextVal[0] > nextVal[1] ? this.sortValues(nextVal) : nextVal;
+          const sortedVal = nextVal[0] > nextVal[1] ? sortValues(nextVal) : nextVal;
           onChange(sortedVal);
           return { innerValues: nextVal };
         });
@@ -35,22 +37,14 @@ class SliderRange extends React.Component {
   }
   componentDidUpdate(prevProps) {
     const { values } = this.props;
-    const { values: prevValues } = prevProps;
     const { innerValues } = this.state;
     this.validateValues();
-    if (values.join("") !== prevValues.join("")) {
-      if (innerValues[0] <= innerValues[1]) {
-        const nextInnerValues = [...values];
-        if (nextInnerValues.join("") !== innerValues.join("")) {
-          this.setState({
-            innerValues: [...values]
-          });
-        }
-      } else if ([values[1], values[0]].join("") !== innerValues.join("")) {
-        this.setState({
-          innerValues: [values[1], values[0]]
-        });
-      }
+    if (isSameValues(values, prevProps.values)) {
+      return;
+    }
+    const nextInnerValues = innerValues[0] <= innerValues[1] ? [...values] : [values[1], values[0]];
+    if (!isSameValues(nextInnerValues, innerValues)) {
+      this.setState({ innerValues: nextInnerValues });
     }
   }
   render() {
@@ -61,11 +55,10 @@ class SliderRange extends React.Component {
       step = 1,
       values,
       renderTooltipContent,
-      size,
       ...sliderExtendedAttributes
     } = this.props;
     const { innerValues } = this.state;
-    return /* @__PURE__ */ jsxs(SliderExtended, { step, size, ...sliderExtendedAttributes, children: [
+    return /* @__PURE__ */ jsxs(SliderExtended, { step, ...sliderExtendedAttributes, children: [
       /* @__PURE__ */ jsx(SliderExtended.Rail, {}),
       /* @__PURE__ */ jsx(SliderExtended.Dot, { value: innerValues[0], onChange: this.handleChange(0), children: renderTooltipContent && /* @__PURE__ */ jsx(SliderExtended.Tooltip, { value: innerValues[0], children: renderTooltipContent(innerValues[0]) }) }, "1"),
       /* @__PURE__ */ jsx(SliderExtended.Track, { draggable: draggableTrack }),

package/components/SliderRange/SliderRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderRange.js","sources":["../../../src/components/SliderRange/SliderRange.tsx"],"sourcesContent":["import React from \"react\";\nimport { ISliderExtendedProps, SliderExtended } from \"../SliderExtended/SliderExtended\";\n\n/**\n * Значения Range - массив из двух чисел, в соответствии которому строятся ползунки.\n * Оба числа должны быть в диапазоне от min до max. Левое число меньше правого.\n */\nexport type TSliderRangeValues = [number, number];\n\n/** Лейбл под полосой слайдера. */\nexport interface ISliderRangeMark {\n    /** Значение расположения метки, должно быть в диапазоне от min до max. */\n    value: number;\n    label: React.ReactNode;\n}\n\nexport interface ISliderRangeProps extends Omit<ISliderExtendedProps, \"onChange\" | \"step\"> {\n    children?: never;\n    /** Трек можно передвигать. По-умолчанию true. */\n    draggableTrack?: boolean;\n    /** Массив меток под полосой слайдера. */\n    marks: ISliderRangeMark[];\n    /** Обработчик изменения значений. */\n    onChange: (values: TSliderRangeValues) => void;\n    /**\n     * Длина шага, например при длине шага 1, с min-0. max-100, слайдер будет разделен на 100 шагов.\n     * Вместо длины шага можно передать массив шагов, например [0, 25, 50, 75, 100]. Начальное значение должно быть равно min, последнее значение должно быть равно max.\n     */\n    step?: number | number[];\n    /** Значения Range - массив из двух чисел, в соответствии которому строятся ползунки. Оба числа должны быть в диапазоне от min до max. */\n    values: TSliderRangeValues;\n    /** Содержимое тултипа, отображаемого при наведении на точку и перемещении. */\n    renderTooltipContent?: (value: number) => React.ReactNode;\n}\n\ninterface ISliderRangeState {\n    /** Внутренние значения values, они не отсортированы так, что первое значение всегда меньше второго. */\n    innerValues: TSliderRangeValues;\n}\n\n/** Слайдер с двумя ползунками. */\nclass SliderRange extends React.Component<ISliderRangeProps, ISliderRangeState> {\n    public static displayName = \"SliderRange\";\n\n    public static defaultProps: Partial<ISliderRangeProps> = {\n        step: 1,\n    };\n\n    constructor(props: ISliderRangeProps) {\n        super(props);\n\n        this.state = {\n            innerValues: [...props.values],\n        };\n\n        this.validateValues();\n    }\n\n    public componentDidUpdate(prevProps: ISliderRangeProps): void {\n        const { values } = this.props;\n        const { values: prevValues } = prevProps;\n        const { innerValues } = this.state;\n\n        this.validateValues();\n\n        // Values изменились.\n        if (values.join(\"\") !== prevValues.join(\"\")) {\n            // Первое значение innerValues меньше второго значения. Присвоение values происходит в обычном порядке.\n            if (innerValues[0] <= innerValues[1]) {\n                const nextInnerValues = [...values];\n                // Новые values отличаются от innerValues.\n                if (nextInnerValues.join(\"\") !== innerValues.join(\"\")) {\n                    this.setState({\n                        innerValues: [...values],\n                    });\n                }\n\n                // Первое значение innerValues больше второго значения . Присвоение values происходит в обратном порядке. Новые values отличаются от innerValues.\n            } else if ([values[1], values[0]].join(\"\") !== innerValues.join(\"\")) {\n                this.setState({\n                    innerValues: [values[1], values[0]],\n                });\n            }\n        }\n    }\n\n    public render(): React.ReactNode {\n        const {\n            draggableTrack,\n            marks,\n            onChange,\n            step = 1,\n            values,\n            renderTooltipContent,\n            size,\n            ...sliderExtendedAttributes\n        } = this.props;\n        const { innerValues } = this.state;\n\n        return (\n            <SliderExtended step={step} size={size} {...sliderExtendedAttributes}>\n                <SliderExtended.Rail />\n\n                <SliderExtended.Dot key={\"1\"} value={innerValues[0]} onChange={this.handleChange(0)}>\n                    {renderTooltipContent && (\n                        <SliderExtended.Tooltip value={innerValues[0]}>\n                            {renderTooltipContent(innerValues[0])}\n                        </SliderExtended.Tooltip>\n                    )}\n                </SliderExtended.Dot>\n                <SliderExtended.Track draggable={draggableTrack} />\n                <SliderExtended.Dot key={\"2\"} value={innerValues[1]} onChange={this.handleChange(1)}>\n                    {renderTooltipContent && (\n                        <SliderExtended.Tooltip value={innerValues[1]}>\n                            {renderTooltipContent(innerValues[1])}\n                        </SliderExtended.Tooltip>\n                    )}\n                </SliderExtended.Dot>\n\n                <SliderExtended.Marks>\n                    {marks.map((m) => (\n                        <SliderExtended.Mark key={m.value} value={m.value}>\n                            {m.label}\n                        </SliderExtended.Mark>\n                    ))}\n                </SliderExtended.Marks>\n            </SliderExtended>\n        );\n    }\n\n    /** Проверка values, меньшее значение, должно быть перед большим. */\n    private validateValues = () => {\n        const { onChange, values } = this.props;\n        if (values[0] > values[1]) {\n            onChange(this.sortValues(values));\n        }\n    };\n\n    private sortValues = (values: TSliderRangeValues): TSliderRangeValues =>\n        [...values].sort((a, b) => a - b) as TSliderRangeValues;\n\n    private handleChange = (valueIndex: number) => {\n        return (value: number) => {\n            const { onChange } = this.props;\n\n            this.setState((prevState) => {\n                const { innerValues } = prevState;\n                const nextVal = [...innerValues] as TSliderRangeValues;\n                nextVal[valueIndex] = value;\n\n                // Сортируем значения для передачи в onChange\n                const sortedVal = nextVal[0] > nextVal[1] ? this.sortValues(nextVal) : nextVal;\n                onChange(sortedVal);\n\n                return { innerValues: nextVal };\n            });\n        };\n    };\n}\n\nexport { SliderRange };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SliderRange.js","sources":["../../../src/components/SliderRange/SliderRange.tsx"],"sourcesContent":["import React from \"react\";\nimport { ISliderExtendedProps, SliderExtended } from \"../SliderExtended/SliderExtended\";\n\n/**\n * Значения Range - массив из двух чисел, в соответствии которому строятся ползунки.\n * Оба числа должны быть в диапазоне от min до max. Левое число меньше правого.\n */\nexport type TSliderRangeValues = [number, number];\n\n/** Лейбл под полосой слайдера. */\nexport interface ISliderRangeMark {\n    /** Значение расположения метки, должно быть в диапазоне от min до max. */\n    value: number;\n    /** Содержимое метки. */\n    label: React.ReactNode;\n}\n\n/** Свойства компонента SliderRange. */\nexport interface ISliderRangeProps extends Omit<ISliderExtendedProps, \"onChange\" | \"step\"> {\n    /** Состав слайдера фиксирован, содержимое не передаётся. */\n    children?: never;\n    /** Трек можно передвигать. По умолчанию true. */\n    draggableTrack?: boolean;\n    /** Массив меток под полосой слайдера. */\n    marks: ISliderRangeMark[];\n    /** Обработчик изменения значений. Вызывается с отсортированной парой значений. */\n    onChange: (values: TSliderRangeValues) => void;\n    /**\n     * Длина шага, например при длине шага 1, с min-0. max-100, слайдер будет разделен на 100 шагов.\n     * Вместо длины шага можно передать массив шагов, например [0, 25, 50, 75, 100]. Начальное значение должно быть равно min, последнее значение должно быть равно max.\n     * По умолчанию 1.\n     */\n    step?: number | number[];\n    /** Значения Range - массив из двух чисел, в соответствии которому строятся ползунки. Оба числа должны быть в диапазоне от min до max. */\n    values: TSliderRangeValues;\n    /** Содержимое тултипа, отображаемого при наведении на точку и перемещении. */\n    renderTooltipContent?: (value: number) => React.ReactNode;\n}\n\ninterface ISliderRangeState {\n    /** Внутренние значения values, они не отсортированы так, что первое значение всегда меньше второго. */\n    innerValues: TSliderRangeValues;\n}\n\n/** Возвращает пару значений, отсортированную по возрастанию. */\nconst sortValues = (values: TSliderRangeValues): TSliderRangeValues =>\n    [...values].sort((a, b) => a - b) as TSliderRangeValues;\n\n/**\n * Сравнивает пары значений.\n * Сравнение идёт по склейке значений: пары вроде [1, 23] и [12, 3] считаются одинаковыми.\n * Поведение сохранено намеренно — см. SliderRange-ai.md, раздел «Инварианты».\n */\nconst isSameValues = (values: TSliderRangeValues, otherValues: TSliderRangeValues): boolean =>\n    values.join(\"\") === otherValues.join(\"\");\n\n/**\n * Слайдер с двумя ползунками — готовая сборка SliderExtended для выбора диапазона.\n * Компонент рисует ползунки по внутренним значениям и сообщает новую пару через onChange.\n * Внутренние значения синхронизируются с values, когда потребитель присылает новую пару.\n */\nclass SliderRange extends React.Component<ISliderRangeProps, ISliderRangeState> {\n    public static displayName = \"SliderRange\";\n\n    public static defaultProps: Partial<ISliderRangeProps> = {\n        step: 1,\n    };\n\n    constructor(props: ISliderRangeProps) {\n        super(props);\n\n        this.state = {\n            innerValues: [...props.values],\n        };\n\n        this.validateValues();\n    }\n\n    public componentDidUpdate(prevProps: ISliderRangeProps): void {\n        const { values } = this.props;\n        const { innerValues } = this.state;\n\n        this.validateValues();\n\n        // Values не изменились — синхронизировать нечего.\n        if (isSameValues(values, prevProps.values)) {\n            return;\n        }\n\n        // Первое значение innerValues меньше второго — присвоение values происходит в обычном порядке.\n        // Иначе ползунки перекрещены, и values присваиваются в обратном порядке, чтобы каждый ползунок остался на своей стороне.\n        const nextInnerValues: TSliderRangeValues =\n            innerValues[0] <= innerValues[1] ? [...values] : [values[1], values[0]];\n\n        // Новые values отличаются от innerValues.\n        if (!isSameValues(nextInnerValues, innerValues)) {\n            this.setState({ innerValues: nextInnerValues });\n        }\n    }\n\n    public render(): React.ReactNode {\n        // step = 1 дублирует defaultProps намеренно: при чтении this.props тип остаётся\n        // number | number[] | undefined, а SliderExtended требует определённый step.\n        const {\n            draggableTrack,\n            marks,\n            onChange,\n            step = 1,\n            values,\n            renderTooltipContent,\n            ...sliderExtendedAttributes\n        } = this.props;\n        const { innerValues } = this.state;\n\n        return (\n            <SliderExtended step={step} {...sliderExtendedAttributes}>\n                <SliderExtended.Rail />\n\n                <SliderExtended.Dot key={\"1\"} value={innerValues[0]} onChange={this.handleChange(0)}>\n                    {renderTooltipContent && (\n                        <SliderExtended.Tooltip value={innerValues[0]}>\n                            {renderTooltipContent(innerValues[0])}\n                        </SliderExtended.Tooltip>\n                    )}\n                </SliderExtended.Dot>\n                <SliderExtended.Track draggable={draggableTrack} />\n                <SliderExtended.Dot key={\"2\"} value={innerValues[1]} onChange={this.handleChange(1)}>\n                    {renderTooltipContent && (\n                        <SliderExtended.Tooltip value={innerValues[1]}>\n                            {renderTooltipContent(innerValues[1])}\n                        </SliderExtended.Tooltip>\n                    )}\n                </SliderExtended.Dot>\n\n                <SliderExtended.Marks>\n                    {marks.map((m) => (\n                        <SliderExtended.Mark key={m.value} value={m.value}>\n                            {m.label}\n                        </SliderExtended.Mark>\n                    ))}\n                </SliderExtended.Marks>\n            </SliderExtended>\n        );\n    }\n\n    /** Проверка values, меньшее значение, должно быть перед большим. */\n    private validateValues = () => {\n        const { onChange, values } = this.props;\n\n        if (values[0] > values[1]) {\n            onChange(sortValues(values));\n        }\n    };\n\n    /** Возвращает обработчик изменения значения ползунка с индексом valueIndex. */\n    private handleChange = (valueIndex: number) => {\n        return (value: number) => {\n            const { onChange } = this.props;\n\n            // Обновление и вызов onChange идут внутри updater'а намеренно: перемещение трека меняет\n            // оба ползунка двумя вызовами подряд, и второй обязан видеть значение, записанное первым.\n            this.setState((prevState) => {\n                const { innerValues } = prevState;\n                const nextVal = [...innerValues] as TSliderRangeValues;\n                nextVal[valueIndex] = value;\n\n                // Сортируем значения для передачи в onChange\n                const sortedVal = nextVal[0] > nextVal[1] ? sortValues(nextVal) : nextVal;\n                onChange(sortedVal);\n\n                return { innerValues: nextVal };\n            });\n        };\n    };\n}\n\nexport { SliderRange };\n"],"names":[],"mappings":";;;;;;AA6CA,MAAM,aAAa,CAAC,WAChB,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAOpC,MAAM,eAAe,CAAC,QAA4B,gBAC9C,OAAO,KAAK,EAAE,MAAM,YAAY,KAAK,EAAE;AAO3C,MAAM,oBAAoB,MAAM,UAAgD;AAAA,EAO5E,YAAY,OAA0B;AAClC,UAAM,KAAK;AA6EP;AAAA,0CAAiB,MAAM;AAC3B,YAAM,EAAE,UAAU,OAAA,IAAW,KAAK;AAElC,UAAI,OAAO,CAAC,IAAI,OAAO,CAAC,GAAG;AACvB,iBAAS,WAAW,MAAM,CAAC;AAAA,MAC/B;AAAA,IACJ;AAGQ;AAAA,wCAAe,CAAC,eAAuB;AAC3C,aAAO,CAAC,UAAkB;AACtB,cAAM,EAAE,aAAa,KAAK;AAI1B,aAAK,SAAS,CAAC,cAAc;AACzB,gBAAM,EAAE,gBAAgB;AACxB,gBAAM,UAAU,CAAC,GAAG,WAAW;AAC/B,kBAAQ,UAAU,IAAI;AAGtB,gBAAM,YAAY,QAAQ,CAAC,IAAI,QAAQ,CAAC,IAAI,WAAW,OAAO,IAAI;AAClE,mBAAS,SAAS;AAElB,iBAAO,EAAE,aAAa,QAAA;AAAA,QAC1B,CAAC;AAAA,MACL;AAAA,IACJ;AAtGI,SAAK,QAAQ;AAAA,MACT,aAAa,CAAC,GAAG,MAAM,MAAM;AAAA,IAAA;AAGjC,SAAK,eAAA;AAAA,EACT;AAAA,EAEO,mBAAmB,WAAoC;AAC1D,UAAM,EAAE,WAAW,KAAK;AACxB,UAAM,EAAE,gBAAgB,KAAK;AAE7B,SAAK,eAAA;AAGL,QAAI,aAAa,QAAQ,UAAU,MAAM,GAAG;AACxC;AAAA,IACJ;AAIA,UAAM,kBACF,YAAY,CAAC,KAAK,YAAY,CAAC,IAAI,CAAC,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC;AAG1E,QAAI,CAAC,aAAa,iBAAiB,WAAW,GAAG;AAC7C,WAAK,SAAS,EAAE,aAAa,gBAAA,CAAiB;AAAA,IAClD;AAAA,EACJ;AAAA,EAEO,SAA0B;AAG7B,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACH,KAAK;AACT,UAAM,EAAE,gBAAgB,KAAK;AAE7B,WACI,qBAAC,gBAAA,EAAe,MAAa,GAAG,0BAC5B,UAAA;AAAA,MAAA,oBAAC,eAAe,MAAf,EAAoB;AAAA,MAErB,oBAAC,eAAe,KAAf,EAA6B,OAAO,YAAY,CAAC,GAAG,UAAU,KAAK,aAAa,CAAC,GAC7E,UAAA,wBACG,oBAAC,eAAe,SAAf,EAAuB,OAAO,YAAY,CAAC,GACvC,UAAA,qBAAqB,YAAY,CAAC,CAAC,EAAA,CACxC,EAAA,GAJiB,GAMzB;AAAA,MACA,oBAAC,eAAe,OAAf,EAAqB,WAAW,eAAA,CAAgB;AAAA,MACjD,oBAAC,eAAe,KAAf,EAA6B,OAAO,YAAY,CAAC,GAAG,UAAU,KAAK,aAAa,CAAC,GAC7E,UAAA,wBACG,oBAAC,eAAe,SAAf,EAAuB,OAAO,YAAY,CAAC,GACvC,UAAA,qBAAqB,YAAY,CAAC,CAAC,EAAA,CACxC,EAAA,GAJiB,GAMzB;AAAA,MAEA,oBAAC,eAAe,OAAf,EACI,gBAAM,IAAI,CAAC,MACR,oBAAC,eAAe,MAAf,EAAkC,OAAO,EAAE,OACvC,UAAA,EAAE,SADmB,EAAE,KAE5B,CACH,EAAA,CACL;AAAA,IAAA,GACJ;AAAA,EAER;AA+BJ;AAhHI,cADE,aACY,eAAc;AAE5B,cAHE,aAGY,gBAA2C;AAAA,EACrD,MAAM;AAAA;"}

package/components/SmallInput/SmallInput.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
-const smallInput = "smallInput__b6e99e53";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
+const smallInput = "smallInput__9463366c";
 const styles = {
   smallInput
 };

package/components/Spoiler/Spoiler.js

@@ -8,16 +8,16 @@ import "../Button/ButtonDropdownExtended.js";
 import { EButtonTheme } from "../Button/enums.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-import { u as uniqueId, c as clsx } from "../../chunks/vendor-DqGxntec.js";
-const spoiler = "spoiler__b350f84e";
-const opened = "opened__e36efc1b";
-const caretIcon = "caretIcon__82ed77df";
-const head = "head__5f57e621";
-const content = "content__452711c7";
-const hidden = "hidden__950bf345";
-const lg = "lg__2a883d49";
-const md = "md__b86d6826";
-const sm = "sm__57405f6b";
+import { u as uniqueId, c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
+const spoiler = "spoiler__a330cc2b";
+const opened = "opened__189230f5";
+const caretIcon = "caretIcon__04456b44";
+const head = "head__ae2cd5a6";
+const content = "content__e42152fb";
+const hidden = "hidden__2708d887";
+const lg = "lg__b8019000";
+const md = "md__e636ff57";
+const sm = "sm__ba29cc28";
 const styles = {
   spoiler,
   opened,
@@ -69,7 +69,7 @@ const Spoiler = React.forwardRef((props, ref) => {
     },
     className
   );
-  return /* @__PURE__ */ jsxs("div", { ...divHTMLAttributes, className: classNames, "data-tx": "0.45.0", ref, children: [
+  return /* @__PURE__ */ jsxs("div", { ...divHTMLAttributes, className: classNames, "data-tx": "0.47.0", ref, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.head, children: [
       /* @__PURE__ */ jsxs(
         Button,

package/components/StatusTracker/StatusTracker.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../chunks/StatusTracker.module-Cf8LbWAg.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../chunks/StatusTracker.module-di0Vn038.js";
 import { EStatusTrackerType, EStatusTrackerVerticalAlign } from "./enums.js";
 import { StatusTrackerMedia } from "./components/StatusTrackerMedia.js";
 import { StatusTrackerHeader } from "./components/StatusTrackerHeader.js";
@@ -30,7 +30,7 @@ const StatusTracker = Object.assign(
         className: clsx(styles.statusTrackerWrapper, className),
         ...rest,
         ref,
-        "data-tx": "0.45.0",
+        "data-tx": "0.47.0",
         children: [
           /* @__PURE__ */ jsx("div", { className: clsx(styles.statusTrackerBackground, TYPE_TO_CLASS_NAME_MAP[type]), children: /* @__PURE__ */ jsx("div", { className: clsx(styles.statusTrackerColor, TYPE_TO_CLASS_NAME_MAP[type]) }) }, type),
           /* @__PURE__ */ jsx("div", { className: clsx(styles.statusTracker, VERTICAL_ALIGN_TO_CLASS_NAME_MAP[verticalAlign]), children })

package/components/StatusTracker/components/StatusTrackerAlert.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import "../../Alert/AlertContext/AlertContext.js";
 import { AlertProcess } from "../../Alert/AlertProcess/AlertProcess.js";
 import "../../Alert/AlertTypeUtils.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Cf8LbWAg.js";
+import { s as styles } from "../../../chunks/StatusTracker.module-di0Vn038.js";
 import { ETextSize, EFontType } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";
 import "../../Typography/CodeText.js";

package/components/StatusTracker/components/StatusTrackerBody.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { StatusTrackerAlert } from "./StatusTrackerAlert.js";
 import { StatusTrackerStatus } from "./StatusTrackerStatus.js";
 import { StatusTrackerStatusGroup } from "./StatusTrackerStatusGroup.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Cf8LbWAg.js";
+import { s as styles } from "../../../chunks/StatusTracker.module-di0Vn038.js";
 const StatusTrackerBody = Object.assign(
   React.forwardRef(function StatusTrackerBody2({ children, className, ...restProps }, ref) {
     return /* @__PURE__ */ jsx("div", { className: clsx(styles.statusTrackerChild, className), ...restProps, ref, children });

package/components/StatusTracker/components/StatusTrackerButton.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Cf8LbWAg.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../chunks/StatusTracker.module-di0Vn038.js";
 import { Button } from "../../Button/Button.js";
 import "../../Button/ButtonIcon.js";
 import "../../Button/ButtonDropdown.js";

package/components/StatusTracker/components/StatusTrackerDescription.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { ETextSize, EFontType } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";
 import "../../Typography/CodeText.js";
 import { Text } from "../../Typography/Text.js";
 import "../../Typography/Title.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Cf8LbWAg.js";
+import { s as styles } from "../../../chunks/StatusTracker.module-di0Vn038.js";
 const StatusTrackerDescription = (props) => {
   const { children, className, ...rest } = props;
   return /* @__PURE__ */ jsx(

package/components/StatusTracker/components/StatusTrackerFooter.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Cf8LbWAg.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../chunks/StatusTracker.module-di0Vn038.js";
 import { StatusTrackerDescription } from "./StatusTrackerDescription.js";
 import { StatusTrackerButton } from "./StatusTrackerButton.js";
 const StatusTrackerFooter = Object.assign(

package/components/StatusTracker/components/StatusTrackerHeader.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { StatusTrackerDescription } from "./StatusTrackerDescription.js";
 import { StatusTrackerTitle } from "./StatusTrackerTitle.js";
 import { StatusTrackerSum } from "./StatusTrackerSum.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Cf8LbWAg.js";
+import { s as styles } from "../../../chunks/StatusTracker.module-di0Vn038.js";
 const StatusTrackerHeader = Object.assign(
   React.forwardRef(function StatusTrackerHeader2({ children, className, ...rest }, ref) {
     return /* @__PURE__ */ jsx("div", { className: clsx(styles.statusTrackerChild, className), ...rest, ref, children });

package/components/StatusTracker/components/StatusTrackerMedia.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Cf8LbWAg.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../chunks/StatusTracker.module-di0Vn038.js";
 const StatusTrackerMedia = (props) => {
   const { children, className, ...rest } = props;
   return /* @__PURE__ */ jsx("div", { className: clsx(styles.statusTrackerChild, className), ...rest, children });

package/components/StatusTracker/components/StatusTrackerStatus.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Cf8LbWAg.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../chunks/StatusTracker.module-di0Vn038.js";
 import { MarkerStatus } from "../../MarkerStatus/MarkerStatus.js";
 const StatusTrackerStatus = (props) => {
   const { children, className, ...rest } = props;

package/components/StatusTracker/components/StatusTrackerStatusGroup.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
-const statusTrackerStatusGroup = "statusTrackerStatusGroup__331f1186";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
+const statusTrackerStatusGroup = "statusTrackerStatusGroup__2b8031a4";
 const styles = {
   statusTrackerStatusGroup
 };

package/components/StatusTracker/components/StatusTrackerSum.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { ETitleSize, EFontWeightTitle } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";
 import "../../Typography/CodeText.js";
 import "../../Typography/Text.js";
 import { Title } from "../../Typography/Title.js";
 import { Amount } from "../../Amount/Amount.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Cf8LbWAg.js";
+import { s as styles } from "../../../chunks/StatusTracker.module-di0Vn038.js";
 const StatusTrackerSum = (props) => {
   const { className, amountProps, ...restProps } = props;
   return /* @__PURE__ */ jsx(

package/components/StatusTracker/components/StatusTrackerTitle.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { ETitleSize, EFontWeightTitle } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";
 import "../../Typography/CodeText.js";
 import "../../Typography/Text.js";
 import { Title } from "../../Typography/Title.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Cf8LbWAg.js";
+import { s as styles } from "../../../chunks/StatusTracker.module-di0Vn038.js";
 const StatusTrackerTitle = (props) => {
   const { children, className, ...rest } = props;
   return /* @__PURE__ */ jsx(

package/components/Step/Step.js

@@ -8,24 +8,24 @@ import "../Typography/Caption.js";
 import "../Typography/CodeText.js";
 import { Text } from "../Typography/Text.js";
 import "../Typography/Title.js";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const step = "step__ae21b656";
-const sm = "sm__1275128f";
-const md = "md__a620f5a6";
-const lg = "lg__0be147b4";
-const done = "done__1f6d776a";
-const warning = "warning__255b2c76";
-const active = "active__51572b94";
-const error = "error__730f0a74";
-const disabled = "disabled__28036cb2";
+const step = "step__f01c5428";
+const sm = "sm__6b3cb3a7";
+const md = "md__8f1f70da";
+const lg = "lg__b713f147";
+const done = "done__3513f97b";
+const warning = "warning__c26c750f";
+const active = "active__8bbd3dd5";
+const error = "error__e7ba422f";
+const disabled = "disabled__1f6b1164";
 const styles = {
   step,
   sm,
   md,
   lg,
-  "default": "default__3f8a2872",
+  "default": "default__084fa378",
   done,
   warning,
   active,

package/components/Stepper/Stepper.js

@@ -1,7 +1,7 @@
 import "./enums.js";
 import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { CaretleftStrokeSrvIcon24, CaretrightStrokeSrvIcon24 } from "@sberbusiness/icons-next";
 import { CarouselExtended } from "../CarouselExtended/CarouselExtended.js";
 import { ButtonIcon } from "../Button/ButtonIcon.js";
@@ -12,14 +12,14 @@ import { scrollSmoothHorizontally } from "../../utils/scroll.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { EScreenWidth } from "../../helpers/breakpoints.js";
 import "./StepperStepIcon.js";
-const stepperCarousel = "stepperCarousel__cd5b60df";
-const stepperButtonWrapper = "stepperButtonWrapper__9bac1ca8";
-const prev = "prev__cbe32d9a";
-const next = "next__2a19bd16";
-const stepperButton = "stepperButton__73b8c50f";
-const sm = "sm__2c31fa9d";
-const md = "md__341462e3";
-const lg = "lg__feb9bfef";
+const stepperCarousel = "stepperCarousel__bce47259";
+const stepperButtonWrapper = "stepperButtonWrapper__4d42cec6";
+const prev = "prev__703316c0";
+const next = "next__c4670a2d";
+const stepperButton = "stepperButton__17ac4960";
+const sm = "sm__718ae04d";
+const md = "md__a1e9020d";
+const lg = "lg__53d0020c";
 const styles = {
   stepperCarousel,
   stepperButtonWrapper,

package/components/Stepper/StepperExtended.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { StepperStep } from "./StepperStep.js";
 import { StepperExtendedContext } from "./StepperExtendedContext.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
-const stepperExtended = "stepperExtended__3b6bb3dd";
+const stepperExtended = "stepperExtended__a9968be6";
 const styles = {
   stepperExtended
 };

package/components/Stepper/StepperStep.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useContext, useState, useRef } from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { StepperStepIcon } from "./StepperStepIcon.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
 import { isKey } from "../../utils/keyboard.js";
 import { StepperExtendedContext } from "./StepperExtendedContext.js";
 import { EFocusSource } from "../../enums/EFocusSource.js";
 import { EStepperStepType } from "./enums.js";
-import { s as styles, S as StepperStepArrowBorder } from "../../chunks/StepperStepArrowBorder-DDzF2ng9.js";
+import { s as styles, S as StepperStepArrowBorder } from "../../chunks/StepperStepArrowBorder-D6pz6aH6.js";
 import { IconWrapper } from "../IconWrapper/IconWrapper.js";
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const StepperStep = ({
@@ -92,7 +92,7 @@ const StepperStep = ({
     }
   };
   const renderIcon = () => /* @__PURE__ */ jsx(IconWrapper, { className: styles.icon, disabled: !!disabled, children: icon });
-  const renderContent = () => /* @__PURE__ */ jsxs("div", { className: styles.content, "data-tx": "0.45.0", children: [
+  const renderContent = () => /* @__PURE__ */ jsxs("div", { className: styles.content, "data-tx": "0.47.0", children: [
     icon && renderIcon(),
     children
   ] });