@bonlineza/luxity-lib 2.30.0 → 2.30.2

package/ShoeSizeRangeSelector.js

@@ -0,0 +1,1281 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('styled-components')) :
+  typeof define === 'function' && define.amd ? define(['react', '@bonlineza/b-lib/functions', 'rc-slider', 'styled-components'], factory) :
+  (global = global || self, global.ShoeSizeRangeSelector = factory(global.React, global.function, global.rcSlider, global.styled));
+}(this, (function (React, functions, rcSlider, styled) { 'use strict';
+
+  var React__default = 'default' in React ? React['default'] : React;
+  var styled__default = 'default' in styled ? styled['default'] : styled;
+
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+
+    return target;
+  }
+
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+
+    var key, i;
+
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+
+    return target;
+  }
+
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
+
+  function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  }
+
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
+
+  function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+
+    var _s, _e;
+
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"] != null) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+
+    return _arr;
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  var theme = {
+    breakpoints: ['40em', '52em', '64em'],
+    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
+    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
+    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
+    letterSpacings: ['-0.5px', '0px', '+0.5px'],
+    radii: ['0px', '2px', '4px', '8px'],
+    borderRadius: '6px',
+    colors: {
+      primary: '#000',
+      base: '#4e4949',
+      baseLt: '#817c7c',
+      borderColor: '#d8d8d8',
+      ntrlMin: '#fff',
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '16px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
+    }
+  };
+
+  var themed = (function (Component) {
+    return /*#__PURE__*/React.forwardRef(function (props, ref) {
+      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+        theme: theme
+      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
+        ref: ref
+      })));
+    });
+  });
+
+  function _extends$1() {
+    _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends$1.apply(this, arguments);
+  }
+
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
+  }
+
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+    return _setPrototypeOf(o, p);
+  }
+
+  function _inheritsLoose(subClass, superClass) {
+    subClass.prototype = Object.create(superClass.prototype);
+    subClass.prototype.constructor = subClass;
+    _setPrototypeOf(subClass, superClass);
+  }
+
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
+
+  function _isNativeFunction(fn) {
+    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+  }
+
+  function _isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+
+    try {
+      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function _construct(Parent, args, Class) {
+    if (_isNativeReflectConstruct()) {
+      _construct = Reflect.construct.bind();
+    } else {
+      _construct = function _construct(Parent, args, Class) {
+        var a = [null];
+        a.push.apply(a, args);
+        var Constructor = Function.bind.apply(Parent, a);
+        var instance = new Constructor();
+        if (Class) _setPrototypeOf(instance, Class.prototype);
+        return instance;
+      };
+    }
+
+    return _construct.apply(null, arguments);
+  }
+
+  function _wrapNativeSuper(Class) {
+    var _cache = typeof Map === "function" ? new Map() : undefined;
+
+    _wrapNativeSuper = function _wrapNativeSuper(Class) {
+      if (Class === null || !_isNativeFunction(Class)) return Class;
+
+      if (typeof Class !== "function") {
+        throw new TypeError("Super expression must either be null or a function");
+      }
+
+      if (typeof _cache !== "undefined") {
+        if (_cache.has(Class)) return _cache.get(Class);
+
+        _cache.set(Class, Wrapper);
+      }
+
+      function Wrapper() {
+        return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+      }
+
+      Wrapper.prototype = Object.create(Class.prototype, {
+        constructor: {
+          value: Wrapper,
+          enumerable: false,
+          writable: true,
+          configurable: true
+        }
+      });
+      return _setPrototypeOf(Wrapper, Class);
+    };
+
+    return _wrapNativeSuper(Class);
+  }
+
+  // based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js
+
+  /**
+   * Parse errors.md and turn it into a simple hash of code: message
+   * @private
+   */
+  var ERRORS = {
+    "1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
+    "2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
+    "3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
+    "4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
+    "5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
+    "6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
+    "7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
+    "8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
+    "9": "Please provide a number of steps to the modularScale helper.\n\n",
+    "10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
+    "11": "Invalid value passed as base to modularScale, expected number or em string but got \"%s\"\n\n",
+    "12": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got \"%s\" instead.\n\n",
+    "13": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got \"%s\" instead.\n\n",
+    "14": "Passed invalid pixel value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
+    "15": "Passed invalid base value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
+    "16": "You must provide a template to this method.\n\n",
+    "17": "You passed an unsupported selector state to this method.\n\n",
+    "18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
+    "19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
+    "20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
+    "21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
+    "22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
+    "23": "fontFace expects a name of a font-family.\n\n",
+    "24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
+    "25": "fontFace expects localFonts to be an array.\n\n",
+    "26": "fontFace expects fileFormats to be an array.\n\n",
+    "27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
+    "28": "Please supply a filename to retinaImage() as the first argument.\n\n",
+    "29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
+    "30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
+    "31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
+    "32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
+    "33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
+    "34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
+    "35": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
+    "36": "Property must be a string value.\n\n",
+    "37": "Syntax Error at %s.\n\n",
+    "38": "Formula contains a function that needs parentheses at %s.\n\n",
+    "39": "Formula is missing closing parenthesis at %s.\n\n",
+    "40": "Formula has too many closing parentheses at %s.\n\n",
+    "41": "All values in a formula must have the same unit or be unitless.\n\n",
+    "42": "Please provide a number of steps to the modularScale helper.\n\n",
+    "43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
+    "44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
+    "45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
+    "46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
+    "47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
+    "48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
+    "49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
+    "50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
+    "51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
+    "52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
+    "53": "fontFace expects localFonts to be an array.\n\n",
+    "54": "fontFace expects fileFormats to be an array.\n\n",
+    "55": "fontFace expects a name of a font-family.\n\n",
+    "56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
+    "57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
+    "58": "Please supply a filename to retinaImage() as the first argument.\n\n",
+    "59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
+    "60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
+    "61": "Property must be a string value.\n\n",
+    "62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
+    "63": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
+    "64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
+    "65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
+    "66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
+    "67": "You must provide a template to this method.\n\n",
+    "68": "You passed an unsupported selector state to this method.\n\n",
+    "69": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got %s instead.\n\n",
+    "70": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got %s instead.\n\n",
+    "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
+    "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
+    "73": "Please provide a valid CSS variable.\n\n",
+    "74": "CSS variable not found.\n\n",
+    "75": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
+  };
+  /**
+   * super basic version of sprintf
+   * @private
+   */
+
+  function format() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var a = args[0];
+    var b = [];
+    var c;
+
+    for (c = 1; c < args.length; c += 1) {
+      b.push(args[c]);
+    }
+
+    b.forEach(function (d) {
+      a = a.replace(/%[a-z]/, d);
+    });
+    return a;
+  }
+  /**
+   * Create an error file out of errors.md for development and a simple web link to the full errors
+   * in production mode.
+   * @private
+   */
+
+
+  var PolishedError = /*#__PURE__*/function (_Error) {
+    _inheritsLoose(PolishedError, _Error);
+
+    function PolishedError(code) {
+      var _this;
+
+      if (process.env.NODE_ENV === 'production') {
+        _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
+      } else {
+        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+          args[_key2 - 1] = arguments[_key2];
+        }
+
+        _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
+      }
+
+      return _assertThisInitialized(_this);
+    }
+
+    return PolishedError;
+  }( /*#__PURE__*/_wrapNativeSuper(Error));
+
+  function colorToInt(color) {
+    return Math.round(color * 255);
+  }
+
+  function convertToInt(red, green, blue) {
+    return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
+  }
+
+  function hslToRgb(hue, saturation, lightness, convert) {
+    if (convert === void 0) {
+      convert = convertToInt;
+    }
+
+    if (saturation === 0) {
+      // achromatic
+      return convert(lightness, lightness, lightness);
+    } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
+
+
+    var huePrime = (hue % 360 + 360) % 360 / 60;
+    var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+    var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
+    var red = 0;
+    var green = 0;
+    var blue = 0;
+
+    if (huePrime >= 0 && huePrime < 1) {
+      red = chroma;
+      green = secondComponent;
+    } else if (huePrime >= 1 && huePrime < 2) {
+      red = secondComponent;
+      green = chroma;
+    } else if (huePrime >= 2 && huePrime < 3) {
+      green = chroma;
+      blue = secondComponent;
+    } else if (huePrime >= 3 && huePrime < 4) {
+      green = secondComponent;
+      blue = chroma;
+    } else if (huePrime >= 4 && huePrime < 5) {
+      red = secondComponent;
+      blue = chroma;
+    } else if (huePrime >= 5 && huePrime < 6) {
+      red = chroma;
+      blue = secondComponent;
+    }
+
+    var lightnessModification = lightness - chroma / 2;
+    var finalRed = red + lightnessModification;
+    var finalGreen = green + lightnessModification;
+    var finalBlue = blue + lightnessModification;
+    return convert(finalRed, finalGreen, finalBlue);
+  }
+
+  var namedColorMap = {
+    aliceblue: 'f0f8ff',
+    antiquewhite: 'faebd7',
+    aqua: '00ffff',
+    aquamarine: '7fffd4',
+    azure: 'f0ffff',
+    beige: 'f5f5dc',
+    bisque: 'ffe4c4',
+    black: '000',
+    blanchedalmond: 'ffebcd',
+    blue: '0000ff',
+    blueviolet: '8a2be2',
+    brown: 'a52a2a',
+    burlywood: 'deb887',
+    cadetblue: '5f9ea0',
+    chartreuse: '7fff00',
+    chocolate: 'd2691e',
+    coral: 'ff7f50',
+    cornflowerblue: '6495ed',
+    cornsilk: 'fff8dc',
+    crimson: 'dc143c',
+    cyan: '00ffff',
+    darkblue: '00008b',
+    darkcyan: '008b8b',
+    darkgoldenrod: 'b8860b',
+    darkgray: 'a9a9a9',
+    darkgreen: '006400',
+    darkgrey: 'a9a9a9',
+    darkkhaki: 'bdb76b',
+    darkmagenta: '8b008b',
+    darkolivegreen: '556b2f',
+    darkorange: 'ff8c00',
+    darkorchid: '9932cc',
+    darkred: '8b0000',
+    darksalmon: 'e9967a',
+    darkseagreen: '8fbc8f',
+    darkslateblue: '483d8b',
+    darkslategray: '2f4f4f',
+    darkslategrey: '2f4f4f',
+    darkturquoise: '00ced1',
+    darkviolet: '9400d3',
+    deeppink: 'ff1493',
+    deepskyblue: '00bfff',
+    dimgray: '696969',
+    dimgrey: '696969',
+    dodgerblue: '1e90ff',
+    firebrick: 'b22222',
+    floralwhite: 'fffaf0',
+    forestgreen: '228b22',
+    fuchsia: 'ff00ff',
+    gainsboro: 'dcdcdc',
+    ghostwhite: 'f8f8ff',
+    gold: 'ffd700',
+    goldenrod: 'daa520',
+    gray: '808080',
+    green: '008000',
+    greenyellow: 'adff2f',
+    grey: '808080',
+    honeydew: 'f0fff0',
+    hotpink: 'ff69b4',
+    indianred: 'cd5c5c',
+    indigo: '4b0082',
+    ivory: 'fffff0',
+    khaki: 'f0e68c',
+    lavender: 'e6e6fa',
+    lavenderblush: 'fff0f5',
+    lawngreen: '7cfc00',
+    lemonchiffon: 'fffacd',
+    lightblue: 'add8e6',
+    lightcoral: 'f08080',
+    lightcyan: 'e0ffff',
+    lightgoldenrodyellow: 'fafad2',
+    lightgray: 'd3d3d3',
+    lightgreen: '90ee90',
+    lightgrey: 'd3d3d3',
+    lightpink: 'ffb6c1',
+    lightsalmon: 'ffa07a',
+    lightseagreen: '20b2aa',
+    lightskyblue: '87cefa',
+    lightslategray: '789',
+    lightslategrey: '789',
+    lightsteelblue: 'b0c4de',
+    lightyellow: 'ffffe0',
+    lime: '0f0',
+    limegreen: '32cd32',
+    linen: 'faf0e6',
+    magenta: 'f0f',
+    maroon: '800000',
+    mediumaquamarine: '66cdaa',
+    mediumblue: '0000cd',
+    mediumorchid: 'ba55d3',
+    mediumpurple: '9370db',
+    mediumseagreen: '3cb371',
+    mediumslateblue: '7b68ee',
+    mediumspringgreen: '00fa9a',
+    mediumturquoise: '48d1cc',
+    mediumvioletred: 'c71585',
+    midnightblue: '191970',
+    mintcream: 'f5fffa',
+    mistyrose: 'ffe4e1',
+    moccasin: 'ffe4b5',
+    navajowhite: 'ffdead',
+    navy: '000080',
+    oldlace: 'fdf5e6',
+    olive: '808000',
+    olivedrab: '6b8e23',
+    orange: 'ffa500',
+    orangered: 'ff4500',
+    orchid: 'da70d6',
+    palegoldenrod: 'eee8aa',
+    palegreen: '98fb98',
+    paleturquoise: 'afeeee',
+    palevioletred: 'db7093',
+    papayawhip: 'ffefd5',
+    peachpuff: 'ffdab9',
+    peru: 'cd853f',
+    pink: 'ffc0cb',
+    plum: 'dda0dd',
+    powderblue: 'b0e0e6',
+    purple: '800080',
+    rebeccapurple: '639',
+    red: 'f00',
+    rosybrown: 'bc8f8f',
+    royalblue: '4169e1',
+    saddlebrown: '8b4513',
+    salmon: 'fa8072',
+    sandybrown: 'f4a460',
+    seagreen: '2e8b57',
+    seashell: 'fff5ee',
+    sienna: 'a0522d',
+    silver: 'c0c0c0',
+    skyblue: '87ceeb',
+    slateblue: '6a5acd',
+    slategray: '708090',
+    slategrey: '708090',
+    snow: 'fffafa',
+    springgreen: '00ff7f',
+    steelblue: '4682b4',
+    tan: 'd2b48c',
+    teal: '008080',
+    thistle: 'd8bfd8',
+    tomato: 'ff6347',
+    turquoise: '40e0d0',
+    violet: 'ee82ee',
+    wheat: 'f5deb3',
+    white: 'fff',
+    whitesmoke: 'f5f5f5',
+    yellow: 'ff0',
+    yellowgreen: '9acd32'
+  };
+  /**
+   * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
+   * @private
+   */
+
+  function nameToHex(color) {
+    if (typeof color !== 'string') return color;
+    var normalizedColorName = color.toLowerCase();
+    return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
+  }
+
+  var hexRegex = /^#[a-fA-F0-9]{6}$/;
+  var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
+  var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
+  var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
+  var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
+  var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+  var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+  var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+  /**
+   * Returns an RgbColor or RgbaColor object. This utility function is only useful
+   * if want to extract a color component. With the color util `toColorString` you
+   * can convert a RgbColor or RgbaColor object back to a string.
+   *
+   * @example
+   * // Assigns `{ red: 255, green: 0, blue: 0 }` to color1
+   * const color1 = parseToRgb('rgb(255, 0, 0)');
+   * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
+   * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
+   */
+
+  function parseToRgb(color) {
+    if (typeof color !== 'string') {
+      throw new PolishedError(3);
+    }
+
+    var normalizedColor = nameToHex(color);
+
+    if (normalizedColor.match(hexRegex)) {
+      return {
+        red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
+        green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
+        blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
+      };
+    }
+
+    if (normalizedColor.match(hexRgbaRegex)) {
+      var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
+      return {
+        red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
+        green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
+        blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
+        alpha: alpha
+      };
+    }
+
+    if (normalizedColor.match(reducedHexRegex)) {
+      return {
+        red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
+        green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
+        blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
+      };
+    }
+
+    if (normalizedColor.match(reducedRgbaHexRegex)) {
+      var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
+
+      return {
+        red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
+        green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
+        blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
+        alpha: _alpha
+      };
+    }
+
+    var rgbMatched = rgbRegex.exec(normalizedColor);
+
+    if (rgbMatched) {
+      return {
+        red: parseInt("" + rgbMatched[1], 10),
+        green: parseInt("" + rgbMatched[2], 10),
+        blue: parseInt("" + rgbMatched[3], 10)
+      };
+    }
+
+    var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
+
+    if (rgbaMatched) {
+      return {
+        red: parseInt("" + rgbaMatched[1], 10),
+        green: parseInt("" + rgbaMatched[2], 10),
+        blue: parseInt("" + rgbaMatched[3], 10),
+        alpha: parseFloat("" + rgbaMatched[4])
+      };
+    }
+
+    var hslMatched = hslRegex.exec(normalizedColor);
+
+    if (hslMatched) {
+      var hue = parseInt("" + hslMatched[1], 10);
+      var saturation = parseInt("" + hslMatched[2], 10) / 100;
+      var lightness = parseInt("" + hslMatched[3], 10) / 100;
+      var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
+      var hslRgbMatched = rgbRegex.exec(rgbColorString);
+
+      if (!hslRgbMatched) {
+        throw new PolishedError(4, normalizedColor, rgbColorString);
+      }
+
+      return {
+        red: parseInt("" + hslRgbMatched[1], 10),
+        green: parseInt("" + hslRgbMatched[2], 10),
+        blue: parseInt("" + hslRgbMatched[3], 10)
+      };
+    }
+
+    var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
+
+    if (hslaMatched) {
+      var _hue = parseInt("" + hslaMatched[1], 10);
+
+      var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
+
+      var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
+
+      var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
+
+      var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
+
+      if (!_hslRgbMatched) {
+        throw new PolishedError(4, normalizedColor, _rgbColorString);
+      }
+
+      return {
+        red: parseInt("" + _hslRgbMatched[1], 10),
+        green: parseInt("" + _hslRgbMatched[2], 10),
+        blue: parseInt("" + _hslRgbMatched[3], 10),
+        alpha: parseFloat("" + hslaMatched[4])
+      };
+    }
+
+    throw new PolishedError(5);
+  }
+
+  /**
+   * Reduces hex values if possible e.g. #ff8866 to #f86
+   * @private
+   */
+  var reduceHexValue = function reduceHexValue(value) {
+    if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
+      return "#" + value[1] + value[3] + value[5];
+    }
+
+    return value;
+  };
+
+  function numberToHex(value) {
+    var hex = value.toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  }
+
+  /**
+   * Returns a string value for the color. The returned result is the smallest possible hex notation.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: rgb(255, 205, 100),
+   *   background: rgb({ red: 255, green: 205, blue: 100 }),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${rgb(255, 205, 100)};
+   *   background: ${rgb({ red: 255, green: 205, blue: 100 })};
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "#ffcd64";
+   *   background: "#ffcd64";
+   * }
+   */
+  function rgb(value, green, blue) {
+    if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') {
+      return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
+    } else if (typeof value === 'object' && green === undefined && blue === undefined) {
+      return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
+    }
+
+    throw new PolishedError(6);
+  }
+
+  /**
+   * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
+   *
+   * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: rgba(255, 205, 100, 0.7),
+   *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
+   *   background: rgba(255, 205, 100, 1),
+   *   background: rgba('#ffffff', 0.4),
+   *   background: rgba('black', 0.7),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${rgba(255, 205, 100, 0.7)};
+   *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
+   *   background: ${rgba(255, 205, 100, 1)};
+   *   background: ${rgba('#ffffff', 0.4)};
+   *   background: ${rgba('black', 0.7)};
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "rgba(255,205,100,0.7)";
+   *   background: "rgba(255,205,100,0.7)";
+   *   background: "#ffcd64";
+   *   background: "rgba(255,255,255,0.4)";
+   *   background: "rgba(0,0,0,0.7)";
+   * }
+   */
+  function rgba(firstValue, secondValue, thirdValue, fourthValue) {
+    if (typeof firstValue === 'string' && typeof secondValue === 'number') {
+      var rgbValue = parseToRgb(firstValue);
+      return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
+    } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
+      return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
+    } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
+      return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
+    }
+
+    throw new PolishedError(7);
+  }
+
+  // Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
+  // eslint-disable-next-line no-unused-vars
+  // eslint-disable-next-line no-unused-vars
+  // eslint-disable-next-line no-redeclare
+  function curried(f, length, acc) {
+    return function fn() {
+      // eslint-disable-next-line prefer-rest-params
+      var combined = acc.concat(Array.prototype.slice.call(arguments));
+      return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
+    };
+  } // eslint-disable-next-line no-redeclare
+
+
+  function curry(f) {
+    // eslint-disable-line no-redeclare
+    return curried(f, f.length, []);
+  }
+
+  function guard(lowerBoundary, upperBoundary, value) {
+    return Math.max(lowerBoundary, Math.min(upperBoundary, value));
+  }
+
+  /**
+   * Decreases the opacity of a color. Its range for the amount is between 0 to 1.
+   *
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: transparentize(0.1, '#fff');
+   *   background: transparentize(0.2, 'hsl(0, 0%, 100%)'),
+   *   background: transparentize('0.5', 'rgba(255, 0, 0, 0.8)'),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${transparentize(0.1, '#fff')};
+   *   background: ${transparentize(0.2, 'hsl(0, 0%, 100%)')},
+   *   background: ${transparentize('0.5', 'rgba(255, 0, 0, 0.8)')},
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "rgba(255,255,255,0.9)";
+   *   background: "rgba(255,255,255,0.8)";
+   *   background: "rgba(255,0,0,0.3)";
+   * }
+   */
+
+  function transparentize(amount, color) {
+    if (color === 'transparent') return color;
+    var parsedColor = parseToRgb(color);
+    var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
+
+    var colorWithAlpha = _extends$1({}, parsedColor, {
+      alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
+    });
+
+    return rgba(colorWithAlpha);
+  } // prettier-ignore
+
+
+  var curriedTransparentize = /*#__PURE__*/curry
+  /* ::<number | string, string, string> */
+  (transparentize);
+
+  var _templateObject;
+  var baseSliderStyles = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .rc-slider {\n    position: relative;\n    height: 14px;\n    padding: 5px 0;\n    width: 100%;\n    border-radius: 6px;\n    touch-action: none;\n    box-sizing: border-box;\n  }\n  .rc-slider * {\n    box-sizing: border-box;\n  }\n  .rc-slider-rail {\n    position: absolute;\n    width: 100%;\n    background-color: #e9e9e9;\n    height: 4px;\n    border-radius: 6px;\n  }\n  .rc-slider-track {\n    position: absolute;\n    left: 0;\n    height: 4px;\n    border-radius: 6px;\n    background-color: #abe2fb;\n  }\n  .rc-slider-handle {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    cursor: pointer;\n    margin-top: -5px;\n    border-radius: 50%;\n    border: solid 2px #96dbfa;\n    background-color: #fff;\n    -ms-touch-action: pan-x;\n    touch-action: pan-x;\n  }\n  .rc-slider-handle:focus {\n    border-color: #57c5f7;\n    box-shadow: 0 0 0 5px #96dbfa;\n    outline: none;\n  }\n  .rc-slider-handle-click-focused:focus {\n    border-color: #96dbfa;\n    box-shadow: unset;\n  }\n  .rc-slider-handle:hover {\n    border-color: #57c5f7;\n  }\n  .rc-slider-handle:active {\n    border-color: #57c5f7;\n    box-shadow: 0 0 5px #57c5f7;\n    cursor: grabbing;\n  }\n  .rc-slider-mark {\n    position: absolute;\n    top: 18px;\n    left: 0;\n    width: 100%;\n    font-size: 12px;\n  }\n  .rc-slider-mark-text {\n    position: absolute;\n    display: inline-block;\n    vertical-align: middle;\n    text-align: center;\n    cursor: pointer;\n    color: #999;\n  }\n  .rc-slider-mark-text-active {\n    color: #666;\n  }\n  .rc-slider-step {\n    position: absolute;\n    width: 100%;\n    height: 4px;\n    background: transparent;\n  }\n  .rc-slider-dot {\n    position: absolute;\n    bottom: -2px;\n    margin-left: -4px;\n    width: 8px;\n    height: 8px;\n    border: 2px solid #e9e9e9;\n    background-color: #fff;\n    cursor: pointer;\n    border-radius: 50%;\n    vertical-align: middle;\n  }\n  .rc-slider-dot-active {\n    border-color: #96dbfa;\n  }\n  .rc-slider-dot-reverse {\n    margin-left: 0;\n    margin-right: -4px;\n  }\n  .rc-slider-disabled {\n    background-color: #e9e9e9;\n  }\n  .rc-slider-disabled .rc-slider-track {\n    background-color: #ccc;\n  }\n  .rc-slider-disabled .rc-slider-handle,\n  .rc-slider-disabled .rc-slider-dot {\n    border-color: #ccc;\n    box-shadow: none;\n    background-color: #fff;\n    cursor: not-allowed;\n  }\n  .rc-slider-disabled .rc-slider-mark-text,\n  .rc-slider-disabled .rc-slider-dot {\n    cursor: not-allowed !important;\n  }\n  .rc-slider-vertical {\n    width: 14px;\n    height: 100%;\n    padding: 0 5px;\n  }\n  .rc-slider-vertical .rc-slider-rail {\n    height: 100%;\n    width: 4px;\n  }\n  .rc-slider-vertical .rc-slider-track {\n    left: 5px;\n    bottom: 0;\n    width: 4px;\n  }\n  .rc-slider-vertical .rc-slider-handle {\n    margin-left: -5px;\n    -ms-touch-action: pan-y;\n    touch-action: pan-y;\n  }\n  .rc-slider-vertical .rc-slider-mark {\n    top: 0;\n    left: 18px;\n    height: 100%;\n  }\n  .rc-slider-vertical .rc-slider-step {\n    height: 100%;\n    width: 4px;\n  }\n  .rc-slider-vertical .rc-slider-dot {\n    left: 2px;\n    margin-bottom: -4px;\n  }\n  .rc-slider-vertical .rc-slider-dot:first-child {\n    margin-bottom: -4px;\n  }\n  .rc-slider-vertical .rc-slider-dot:last-child {\n    margin-bottom: -4px;\n  }\n  .rc-slider-tooltip-zoom-down-enter,\n  .rc-slider-tooltip-zoom-down-appear {\n    animation-duration: 0.3s;\n    animation-fill-mode: both;\n    display: block !important;\n    animation-play-state: paused;\n  }\n  .rc-slider-tooltip-zoom-down-leave {\n    animation-duration: 0.3s;\n    animation-fill-mode: both;\n    display: block !important;\n    animation-play-state: paused;\n  }\n  .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,\n  .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {\n    animation-name: rcSliderTooltipZoomDownIn;\n    animation-play-state: running;\n  }\n  .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {\n    animation-name: rcSliderTooltipZoomDownOut;\n    animation-play-state: running;\n  }\n  .rc-slider-tooltip-zoom-down-enter,\n  .rc-slider-tooltip-zoom-down-appear {\n    transform: scale(0, 0);\n    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n  }\n  .rc-slider-tooltip-zoom-down-leave {\n    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n  }\n  @keyframes rcSliderTooltipZoomDownIn {\n    0% {\n      opacity: 0;\n      transform-origin: 50% 100%;\n      transform: scale(0, 0);\n    }\n    100% {\n      transform-origin: 50% 100%;\n      transform: scale(1, 1);\n    }\n  }\n  @keyframes rcSliderTooltipZoomDownOut {\n    0% {\n      transform-origin: 50% 100%;\n      transform: scale(1, 1);\n    }\n    100% {\n      opacity: 0;\n      transform-origin: 50% 100%;\n      transform: scale(0, 0);\n    }\n  }\n  .rc-slider-tooltip {\n    position: absolute;\n    left: -9999px;\n    top: -9999px;\n    visibility: visible;\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n  .rc-slider-tooltip * {\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n  .rc-slider-tooltip-hidden {\n    display: none;\n  }\n  .rc-slider-tooltip-placement-top {\n    padding: 4px 0 8px 0;\n  }\n  .rc-slider-tooltip-inner {\n    padding: 6px 2px;\n    min-width: 24px;\n    height: 24px;\n    font-size: 12px;\n    line-height: 1;\n    color: #fff;\n    text-align: center;\n    text-decoration: none;\n    background-color: #6c6c6c;\n    border-radius: 6px;\n    box-shadow: 0 0 4px #d9d9d9;\n  }\n  .rc-slider-tooltip-arrow {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-color: transparent;\n    border-style: solid;\n  }\n  .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {\n    bottom: 4px;\n    left: 50%;\n    margin-left: -4px;\n    border-width: 4px 4px 0;\n    border-top-color: #6c6c6c;\n  }\n"])));
+
+  var _templateObject$1, _templateObject2, _templateObject3, _templateObject4;
+  var handleDimension = '14px';
+  var SliderContainer = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n  position: relative;\n  .rc-slider-handle {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  .rc-slider {\n    margin-bottom: ", ";\n    max-width: calc(100% - ", ");\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .rc-slider-track {\n    background-color: ", ";\n  }\n\n  .rc-slider-handle {\n    height: ", ";\n    width: ", ";\n    transition: border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;\n    &:hover,\n    &:focus {\n      border: ", ";\n      box-shadow: 0 0 0 5px\n        ", ";\n    }\n  }\n  ", "\n"])), baseSliderStyles, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.marginPaddings[6];
+  }, handleDimension, function (props) {
+    return props.theme.colors.primary;
+  }, handleDimension, handleDimension, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return curriedTransparentize(0.8, props.theme.colors.primary);
+  }, function (props) {
+    return getSliderMarkStyle(props);
+  });
+
+  var getSliderMarkStyle = function getSliderMarkStyle(_ref) {
+    var showMarks = _ref.showMarks,
+        primary = _ref.theme.colors.primary;
+    var visiblityStyle = showMarks ? styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""]))) : styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        .rc-slider-mark-text,\n        .rc-slider-dot {\n          visibility: hidden;\n        }\n      "])));
+    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    .rc-slider-mark-text {\n      color: ", ";\n    }\n\n    .rc-slider-dot {\n      border-color: ", ";\n      background-color: white;\n    }\n    ", "\n  "])), primary, primary, visiblityStyle);
+  };
+
+  var _templateObject$2;
+  var ToolTipWrapper = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: auto;\n  top: 20px;\n  transform: translateX(-50%);\n  width: 100px;\n  text-align: center;\n"])));
+
+  var _templateObject$3;
+  var Footer = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-end;\n"])));
+
+  var _excluded = ["dragging", "value", "offset", "index"],
+      _excluded2 = ["renderTitleSection", "marks", "defaultMinValue", "defaultMaxValue", "min", "max", "toolTipComponent", "renderFooterSection", "onChange", "children", "identifier", "showMarks"];
+
+  var _templateObject$4;
+  var debounceBuilder = functions.debounced(100);
+  var ChildrenWrapper = styled__default.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), function (props) {
+    return props.theme.marginPaddings[3];
+  });
+
+  var renderCustomHandle = function renderCustomHandle() {
+    var marks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var toolTipComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var handleProps = arguments.length > 2 ? arguments[2] : undefined;
+
+    var dragging = handleProps.dragging,
+        value = handleProps.value,
+        offset = handleProps.offset,
+        index = handleProps.index,
+        restHandleProps = _objectWithoutProperties(handleProps, _excluded);
+
+    var getToolTipProps = function getToolTipProps() {
+      var newProps = {}; // Ensures that Tooltip component does not get ref prop
+
+      Object.keys(handleProps).forEach(function (propName) {
+        if (propName !== 'ref') {
+          newProps[propName] = handleProps[propName];
+        }
+      });
+      return newProps;
+    };
+
+    var Tooltip = toolTipComponent;
+    return /*#__PURE__*/React__default.createElement(React.Fragment, {
+      key: index
+    }, /*#__PURE__*/React__default.createElement(rcSlider.Handle, _extends({
+      offset: offset,
+      value: value
+    }, restHandleProps, {
+      dragging: dragging.toString()
+    })), toolTipComponent && /*#__PURE__*/React__default.createElement(ToolTipWrapper, {
+      style: {
+        left: "".concat(offset, "%")
+      }
+    }, /*#__PURE__*/React__default.createElement(Tooltip, _extends({
+      marks: marks
+    }, getToolTipProps()))));
+  };
+  /** slider ui component for react */
+
+
+  var RangeSlider = function RangeSlider(_ref) {
+    var renderTitleSection = _ref.renderTitleSection,
+        marks = _ref.marks,
+        defaultMinValue = _ref.defaultMinValue,
+        defaultMaxValue = _ref.defaultMaxValue,
+        min = _ref.min,
+        max = _ref.max,
+        toolTipComponent = _ref.toolTipComponent,
+        renderFooterSection = _ref.renderFooterSection,
+        onChange = _ref.onChange,
+        childRenderer = _ref.children,
+        identifier = _ref.identifier,
+        showMarks = _ref.showMarks,
+        restProps = _objectWithoutProperties(_ref, _excluded2);
+
+    var _useState = React.useState(defaultMinValue),
+        _useState2 = _slicedToArray(_useState, 2),
+        currMinVal = _useState2[0],
+        setMinVal = _useState2[1];
+
+    var _useState3 = React.useState(defaultMaxValue),
+        _useState4 = _slicedToArray(_useState3, 2),
+        currMaxVal = _useState4[0],
+        setMaxVal = _useState4[1];
+    /*
+     *Description variable stores the time that the component renders
+     * the state is used to enforce reenders for the component since the date now
+     * is always changing
+     * */
+
+
+    var _useState5 = React.useState(0),
+        _useState6 = _slicedToArray(_useState5, 2),
+        seed = _useState6[0],
+        setSeed = _useState6[1];
+
+    var manuallyChangeMinValue = function manuallyChangeMinValue(val) {
+      setMinVal(val);
+      setSeed(Date.now());
+    };
+
+    var manuallyChangeMaxValue = function manuallyChangeMaxValue(val) {
+      setMaxVal(val);
+      setSeed(Date.now());
+    };
+
+    var prevMinVal = functions.usePrevious(currMinVal);
+    var prevMaxVal = functions.usePrevious(currMaxVal);
+    React.useEffect(function () {
+      manuallyChangeMinValue(min);
+      manuallyChangeMaxValue(max);
+    }, [min, max]);
+    React.useEffect(function () {
+      if (prevMinVal !== currMinVal || prevMaxVal !== currMaxVal) {
+        var value = {
+          min: currMinVal,
+          max: currMaxVal
+        };
+        debounceBuilder(function () {
+          return onChange(value);
+        });
+      }
+    }, [currMaxVal, currMinVal, onChange, prevMaxVal, prevMinVal]);
+    var actionsObj = {
+      manuallyChangeMinValue: manuallyChangeMinValue,
+      manuallyChangeMaxValue: manuallyChangeMaxValue,
+      currMinVal: currMinVal,
+      currMaxVal: currMaxVal,
+      defaultMinValue: defaultMinValue,
+      defaultMaxValue: defaultMaxValue
+    };
+    return /*#__PURE__*/React__default.createElement(SliderContainer, {
+      "data-qe-id": identifier,
+      showMarks: showMarks
+    }, renderTitleSection(actionsObj), childRenderer && /*#__PURE__*/React__default.createElement(ChildrenWrapper, null, typeof childRenderer === 'function' ? childRenderer(actionsObj) : childRenderer), /*#__PURE__*/React__default.createElement(rcSlider.Range, _extends({
+      seed: seed,
+      min: min,
+      max: max,
+      defaultValue: [defaultMinValue, defaultMaxValue],
+      onChange: function onChange(_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+            nextMin = _ref3[0],
+            nextMax = _ref3[1];
+
+        setMinVal(nextMin);
+        setMaxVal(nextMax);
+      },
+      value: [currMinVal, currMaxVal],
+      marks: marks,
+      step: functions.isObjectEmpty(marks) ? 1 : null,
+      handle: function handle(props) {
+        return renderCustomHandle(marks, toolTipComponent, props);
+      },
+      allowCross: false
+    }, restProps)), /*#__PURE__*/React__default.createElement(Footer, null, renderFooterSection(actionsObj)));
+  };
+
+  RangeSlider.defaultProps = {
+    renderTitleSection: function renderTitleSection() {
+      return false;
+    },
+    marks: {},
+    toolTipComponent: null,
+    renderFooterSection: function renderFooterSection() {
+      return false;
+    },
+    onChange: function onChange() {
+      return false;
+    },
+    children: null,
+    showMarks: false
+  };
+  var RangeSlider$1 = themed(RangeSlider);
+
+  var media = {
+    xs: '576px',
+    sm: '768px',
+    md: '992px',
+    lg: '1200px'
+  };
+
+  var _templateObject$5;
+  var ShoeSizeInputWrapper = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n\n  input[data-qe-id='masked-input-min'],\n  input[data-qe-id='masked-input-max'] {\n    flex-basis: 49%;\n    border: 1px solid ", ";\n    border-radius: 6px;\n    background-color: ", ";\n    padding: 10px;\n  }\n\n  @media (max-width: ", ") {\n    flex-direction: column;\n    input[data-qe-id='masked-input-min'] {\n      margin-bottom: 10px;\n    }\n    input[data-qe-id='masked-input-min'],\n    input[data-qe-id='masked-input-max'] {\n      flex-basis: 100%;\n    }\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.primary;
+  }, function (props) {
+    return props.theme.rareStepColors.ntrl40;
+  }, media.xs);
+
+  var debounceBuilder$1 = functions.debounced(50);
+  var shoeSizeType = {
+    Uk: 'Uk',
+    Eu: 'Eu',
+    Us: 'Us'
+  };
+
+  var getMaxShoeSize = function getMaxShoeSize(euShoeSizes, ukShoeSizes, type) {
+    var shoeSizes = ukShoeSizes;
+
+    if (type === (shoeSizeType === null || shoeSizeType === void 0 ? void 0 : shoeSizeType.Eu)) {
+      shoeSizes = euShoeSizes;
+    }
+
+    var sizes = shoeSizes.map(function (item) {
+      return parseFloat(item.size);
+    }); // Use the Math.max function to find the maximum size value
+
+    var maxSize = sizes.reduce(function (max, current) {
+      return Math.max(max, current);
+    }, -50);
+    return maxSize;
+  };
+  /** UI Slider with minimum and max input fields give the ability to
+   * select a shoe size range */
+
+
+  var ShoeSizeRangeSelector = function ShoeSizeRangeSelector(_ref) {
+    var onChange = _ref.onChange,
+        euShoeSizes = _ref.euShoeSizes,
+        ukShoeSizes = _ref.ukShoeSizes,
+        sizeType = _ref.sizeType;
+    var maxShoeSize = getMaxShoeSize(euShoeSizes, ukShoeSizes, sizeType);
+
+    var handleSlideChange = function handleSlideChange(value) {
+      var min_shoe_size = value.min,
+          max_shoe_size = value.max;
+      onChange({
+        min_shoe_size: min_shoe_size,
+        max_shoe_size: max_shoe_size
+      });
+    };
+
+    var handleMinShoeSizeChange = function handleMinShoeSizeChange(targetValue, currMaxVal, manuallyChangeMinValue) {
+      var value = parseInt(targetValue, 10);
+      value = Number.isNaN(value) ? 0 : value;
+      value = value > currMaxVal ? currMaxVal : value;
+      debounceBuilder$1(function () {
+        manuallyChangeMinValue(value);
+        onChange({
+          min_shoe_size: value,
+          max_shoe_size: currMaxVal
+        });
+      });
+    };
+
+    var handleMaxShoeSizeChange = function handleMaxShoeSizeChange(targetValue, currMinVal, manuallyChangeMaxValue) {
+      var value = parseInt(targetValue, 10);
+      value = Number.isNaN(value) ? 0 : value;
+      value = value < currMinVal ? currMinVal : value;
+      debounceBuilder$1(function () {
+        manuallyChangeMaxValue(value);
+        onChange({
+          max_shoe_size: value,
+          min_shoe_size: currMinVal
+        });
+      });
+    };
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "shoe-size-ranges"
+    }, /*#__PURE__*/React__default.createElement(RangeSlider$1, {
+      identifier: "shoe-size-range-slider",
+      max: maxShoeSize,
+      defaultMinValue: 1,
+      min: 1,
+      onChange: handleSlideChange,
+      defaultMaxValue: maxShoeSize,
+      title: "Shoe Size Ranges"
+    }, function (_ref2) {
+      var manuallyChangeMinValue = _ref2.manuallyChangeMinValue,
+          manuallyChangeMaxValue = _ref2.manuallyChangeMaxValue,
+          currMinVal = _ref2.currMinVal,
+          currMaxVal = _ref2.currMaxVal;
+      return /*#__PURE__*/React__default.createElement(ShoeSizeInputWrapper, null, /*#__PURE__*/React__default.createElement("input", {
+        "data-qe-id": "masked-input-min",
+        value: currMinVal,
+        onChange: function onChange(value) {
+          handleMinShoeSizeChange(value, currMaxVal, manuallyChangeMinValue);
+        }
+      }), /*#__PURE__*/React__default.createElement("input", {
+        "data-qe-id": "masked-input-max",
+        value: currMaxVal,
+        onChange: function onChange(value) {
+          handleMaxShoeSizeChange(value, currMinVal, manuallyChangeMaxValue);
+        }
+      }));
+    }));
+  };
+
+  ShoeSizeRangeSelector.defaultProps = {
+    onChange: function onChange() {
+      return false;
+    },
+    euShoeSizes: [],
+    ukShoeSizes: [],
+    sizeType: 'Uk'
+  };
+
+  return ShoeSizeRangeSelector;
+
+})));