@elliemae/ds-slider 2.2.0-alpha.2 → 2.2.0-beta.0

package/esm/components/Thumb.js

@@ -1,11 +1,30 @@
-import * as React from "react";
-import React2, { useContext, useState } from "react";
-import PropTypes from "prop-types";
-import { TooltipText } from "@elliemae/ds-tooltip";
-import { SliderContext } from "./context";
-import { conformedThumbLabel } from "./utils";
-import { ThumbStyled, TooltipContainerStyled, TooltipArrow } from "./styled";
-const Thumb = ({ index, props, isDragged }) => {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useContext } from 'react';
+import { TooltipText } from '@elliemae/ds-tooltip';
+import { SliderContext } from './context.js';
+import { conformedThumbLabel } from './utils.js';
+import { ThumbStyled, TooltipContainerStyled, TooltipArrow } from './styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _TooltipArrow;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const Thumb = _ref => {
+  let {
+    index,
+    props,
+    isDragged
+  } = _ref;
   const [isHovered, setIsHovered] = useState(false);
   const {
     disabled,
@@ -15,29 +34,31 @@ const Thumb = ({ index, props, isDragged }) => {
     step,
     minValue
   } = useContext(SliderContext);
-  const cleanedProps = { ...props };
-  return /* @__PURE__ */ React2.createElement(ThumbStyled, {
-    ...cleanedProps,
-    "data-testid": "slider-thumb",
-    disabled,
-    style: { ...cleanedProps.style, zIndex },
-    index,
-    onMouseEnter: () => setIsHovered(true),
-    onMouseLeave: () => setIsHovered(false)
-  }, /* @__PURE__ */ React2.createElement(TooltipContainerStyled, {
-    isDragged,
-    isHovered
-  }, /* @__PURE__ */ React2.createElement(TooltipText, null, conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)), /* @__PURE__ */ React2.createElement(TooltipArrow, null)));
-};
-Thumb.propTypes = {
-  index: PropTypes.number,
-  props: PropTypes.shape({
-    style: PropTypes.shape({}).isRequired
-  }).isRequired,
-  isDragged: PropTypes.bool
-};
-var Thumb_default = Thumb;
-export {
-  Thumb_default as default
+
+  const cleanedProps = _objectSpread({}, props); // delete cleanedProps.key;
+  // delete cleanedProps.draggable;
+
+
+  return (
+    /*#__PURE__*/
+    // ...props is needed because it's received from the library
+    // ...props.style has it own style from the library but has a bug with the zIndex for two thumbs, so that's why it has to be overwrite
+    jsx(ThumbStyled, _objectSpread(_objectSpread({}, cleanedProps), {}, {
+      "data-testid": "slider-thumb",
+      disabled: disabled // eslint-disable-next-line react/prop-types
+      ,
+      style: _objectSpread(_objectSpread({}, cleanedProps.style), {}, {
+        zIndex
+      }),
+      index: index,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: /*#__PURE__*/_jsx(TooltipContainerStyled, {
+        isDragged: isDragged,
+        isHovered: isHovered
+      }, void 0, /*#__PURE__*/_jsx(TooltipText, {}, void 0, conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)), _TooltipArrow || (_TooltipArrow = /*#__PURE__*/_jsx(TooltipArrow, {})))
+    }))
+  );
 };
-//# sourceMappingURL=Thumb.js.map
+
+export { Thumb as default };

package/esm/components/TickMarks.js

@@ -1,8 +1,9 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import styled from "styled-components";
-import { __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-import { SliderContext } from "./context";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import styled from 'styled-components';
+import { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import { SliderContext } from './context.js';
+
 const TickMarks = () => {
   const {
     minValue,
@@ -13,46 +14,26 @@ const TickMarks = () => {
     zIndex
   } = useContext(SliderContext);
   const dots = [];
+
   for (let index = minValue || 0; index <= maxValue; index += step) {
     const isActive = withTwoHandles ? rangeValues[0] <= index && index < rangeValues[1] : rangeValues[0] > index;
-    dots.push(/* @__PURE__ */ React2.createElement(Dot, {
+    dots.push( /*#__PURE__*/_jsx(Dot, {
       "data-testid": "slider-dot",
-      isActive,
-      key: index
-    }));
+      isActive: isActive
+    }, index));
   }
-  return /* @__PURE__ */ React2.createElement(DotsContainer, {
+
+  return /*#__PURE__*/_jsx(DotsContainer, {
     "data-testid": "slider-tick-marks",
-    zIndex
-  }, dots);
-};
-const Dot = styled.div`
-  &:after {
-    content: '';
-    background: ${(props) => props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400]};
-    border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};
-    display: block;
-    position: relative;
-    width: 2px;
-    height: 2px;
-  }
-`;
-const DotsContainer = styled.div`
-  padding: 0
-    calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 0.5);
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: ${(props) => props.zIndex - 1};
-`;
-var TickMarks_default = TickMarks;
-export {
-  TickMarks_default as default
+    zIndex: zIndex
+  }, void 0, dots);
 };
-//# sourceMappingURL=TickMarks.js.map
+
+const Dot = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-15z2sh4-0"
+})(["&:after{content:'';background:", ";border-radius:", ";display:block;position:relative;width:2px;height:2px;}"], props => props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs));
+const DotsContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-15z2sh4-1"
+})(["padding:0 calc(", " * 0.5);align-items:center;display:flex;justify-content:space-between;pointer-events:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:", ";"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.zIndex - 1);
+
+export { TickMarks as default };

package/esm/components/TickMarksValues.js

@@ -1,35 +1,36 @@
-import * as React from "react";
-import React2, { useContext, useMemo } from "react";
-import styled from "styled-components";
-import { __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-import { SliderContext } from "./context";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { useContext, useMemo } from 'react';
+import styled from 'styled-components';
+import { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import { SliderContext } from './context.js';
+
 const TickMarks = () => {
-  const { parsedValuesArray, fullSelectedValues, sliderUUID } = useContext(SliderContext);
-  const TickMarksLabels = useMemo(() => parsedValuesArray.map((value) => {
-    const isSelected = fullSelectedValues.findIndex((selectedVal) => selectedVal === value) >= 0;
-    return /* @__PURE__ */ React2.createElement(TickMarkValue, {
-      key: `${sliderUUID}-${value}`,
-      isSelected
-    }, value);
+  var _TickMarksContainer;
+
+  const {
+    parsedValuesArray,
+    fullSelectedValues,
+    sliderUUID
+  } = useContext(SliderContext);
+  const TickMarksLabels = useMemo(() => parsedValuesArray.map(value => {
+    const isSelected = fullSelectedValues.findIndex(selectedVal => selectedVal === value) >= 0;
+    return /*#__PURE__*/_jsx(TickMarkValue, {
+      isSelected: isSelected
+    }, "".concat(sliderUUID, "-").concat(value), value);
   }), [parsedValuesArray, sliderUUID, fullSelectedValues]);
-  const PureTickMArksValues = useMemo(() => /* @__PURE__ */ React2.createElement(TickMarksContainer, {
+  const PureTickMArksValues = useMemo(() => _TickMarksContainer || (_TickMarksContainer = /*#__PURE__*/_jsx(TickMarksContainer, {
     "data-testid": "slider-tick-marks-values"
-  }, TickMarksLabels), [TickMarksLabels]);
+  }, void 0, TickMarksLabels)), [TickMarksLabels]);
   return PureTickMArksValues;
 };
-const TickMarkValue = styled.div`
-  margin: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)} 0;
-  overflow: visible;
-  transform: translateX(-100%);
-  width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};
-  color: ${(props) => props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500]};
-`;
-const TickMarksContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-var TickMarksValues_default = TickMarks;
-export {
-  TickMarksValues_default as default
-};
-//# sourceMappingURL=TickMarksValues.js.map
+
+const TickMarkValue = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-lq3yel-0"
+})(["margin:", " 0;overflow:visible;transform:translateX(-100%);width:", ";color:", ";"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500]);
+const TickMarksContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-lq3yel-1"
+})(["display:flex;justify-content:space-between;"]);
+
+export { TickMarks as default };

package/esm/components/Track.js

@@ -1,12 +1,30 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import { getTrackBackground } from "react-range";
-import styled from "styled-components";
-import { __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-import TickMarks from "./TickMarks";
-import TickMarksValues from "./TickMarksValues";
-import { SliderContext } from "./context";
-const Track = ({ children, props }) => {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { getTrackBackground } from 'react-range';
+import styled from 'styled-components';
+import { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import TickMarks$1 from './TickMarks.js';
+import TickMarks from './TickMarksValues.js';
+import { SliderContext } from './context.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+var _TickMarks, _TickMarksValues;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const Track = _ref => {
+  let {
+    children,
+    props
+  } = _ref;
   const {
     disabled,
     minValue,
@@ -16,34 +34,26 @@ const Track = ({ children, props }) => {
     withTickMarksValues,
     withTwoHandles
   } = useContext(SliderContext);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(TrackStyled, {
-    ...props,
-    disabled,
-    minValue,
-    maxValue,
-    rangeValues,
-    withTwoHandles
-  }, children, withTickMarks && !disabled && /* @__PURE__ */ React2.createElement(TickMarks, null)), withTickMarksValues && /* @__PURE__ */ React2.createElement(TickMarksValues, null));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(TrackStyled, _objectSpread(_objectSpread({}, props), {}, {
+      // This is needed because it's received from the library
+      disabled: disabled,
+      minValue: minValue,
+      maxValue: maxValue,
+      rangeValues: rangeValues,
+      withTwoHandles: withTwoHandles,
+      children: [children, withTickMarks && !disabled && (_TickMarks || (_TickMarks = /*#__PURE__*/_jsx(TickMarks$1, {})))]
+    })), withTickMarksValues && (_TickMarksValues || (_TickMarksValues = /*#__PURE__*/_jsx(TickMarks, {})))]
+  });
 };
-const TrackStyled = styled.div`
-  position: relative;
-  height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};
-  width: 100%;
-  min-width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxl)};
-  border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};
-  background: ${(props) => props.disabled ? props.theme.colors.neutral[100] : getTrackBackground({
+
+const TrackStyled = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-13fbuj5-0"
+})(["position:relative;height:", ";width:100%;min-width:", ";border-radius:", ";background:", ";"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxl), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.disabled ? props.theme.colors.neutral[100] : getTrackBackground({
   values: props.rangeValues,
-  colors: props.withTwoHandles ? [
-    props.theme.colors.neutral[100],
-    props.theme.colors.brand[600],
-    props.theme.colors.neutral[100]
-  ] : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],
+  colors: props.withTwoHandles ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]] : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],
   min: props.minValue,
   max: props.maxValue
-})};
-`;
-var Track_default = Track;
-export {
-  Track_default as default
-};
-//# sourceMappingURL=Track.js.map
+}));
+
+export { Track as default };

package/esm/components/context.js

@@ -1,7 +1,5 @@
-import * as React from "react";
-import React2 from "react";
-const SliderContext = React2.createContext();
-export {
-  SliderContext
-};
-//# sourceMappingURL=context.js.map
+import React from 'react';
+
+const SliderContext = /*#__PURE__*/React.createContext();
+
+export { SliderContext };

package/esm/components/styled.js

@@ -1,67 +1,47 @@
-import * as React from "react";
-import styled from "styled-components";
-import { __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-import { TooltipContainer } from "@elliemae/ds-tooltip";
-const ThumbStyled = styled.div`
-  height: 20px;
-  width: 20px;
-  background-color: ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral["000"]};
-  border-radius: 10px;
-  border: 1px solid ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};
+import styled from 'styled-components';
+import { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import { TooltipContainer } from '@elliemae/ds-tooltip';
 
-  :focus {
-    border: 1px solid ${(props) => props.theme.colors.brand[600]};
-    outline: unset;
-  }
+/* eslint-disable indent */
+const ThumbStyled = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-24in0j-0"
+})(["height:20px;width:20px;background-color:", ";border-radius:10px;border:1px solid ", ";:focus{border:1px solid ", ";outline:unset;}:hover{background-color:", ";}"], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000'], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400], props => props.theme.colors.brand[600], _ref => {
+  let {
+    disabled,
+    theme
+  } = _ref;
+  return disabled ? theme.colors.neutral[100] : theme.colors.brand[200];
+});
+const TooltipContainerStyled = /*#__PURE__*/styled(TooltipContainer).withConfig({
+  componentId: "sc-24in0j-1"
+})(["position:relative;display:flex;align-items:center;flex-direction:column;top:-35px;width:max-content;left:50%;transform:translateX(-50%);visibility:", ";"], _ref2 => {
+  let {
+    isDragged,
+    isHovered
+  } = _ref2;
+  return isDragged || isHovered ? 'visible' : 'hidden';
+}); // TODO: didn't work with DSTooltip, see how to improve
 
-  :hover {
-    background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[100] : theme.colors.brand[200]};
-  }
-`;
-const TooltipContainerStyled = styled(TooltipContainer)`
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  top: -35px;
-  width: max-content;
-  left: 50%;
-  transform: translateX(-50%);
-  visibility: ${({ isDragged, isHovered }) => isDragged || isHovered ? "visible" : "hidden"};
-`;
-const TooltipArrow = styled.div`
-  position: absolute;
-  width: 0;
-  height: 0;
-  top: 20px;
-  border-left: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;
-  border-right: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;
+const TooltipArrow = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-24in0j-2"
+})(["position:absolute;width:0;height:0;top:20px;border-left:calc(", " * 2.5) solid transparent;border-right:calc(", " * 2.5) solid transparent;border-top:calc(", " * 2.5) solid ", ";"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.theme.colors.neutral[0]);
+const LabelWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-24in0j-3"
+})(["margin-bottom:", ";max-width:100%;width:", ";"], props => props.theme.space.xxs, props => "".concat(props.width || 0, "px"));
+const LabelText = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-24in0j-4"
+})(["color:", ";"], props => props.theme.colors.neutral[600]);
+const ValueText = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-24in0j-5"
+})(["color:", ";"], _ref3 => {
+  let {
+    disabled,
+    theme
+  } = _ref3;
+  return theme.colors.neutral[disabled ? 500 : 800];
+});
+const StyledRangeWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-24in0j-6"
+})(["min-height:28px;margin:0 10px;"]);
 
-  border-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid
-    ${(props) => props.theme.colors.neutral[0]};
-`;
-const LabelWrapper = styled.div`
-  margin-bottom: ${(props) => props.theme.space.xxs};
-  max-width: 100%;
-  width: ${(props) => `${props.width || 0}px`};
-`;
-const LabelText = styled.span`
-  color: ${(props) => props.theme.colors.neutral[600]};
-`;
-const ValueText = styled.span`
-  color: ${({ disabled, theme }) => theme.colors.neutral[disabled ? 500 : 800]};
-`;
-const StyledRangeWrapper = styled.div`
-  min-height: 28px;
-  margin: 0 10px;
-`;
-export {
-  LabelText,
-  LabelWrapper,
-  StyledRangeWrapper,
-  ThumbStyled,
-  TooltipArrow,
-  TooltipContainerStyled,
-  ValueText
-};
-//# sourceMappingURL=styled.js.map
+export { LabelText, LabelWrapper, StyledRangeWrapper, ThumbStyled, TooltipArrow, TooltipContainerStyled, ValueText };

package/esm/components/utils.js

@@ -1,30 +1,44 @@
-import * as React from "react";
-import { isEmpty } from "@elliemae/ds-utilities";
-const conformedLabel = (rangeValues, label = "", labelWithValue = false, withTwoHandles = false, customTickMarksValues = [], step = 1, minValue = 0) => {
+import { isEmpty } from '@elliemae/ds-utilities';
+
+/* eslint-disable max-params */
+const conformedLabel = function (rangeValues) {
+  let label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let labelWithValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  let withTwoHandles = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  let customTickMarksValues = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+  let step = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
+  let minValue = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
   const msg = label.trim();
-  let value = "";
+  let value = '';
+
   if (!isEmpty(customTickMarksValues) && labelWithValue && label) {
     const firstValue = customTickMarksValues[(rangeValues[0] - minValue) / step];
     const secondValue = customTickMarksValues[(rangeValues[1] - minValue) / step];
-    value = `${firstValue || rangeValues[0].toFixed(1)} ${withTwoHandles ? `, ${secondValue || rangeValues[1].toFixed(1)}` : ""} `;
+    value = "".concat(firstValue || rangeValues[0].toFixed(1), " ").concat(withTwoHandles ? ", ".concat(secondValue || rangeValues[1].toFixed(1)) : '', " ");
   } else if (labelWithValue && label) {
-    value = `${rangeValues[0].toFixed(1)} ${withTwoHandles ? `, ${rangeValues[1]?.toFixed(1)}` : ""} `;
+    var _rangeValues$;
+
+    value = "".concat(rangeValues[0].toFixed(1), " ").concat(withTwoHandles ? ", ".concat((_rangeValues$ = rangeValues[1]) === null || _rangeValues$ === void 0 ? void 0 : _rangeValues$.toFixed(1)) : '', " ");
   }
+
   value = value.trim();
   return [msg, value];
 };
-const conformedThumbLabel = (rangeValues, customTickMarksValues = [], index = 0, step = 1, minValue = 0) => {
-  let msg = `Value: `;
+const conformedThumbLabel = function (rangeValues) {
+  let customTickMarksValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  let minValue = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  let msg = "Value: ";
+
   if (!isEmpty(customTickMarksValues)) {
     const foundValue = customTickMarksValues[(rangeValues[index] - minValue) / step];
-    msg += `${foundValue || rangeValues[index].toFixed(1)}`;
+    msg += "".concat(foundValue || rangeValues[index].toFixed(1));
   } else {
-    msg += `${rangeValues[index].toFixed(1)}`;
+    msg += "".concat(rangeValues[index].toFixed(1));
   }
+
   return msg;
 };
-export {
-  conformedLabel,
-  conformedThumbLabel
-};
-//# sourceMappingURL=utils.js.map
+
+export { conformedLabel, conformedThumbLabel };

package/esm/index.js

@@ -1,7 +1 @@
-import * as React from "react";
-import { default as default2 } from "./DSSlider";
-export * from "./DSSlider";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export { DSSlider, DSSliderWithSchema, DSSlider as default } from './DSSlider.js';

package/esm/prop-types.js

@@ -1,15 +1,14 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from 'react-desc';
+
 const defaultProps = {
   containerProps: {},
   disabled: false,
-  label: "",
+  label: '',
   labelWithValue: false,
   minValue: 0,
   maxValue: 100,
   step: 5,
-  onChange: () => {
-  },
+  onChange: () => {},
   withTickMarks: false,
   withTickMarksValues: false,
   withTwoHandles: false,
@@ -17,22 +16,44 @@ const defaultProps = {
   zIndex: 0
 };
 const sliderPropTypes = {
-  containerProps: PropTypes.shape({}).description("props to inject to slider wrapper"),
-  disabled: PropTypes.bool.description("disable slider"),
-  label: PropTypes.string.description("label for slider"),
-  labelWithValue: PropTypes.bool.description("if the label comes with value attached for slider or not"),
-  minValue: PropTypes.number.description("min value for slider"),
-  maxValue: PropTypes.number.description("max value for slider"),
-  step: PropTypes.number.description("steps of values from min to max"),
-  onChange: PropTypes.func.description("change handler"),
-  withTickMarks: PropTypes.bool.description("add tick marks between steps"),
-  withTickMarksValues: PropTypes.bool.description("add step value to tickmark"),
-  withTwoHandles: PropTypes.bool.description("add two handles"),
-  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description("change manually tickmark values"),
-  zIndex: PropTypes.number.description("z index for thumb")
+  /** props to inject to slider wrapper */
+  containerProps: PropTypes.shape({}).description('props to inject to slider wrapper'),
+
+  /** disable slider */
+  disabled: PropTypes.bool.description('disable slider'),
+
+  /** label for slider */
+  label: PropTypes.string.description('label for slider'),
+
+  /** if the label comes with value attached for slider or not */
+  labelWithValue: PropTypes.bool.description('if the label comes with value attached for slider or not'),
+
+  /** min value for slider */
+  minValue: PropTypes.number.description('min value for slider'),
+
+  /** max value for slider */
+  maxValue: PropTypes.number.description('max value for slider'),
+
+  /** steps of values from min to max */
+  step: PropTypes.number.description('steps of values from min to max'),
+
+  /** change handler */
+  onChange: PropTypes.func.description('change handler'),
+
+  /** add tick marks between steps */
+  withTickMarks: PropTypes.bool.description('add tick marks between steps'),
+
+  /** add step value to tickmark */
+  withTickMarksValues: PropTypes.bool.description('add step value to tickmark'),
+
+  /** add two handles */
+  withTwoHandles: PropTypes.bool.description('add two handles'),
+
+  /** change manually tickmark values */
+  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description('change manually tickmark values'),
+
+  /** z index for thumb */
+  zIndex: PropTypes.number.description('z index for thumb')
 };
-export {
-  defaultProps,
-  sliderPropTypes
-};
-//# sourceMappingURL=prop-types.js.map
+
+export { defaultProps, sliderPropTypes };