@elliemae/ds-slider 2.2.0-alpha.3 → 2.2.0-next.2

package/cjs/components/TickMarks.js

@@ -1,39 +1,16 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var TickMarks_exports = {};
-__export(TickMarks_exports, {
-  default: () => TickMarks_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_system = __toESM(require("@elliemae/ds-system"));
-var import_context = __toESM(require("./context"));
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var context = require('./context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
 const TickMarks = () => {
   const {
     minValue,
@@ -42,46 +19,28 @@ const TickMarks = () => {
     step,
     withTwoHandles,
     zIndex
-  } = (0, import_react.useContext)(import_context.SliderContext);
+  } = React.useContext(context.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__ */ import_react.default.createElement(Dot, {
+    dots.push( /*#__PURE__*/_jsx__default["default"](Dot, {
       "data-testid": "slider-dot",
-      isActive,
-      key: index
-    }));
+      isActive: isActive
+    }, index));
   }
-  return /* @__PURE__ */ import_react.default.createElement(DotsContainer, {
+
+  return /*#__PURE__*/_jsx__default["default"](DotsContainer, {
     "data-testid": "slider-tick-marks",
-    zIndex
-  }, dots);
+    zIndex: zIndex
+  }, void 0, dots);
 };
-const Dot = import_styled_components.default.div`
-  &:after {
-    content: '';
-    background: ${(props) => props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400]};
-    border-radius: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)};
-    display: block;
-    position: relative;
-    width: 2px;
-    height: 2px;
-  }
-`;
-const DotsContainer = import_styled_components.default.div`
-  padding: 0
-    calc(${(props) => (0, import_ds_system.__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;
-module.exports = __toCommonJS(TickMarks_exports);
-//# sourceMappingURL=TickMarks.js.map
+
+const Dot = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-15z2sh4-0"
+})(["&:after{content:'';background:", ";border-radius:", ";display:block;position:relative;width:2px;height:2px;}"], props => props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs));
+const DotsContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-15z2sh4-1"
+})(["padding:0 calc(", " * 0.5);align-items:center;display:flex;justify-content:space-between;pointer-events:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:", ";"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.zIndex - 1);
+
+module.exports = TickMarks;

package/cjs/components/TickMarksValues.js

@@ -1,64 +1,43 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var TickMarksValues_exports = {};
-__export(TickMarksValues_exports, {
-  default: () => TickMarksValues_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_system = __toESM(require("@elliemae/ds-system"));
-var import_context = __toESM(require("./context"));
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var context = require('./context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
 const TickMarks = () => {
-  const { parsedValuesArray, fullSelectedValues, sliderUUID } = (0, import_react.useContext)(import_context.SliderContext);
-  const TickMarksLabels = (0, import_react.useMemo)(() => parsedValuesArray.map((value) => {
-    const isSelected = fullSelectedValues.findIndex((selectedVal) => selectedVal === value) >= 0;
-    return /* @__PURE__ */ import_react.default.createElement(TickMarkValue, {
-      key: `${sliderUUID}-${value}`,
-      isSelected
-    }, value);
+  var _TickMarksContainer;
+
+  const {
+    parsedValuesArray,
+    fullSelectedValues,
+    sliderUUID
+  } = React.useContext(context.SliderContext);
+  const TickMarksLabels = React.useMemo(() => parsedValuesArray.map(value => {
+    const isSelected = fullSelectedValues.findIndex(selectedVal => selectedVal === value) >= 0;
+    return /*#__PURE__*/_jsx__default["default"](TickMarkValue, {
+      isSelected: isSelected
+    }, "".concat(sliderUUID, "-").concat(value), value);
   }), [parsedValuesArray, sliderUUID, fullSelectedValues]);
-  const PureTickMArksValues = (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement(TickMarksContainer, {
+  const PureTickMArksValues = React.useMemo(() => _TickMarksContainer || (_TickMarksContainer = /*#__PURE__*/_jsx__default["default"](TickMarksContainer, {
     "data-testid": "slider-tick-marks-values"
-  }, TickMarksLabels), [TickMarksLabels]);
+  }, void 0, TickMarksLabels)), [TickMarksLabels]);
   return PureTickMArksValues;
 };
-const TickMarkValue = import_styled_components.default.div`
-  margin: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.s)} 0;
-  overflow: visible;
-  transform: translateX(-100%);
-  width: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)};
-  color: ${(props) => props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500]};
-`;
-const TickMarksContainer = import_styled_components.default.div`
-  display: flex;
-  justify-content: space-between;
-`;
-var TickMarksValues_default = TickMarks;
-module.exports = __toCommonJS(TickMarksValues_exports);
-//# sourceMappingURL=TickMarksValues.js.map
+
+const TickMarkValue = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-lq3yel-0"
+})(["margin:", " 0;overflow:visible;transform:translateX(-100%);width:", ";color:", ";"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500]);
+const TickMarksContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-lq3yel-1"
+})(["display:flex;justify-content:space-between;"]);
+
+module.exports = TickMarks;

package/cjs/components/Track.js

@@ -1,43 +1,38 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var Track_exports = {};
-__export(Track_exports, {
-  default: () => Track_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_range = __toESM(require("react-range"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_system = __toESM(require("@elliemae/ds-system"));
-var import_TickMarks = __toESM(require("./TickMarks"));
-var import_TickMarksValues = __toESM(require("./TickMarksValues"));
-var import_context = __toESM(require("./context"));
-const Track = ({ children, props }) => {
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var reactRange = require('react-range');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var TickMarks = require('./TickMarks.js');
+var TickMarksValues = require('./TickMarksValues.js');
+var context = require('./context.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _TickMarks, _TickMarksValues;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const Track = _ref => {
+  let {
+    children,
+    props
+  } = _ref;
   const {
     disabled,
     minValue,
@@ -46,33 +41,27 @@ const Track = ({ children, props }) => {
     withTickMarks,
     withTickMarksValues,
     withTwoHandles
-  } = (0, import_react.useContext)(import_context.SliderContext);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(TrackStyled, {
-    ...props,
-    disabled,
-    minValue,
-    maxValue,
-    rangeValues,
-    withTwoHandles
-  }, children, withTickMarks && !disabled && /* @__PURE__ */ import_react.default.createElement(import_TickMarks.default, null)), withTickMarksValues && /* @__PURE__ */ import_react.default.createElement(import_TickMarksValues.default, null));
+  } = React.useContext(context.SliderContext);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(TrackStyled, _objectSpread(_objectSpread({}, props), {}, {
+      // This is needed because it's received from the library
+      disabled: disabled,
+      minValue: minValue,
+      maxValue: maxValue,
+      rangeValues: rangeValues,
+      withTwoHandles: withTwoHandles,
+      children: [children, withTickMarks && !disabled && (_TickMarks || (_TickMarks = /*#__PURE__*/_jsx__default["default"](TickMarks, {})))]
+    })), withTickMarksValues && (_TickMarksValues || (_TickMarksValues = /*#__PURE__*/_jsx__default["default"](TickMarksValues, {})))]
+  });
 };
-const TrackStyled = import_styled_components.default.div`
-  position: relative;
-  height: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)};
-  width: 100%;
-  min-width: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxl)};
-  border-radius: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)};
-  background: ${(props) => props.disabled ? props.theme.colors.neutral[100] : (0, import_react_range.getTrackBackground)({
+
+const TrackStyled = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-13fbuj5-0"
+})(["position:relative;height:", ";width:100%;min-width:", ";border-radius:", ";background:", ";"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxl), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.disabled ? props.theme.colors.neutral[100] : reactRange.getTrackBackground({
   values: props.rangeValues,
-  colors: props.withTwoHandles ? [
-    props.theme.colors.neutral[100],
-    props.theme.colors.brand[600],
-    props.theme.colors.neutral[100]
-  ] : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],
+  colors: props.withTwoHandles ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]] : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],
   min: props.minValue,
   max: props.maxValue
-})};
-`;
-var Track_default = Track;
-module.exports = __toCommonJS(Track_exports);
-//# sourceMappingURL=Track.js.map
+}));
+
+module.exports = Track;

package/cjs/components/context.js

@@ -1,36 +1,13 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var context_exports = {};
-__export(context_exports, {
-  SliderContext: () => SliderContext
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-const SliderContext = import_react.default.createContext();
-module.exports = __toCommonJS(context_exports);
-//# sourceMappingURL=context.js.map
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const SliderContext = /*#__PURE__*/React__default["default"].createContext();
+
+exports.SliderContext = SliderContext;

package/cjs/components/styled.js

@@ -1,96 +1,61 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var styled_exports = {};
-__export(styled_exports, {
-  LabelText: () => LabelText,
-  LabelWrapper: () => LabelWrapper,
-  StyledRangeWrapper: () => StyledRangeWrapper,
-  ThumbStyled: () => ThumbStyled,
-  TooltipArrow: () => TooltipArrow,
-  TooltipContainerStyled: () => TooltipContainerStyled,
-  ValueText: () => ValueText
-});
-var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_system = __toESM(require("@elliemae/ds-system"));
-var import_ds_tooltip = __toESM(require("@elliemae/ds-tooltip"));
-const ThumbStyled = import_styled_components.default.div`
-  height: 20px;
-  width: 20px;
-  background-color: ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral["000"]};
-  border-radius: 10px;
-  border: 1px solid ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var dsTooltip = require('@elliemae/ds-tooltip');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  :focus {
-    border: 1px solid ${(props) => props.theme.colors.brand[600]};
-    outline: unset;
-  }
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-  :hover {
-    background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[100] : theme.colors.brand[200]};
-  }
-`;
-const TooltipContainerStyled = (0, import_styled_components.default)(import_ds_tooltip.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 = import_styled_components.default.div`
-  position: absolute;
-  width: 0;
-  height: 0;
-  top: 20px;
-  border-left: calc(${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)} * 2.5) solid transparent;
-  border-right: calc(${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)} * 2.5) solid transparent;
+/* eslint-disable indent */
+const ThumbStyled = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-24in0j-0"
+})(["height:20px;width:20px;background-color:", ";border-radius:10px;border:1px solid ", ";:focus{border:1px solid ", ";outline:unset;}:hover{background-color:", ";}"], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000'], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400], props => props.theme.colors.brand[600], _ref => {
+  let {
+    disabled,
+    theme
+  } = _ref;
+  return disabled ? theme.colors.neutral[100] : theme.colors.brand[200];
+});
+const TooltipContainerStyled = /*#__PURE__*/styled__default["default"](dsTooltip.TooltipContainer).withConfig({
+  componentId: "sc-24in0j-1"
+})(["position:relative;display:flex;align-items:center;flex-direction:column;top:-35px;width:max-content;left:50%;transform:translateX(-50%);visibility:", ";"], _ref2 => {
+  let {
+    isDragged,
+    isHovered
+  } = _ref2;
+  return isDragged || isHovered ? 'visible' : 'hidden';
+}); // TODO: didn't work with DSTooltip, see how to improve
+
+const TooltipArrow = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-24in0j-2"
+})(["position:absolute;width:0;height:0;top:20px;border-left:calc(", " * 2.5) solid transparent;border-right:calc(", " * 2.5) solid transparent;border-top:calc(", " * 2.5) solid ", ";"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => props.theme.colors.neutral[0]);
+const LabelWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-24in0j-3"
+})(["margin-bottom:", ";max-width:100%;width:", ";"], props => props.theme.space.xxs, props => "".concat(props.width || 0, "px"));
+const LabelText = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-24in0j-4"
+})(["color:", ";"], props => props.theme.colors.neutral[600]);
+const ValueText = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-24in0j-5"
+})(["color:", ";"], _ref3 => {
+  let {
+    disabled,
+    theme
+  } = _ref3;
+  return theme.colors.neutral[disabled ? 500 : 800];
+});
+const StyledRangeWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-24in0j-6"
+})(["min-height:28px;margin:0 10px;"]);
 
-  border-top: calc(${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)} * 2.5) solid
-    ${(props) => props.theme.colors.neutral[0]};
-`;
-const LabelWrapper = import_styled_components.default.div`
-  margin-bottom: ${(props) => props.theme.space.xxs};
-  max-width: 100%;
-  width: ${(props) => `${props.width || 0}px`};
-`;
-const LabelText = import_styled_components.default.span`
-  color: ${(props) => props.theme.colors.neutral[600]};
-`;
-const ValueText = import_styled_components.default.span`
-  color: ${({ disabled, theme }) => theme.colors.neutral[disabled ? 500 : 800]};
-`;
-const StyledRangeWrapper = import_styled_components.default.div`
-  min-height: 28px;
-  margin: 0 10px;
-`;
-module.exports = __toCommonJS(styled_exports);
-//# sourceMappingURL=styled.js.map
+exports.LabelText = LabelText;
+exports.LabelWrapper = LabelWrapper;
+exports.StyledRangeWrapper = StyledRangeWrapper;
+exports.ThumbStyled = ThumbStyled;
+exports.TooltipArrow = TooltipArrow;
+exports.TooltipContainerStyled = TooltipContainerStyled;
+exports.ValueText = ValueText;