import React, { useState, useEffect, useRef } from 'react';
import 'react-dom';
import { c as _slicedToArray } from '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import 'styled-components';
import { K as KEY_CODES } from '../key_codes-ff72266d.js';
import '../hooks/useActivify.js';
import '../index-6829ab1f.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import '../index-fc484d02.js';
import '../overlays/withTooltip.js';
import '../index-155df85b.js';
import '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import '../ui/box.js';
import { u as useInput } from '../useInput-87c61cca.js';
import { Label } from '../ui/label.js';
import '../index-923d986f.js';

var css_248z = ".useRangeSlider_sliderKnobWrapper__3KavF {\n  position: relative;\n  position: absolute;\n  top: 50%;\n  left: 40%;\n  width: 18px;\n  height: 18px;\n  margin-top: -9px;\n  margin-left: -9px;\n  cursor: grab;\n  display: flex;\n  align-items: center;\n  justify-content: center; }\n  .useRangeSlider_sliderKnobWrapper__3KavF:active {\n    cursor: grabbing; }\n\n.useRangeSlider_sliderKnob__w40pK {\n  pointer-events: none;\n  position: relative;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background-color: #8cb8f2;\n  border: 2px solid #124fa0;\n  cursor: pointer;\n  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }\n  .useRangeSlider_sliderKnob__w40pK:hover {\n    transform: scale3d(1.1, 1.1, 1); }\n\n.useRangeSlider_sliderKnobText__1A8bX {\n  font-size: 12px;\n  position: relative;\n  left: -1px;\n  text-align: center;\n  padding-top: 2px;\n  color: #124fa0;\n  font-weight: 600;\n  white-space: nowrap; }\n\n.useRangeSlider_sliderKnobGhost__2gWFD {\n  position: absolute;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n  background-color: #fff;\n  border-radius: 24px;\n  opacity: 0;\n  cursor: grab; }\n  .useRangeSlider_sliderKnobGhost__2gWFD:active {\n    cursor: grabbing; }\n\n.useRangeSlider_sliderInputTextStart__1do1J {\n  font-size: 12px;\n  position: absolute;\n  left: 0px;\n  bottom: -20px;\n  opacity: 0;\n  transition: 0.2s ease-out; }\n  .useRangeSlider_sliderInputTextStart__1do1J.useRangeSlider_active__C6SbV {\n    opacity: 0.5; }\n\n.useRangeSlider_sliderInputTextEnd__1oo0H {\n  font-size: 12px;\n  position: absolute;\n  right: -8px;\n  bottom: -20px;\n  opacity: 0;\n  transition: 0.2s ease-out; }\n  .useRangeSlider_sliderInputTextEnd__1oo0H.useRangeSlider_active__C6SbV {\n    opacity: 0.5; }\n\n.useRangeSlider_sliderTextInput__2n0AT {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  flex: 1;\n  max-width: 200px; }\n  .useRangeSlider_sliderTextInput__2n0AT:first-child {\n    margin-right: 8px; }\n  .useRangeSlider_sliderTextInput__2n0AT input {\n    border: none;\n    outline: none;\n    background-color: transparent;\n    width: 100%;\n    height: 100%;\n    padding: 4px 8px;\n    padding-left: 40px;\n    font-size: 14px;\n    text-align: right; }\n  .useRangeSlider_sliderTextInput__2n0AT .useRangeSlider_sliderTextInputLabel__2KWRW {\n    position: absolute;\n    font-size: 12px;\n    pointer-events: none;\n    color: #888;\n    top: 50%;\n    left: 8px;\n    transform: translateY(-50%); }\n";
var styles = {"sliderKnobWrapper":"useRangeSlider_sliderKnobWrapper__3KavF","sliderKnob":"useRangeSlider_sliderKnob__w40pK","sliderKnobText":"useRangeSlider_sliderKnobText__1A8bX","sliderKnobGhost":"useRangeSlider_sliderKnobGhost__2gWFD","sliderInputTextStart":"useRangeSlider_sliderInputTextStart__1do1J","active":"useRangeSlider_active__C6SbV","sliderInputTextEnd":"useRangeSlider_sliderInputTextEnd__1oo0H","sliderTextInput":"useRangeSlider_sliderTextInput__2n0AT","sliderTextInputLabel":"useRangeSlider_sliderTextInputLabel__2KWRW"};
styleInject(css_248z);

/**
 * returns a function that takes exact knob position as a parameter and returns rounded range value.
 * @param {number} start start value from props
 * @param {number} end end value from props
 * @param {number} step step value from props
 * @returns {number}
 */
var toPosition = function toPosition(start, end, step) {
  return function (position) {
    var value = start + position / 100 * (end - start);
    return Math.round(value / step) * step;
  };
};
var fromPosition = function fromPosition(start, end) {
  return function (position) {
    return 100 * (position - start) / (end - start);
  };
};
var getKnobPosition = function getKnobPosition(_ref) {
  var pageX = _ref.pageX,
    trackRect = _ref.trackRect;
  var knobPosition = (pageX - trackRect.left) / trackRect.width * 100;
  knobPosition = knobPosition < 0 ? 0 : knobPosition;
  knobPosition = knobPosition > 100 ? 100 : knobPosition;
  return knobPosition;
};
function useRangeSlider(_ref2) {
  var value = _ref2.value,
    start = _ref2.start,
    end = _ref2.end,
    onChange = _ref2.onChange,
    step = _ref2.step,
    trackRef = _ref2.trackRef,
    single = _ref2.single,
    onDrag = _ref2.onDrag,
    placeholder = _ref2.placeholder,
    startPlaceholder = _ref2.startPlaceholder,
    endPlaceholder = _ref2.endPlaceholder,
    renderInputValue = _ref2.renderInputValue,
    translateInputValue = _ref2.translateInputValue;
  var _useState = useState({}),
    _useState2 = _slicedToArray(_useState, 2),
    startPosition = _useState2[0],
    setStartPosition = _useState2[1];
  var _useState3 = useState({}),
    _useState4 = _slicedToArray(_useState3, 2),
    endPosition = _useState4[0],
    setEndPosition = _useState4[1];
  var _useState5 = useState(),
    _useState6 = _slicedToArray(_useState5, 2),
    pointerX = _useState6[0],
    setPointerX = _useState6[1];
  var _useState7 = useState(""),
    _useState8 = _slicedToArray(_useState7, 2),
    startValue = _useState8[0],
    setStartValue = _useState8[1];
  var _useState9 = useState(""),
    _useState10 = _slicedToArray(_useState9, 2),
    endValue = _useState10[0],
    setEndValue = _useState10[1];
  var _useState11 = useState(),
    _useState12 = _slicedToArray(_useState11, 2),
    dragging = _useState12[0],
    setDragging = _useState12[1];
  var translateToPosition = toPosition(start, end, step);
  var translateFromPosition = fromPosition(start, end);
  var startDragging = function startDragging() {
    return function () {
      return setDragging(true);
    };
  };
  var handleDrag = function handleDrag(knobType) {
    return function (e) {
      var pageX;
      if (e.target.dragTest) {
        pageX = e.target.pageX;
      } else {
        pageX = e.pageX;
      }
      var trackRect = trackRef.current.getBoundingClientRect();
      if (pageX <= 0) return;
      var knobPosition = getKnobPosition({
        pageX: pageX,
        trackRect: trackRect
      });
      var knobPositionRounded = knobPosition;
      if (knobType === "start" && knobPosition > endPosition.exact - 1) {
        setPointerX(pageX);
        setStartPosition({
          exact: knobPosition,
          rounded: knobPositionRounded
        });
        setEndPosition({
          exact: knobPosition + 1,
          rounded: knobPositionRounded + 1
        });
      } else if (knobType === "end" && knobPosition < startPosition.exact + 1) {
        setPointerX(pageX);
        setStartPosition({
          exact: knobPosition - 1,
          rounded: knobPositionRounded - 1
        });
        setEndPosition({
          exact: knobPosition,
          rounded: knobPositionRounded
        });
      } else {
        setPointerX(pageX);
        var setter = knobType === "start" ? setStartPosition : setEndPosition;
        setPointerX(pageX);
        setter({
          exact: knobPosition,
          rounded: knobPositionRounded
        });
      }
      if (onDrag) {
        onDrag(translateToPosition(knobPosition));
      }
    };
  };
  var endDrag = function endDrag(knobType) {
    return function () {
      var startValue = translateToPosition(startPosition.exact);
      var endValue = translateToPosition(endPosition.exact);
      if (single) onChange(endValue);else onChange([startValue, endValue]);
      var setter = knobType === "start" ? setStartPosition : setEndPosition;
      var currentPosition = knobType === "start" ? startPosition : endPosition;
      setPointerX(0);
      setDragging(false);
      setter({
        exact: currentPosition.rounded,
        rounded: currentPosition.rounded
      });
    };
  };
  var onKnobValueChange = function onKnobValueChange(isStartKnob, knobValue, knobPosition) {
    var newValue = knobValue;
    var newPosition = knobPosition;
    if (knobValue > end) newValue = end;
    if (knobValue < 0) newValue = 0;
    if (newPosition > 100) newPosition = 100;
    if (newPosition < 0) newPosition = 0;
    var setter = isStartKnob ? {
      setValue: setStartValue,
      setPosition: setStartPosition
    } : {
      setValue: setEndValue,
      setPosition: setEndPosition
    };
    setter.setValue(newValue);
    setter.setPosition({
      exact: newPosition,
      rounded: newPosition
    });
    if (single) onChange(newValue);else {
      var _startValue = translateToPosition(startPosition.exact);
      var _endValue = translateToPosition(endPosition.exact);
      isStartKnob ? onChange([newValue, _endValue]) : onChange([_startValue, newValue]);
    }
  };

  /**
   * calculates knob position and knob value and passes it to the onKnobValueChange function
   * @param {string} knobType type of knob (start or end)
   * @param {string} value range value
   */
  var changeKnobPosition = function changeKnobPosition(knobType, value) {
    var isStartKnob = knobType === "start";
    var knobPosition = translateFromPosition(value);
    var knobValue = translateToPosition(knobPosition);
    onKnobValueChange(isStartKnob, knobValue, knobPosition);
  };

  /**
   * returns a function that takes value and keyDown event as parameter to change knob position
   * @param {string} knobType type of knob (start or end)
   */
  var handleKeyDown = function handleKeyDown(knobType) {
    return function (value, e) {
      switch (e.keyCode) {
        case KEY_CODES.ESC:
        case KEY_CODES.TAB:
          changeKnobPosition(knobType, value);
          break;
        case KEY_CODES.ENTER:
          e.preventDefault();
          changeKnobPosition(knobType, value);
          break;
      }
    };
  };

  /**
   * returns a function that accepts a value parameter to change knob position
   * @param {string} knobType type of knob (start or end)
   */
  var handleBlur = function handleBlur(knobType) {
    return function (value) {
      return changeKnobPosition(knobType, value);
    };
  };
  var renderKnob = function renderKnob(knobType, prefixClassName) {
    var knobPosition = knobType === "start" ? startPosition.exact : endPosition.exact;
    var className = prefixClassName ? "".concat(prefixClassName, "-").concat(knobType, "-knob") : "";
    return /*#__PURE__*/React.createElement("div", {
      style: {
        left: "".concat(knobPosition, "%")
      },
      className: "".concat(styles.sliderKnobWrapper, " ").concat(className)
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        left: pointerX
      },
      draggable: true,
      onDragStart: startDragging(),
      onDrag: handleDrag(knobType),
      onDragEnd: endDrag(knobType),
      className: styles.sliderKnobGhost
    }), /*#__PURE__*/React.createElement("div", {
      className: styles.sliderKnob
    }));
  };

  /**
   * A custom hook returns value, setter and inputPlaceholder of a knob based on knob type.
   * @param {string} knobType type of knob (start or end)
   * @returns {[number, function, string]} value, setter, inputPlaceholder
   */
  var useValue = function useValue(knobType) {
    var inputValue;
    var knobPositionRounded;
    var setter;
    var inputPlaceholder;
    if (knobType === "start") {
      inputValue = startValue.value;
      knobPositionRounded = startPosition.rounded;
      setter = setStartValue;
      inputPlaceholder = startPlaceholder || knobType;
    } else if (knobType === "end") {
      inputValue = endValue.value;
      knobPositionRounded = endPosition.rounded;
      setter = setEndValue;
      inputPlaceholder = endPlaceholder || knobType;
    }
    var value = inputValue || !knobPositionRounded && knobPositionRounded !== 0 ? inputValue : translateToPosition(knobPositionRounded);
    return [value, setter, inputPlaceholder];
  };
  var renderInput = function renderInput(knobType, prefixClassName) {
    var _useValue = useValue(knobType),
      _useValue2 = _slicedToArray(_useValue, 3),
      value = _useValue2[0],
      setter = _useValue2[1],
      inputPlaceholder = _useValue2[2];
    var _useState13 = useState(),
      _useState14 = _slicedToArray(_useState13, 2),
      renderValue = _useState14[0],
      setRenderValue = _useState14[1];
    useEffect(function () {
      if (value !== undefined) {
        setRenderValue(renderInputValue ? renderInputValue(value) : value);
      }
    }, [value]);
    var className = prefixClassName ? "".concat(prefixClassName, "-").concat(knobType, "-input") : "";

    /**
     * returns a wrapped function that accepts keyDown event as a parameter
     * @param {function} wrapped event handler to be wrapped
     */
    var reflectKeyPressedWrapper = function reflectKeyPressedWrapper(wrapped) {
      return function (e) {
        if (e.keyCode === KEY_CODES.ESC || e.keyCode === KEY_CODES.TAB || e.keyCode === KEY_CODES.ENTER) wrapped(e);
      };
    };

    /**
     * event handler wrapper takes event handler as an input
     * returns a function that takes event as a parameter and
     * reflects the knob value and render input value by invoking the handler as a callback function
     * @param {function} handler event handler that takes event as an input
     * @author Swapnil Misal <swapnil.misal@gmail.com>
     */
    var reflectInput = function reflectInput(handler) {
      return function (e) {
        var isIntegerOnly = Number.isInteger(step);
        var isIntegerInput = Number.isInteger(parseFloat(renderValue));
        var isFloatInput = !Number.isNaN(parseFloat(renderValue));
        var isTranslatedInput = translateInputValue && renderInputValue;
        var currentValue = value;

        // resets to previous valid value for invalid inputs
        /**
         * returns converted value based on expected input if required otherwise returns previous valid value
         * @param {string} value
         * @returns {number}
         * @author Swapnil Misal <swapnil.misal@gmail.com>
         */
        var convertInputValue = function convertInputValue(value) {
          if (isIntegerOnly && isIntegerInput) return parseInt(value, 10);
          if (!isIntegerOnly && isFloatInput) return value;
          return currentValue;
        };

        // value from input text box is converted to range value
        var inputValue = isTranslatedInput ? translateInputValue(renderValue, currentValue) : convertInputValue(renderValue);

        // range value is converted to a representational value to be displayed in the input box
        var currentRenderValue = isTranslatedInput ? renderInputValue(currentValue) : currentValue;

        /**
         * handles invalid input cases by returning fallback values
         *  1. Invalid float :- returns previous valid value
         *  2. Partially valid:- applicable for representational input only returns input value
         *  3. Empty :- returns previous valid value and its representation
         *  4. Out of range :- returns capped range values e.g start or end
         *  5. start input box hits or crosses end prop :- returns value of start prop
         *  6. end input box hits or crosses start prop :- returns value of end prop
         *  7. start input box hits or crosses end input box :- returns previous valid value
         *  8. end input box hits or crosses start input box :- returns previous valid value
         *  9. valid input value :- returns input value
         * returns a pair of range value and its representation in the input box
         * @returns {array}
         * @author Swapnil Misal <swapnil.misal@gmail.com>
         */
        var handleInvalidInput = function handleInvalidInput() {
          var isInValidFloatInput = !isIntegerOnly && !Number.isInteger(inputValue / step);
          if (isInValidFloatInput) return [currentValue, currentRenderValue];

          // only for custom input where some partial representation is of equal value to the current value
          var isPartiallyValidInput = isTranslatedInput && currentValue === inputValue && currentRenderValue !== renderValue;
          if (isPartiallyValidInput) return [inputValue, currentRenderValue];

          // empty input resets to previous valid input
          var isEmptyInput = !isTranslatedInput && inputValue === "";
          if (isEmptyInput) return [currentValue, currentRenderValue];

          // out of range values capped to start or end values depends on bound violation
          var isNumberInput = !Number.isNaN(Number(inputValue));
          var hitsLowerBound = isNumberInput && inputValue < start;
          var hitsUpperBound = isNumberInput && inputValue > end;

          /**
           * returns capped value for range violating input
           * @returns {number}
           * @author Swapnil Misal <swapnil.misal@gmail.com>
           */
          var capInput = function capInput() {
            if (hitsLowerBound && single) return start;
            if (hitsUpperBound) return knobType === "start" ? currentValue : end;
            if (hitsLowerBound) return knobType === "end" ? currentValue : start;
            return inputValue;
          };
          var cappedInput = capInput();

          // checks if input value hits start or end bounds provided by props
          if (hitsLowerBound || hitsUpperBound) if (isTranslatedInput)
            // checks if translation of the value is required
            return [cappedInput, renderInputValue(cappedInput)];else return [cappedInput, cappedInput];

          // check for invalid integer input
          var isInValidIntInput = isIntegerOnly && inputValue % step !== 0;
          if (isInValidIntInput) return [currentValue, currentRenderValue];

          // ensures start input does not cross or equates to end input and vice versa
          var hitsStart = knobType === "start" && !single && Math.round(inputValue) >= translateToPosition(endPosition.rounded);
          var hitsEnd = knobType === "end" && !single && Math.round(inputValue) <= translateToPosition(startPosition.rounded);
          if (hitsStart || hitsEnd) return [currentValue, currentRenderValue];
          if (isTranslatedInput) return [inputValue, renderValue];
          return [inputValue, inputValue];
        };
        var shouldUpdateValue = function shouldUpdateValue(newValue) {
          return newValue !== value;
        };
        var shouldUpdateRenderValue = function shouldUpdateRenderValue(newRenderValue) {
          return newRenderValue !== renderValue;
        };
        var updateValue = function updateValue(value) {
          setter({
            value: value
          });
          handler(value, e);
        };
        var _handleInvalidInput = handleInvalidInput(),
          _handleInvalidInput2 = _slicedToArray(_handleInvalidInput, 2),
          newValue = _handleInvalidInput2[0],
          newRenderValue = _handleInvalidInput2[1];
        shouldUpdateValue(newValue) && updateValue(newValue);
        shouldUpdateRenderValue(newRenderValue) && setRenderValue(newRenderValue);
      };
    };

    /*
      handleKeyDown returns a function that handles onKeyDown event for a knob type.
      reflectInput takes function returned by handleKeyDown function as a parameter
      and returns event handler that takes event as a parameter.
      reflectKeyPressedWrapper takes event handler returned by reflect input as a parameter
      and returns a wrapped event handler, event handler is invoked when reflect input keys pressed.
      reflect input keys are TAB, ENTER and ESC
    */
    var onKeyDown = reflectKeyPressedWrapper(reflectInput(handleKeyDown(knobType)));

    /*
      handleBlur returns a function that handles onBlur event for a knob type.
      reflectInput takes function returned by handleBlur function as a parameter
      and returns event handler that takes event as a parameter.
    */
    var onBlur = reflectInput(handleBlur(knobType));
    var onChange = function onChange(e) {
      return setRenderValue(e.target.value);
    };
    return /*#__PURE__*/React.createElement("div", {
      className: styles.sliderTextInput
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.sliderTextInputLabel
    }, inputPlaceholder), /*#__PURE__*/React.createElement("input", {
      type: "text",
      placeholder: placeholder || "enter...",
      value: renderValue,
      onKeyDown: onKeyDown,
      className: className,
      onChange: onChange,
      onBlur: onBlur
    }));
  };
  var setPositions = function setPositions() {
    var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
    var end = arguments.length > 1 ? arguments[1] : undefined;
    var knobPositionStart = translateFromPosition(start);
    var knobPositionEnd = translateFromPosition(end);
    setStartPosition({
      exact: knobPositionStart,
      rounded: knobPositionStart
    });
    setEndPosition({
      exact: knobPositionEnd,
      rounded: knobPositionEnd
    });
  };
  useEffect(function () {
    single ? setPositions(0, value) : setPositions(value[0], value[1]);
  }, [value, value && value[0], value && value[1]]);
  var trackWidth = endPosition.exact - startPosition.exact;
  return {
    dragging: dragging,
    trackWidth: trackWidth,
    trackOffset: startPosition.exact,
    renderKnob: renderKnob,
    renderInput: renderInput
  };
}

var css_248z$1 = ".RangeSlider_slider__1ZA4A {\n  position: relative;\n  margin-bottom: 18px;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  outline: none; }\n\n.RangeSlider_sliderLabel__fkA2Q {\n  margin-right: 16px;\n  margin-bottom: 0; }\n  .RangeSlider_sliderLabel__fkA2Q.RangeSlider_focused__2Aje- {\n    color: #124fa0; }\n\n.RangeSlider_textHint__2OgSg {\n  display: block;\n  color: #999;\n  font-size: 13px;\n  font-weight: 400;\n  margin-bottom: 8px;\n  margin-left: 2px;\n  margin-top: -6px;\n  transition: 0.2s ease-out; }\n\n.RangeSlider_sliderInput__1nQF1 {\n  position: relative;\n  flex: 1;\n  margin-left: 2px; }\n\n.RangeSlider_sliderTrack__v1Ix0 {\n  position: relative;\n  width: calc( 100% - 10px);\n  height: 4px;\n  border-radius: 8px;\n  background-color: #EEE; }\n\n.RangeSlider_sliderFilled__2jX6d {\n  position: absolute;\n  width: 40%;\n  height: 100%;\n  border-radius: 8px;\n  background-color: #124fa0; }\n\n.RangeSlider_sliderTextInputs__8rJ81 {\n  display: flex;\n  flex-basis: 100%;\n  align-items: center;\n  margin-right: -8px;\n  margin-top: 8px; }\n";
var styles$1 = {"slider":"RangeSlider_slider__1ZA4A","sliderLabel":"RangeSlider_sliderLabel__fkA2Q","focused":"RangeSlider_focused__2Aje-","textHint":"RangeSlider_textHint__2OgSg","sliderInput":"RangeSlider_sliderInput__1nQF1","sliderTrack":"RangeSlider_sliderTrack__v1Ix0","sliderFilled":"RangeSlider_sliderFilled__2jX6d","sliderTextInputs":"RangeSlider_sliderTextInputs__8rJ81"};
styleInject(css_248z$1);

function RangeSlider(_ref) {
  var className = _ref.className,
    prefixClassName = _ref.prefixClassName,
    placeholder = _ref.placeholder,
    label = _ref.label,
    value = _ref.value,
    onFocus = _ref.onFocus,
    onBlur = _ref.onBlur,
    onDrag = _ref.onDrag,
    onChange = _ref.onChange,
    error = _ref.error,
    single = _ref.single,
    start = _ref.start,
    end = _ref.end,
    step = _ref.step,
    testId = _ref.testId,
    startPlaceholder = _ref.startPlaceholder,
    endPlaceholder = _ref.endPlaceholder,
    inputPlaceholder = _ref.inputPlaceholder,
    renderInputValue = _ref.renderInputValue,
    translateInputValue = _ref.translateInputValue;
  var _TextInputDOM = useRef();
  var _TrackDOM = useRef();
  var _useInput = useInput(_TextInputDOM, onFocus, onBlur),
    focused = _useInput.focused,
    handleFocus = _useInput.handleFocus,
    handleBlur = _useInput.handleBlur;
  var _useRangeSlider = useRangeSlider({
      value: value,
      start: start,
      end: end,
      onChange: onChange,
      step: step,
      trackRef: _TrackDOM,
      single: single,
      onDrag: onDrag,
      placeholder: placeholder,
      startPlaceholder: startPlaceholder,
      endPlaceholder: endPlaceholder || inputPlaceholder,
      renderInputValue: renderInputValue,
      translateInputValue: translateInputValue
    }),
    trackWidth = _useRangeSlider.trackWidth,
    trackOffset = _useRangeSlider.trackOffset,
    renderKnob = _useRangeSlider.renderKnob,
    renderInput = _useRangeSlider.renderInput;
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": testId,
    tabIndex: "0",
    onFocus: handleFocus,
    onBlur: handleBlur,
    className: "".concat(styles$1.slider, " ").concat(className, " ").concat(prefixClassName)
  }, /*#__PURE__*/React.createElement(Label, {
    focused: focused,
    error: error,
    className: "".concat(styles$1.sliderLabel, " ").concat(prefixClassName, "-label")
  }, label), /*#__PURE__*/React.createElement("div", {
    className: styles$1.sliderInput
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles$1.sliderTrack, " ").concat(prefixClassName, "-track"),
    ref: _TrackDOM
  }, /*#__PURE__*/React.createElement("div", {
    className: styles$1.sliderFilled,
    style: {
      width: "".concat(trackWidth, "%"),
      left: "".concat(trackOffset, "%")
    }
  }), single ? null : renderKnob("start", prefixClassName), renderKnob("end", prefixClassName))), /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles$1.sliderTextInputs)
  }, single ? null : renderInput("start", prefixClassName), renderInput("end", prefixClassName)));
}
RangeSlider.propTypes = {
  /** The classname to appended to the outermost element */
  className: PropTypes.string,
  /** Value of the slider input in case of single. In case of multiple, it's the end value */
  start: PropTypes.number,
  /** Value of the slider input in case of single. In case of multiple, it's the end value */
  end: PropTypes.number,
  /** If the input slider has an error, pass on the message. */
  error: PropTypes.string,
  /** Label text */
  label: PropTypes.string,
  /** Placeholder text for value indicated below the slider widget */
  placeholder: PropTypes.string,
  /** Method fired onBlur event */
  onBlur: PropTypes.func,
  /** Method fired on changing range value */
  onChange: PropTypes.func,
  /** Method fired on dragging the knob event */
  onDrag: PropTypes.func,
  /** Method fired on focusing on the slider */
  onFocus: PropTypes.func,
  /**
   * Method to format range value, range value is passed as a parameter.
   * Method should return user defined representation for supplied parameter value.
   * Returned value is displayed in the input box.
   * Mandatory prop if translateInputValue prop is passed.
   * @author Swapnil Misal <swapnil.misal@gmail.com>
   */
  renderInputValue: PropTypes.func,
  /**
   * Method to translate value in the input box.
   * Input value from input box and range value is passed as a parameter in respective order.
   * It should return previous valid range value for invalid input box value or converted range value from input value.
   * Mandatory prop if renderInputValue prop is passed.
   * @author Swapnil Misal <swapnil.misal@gmail.com>
   */
  translateInputValue: PropTypes.func,
  /** The prefix classname prepended to all elements */
  prefixClassName: PropTypes.string,
  /** Defines the type of slider. Whether it will have a range or a single knob */
  single: PropTypes.bool,
  /** The difference with which the value will be increased or decreased */
  step: PropTypes.number,
  /** Array of two numbers in case of multiple type slider. Only a number in case of single type slider. */
  value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
  /** For testing purpose */
  testId: PropTypes.string,
  /** Placeholder (LHS) of the input for the start knob */
  startPlaceholder: PropTypes.string,
  /** Placeholder (LHS) of the input for the end knob */
  endPlaceholder: PropTypes.string,
  /** Placeholder (LHS) of the input for the start knob */
  inputPlaceholder: PropTypes.string
};
RangeSlider.defaultProps = {
  className: "",
  placeholder: "",
  end: 0,
  error: "",
  label: "",
  startPlaceholder: "",
  endPlaceholder: "",
  inputPlaceholder: "",
  onBlur: function onBlur() {},
  onChange: function onChange() {},
  onDrag: function onDrag() {},
  onFocus: function onFocus() {},
  renderInputValue: undefined,
  translateInputValue: undefined,
  prefixClassName: "",
  single: false,
  start: 0,
  step: 0
};
RangeSlider.classNames = {
  $prefix: "Range slider wrapper class",
  "$prefix-label": "Label of the Range slider",
  "$prefix-track": "Track of the Range slider",
  "$prefix-start-input": "Start input field of the Range slider",
  "$prefix-end-input": "End input field of the Range slider",
  "$prefix-start-knob": "Start draggable knob of the Range slider",
  "$prefix-end-knob": "End draggable knob of the Range slider"
};
RangeSlider.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RangeSlider",
  "props": {
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to appended to the outermost element"
    },
    "placeholder": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Placeholder text for value indicated below the slider widget"
    },
    "end": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Value of the slider input in case of single. In case of multiple, it's the end value"
    },
    "error": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "If the input slider has an error, pass on the message."
    },
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Label text"
    },
    "startPlaceholder": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Placeholder (LHS) of the input for the start knob"
    },
    "endPlaceholder": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Placeholder (LHS) of the input for the end knob"
    },
    "inputPlaceholder": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Placeholder (LHS) of the input for the start knob"
    },
    "onBlur": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Method fired onBlur event"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Method fired on changing range value"
    },
    "onDrag": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Method fired on dragging the knob event"
    },
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Method fired on focusing on the slider"
    },
    "renderInputValue": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Method to format range value, range value is passed as a parameter.\nMethod should return user defined representation for supplied parameter value.\nReturned value is displayed in the input box.\nMandatory prop if translateInputValue prop is passed.\n@author Swapnil Misal <swapnil.misal@gmail.com>"
    },
    "translateInputValue": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Method to translate value in the input box.\nInput value from input box and range value is passed as a parameter in respective order.\nIt should return previous valid range value for invalid input box value or converted range value from input value.\nMandatory prop if renderInputValue prop is passed.\n@author Swapnil Misal <swapnil.misal@gmail.com>"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The prefix classname prepended to all elements"
    },
    "single": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Defines the type of slider. Whether it will have a range or a single knob"
    },
    "start": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Value of the slider input in case of single. In case of multiple, it's the end value"
    },
    "step": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "The difference with which the value will be increased or decreased"
    },
    "value": {
      "type": {
        "name": "union",
        "value": [{
          "name": "number"
        }, {
          "name": "arrayOf",
          "value": {
            "name": "number"
          }
        }]
      },
      "required": false,
      "description": "Array of two numbers in case of multiple type slider. Only a number in case of single type slider."
    },
    "testId": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "For testing purpose"
    }
  }
};

export default RangeSlider;
