@elliemae/ds-legacy-slider 1.0.0-rc.1

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { PropTypes } from '@elliemae/ds-legacy-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').defaultValue({}),\n  /** disable slider */\n  disabled: PropTypes.bool.description('disable slider').defaultValue(false),\n  /** label for slider */\n  label: PropTypes.string.description('label for slider').defaultValue(''),\n  /** if the label comes with value attached for slider or not */\n  labelWithValue: PropTypes.bool\n    .description('if the label comes with value attached for slider or not')\n    .defaultValue(false),\n  /** min value for slider */\n  minValue: PropTypes.number.description('min value for slider').defaultValue(0),\n  /** max value for slider */\n  maxValue: PropTypes.number.description('max value for slider').defaultValue(100),\n  /** steps of values from min to max */\n  step: PropTypes.number.description('steps of values from min to max').defaultValue(5),\n  /** change handler */\n  onChange: PropTypes.func.description('change handler').defaultValue(() => {}),\n  /** add tick marks between steps */\n  withTickMarks: PropTypes.bool.description('add tick marks between steps').defaultValue(false),\n  /** add step value to tickmark */\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark').defaultValue(false),\n  /** add two handles */\n  withTwoHandles: PropTypes.bool.description('add two handles').defaultValue(false),\n  /** change manually tickmark values */\n  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Explicitly set tickmark values for custom tickmarks')\n    .defaultValue([]),\n  /** z index for thumb */\n  zIndex: PropTypes.number.description('z index for thumb'),\n};\nexport declare namespace DSSliderT {\n  export type CustomTickMarkValue = string | number;\n  export type RangeTuple = [number] | [number, number];\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    disabled: boolean;\n    label: string;\n    labelWithValue: boolean;\n    minValue: number;\n    maxValue: number;\n    step: number;\n    onChange: (newVal: RangeTuple) => void;\n    withTickMarks: boolean;\n    withTickMarksValues: boolean;\n    withTwoHandles: boolean;\n    customTickMarksValues: CustomTickMarkValue[];\n  }\n  export interface OptionalProps {\n    zIndex?: number;\n    controlledValue?: RangeTuple;\n  }\n  export interface RequiredProps {}\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      // Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      // XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      // Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      // XstyledProps,\n      RequiredProps {}\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAA0B;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,yCAAU,MAAM,CAAC,CAAC,EAAE,YAAY,mCAAmC,EAAE,aAAa,CAAC,CAAC;AAAA;AAAA,EAEpG,UAAU,yCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA;AAAA,EAEzE,OAAO,yCAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,EAAE;AAAA;AAAA,EAEvE,gBAAgB,yCAAU,KACvB,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA;AAAA,EAErB,UAAU,yCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA;AAAA,EAE7E,UAAU,yCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA;AAAA,EAE/E,MAAM,yCAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA;AAAA,EAEpF,UAAU,yCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA;AAAA,EAE5E,eAAe,yCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA;AAAA,EAE5F,qBAAqB,yCAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA;AAAA,EAEhG,gBAAgB,yCAAU,KAAK,YAAY,iBAAiB,EAAE,aAAa,KAAK;AAAA;AAAA,EAEhF,uBAAuB,yCAAU,QAAQ,yCAAU,UAAU,CAAC,yCAAU,QAAQ,yCAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA;AAAA,EAElB,QAAQ,yCAAU,OAAO,YAAY,mBAAmB;AAC1D;",
+  "names": []
+}

package/dist/esm/DSSlider.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { describe } from "@elliemae/ds-legacy-props-helpers";
+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;
+DSSlider.displayName = "DSSlider";
+const DSSliderWithSchema = describe(DSSlider);
+DSSliderWithSchema.propTypes = sliderPropTypes;
+var DSSlider_default = DSSlider;
+export {
+  DSSlider,
+  DSSliderWithSchema,
+  DSSlider_default as default
+};
+//# sourceMappingURL=DSSlider.js.map

package/dist/esm/DSSlider.js.map

@@ -0,0 +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-legacy-props-helpers';\nimport SliderImp from './components/SliderImp.js';\nimport { defaultProps, sliderPropTypes, type DSSliderT } from './prop-types.js';\n\nconst DSSlider = (props: DSSliderT.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;ACKsB;AAJ7C,SAAS,gBAAgB;AACzB,OAAO,eAAe;AACtB,SAAS,cAAc,uBAAuC;AAE9D,MAAM,WAAW,CAAC,UAA2B,oBAAC,aAAW,GAAG,OAAO;AAEnE,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

@@ -0,0 +1,151 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { v4 as uuidv4 } from "uuid";
+import { Range } from "react-range";
+import { usePrevious, useControlledUncontrolledState } from "@elliemae/ds-legacy-utilities";
+import { TooltipTextProvider } from "@elliemae/ds-legacy-truncated-tooltip-text";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { ThemeContext } from "@elliemae/ds-legacy-system";
+import Track from "./Track.js";
+import Thumb from "./Thumb.js";
+import { StyledRangeWrapper } from "./styled.js";
+import { SliderContext } from "./context.js";
+import { useOptionalCustomTickMarksValues } from "./useOptionalCustomTickMarksValues.js";
+import { useSelectedValuesArray } from "./useSelectedValuesArray.js";
+import { TooltipWithLabelAndValue } from "./TooltipWithLabelAndValue.js";
+const useResetInternalValueOnWithTwoHandlesChange = ({
+  withTwoHandles,
+  setRangeValues,
+  parsedMinValue,
+  parsedMaxValue
+}) => {
+  const prevWithTwoHandles = usePrevious(withTwoHandles);
+  React2.useEffect(() => {
+    if (!prevWithTwoHandles && withTwoHandles) {
+      setRangeValues([parsedMinValue, parsedMaxValue]);
+    } else if (prevWithTwoHandles && !withTwoHandles) {
+      setRangeValues([parsedMinValue]);
+    }
+  }, [withTwoHandles]);
+};
+const SliderImp = (props) => {
+  const {
+    containerProps,
+    disabled,
+    label,
+    labelWithValue,
+    onChange,
+    withTickMarks,
+    withTickMarksValues,
+    withTwoHandles,
+    customTickMarksValues,
+    zIndex,
+    controlledValue
+  } = props;
+  const ref = React2.useRef();
+  const sliderUUID = React2.useMemo(() => uuidv4(), []);
+  const { parsedMinValue, parsedMaxValue, parsedStep, parsedValuesArray } = useOptionalCustomTickMarksValues(props);
+  const [rangeValues, setRangeValues] = useControlledUncontrolledState({
+    defaultState: withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue],
+    ...controlledValue !== void 0 && { controlledState: controlledValue }
+    // due to a strange interaction with useResetInternalValueOnWithTwoHandlesChange and particularly with usePrevious
+    // if we use the "onChange" to notify the parent component of the change, every time the setRangeValues is invoked
+    //   this will break "first render default value" due to useResetInternalValueOnWithTwoHandlesChange,
+    //      since usePrevious only work if no extra-render happen,
+    //      during the first render will triggering an `onChange` with "resetted rangeValues", effectively breaking the "first render default value"
+    //   all of this is extremely brittle, this component needs to be re-coded from scratch, but short term, we can't use onChange here
+    // onChange,
+  });
+  const [fullSelectedValues] = useSelectedValuesArray({ parsedValuesArray, rangeValues, customTickMarksValues });
+  useResetInternalValueOnWithTwoHandlesChange({
+    withTwoHandles,
+    setRangeValues,
+    parsedMinValue,
+    parsedMaxValue
+  });
+  const theme = React2.useContext(ThemeContext);
+  return /* @__PURE__ */ jsx(TooltipTextProvider, { children: /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsx(
+    Grid,
+    {
+      width: "100%",
+      style: { maxWidth: "100%" },
+      containerProps,
+      "data-testid": "slider",
+      alignItems: "center",
+      rows: ["auto", "auto"],
+      children: /* @__PURE__ */ jsxs(
+        SliderContext.Provider,
+        {
+          value: {
+            disabled,
+            sliderUUID,
+            label,
+            labelWithValue,
+            minValue: parsedMinValue,
+            maxValue: parsedMaxValue,
+            step: parsedStep,
+            parsedValuesArray,
+            withTickMarks,
+            withTickMarksValues,
+            withTwoHandles,
+            customTickMarksValues,
+            rangeValues,
+            fullSelectedValues,
+            zIndex: zIndex ?? theme.zIndex.tooltip
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              TooltipWithLabelAndValue,
+              {
+                containerRef: ref,
+                rangeValues,
+                label,
+                labelWithValue,
+                withTwoHandles,
+                customTickMarksValues,
+                parsedStep,
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsx(StyledRangeWrapper, { children: /* @__PURE__ */ jsx(
+              Range,
+              {
+                step: parsedStep,
+                min: parsedMinValue,
+                max: parsedMaxValue,
+                values: rangeValues,
+                disabled,
+                onChange: (values) => {
+                  if (withTwoHandles && values[0] === values[1])
+                    return;
+                  setRangeValues(values);
+                  onChange(values);
+                },
+                renderTrack: ({ props: trackProps, children }) => /* @__PURE__ */ jsx(Track, { props: trackProps, children }),
+                renderThumb: (renderArgs) => {
+                  const { index, props: thumbProps, isDragged } = renderArgs;
+                  return /* @__PURE__ */ jsx(
+                    Thumb,
+                    {
+                      props: thumbProps,
+                      isDragged,
+                      index
+                    },
+                    `${sliderUUID}-${thumbProps.key}`
+                  );
+                },
+                allowOverlap: false
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  ) }) });
+};
+var SliderImp_default = SliderImp;
+export {
+  SliderImp_default as default
+};
+//# sourceMappingURL=SliderImp.js.map

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

@@ -0,0 +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 max-statements */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { Range } from 'react-range';\nimport { usePrevious, useControlledUncontrolledState } from '@elliemae/ds-legacy-utilities';\nimport { TooltipTextProvider } from '@elliemae/ds-legacy-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { ThemeContext } from '@elliemae/ds-legacy-system';\nimport Track from './Track.js';\nimport Thumb from './Thumb.js';\nimport { StyledRangeWrapper } from './styled.js';\nimport { SliderContext } from './context.js';\nimport type { DSSliderT } from '../prop-types.js';\nimport { useOptionalCustomTickMarksValues } from './useOptionalCustomTickMarksValues.js';\nimport { useSelectedValuesArray } from './useSelectedValuesArray.js';\nimport { TooltipWithLabelAndValue } from './TooltipWithLabelAndValue.js';\n\n// the intention is to only invoke this when the \"withTwoHandles\" change from true to false or viceversa\n// the current implementation is not working as intended, but changing this is a bigger change outside the scope of this PR.\n// this is specifically triggering an extra time after the first render,\n//   forcing the value to start from the min value or  [min, max] value\nconst useResetInternalValueOnWithTwoHandlesChange = ({\n  withTwoHandles,\n  setRangeValues,\n  parsedMinValue,\n  parsedMaxValue,\n}: {\n  withTwoHandles: boolean;\n  setRangeValues: (newVal: DSSliderT.RangeTuple) => void;\n  parsedMinValue: number;\n  parsedMaxValue: number;\n}) => {\n  const prevWithTwoHandles = usePrevious(withTwoHandles);\n  React.useEffect(() => {\n    if (!prevWithTwoHandles && withTwoHandles) {\n      setRangeValues([parsedMinValue, parsedMaxValue]);\n    } else if (prevWithTwoHandles && !withTwoHandles) {\n      setRangeValues([parsedMinValue]);\n    }\n    // this is legacy code, we can't change this to avoid breaking changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [withTwoHandles]);\n};\n\nconst SliderImp = (props: DSSliderT.InternalProps): JSX.Element => {\n  const {\n    containerProps,\n    disabled,\n    label,\n    labelWithValue,\n    onChange,\n    withTickMarks,\n    withTickMarksValues,\n    withTwoHandles,\n    customTickMarksValues,\n    zIndex,\n    controlledValue,\n  } = props;\n  const ref = React.useRef() as React.MutableRefObject<HTMLDivElement>;\n  const sliderUUID = React.useMemo(() => uuidv4(), []);\n\n  const { parsedMinValue, parsedMaxValue, parsedStep, parsedValuesArray } = useOptionalCustomTickMarksValues(props);\n\n  const [rangeValues, setRangeValues] = useControlledUncontrolledState<DSSliderT.RangeTuple>({\n    defaultState: withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue],\n    ...(controlledValue !== undefined && { controlledState: controlledValue }),\n    // due to a strange interaction with useResetInternalValueOnWithTwoHandlesChange and particularly with usePrevious\n    // if we use the \"onChange\" to notify the parent component of the change, every time the setRangeValues is invoked\n    //   this will break \"first render default value\" due to useResetInternalValueOnWithTwoHandlesChange,\n    //      since usePrevious only work if no extra-render happen,\n    //      during the first render will triggering an `onChange` with \"resetted rangeValues\", effectively breaking the \"first render default value\"\n    //   all of this is extremely brittle, this component needs to be re-coded from scratch, but short term, we can't use onChange here\n    // onChange,\n  });\n\n  //  this is used to change the text color of the tickmarks values\n  const [fullSelectedValues] = useSelectedValuesArray({ parsedValuesArray, rangeValues, customTickMarksValues });\n\n  // (hystorically) for some reason we have chosen to\n  //    not notify the parent component of the change when we reset the value due to the \"withTwoHandles\" change\n  //   if useControlledUncontrolledState receives onChange, it will notify the parent component of the change...\n  useResetInternalValueOnWithTwoHandlesChange({\n    withTwoHandles,\n    setRangeValues,\n    parsedMinValue,\n    parsedMaxValue,\n  });\n\n  const theme = React.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            <TooltipWithLabelAndValue\n              containerRef={ref}\n              rangeValues={rangeValues}\n              label={label}\n              labelWithValue={labelWithValue}\n              withTwoHandles={withTwoHandles}\n              customTickMarksValues={customTickMarksValues}\n              parsedStep={parsedStep}\n              disabled={disabled}\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 as DSSliderT.RangeTuple);\n                  onChange(values as DSSliderT.RangeTuple);\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\nexport default SliderImp;\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/esm/components/Thumb.js

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useState } from "react";
+import PropTypes from "prop-types";
+import { DSTooltipV3 } from "@elliemae/ds-legacy-tooltip";
+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 (
+    // ...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 = {
+  index: PropTypes.number,
+  props: PropTypes.shape({
+    style: PropTypes.shape({}).isRequired
+  }).isRequired,
+  isDragged: PropTypes.bool
+};
+var Thumb_default = Thumb;
+export {
+  Thumb_default as default
+};
+//# sourceMappingURL=Thumb.js.map

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

@@ -0,0 +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-legacy-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

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

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

@@ -0,0 +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-legacy-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

@@ -0,0 +1,38 @@
+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-legacy-system";
+import { SliderContext } from "./context.js";
+const TickMarks = () => {
+  const { parsedValuesArray, fullSelectedValues, sliderUUID } = useContext(SliderContext);
+  const TickMarksLabels = useMemo(
+    () => parsedValuesArray.map((value) => {
+      const isSelected = fullSelectedValues.findIndex((selectedVal) => selectedVal === value) >= 0;
+      return /* @__PURE__ */ jsx(TickMarkValue, { isSelected, children: value }, `${sliderUUID}-${value}`);
+    }),
+    [parsedValuesArray, sliderUUID, fullSelectedValues]
+  );
+  const PureTickMArksValues = useMemo(
+    () => /* @__PURE__ */ jsx(TickMarksContainer, { "data-testid": "slider-tick-marks-values", children: TickMarksLabels }),
+    [TickMarksLabels]
+  );
+  return PureTickMArksValues;
+};
+const TickMarkValue = styled.div`
+  min-height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};
+  overflow: visible;
+  transform: translateX(-100%);
+  width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};
+  color: ${(props) => props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500]};
+`;
+const TickMarksContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  // this next property-value rever the sanitize.css value
+  overflow-wrap: normal;
+`;
+var TickMarksValues_default = TickMarks;
+export {
+  TickMarksValues_default as default
+};
+//# sourceMappingURL=TickMarksValues.js.map

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

@@ -0,0 +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-legacy-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/TooltipWithLabelAndValue.js

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import DSTruncatedTooltipText from "@elliemae/ds-legacy-truncated-tooltip-text";
+import { LabelWrapper, LabelText, ValueText } from "./styled.js";
+import { conformedLabel } from "./utils.js";
+const useWidthForLabel = ({ ref }) => {
+  const [width, setWidth] = React2.useState(0);
+  const resizeHandler = () => {
+    setWidth(0);
+    setWidth(ref.current?.clientWidth);
+  };
+  React2.useEffect(() => {
+    window.addEventListener("resize", resizeHandler);
+    return () => window.removeEventListener("resize", resizeHandler);
+  });
+  React2.useEffect(() => {
+    setWidth(ref.current?.clientWidth);
+  }, [ref.current?.clientWidth]);
+  return { ref, width };
+};
+const TooltipWithLabelAndValue = (props) => {
+  const {
+    containerRef,
+    rangeValues,
+    label,
+    labelWithValue,
+    withTwoHandles,
+    customTickMarksValues,
+    parsedStep,
+    disabled
+  } = props;
+  const { width } = useWidthForLabel({ ref: containerRef });
+  const [finalLabelText, finalValueText] = React2.useMemo(
+    () => conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep),
+    [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep]
+  );
+  if (!finalLabelText)
+    return null;
+  return /* @__PURE__ */ jsx(LabelWrapper, { width, children: /* @__PURE__ */ jsx(
+    DSTruncatedTooltipText,
+    {
+      value: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(LabelText, { children: finalLabelText }),
+        finalLabelText && " ",
+        /* @__PURE__ */ jsx(ValueText, { disabled, children: finalValueText })
+      ] })
+    }
+  ) });
+};
+export {
+  TooltipWithLabelAndValue
+};
+//# sourceMappingURL=TooltipWithLabelAndValue.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/TooltipWithLabelAndValue.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport DSTruncatedTooltipText from '@elliemae/ds-legacy-truncated-tooltip-text';\nimport { LabelWrapper, LabelText, ValueText } from './styled.js';\nimport { conformedLabel } from './utils.js';\nimport type { DSSliderT } from '../prop-types.js';\n\nconst useWidthForLabel = ({ ref }: { ref: React.MutableRefObject<HTMLDivElement> }) => {\n  const [width, setWidth] = React.useState(0);\n  const resizeHandler = () => {\n    setWidth(0);\n    setWidth(ref.current?.clientWidth);\n  };\n  React.useEffect(() => {\n    window.addEventListener('resize', resizeHandler);\n    return () => window.removeEventListener('resize', resizeHandler);\n  });\n  React.useEffect(() => {\n    setWidth(ref.current?.clientWidth);\n    // this is legacy code, we can't change this to avoid breaking changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref.current?.clientWidth]);\n  return { ref, width };\n};\n\nexport const TooltipWithLabelAndValue = (props: {\n  containerRef: React.MutableRefObject<HTMLDivElement>;\n  rangeValues: DSSliderT.RangeTuple;\n  label: string;\n  labelWithValue: boolean;\n  withTwoHandles: boolean;\n  customTickMarksValues: DSSliderT.CustomTickMarkValue[];\n  parsedStep: number;\n  disabled: boolean;\n}) => {\n  const {\n    containerRef,\n    rangeValues,\n    label,\n    labelWithValue,\n    withTwoHandles,\n    customTickMarksValues,\n    parsedStep,\n    disabled,\n  } = props;\n  const { width } = useWidthForLabel({ ref: containerRef });\n\n  const [finalLabelText, finalValueText] = React.useMemo(\n    () => conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep),\n    [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep],\n  );\n\n  if (!finalLabelText) return null;\n  return (\n    <LabelWrapper width={width}>\n      <DSTruncatedTooltipText\n        value={\n          <>\n            <LabelText>{finalLabelText}</LabelText>\n            {finalLabelText && ' '}\n            <ValueText disabled={disabled}>{finalValueText}</ValueText>\n          </>\n        }\n      />\n    </LabelWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwDb,mBACE,KADF;AAxDV,OAAOA,YAAW;AAClB,OAAO,4BAA4B;AACnC,SAAS,cAAc,WAAW,iBAAiB;AACnD,SAAS,sBAAsB;AAG/B,MAAM,mBAAmB,CAAC,EAAE,IAAI,MAAuD;AACrF,QAAM,CAAC,OAAO,QAAQ,IAAIA,OAAM,SAAS,CAAC;AAC1C,QAAM,gBAAgB,MAAM;AAC1B,aAAS,CAAC;AACV,aAAS,IAAI,SAAS,WAAW;AAAA,EACnC;AACA,EAAAA,OAAM,UAAU,MAAM;AACpB,WAAO,iBAAiB,UAAU,aAAa;AAC/C,WAAO,MAAM,OAAO,oBAAoB,UAAU,aAAa;AAAA,EACjE,CAAC;AACD,EAAAA,OAAM,UAAU,MAAM;AACpB,aAAS,IAAI,SAAS,WAAW;AAAA,EAGnC,GAAG,CAAC,IAAI,SAAS,WAAW,CAAC;AAC7B,SAAO,EAAE,KAAK,MAAM;AACtB;AAEO,MAAM,2BAA2B,CAAC,UASnC;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,KAAK,aAAa,CAAC;AAExD,QAAM,CAAC,gBAAgB,cAAc,IAAIA,OAAM;AAAA,IAC7C,MAAM,eAAe,aAAa,OAAO,gBAAgB,gBAAgB,uBAAuB,UAAU;AAAA,IAC1G,CAAC,aAAa,OAAO,gBAAgB,gBAAgB,uBAAuB,UAAU;AAAA,EACxF;AAEA,MAAI,CAAC;AAAgB,WAAO;AAC5B,SACE,oBAAC,gBAAa,OACZ;AAAA,IAAC;AAAA;AAAA,MACC,OACE,iCACE;AAAA,4BAAC,aAAW,0BAAe;AAAA,QAC1B,kBAAkB;AAAA,QACnB,oBAAC,aAAU,UAAqB,0BAAe;AAAA,SACjD;AAAA;AAAA,EAEJ,GACF;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/components/Track.js

@@ -0,0 +1,47 @@
+import * as React from "react";
+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-legacy-system";
+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: [
+    /* @__PURE__ */ jsxs(
+      TrackStyled,
+      {
+        ...props,
+        disabled,
+        minValue,
+        maxValue,
+        rangeValues,
+        withTwoHandles,
+        children: [
+          children,
+          withTickMarks && !disabled && /* @__PURE__ */ jsx(TickMarks, {})
+        ]
+      }
+    ),
+    withTickMarksValues && /* @__PURE__ */ jsx(TickMarksValues, {})
+  ] });
+};
+const TrackStyled = styled.div`
+  position: relative;
+  height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};
+  width: 100%;
+  min-width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxl)};
+  border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};
+  background: ${(props) => props.disabled ? props.theme.colors.neutral[100] : getTrackBackground({
+  values: props.rangeValues,
+  colors: props.withTwoHandles ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]] : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],
+  min: props.minValue,
+  max: props.maxValue
+})};
+`;
+var Track_default = Track;
+export {
+  Track_default as default
+};
+//# sourceMappingURL=Track.js.map

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

@@ -0,0 +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-legacy-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/context.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/context.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\nexport const SliderContext = React.createContext();\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAEX,MAAM,gBAAgBA,OAAM,cAAc;",
+  "names": ["React"]
+}

package/dist/esm/components/styled.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { styled } from "@elliemae/ds-legacy-system";
+import { __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-legacy-system";
+import { TooltipContainer } from "@elliemae/ds-legacy-tooltip";
+const ThumbStyled = styled.div`
+  height: 20px;
+  width: 20px;
+  top: 0;
+  background-color: ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral["000"]};
+  border-radius: 10px;
+  border: 1px solid ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};
+
+  :focus {
+    border: 1px solid ${(props) => props.theme.colors.brand[600]};
+    outline: unset;
+  }
+
+  :hover {
+    background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[100] : theme.colors.brand[200]};
+  }
+`;
+const TooltipContainerStyled = styled(TooltipContainer)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  top: -35px;
+  width: max-content;
+  left: 50%;
+  transform: translateX(-50%);
+  visibility: ${({ isDragged, isHovered }) => isDragged || isHovered ? "visible" : "hidden"};
+`;
+const TooltipArrow = styled.div`
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 20px;
+  color: white;
+  border-left: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;
+  border-right: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid transparent;
+
+  border-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 2.5) solid
+    ${(props) => props.theme.colors.neutral["000"]};
+`;
+const LabelWrapper = styled.div`
+  padding: 0 8px;
+  max-width: 100%;
+  line-height: 1;
+  height: 12px;
+  width: ${(props) => `${props.width || 0}px`};
+`;
+const LabelText = styled.span`
+  color: ${(props) => props.theme.colors.neutral[600]};
+`;
+const ValueText = styled.span`
+  color: ${({ disabled, theme }) => theme.colors.neutral[disabled ? 500 : 800]};
+`;
+const StyledRangeWrapper = styled.div`
+  min-height: 28px;
+  margin: 0 16px;
+  display: grid;
+  grid-template-rows: 28px auto;
+  align-items: center;
+`;
+export {
+  LabelText,
+  LabelWrapper,
+  StyledRangeWrapper,
+  ThumbStyled,
+  TooltipArrow,
+  TooltipContainerStyled,
+  ValueText
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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-legacy-system';\nimport { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-legacy-system';\nimport { TooltipContainer } from '@elliemae/ds-legacy-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,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": []
+}