@elliemae/ds-slider 3.16.0 → 3.16.1

package/dist/cjs/DSSlider.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -32,8 +36,8 @@ module.exports = __toCommonJS(DSSlider_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_SliderImp = __toESM(require("./components/SliderImp"));
-var import_prop_types = require("./prop-types");
+var import_SliderImp = __toESM(require("./components/SliderImp.js"));
+var import_prop_types = require("./prop-types.js");
 const DSSlider = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SliderImp.default, { ...props });
 DSSlider.defaultProps = import_prop_types.defaultProps;
 DSSlider.propTypes = import_prop_types.sliderPropTypes;

package/dist/cjs/DSSlider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSSlider.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport SliderImp from './components/SliderImp';\nimport { defaultProps, sliderPropTypes } from './prop-types';\n\nconst DSSlider = (props) => <SliderImp {...props} />;\n\nDSSlider.defaultProps = defaultProps;\nDSSlider.propTypes = sliderPropTypes;\nDSSlider.displayName = 'DSSlider';\nconst DSSliderWithSchema = describe(DSSlider);\nDSSliderWithSchema.propTypes = sliderPropTypes;\n\nexport { DSSlider, DSSliderWithSchema };\nexport default DSSlider;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKK;AAJ5B,8BAAyB;AACzB,uBAAsB;AACtB,wBAA8C;AAE9C,MAAM,WAAW,CAAC,UAAU,4CAAC,iBAAAA,SAAA,EAAW,GAAG,OAAO;AAElD,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAG/B,IAAO,mBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport SliderImp from './components/SliderImp.js';\nimport { defaultProps, sliderPropTypes } from './prop-types.js';\n\nconst DSSlider = (props) => <SliderImp {...props} />;\n\nDSSlider.defaultProps = defaultProps;\nDSSlider.propTypes = sliderPropTypes;\nDSSlider.displayName = 'DSSlider';\nconst DSSliderWithSchema = describe(DSSlider);\nDSSliderWithSchema.propTypes = sliderPropTypes;\n\nexport { DSSlider, DSSliderWithSchema };\nexport default DSSlider;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKK;AAJ5B,8BAAyB;AACzB,uBAAsB;AACtB,wBAA8C;AAE9C,MAAM,WAAW,CAAC,UAAU,4CAAC,iBAAAA,SAAA,EAAW,GAAG,OAAO;AAElD,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAG/B,IAAO,mBAAQ;",
   "names": ["SliderImp"]
 }

package/dist/cjs/components/SliderImp.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -36,11 +40,11 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_truncated_tooltip_text = __toESM(require("@elliemae/ds-truncated-tooltip-text"));
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
-var import_Track = __toESM(require("./Track"));
-var import_Thumb = __toESM(require("./Thumb"));
-var import_styled = require("./styled");
-var import_utils = require("./utils");
-var import_context = require("./context");
+var import_Track = __toESM(require("./Track.js"));
+var import_Thumb = __toESM(require("./Thumb.js"));
+var import_styled = require("./styled.js");
+var import_utils = require("./utils.js");
+var import_context = require("./context.js");
 const getSubArrayFromRange = (arr, [minVal, maxVal], isCustomTickMarksValues = false) => {
   const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;
   const minIndex = arr.findIndex((el) => el === trueMinVal);

package/dist/cjs/components/SliderImp.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/SliderImp.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useRef, useMemo, useContext } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { Range } from 'react-range';\nimport { usePrevious } from '@elliemae/ds-utilities';\nimport DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport Track from './Track';\nimport Thumb from './Thumb';\nimport { LabelWrapper, StyledRangeWrapper, LabelText, ValueText } from './styled';\nimport { conformedLabel } from './utils';\nimport { SliderContext } from './context';\n\nconst getSubArrayFromRange = (\n  arr,\n  [minVal, maxVal], // maxValue is undefined when only one handler\n  isCustomTickMarksValues = false,\n) => {\n  const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;\n  const minIndex = arr.findIndex((el) => el === trueMinVal);\n\n  if (maxVal !== undefined) {\n    // if two handlers, return the found slice\n    const trueMaxVal = isCustomTickMarksValues ? arr[maxVal] : maxVal;\n    const maxIndex = arr.findIndex((el) => el === trueMaxVal);\n\n    if (minIndex >= 0 && maxIndex > minIndex) return arr.slice(minIndex, maxIndex + 1);\n    return [];\n  }\n  // if only one handler, return the value in an array\n  return [trueMinVal];\n};\n\nconst SliderImp = (props) => {\n  const {\n    containerProps,\n    disabled,\n    label,\n    labelWithValue,\n    minValue,\n    maxValue,\n    step,\n    onChange,\n    withTickMarks,\n    withTickMarksValues,\n    withTwoHandles,\n    customTickMarksValues,\n    zIndex,\n  } = props;\n  const ref = useRef();\n  const [width, setWidth] = useState(0);\n  const sliderUUID = useMemo(() => uuidv4(), []);\n\n  const parsedMinValue = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return 0;\n    return minValue;\n  }, [customTickMarksValues?.length, minValue]);\n  const parsedMaxValue = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return customTickMarksValues?.length - 1;\n    return maxValue;\n  }, [customTickMarksValues?.length, maxValue]);\n  const parsedStep = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return 1;\n    return step;\n  }, [customTickMarksValues?.length, step]);\n\n  const parsedValuesArray = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return customTickMarksValues;\n    const newLength = Math.ceil(maxValue / step);\n    const valuesArray = [];\n    for (let i = 0; i <= newLength; i += 1) {\n      valuesArray.push(step * i);\n    }\n\n    return valuesArray;\n  }, [customTickMarksValues?.length, minValue, maxValue, step]);\n\n  const [rangeValues, setRangeValues] = useState(withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue]);\n  // track the full slice of values selected instead of only the limits\n  // this is important to handle the selected range labels colors\n  const [fullSelectedValues, setFullSelectedValues] = useState([]);\n  useEffect(() => {\n    const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!customTickMarksValues?.length);\n    setFullSelectedValues(selectedRangeValues);\n  }, [parsedValuesArray, rangeValues, customTickMarksValues?.length]);\n\n  const prevWithTwoHandles = usePrevious(withTwoHandles);\n  const resizeHandler = () => {\n    setWidth(0);\n    setWidth(ref.current?.clientWidth);\n  };\n  useEffect(() => {\n    window.addEventListener('resize', resizeHandler);\n    return () => window.removeEventListener('resize', resizeHandler);\n  });\n  useEffect(() => {\n    if (!prevWithTwoHandles && withTwoHandles) {\n      setRangeValues([parsedMinValue, parsedMaxValue]);\n    } else if (prevWithTwoHandles && !withTwoHandles) {\n      setRangeValues([parsedMinValue]);\n    }\n  }, [withTwoHandles]);\n\n  useEffect(() => {\n    setWidth(ref.current?.clientWidth);\n  }, [ref.current?.clientWidth]);\n\n  const [finalLabelText, finalValueText] = useMemo(\n    () => conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep),\n    [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep],\n  );\n\n  const SliderLabel = (\n    <>\n      <LabelText>{finalLabelText}</LabelText>\n      {finalLabelText && ' '}\n      <ValueText disabled={disabled}>{finalValueText}</ValueText>\n    </>\n  );\n\n  const theme = useContext(ThemeContext);\n\n  return (\n    <TooltipTextProvider>\n      <div ref={ref}>\n        <Grid\n          width=\"100%\"\n          style={{ maxWidth: '100%' }}\n          containerProps={containerProps}\n          data-testid=\"slider\"\n          alignItems=\"center\"\n          rows={['auto', 'auto']}\n        >\n          <SliderContext.Provider\n            value={{\n              disabled,\n              sliderUUID,\n              label,\n              labelWithValue,\n              minValue: parsedMinValue,\n              maxValue: parsedMaxValue,\n              step: parsedStep,\n              parsedValuesArray,\n              withTickMarks,\n              withTickMarksValues,\n              withTwoHandles,\n              customTickMarksValues,\n              rangeValues,\n              fullSelectedValues,\n              zIndex: zIndex ?? theme.zIndex.tooltip,\n            }}\n          >\n            {finalLabelText && (\n              <LabelWrapper width={width}>\n                <DSTruncatedTooltipText value={SliderLabel} />\n              </LabelWrapper>\n            )}\n            <StyledRangeWrapper>\n              <Range\n                step={parsedStep}\n                min={parsedMinValue}\n                max={parsedMaxValue}\n                values={rangeValues}\n                disabled={disabled}\n                onChange={(values) => {\n                  if (withTwoHandles && values[0] === values[1]) return;\n                  setRangeValues(values);\n                  onChange(values);\n                }}\n                renderTrack={({ props: trackProps, children }) => <Track props={trackProps}>{children}</Track>}\n                renderThumb={(renderArgs) => {\n                  const { index, props: thumbProps, isDragged } = renderArgs;\n                  return (\n                    <Thumb\n                      key={`${sliderUUID}-${thumbProps.key}`}\n                      props={thumbProps}\n                      isDragged={isDragged}\n                      index={index}\n                    />\n                  );\n                }}\n                allowOverlap={false}\n              />\n            </StyledRangeWrapper>\n          </SliderContext.Provider>\n        </Grid>\n      </div>\n    </TooltipTextProvider>\n  );\n};\n\n// SliderImp.propTypes = sliderPropTypes;\n\nexport default SliderImp;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useRef, useMemo, useContext } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { Range } from 'react-range';\nimport { usePrevious } from '@elliemae/ds-utilities';\nimport DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport Track from './Track.js';\nimport Thumb from './Thumb.js';\nimport { LabelWrapper, StyledRangeWrapper, LabelText, ValueText } from './styled.js';\nimport { conformedLabel } from './utils.js';\nimport { SliderContext } from './context.js';\n\nconst getSubArrayFromRange = (\n  arr,\n  [minVal, maxVal], // maxValue is undefined when only one handler\n  isCustomTickMarksValues = false,\n) => {\n  const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;\n  const minIndex = arr.findIndex((el) => el === trueMinVal);\n\n  if (maxVal !== undefined) {\n    // if two handlers, return the found slice\n    const trueMaxVal = isCustomTickMarksValues ? arr[maxVal] : maxVal;\n    const maxIndex = arr.findIndex((el) => el === trueMaxVal);\n\n    if (minIndex >= 0 && maxIndex > minIndex) return arr.slice(minIndex, maxIndex + 1);\n    return [];\n  }\n  // if only one handler, return the value in an array\n  return [trueMinVal];\n};\n\nconst SliderImp = (props) => {\n  const {\n    containerProps,\n    disabled,\n    label,\n    labelWithValue,\n    minValue,\n    maxValue,\n    step,\n    onChange,\n    withTickMarks,\n    withTickMarksValues,\n    withTwoHandles,\n    customTickMarksValues,\n    zIndex,\n  } = props;\n  const ref = useRef();\n  const [width, setWidth] = useState(0);\n  const sliderUUID = useMemo(() => uuidv4(), []);\n\n  const parsedMinValue = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return 0;\n    return minValue;\n  }, [customTickMarksValues?.length, minValue]);\n  const parsedMaxValue = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return customTickMarksValues?.length - 1;\n    return maxValue;\n  }, [customTickMarksValues?.length, maxValue]);\n  const parsedStep = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return 1;\n    return step;\n  }, [customTickMarksValues?.length, step]);\n\n  const parsedValuesArray = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return customTickMarksValues;\n    const newLength = Math.ceil(maxValue / step);\n    const valuesArray = [];\n    for (let i = 0; i <= newLength; i += 1) {\n      valuesArray.push(step * i);\n    }\n\n    return valuesArray;\n  }, [customTickMarksValues?.length, minValue, maxValue, step]);\n\n  const [rangeValues, setRangeValues] = useState(withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue]);\n  // track the full slice of values selected instead of only the limits\n  // this is important to handle the selected range labels colors\n  const [fullSelectedValues, setFullSelectedValues] = useState([]);\n  useEffect(() => {\n    const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!customTickMarksValues?.length);\n    setFullSelectedValues(selectedRangeValues);\n  }, [parsedValuesArray, rangeValues, customTickMarksValues?.length]);\n\n  const prevWithTwoHandles = usePrevious(withTwoHandles);\n  const resizeHandler = () => {\n    setWidth(0);\n    setWidth(ref.current?.clientWidth);\n  };\n  useEffect(() => {\n    window.addEventListener('resize', resizeHandler);\n    return () => window.removeEventListener('resize', resizeHandler);\n  });\n  useEffect(() => {\n    if (!prevWithTwoHandles && withTwoHandles) {\n      setRangeValues([parsedMinValue, parsedMaxValue]);\n    } else if (prevWithTwoHandles && !withTwoHandles) {\n      setRangeValues([parsedMinValue]);\n    }\n  }, [withTwoHandles]);\n\n  useEffect(() => {\n    setWidth(ref.current?.clientWidth);\n  }, [ref.current?.clientWidth]);\n\n  const [finalLabelText, finalValueText] = useMemo(\n    () => conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep),\n    [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep],\n  );\n\n  const SliderLabel = (\n    <>\n      <LabelText>{finalLabelText}</LabelText>\n      {finalLabelText && ' '}\n      <ValueText disabled={disabled}>{finalValueText}</ValueText>\n    </>\n  );\n\n  const theme = useContext(ThemeContext);\n\n  return (\n    <TooltipTextProvider>\n      <div ref={ref}>\n        <Grid\n          width=\"100%\"\n          style={{ maxWidth: '100%' }}\n          containerProps={containerProps}\n          data-testid=\"slider\"\n          alignItems=\"center\"\n          rows={['auto', 'auto']}\n        >\n          <SliderContext.Provider\n            value={{\n              disabled,\n              sliderUUID,\n              label,\n              labelWithValue,\n              minValue: parsedMinValue,\n              maxValue: parsedMaxValue,\n              step: parsedStep,\n              parsedValuesArray,\n              withTickMarks,\n              withTickMarksValues,\n              withTwoHandles,\n              customTickMarksValues,\n              rangeValues,\n              fullSelectedValues,\n              zIndex: zIndex ?? theme.zIndex.tooltip,\n            }}\n          >\n            {finalLabelText && (\n              <LabelWrapper width={width}>\n                <DSTruncatedTooltipText value={SliderLabel} />\n              </LabelWrapper>\n            )}\n            <StyledRangeWrapper>\n              <Range\n                step={parsedStep}\n                min={parsedMinValue}\n                max={parsedMaxValue}\n                values={rangeValues}\n                disabled={disabled}\n                onChange={(values) => {\n                  if (withTwoHandles && values[0] === values[1]) return;\n                  setRangeValues(values);\n                  onChange(values);\n                }}\n                renderTrack={({ props: trackProps, children }) => <Track props={trackProps}>{children}</Track>}\n                renderThumb={(renderArgs) => {\n                  const { index, props: thumbProps, isDragged } = renderArgs;\n                  return (\n                    <Thumb\n                      key={`${sliderUUID}-${thumbProps.key}`}\n                      props={thumbProps}\n                      isDragged={isDragged}\n                      index={index}\n                    />\n                  );\n                }}\n                allowOverlap={false}\n              />\n            </StyledRangeWrapper>\n          </SliderContext.Provider>\n        </Grid>\n      </div>\n    </TooltipTextProvider>\n  );\n};\n\n// SliderImp.propTypes = sliderPropTypes;\n\nexport default SliderImp;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["uuidv4", "DSTruncatedTooltipText", "Track", "Thumb"]
 }

package/dist/cjs/components/Thumb.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -32,34 +36,38 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_prop_types = __toESM(require("prop-types"));
 var import_ds_tooltip = require("@elliemae/ds-tooltip");
-var import_context = require("./context");
-var import_utils = require("./utils");
-var import_styled = require("./styled");
+var import_context = require("./context.js");
+var import_utils = require("./utils.js");
+var import_styled = require("./styled.js");
 const Thumb = ({ index, props, isDragged }) => {
   const [isHovered, setIsHovered] = (0, import_react.useState)(false);
   const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = (0, import_react.useContext)(import_context.SliderContext);
   const cleanedProps = { ...props };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styled.ThumbStyled,
-    {
-      ...cleanedProps,
-      "data-testid": "slider-thumb",
-      disabled,
-      style: { ...cleanedProps.style, zIndex },
-      index,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ds_tooltip.DSTooltipV3,
-        {
-          text: (0, import_utils.conformedThumbLabel)(rangeValues, customTickMarksValues, index, step, minValue),
-          showPopover: isDragged || isHovered,
-          customOffset: [0, 20],
-          withoutAnimation: true
-        },
-        (0, import_utils.conformedThumbLabel)(rangeValues, customTickMarksValues, index, step, minValue)
-      )
-    }
+  return (
+    // ...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
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styled.ThumbStyled,
+      {
+        ...cleanedProps,
+        "data-testid": "slider-thumb",
+        disabled,
+        style: { ...cleanedProps.style, zIndex },
+        index,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ds_tooltip.DSTooltipV3,
+          {
+            text: (0, import_utils.conformedThumbLabel)(rangeValues, customTickMarksValues, index, step, minValue),
+            showPopover: isDragged || isHovered,
+            customOffset: [0, 20],
+            withoutAnimation: true
+          },
+          (0, import_utils.conformedThumbLabel)(rangeValues, customTickMarksValues, index, step, minValue)
+        )
+      }
+    )
   );
 };
 Thumb.propTypes = {

package/dist/cjs/components/Thumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Thumb.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SliderContext } from './context';\nimport { conformedThumbLabel } from './utils';\nimport { ThumbStyled, TooltipContainerStyled, TooltipArrow } from './styled';\n\nconst Thumb = ({ index, props, isDragged }) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = useContext(SliderContext);\n\n  const cleanedProps = { ...props };\n  // delete cleanedProps.key;\n  // delete cleanedProps.draggable;\n  return (\n    // ...props is needed because it's received from the library\n    // ...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\n    <ThumbStyled\n      {...cleanedProps}\n      data-testid=\"slider-thumb\"\n      disabled={disabled}\n      // eslint-disable-next-line react/prop-types\n      style={{ ...cleanedProps.style, zIndex }}\n      index={index}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <DSTooltipV3\n        key={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n        text={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n        showPopover={isDragged || isHovered}\n        customOffset={[0, 20]}\n        withoutAnimation\n      ></DSTooltipV3>\n    </ThumbStyled>\n  );\n};\n\n/* {createPortal(\n        <TooltipContainerStyled isDragged={isDragged} isHovered={isHovered}>\n          <TooltipText>{</TooltipText>\n          <TooltipArrow />\n        </TooltipContainerStyled>,\n        document.body,\n      )} */\n\nThumb.propTypes = {\n  index: PropTypes.number,\n  props: PropTypes.shape({\n    style: PropTypes.shape({}).isRequired,\n  }).isRequired,\n  isDragged: PropTypes.bool,\n};\n\nexport default Thumb;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BjB;AA5BN,mBAA4C;AAE5C,wBAAsB;AACtB,wBAA4B;AAC5B,qBAA8B;AAC9B,mBAAoC;AACpC,oBAAkE;AAElE,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM;AAC7C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,EAAE,UAAU,aAAa,QAAQ,uBAAuB,MAAM,SAAS,QAAI,yBAAW,4BAAa;AAEzG,QAAM,eAAe,EAAE,GAAG,MAAM;AAGhC,SAGE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAY;AAAA,MACZ;AAAA,MAEA,OAAO,EAAE,GAAG,aAAa,OAAO,OAAO;AAAA,MACvC;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MAEtC;AAAA,QAAC;AAAA;AAAA,UAEC,UAAM,kCAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,UACnF,aAAa,aAAa;AAAA,UAC1B,cAAc,CAAC,GAAG,EAAE;AAAA,UACpB,kBAAgB;AAAA;AAAA,YAJX,kCAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,MAKnF;AAAA;AAAA,EACH;AAEJ;AAUA,MAAM,YAAY;AAAA,EAChB,OAAO,kBAAAA,QAAU;AAAA,EACjB,OAAO,kBAAAA,QAAU,MAAM;AAAA,IACrB,OAAO,kBAAAA,QAAU,MAAM,CAAC,CAAC,EAAE;AAAA,EAC7B,CAAC,EAAE;AAAA,EACH,WAAW,kBAAAA,QAAU;AACvB;AAEA,IAAO,gBAAQ;",
+  "sourcesContent": ["import React, { useContext, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SliderContext } from './context.js';\nimport { conformedThumbLabel } from './utils.js';\nimport { ThumbStyled, TooltipContainerStyled, TooltipArrow } from './styled.js';\n\nconst Thumb = ({ index, props, isDragged }) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = useContext(SliderContext);\n\n  const cleanedProps = { ...props };\n  // delete cleanedProps.key;\n  // delete cleanedProps.draggable;\n  return (\n    // ...props is needed because it's received from the library\n    // ...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\n    <ThumbStyled\n      {...cleanedProps}\n      data-testid=\"slider-thumb\"\n      disabled={disabled}\n      // eslint-disable-next-line react/prop-types\n      style={{ ...cleanedProps.style, zIndex }}\n      index={index}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <DSTooltipV3\n        key={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n        text={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n        showPopover={isDragged || isHovered}\n        customOffset={[0, 20]}\n        withoutAnimation\n      ></DSTooltipV3>\n    </ThumbStyled>\n  );\n};\n\n/* {createPortal(\n        <TooltipContainerStyled isDragged={isDragged} isHovered={isHovered}>\n          <TooltipText>{</TooltipText>\n          <TooltipArrow />\n        </TooltipContainerStyled>,\n        document.body,\n      )} */\n\nThumb.propTypes = {\n  index: PropTypes.number,\n  props: PropTypes.shape({\n    style: PropTypes.shape({}).isRequired,\n  }).isRequired,\n  isDragged: PropTypes.bool,\n};\n\nexport default Thumb;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BjB;AA5BN,mBAA4C;AAE5C,wBAAsB;AACtB,wBAA4B;AAC5B,qBAA8B;AAC9B,mBAAoC;AACpC,oBAAkE;AAElE,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM;AAC7C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,EAAE,UAAU,aAAa,QAAQ,uBAAuB,MAAM,SAAS,QAAI,yBAAW,4BAAa;AAEzG,QAAM,eAAe,EAAE,GAAG,MAAM;AAGhC;AAAA;AAAA;AAAA,IAGE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAY;AAAA,QACZ;AAAA,QAEA,OAAO,EAAE,GAAG,aAAa,OAAO,OAAO;AAAA,QACvC;AAAA,QACA,cAAc,MAAM,aAAa,IAAI;AAAA,QACrC,cAAc,MAAM,aAAa,KAAK;AAAA,QAEtC;AAAA,UAAC;AAAA;AAAA,YAEC,UAAM,kCAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,YACnF,aAAa,aAAa;AAAA,YAC1B,cAAc,CAAC,GAAG,EAAE;AAAA,YACpB,kBAAgB;AAAA;AAAA,cAJX,kCAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,QAKnF;AAAA;AAAA,IACH;AAAA;AAEJ;AAUA,MAAM,YAAY;AAAA,EAChB,OAAO,kBAAAA,QAAU;AAAA,EACjB,OAAO,kBAAAA,QAAU,MAAM;AAAA,IACrB,OAAO,kBAAAA,QAAU,MAAM,CAAC,CAAC,EAAE;AAAA,EAC7B,CAAC,EAAE;AAAA,EACH,WAAW,kBAAAA,QAAU;AACvB;AAEA,IAAO,gBAAQ;",
   "names": ["PropTypes"]
 }

package/dist/cjs/components/TickMarks.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -31,7 +35,7 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_system = require("@elliemae/ds-system");
-var import_context = require("./context");
+var import_context = require("./context.js");
 const TickMarks = () => {
   const { minValue, maxValue, rangeValues, step, withTwoHandles, zIndex } = (0, import_react.useContext)(import_context.SliderContext);
   const dots = [];

package/dist/cjs/components/TickMarks.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/TickMarks.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { SliderContext } from './context';\n\nconst TickMarks = () => {\n  const { minValue, maxValue, rangeValues, step, withTwoHandles, zIndex } = useContext(SliderContext);\n  const dots = [];\n\n  for (let index = minValue || 0; index <= maxValue; index += step) {\n    const isActive = withTwoHandles ? rangeValues[0] <= index && index < rangeValues[1] : rangeValues[0] > index;\n    dots.push(<Dot data-testid=\"slider-dot\" isActive={isActive} key={index} />);\n  }\n\n  return (\n    <DotsContainer data-testid=\"slider-tick-marks\" zIndex={zIndex}>\n      {dots}\n    </DotsContainer>\n  );\n};\n\nconst Dot = styled.div`\n  &:after {\n    content: '';\n    background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n    border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n    display: block;\n    position: relative;\n    width: 2px;\n    height: 2px;\n  }\n`;\n\nconst DotsContainer = styled.div`\n  padding: 0 calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 0.5);\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${(props) => props.zIndex - 1};\n`;\n\nexport default TickMarks;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWT;AAVd,mBAAkC;AAClC,uBAAiD;AACjD,qBAA8B;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,UAAU,UAAU,aAAa,MAAM,gBAAgB,OAAO,QAAI,yBAAW,4BAAa;AAClG,QAAM,OAAO,CAAC;AAEd,WAAS,QAAQ,YAAY,GAAG,SAAS,UAAU,SAAS,MAAM;AAChE,UAAM,WAAW,iBAAiB,YAAY,MAAM,SAAS,QAAQ,YAAY,KAAK,YAAY,KAAK;AACvG,SAAK,KAAK,4CAAC,OAAI,eAAY,cAAa,YAAyB,KAAO,CAAE;AAAA,EAC5E;AAEA,SACE,4CAAC,iBAAc,eAAY,qBAAoB,QAC5C,gBACH;AAEJ;AAEA,MAAM,MAAM,wBAAO;AAAA;AAAA;AAAA,kBAGD,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA,qBACrF,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ9E,MAAM,gBAAgB,wBAAO;AAAA,oBACT,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAUhE,CAAC,UAAU,MAAM,SAAS;AAAA;AAGvC,IAAO,oBAAQ;",
+  "sourcesContent": ["/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { SliderContext } from './context.js';\n\nconst TickMarks = () => {\n  const { minValue, maxValue, rangeValues, step, withTwoHandles, zIndex } = useContext(SliderContext);\n  const dots = [];\n\n  for (let index = minValue || 0; index <= maxValue; index += step) {\n    const isActive = withTwoHandles ? rangeValues[0] <= index && index < rangeValues[1] : rangeValues[0] > index;\n    dots.push(<Dot data-testid=\"slider-dot\" isActive={isActive} key={index} />);\n  }\n\n  return (\n    <DotsContainer data-testid=\"slider-tick-marks\" zIndex={zIndex}>\n      {dots}\n    </DotsContainer>\n  );\n};\n\nconst Dot = styled.div`\n  &:after {\n    content: '';\n    background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n    border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n    display: block;\n    position: relative;\n    width: 2px;\n    height: 2px;\n  }\n`;\n\nconst DotsContainer = styled.div`\n  padding: 0 calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 0.5);\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${(props) => props.zIndex - 1};\n`;\n\nexport default TickMarks;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWT;AAVd,mBAAkC;AAClC,uBAAiD;AACjD,qBAA8B;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,UAAU,UAAU,aAAa,MAAM,gBAAgB,OAAO,QAAI,yBAAW,4BAAa;AAClG,QAAM,OAAO,CAAC;AAEd,WAAS,QAAQ,YAAY,GAAG,SAAS,UAAU,SAAS,MAAM;AAChE,UAAM,WAAW,iBAAiB,YAAY,CAAC,KAAK,SAAS,QAAQ,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI;AACvG,SAAK,KAAK,4CAAC,OAAI,eAAY,cAAa,YAAyB,KAAO,CAAE;AAAA,EAC5E;AAEA,SACE,4CAAC,iBAAc,eAAY,qBAAoB,QAC5C,gBACH;AAEJ;AAEA,MAAM,MAAM,wBAAO;AAAA;AAAA;AAAA,kBAGD,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,qBACxF,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ9E,MAAM,gBAAgB,wBAAO;AAAA,oBACT,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAUhE,CAAC,UAAU,MAAM,SAAS;AAAA;AAGvC,IAAO,oBAAQ;",
   "names": []
 }

package/dist/cjs/components/TickMarksValues.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -31,7 +35,7 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_system = require("@elliemae/ds-system");
-var import_context = require("./context");
+var import_context = require("./context.js");
 const TickMarks = () => {
   const { parsedValuesArray, fullSelectedValues, sliderUUID } = (0, import_react.useContext)(import_context.SliderContext);
   const TickMarksLabels = (0, import_react.useMemo)(

package/dist/cjs/components/TickMarksValues.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/TickMarksValues.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-plusplus */\nimport React, { useContext, useMemo } from 'react';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { SliderContext } from './context';\n\nconst TickMarks = () => {\n  const { parsedValuesArray, fullSelectedValues, sliderUUID } = useContext(SliderContext);\n\n  const TickMarksLabels = useMemo(\n    () =>\n      parsedValuesArray.map((value) => {\n        const isSelected = fullSelectedValues.findIndex((selectedVal) => selectedVal === value) >= 0;\n        return (\n          <TickMarkValue key={`${sliderUUID}-${value}`} isSelected={isSelected}>\n            {value}\n          </TickMarkValue>\n        );\n      }),\n\n    [parsedValuesArray, sliderUUID, fullSelectedValues],\n  );\n\n  const PureTickMArksValues = useMemo(\n    () => <TickMarksContainer data-testid=\"slider-tick-marks-values\">{TickMarksLabels}</TickMarksContainer>,\n    [TickMarksLabels],\n  );\n\n  return PureTickMArksValues;\n};\n\nconst TickMarkValue = styled.div`\n  min-height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  overflow: visible;\n  transform: translateX(-100%);\n  width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nconst TickMarksContainer = styled.div`\n  display: flex;\n  justify-content: space-between;\n  // this next property-value rever the sanitize.css value\n  overflow-wrap: normal;\n`;\n\nexport default TickMarks;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADab;AAZV,mBAA2C;AAC3C,uBAAiD;AACjD,qBAA8B;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,mBAAmB,oBAAoB,WAAW,QAAI,yBAAW,4BAAa;AAEtF,QAAM,sBAAkB;AAAA,IACtB,MACE,kBAAkB,IAAI,CAAC,UAAU;AAC/B,YAAM,aAAa,mBAAmB,UAAU,CAAC,gBAAgB,gBAAgB,KAAK,KAAK;AAC3F,aACE,4CAAC,iBAA6C,YAC3C,mBADiB,GAAG,cAAc,OAErC;AAAA,IAEJ,CAAC;AAAA,IAEH,CAAC,mBAAmB,YAAY,kBAAkB;AAAA,EACpD;AAEA,QAAM,0BAAsB;AAAA,IAC1B,MAAM,4CAAC,sBAAmB,eAAY,4BAA4B,2BAAgB;AAAA,IAClF,CAAC,eAAe;AAAA,EAClB;AAEA,SAAO;AACT;AAEA,MAAM,gBAAgB,wBAAO;AAAA,gBACb,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,WAG5D,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,WACzD,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGvG,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,IAAO,0BAAQ;",
+  "sourcesContent": ["/* eslint-disable no-plusplus */\nimport React, { useContext, useMemo } from 'react';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { SliderContext } from './context.js';\n\nconst TickMarks = () => {\n  const { parsedValuesArray, fullSelectedValues, sliderUUID } = useContext(SliderContext);\n\n  const TickMarksLabels = useMemo(\n    () =>\n      parsedValuesArray.map((value) => {\n        const isSelected = fullSelectedValues.findIndex((selectedVal) => selectedVal === value) >= 0;\n        return (\n          <TickMarkValue key={`${sliderUUID}-${value}`} isSelected={isSelected}>\n            {value}\n          </TickMarkValue>\n        );\n      }),\n\n    [parsedValuesArray, sliderUUID, fullSelectedValues],\n  );\n\n  const PureTickMArksValues = useMemo(\n    () => <TickMarksContainer data-testid=\"slider-tick-marks-values\">{TickMarksLabels}</TickMarksContainer>,\n    [TickMarksLabels],\n  );\n\n  return PureTickMArksValues;\n};\n\nconst TickMarkValue = styled.div`\n  min-height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  overflow: visible;\n  transform: translateX(-100%);\n  width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nconst TickMarksContainer = styled.div`\n  display: flex;\n  justify-content: space-between;\n  // this next property-value rever the sanitize.css value\n  overflow-wrap: normal;\n`;\n\nexport default TickMarks;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADab;AAZV,mBAA2C;AAC3C,uBAAiD;AACjD,qBAA8B;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,mBAAmB,oBAAoB,WAAW,QAAI,yBAAW,4BAAa;AAEtF,QAAM,sBAAkB;AAAA,IACtB,MACE,kBAAkB,IAAI,CAAC,UAAU;AAC/B,YAAM,aAAa,mBAAmB,UAAU,CAAC,gBAAgB,gBAAgB,KAAK,KAAK;AAC3F,aACE,4CAAC,iBAA6C,YAC3C,mBADiB,GAAG,cAAc,OAErC;AAAA,IAEJ,CAAC;AAAA,IAEH,CAAC,mBAAmB,YAAY,kBAAkB;AAAA,EACpD;AAEA,QAAM,0BAAsB;AAAA,IAC1B,MAAM,4CAAC,sBAAmB,eAAY,4BAA4B,2BAAgB;AAAA,IAClF,CAAC,eAAe;AAAA,EAClB;AAEA,SAAO;AACT;AAEA,MAAM,gBAAgB,wBAAO;AAAA,gBACb,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,WAG5D,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,WACzD,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG1G,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,IAAO,0BAAQ;",
   "names": []
 }

package/dist/cjs/components/Track.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -32,9 +36,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_range = require("react-range");
 var import_ds_system = require("@elliemae/ds-system");
-var import_TickMarks = __toESM(require("./TickMarks"));
-var import_TickMarksValues = __toESM(require("./TickMarksValues"));
-var import_context = require("./context");
+var import_TickMarks = __toESM(require("./TickMarks.js"));
+var import_TickMarksValues = __toESM(require("./TickMarksValues.js"));
+var import_context = require("./context.js");
 const Track = ({ children, props }) => {
   const { disabled, minValue, maxValue, rangeValues, withTickMarks, withTickMarksValues, withTwoHandles } = (0, import_react.useContext)(import_context.SliderContext);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [

package/dist/cjs/components/Track.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Track.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable react/prop-types */\nimport React, { useContext } from 'react';\nimport { getTrackBackground } from 'react-range';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport TickMarks from './TickMarks';\nimport TickMarksValues from './TickMarksValues';\nimport { SliderContext } from './context';\n\nconst Track = ({ children, props }) => {\n  const { disabled, minValue, maxValue, rangeValues, withTickMarks, withTickMarksValues, withTwoHandles } =\n    useContext(SliderContext);\n\n  return (\n    <>\n      <TrackStyled\n        {...props} // This is needed because it's received from the library\n        disabled={disabled}\n        minValue={minValue}\n        maxValue={maxValue}\n        rangeValues={rangeValues}\n        withTwoHandles={withTwoHandles}\n      >\n        {children}\n        {withTickMarks && !disabled && <TickMarks />}\n      </TrackStyled>\n      {withTickMarksValues && <TickMarksValues />}\n    </>\n  );\n};\n\nconst TrackStyled = styled.div`\n  position: relative;\n  height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  width: 100%;\n  min-width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxl)};\n  border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  background: ${(props) =>\n    props.disabled\n      ? props.theme.colors.neutral[100]\n      : getTrackBackground({\n          values: props.rangeValues,\n          colors: props.withTwoHandles\n            ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n            : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n          min: props.minValue,\n          max: props.maxValue,\n        })};\n`;\n\nexport default Track;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAZJ,mBAAkC;AAClC,yBAAmC;AACnC,uBAAiD;AACjD,uBAAsB;AACtB,6BAA4B;AAC5B,qBAA8B;AAE9B,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM,MAAM;AACrC,QAAM,EAAE,UAAU,UAAU,UAAU,aAAa,eAAe,qBAAqB,eAAe,QACpG,yBAAW,4BAAa;AAE1B,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,iBAAiB,CAAC,YAAY,4CAAC,iBAAAA,SAAA,EAAU;AAAA;AAAA;AAAA,IAC5C;AAAA,IACC,uBAAuB,4CAAC,uBAAAC,SAAA,EAAgB;AAAA,KAC3C;AAEJ;AAEA,MAAM,cAAc,wBAAO;AAAA;AAAA,YAEf,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,eAEtD,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,mBACrD,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,gBAC5D,CAAC,UACb,MAAM,WACF,MAAM,MAAM,OAAO,QAAQ,WAC3B,uCAAmB;AAAA,EACjB,QAAQ,MAAM;AAAA,EACd,QAAQ,MAAM,iBACV,CAAC,MAAM,MAAM,OAAO,QAAQ,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,MAAM,OAAO,QAAQ,IAAI,IAChG,CAAC,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,MAAM,OAAO,QAAQ,IAAI;AAAA,EACnE,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AACb,CAAC;AAAA;AAGT,IAAO,gBAAQ;",
+  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable react/prop-types */\nimport React, { useContext } from 'react';\nimport { getTrackBackground } from 'react-range';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport TickMarks from './TickMarks.js';\nimport TickMarksValues from './TickMarksValues.js';\nimport { SliderContext } from './context.js';\n\nconst Track = ({ children, props }) => {\n  const { disabled, minValue, maxValue, rangeValues, withTickMarks, withTickMarksValues, withTwoHandles } =\n    useContext(SliderContext);\n\n  return (\n    <>\n      <TrackStyled\n        {...props} // This is needed because it's received from the library\n        disabled={disabled}\n        minValue={minValue}\n        maxValue={maxValue}\n        rangeValues={rangeValues}\n        withTwoHandles={withTwoHandles}\n      >\n        {children}\n        {withTickMarks && !disabled && <TickMarks />}\n      </TrackStyled>\n      {withTickMarksValues && <TickMarksValues />}\n    </>\n  );\n};\n\nconst TrackStyled = styled.div`\n  position: relative;\n  height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  width: 100%;\n  min-width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxl)};\n  border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  background: ${(props) =>\n    props.disabled\n      ? props.theme.colors.neutral[100]\n      : getTrackBackground({\n          values: props.rangeValues,\n          colors: props.withTwoHandles\n            ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n            : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n          min: props.minValue,\n          max: props.maxValue,\n        })};\n`;\n\nexport default Track;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAZJ,mBAAkC;AAClC,yBAAmC;AACnC,uBAAiD;AACjD,uBAAsB;AACtB,6BAA4B;AAC5B,qBAA8B;AAE9B,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM,MAAM;AACrC,QAAM,EAAE,UAAU,UAAU,UAAU,aAAa,eAAe,qBAAqB,eAAe,QACpG,yBAAW,4BAAa;AAE1B,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,iBAAiB,CAAC,YAAY,4CAAC,iBAAAA,SAAA,EAAU;AAAA;AAAA;AAAA,IAC5C;AAAA,IACC,uBAAuB,4CAAC,uBAAAC,SAAA,EAAgB;AAAA,KAC3C;AAEJ;AAEA,MAAM,cAAc,wBAAO;AAAA;AAAA,YAEf,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,eAEtD,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,mBACrD,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,gBAC5D,CAAC,UACb,MAAM,WACF,MAAM,MAAM,OAAO,QAAQ,GAAG,QAC9B,uCAAmB;AAAA,EACjB,QAAQ,MAAM;AAAA,EACd,QAAQ,MAAM,iBACV,CAAC,MAAM,MAAM,OAAO,QAAQ,GAAG,GAAG,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,IAChG,CAAC,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACnE,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AACb,CAAC;AAAA;AAGT,IAAO,gBAAQ;",
   "names": ["TickMarks", "TickMarksValues"]
 }

package/dist/cjs/components/context.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/components/context.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/components/context.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React from 'react';\n\nexport const SliderContext = React.createContext();\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAEX,MAAM,gBAAgB,aAAAA,QAAM,cAAc;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAEX,MAAM,gBAAgB,aAAAA,QAAM,cAAc;",
   "names": ["React"]
 }

package/dist/cjs/components/styled.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/components/styled.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/components/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable indent */\nimport { styled } from '@elliemae/ds-system';\nimport { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { TooltipContainer } from '@elliemae/ds-tooltip';\n\nexport const ThumbStyled = styled.div`\n  height: 20px;\n  width: 20px;\n  top: 0;\n  background-color: ${(props) =>\n    props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n  border-radius: 10px;\n  border: 1px solid ${(props) => (props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400])};\n\n  :focus {\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n    outline: unset;\n  }\n\n  :hover {\n    background-color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[100] : theme.colors.brand[200])};\n  }\n`;\n\nexport const TooltipContainerStyled = styled(TooltipContainer)`\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  top: -35px;\n  width: max-content;\n  left: 50%;\n  transform: translateX(-50%);\n  visibility: ${({ isDragged, isHovered }) => (isDragged || isHovered ? 'visible' : 'hidden')};\n`;\n// TODO: didn't work with DSTooltip, see how to improve\nexport const TooltipArrow = styled.div`\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 20px;\n  color: white;\n  border-left: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;\n  border-right: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;\n\n  border-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid\n    ${(props) => props.theme.colors.neutral['000']};\n`;\n\nexport const LabelWrapper = styled.div`\n  padding: 0 8px;\n  max-width: 100%;\n  line-height: 1;\n  height: 12px;\n  width: ${(props) => `${props.width || 0}px`};\n`;\n\nexport const LabelText = styled.span`\n  color: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const ValueText = styled.span`\n  color: ${({ disabled, theme }) => theme.colors.neutral[disabled ? 500 : 800]};\n`;\n\nexport const StyledRangeWrapper = styled.div`\n  min-height: 28px;\n  margin: 0 16px;\n  display: grid;\n  grid-template-rows: 28px auto;\n  align-items: center;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,IAAAA,oBAAyC;AACzC,wBAAiC;AAE1B,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA,sBAIZ,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,sBAE5D,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,wBAGxF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKpC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIrG,MAAM,6BAAyB,yBAAO,kCAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,YAAY,YAAY;AAAA;AAG7E,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMb,CAAC,cAAU,4CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,uBACxD,CAAC,cAAU,4CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,qBAE3D,CAAC,cAAU,4CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,MACxE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGrC,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKxB,CAAC,UAAU,GAAG,MAAM,SAAS;AAAA;AAGjC,MAAM,YAAY,wBAAO;AAAA,WACrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,YAAY,wBAAO;AAAA,WACrB,CAAC,EAAE,UAAU,MAAM,MAAM,MAAM,OAAO,QAAQ,WAAW,MAAM;AAAA;AAGnE,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,IAAAA,oBAAyC;AACzC,wBAAiC;AAE1B,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA,sBAIZ,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,sBAEjE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA,wBAG3F,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKvC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAIxG,MAAM,6BAAyB,yBAAO,kCAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,YAAY,YAAY;AAAA;AAG7E,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMb,CAAC,cAAU,4CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,uBACxD,CAAC,cAAU,4CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,qBAE3D,CAAC,cAAU,4CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,MACxE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG1C,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKxB,CAAC,UAAU,GAAG,MAAM,SAAS;AAAA;AAGjC,MAAM,YAAY,wBAAO;AAAA,WACrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG7C,MAAM,YAAY,wBAAO;AAAA,WACrB,CAAC,EAAE,UAAU,MAAM,MAAM,MAAM,OAAO,QAAQ,WAAW,MAAM,GAAG;AAAA;AAGtE,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": ["import_ds_system"]
 }

package/dist/cjs/components/utils.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/components/utils.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/components/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable max-params */\nimport { isEmpty } from '@elliemae/ds-utilities';\n\nexport const conformedLabel = (\n  rangeValues,\n  label = '',\n  labelWithValue = false,\n  withTwoHandles = false,\n  customTickMarksValues = [],\n  step = 1,\n  minValue = 0,\n) => {\n  const msg = label.trim();\n  let value = '';\n  if (!isEmpty(customTickMarksValues) && labelWithValue && label) {\n    const firstValue = customTickMarksValues[(rangeValues[0] - minValue) / step];\n    const secondValue = customTickMarksValues[(rangeValues[1] - minValue) / step];\n    value = `${firstValue || rangeValues[0].toFixed(1)} ${\n      withTwoHandles ? `, ${secondValue || rangeValues[1].toFixed(1)}` : ''\n    } `;\n  } else if (labelWithValue && label) {\n    value = `${rangeValues[0].toFixed(1)} ${withTwoHandles ? `, ${rangeValues[1]?.toFixed(1)}` : ''} `;\n  }\n  value = value.trim();\n\n  return [msg, value];\n};\n\nexport const conformedThumbLabel = (rangeValues, customTickMarksValues = [], index = 0, step = 1, minValue = 0) => {\n  let msg = `Value: `;\n  if (!isEmpty(customTickMarksValues)) {\n    const foundValue = customTickMarksValues[(rangeValues[index] - minValue) / step];\n    msg += `${foundValue || rangeValues[index].toFixed(1)}`;\n  } else {\n    msg += `${rangeValues[index].toFixed(1)}`;\n  }\n\n  return msg;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAwB;AAEjB,MAAM,iBAAiB,CAC5B,aACA,QAAQ,IACR,iBAAiB,OACjB,iBAAiB,OACjB,wBAAwB,CAAC,GACzB,OAAO,GACP,WAAW,MACR;AACH,QAAM,MAAM,MAAM,KAAK;AACvB,MAAI,QAAQ;AACZ,MAAI,KAAC,6BAAQ,qBAAqB,KAAK,kBAAkB,OAAO;AAC9D,UAAM,aAAa,uBAAuB,YAAY,KAAK,YAAY;AACvE,UAAM,cAAc,uBAAuB,YAAY,KAAK,YAAY;AACxE,YAAQ,GAAG,cAAc,YAAY,GAAG,QAAQ,CAAC,KAC/C,iBAAiB,KAAK,eAAe,YAAY,GAAG,QAAQ,CAAC,MAAM;AAAA,EAEvE,WAAW,kBAAkB,OAAO;AAClC,YAAQ,GAAG,YAAY,GAAG,QAAQ,CAAC,KAAK,iBAAiB,KAAK,YAAY,IAAI,QAAQ,CAAC,MAAM;AAAA,EAC/F;AACA,UAAQ,MAAM,KAAK;AAEnB,SAAO,CAAC,KAAK,KAAK;AACpB;AAEO,MAAM,sBAAsB,CAAC,aAAa,wBAAwB,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,MAAM;AACjH,MAAI,MAAM;AACV,MAAI,KAAC,6BAAQ,qBAAqB,GAAG;AACnC,UAAM,aAAa,uBAAuB,YAAY,SAAS,YAAY;AAC3E,WAAO,GAAG,cAAc,YAAY,OAAO,QAAQ,CAAC;AAAA,EACtD,OAAO;AACL,WAAO,GAAG,YAAY,OAAO,QAAQ,CAAC;AAAA,EACxC;AAEA,SAAO;AACT;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAwB;AAEjB,MAAM,iBAAiB,CAC5B,aACA,QAAQ,IACR,iBAAiB,OACjB,iBAAiB,OACjB,wBAAwB,CAAC,GACzB,OAAO,GACP,WAAW,MACR;AACH,QAAM,MAAM,MAAM,KAAK;AACvB,MAAI,QAAQ;AACZ,MAAI,KAAC,6BAAQ,qBAAqB,KAAK,kBAAkB,OAAO;AAC9D,UAAM,aAAa,uBAAuB,YAAY,CAAC,IAAI,YAAY,IAAI;AAC3E,UAAM,cAAc,uBAAuB,YAAY,CAAC,IAAI,YAAY,IAAI;AAC5E,YAAQ,GAAG,cAAc,YAAY,CAAC,EAAE,QAAQ,CAAC,KAC/C,iBAAiB,KAAK,eAAe,YAAY,CAAC,EAAE,QAAQ,CAAC,MAAM;AAAA,EAEvE,WAAW,kBAAkB,OAAO;AAClC,YAAQ,GAAG,YAAY,CAAC,EAAE,QAAQ,CAAC,KAAK,iBAAiB,KAAK,YAAY,CAAC,GAAG,QAAQ,CAAC,MAAM;AAAA,EAC/F;AACA,UAAQ,MAAM,KAAK;AAEnB,SAAO,CAAC,KAAK,KAAK;AACpB;AAEO,MAAM,sBAAsB,CAAC,aAAa,wBAAwB,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,MAAM;AACjH,MAAI,MAAM;AACV,MAAI,KAAC,6BAAQ,qBAAqB,GAAG;AACnC,UAAM,aAAa,uBAAuB,YAAY,KAAK,IAAI,YAAY,IAAI;AAC/E,WAAO,GAAG,cAAc,YAAY,KAAK,EAAE,QAAQ,CAAC;AAAA,EACtD,OAAO;AACL,WAAO,GAAG,YAAY,KAAK,EAAE,QAAQ,CAAC;AAAA,EACxC;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/index.js

@@ -19,6 +19,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -29,6 +33,6 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-var import_DSSlider = __toESM(require("./DSSlider"));
-__reExport(src_exports, require("./DSSlider"), module.exports);
+var import_DSSlider = __toESM(require("./DSSlider.js"));
+__reExport(src_exports, require("./DSSlider.js"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { default } from './DSSlider';\nexport * from './DSSlider';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAAwB;AACxB,wBAAc,uBADd;",
+  "sourcesContent": ["export { default } from './DSSlider.js';\nexport * from './DSSlider.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAAwB;AACxB,wBAAc,0BADd;",
   "names": []
 }

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/prop-types.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -46,20 +50,33 @@ const defaultProps = {
   customTickMarksValues: []
 };
 const sliderPropTypes = {
+  /** props to inject to slider wrapper */
   containerProps: import_ds_props_helpers.PropTypes.shape({}).description("props to inject to slider wrapper"),
+  /** disable slider */
   disabled: import_ds_props_helpers.PropTypes.bool.description("disable slider"),
+  /** label for slider */
   label: import_ds_props_helpers.PropTypes.string.description("label for slider"),
+  /** if the label comes with value attached for slider or not */
   labelWithValue: import_ds_props_helpers.PropTypes.bool.description("if the label comes with value attached for slider or not"),
+  /** min value for slider */
   minValue: import_ds_props_helpers.PropTypes.number.description("min value for slider"),
+  /** max value for slider */
   maxValue: import_ds_props_helpers.PropTypes.number.description("max value for slider"),
+  /** steps of values from min to max */
   step: import_ds_props_helpers.PropTypes.number.description("steps of values from min to max"),
+  /** change handler */
   onChange: import_ds_props_helpers.PropTypes.func.description("change handler"),
+  /** add tick marks between steps */
   withTickMarks: import_ds_props_helpers.PropTypes.bool.description("add tick marks between steps"),
+  /** add step value to tickmark */
   withTickMarksValues: import_ds_props_helpers.PropTypes.bool.description("add step value to tickmark"),
+  /** add two handles */
   withTwoHandles: import_ds_props_helpers.PropTypes.bool.description("add two handles"),
+  /** change manually tickmark values */
   customTickMarksValues: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.number])).description(
     "change manually tickmark values"
   ),
+  /** z index for thumb */
   zIndex: import_ds_props_helpers.PropTypes.number.description("z index for thumb")
 };
 //# sourceMappingURL=prop-types.js.map

package/dist/cjs/prop-types.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport const defaultProps = {\n  containerProps: {},\n  disabled: false,\n  label: '',\n  labelWithValue: false,\n  minValue: 0,\n  maxValue: 100,\n  step: 5,\n  onChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  withTwoHandles: false,\n  customTickMarksValues: [],\n};\n\nexport const sliderPropTypes = {\n  /** props to inject to slider wrapper */\n  containerProps: PropTypes.shape({}).description('props to inject to slider wrapper'),\n  /** disable slider */\n  disabled: PropTypes.bool.description('disable slider'),\n  /** label for slider */\n  label: PropTypes.string.description('label for slider'),\n  /** if the label comes with value attached for slider or not */\n  labelWithValue: PropTypes.bool.description('if the label comes with value attached for slider or not'),\n  /** min value for slider */\n  minValue: PropTypes.number.description('min value for slider'),\n  /** max value for slider */\n  maxValue: PropTypes.number.description('max value for slider'),\n  /** steps of values from min to max */\n  step: PropTypes.number.description('steps of values from min to max'),\n  /** change handler */\n  onChange: PropTypes.func.description('change handler'),\n  /** add tick marks between steps */\n  withTickMarks: PropTypes.bool.description('add tick marks between steps'),\n  /** add step value to tickmark */\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark'),\n  /** add two handles */\n  withTwoHandles: PropTypes.bool.description('add two handles'),\n  /** change manually tickmark values */\n  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description(\n    'change manually tickmark values',\n  ),\n  /** z index for thumb */\n  zIndex: PropTypes.number.description('z index for thumb'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAEnB,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,uBAAuB,CAAC;AAC1B;AAEO,MAAM,kBAAkB;AAAA,EAE7B,gBAAgB,kCAAU,MAAM,CAAC,CAAC,EAAE,YAAY,mCAAmC;AAAA,EAEnF,UAAU,kCAAU,KAAK,YAAY,gBAAgB;AAAA,EAErD,OAAO,kCAAU,OAAO,YAAY,kBAAkB;AAAA,EAEtD,gBAAgB,kCAAU,KAAK,YAAY,0DAA0D;AAAA,EAErG,UAAU,kCAAU,OAAO,YAAY,sBAAsB;AAAA,EAE7D,UAAU,kCAAU,OAAO,YAAY,sBAAsB;AAAA,EAE7D,MAAM,kCAAU,OAAO,YAAY,iCAAiC;AAAA,EAEpE,UAAU,kCAAU,KAAK,YAAY,gBAAgB;AAAA,EAErD,eAAe,kCAAU,KAAK,YAAY,8BAA8B;AAAA,EAExE,qBAAqB,kCAAU,KAAK,YAAY,4BAA4B;AAAA,EAE5E,gBAAgB,kCAAU,KAAK,YAAY,iBAAiB;AAAA,EAE5D,uBAAuB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EAAE;AAAA,IAClG;AAAA,EACF;AAAA,EAEA,QAAQ,kCAAU,OAAO,YAAY,mBAAmB;AAC1D;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAEnB,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,uBAAuB,CAAC;AAC1B;AAEO,MAAM,kBAAkB;AAAA;AAAA,EAE7B,gBAAgB,kCAAU,MAAM,CAAC,CAAC,EAAE,YAAY,mCAAmC;AAAA;AAAA,EAEnF,UAAU,kCAAU,KAAK,YAAY,gBAAgB;AAAA;AAAA,EAErD,OAAO,kCAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA,EAEtD,gBAAgB,kCAAU,KAAK,YAAY,0DAA0D;AAAA;AAAA,EAErG,UAAU,kCAAU,OAAO,YAAY,sBAAsB;AAAA;AAAA,EAE7D,UAAU,kCAAU,OAAO,YAAY,sBAAsB;AAAA;AAAA,EAE7D,MAAM,kCAAU,OAAO,YAAY,iCAAiC;AAAA;AAAA,EAEpE,UAAU,kCAAU,KAAK,YAAY,gBAAgB;AAAA;AAAA,EAErD,eAAe,kCAAU,KAAK,YAAY,8BAA8B;AAAA;AAAA,EAExE,qBAAqB,kCAAU,KAAK,YAAY,4BAA4B;AAAA;AAAA,EAE5E,gBAAgB,kCAAU,KAAK,YAAY,iBAAiB;AAAA;AAAA,EAE5D,uBAAuB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EAAE;AAAA,IAClG;AAAA,EACF;AAAA;AAAA,EAEA,QAAQ,kCAAU,OAAO,YAAY,mBAAmB;AAC1D;",
   "names": []
 }

package/dist/esm/DSSlider.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { describe } from "@elliemae/ds-props-helpers";
-import SliderImp from "./components/SliderImp";
-import { defaultProps, sliderPropTypes } from "./prop-types";
+import SliderImp from "./components/SliderImp.js";
+import { defaultProps, sliderPropTypes } from "./prop-types.js";
 const DSSlider = (props) => /* @__PURE__ */ jsx(SliderImp, { ...props });
 DSSlider.defaultProps = defaultProps;
 DSSlider.propTypes = sliderPropTypes;

package/dist/esm/DSSlider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSSlider.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport SliderImp from './components/SliderImp';\nimport { defaultProps, sliderPropTypes } from './prop-types';\n\nconst DSSlider = (props) => <SliderImp {...props} />;\n\nDSSlider.defaultProps = defaultProps;\nDSSlider.propTypes = sliderPropTypes;\nDSSlider.displayName = 'DSSlider';\nconst DSSliderWithSchema = describe(DSSlider);\nDSSliderWithSchema.propTypes = sliderPropTypes;\n\nexport { DSSlider, DSSliderWithSchema };\nexport default DSSlider;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport SliderImp from './components/SliderImp.js';\nimport { defaultProps, sliderPropTypes } from './prop-types.js';\n\nconst DSSlider = (props) => <SliderImp {...props} />;\n\nDSSlider.defaultProps = defaultProps;\nDSSlider.propTypes = sliderPropTypes;\nDSSlider.displayName = 'DSSlider';\nconst DSSliderWithSchema = describe(DSSlider);\nDSSliderWithSchema.propTypes = sliderPropTypes;\n\nexport { DSSlider, DSSliderWithSchema };\nexport default DSSlider;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACKK;AAJ5B,SAAS,gBAAgB;AACzB,OAAO,eAAe;AACtB,SAAS,cAAc,uBAAuB;AAE9C,MAAM,WAAW,CAAC,UAAU,oBAAC,aAAW,GAAG,OAAO;AAElD,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAG/B,IAAO,mBAAQ;",
   "names": []
 }

package/dist/esm/components/SliderImp.js

@@ -7,11 +7,11 @@ import { usePrevious } from "@elliemae/ds-utilities";
 import DSTruncatedTooltipText, { TooltipTextProvider } from "@elliemae/ds-truncated-tooltip-text";
 import { Grid } from "@elliemae/ds-grid";
 import { ThemeContext } from "@elliemae/ds-system";
-import Track from "./Track";
-import Thumb from "./Thumb";
-import { LabelWrapper, StyledRangeWrapper, LabelText, ValueText } from "./styled";
-import { conformedLabel } from "./utils";
-import { SliderContext } from "./context";
+import Track from "./Track.js";
+import Thumb from "./Thumb.js";
+import { LabelWrapper, StyledRangeWrapper, LabelText, ValueText } from "./styled.js";
+import { conformedLabel } from "./utils.js";
+import { SliderContext } from "./context.js";
 const getSubArrayFromRange = (arr, [minVal, maxVal], isCustomTickMarksValues = false) => {
   const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;
   const minIndex = arr.findIndex((el) => el === trueMinVal);

package/dist/esm/components/SliderImp.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/SliderImp.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useRef, useMemo, useContext } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { Range } from 'react-range';\nimport { usePrevious } from '@elliemae/ds-utilities';\nimport DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport Track from './Track';\nimport Thumb from './Thumb';\nimport { LabelWrapper, StyledRangeWrapper, LabelText, ValueText } from './styled';\nimport { conformedLabel } from './utils';\nimport { SliderContext } from './context';\n\nconst getSubArrayFromRange = (\n  arr,\n  [minVal, maxVal], // maxValue is undefined when only one handler\n  isCustomTickMarksValues = false,\n) => {\n  const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;\n  const minIndex = arr.findIndex((el) => el === trueMinVal);\n\n  if (maxVal !== undefined) {\n    // if two handlers, return the found slice\n    const trueMaxVal = isCustomTickMarksValues ? arr[maxVal] : maxVal;\n    const maxIndex = arr.findIndex((el) => el === trueMaxVal);\n\n    if (minIndex >= 0 && maxIndex > minIndex) return arr.slice(minIndex, maxIndex + 1);\n    return [];\n  }\n  // if only one handler, return the value in an array\n  return [trueMinVal];\n};\n\nconst SliderImp = (props) => {\n  const {\n    containerProps,\n    disabled,\n    label,\n    labelWithValue,\n    minValue,\n    maxValue,\n    step,\n    onChange,\n    withTickMarks,\n    withTickMarksValues,\n    withTwoHandles,\n    customTickMarksValues,\n    zIndex,\n  } = props;\n  const ref = useRef();\n  const [width, setWidth] = useState(0);\n  const sliderUUID = useMemo(() => uuidv4(), []);\n\n  const parsedMinValue = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return 0;\n    return minValue;\n  }, [customTickMarksValues?.length, minValue]);\n  const parsedMaxValue = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return customTickMarksValues?.length - 1;\n    return maxValue;\n  }, [customTickMarksValues?.length, maxValue]);\n  const parsedStep = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return 1;\n    return step;\n  }, [customTickMarksValues?.length, step]);\n\n  const parsedValuesArray = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return customTickMarksValues;\n    const newLength = Math.ceil(maxValue / step);\n    const valuesArray = [];\n    for (let i = 0; i <= newLength; i += 1) {\n      valuesArray.push(step * i);\n    }\n\n    return valuesArray;\n  }, [customTickMarksValues?.length, minValue, maxValue, step]);\n\n  const [rangeValues, setRangeValues] = useState(withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue]);\n  // track the full slice of values selected instead of only the limits\n  // this is important to handle the selected range labels colors\n  const [fullSelectedValues, setFullSelectedValues] = useState([]);\n  useEffect(() => {\n    const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!customTickMarksValues?.length);\n    setFullSelectedValues(selectedRangeValues);\n  }, [parsedValuesArray, rangeValues, customTickMarksValues?.length]);\n\n  const prevWithTwoHandles = usePrevious(withTwoHandles);\n  const resizeHandler = () => {\n    setWidth(0);\n    setWidth(ref.current?.clientWidth);\n  };\n  useEffect(() => {\n    window.addEventListener('resize', resizeHandler);\n    return () => window.removeEventListener('resize', resizeHandler);\n  });\n  useEffect(() => {\n    if (!prevWithTwoHandles && withTwoHandles) {\n      setRangeValues([parsedMinValue, parsedMaxValue]);\n    } else if (prevWithTwoHandles && !withTwoHandles) {\n      setRangeValues([parsedMinValue]);\n    }\n  }, [withTwoHandles]);\n\n  useEffect(() => {\n    setWidth(ref.current?.clientWidth);\n  }, [ref.current?.clientWidth]);\n\n  const [finalLabelText, finalValueText] = useMemo(\n    () => conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep),\n    [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep],\n  );\n\n  const SliderLabel = (\n    <>\n      <LabelText>{finalLabelText}</LabelText>\n      {finalLabelText && ' '}\n      <ValueText disabled={disabled}>{finalValueText}</ValueText>\n    </>\n  );\n\n  const theme = useContext(ThemeContext);\n\n  return (\n    <TooltipTextProvider>\n      <div ref={ref}>\n        <Grid\n          width=\"100%\"\n          style={{ maxWidth: '100%' }}\n          containerProps={containerProps}\n          data-testid=\"slider\"\n          alignItems=\"center\"\n          rows={['auto', 'auto']}\n        >\n          <SliderContext.Provider\n            value={{\n              disabled,\n              sliderUUID,\n              label,\n              labelWithValue,\n              minValue: parsedMinValue,\n              maxValue: parsedMaxValue,\n              step: parsedStep,\n              parsedValuesArray,\n              withTickMarks,\n              withTickMarksValues,\n              withTwoHandles,\n              customTickMarksValues,\n              rangeValues,\n              fullSelectedValues,\n              zIndex: zIndex ?? theme.zIndex.tooltip,\n            }}\n          >\n            {finalLabelText && (\n              <LabelWrapper width={width}>\n                <DSTruncatedTooltipText value={SliderLabel} />\n              </LabelWrapper>\n            )}\n            <StyledRangeWrapper>\n              <Range\n                step={parsedStep}\n                min={parsedMinValue}\n                max={parsedMaxValue}\n                values={rangeValues}\n                disabled={disabled}\n                onChange={(values) => {\n                  if (withTwoHandles && values[0] === values[1]) return;\n                  setRangeValues(values);\n                  onChange(values);\n                }}\n                renderTrack={({ props: trackProps, children }) => <Track props={trackProps}>{children}</Track>}\n                renderThumb={(renderArgs) => {\n                  const { index, props: thumbProps, isDragged } = renderArgs;\n                  return (\n                    <Thumb\n                      key={`${sliderUUID}-${thumbProps.key}`}\n                      props={thumbProps}\n                      isDragged={isDragged}\n                      index={index}\n                    />\n                  );\n                }}\n                allowOverlap={false}\n              />\n            </StyledRangeWrapper>\n          </SliderContext.Provider>\n        </Grid>\n      </div>\n    </TooltipTextProvider>\n  );\n};\n\n// SliderImp.propTypes = sliderPropTypes;\n\nexport default SliderImp;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useRef, useMemo, useContext } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { Range } from 'react-range';\nimport { usePrevious } from '@elliemae/ds-utilities';\nimport DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport Track from './Track.js';\nimport Thumb from './Thumb.js';\nimport { LabelWrapper, StyledRangeWrapper, LabelText, ValueText } from './styled.js';\nimport { conformedLabel } from './utils.js';\nimport { SliderContext } from './context.js';\n\nconst getSubArrayFromRange = (\n  arr,\n  [minVal, maxVal], // maxValue is undefined when only one handler\n  isCustomTickMarksValues = false,\n) => {\n  const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;\n  const minIndex = arr.findIndex((el) => el === trueMinVal);\n\n  if (maxVal !== undefined) {\n    // if two handlers, return the found slice\n    const trueMaxVal = isCustomTickMarksValues ? arr[maxVal] : maxVal;\n    const maxIndex = arr.findIndex((el) => el === trueMaxVal);\n\n    if (minIndex >= 0 && maxIndex > minIndex) return arr.slice(minIndex, maxIndex + 1);\n    return [];\n  }\n  // if only one handler, return the value in an array\n  return [trueMinVal];\n};\n\nconst SliderImp = (props) => {\n  const {\n    containerProps,\n    disabled,\n    label,\n    labelWithValue,\n    minValue,\n    maxValue,\n    step,\n    onChange,\n    withTickMarks,\n    withTickMarksValues,\n    withTwoHandles,\n    customTickMarksValues,\n    zIndex,\n  } = props;\n  const ref = useRef();\n  const [width, setWidth] = useState(0);\n  const sliderUUID = useMemo(() => uuidv4(), []);\n\n  const parsedMinValue = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return 0;\n    return minValue;\n  }, [customTickMarksValues?.length, minValue]);\n  const parsedMaxValue = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return customTickMarksValues?.length - 1;\n    return maxValue;\n  }, [customTickMarksValues?.length, maxValue]);\n  const parsedStep = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return 1;\n    return step;\n  }, [customTickMarksValues?.length, step]);\n\n  const parsedValuesArray = useMemo(() => {\n    // ensure this works correctly with customTickMarksValues array\n    if (customTickMarksValues?.length) return customTickMarksValues;\n    const newLength = Math.ceil(maxValue / step);\n    const valuesArray = [];\n    for (let i = 0; i <= newLength; i += 1) {\n      valuesArray.push(step * i);\n    }\n\n    return valuesArray;\n  }, [customTickMarksValues?.length, minValue, maxValue, step]);\n\n  const [rangeValues, setRangeValues] = useState(withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue]);\n  // track the full slice of values selected instead of only the limits\n  // this is important to handle the selected range labels colors\n  const [fullSelectedValues, setFullSelectedValues] = useState([]);\n  useEffect(() => {\n    const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!customTickMarksValues?.length);\n    setFullSelectedValues(selectedRangeValues);\n  }, [parsedValuesArray, rangeValues, customTickMarksValues?.length]);\n\n  const prevWithTwoHandles = usePrevious(withTwoHandles);\n  const resizeHandler = () => {\n    setWidth(0);\n    setWidth(ref.current?.clientWidth);\n  };\n  useEffect(() => {\n    window.addEventListener('resize', resizeHandler);\n    return () => window.removeEventListener('resize', resizeHandler);\n  });\n  useEffect(() => {\n    if (!prevWithTwoHandles && withTwoHandles) {\n      setRangeValues([parsedMinValue, parsedMaxValue]);\n    } else if (prevWithTwoHandles && !withTwoHandles) {\n      setRangeValues([parsedMinValue]);\n    }\n  }, [withTwoHandles]);\n\n  useEffect(() => {\n    setWidth(ref.current?.clientWidth);\n  }, [ref.current?.clientWidth]);\n\n  const [finalLabelText, finalValueText] = useMemo(\n    () => conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep),\n    [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep],\n  );\n\n  const SliderLabel = (\n    <>\n      <LabelText>{finalLabelText}</LabelText>\n      {finalLabelText && ' '}\n      <ValueText disabled={disabled}>{finalValueText}</ValueText>\n    </>\n  );\n\n  const theme = useContext(ThemeContext);\n\n  return (\n    <TooltipTextProvider>\n      <div ref={ref}>\n        <Grid\n          width=\"100%\"\n          style={{ maxWidth: '100%' }}\n          containerProps={containerProps}\n          data-testid=\"slider\"\n          alignItems=\"center\"\n          rows={['auto', 'auto']}\n        >\n          <SliderContext.Provider\n            value={{\n              disabled,\n              sliderUUID,\n              label,\n              labelWithValue,\n              minValue: parsedMinValue,\n              maxValue: parsedMaxValue,\n              step: parsedStep,\n              parsedValuesArray,\n              withTickMarks,\n              withTickMarksValues,\n              withTwoHandles,\n              customTickMarksValues,\n              rangeValues,\n              fullSelectedValues,\n              zIndex: zIndex ?? theme.zIndex.tooltip,\n            }}\n          >\n            {finalLabelText && (\n              <LabelWrapper width={width}>\n                <DSTruncatedTooltipText value={SliderLabel} />\n              </LabelWrapper>\n            )}\n            <StyledRangeWrapper>\n              <Range\n                step={parsedStep}\n                min={parsedMinValue}\n                max={parsedMaxValue}\n                values={rangeValues}\n                disabled={disabled}\n                onChange={(values) => {\n                  if (withTwoHandles && values[0] === values[1]) return;\n                  setRangeValues(values);\n                  onChange(values);\n                }}\n                renderTrack={({ props: trackProps, children }) => <Track props={trackProps}>{children}</Track>}\n                renderThumb={(renderArgs) => {\n                  const { index, props: thumbProps, isDragged } = renderArgs;\n                  return (\n                    <Thumb\n                      key={`${sliderUUID}-${thumbProps.key}`}\n                      props={thumbProps}\n                      isDragged={isDragged}\n                      index={index}\n                    />\n                  );\n                }}\n                allowOverlap={false}\n              />\n            </StyledRangeWrapper>\n          </SliderContext.Provider>\n        </Grid>\n      </div>\n    </TooltipTextProvider>\n  );\n};\n\n// SliderImp.propTypes = sliderPropTypes;\n\nexport default SliderImp;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/components/Thumb.js

@@ -3,34 +3,38 @@ import { jsx } from "react/jsx-runtime";
 import { useContext, useState } from "react";
 import PropTypes from "prop-types";
 import { DSTooltipV3 } from "@elliemae/ds-tooltip";
-import { SliderContext } from "./context";
-import { conformedThumbLabel } from "./utils";
-import { ThumbStyled } from "./styled";
+import { SliderContext } from "./context.js";
+import { conformedThumbLabel } from "./utils.js";
+import { ThumbStyled } from "./styled.js";
 const Thumb = ({ index, props, isDragged }) => {
   const [isHovered, setIsHovered] = useState(false);
   const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = useContext(SliderContext);
   const cleanedProps = { ...props };
-  return /* @__PURE__ */ jsx(
-    ThumbStyled,
-    {
-      ...cleanedProps,
-      "data-testid": "slider-thumb",
-      disabled,
-      style: { ...cleanedProps.style, zIndex },
-      index,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      children: /* @__PURE__ */ jsx(
-        DSTooltipV3,
-        {
-          text: conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue),
-          showPopover: isDragged || isHovered,
-          customOffset: [0, 20],
-          withoutAnimation: true
-        },
-        conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)
-      )
-    }
+  return (
+    // ...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
+    /* @__PURE__ */ jsx(
+      ThumbStyled,
+      {
+        ...cleanedProps,
+        "data-testid": "slider-thumb",
+        disabled,
+        style: { ...cleanedProps.style, zIndex },
+        index,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: /* @__PURE__ */ jsx(
+          DSTooltipV3,
+          {
+            text: conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue),
+            showPopover: isDragged || isHovered,
+            customOffset: [0, 20],
+            withoutAnimation: true
+          },
+          conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)
+        )
+      }
+    )
   );
 };
 Thumb.propTypes = {

package/dist/esm/components/Thumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Thumb.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SliderContext } from './context';\nimport { conformedThumbLabel } from './utils';\nimport { ThumbStyled, TooltipContainerStyled, TooltipArrow } from './styled';\n\nconst Thumb = ({ index, props, isDragged }) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = useContext(SliderContext);\n\n  const cleanedProps = { ...props };\n  // delete cleanedProps.key;\n  // delete cleanedProps.draggable;\n  return (\n    // ...props is needed because it's received from the library\n    // ...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\n    <ThumbStyled\n      {...cleanedProps}\n      data-testid=\"slider-thumb\"\n      disabled={disabled}\n      // eslint-disable-next-line react/prop-types\n      style={{ ...cleanedProps.style, zIndex }}\n      index={index}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <DSTooltipV3\n        key={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n        text={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n        showPopover={isDragged || isHovered}\n        customOffset={[0, 20]}\n        withoutAnimation\n      ></DSTooltipV3>\n    </ThumbStyled>\n  );\n};\n\n/* {createPortal(\n        <TooltipContainerStyled isDragged={isDragged} isHovered={isHovered}>\n          <TooltipText>{</TooltipText>\n          <TooltipArrow />\n        </TooltipContainerStyled>,\n        document.body,\n      )} */\n\nThumb.propTypes = {\n  index: PropTypes.number,\n  props: PropTypes.shape({\n    style: PropTypes.shape({}).isRequired,\n  }).isRequired,\n  isDragged: PropTypes.bool,\n};\n\nexport default Thumb;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC4BjB;AA5BN,SAAgB,YAAY,gBAAgB;AAE5C,OAAO,eAAe;AACtB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,mBAAyD;AAElE,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM;AAC7C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,UAAU,aAAa,QAAQ,uBAAuB,MAAM,SAAS,IAAI,WAAW,aAAa;AAEzG,QAAM,eAAe,EAAE,GAAG,MAAM;AAGhC,SAGE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAY;AAAA,MACZ;AAAA,MAEA,OAAO,EAAE,GAAG,aAAa,OAAO,OAAO;AAAA,MACvC;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MAEtC;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM,oBAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,UACnF,aAAa,aAAa;AAAA,UAC1B,cAAc,CAAC,GAAG,EAAE;AAAA,UACpB,kBAAgB;AAAA;AAAA,QAJX,oBAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,MAKnF;AAAA;AAAA,EACH;AAEJ;AAUA,MAAM,YAAY;AAAA,EAChB,OAAO,UAAU;AAAA,EACjB,OAAO,UAAU,MAAM;AAAA,IACrB,OAAO,UAAU,MAAM,CAAC,CAAC,EAAE;AAAA,EAC7B,CAAC,EAAE;AAAA,EACH,WAAW,UAAU;AACvB;AAEA,IAAO,gBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SliderContext } from './context.js';\nimport { conformedThumbLabel } from './utils.js';\nimport { ThumbStyled, TooltipContainerStyled, TooltipArrow } from './styled.js';\n\nconst Thumb = ({ index, props, isDragged }) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = useContext(SliderContext);\n\n  const cleanedProps = { ...props };\n  // delete cleanedProps.key;\n  // delete cleanedProps.draggable;\n  return (\n    // ...props is needed because it's received from the library\n    // ...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\n    <ThumbStyled\n      {...cleanedProps}\n      data-testid=\"slider-thumb\"\n      disabled={disabled}\n      // eslint-disable-next-line react/prop-types\n      style={{ ...cleanedProps.style, zIndex }}\n      index={index}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <DSTooltipV3\n        key={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n        text={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n        showPopover={isDragged || isHovered}\n        customOffset={[0, 20]}\n        withoutAnimation\n      ></DSTooltipV3>\n    </ThumbStyled>\n  );\n};\n\n/* {createPortal(\n        <TooltipContainerStyled isDragged={isDragged} isHovered={isHovered}>\n          <TooltipText>{</TooltipText>\n          <TooltipArrow />\n        </TooltipContainerStyled>,\n        document.body,\n      )} */\n\nThumb.propTypes = {\n  index: PropTypes.number,\n  props: PropTypes.shape({\n    style: PropTypes.shape({}).isRequired,\n  }).isRequired,\n  isDragged: PropTypes.bool,\n};\n\nexport default Thumb;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC4BjB;AA5BN,SAAgB,YAAY,gBAAgB;AAE5C,OAAO,eAAe;AACtB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,mBAAyD;AAElE,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM;AAC7C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,UAAU,aAAa,QAAQ,uBAAuB,MAAM,SAAS,IAAI,WAAW,aAAa;AAEzG,QAAM,eAAe,EAAE,GAAG,MAAM;AAGhC;AAAA;AAAA;AAAA,IAGE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAY;AAAA,QACZ;AAAA,QAEA,OAAO,EAAE,GAAG,aAAa,OAAO,OAAO;AAAA,QACvC;AAAA,QACA,cAAc,MAAM,aAAa,IAAI;AAAA,QACrC,cAAc,MAAM,aAAa,KAAK;AAAA,QAEtC;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM,oBAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,YACnF,aAAa,aAAa;AAAA,YAC1B,cAAc,CAAC,GAAG,EAAE;AAAA,YACpB,kBAAgB;AAAA;AAAA,UAJX,oBAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,QAKnF;AAAA;AAAA,IACH;AAAA;AAEJ;AAUA,MAAM,YAAY;AAAA,EAChB,OAAO,UAAU;AAAA,EACjB,OAAO,UAAU,MAAM;AAAA,IACrB,OAAO,UAAU,MAAM,CAAC,CAAC,EAAE;AAAA,EAC7B,CAAC,EAAE;AAAA,EACH,WAAW,UAAU;AACvB;AAEA,IAAO,gBAAQ;",
   "names": []
 }

package/dist/esm/components/TickMarks.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { styled, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-import { SliderContext } from "./context";
+import { SliderContext } from "./context.js";
 const TickMarks = () => {
   const { minValue, maxValue, rangeValues, step, withTwoHandles, zIndex } = useContext(SliderContext);
   const dots = [];

package/dist/esm/components/TickMarks.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/TickMarks.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { SliderContext } from './context';\n\nconst TickMarks = () => {\n  const { minValue, maxValue, rangeValues, step, withTwoHandles, zIndex } = useContext(SliderContext);\n  const dots = [];\n\n  for (let index = minValue || 0; index <= maxValue; index += step) {\n    const isActive = withTwoHandles ? rangeValues[0] <= index && index < rangeValues[1] : rangeValues[0] > index;\n    dots.push(<Dot data-testid=\"slider-dot\" isActive={isActive} key={index} />);\n  }\n\n  return (\n    <DotsContainer data-testid=\"slider-tick-marks\" zIndex={zIndex}>\n      {dots}\n    </DotsContainer>\n  );\n};\n\nconst Dot = styled.div`\n  &:after {\n    content: '';\n    background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n    border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n    display: block;\n    position: relative;\n    width: 2px;\n    height: 2px;\n  }\n`;\n\nconst DotsContainer = styled.div`\n  padding: 0 calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 0.5);\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${(props) => props.zIndex - 1};\n`;\n\nexport default TickMarks;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACWT;AAVd,SAAgB,kBAAkB;AAClC,SAAS,QAAQ,gCAAgC;AACjD,SAAS,qBAAqB;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,UAAU,UAAU,aAAa,MAAM,gBAAgB,OAAO,IAAI,WAAW,aAAa;AAClG,QAAM,OAAO,CAAC;AAEd,WAAS,QAAQ,YAAY,GAAG,SAAS,UAAU,SAAS,MAAM;AAChE,UAAM,WAAW,iBAAiB,YAAY,MAAM,SAAS,QAAQ,YAAY,KAAK,YAAY,KAAK;AACvG,SAAK,KAAK,oBAAC,OAAI,eAAY,cAAa,YAAyB,KAAO,CAAE;AAAA,EAC5E;AAEA,SACE,oBAAC,iBAAc,eAAY,qBAAoB,QAC5C,gBACH;AAEJ;AAEA,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA,kBAGD,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA,qBACrF,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ9E,MAAM,gBAAgB,OAAO;AAAA,oBACT,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAUhE,CAAC,UAAU,MAAM,SAAS;AAAA;AAGvC,IAAO,oBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { SliderContext } from './context.js';\n\nconst TickMarks = () => {\n  const { minValue, maxValue, rangeValues, step, withTwoHandles, zIndex } = useContext(SliderContext);\n  const dots = [];\n\n  for (let index = minValue || 0; index <= maxValue; index += step) {\n    const isActive = withTwoHandles ? rangeValues[0] <= index && index < rangeValues[1] : rangeValues[0] > index;\n    dots.push(<Dot data-testid=\"slider-dot\" isActive={isActive} key={index} />);\n  }\n\n  return (\n    <DotsContainer data-testid=\"slider-tick-marks\" zIndex={zIndex}>\n      {dots}\n    </DotsContainer>\n  );\n};\n\nconst Dot = styled.div`\n  &:after {\n    content: '';\n    background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n    border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n    display: block;\n    position: relative;\n    width: 2px;\n    height: 2px;\n  }\n`;\n\nconst DotsContainer = styled.div`\n  padding: 0 calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 0.5);\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${(props) => props.zIndex - 1};\n`;\n\nexport default TickMarks;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACWT;AAVd,SAAgB,kBAAkB;AAClC,SAAS,QAAQ,gCAAgC;AACjD,SAAS,qBAAqB;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,UAAU,UAAU,aAAa,MAAM,gBAAgB,OAAO,IAAI,WAAW,aAAa;AAClG,QAAM,OAAO,CAAC;AAEd,WAAS,QAAQ,YAAY,GAAG,SAAS,UAAU,SAAS,MAAM;AAChE,UAAM,WAAW,iBAAiB,YAAY,CAAC,KAAK,SAAS,QAAQ,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI;AACvG,SAAK,KAAK,oBAAC,OAAI,eAAY,cAAa,YAAyB,KAAO,CAAE;AAAA,EAC5E;AAEA,SACE,oBAAC,iBAAc,eAAY,qBAAoB,QAC5C,gBACH;AAEJ;AAEA,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA,kBAGD,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,qBACxF,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ9E,MAAM,gBAAgB,OAAO;AAAA,oBACT,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAUhE,CAAC,UAAU,MAAM,SAAS;AAAA;AAGvC,IAAO,oBAAQ;",
   "names": []
 }

package/dist/esm/components/TickMarksValues.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { styled, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-import { SliderContext } from "./context";
+import { SliderContext } from "./context.js";
 const TickMarks = () => {
   const { parsedValuesArray, fullSelectedValues, sliderUUID } = useContext(SliderContext);
   const TickMarksLabels = useMemo(

package/dist/esm/components/TickMarksValues.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/TickMarksValues.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-plusplus */\nimport React, { useContext, useMemo } from 'react';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { SliderContext } from './context';\n\nconst TickMarks = () => {\n  const { parsedValuesArray, fullSelectedValues, sliderUUID } = useContext(SliderContext);\n\n  const TickMarksLabels = useMemo(\n    () =>\n      parsedValuesArray.map((value) => {\n        const isSelected = fullSelectedValues.findIndex((selectedVal) => selectedVal === value) >= 0;\n        return (\n          <TickMarkValue key={`${sliderUUID}-${value}`} isSelected={isSelected}>\n            {value}\n          </TickMarkValue>\n        );\n      }),\n\n    [parsedValuesArray, sliderUUID, fullSelectedValues],\n  );\n\n  const PureTickMArksValues = useMemo(\n    () => <TickMarksContainer data-testid=\"slider-tick-marks-values\">{TickMarksLabels}</TickMarksContainer>,\n    [TickMarksLabels],\n  );\n\n  return PureTickMArksValues;\n};\n\nconst TickMarkValue = styled.div`\n  min-height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  overflow: visible;\n  transform: translateX(-100%);\n  width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nconst TickMarksContainer = styled.div`\n  display: flex;\n  justify-content: space-between;\n  // this next property-value rever the sanitize.css value\n  overflow-wrap: normal;\n`;\n\nexport default TickMarks;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACab;AAZV,SAAgB,YAAY,eAAe;AAC3C,SAAS,QAAQ,gCAAgC;AACjD,SAAS,qBAAqB;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,mBAAmB,oBAAoB,WAAW,IAAI,WAAW,aAAa;AAEtF,QAAM,kBAAkB;AAAA,IACtB,MACE,kBAAkB,IAAI,CAAC,UAAU;AAC/B,YAAM,aAAa,mBAAmB,UAAU,CAAC,gBAAgB,gBAAgB,KAAK,KAAK;AAC3F,aACE,oBAAC,iBAA6C,YAC3C,mBADiB,GAAG,cAAc,OAErC;AAAA,IAEJ,CAAC;AAAA,IAEH,CAAC,mBAAmB,YAAY,kBAAkB;AAAA,EACpD;AAEA,QAAM,sBAAsB;AAAA,IAC1B,MAAM,oBAAC,sBAAmB,eAAY,4BAA4B,2BAAgB;AAAA,IAClF,CAAC,eAAe;AAAA,EAClB;AAEA,SAAO;AACT;AAEA,MAAM,gBAAgB,OAAO;AAAA,gBACb,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,WAG5D,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,WACzD,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGvG,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,IAAO,0BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-plusplus */\nimport React, { useContext, useMemo } from 'react';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { SliderContext } from './context.js';\n\nconst TickMarks = () => {\n  const { parsedValuesArray, fullSelectedValues, sliderUUID } = useContext(SliderContext);\n\n  const TickMarksLabels = useMemo(\n    () =>\n      parsedValuesArray.map((value) => {\n        const isSelected = fullSelectedValues.findIndex((selectedVal) => selectedVal === value) >= 0;\n        return (\n          <TickMarkValue key={`${sliderUUID}-${value}`} isSelected={isSelected}>\n            {value}\n          </TickMarkValue>\n        );\n      }),\n\n    [parsedValuesArray, sliderUUID, fullSelectedValues],\n  );\n\n  const PureTickMArksValues = useMemo(\n    () => <TickMarksContainer data-testid=\"slider-tick-marks-values\">{TickMarksLabels}</TickMarksContainer>,\n    [TickMarksLabels],\n  );\n\n  return PureTickMArksValues;\n};\n\nconst TickMarkValue = styled.div`\n  min-height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  overflow: visible;\n  transform: translateX(-100%);\n  width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nconst TickMarksContainer = styled.div`\n  display: flex;\n  justify-content: space-between;\n  // this next property-value rever the sanitize.css value\n  overflow-wrap: normal;\n`;\n\nexport default TickMarks;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACab;AAZV,SAAgB,YAAY,eAAe;AAC3C,SAAS,QAAQ,gCAAgC;AACjD,SAAS,qBAAqB;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,mBAAmB,oBAAoB,WAAW,IAAI,WAAW,aAAa;AAEtF,QAAM,kBAAkB;AAAA,IACtB,MACE,kBAAkB,IAAI,CAAC,UAAU;AAC/B,YAAM,aAAa,mBAAmB,UAAU,CAAC,gBAAgB,gBAAgB,KAAK,KAAK;AAC3F,aACE,oBAAC,iBAA6C,YAC3C,mBADiB,GAAG,cAAc,OAErC;AAAA,IAEJ,CAAC;AAAA,IAEH,CAAC,mBAAmB,YAAY,kBAAkB;AAAA,EACpD;AAEA,QAAM,sBAAsB;AAAA,IAC1B,MAAM,oBAAC,sBAAmB,eAAY,4BAA4B,2BAAgB;AAAA,IAClF,CAAC,eAAe;AAAA,EAClB;AAEA,SAAO;AACT;AAEA,MAAM,gBAAgB,OAAO;AAAA,gBACb,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,WAG5D,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,WACzD,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG1G,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,IAAO,0BAAQ;",
   "names": []
 }

package/dist/esm/components/Track.js

@@ -3,9 +3,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { getTrackBackground } from "react-range";
 import { styled, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-import TickMarks from "./TickMarks";
-import TickMarksValues from "./TickMarksValues";
-import { SliderContext } from "./context";
+import TickMarks from "./TickMarks.js";
+import TickMarksValues from "./TickMarksValues.js";
+import { SliderContext } from "./context.js";
 const Track = ({ children, props }) => {
   const { disabled, minValue, maxValue, rangeValues, withTickMarks, withTickMarksValues, withTwoHandles } = useContext(SliderContext);
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/esm/components/Track.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Track.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable react/prop-types */\nimport React, { useContext } from 'react';\nimport { getTrackBackground } from 'react-range';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport TickMarks from './TickMarks';\nimport TickMarksValues from './TickMarksValues';\nimport { SliderContext } from './context';\n\nconst Track = ({ children, props }) => {\n  const { disabled, minValue, maxValue, rangeValues, withTickMarks, withTickMarksValues, withTwoHandles } =\n    useContext(SliderContext);\n\n  return (\n    <>\n      <TrackStyled\n        {...props} // This is needed because it's received from the library\n        disabled={disabled}\n        minValue={minValue}\n        maxValue={maxValue}\n        rangeValues={rangeValues}\n        withTwoHandles={withTwoHandles}\n      >\n        {children}\n        {withTickMarks && !disabled && <TickMarks />}\n      </TrackStyled>\n      {withTickMarksValues && <TickMarksValues />}\n    </>\n  );\n};\n\nconst TrackStyled = styled.div`\n  position: relative;\n  height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  width: 100%;\n  min-width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxl)};\n  border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  background: ${(props) =>\n    props.disabled\n      ? props.theme.colors.neutral[100]\n      : getTrackBackground({\n          values: props.rangeValues,\n          colors: props.withTwoHandles\n            ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n            : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n          min: props.minValue,\n          max: props.maxValue,\n        })};\n`;\n\nexport default Track;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACcnB,mBAUmC,KATjC,YADF;AAZJ,SAAgB,kBAAkB;AAClC,SAAS,0BAA0B;AACnC,SAAS,QAAQ,gCAAgC;AACjD,OAAO,eAAe;AACtB,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAE9B,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM,MAAM;AACrC,QAAM,EAAE,UAAU,UAAU,UAAU,aAAa,eAAe,qBAAqB,eAAe,IACpG,WAAW,aAAa;AAE1B,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,iBAAiB,CAAC,YAAY,oBAAC,aAAU;AAAA;AAAA;AAAA,IAC5C;AAAA,IACC,uBAAuB,oBAAC,mBAAgB;AAAA,KAC3C;AAEJ;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA,YAEf,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,eAEtD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,mBACrD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,gBAC5D,CAAC,UACb,MAAM,WACF,MAAM,MAAM,OAAO,QAAQ,OAC3B,mBAAmB;AAAA,EACjB,QAAQ,MAAM;AAAA,EACd,QAAQ,MAAM,iBACV,CAAC,MAAM,MAAM,OAAO,QAAQ,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,MAAM,OAAO,QAAQ,IAAI,IAChG,CAAC,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,MAAM,OAAO,QAAQ,IAAI;AAAA,EACnE,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AACb,CAAC;AAAA;AAGT,IAAO,gBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable react/prop-types */\nimport React, { useContext } from 'react';\nimport { getTrackBackground } from 'react-range';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport TickMarks from './TickMarks.js';\nimport TickMarksValues from './TickMarksValues.js';\nimport { SliderContext } from './context.js';\n\nconst Track = ({ children, props }) => {\n  const { disabled, minValue, maxValue, rangeValues, withTickMarks, withTickMarksValues, withTwoHandles } =\n    useContext(SliderContext);\n\n  return (\n    <>\n      <TrackStyled\n        {...props} // This is needed because it's received from the library\n        disabled={disabled}\n        minValue={minValue}\n        maxValue={maxValue}\n        rangeValues={rangeValues}\n        withTwoHandles={withTwoHandles}\n      >\n        {children}\n        {withTickMarks && !disabled && <TickMarks />}\n      </TrackStyled>\n      {withTickMarksValues && <TickMarksValues />}\n    </>\n  );\n};\n\nconst TrackStyled = styled.div`\n  position: relative;\n  height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  width: 100%;\n  min-width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxl)};\n  border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  background: ${(props) =>\n    props.disabled\n      ? props.theme.colors.neutral[100]\n      : getTrackBackground({\n          values: props.rangeValues,\n          colors: props.withTwoHandles\n            ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n            : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n          min: props.minValue,\n          max: props.maxValue,\n        })};\n`;\n\nexport default Track;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACcnB,mBAUmC,KATjC,YADF;AAZJ,SAAgB,kBAAkB;AAClC,SAAS,0BAA0B;AACnC,SAAS,QAAQ,gCAAgC;AACjD,OAAO,eAAe;AACtB,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAE9B,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM,MAAM;AACrC,QAAM,EAAE,UAAU,UAAU,UAAU,aAAa,eAAe,qBAAqB,eAAe,IACpG,WAAW,aAAa;AAE1B,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,iBAAiB,CAAC,YAAY,oBAAC,aAAU;AAAA;AAAA;AAAA,IAC5C;AAAA,IACC,uBAAuB,oBAAC,mBAAgB;AAAA,KAC3C;AAEJ;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA,YAEf,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,eAEtD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,mBACrD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,gBAC5D,CAAC,UACb,MAAM,WACF,MAAM,MAAM,OAAO,QAAQ,GAAG,IAC9B,mBAAmB;AAAA,EACjB,QAAQ,MAAM;AAAA,EACd,QAAQ,MAAM,iBACV,CAAC,MAAM,MAAM,OAAO,QAAQ,GAAG,GAAG,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,IAChG,CAAC,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACnE,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AACb,CAAC;AAAA;AAGT,IAAO,gBAAQ;",
   "names": []
 }

package/dist/esm/components/styled.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport { styled } from '@elliemae/ds-system';\nimport { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { TooltipContainer } from '@elliemae/ds-tooltip';\n\nexport const ThumbStyled = styled.div`\n  height: 20px;\n  width: 20px;\n  top: 0;\n  background-color: ${(props) =>\n    props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n  border-radius: 10px;\n  border: 1px solid ${(props) => (props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400])};\n\n  :focus {\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n    outline: unset;\n  }\n\n  :hover {\n    background-color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[100] : theme.colors.brand[200])};\n  }\n`;\n\nexport const TooltipContainerStyled = styled(TooltipContainer)`\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  top: -35px;\n  width: max-content;\n  left: 50%;\n  transform: translateX(-50%);\n  visibility: ${({ isDragged, isHovered }) => (isDragged || isHovered ? 'visible' : 'hidden')};\n`;\n// TODO: didn't work with DSTooltip, see how to improve\nexport const TooltipArrow = styled.div`\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 20px;\n  color: white;\n  border-left: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;\n  border-right: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;\n\n  border-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid\n    ${(props) => props.theme.colors.neutral['000']};\n`;\n\nexport const LabelWrapper = styled.div`\n  padding: 0 8px;\n  max-width: 100%;\n  line-height: 1;\n  height: 12px;\n  width: ${(props) => `${props.width || 0}px`};\n`;\n\nexport const LabelText = styled.span`\n  color: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const ValueText = styled.span`\n  color: ${({ disabled, theme }) => theme.colors.neutral[disabled ? 500 : 800]};\n`;\n\nexport const StyledRangeWrapper = styled.div`\n  min-height: 28px;\n  margin: 0 16px;\n  display: grid;\n  grid-template-rows: 28px auto;\n  align-items: center;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,cAAc;AACvB,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAE1B,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIZ,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,sBAE5D,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,wBAGxF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKpC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIrG,MAAM,yBAAyB,OAAO,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,YAAY,YAAY;AAAA;AAG7E,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMb,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,uBACxD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,qBAE3D,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,MACxE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGrC,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKxB,CAAC,UAAU,GAAG,MAAM,SAAS;AAAA;AAGjC,MAAM,YAAY,OAAO;AAAA,WACrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1C,MAAM,YAAY,OAAO;AAAA,WACrB,CAAC,EAAE,UAAU,MAAM,MAAM,MAAM,OAAO,QAAQ,WAAW,MAAM;AAAA;AAGnE,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,cAAc;AACvB,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAE1B,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIZ,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,sBAEjE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA,wBAG3F,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKvC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAIxG,MAAM,yBAAyB,OAAO,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS7C,CAAC,EAAE,WAAW,UAAU,MAAO,aAAa,YAAY,YAAY;AAAA;AAG7E,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMb,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,uBACxD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,qBAE3D,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,MACxE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG1C,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKxB,CAAC,UAAU,GAAG,MAAM,SAAS;AAAA;AAGjC,MAAM,YAAY,OAAO;AAAA,WACrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG7C,MAAM,YAAY,OAAO;AAAA,WACrB,CAAC,EAAE,UAAU,MAAM,MAAM,MAAM,OAAO,QAAQ,WAAW,MAAM,GAAG;AAAA;AAGtE,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/components/utils.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/utils.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { isEmpty } from '@elliemae/ds-utilities';\n\nexport const conformedLabel = (\n  rangeValues,\n  label = '',\n  labelWithValue = false,\n  withTwoHandles = false,\n  customTickMarksValues = [],\n  step = 1,\n  minValue = 0,\n) => {\n  const msg = label.trim();\n  let value = '';\n  if (!isEmpty(customTickMarksValues) && labelWithValue && label) {\n    const firstValue = customTickMarksValues[(rangeValues[0] - minValue) / step];\n    const secondValue = customTickMarksValues[(rangeValues[1] - minValue) / step];\n    value = `${firstValue || rangeValues[0].toFixed(1)} ${\n      withTwoHandles ? `, ${secondValue || rangeValues[1].toFixed(1)}` : ''\n    } `;\n  } else if (labelWithValue && label) {\n    value = `${rangeValues[0].toFixed(1)} ${withTwoHandles ? `, ${rangeValues[1]?.toFixed(1)}` : ''} `;\n  }\n  value = value.trim();\n\n  return [msg, value];\n};\n\nexport const conformedThumbLabel = (rangeValues, customTickMarksValues = [], index = 0, step = 1, minValue = 0) => {\n  let msg = `Value: `;\n  if (!isEmpty(customTickMarksValues)) {\n    const foundValue = customTickMarksValues[(rangeValues[index] - minValue) / step];\n    msg += `${foundValue || rangeValues[index].toFixed(1)}`;\n  } else {\n    msg += `${rangeValues[index].toFixed(1)}`;\n  }\n\n  return msg;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAe;AAEjB,MAAM,iBAAiB,CAC5B,aACA,QAAQ,IACR,iBAAiB,OACjB,iBAAiB,OACjB,wBAAwB,CAAC,GACzB,OAAO,GACP,WAAW,MACR;AACH,QAAM,MAAM,MAAM,KAAK;AACvB,MAAI,QAAQ;AACZ,MAAI,CAAC,QAAQ,qBAAqB,KAAK,kBAAkB,OAAO;AAC9D,UAAM,aAAa,uBAAuB,YAAY,KAAK,YAAY;AACvE,UAAM,cAAc,uBAAuB,YAAY,KAAK,YAAY;AACxE,YAAQ,GAAG,cAAc,YAAY,GAAG,QAAQ,CAAC,KAC/C,iBAAiB,KAAK,eAAe,YAAY,GAAG,QAAQ,CAAC,MAAM;AAAA,EAEvE,WAAW,kBAAkB,OAAO;AAClC,YAAQ,GAAG,YAAY,GAAG,QAAQ,CAAC,KAAK,iBAAiB,KAAK,YAAY,IAAI,QAAQ,CAAC,MAAM;AAAA,EAC/F;AACA,UAAQ,MAAM,KAAK;AAEnB,SAAO,CAAC,KAAK,KAAK;AACpB;AAEO,MAAM,sBAAsB,CAAC,aAAa,wBAAwB,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,MAAM;AACjH,MAAI,MAAM;AACV,MAAI,CAAC,QAAQ,qBAAqB,GAAG;AACnC,UAAM,aAAa,uBAAuB,YAAY,SAAS,YAAY;AAC3E,WAAO,GAAG,cAAc,YAAY,OAAO,QAAQ,CAAC;AAAA,EACtD,OAAO;AACL,WAAO,GAAG,YAAY,OAAO,QAAQ,CAAC;AAAA,EACxC;AAEA,SAAO;AACT;",
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAe;AAEjB,MAAM,iBAAiB,CAC5B,aACA,QAAQ,IACR,iBAAiB,OACjB,iBAAiB,OACjB,wBAAwB,CAAC,GACzB,OAAO,GACP,WAAW,MACR;AACH,QAAM,MAAM,MAAM,KAAK;AACvB,MAAI,QAAQ;AACZ,MAAI,CAAC,QAAQ,qBAAqB,KAAK,kBAAkB,OAAO;AAC9D,UAAM,aAAa,uBAAuB,YAAY,CAAC,IAAI,YAAY,IAAI;AAC3E,UAAM,cAAc,uBAAuB,YAAY,CAAC,IAAI,YAAY,IAAI;AAC5E,YAAQ,GAAG,cAAc,YAAY,CAAC,EAAE,QAAQ,CAAC,KAC/C,iBAAiB,KAAK,eAAe,YAAY,CAAC,EAAE,QAAQ,CAAC,MAAM;AAAA,EAEvE,WAAW,kBAAkB,OAAO;AAClC,YAAQ,GAAG,YAAY,CAAC,EAAE,QAAQ,CAAC,KAAK,iBAAiB,KAAK,YAAY,CAAC,GAAG,QAAQ,CAAC,MAAM;AAAA,EAC/F;AACA,UAAQ,MAAM,KAAK;AAEnB,SAAO,CAAC,KAAK,KAAK;AACpB;AAEO,MAAM,sBAAsB,CAAC,aAAa,wBAAwB,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,MAAM;AACjH,MAAI,MAAM;AACV,MAAI,CAAC,QAAQ,qBAAqB,GAAG;AACnC,UAAM,aAAa,uBAAuB,YAAY,KAAK,IAAI,YAAY,IAAI;AAC/E,WAAO,GAAG,cAAc,YAAY,KAAK,EAAE,QAAQ,CAAC;AAAA,EACtD,OAAO;AACL,WAAO,GAAG,YAAY,KAAK,EAAE,QAAQ,CAAC;AAAA,EACxC;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { default as default2 } from "./DSSlider";
-export * from "./DSSlider";
+import { default as default2 } from "./DSSlider.js";
+export * from "./DSSlider.js";
 export {
   default2 as default
 };

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default } from './DSSlider';\nexport * from './DSSlider';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default } from './DSSlider.js';\nexport * from './DSSlider.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAAA,gBAAe;AACxB,cAAc;",
   "names": ["default"]
 }

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/prop-types.js

@@ -16,20 +16,33 @@ const defaultProps = {
   customTickMarksValues: []
 };
 const sliderPropTypes = {
+  /** 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 {

package/dist/esm/prop-types.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/prop-types.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport const defaultProps = {\n  containerProps: {},\n  disabled: false,\n  label: '',\n  labelWithValue: false,\n  minValue: 0,\n  maxValue: 100,\n  step: 5,\n  onChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  withTwoHandles: false,\n  customTickMarksValues: [],\n};\n\nexport const sliderPropTypes = {\n  /** props to inject to slider wrapper */\n  containerProps: PropTypes.shape({}).description('props to inject to slider wrapper'),\n  /** disable slider */\n  disabled: PropTypes.bool.description('disable slider'),\n  /** label for slider */\n  label: PropTypes.string.description('label for slider'),\n  /** if the label comes with value attached for slider or not */\n  labelWithValue: PropTypes.bool.description('if the label comes with value attached for slider or not'),\n  /** min value for slider */\n  minValue: PropTypes.number.description('min value for slider'),\n  /** max value for slider */\n  maxValue: PropTypes.number.description('max value for slider'),\n  /** steps of values from min to max */\n  step: PropTypes.number.description('steps of values from min to max'),\n  /** change handler */\n  onChange: PropTypes.func.description('change handler'),\n  /** add tick marks between steps */\n  withTickMarks: PropTypes.bool.description('add tick marks between steps'),\n  /** add step value to tickmark */\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark'),\n  /** add two handles */\n  withTwoHandles: PropTypes.bool.description('add two handles'),\n  /** change manually tickmark values */\n  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description(\n    'change manually tickmark values',\n  ),\n  /** z index for thumb */\n  zIndex: PropTypes.number.description('z index for thumb'),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAEnB,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,uBAAuB,CAAC;AAC1B;AAEO,MAAM,kBAAkB;AAAA,EAE7B,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,mCAAmC;AAAA,EAEnF,UAAU,UAAU,KAAK,YAAY,gBAAgB;AAAA,EAErD,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA,EAEtD,gBAAgB,UAAU,KAAK,YAAY,0DAA0D;AAAA,EAErG,UAAU,UAAU,OAAO,YAAY,sBAAsB;AAAA,EAE7D,UAAU,UAAU,OAAO,YAAY,sBAAsB;AAAA,EAE7D,MAAM,UAAU,OAAO,YAAY,iCAAiC;AAAA,EAEpE,UAAU,UAAU,KAAK,YAAY,gBAAgB;AAAA,EAErD,eAAe,UAAU,KAAK,YAAY,8BAA8B;AAAA,EAExE,qBAAqB,UAAU,KAAK,YAAY,4BAA4B;AAAA,EAE5E,gBAAgB,UAAU,KAAK,YAAY,iBAAiB;AAAA,EAE5D,uBAAuB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EAAE;AAAA,IAClG;AAAA,EACF;AAAA,EAEA,QAAQ,UAAU,OAAO,YAAY,mBAAmB;AAC1D;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAEnB,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,uBAAuB,CAAC;AAC1B;AAEO,MAAM,kBAAkB;AAAA;AAAA,EAE7B,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,mCAAmC;AAAA;AAAA,EAEnF,UAAU,UAAU,KAAK,YAAY,gBAAgB;AAAA;AAAA,EAErD,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA,EAEtD,gBAAgB,UAAU,KAAK,YAAY,0DAA0D;AAAA;AAAA,EAErG,UAAU,UAAU,OAAO,YAAY,sBAAsB;AAAA;AAAA,EAE7D,UAAU,UAAU,OAAO,YAAY,sBAAsB;AAAA;AAAA,EAE7D,MAAM,UAAU,OAAO,YAAY,iCAAiC;AAAA;AAAA,EAEpE,UAAU,UAAU,KAAK,YAAY,gBAAgB;AAAA;AAAA,EAErD,eAAe,UAAU,KAAK,YAAY,8BAA8B;AAAA;AAAA,EAExE,qBAAqB,UAAU,KAAK,YAAY,4BAA4B;AAAA;AAAA,EAE5E,gBAAgB,UAAU,KAAK,YAAY,iBAAiB;AAAA;AAAA,EAE5D,uBAAuB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EAAE;AAAA,IAClG;AAAA,EACF;AAAA;AAAA,EAEA,QAAQ,UAAU,OAAO,YAAY,mBAAmB;AAC1D;",
   "names": []
 }

package/dist/types/DSSlider.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const DSSlider: {
     (props: any): JSX.Element;
     defaultProps: {
@@ -15,22 +16,22 @@ declare const DSSlider: {
         customTickMarksValues: never[];
     };
     propTypes: {
-        containerProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        disabled: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        label: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        labelWithValue: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        minValue: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        maxValue: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        step: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        onChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        withTickMarks: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        withTickMarksValues: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        withTwoHandles: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        customTickMarksValues: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        zIndex: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        containerProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        disabled: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        label: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        labelWithValue: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        minValue: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        maxValue: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        step: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        onChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        withTickMarks: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        withTickMarksValues: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        withTwoHandles: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        customTickMarksValues: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        zIndex: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     };
     displayName: string;
 };
-declare const DSSliderWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<any>;
+declare const DSSliderWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<any>;
 export { DSSlider, DSSliderWithSchema };
 export default DSSlider;

package/dist/types/components/SliderImp.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const SliderImp: (props: any) => JSX.Element;
 export default SliderImp;

package/dist/types/components/Thumb.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const Thumb: {
     ({ index, props, isDragged }: {
         index: any;

package/dist/types/components/TickMarks.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const TickMarks: () => JSX.Element;
 export default TickMarks;

package/dist/types/components/TickMarksValues.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const TickMarks: () => JSX.Element;
 export default TickMarks;

package/dist/types/components/Track.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const Track: ({ children, props }: {
     children: any;
     props: any;

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './DSSlider';
-export * from './DSSlider';
+export { default } from './DSSlider.js';
+export * from './DSSlider.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-slider",
-  "version": "3.16.0",
+  "version": "3.16.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Slider",
   "files": [
@@ -76,17 +76,17 @@
   },
   "dependencies": {
     "prop-types": "~15.8.1",
-    "react-range": "~1.8.12",
+    "react-range": "~1.8.14",
     "uuid": "~8.3.2",
-    "@elliemae/ds-grid": "3.16.0",
-    "@elliemae/ds-props-helpers": "3.16.0",
-    "@elliemae/ds-system": "3.16.0",
-    "@elliemae/ds-tooltip": "3.16.0",
-    "@elliemae/ds-truncated-tooltip-text": "3.16.0",
-    "@elliemae/ds-utilities": "3.16.0"
+    "@elliemae/ds-grid": "3.16.1",
+    "@elliemae/ds-props-helpers": "3.16.1",
+    "@elliemae/ds-system": "3.16.1",
+    "@elliemae/ds-tooltip": "3.16.1",
+    "@elliemae/ds-truncated-tooltip-text": "3.16.1",
+    "@elliemae/ds-utilities": "3.16.1"
   },
   "devDependencies": {
-    "styled-components": "~5.3.6"
+    "styled-components": "~5.3.9"
   },
   "peerDependencies": {
     "react": "^17.0.2",