etudes 1.2.0 → 2.0.0

package/lib/RangeSlider.js

@@ -1,22 +1,14 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-})();
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+    return __assign.apply(this, arguments);
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
@@ -41,6 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -57,190 +60,40 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var interactjs_1 = __importDefault(require("interactjs"));
+exports.RangeSliderKnob = exports.RangeSliderHighlight = exports.RangeSliderLabel = exports.RangeSliderGutter = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 var react_1 = __importStar(require("react"));
-var spase_1 = require("spase");
-var styled_components_1 = __importStar(require("styled-components"));
-var RangeSlider = /** @class */ (function (_super) {
-    __extends(RangeSlider, _super);
-    function RangeSlider(props) {
-        var _this = this;
-        var _a;
-        _this = _super.call(this, props) || this;
-        _this.nodeRefs = {
-            root: (0, react_1.createRef)(),
-            knobA: (0, react_1.createRef)(),
-            knobB: (0, react_1.createRef)(),
-        };
-        _this.state = {
-            range: (_a = props.defaultRange) !== null && _a !== void 0 ? _a : [props.min, props.max],
-            isDraggingStartingKnob: false,
-            isReleasingStartingKnob: false,
-            isDraggingEndingKnob: false,
-            isReleasingEndingKnob: false,
-        };
-        return _this;
-    }
-    Object.defineProperty(RangeSlider.prototype, "rect", {
-        get: function () {
-            var _a;
-            return (_a = spase_1.Rect.from(this.nodeRefs.root.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(RangeSlider.prototype, "highlightLength", {
-        get: function () {
-            var _a = __read(this.state.range, 2), valA = _a[0], valB = _a[1];
-            var a = this.getDisplacementByValue(valA);
-            var b = this.getDisplacementByValue(valB);
-            return (b - a);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(RangeSlider.prototype, "breakpoints", {
-        get: function () {
-            var _a = this.props, min = _a.min, max = _a.max, steps = _a.steps;
-            var breakpoints = [min];
-            for (var i = 0; i < steps; i++) {
-                breakpoints.push(min + (i + 1) * (max - min) / (1 + steps));
-            }
-            breakpoints.push(max);
-            return breakpoints;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    RangeSlider.prototype.componentDidMount = function () {
-        this.reconfigureInteractivityIfNeeded();
-        if (this.props.steps < 0) {
-            this.props.onRangeChange(this.state.range);
-        }
-        else {
-            this.snapToClosestBreakpoint();
-        }
-        this.forceUpdate();
-    };
-    RangeSlider.prototype.componentDidUpdate = function (prevProps, prevState) {
-        if (!this.areRangesEqual(prevState.range, this.state.range)) {
-            this.props.onRangeChange(this.state.range);
-        }
-        if (prevProps.orientation !== this.props.orientation) {
-            this.forceUpdate();
-        }
-        this.reconfigureInteractivityIfNeeded();
-    };
-    RangeSlider.prototype.render = function () {
-        return (react_1.default.createElement(StyledRoot, { className: this.props.className, orientation: this.props.orientation, ref: this.nodeRefs.root, style: this.props.style },
-            react_1.default.createElement(StyledGutter, { extendedCSS: this.props.cssGutter }),
-            react_1.default.createElement(StyledKnob, { ref: this.nodeRefs.knobA, radius: this.props.knobRadius, tintColor: this.props.tintColor, hitboxPadding: this.props.hitboxPadding, isDragging: this.state.isDraggingStartingKnob, isReleasing: this.state.isReleasingStartingKnob, isDisabled: (this.state.range[1] === this.props.min) && (this.state.range[0] === this.props.min), style: this.props.orientation === 'horizontal' ? {
-                    marginLeft: "".concat(this.getDisplacementByValue(this.state.range[0]), "px"),
-                } : {
-                    marginTop: "".concat(this.getDisplacementByValue(this.state.range[0]), "px"),
-                }, extendedCSS: this.props.cssKnob }),
-            this.props.areLabelsVisible && (react_1.default.createElement(StyledLabel, { knobRadius: this.props.knobRadius, orientation: this.props.orientation, isDragging: this.state.isDraggingStartingKnob, isReleasing: this.state.isReleasingStartingKnob, style: this.props.orientation === 'horizontal' ? {
-                    transform: "translate3d(calc(-50% + ".concat(this.getDisplacementByValue(this.state.range[0]), "px), 0, 0)"),
-                } : {
-                    transform: "translate3d(0, calc(-50% + ".concat(this.getDisplacementByValue(this.state.range[0]), "px), 0)"),
-                }, extendedCSS: this.props.cssLabel }, Number(this.state.range[0].toFixed(this.props.decimalPlaces)).toLocaleString())),
-            react_1.default.createElement(StyledHighlight, { tintColor: this.props.tintColor, isDragging: this.state.isDraggingStartingKnob || this.state.isDraggingEndingKnob, isReleasing: this.state.isReleasingStartingKnob || this.state.isReleasingEndingKnob, style: this.props.orientation === 'horizontal' ? {
-                    width: "".concat(this.highlightLength, "px"),
-                    transform: "translate3d(".concat(this.getDisplacementByValue(this.state.range[0]), "px, 0, 0)"),
-                } : {
-                    height: "".concat(this.highlightLength, "px"),
-                    transform: "translate3d(0, ".concat(this.getDisplacementByValue(this.state.range[0]), "px, 0)"),
-                }, extendedCSS: this.props.cssHighlight }),
-            react_1.default.createElement(StyledKnob, { ref: this.nodeRefs.knobB, radius: this.props.knobRadius, tintColor: this.props.tintColor, hitboxPadding: this.props.hitboxPadding, isDragging: this.state.isDraggingEndingKnob, isReleasing: this.state.isReleasingEndingKnob, isDisabled: (this.state.range[1] === this.props.max) && (this.state.range[0] === this.props.max), style: this.props.orientation === 'horizontal' ? {
-                    marginLeft: "".concat(this.getDisplacementByValue(this.state.range[1]), "px"),
-                } : {
-                    marginTop: "".concat(this.getDisplacementByValue(this.state.range[1]), "px"),
-                }, extendedCSS: this.props.cssKnob }),
-            this.props.areLabelsVisible && (react_1.default.createElement(StyledLabel, { knobRadius: this.props.knobRadius, orientation: this.props.orientation, isDragging: this.state.isDraggingStartingKnob || this.state.isDraggingEndingKnob, isReleasing: this.state.isReleasingStartingKnob || this.state.isReleasingEndingKnob, style: this.props.orientation === 'horizontal' ? {
-                    transform: "translate3d(calc(-50% + ".concat(this.getDisplacementByValue(this.state.range[1]), "px), 0, 0)"),
-                } : {
-                    transform: "translate3d(0, calc(-50% + ".concat(this.getDisplacementByValue(this.state.range[1]), "px), 0)"),
-                }, extendedCSS: this.props.cssLabel }, Number(this.state.range[1].toFixed(this.props.decimalPlaces)).toLocaleString()))));
-    };
-    RangeSlider.prototype.reconfigureInteractivityIfNeeded = function () {
-        var _this = this;
-        var knobANode = this.nodeRefs.knobA.current;
-        var knobBNode = this.nodeRefs.knobB.current;
-        if (knobANode && !interactjs_1.default.isSet(knobANode)) {
-            (0, interactjs_1.default)(knobANode).draggable({
-                inertia: true,
-                onstart: function () { return _this.onKnobADragStart(); },
-                onmove: function (_a) {
-                    var dx = _a.dx, dy = _a.dy;
-                    return _this.onKnobADragMove(_this.props.orientation === 'horizontal' ? dx : dy);
-                },
-                onend: function () { return _this.onKnobADragEnd(); },
-            });
-        }
-        if (knobBNode && !interactjs_1.default.isSet(knobBNode)) {
-            (0, interactjs_1.default)(knobBNode).draggable({
-                inertia: true,
-                onstart: function () { return _this.onKnobBDragStart(); },
-                onmove: function (_a) {
-                    var dx = _a.dx, dy = _a.dy;
-                    return _this.onKnobBDragMove(_this.props.orientation === 'horizontal' ? dx : dy);
-                },
-                onend: function () { return _this.onKnobBDragEnd(); },
-            });
-        }
-    };
-    RangeSlider.prototype.snapToClosestBreakpoint = function () {
-        if (this.props.steps < 0)
-            return;
-        this.setState({
-            range: [this.getClosestSteppedValueOfValue(this.state.range[0]), this.getClosestSteppedValueOfValue(this.state.range[1])],
-        });
-    };
-    RangeSlider.prototype.areRangesEqual = function (range1, range2) {
-        if (!range1)
-            return false;
-        if (!range2)
-            return false;
-        if (range1[0] !== range2[0])
-            return false;
-        if (range1[1] !== range2[1])
-            return false;
-        return true;
-    };
-    RangeSlider.prototype.getPositionByValue = function (value) {
-        var _a = this.props, min = _a.min, max = _a.max;
-        return (value - min) / (max - min);
-    };
-    RangeSlider.prototype.getDisplacementByPosition = function (position) {
-        if (this.props.orientation === 'horizontal') {
-            return position * this.rect.width;
-        }
-        else {
-            return position * this.rect.height;
-        }
-    };
-    RangeSlider.prototype.getDisplacementByValue = function (value) {
-        var position = this.getPositionByValue(value);
-        return this.getDisplacementByPosition(position);
-    };
-    RangeSlider.prototype.getPositionByDisplacement = function (displacement) {
-        if (this.props.orientation === 'horizontal') {
-            return displacement / this.rect.width;
-        }
-        else {
-            return displacement / this.rect.height;
-        }
-    };
-    RangeSlider.prototype.getValueByPosition = function (position) {
-        var _a = this.props, min = _a.min, max = _a.max;
-        return (position * (max - min)) + min;
-    };
-    RangeSlider.prototype.getClosestSteppedValueOfValue = function (value) {
-        var breakpoints = this.breakpoints;
+var useDragEffect_1 = __importDefault(require("./hooks/useDragEffect"));
+var useResizeEffect_1 = __importDefault(require("./hooks/useResizeEffect"));
+var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
+var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
+var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
+var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
+var styles_1 = __importDefault(require("./utils/styles"));
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var children = _a.children, className = _a.className, _k = _a.areLabelsVisible, areLabelsVisible = _k === void 0 ? true : _k, _l = _a.decimalPlaces, decimalPlaces = _l === void 0 ? 2 : _l, _m = _a.knobPadding, knobPadding = _m === void 0 ? 20 : _m, maxValue = _a.max, minValue = _a.min, _o = _a.orientation, orientation = _o === void 0 ? 'vertical' : _o, externalRange = _a.range, _p = _a.steps, steps = _p === void 0 ? -1 : _p, onRangeChange = _a.onRangeChange, props = __rest(_a, ["children", "className", "areLabelsVisible", "decimalPlaces", "knobPadding", "max", "min", "orientation", "range", "steps", "onRangeChange"]);
+    var getPositionByValue = function (value) { return (value - minValue) / (maxValue - minValue); };
+    var getPositionByDisplacement = function (displacement) { return displacement / (orientation === 'horizontal' ? size.width : size.height); };
+    var getValueByPosition = function (position) { return position * (maxValue - minValue) + minValue; };
+    var getValueByDisplacement = function (displacement) { return getValueByPosition(getPositionByDisplacement(displacement)); };
+    var getDisplacementByPosition = function (position) { return position * (orientation === 'horizontal' ? size.width : size.height); };
+    var getDisplacementByValue = function (value) { return getDisplacementByPosition(getPositionByValue(value)); };
+    var getClosestSteppedValue = function (value) {
         var n = breakpoints.length;
         var idx = 0;
         var diff = Infinity;
@@ -254,94 +107,227 @@ var RangeSlider = /** @class */ (function (_super) {
         }
         return breakpoints[idx];
     };
-    RangeSlider.prototype.onKnobADragStart = function () {
-        this.setState({
-            isDraggingStartingKnob: true,
-            isReleasingStartingKnob: false,
-            isDraggingEndingKnob: false,
-            isReleasingEndingKnob: false,
-        });
-    };
-    RangeSlider.prototype.onKnobADragEnd = function () {
-        this.setState({
-            isDraggingStartingKnob: false,
-            isReleasingStartingKnob: true,
-            isDraggingEndingKnob: false,
-            isReleasingEndingKnob: false,
-        });
-        this.snapToClosestBreakpoint();
-    };
-    RangeSlider.prototype.onKnobADragMove = function (delta) {
-        var _a = __read(this.state.range, 2), valA = _a[0], valB = _a[1];
-        var min = this.getDisplacementByValue(this.props.min);
-        var max = this.getDisplacementByValue(valB);
-        var curr = this.getDisplacementByValue(valA);
-        var next = Math.max(min, Math.min(max, curr + delta));
-        var nextPos = this.getPositionByDisplacement(next);
-        var nextVal = this.getValueByPosition(nextPos);
-        this.setState({
-            isDraggingStartingKnob: true,
-            isReleasingStartingKnob: false,
-            isDraggingEndingKnob: false,
-            isReleasingEndingKnob: false,
-            range: [nextVal, valB],
-        });
-    };
-    RangeSlider.prototype.onKnobBDragStart = function () {
-        this.setState({
-            isDraggingStartingKnob: false,
-            isReleasingStartingKnob: false,
-            isDraggingEndingKnob: true,
-            isReleasingEndingKnob: false,
-        });
-    };
-    RangeSlider.prototype.onKnobBDragEnd = function () {
-        this.setState({
-            isDraggingStartingKnob: false,
-            isReleasingStartingKnob: false,
-            isDraggingEndingKnob: false,
-            isReleasingEndingKnob: true,
-        });
-        this.snapToClosestBreakpoint();
-    };
-    RangeSlider.prototype.onKnobBDragMove = function (delta) {
-        var _a = __read(this.state.range, 2), valA = _a[0], valB = _a[1];
-        var min = this.getDisplacementByValue(valA);
-        var max = this.getDisplacementByValue(this.props.max);
-        var curr = this.getDisplacementByValue(valB);
-        var next = Math.max(min, Math.min(max, curr + delta));
-        var nextPos = this.getPositionByDisplacement(next);
-        var nextVal = this.getValueByPosition(nextPos);
-        this.setState({
-            isDraggingStartingKnob: false,
-            isReleasingStartingKnob: false,
-            isDraggingEndingKnob: true,
-            isReleasingEndingKnob: false,
-            range: [valA, nextVal],
-        });
-    };
-    RangeSlider.defaultProps = {
-        style: {},
-        areLabelsVisible: true,
-        decimalPlaces: 2,
-        hitboxPadding: 20,
-        knobRadius: 10,
-        steps: -1,
-        tintColor: '#fff',
-        orientation: 'vertical',
-        onRangeChange: function () { },
-        cssGutter: function () { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""]))); },
-        cssHighlight: function () { return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""]))); },
-        cssKnob: function () { return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""]))); },
-        cssLabel: function () { return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""]))); },
-    };
-    return RangeSlider;
-}(react_1.PureComponent));
-exports.default = RangeSlider;
-var StyledHighlight = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  top: 0;\n  left: 0;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  background: ", ";\n  transition-property: ", ";\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n  will-change: opacity, width, transform;\n  ", "\n"], ["\n  top: 0;\n  left: 0;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  background: ", ";\n  transition-property: ", ";\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n  will-change: opacity, width, transform;\n  ", "\n"])), function (props) { return props.tintColor; }, function (props) { return props.isReleasing ? 'opacity, width, transform' : 'opacity'; }, function (props) { return props.extendedCSS(props); });
-var StyledLabel = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: transparent;\n  color: #fff;\n  left: ", ";\n  padding: 10px;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: ", ";\n  transition-duration: 100ms;\n  transition-property: ", ";\n  transition-timing-function: ease-out;\n  user-select: none;\n  will-change: opacity, transform;\n  ", "\n"], ["\n  background: transparent;\n  color: #fff;\n  left: ", ";\n  padding: 10px;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: ", ";\n  transition-duration: 100ms;\n  transition-property: ", ";\n  transition-timing-function: ease-out;\n  user-select: none;\n  will-change: opacity, transform;\n  ", "\n"])), function (props) { return props.orientation === 'horizontal' ? '0' : "".concat(props.knobRadius, "px"); }, function (props) { return props.orientation === 'horizontal' ? "".concat(props.knobRadius, "px") : '0'; }, function (props) { return props.isReleasing ? 'opacity, transform' : 'opacity'; }, function (props) { return props.extendedCSS(props); });
-var StyledKnob = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background: transparent;\n  box-sizing: border-box;\n  display: block;\n  height: ", "px;\n  left: ", "px;\n  padding: ", "px;\n  pointer-events: ", ";\n  position: absolute;\n  top: ", "px;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: ", ";\n  transition-timing-function: ease-out;\n  width: ", "px;\n  will-change: opacity, transform, margin, background;\n  z-index: 1;\n\n  &::after {\n    content: '';\n    border-radius: 100%;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    position: absolute;\n    width: ", "px;\n    height: ", "px;\n    background: ", ";\n  }\n\n  ", "\n"], ["\n  background: transparent;\n  box-sizing: border-box;\n  display: block;\n  height: ", "px;\n  left: ", "px;\n  padding: ", "px;\n  pointer-events: ", ";\n  position: absolute;\n  top: ", "px;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: ", ";\n  transition-timing-function: ease-out;\n  width: ", "px;\n  will-change: opacity, transform, margin, background;\n  z-index: 1;\n\n  &::after {\n    content: '';\n    border-radius: 100%;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    position: absolute;\n    width: ", "px;\n    height: ", "px;\n    background: ", ";\n  }\n\n  ", "\n"])), function (props) { return (props.radius + props.hitboxPadding) * 2; }, function (props) { return -props.radius - props.hitboxPadding; }, function (props) { return props.hitboxPadding; }, function (props) { return props.isDisabled ? 'none' : 'auto'; }, function (props) { return -props.radius - props.hitboxPadding; }, function (props) { return props.isReleasing ? 'background, opacity, margin, transform' : 'background, opacity, transform'; }, function (props) { return (props.radius + props.hitboxPadding) * 2; }, function (props) { return props.radius * 2; }, function (props) { return props.radius * 2; }, function (props) { return props.tintColor; }, function (props) { return props.extendedCSS(props); });
-var StyledGutter = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, .2);\n  ", "\n"], ["\n  display: block;\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, .2);\n  ", "\n"])), function (props) { return props.extendedCSS(props); });
-var StyledRoot = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex: 0 0 auto;\n  height: ", ";\n  position: relative;\n  width: ", ";\n"], ["\n  display: flex;\n  flex: 0 0 auto;\n  height: ", ";\n  position: relative;\n  width: ", ";\n"])), function (props) { return props.orientation === 'horizontal' ? '2px' : '300px'; }, function (props) { return props.orientation === 'horizontal' ? '300px' : '2px'; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+    var bodyRef = (0, react_1.useRef)(null);
+    var startKnobRef = (0, react_1.useRef)(null);
+    var endKnobRef = (0, react_1.useRef)(null);
+    var _q = __read((0, useResizeEffect_1.default)(bodyRef), 1), size = _q[0];
+    var _r = __read((0, react_1.useState)(externalRange !== null && externalRange !== void 0 ? externalRange : [minValue, maxValue]), 2), range = _r[0], setRange = _r[1];
+    var _s = (0, useDragEffect_1.default)(startKnobRef, {
+        initialValue: (_b = externalRange === null || externalRange === void 0 ? void 0 : externalRange[0]) !== null && _b !== void 0 ? _b : minValue,
+        transform: function (value, dx, dy) {
+            var delta = orientation === 'horizontal' ? dx : dy;
+            var dMin = getDisplacementByValue(minValue);
+            var dMax = getDisplacementByValue(range[1]);
+            var dCurr = getDisplacementByValue(value) + delta;
+            return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)));
+        },
+    }, [minValue, orientation, size, range[1]]), _t = __read(_s.isDragging, 1), isDraggingStartKnob = _t[0], _u = __read(_s.isReleasing, 1), isReleasingStartKnob = _u[0], _v = __read(_s.value, 2), startValue = _v[0], setStartValue = _v[1];
+    var _w = (0, useDragEffect_1.default)(endKnobRef, {
+        initialValue: (_c = externalRange === null || externalRange === void 0 ? void 0 : externalRange[1]) !== null && _c !== void 0 ? _c : maxValue,
+        transform: function (value, dx, dy) {
+            var delta = orientation === 'horizontal' ? dx : dy;
+            var dMin = getDisplacementByValue(range[0]);
+            var dMax = getDisplacementByValue(maxValue);
+            var dCurr = getDisplacementByValue(value) + delta;
+            return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)));
+        },
+    }, [maxValue, orientation, size, range[0]]), _x = __read(_w.isDragging, 1), isDraggingEndKnob = _x[0], _y = __read(_w.isReleasing, 1), isReleasingEndKnob = _y[0], _z = __read(_w.value, 2), endValue = _z[0], setEndValue = _z[1];
+    var breakpoints = __spreadArray(__spreadArray([minValue], __read(__spreadArray([], __read(Array(steps)), false).map(function (v, i) { return minValue + (i + 1) * (maxValue - minValue) / (1 + steps); })), false), [maxValue], false);
+    var _0 = __read(range.map(getDisplacementByValue), 2), start = _0[0], end = _0[1];
+    var highlightLength = end - start;
+    (0, react_1.useEffect)(function () {
+        if (range[0] === startValue)
+            return;
+        setRange([startValue, range[1]]);
+        onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(range);
+    }, [startValue]);
+    (0, react_1.useEffect)(function () {
+        if (range[1] === endValue)
+            return;
+        setRange([range[0], endValue]);
+        onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(range);
+    }, [endValue]);
+    (0, react_1.useEffect)(function () {
+        if (isDraggingStartKnob || isDraggingEndKnob || (0, fast_deep_equal_1.default)(externalRange, range))
+            return;
+        setRange(externalRange !== null && externalRange !== void 0 ? externalRange : [minValue, maxValue]);
+    }, [externalRange]);
+    (0, react_1.useEffect)(function () {
+        if (steps < 0)
+            return;
+        setStartValue(getClosestSteppedValue(startValue));
+    }, [isReleasingStartKnob]);
+    (0, react_1.useEffect)(function () {
+        if (steps < 0 || !isReleasingEndKnob)
+            return;
+        setEndValue(getClosestSteppedValue(endValue));
+    }, [isReleasingEndKnob]);
+    var components = (0, asComponentDict_1.default)(children, {
+        gutter: exports.RangeSliderGutter,
+        highlight: exports.RangeSliderHighlight,
+        knob: exports.RangeSliderKnob,
+        label: exports.RangeSliderLabel,
+    });
+    var fixedClassNames = (0, asClassNameDict_1.default)({
+        root: (0, classnames_1.default)(orientation),
+        gutter: (0, classnames_1.default)(orientation),
+        highlight: (0, classnames_1.default)(orientation),
+        knob: (0, classnames_1.default)(orientation),
+        label: (0, classnames_1.default)(orientation),
+    });
+    var fixedStyles = (0, asStyleDict_1.default)({
+        body: {
+            height: '100%',
+            width: '100%',
+        },
+        gutter: {
+            display: 'block',
+            top: '0',
+            left: '0',
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+        },
+        highlight: __assign({ height: '100%', left: '0', position: 'absolute', top: '0' }, orientation === 'horizontal' ? {
+            width: "".concat(highlightLength, "px"),
+            transform: "translate3d(".concat(start, "px, 0, 0)"),
+        } : {
+            height: "".concat(highlightLength, "px"),
+            transform: "translate3d(0, ".concat(start, "px, 0)"),
+        }),
+        knob: {
+            bottom: '0',
+            left: '0',
+            margin: 'auto',
+            position: 'absolute',
+            right: '0',
+            top: '0',
+            touchAction: 'none',
+            zIndex: '1',
+        },
+        knobHitbox: {
+            background: 'transparent',
+            height: "calc(100% + ".concat(knobPadding * 2, "px)"),
+            left: "-".concat(knobPadding, "px"),
+            padding: "".concat(knobPadding, "px"),
+            position: 'absolute',
+            top: "-".concat(knobPadding, "px"),
+            width: "calc(100% + ".concat(knobPadding * 2, "px)"),
+        },
+        label: {
+            pointerEvents: 'none',
+            position: 'relative',
+            userSelect: 'none',
+        },
+    });
+    var defaultStyles = (0, asStyleDict_1.default)({
+        gutter: {
+            background: 'rgba(255, 255, 255, .2)',
+        },
+        highlight: {
+            background: '#fff',
+            transitionDuration: '100ms',
+            transitionProperty: (isReleasingStartKnob ? !isReleasingEndKnob : isReleasingEndKnob) ? 'opacity, width, transform' : 'opacity',
+            transitionTimingFunction: 'ease-out',
+        },
+        knob: {
+            alignItems: 'center',
+            background: '#fff',
+            borderRadius: '10px',
+            boxSizing: 'border-box',
+            display: 'flex',
+            height: '20px',
+            justifyContent: 'center',
+            transitionDuration: '100ms',
+            transitionTimingFunction: 'ease-out',
+            width: '20px',
+        },
+        label: __assign({ background: 'transparent', color: '#fff', textAlign: 'center', transitionDuration: '100ms', transitionTimingFunction: 'ease-out' }, orientation === 'horizontal' ? {
+            top: 'calc(100% + 10px)',
+        } : {
+            left: 'calc(100% + 10px)',
+        }),
+    });
+    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root) }),
+        react_1.default.createElement("div", { ref: bodyRef, style: fixedStyles.body },
+            (0, cloneStyledElement_1.default)((_d = components.gutter) !== null && _d !== void 0 ? _d : react_1.default.createElement(exports.RangeSliderGutter, { style: defaultStyles.gutter }), {
+                className: (0, classnames_1.default)(fixedClassNames.gutter),
+                style: (0, styles_1.default)(fixedStyles.gutter),
+            }),
+            (0, cloneStyledElement_1.default)((_e = components.highlight) !== null && _e !== void 0 ? _e : react_1.default.createElement(exports.RangeSliderHighlight, { style: defaultStyles.highlight }), {
+                className: (0, classnames_1.default)(fixedClassNames.highlight),
+                style: (0, styles_1.default)(fixedStyles.highlight),
+            }),
+            (0, cloneStyledElement_1.default)((_f = components.knob) !== null && _f !== void 0 ? _f : react_1.default.createElement(exports.RangeSliderKnob, { style: (0, styles_1.default)(defaultStyles.knob, {
+                    transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',
+                }) }), {
+                ref: startKnobRef,
+                disabled: (0, fast_deep_equal_1.default)([startValue, endValue], [maxValue, maxValue]),
+                className: (0, classnames_1.default)(fixedClassNames.knob, {
+                    dragging: isDraggingStartKnob,
+                    releasing: isReleasingStartKnob,
+                }),
+                style: (0, styles_1.default)(fixedStyles.knob, {
+                    pointerEvents: (0, fast_deep_equal_1.default)([startValue, endValue], [minValue, minValue]) ? 'none' : 'auto',
+                }, orientation === 'horizontal' ? {
+                    marginLeft: "".concat(start, "px"),
+                } : {
+                    marginTop: "".concat(start, "px"),
+                }),
+            }, react_1.default.createElement("div", { style: fixedStyles.knobHitbox }), areLabelsVisible &&
+                (0, cloneStyledElement_1.default)((_g = components.label) !== null && _g !== void 0 ? _g : react_1.default.createElement(exports.RangeSliderLabel, { style: (0, styles_1.default)(defaultStyles.label, {
+                        transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',
+                    }) }), {
+                    className: (0, classnames_1.default)(fixedClassNames.label, {
+                        dragging: isDraggingStartKnob || isDraggingEndKnob,
+                        releasing: isReleasingStartKnob || isReleasingEndKnob,
+                    }),
+                    style: (0, styles_1.default)(fixedStyles.label),
+                }, Number(startValue.toFixed(decimalPlaces)).toLocaleString())),
+            (0, cloneStyledElement_1.default)((_h = components.knob) !== null && _h !== void 0 ? _h : react_1.default.createElement(exports.RangeSliderKnob, { style: (0, styles_1.default)(defaultStyles.knob, {
+                    transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',
+                }) }), {
+                ref: endKnobRef,
+                disabled: (0, fast_deep_equal_1.default)([startValue, endValue], [maxValue, maxValue]),
+                className: (0, classnames_1.default)(fixedClassNames.knob, {
+                    dragging: isDraggingEndKnob,
+                    releasing: isDraggingEndKnob,
+                }),
+                style: (0, styles_1.default)(fixedStyles.knob, {
+                    pointerEvents: (0, fast_deep_equal_1.default)([startValue, endValue], [maxValue, maxValue]) ? 'none' : 'auto',
+                }, orientation === 'horizontal' ? {
+                    marginLeft: "".concat(end, "px"),
+                } : {
+                    marginTop: "".concat(end, "px"),
+                }),
+            }, react_1.default.createElement("div", { style: fixedStyles.knobHitbox }), areLabelsVisible &&
+                (0, cloneStyledElement_1.default)((_j = components.label) !== null && _j !== void 0 ? _j : react_1.default.createElement(exports.RangeSliderLabel, { style: (0, styles_1.default)(defaultStyles.label, {
+                        transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',
+                    }) }), {
+                    className: (0, classnames_1.default)(fixedClassNames.label, {
+                        dragging: isDraggingEndKnob,
+                        releasing: isReleasingEndKnob,
+                    }),
+                    style: (0, styles_1.default)(fixedStyles.label),
+                }, Number(endValue.toFixed(decimalPlaces)).toLocaleString())))));
+});
+var RangeSliderGutter = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.RangeSliderGutter = RangeSliderGutter;
+var RangeSliderLabel = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.RangeSliderLabel = RangeSliderLabel;
+var RangeSliderHighlight = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.RangeSliderHighlight = RangeSliderHighlight;
+exports.RangeSliderKnob = (0, react_1.forwardRef)(function (_a, ref) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props, { ref: ref }));
+});
 //# sourceMappingURL=RangeSlider.js.map