@sberbusiness/triplex-next 1.33.0 → 1.35.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderExtendedTrack.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedTrack/SliderExtendedTrack.tsx"],"sourcesContent":["import React, { useState, useLayoutEffect, useContext, useRef } from \"react\";\nimport { throttle } from \"lodash\";\nimport { SliderExtendedContext } from \"../../SliderExtendedContext\";\nimport { SliderExtendedMoveHandler, TOnTargetMouseDown, TOnTargetTouchStart } from \"../SliderExtendedMoveHandler\";\nimport { SliderExtendedUtils } from \"../../SliderExtendedUtils\";\nimport { SliderExtendedTrackActions } from \"./SliderExtendedTrackActions\";\nimport clsx from \"clsx\";\nimport { EVENT_KEY_CODES } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport { KeyDownListener } from \"@sberbusiness/triplex-next/components/KeyDownListener\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"./styles/SliderExtendedTrack.module.less\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\nexport interface ISliderExtendedTrackProps extends React.HTMLAttributes<HTMLSpanElement> {\n    children?: never;\n    /** Трек можно передвигать. По-умолчанию true. */\n    draggable?: boolean;\n}\n\n/**\n * Компонент полосы между двумя SliderExtendedDot.\n */\nexport const SliderExtendedTrack: React.FC<ISliderExtendedTrackProps> = ({\n    className,\n    draggable = true,\n    onBlur,\n    onFocus,\n    onMouseDown,\n    onMouseOver,\n    onMouseOut,\n    onTouchStart,\n    ...htmlSpanAttributes\n}) => {\n    // Элемент в фокусе.\n    const [isFocused, setIsFocused] = useState(false);\n    // Track можно передвигать.\n    const [innerDraggable, setInnerDraggable] = useState(false);\n    // Track получил фокус при клике.\n    const [isFocusedByClick, setIsFocusedByClick] = useState(false);\n    // Track в текущий момент перетаскивается мышью.\n    const [isDragged, setIsDragged] = useState(false);\n    const [tabIndex, setTabIndex] = useState(-1);\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 ref = useRef<HTMLSpanElement | null>(null);\n\n    useLayoutEffect(() => {\n        if (dots.length > 1 && draggable) {\n            if (!innerDraggable) {\n                setInnerDraggable(true);\n            }\n        } else if (innerDraggable !== false) {\n            setInnerDraggable(false);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [dots, draggable]);\n\n    useLayoutEffect(() => {\n        if (dots.length > 1) {\n            if (focusedSlider) {\n                setTabIndex(2);\n            } else {\n                setTabIndex(-1);\n            }\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [focusedSlider]);\n\n    if (!dots.length) {\n        return null;\n    }\n\n    const handleMouseDown = (onTargetMouseDown: TOnTargetMouseDown) => (event: React.MouseEvent<HTMLDivElement>) => {\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 handleDocumentMouseUp = (event: MouseEvent) => {\n        setIsDragged(false);\n        // Курсор отпущен за пределами Track.\n        if (event.target !== ref.current) {\n            setIsHoverOrDragTrack(false);\n        }\n\n        document.removeEventListener(\"mouseup\", handleDocumentMouseUp);\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    const handleDocumentTouchEnd = (event: TouchEvent) => {\n        if (event.cancelable) {\n            event.preventDefault();\n        }\n\n        setIsDragged(false);\n        // Курсор отпущен за пределами Track.\n        if (event.target !== ref.current) {\n            setIsHoverOrDragTrack(false);\n        }\n\n        document.removeEventListener(\"touchend\", handleDocumentTouchEnd);\n    };\n\n    /**\n     * Обработчик сочетаний клавиш, меняющих значение слайдера на меньшее.\n     */\n    const handleKeyDownToMoveLeft = (event: KeyboardEvent) => {\n        // Предотвращает скролл страницы.\n        event.preventDefault();\n\n        SliderExtendedTrackActions.moveToPrevStep(dots, steps);\n    };\n\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    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                onMouseMove={throttle(handleMouseMove, 100)}\n                onTouchMove={throttle(handleTouchMove)}\n                targetRef={ref}\n            >\n                {({ onTargetMouseDown, onTargetTouchStart }) => (\n                    <span\n                        role=\"button\"\n                        tabIndex={!disabled && innerDraggable ? tabIndex : -1}\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={ref}\n                        style={{\n                            left: `${left}%`,\n                            right: `${right}%`,\n                        }}\n                    />\n                )}\n            </SliderExtendedMoveHandler>\n        </>\n    );\n};\n\nSliderExtendedTrack.displayName = \"SliderExtendedTrack\";\n"],"names":["disabled","throttle"],"mappings":"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"}

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

@@ -1,36 +1,92 @@
-import { SliderExtendedUtils as V } from "../../SliderExtendedUtils.js";
-const v = {
-  dragDots: ({ cursorPrevNormalizedValue: l, cursorXPosition: a, dots: e, railNode: g, reverse: c, steps: n }) => {
-    if (g) {
-      const h = V.getNormalizedCursorValue({
-        cursorXPosition: a,
-        railNode: g
-      }), o = l.current - h, m = n[1].normalizedValue - n[0].normalizedValue;
-      let r = -Math.trunc(o / m);
-      if (c && (r = r * -1), r !== 0) {
-        let u, f;
-        if (e[0].value < e[1].value ? (u = e[0], f = e[1]) : (u = e[1], f = e[0]), u.stepIndex === 0 && r <= 0 || f.stepIndex === n.length - 1 && r >= 0)
+import { SliderExtendedUtils } from "../../SliderExtendedUtils.js";
+const SliderExtendedTrackActions = {
+  dragDots: ({ cursorPrevNormalizedValue, cursorXPosition, dots, railNode, reverse, steps }) => {
+    if (railNode) {
+      const cursorNormalizedValue = SliderExtendedUtils.getNormalizedCursorValue({
+        cursorXPosition,
+        railNode
+      });
+      const cursorDelta = cursorPrevNormalizedValue.current - cursorNormalizedValue;
+      const stepLength = steps[1].normalizedValue - steps[0].normalizedValue;
+      let cursorDeltaInSteps = -Math.trunc(cursorDelta / stepLength);
+      if (reverse) {
+        cursorDeltaInSteps = cursorDeltaInSteps * -1;
+      }
+      if (cursorDeltaInSteps !== 0) {
+        let leftDot;
+        let rightDot;
+        if (dots[0].value < dots[1].value) {
+          leftDot = dots[0];
+          rightDot = dots[1];
+        } else {
+          leftDot = dots[1];
+          rightDot = dots[0];
+        }
+        if (leftDot.stepIndex === 0 && cursorDeltaInSteps <= 0 || rightDot.stepIndex === steps.length - 1 && cursorDeltaInSteps >= 0) {
           return;
-        let t = u.stepIndex + r, i = f.stepIndex + r;
-        t < 0 && (i = i - t, t = 0), i > n.length - 1 && (t = t - (i - n.length + 1), i = n.length - 1), l.current = h, u.changeValue(n[t].value), f.changeValue(n[i].value);
+        }
+        let leftDotNextStepIndex = leftDot.stepIndex + cursorDeltaInSteps;
+        let rightDotNextStepIndex = rightDot.stepIndex + cursorDeltaInSteps;
+        if (leftDotNextStepIndex < 0) {
+          rightDotNextStepIndex = rightDotNextStepIndex - leftDotNextStepIndex;
+          leftDotNextStepIndex = 0;
+        }
+        if (rightDotNextStepIndex > steps.length - 1) {
+          leftDotNextStepIndex = leftDotNextStepIndex - (rightDotNextStepIndex - steps.length + 1);
+          rightDotNextStepIndex = steps.length - 1;
+        }
+        cursorPrevNormalizedValue.current = cursorNormalizedValue;
+        leftDot.changeValue(steps[leftDotNextStepIndex].value);
+        rightDot.changeValue(steps[rightDotNextStepIndex].value);
       }
     }
   },
-  getTrackPosition: ({ dots: l, reverse: a }) => {
-    const e = {
+  getTrackPosition: ({ dots, reverse }) => {
+    const position = {
       left: 0,
       right: 0
     };
-    return l.length === 1 ? a ? (e.left = 100 - l[0].normalizedValue, e.right = 0) : (e.left = 0, e.right = 100 - l[0].normalizedValue) : a ? l[0].value < l[1].value ? (e.right = l[0].normalizedValue, e.left = 100 - l[1].normalizedValue) : (e.right = l[1].normalizedValue, e.left = 100 - l[0].normalizedValue) : l[0].value < l[1].value ? (e.left = l[0].normalizedValue, e.right = 100 - l[1].normalizedValue) : (e.left = l[1].normalizedValue, e.right = 100 - l[0].normalizedValue), e;
+    if (dots.length === 1) {
+      if (reverse) {
+        position.left = 100 - dots[0].normalizedValue;
+        position.right = 0;
+      } else {
+        position.left = 0;
+        position.right = 100 - dots[0].normalizedValue;
+      }
+    } else {
+      if (reverse) {
+        if (dots[0].value < dots[1].value) {
+          position.right = dots[0].normalizedValue;
+          position.left = 100 - dots[1].normalizedValue;
+        } else {
+          position.right = dots[1].normalizedValue;
+          position.left = 100 - dots[0].normalizedValue;
+        }
+      } else {
+        if (dots[0].value < dots[1].value) {
+          position.left = dots[0].normalizedValue;
+          position.right = 100 - dots[1].normalizedValue;
+        } else {
+          position.left = dots[1].normalizedValue;
+          position.right = 100 - dots[0].normalizedValue;
+        }
+      }
+    }
+    return position;
   },
-  moveToNextStep: (l, a) => {
-    l.every((e) => e.stepIndex !== a.length - 1) && l.forEach((e) => e.changeValue(a[e.stepIndex + 1].value));
+  moveToNextStep: (dots, steps) => {
+    if (dots.every((d) => d.stepIndex !== steps.length - 1)) {
+      dots.forEach((d) => d.changeValue(steps[d.stepIndex + 1].value));
+    }
   },
-  moveToPrevStep: (l, a) => {
-    l.every((e) => e.stepIndex !== 0) && l.forEach((e) => e.changeValue(a[e.stepIndex - 1].value));
+  moveToPrevStep: (dots, steps) => {
+    if (dots.every((d) => d.stepIndex !== 0)) {
+      dots.forEach((d) => d.changeValue(steps[d.stepIndex - 1].value));
+    }
   }
 };
 export {
-  v as SliderExtendedTrackActions
+  SliderExtendedTrackActions
 };
 //# sourceMappingURL=SliderExtendedTrackActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderExtendedTrackActions.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedTrack/SliderExtendedTrackActions.ts"],"sourcesContent":["import { ISliderExtendedDot, ISliderExtendedStep } from \"../../SliderExtendedContext\";\nimport { SliderExtendedUtils } from \"../../SliderExtendedUtils\";\n\ninterface ISliderExtendedTrackActions {\n    /**\n     * Перемещение SliderExtended.Dots, при перемещении SliderExtended.Track.\n     */\n    dragDots: (params: {\n        cursorPrevNormalizedValue: React.MutableRefObject<number>;\n        cursorXPosition: number;\n        dots: ISliderExtendedDot[];\n        railNode: HTMLDivElement | null;\n        reverse: boolean;\n        steps: ISliderExtendedStep[];\n    }) => void;\n    /**\n     * Возвращает левую и правую позиции трека.\n     */\n    getTrackPosition: (params: { dots: ISliderExtendedDot[]; reverse: boolean }) => { left: number; right: number };\n    /**\n     * Перемещение трека и точек на следующий шаг.\n     */\n    moveToNextStep: (dots: ISliderExtendedDot[], steps: ISliderExtendedStep[]) => void;\n    /**\n     * Перемещение трека и точек на предыдущий шаг.\n     */\n    moveToPrevStep: (dots: ISliderExtendedDot[], steps: ISliderExtendedStep[]) => void;\n}\n\nexport const SliderExtendedTrackActions: ISliderExtendedTrackActions = {\n    dragDots: ({ cursorPrevNormalizedValue, cursorXPosition, dots, railNode, reverse, steps }) => {\n        if (railNode) {\n            /**\n             * Текущая позиция курсора относительно слайдера, в процентах.\n             */\n            const cursorNormalizedValue = SliderExtendedUtils.getNormalizedCursorValue({\n                cursorXPosition,\n                railNode,\n            });\n\n            /**\n             * Разница между текущей позицией курсора и предыдущей, в процентах.\n             */\n            const cursorDelta = cursorPrevNormalizedValue.current - cursorNormalizedValue;\n\n            /**\n             * Длина шага, в процентах.\n             */\n            const stepLength = steps[1].normalizedValue - steps[0].normalizedValue;\n\n            /**\n             * Изменение позиции курсора, в шагах.\n             */\n            let cursorDeltaInSteps = -Math.trunc(cursorDelta / stepLength);\n\n            if (reverse) {\n                cursorDeltaInSteps = cursorDeltaInSteps * -1;\n            }\n\n            if (cursorDeltaInSteps !== 0) {\n                /**\n                 * Левая SliderExtended.Dot.\n                 */\n                let leftDot: ISliderExtendedDot;\n                /**\n                 * Правая SliderExtended.Dot.\n                 */\n                let rightDot: ISliderExtendedDot;\n\n                if (dots[0].value < dots[1].value) {\n                    leftDot = dots[0];\n                    rightDot = dots[1];\n                } else {\n                    leftDot = dots[1];\n                    rightDot = dots[0];\n                }\n\n                // Track находится на границе слайдера и дальше двигаться некуда.\n                if (\n                    (leftDot.stepIndex === 0 && cursorDeltaInSteps <= 0) ||\n                    (rightDot.stepIndex === steps.length - 1 && cursorDeltaInSteps >= 0)\n                ) {\n                    return;\n                }\n\n                let leftDotNextStepIndex = leftDot.stepIndex + cursorDeltaInSteps;\n                let rightDotNextStepIndex = rightDot.stepIndex + cursorDeltaInSteps;\n\n                // leftDotNextStepIndex меньше минимально возможного.\n                if (leftDotNextStepIndex < 0) {\n                    rightDotNextStepIndex = rightDotNextStepIndex - leftDotNextStepIndex;\n                    leftDotNextStepIndex = 0;\n                }\n\n                // rightDotNextStepIndex больше максимально возможного.\n                if (rightDotNextStepIndex > steps.length - 1) {\n                    leftDotNextStepIndex = leftDotNextStepIndex - (rightDotNextStepIndex - steps.length + 1);\n                    rightDotNextStepIndex = steps.length - 1;\n                }\n\n                cursorPrevNormalizedValue.current = cursorNormalizedValue;\n                leftDot.changeValue(steps[leftDotNextStepIndex].value);\n                rightDot.changeValue(steps[rightDotNextStepIndex].value);\n            }\n        }\n    },\n    getTrackPosition: ({ dots, reverse }) => {\n        const position = {\n            left: 0,\n            right: 0,\n        };\n\n        // Слайдер с одним Slider.Dot.\n        if (dots.length === 1) {\n            if (reverse) {\n                position.left = 100 - dots[0].normalizedValue;\n                position.right = 0;\n            } else {\n                position.left = 0;\n                position.right = 100 - dots[0].normalizedValue;\n            }\n            // Слайдер с двумя Slider.Dot.\n        } else {\n            if (reverse) {\n                if (dots[0].value < dots[1].value) {\n                    position.right = dots[0].normalizedValue;\n                    position.left = 100 - dots[1].normalizedValue;\n                } else {\n                    position.right = dots[1].normalizedValue;\n                    position.left = 100 - dots[0].normalizedValue;\n                }\n            } else {\n                if (dots[0].value < dots[1].value) {\n                    position.left = dots[0].normalizedValue;\n                    position.right = 100 - dots[1].normalizedValue;\n                } else {\n                    position.left = dots[1].normalizedValue;\n                    position.right = 100 - dots[0].normalizedValue;\n                }\n            }\n        }\n\n        return position;\n    },\n    moveToNextStep: (dots, steps) => {\n        if (dots.every((d) => d.stepIndex !== steps.length - 1)) {\n            dots.forEach((d) => d.changeValue(steps[d.stepIndex + 1].value));\n        }\n    },\n    moveToPrevStep: (dots, steps) => {\n        if (dots.every((d) => d.stepIndex !== 0)) {\n            dots.forEach((d) => d.changeValue(steps[d.stepIndex - 1].value));\n        }\n    },\n};\n"],"names":[],"mappings":"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"}

package/components/SliderExtended/index.js

@@ -1,5 +1,5 @@
-import { SliderExtended as r } from "./SliderExtended.js";
+import { SliderExtended } from "./SliderExtended.js";
 export {
-  r as SliderExtended
+  SliderExtended
 };
 //# sourceMappingURL=index.js.map

package/components/SliderExtended/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/SliderRange/SliderRange.js

@@ -1,63 +1,84 @@
-var g = Object.defineProperty;
-var f = (r, a, e) => a in r ? g(r, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[a] = e;
-var h = (r, a, e) => f(r, typeof a != "symbol" ? a + "" : a, e);
-import { jsxs as C, jsx as l } from "react/jsx-runtime";
-import m from "react";
-import { SliderExtended as n } from "../SliderExtended/SliderExtended.js";
-class V extends m.Component {
-  constructor(e) {
-    super(e);
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { SliderExtended } from "../SliderExtended/SliderExtended.js";
+class SliderRange extends React__default.Component {
+  constructor(props) {
+    super(props);
     /** Проверка values, меньшее значение, должно быть перед большим. */
-    h(this, "validateValues", () => {
-      const { onChange: e, values: t } = this.props;
-      t[0] > t[1] && e(this.sortValues(t));
+    __publicField(this, "validateValues", () => {
+      const { onChange, values } = this.props;
+      if (values[0] > values[1]) {
+        onChange(this.sortValues(values));
+      }
     });
-    h(this, "sortValues", (e) => [...e].sort((t, o) => t - o));
-    h(this, "handleChange", (e) => (t) => {
-      const { onChange: o } = this.props;
-      this.setState((i) => {
-        const { innerValues: d } = i, s = [...d];
-        s[e] = t;
-        const c = s[0] > s[1] ? this.sortValues(s) : s;
-        return o(c), { innerValues: s };
-      });
+    __publicField(this, "sortValues", (values) => [...values].sort((a, b) => a - b));
+    __publicField(this, "handleChange", (valueIndex) => {
+      return (value) => {
+        const { onChange } = this.props;
+        this.setState((prevState) => {
+          const { innerValues } = prevState;
+          const nextVal = [...innerValues];
+          nextVal[valueIndex] = value;
+          const sortedVal = nextVal[0] > nextVal[1] ? this.sortValues(nextVal) : nextVal;
+          onChange(sortedVal);
+          return { innerValues: nextVal };
+        });
+      };
     });
     this.state = {
-      innerValues: [...e.values]
-    }, this.validateValues();
+      innerValues: [...props.values]
+    };
+    this.validateValues();
   }
-  componentDidUpdate(e) {
-    const { values: t } = this.props, { values: o } = e, { innerValues: i } = this.state;
-    this.validateValues(), t.join("") !== o.join("") && (i[0] <= i[1] ? [...t].join("") !== i.join("") && this.setState({
-      innerValues: [...t]
-    }) : [t[1], t[0]].join("") !== i.join("") && this.setState({
-      innerValues: [t[1], t[0]]
-    }));
+  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]]
+        });
+      }
+    }
   }
   render() {
     const {
-      draggableTrack: e,
-      marks: t,
-      onChange: o,
-      step: i = 1,
-      values: d,
-      renderTooltipContent: s,
-      size: c,
-      ...v
-    } = this.props, { innerValues: u } = this.state;
-    return /* @__PURE__ */ C(n, { step: i, size: c, ...v, children: [
-      /* @__PURE__ */ l(n.Rail, {}),
-      /* @__PURE__ */ l(n.Dot, { value: u[0], onChange: this.handleChange(0), children: s && /* @__PURE__ */ l(n.Tooltip, { value: u[0], children: s(u[0]) }) }, "1"),
-      /* @__PURE__ */ l(n.Track, { draggable: e }),
-      /* @__PURE__ */ l(n.Dot, { value: u[1], onChange: this.handleChange(1), children: s && /* @__PURE__ */ l(n.Tooltip, { value: u[1], children: s(u[1]) }) }, "2"),
-      /* @__PURE__ */ l(n.Marks, { children: t.map((p) => /* @__PURE__ */ l(n.Mark, { value: p.value, children: p.label }, p.value)) })
+      draggableTrack,
+      marks,
+      onChange,
+      step = 1,
+      values,
+      renderTooltipContent,
+      size,
+      ...sliderExtendedAttributes
+    } = this.props;
+    const { innerValues } = this.state;
+    return /* @__PURE__ */ jsxs(SliderExtended, { step, size, ...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 }),
+      /* @__PURE__ */ jsx(SliderExtended.Dot, { value: innerValues[1], onChange: this.handleChange(1), children: renderTooltipContent && /* @__PURE__ */ jsx(SliderExtended.Tooltip, { value: innerValues[1], children: renderTooltipContent(innerValues[1]) }) }, "2"),
+      /* @__PURE__ */ jsx(SliderExtended.Marks, { children: marks.map((m) => /* @__PURE__ */ jsx(SliderExtended.Mark, { value: m.value, children: m.label }, m.value)) })
     ] });
   }
 }
-h(V, "displayName", "SliderRange"), h(V, "defaultProps", {
+__publicField(SliderRange, "displayName", "SliderRange");
+__publicField(SliderRange, "defaultProps", {
   step: 1
 });
 export {
-  V as SliderRange
+  SliderRange
 };
 //# sourceMappingURL=SliderRange.js.map

package/components/SliderRange/SliderRange.js.map

@@ -0,0 +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":["React"],"mappings":"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"}

package/components/SliderRange/index.js

@@ -1,5 +1,5 @@
-import { SliderRange as o } from "./SliderRange.js";
+import { SliderRange } from "./SliderRange.js";
 export {
-  o as SliderRange
+  SliderRange
 };
 //# sourceMappingURL=index.js.map

package/components/SliderRange/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/SmallInput/SmallInput.js

@@ -1,11 +1,13 @@
-import { jsx as s } from "react/jsx-runtime";
-import m from "react";
-import { c as p } from "../../chunks/vendor-D5cfSbgz.js";
-const o = "smallInput__e74685af", e = {
-  smallInput: o
-}, n = m.forwardRef(({ className: t, ...l }, a) => /* @__PURE__ */ s("input", { className: p(e.smallInput, t), ...l, type: "text", ref: a }));
-n.displayName = "SmallInput";
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { c as clsx } from "../../chunks/vendor-Bco_z_Yi.js";
+const smallInput = "smallInput__28ca4851";
+const styles = {
+  smallInput
+};
+const SmallInput = React__default.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx("input", { className: clsx(styles.smallInput, className), ...rest, type: "text", ref }));
+SmallInput.displayName = "SmallInput";
 export {
-  n as SmallInput
+  SmallInput
 };
 //# sourceMappingURL=SmallInput.js.map

package/components/SmallInput/SmallInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmallInput.js","sources":["../../../src/components/SmallInput/SmallInput.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./styles/SmallInput.module.less\";\n\n/** Свойства компонента SmallInput. */\nexport interface ISmallInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\n/** Уменьшенное поле ввода, используется в HeaderPage. */\nexport const SmallInput = React.forwardRef<HTMLInputElement, ISmallInputProps>(({ className, ...rest }, ref) => (\n    <input className={clsx(styles.smallInput, className)} {...rest} type=\"text\" ref={ref} />\n));\n\nSmallInput.displayName = \"SmallInput\";\n"],"names":["React"],"mappings":";;;;;;;AAQO,MAAM,aAAaA,eAAM,WAA+C,CAAC,EAAE,WAAW,GAAG,KAAA,GAAQ,QACpG,oBAAC,WAAM,WAAW,KAAK,OAAO,YAAY,SAAS,GAAI,GAAG,MAAM,MAAK,QAAO,KAAU,CACzF;AAED,WAAW,cAAc;"}

package/components/SmallInput/index.js

@@ -1,5 +1,5 @@
-import { SmallInput as o } from "./SmallInput.js";
+import { SmallInput } from "./SmallInput.js";
 export {
-  o as SmallInput
+  SmallInput
 };
 //# sourceMappingURL=index.js.map

package/components/SmallInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Spoiler/Spoiler.js

@@ -1,75 +1,98 @@
-import { jsx as a, jsxs as l } from "react/jsx-runtime";
-import z, { useState as T, useRef as E, useCallback as w } from "react";
-import { CaretdownStrokeSrvIcon20 as p, CaretdownStrokeSrvIcon16 as B } from "@sberbusiness/icons-next";
-import { Button as L } from "../Button/Button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useState, useRef, useCallback } from "react";
+import { CaretdownStrokeSrvIcon20, CaretdownStrokeSrvIcon16 } from "@sberbusiness/icons-next";
+import { Button } from "../Button/Button.js";
 import "../Button/ButtonBase.js";
 import "../Button/ButtonIcon.js";
 import "../Button/ButtonDropdown.js";
 import "../Button/ButtonDropdownExtended.js";
-import { EButtonTheme as R } from "../Button/enums.js";
-import { EComponentSize as s } from "../../enums/EComponentSize.js";
-import { createSizeToClassNameMap as g } from "../../utils/classNameMaps.js";
-import { u as j, c as _ } from "../../chunks/vendor-D5cfSbgz.js";
-const y = "spoiler__d7669621", D = "opened__afdee3d3", q = "caretIcon__85ae6897", A = "head__360c0d93", G = "content__dfa70347", H = "hidden__e28cf337", K = "lg__398f10e2", $ = "md__e7b76a41", F = "sm__0daf88be", e = {
-  spoiler: y,
-  opened: D,
-  caretIcon: q,
-  head: A,
-  content: G,
-  hidden: H,
-  lg: K,
-  md: $,
-  sm: F
-}, J = {
-  [s.SM]: /* @__PURE__ */ a(B, { paletteIndex: 5, className: e.caretIcon }),
-  [s.MD]: /* @__PURE__ */ a(p, { paletteIndex: 5, className: e.caretIcon }),
-  [s.LG]: /* @__PURE__ */ a(p, { paletteIndex: 5, className: e.caretIcon })
-}, O = g(e), P = z.forwardRef((f, h) => {
+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-Bco_z_Yi.js";
+const spoiler = "spoiler__dd6b72fd";
+const opened = "opened__dcd76e0a";
+const caretIcon = "caretIcon__18f7c3d3";
+const head = "head__8cb51af5";
+const content = "content__b3c10031";
+const hidden = "hidden__0520b407";
+const lg = "lg__571e2815";
+const md = "md__86fa1db0";
+const sm = "sm__e178a9fa";
+const styles = {
+  spoiler,
+  opened,
+  caretIcon,
+  head,
+  content,
+  hidden,
+  lg,
+  md,
+  sm
+};
+const sizeToCaretIconMap = {
+  [EComponentSize.SM]: /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon16, { paletteIndex: 5, className: styles.caretIcon }),
+  [EComponentSize.MD]: /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon20, { paletteIndex: 5, className: styles.caretIcon }),
+  [EComponentSize.LG]: /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon20, { paletteIndex: 5, className: styles.caretIcon })
+};
+const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const Spoiler = React__default.forwardRef((props, ref) => {
   const {
-    children: I,
-    expanded: c,
-    onToggle: o,
-    toggle: n,
-    className: x,
-    labelExpand: S,
-    labelCollapse: u,
-    rightBlock: N,
-    size: r = s.MD,
-    ...C
-  } = f, d = c !== void 0, [v, M] = T(c), t = d ? c : v, m = E(`Spoiler-${j()}`), b = w(() => {
-    const i = !t;
-    d ? n == null || n(i) : M(i), o == null || o(i);
-  }, [d, n, t, o]), k = _(
-    e.spoiler,
-    O[r],
+    children,
+    expanded,
+    onToggle,
+    toggle,
+    className,
+    labelExpand,
+    labelCollapse,
+    rightBlock,
+    size = EComponentSize.MD,
+    ...divHTMLAttributes
+  } = props;
+  const controlled = expanded !== void 0;
+  const [expandedState, setExpandedState] = useState(expanded);
+  const open = controlled ? expanded : expandedState;
+  const instanceId = useRef(`Spoiler-${uniqueId()}`);
+  const handleToggle = useCallback(() => {
+    const nextState = !open;
+    if (controlled) {
+      toggle == null ? void 0 : toggle(nextState);
+    } else {
+      setExpandedState(nextState);
+    }
+    onToggle == null ? void 0 : onToggle(nextState);
+  }, [controlled, toggle, open, onToggle]);
+  const classNames = clsx(
+    styles.spoiler,
+    sizeToClassNameMap[size],
     {
-      [e.opened]: t
+      [styles.opened]: open
     },
-    x
+    className
   );
-  return /* @__PURE__ */ l("div", { ...C, className: k, "data-tx": "1.33.0", ref: h, children: [
-    /* @__PURE__ */ l("div", { className: e.head, children: [
-      /* @__PURE__ */ l(
-        L,
+  return /* @__PURE__ */ jsxs("div", { ...divHTMLAttributes, className: classNames, "data-tx": "1.35.0", ref, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.head, children: [
+      /* @__PURE__ */ jsxs(
+        Button,
         {
-          "aria-expanded": t,
-          "aria-controls": m.current,
-          theme: R.LINK,
-          size: r,
-          onClick: b,
+          "aria-expanded": open,
+          "aria-controls": instanceId.current,
+          theme: EButtonTheme.LINK,
+          size,
+          onClick: handleToggle,
           children: [
-            t ? u : S,
-            J[r]
+            open ? labelCollapse : labelExpand,
+            sizeToCaretIconMap[size]
           ]
         }
       ),
-      N
+      rightBlock
     ] }),
-    /* @__PURE__ */ a("div", { id: m.current, className: _(e.content, { [e.hidden]: !t }), children: I })
+    /* @__PURE__ */ jsx("div", { id: instanceId.current, className: clsx(styles.content, { [styles.hidden]: !open }), children })
   ] });
 });
-P.displayName = "Spoiler";
+Spoiler.displayName = "Spoiler";
 export {
-  P as Spoiler
+  Spoiler
 };
 //# sourceMappingURL=Spoiler.js.map

package/components/Spoiler/Spoiler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spoiler.js","sources":["../../../src/components/Spoiler/Spoiler.tsx"],"sourcesContent":["/* eslint-disable react-hooks/refs */\nimport React, { useCallback, useRef, useState } from \"react\";\nimport { CaretdownStrokeSrvIcon20, CaretdownStrokeSrvIcon16 } from \"@sberbusiness/icons-next\";\nimport { Button, EButtonTheme } from \"../Button\";\nimport { EComponentSize } from \"../../enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport styles from \"./styles/Spoiler.module.less\";\n\n/** Базовые свойства компонента Spoiler. */\ninterface ISpoilerBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Текст раскрытия содержимого. */\n    labelExpand: string;\n    /** Текст скрытия содержимого. */\n    labelCollapse?: string;\n    /** Обработчик скрытия/раскрытия. */\n    onToggle?: (expanded: boolean) => void;\n    /** Элемент правого блока. */\n    rightBlock?: React.ReactNode;\n    /** Размер компонента. */\n    size?: EComponentSize;\n}\n\n/** Свойства контролируемого Spoiler. */\ninterface ISpoilerControlledProps extends ISpoilerBaseProps {\n    /** Контролируемое состояние скрыт/раскрыт. */\n    expanded: boolean;\n    /** Контролирующая функция скрытия/раскрытия. */\n    toggle: (nextExpanded: boolean) => void;\n}\n\n/** Свойства неконтролируемого Spoiler. */\ninterface ISpoilerUncontrolledProps extends ISpoilerBaseProps {\n    /** Контролируемое состояние скрыт/раскрыт. */\n    expanded?: never;\n    /** Контролирующая функция скрытия/раскрытия. */\n    toggle?: never;\n}\n\n/** Комбинированные свойства компонента Spoiler. */\ntype TSpoilerProps = ISpoilerControlledProps | ISpoilerUncontrolledProps;\n\nconst sizeToCaretIconMap = {\n    [EComponentSize.SM]: <CaretdownStrokeSrvIcon16 paletteIndex={5} className={styles.caretIcon} />,\n    [EComponentSize.MD]: <CaretdownStrokeSrvIcon20 paletteIndex={5} className={styles.caretIcon} />,\n    [EComponentSize.LG]: <CaretdownStrokeSrvIcon20 paletteIndex={5} className={styles.caretIcon} />,\n};\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Компонент \"Спойлер\", используется для раскрытия внутреннего содержимого. */\nexport const Spoiler = React.forwardRef<HTMLDivElement, TSpoilerProps>((props, ref) => {\n    const {\n        children,\n        expanded,\n        onToggle,\n        toggle,\n        className,\n        labelExpand,\n        labelCollapse,\n        rightBlock,\n        size = EComponentSize.MD,\n        ...divHTMLAttributes\n    } = props;\n\n    const controlled = expanded !== undefined;\n    const [expandedState, setExpandedState] = useState(expanded);\n    const open = controlled ? expanded : expandedState;\n    const instanceId = useRef(`Spoiler-${uniqueId()}`);\n\n    const handleToggle = useCallback(() => {\n        const nextState = !open;\n\n        if (controlled) {\n            toggle?.(nextState);\n        } else {\n            setExpandedState(nextState);\n        }\n\n        onToggle?.(nextState);\n    }, [controlled, toggle, open, onToggle]);\n\n    const classNames = clsx(\n        styles.spoiler,\n        sizeToClassNameMap[size],\n        {\n            [styles.opened]: open,\n        },\n        className,\n    );\n\n    return (\n        <div {...divHTMLAttributes} className={classNames} data-tx={process.env.npm_package_version} ref={ref}>\n            <div className={styles.head}>\n                <Button\n                    aria-expanded={open}\n                    aria-controls={instanceId.current}\n                    theme={EButtonTheme.LINK}\n                    size={size}\n                    onClick={handleToggle}\n                >\n                    {open ? labelCollapse : labelExpand}\n\n                    {sizeToCaretIconMap[size]}\n                </Button>\n                {rightBlock}\n            </div>\n\n            <div id={instanceId.current} className={clsx(styles.content, { [styles.hidden]: !open })}>\n                {children}\n            </div>\n        </div>\n    );\n});\n\nSpoiler.displayName = \"Spoiler\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,qBAAqB;AAAA,EACvB,CAAC,eAAe,EAAE,GAAG,oBAAC,4BAAyB,cAAc,GAAG,WAAW,OAAO,WAAW;AAAA,EAC7F,CAAC,eAAe,EAAE,GAAG,oBAAC,4BAAyB,cAAc,GAAG,WAAW,OAAO,WAAW;AAAA,EAC7F,CAAC,eAAe,EAAE,GAAG,oBAAC,4BAAyB,cAAc,GAAG,WAAW,OAAO,UAAA,CAAW;AACjG;AAEA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,UAAUA,eAAM,WAA0C,CAAC,OAAO,QAAQ;AACnF,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,aAAa,aAAa;AAChC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,QAAQ;AAC3D,QAAM,OAAO,aAAa,WAAW;AACrC,QAAM,aAAa,OAAO,WAAW,SAAA,CAAU,EAAE;AAEjD,QAAM,eAAe,YAAY,MAAM;AACnC,UAAM,YAAY,CAAC;AAEnB,QAAI,YAAY;AACZ,uCAAS;AAAA,IACb,OAAO;AACH,uBAAiB,SAAS;AAAA,IAC9B;AAEA,yCAAW;AAAA,EACf,GAAG,CAAC,YAAY,QAAQ,MAAM,QAAQ,CAAC;AAEvC,QAAM,aAAa;AAAA,IACf,OAAO;AAAA,IACP,mBAAmB,IAAI;AAAA,IACvB;AAAA,MACI,CAAC,OAAO,MAAM,GAAG;AAAA,IAAA;AAAA,IAErB;AAAA,EAAA;AAGJ,SACI,qBAAC,OAAA,EAAK,GAAG,mBAAmB,WAAW,YAAY,WAAS,UAAiC,KACzF,UAAA;AAAA,yBAAC,OAAA,EAAI,WAAW,OAAO,MACnB,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,iBAAe;AAAA,UACf,iBAAe,WAAW;AAAA,UAC1B,OAAO,aAAa;AAAA,UACpB;AAAA,UACA,SAAS;AAAA,UAER,UAAA;AAAA,YAAA,OAAO,gBAAgB;AAAA,YAEvB,mBAAmB,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAE3B;AAAA,IAAA,GACL;AAAA,wBAEC,OAAA,EAAI,IAAI,WAAW,SAAS,WAAW,KAAK,OAAO,SAAS,EAAE,CAAC,OAAO,MAAM,GAAG,CAAC,MAAM,GAClF,UACL;AAAA,EAAA,GACJ;AAER,CAAC;AAED,QAAQ,cAAc;"}

package/components/Spoiler/index.js

@@ -1,5 +1,5 @@
-import { Spoiler as e } from "./Spoiler.js";
+import { Spoiler } from "./Spoiler.js";
 export {
-  e as Spoiler
+  Spoiler
 };
 //# sourceMappingURL=index.js.map

package/components/Spoiler/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}