@elliemae/ds-slider 1.60.0 → 2.0.0-alpha.12

package/esm/components/SliderImp.js

@@ -1,5 +1,6 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useRef, useState, useMemo, useEffect } from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState, useMemo, useEffect } from 'react';
 import { v4 } from 'uuid';
 import { Range } from 'react-range';
 import { usePrevious } from '@elliemae/ds-utilities';
@@ -7,35 +8,21 @@ import DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-trunca
 import { Grid } from '@elliemae/ds-grid';
 import Track from './Track.js';
 import Thumb from './Thumb.js';
-import { LabelText, ValueText, LabelWrapper, StyledRangeWrapper } from './styled.js';
+import { LabelWrapper, StyledRangeWrapper, LabelText, ValueText } from './styled.js';
 import { conformedLabel } from './utils.js';
 import { SliderContext } from './context.js';
-import '@babel/runtime/helpers/esm/extends';
-import 'styled-components';
-import '@elliemae/ds-system';
-import './TickMarks.js';
-import './TickMarksValues.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'prop-types';
-import '@elliemae/ds-tooltip';
-
-var getSubArrayFromRange = function getSubArrayFromRange(arr, _ref) {
-  var _ref2 = _slicedToArray(_ref, 2),
-      minVal = _ref2[0],
-      maxVal = _ref2[1];
-
-  var isCustomTickMarksValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;
-  var minIndex = arr.findIndex(function (el) {
-    return el === trueMinVal;
-  });
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+const getSubArrayFromRange = function (arr, _ref) {
+  let [minVal, maxVal] = _ref;
+  let isCustomTickMarksValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;
+  const minIndex = arr.findIndex(el => el === trueMinVal);
 
   if (maxVal !== undefined) {
     // if two handlers, return the found slice
-    var trueMaxVal = isCustomTickMarksValues ? arr[maxVal] : maxVal;
-    var maxIndex = arr.findIndex(function (el) {
-      return el === trueMaxVal;
-    });
+    const trueMaxVal = isCustomTickMarksValues ? arr[maxVal] : maxVal;
+    const maxIndex = arr.findIndex(el => el === trueMaxVal);
     if (minIndex >= 0 && maxIndex > minIndex) return arr.slice(minIndex, maxIndex + 1);
     return [];
   } // if only one handler, return the value in an array
@@ -44,179 +31,162 @@ var getSubArrayFromRange = function getSubArrayFromRange(arr, _ref) {
   return [trueMinVal];
 };
 
-var SliderImp = function SliderImp(props) {
+const SliderImp = props => {
   var _ref$current3;
 
-  var containerProps = props.containerProps,
-      disabled = props.disabled,
-      label = props.label,
-      labelWithValue = props.labelWithValue,
-      minValue = props.minValue,
-      maxValue = props.maxValue,
-      step = props.step,
-      _onChange = props.onChange,
-      withTickMarks = props.withTickMarks,
-      withTickMarksValues = props.withTickMarksValues,
-      withTwoHandles = props.withTwoHandles,
-      customTickMarksValues = props.customTickMarksValues,
-      zIndex = props.zIndex;
-  var ref = useRef();
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      width = _useState2[0],
-      setWidth = _useState2[1];
-
-  var sliderUUID = useMemo(function () {
-    return v4();
-  }, []);
-  var parsedMinValue = useMemo(function () {
+  const {
+    containerProps,
+    disabled,
+    label,
+    labelWithValue,
+    minValue,
+    maxValue,
+    step,
+    onChange,
+    withTickMarks,
+    withTickMarksValues,
+    withTwoHandles,
+    customTickMarksValues,
+    zIndex
+  } = props;
+  const ref = useRef();
+  const [width, setWidth] = useState(0);
+  const sliderUUID = useMemo(() => v4(), []);
+  const parsedMinValue = useMemo(() => {
     // ensure this works correctly with customTickMarksValues array
     if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return 0;
     return minValue;
   }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, minValue]);
-  var parsedMaxValue = useMemo(function () {
+  const parsedMaxValue = useMemo(() => {
     // ensure this works correctly with customTickMarksValues array
     if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return (customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length) - 1;
     return maxValue;
   }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, maxValue]);
-  var parsedStep = useMemo(function () {
+  const parsedStep = useMemo(() => {
     // ensure this works correctly with customTickMarksValues array
     if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return 1;
     return step;
   }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, step]);
-  var parsedValuesArray = useMemo(function () {
+  const parsedValuesArray = useMemo(() => {
     // ensure this works correctly with customTickMarksValues array
     if (customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length) return customTickMarksValues;
-    var newLength = Math.ceil(maxValue / step);
-    var valuesArray = [];
+    const newLength = Math.ceil(maxValue / step);
+    const valuesArray = [];
 
-    for (var i = 0; i <= newLength; i += 1) {
+    for (let i = 0; i <= newLength; i += 1) {
       valuesArray.push(step * i);
     }
 
     return valuesArray;
   }, [customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length, minValue, maxValue, step]);
-
-  var _useState3 = useState(withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      rangeValues = _useState4[0],
-      setRangeValues = _useState4[1]; // track the full slice of values selected instead of only the limits
+  const [rangeValues, setRangeValues] = useState(withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue]); // track the full slice of values selected instead of only the limits
   // this is important to handle the selected range labels colors
 
-
-  var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      fullSelectedValues = _useState6[0],
-      setFullSelectedValues = _useState6[1];
-
-  useEffect(function () {
-    var selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!(customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length));
+  const [fullSelectedValues, setFullSelectedValues] = useState([]);
+  useEffect(() => {
+    const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!(customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length));
     setFullSelectedValues(selectedRangeValues);
   }, [parsedValuesArray, rangeValues, customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length]);
-  var prevWithTwoHandles = usePrevious(withTwoHandles);
+  const prevWithTwoHandles = usePrevious(withTwoHandles);
 
-  var resizeHandler = function resizeHandler() {
+  const resizeHandler = () => {
     var _ref$current;
 
     setWidth(0);
     setWidth((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth);
   };
 
-  useEffect(function () {
+  useEffect(() => {
     window.addEventListener('resize', resizeHandler);
-    return function () {
-      return window.removeEventListener('resize', resizeHandler);
-    };
+    return () => window.removeEventListener('resize', resizeHandler);
   });
-  useEffect(function () {
+  useEffect(() => {
     if (!prevWithTwoHandles && withTwoHandles) {
       setRangeValues([parsedMinValue, parsedMaxValue]);
     } else if (prevWithTwoHandles && !withTwoHandles) {
       setRangeValues([parsedMinValue]);
     }
   }, [withTwoHandles]);
-  useEffect(function () {
+  useEffect(() => {
     var _ref$current2;
 
     setWidth((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.clientWidth);
   }, [(_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.clientWidth]);
+  const [finalLabelText, finalValueText] = useMemo(() => conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep), [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep]);
 
-  var _useMemo = useMemo(function () {
-    return conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep);
-  }, [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep]),
-      _useMemo2 = _slicedToArray(_useMemo, 2),
-      finalLabelText = _useMemo2[0],
-      finalValueText = _useMemo2[1];
-
-  var SliderLabel = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelText, null, finalLabelText), finalLabelText && ' ', /*#__PURE__*/React.createElement(ValueText, {
-    disabled: disabled
-  }, finalValueText));
-  return /*#__PURE__*/React.createElement(TooltipTextProvider, null, /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, /*#__PURE__*/React.createElement(Grid, {
-    width: "100%",
-    style: {
-      maxWidth: '100%'
-    },
-    containerProps: containerProps,
-    "data-testid": "slider",
-    rows: ['auto', 'auto']
-  }, /*#__PURE__*/React.createElement(SliderContext.Provider, {
-    value: {
-      disabled: disabled,
-      sliderUUID: sliderUUID,
-      label: label,
-      labelWithValue: labelWithValue,
-      minValue: parsedMinValue,
-      maxValue: parsedMaxValue,
+  const SliderLabel = /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(LabelText, {}, void 0, finalLabelText), finalLabelText && ' ', /*#__PURE__*/_jsx(ValueText, {
+      disabled: disabled
+    }, void 0, finalValueText)]
+  });
+
+  return /*#__PURE__*/_jsx(TooltipTextProvider, {}, void 0, /*#__PURE__*/jsx("div", {
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Grid, {
+      width: "100%",
+      style: {
+        maxWidth: '100%'
+      },
+      containerProps: containerProps,
+      "data-testid": "slider",
+      rows: ['auto', 'auto']
+    }, void 0, /*#__PURE__*/_jsx(SliderContext.Provider, {
+      value: {
+        disabled,
+        sliderUUID,
+        label,
+        labelWithValue,
+        minValue: parsedMinValue,
+        maxValue: parsedMaxValue,
+        step: parsedStep,
+        parsedValuesArray,
+        withTickMarks,
+        withTickMarksValues,
+        withTwoHandles,
+        customTickMarksValues,
+        rangeValues,
+        fullSelectedValues,
+        zIndex
+      }
+    }, void 0, finalLabelText && /*#__PURE__*/_jsx(LabelWrapper, {
+      width: width
+    }, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+      value: SliderLabel
+    })), /*#__PURE__*/_jsx(StyledRangeWrapper, {}, void 0, /*#__PURE__*/_jsx(Range, {
       step: parsedStep,
-      parsedValuesArray: parsedValuesArray,
-      withTickMarks: withTickMarks,
-      withTickMarksValues: withTickMarksValues,
-      withTwoHandles: withTwoHandles,
-      customTickMarksValues: customTickMarksValues,
-      rangeValues: rangeValues,
-      fullSelectedValues: fullSelectedValues,
-      zIndex: zIndex
-    }
-  }, finalLabelText && /*#__PURE__*/React.createElement(LabelWrapper, {
-    width: width
-  }, /*#__PURE__*/React.createElement(DSTruncatedTooltipText, {
-    value: SliderLabel
-  })), /*#__PURE__*/React.createElement(StyledRangeWrapper, null, /*#__PURE__*/React.createElement(Range, {
-    step: parsedStep,
-    min: parsedMinValue,
-    max: parsedMaxValue,
-    values: rangeValues,
-    disabled: disabled,
-    onChange: function onChange(values) {
-      if (withTwoHandles && values[0] === values[1]) return;
-      setRangeValues(values);
-
-      _onChange(values);
-    },
-    renderTrack: function renderTrack(_ref3) {
-      var trackProps = _ref3.props,
-          children = _ref3.children;
-      return /*#__PURE__*/React.createElement(Track, {
-        props: trackProps
-      }, children);
-    },
-    renderThumb: function renderThumb(renderArgs) {
-      var index = renderArgs.index,
-          thumbProps = renderArgs.props,
-          isDragged = renderArgs.isDragged;
-      return /*#__PURE__*/React.createElement(Thumb, {
-        key: "".concat(sliderUUID, "-").concat(thumbProps.key),
-        props: thumbProps,
-        isDragged: isDragged,
-        index: index
-      });
-    },
-    allowOverlap: false
-  }))))));
+      min: parsedMinValue,
+      max: parsedMaxValue,
+      values: rangeValues,
+      disabled: disabled,
+      onChange: values => {
+        if (withTwoHandles && values[0] === values[1]) return;
+        setRangeValues(values);
+        onChange(values);
+      },
+      renderTrack: _ref2 => {
+        let {
+          props: trackProps,
+          children
+        } = _ref2;
+        return /*#__PURE__*/_jsx(Track, {
+          props: trackProps
+        }, void 0, children);
+      },
+      renderThumb: renderArgs => {
+        const {
+          index,
+          props: thumbProps,
+          isDragged
+        } = renderArgs;
+        return /*#__PURE__*/_jsx(Thumb, {
+          props: thumbProps,
+          isDragged: isDragged,
+          index: index
+        }, "".concat(sliderUUID, "-").concat(thumbProps.key));
+      },
+      allowOverlap: false
+    }))))
+  }));
 }; // SliderImp.propTypes = sliderPropTypes;
 
 export { SliderImp as default };
-//# sourceMappingURL=SliderImp.js.map

package/esm/components/Thumb.js

@@ -1,39 +1,41 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
+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 _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useContext } from 'react';
-import PropTypes from 'prop-types';
+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 '@elliemae/ds-utilities';
-import 'styled-components';
-import '@elliemae/ds-system';
+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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var Thumb = function Thumb(_ref) {
-  var index = _ref.index,
-      props = _ref.props,
-      isDragged = _ref.isDragged;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
-
-  var _useContext = useContext(SliderContext),
-      disabled = _useContext.disabled,
-      rangeValues = _useContext.rangeValues,
-      zIndex = _useContext.zIndex,
-      customTickMarksValues = _useContext.customTickMarksValues,
-      step = _useContext.step,
-      minValue = _useContext.minValue;
+const Thumb = _ref => {
+  let {
+    index,
+    props,
+    isDragged
+  } = _ref;
+  const [isHovered, setIsHovered] = useState(false);
+  const {
+    disabled,
+    rangeValues,
+    zIndex,
+    customTickMarksValues,
+    step,
+    minValue
+  } = useContext(SliderContext);
 
-  var cleanedProps = _objectSpread({}, props); // delete cleanedProps.key;
+  const cleanedProps = _objectSpread({}, props); // delete cleanedProps.key;
   // delete cleanedProps.draggable;
 
 
@@ -41,34 +43,22 @@ var Thumb = function Thumb(_ref) {
     /*#__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
-    React.createElement(ThumbStyled, _extends({}, cleanedProps, {
+    jsx(ThumbStyled, _objectSpread(_objectSpread({}, cleanedProps), {}, {
       "data-testid": "slider-thumb",
       disabled: disabled // eslint-disable-next-line react/prop-types
       ,
       style: _objectSpread(_objectSpread({}, cleanedProps.style), {}, {
-        zIndex: zIndex
+        zIndex
       }),
       index: index,
-      onMouseEnter: function onMouseEnter() {
-        return setIsHovered(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setIsHovered(false);
-      }
-    }), /*#__PURE__*/React.createElement(TooltipContainerStyled, {
-      isDragged: isDragged,
-      isHovered: isHovered
-    }, /*#__PURE__*/React.createElement(TooltipText, null, conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)), /*#__PURE__*/React.createElement(TooltipArrow, null)))
+      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, {})))
+    }))
   );
 };
 
-Thumb.propTypes = {
-  index: PropTypes.number,
-  props: PropTypes.shape({
-    style: PropTypes.shape({}).isRequired
-  }).isRequired,
-  isDragged: PropTypes.bool
-};
-
 export { Thumb as default };
-//# sourceMappingURL=Thumb.js.map

package/esm/components/TickMarks.js

@@ -1,50 +1,39 @@
-import React, { useContext } from 'react';
+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';
 
-/* eslint-disable indent */
+const TickMarks = () => {
+  const {
+    minValue,
+    maxValue,
+    rangeValues,
+    step,
+    withTwoHandles,
+    zIndex
+  } = useContext(SliderContext);
+  const dots = [];
 
-var TickMarks = function TickMarks() {
-  var _useContext = useContext(SliderContext),
-      minValue = _useContext.minValue,
-      maxValue = _useContext.maxValue,
-      rangeValues = _useContext.rangeValues,
-      step = _useContext.step,
-      withTwoHandles = _useContext.withTwoHandles,
-      zIndex = _useContext.zIndex;
-
-  var dots = [];
-
-  for (var index = minValue || 0; index <= maxValue; index += step) {
-    var isActive = withTwoHandles ? rangeValues[0] <= index && index < rangeValues[1] : rangeValues[0] > index;
-    dots.push( /*#__PURE__*/React.createElement(Dot, {
+  for (let index = minValue || 0; index <= maxValue; index += step) {
+    const isActive = withTwoHandles ? rangeValues[0] <= index && index < rangeValues[1] : rangeValues[0] > index;
+    dots.push( /*#__PURE__*/_jsx(Dot, {
       "data-testid": "slider-dot",
-      isActive: isActive,
-      key: index
-    }));
+      isActive: isActive
+    }, index));
   }
 
-  return /*#__PURE__*/React.createElement(DotsContainer, {
+  return /*#__PURE__*/_jsx(DotsContainer, {
     "data-testid": "slider-tick-marks",
     zIndex: zIndex
-  }, dots);
+  }, void 0, dots);
 };
 
-var Dot = /*#__PURE__*/styled.div.withConfig({
+const Dot = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-15z2sh4-0"
-})(["&:after{content:'';background:", ";border-radius:", ";display:block;position:relative;width:2px;height:2px;}"], function (props) {
-  return props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400];
-}, function (props) {
-  return __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs);
-});
-var DotsContainer = /*#__PURE__*/styled.div.withConfig({
+})(["&: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:", ";"], function (props) {
-  return __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs);
-}, function (props) {
-  return props.zIndex - 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 };
-//# sourceMappingURL=TickMarks.js.map

package/esm/components/TickMarksValues.js

@@ -1,47 +1,36 @@
-import React, { useContext, useMemo } from 'react';
+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';
 
-/* eslint-disable no-plusplus */
+const TickMarks = () => {
+  var _TickMarksContainer;
 
-var TickMarks = function TickMarks() {
-  var _useContext = useContext(SliderContext),
-      parsedValuesArray = _useContext.parsedValuesArray,
-      fullSelectedValues = _useContext.fullSelectedValues,
-      sliderUUID = _useContext.sliderUUID;
-
-  var TickMarksLabels = useMemo(function () {
-    return parsedValuesArray.map(function (value) {
-      var isSelected = fullSelectedValues.findIndex(function (selectedVal) {
-        return selectedVal === value;
-      }) >= 0;
-      return /*#__PURE__*/React.createElement(TickMarkValue, {
-        key: "".concat(sliderUUID, "-").concat(value),
-        isSelected: isSelected
-      }, value);
-    });
-  }, [parsedValuesArray, sliderUUID, fullSelectedValues]);
-  var PureTickMArksValues = useMemo(function () {
-    return /*#__PURE__*/React.createElement(TickMarksContainer, {
-      "data-testid": "slider-tick-marks-values"
-    }, TickMarksLabels);
-  }, [TickMarksLabels]);
+  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(() => _TickMarksContainer || (_TickMarksContainer = /*#__PURE__*/_jsx(TickMarksContainer, {
+    "data-testid": "slider-tick-marks-values"
+  }, void 0, TickMarksLabels)), [TickMarksLabels]);
   return PureTickMArksValues;
 };
 
-var TickMarkValue = /*#__PURE__*/styled.div.withConfig({
+const TickMarkValue = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-lq3yel-0"
-})(["margin:", " 0;overflow:visible;transform:translateX(-100%);width:", ";color:", ";"], function (props) {
-  return __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s);
-}, function (props) {
-  return __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs);
-}, function (props) {
-  return props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500];
-});
-var TickMarksContainer = /*#__PURE__*/styled.div.withConfig({
+})(["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 };
-//# sourceMappingURL=TickMarksValues.js.map