@bonlineza/luxity-lib 2.39.6 → 2.39.8

package/PriceRangeSelector.js

@@ -1,1398 +1,1411 @@
-import React, { forwardRef, useState, useEffect, Fragment } from 'react';
-import { debounced, usePrevious, isObjectEmpty } from '@bonlineza/b-lib/functions';
-import { Range, Handle } from 'rc-slider';
-import styled, { ThemeProvider, css } from 'styled-components';
-
-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];
+(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.PriceRangeSelector = 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;
-  };
-  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 {};
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
 
-  var target = _objectWithoutPropertiesLoose(source, excluded);
+    var target = _objectWithoutPropertiesLoose(source, excluded);
 
-  var key, i;
+    var key, i;
 
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    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];
+      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 target;
   }
 
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
     }
-  }));
-}
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
+  function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  }
 
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
 
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
+  function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
-  var _s, _e;
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
 
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
+    var _s, _e;
 
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
     try {
-      if (!_n && _i["return"] != null) _i["return"]();
+      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 {
-      if (_d) throw _e;
+      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;
   }
 
-  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'
+  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 themed = (function (Component) {
-  return /*#__PURE__*/forwardRef(function (props, ref) {
-    return /*#__PURE__*/React.createElement(ThemeProvider, {
-      theme: theme
-    }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-      ref: ref
-    })));
+
+  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];
+  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];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
         }
       }
-    }
 
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
-}
+      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");
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
   }
 
-  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 _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 _inheritsLoose(subClass, superClass) {
+    subClass.prototype = Object.create(superClass.prototype);
+    subClass.prototype.constructor = subClass;
+    _setPrototypeOf(subClass, superClass);
   }
-}
-
-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;
+
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
     };
+    return _getPrototypeOf(o);
   }
 
-  return _construct.apply(null, arguments);
-}
+  function _isNativeFunction(fn) {
+    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+  }
 
-function _wrapNativeSuper(Class) {
-  var _cache = typeof Map === "function" ? new Map() : undefined;
+  function _isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
 
-  _wrapNativeSuper = function _wrapNativeSuper(Class) {
-    if (Class === null || !_isNativeFunction(Class)) return Class;
+    try {
+      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
 
-    if (typeof Class !== "function") {
-      throw new TypeError("Super expression must either be null or a function");
+  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;
+      };
     }
 
-    if (typeof _cache !== "undefined") {
-      if (_cache.has(Class)) return _cache.get(Class);
+    return _construct.apply(null, arguments);
+  }
 
-      _cache.set(Class, Wrapper);
-    }
+  function _wrapNativeSuper(Class) {
+    var _cache = typeof Map === "function" ? new Map() : undefined;
 
-    function Wrapper() {
-      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
-    }
+    _wrapNativeSuper = function _wrapNativeSuper(Class) {
+      if (Class === null || !_isNativeFunction(Class)) return Class;
 
-    Wrapper.prototype = Object.create(Class.prototype, {
-      constructor: {
-        value: Wrapper,
-        enumerable: false,
-        writable: true,
-        configurable: true
+      if (typeof Class !== "function") {
+        throw new TypeError("Super expression must either be null or a function");
       }
-    });
-    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];
+      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);
   }
 
-  var a = args[0];
-  var b = [];
-  var c;
+  // 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]);
+    }
 
-  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
+   */
 
-  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);
 
-var PolishedError = /*#__PURE__*/function (_Error) {
-  _inheritsLoose(PolishedError, _Error);
+    function PolishedError(code) {
+      var _this;
 
-  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];
+        }
 
-    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;
       }
 
-      _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
+      return _assertThisInitialized(_this);
     }
 
-    return _assertThisInitialized(_this);
+    return PolishedError;
+  }( /*#__PURE__*/_wrapNativeSuper(Error));
+
+  function colorToInt(color) {
+    return Math.round(color * 255);
   }
 
-  return PolishedError;
-}( /*#__PURE__*/_wrapNativeSuper(Error));
+  function convertToInt(red, green, blue) {
+    return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
+  }
 
-function colorToInt(color) {
-  return Math.round(color * 255);
-}
+  function hslToRgb(hue, saturation, lightness, convert) {
+    if (convert === void 0) {
+      convert = convertToInt;
+    }
 
-function convertToInt(red, green, blue) {
-  return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
-}
+    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;
+    }
 
-function hslToRgb(hue, saturation, lightness, convert) {
-  if (convert === void 0) {
-    convert = convertToInt;
+    var lightnessModification = lightness - chroma / 2;
+    var finalRed = red + lightnessModification;
+    var finalGreen = green + lightnessModification;
+    var finalBlue = blue + lightnessModification;
+    return convert(finalRed, finalGreen, finalBlue);
   }
 
-  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 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 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 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);
+    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(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(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(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));
+    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
-    };
-  }
+      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);
+    var rgbMatched = rgbRegex.exec(normalizedColor);
 
-  if (rgbMatched) {
-    return {
-      red: parseInt("" + rgbMatched[1], 10),
-      green: parseInt("" + rgbMatched[2], 10),
-      blue: parseInt("" + rgbMatched[3], 10)
-    };
-  }
+    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));
+    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])
-    };
-  }
+    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);
 
-  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 (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);
+      }
 
-    if (!hslRgbMatched) {
-      throw new PolishedError(4, normalizedColor, rgbColorString);
+      return {
+        red: parseInt("" + hslRgbMatched[1], 10),
+        green: parseInt("" + hslRgbMatched[2], 10),
+        blue: parseInt("" + hslRgbMatched[3], 10)
+      };
     }
 
-    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 hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
+      var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
 
-  if (hslaMatched) {
-    var _hue = parseInt("" + hslaMatched[1], 10);
+      var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
 
-    var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
+      var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
 
-    var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
+      var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
 
-    var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
+      if (!_hslRgbMatched) {
+        throw new PolishedError(4, normalizedColor, _rgbColorString);
+      }
 
-    var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
+      return {
+        red: parseInt("" + _hslRgbMatched[1], 10),
+        green: parseInt("" + _hslRgbMatched[2], 10),
+        blue: parseInt("" + _hslRgbMatched[3], 10),
+        alpha: parseFloat("" + hslaMatched[4])
+      };
+    }
 
-    if (!_hslRgbMatched) {
-      throw new PolishedError(4, normalizedColor, _rgbColorString);
+    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 {
-      red: parseInt("" + _hslRgbMatched[1], 10),
-      green: parseInt("" + _hslRgbMatched[2], 10),
-      blue: parseInt("" + _hslRgbMatched[3], 10),
-      alpha: parseFloat("" + hslaMatched[4])
-    };
+    return value;
+  };
+
+  function numberToHex(value) {
+    var hex = value.toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
   }
 
-  throw new PolishedError(5);
-}
+  /**
+   * 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));
+    }
 
-/**
- * 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];
+    throw new PolishedError(6);
   }
 
-  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));
+  /**
+   * 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, []);
   }
 
-  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 + ")";
+  function guard(lowerBoundary, upperBoundary, value) {
+    return Math.max(lowerBoundary, Math.min(upperBoundary, value));
   }
 
-  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);
+  /**
+   * 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);
   };
-} // 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)
+
+  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];
   });
 
-  return rgba(colorWithAlpha);
-} // prettier-ignore
-
-
-var curriedTransparentize = /*#__PURE__*/curry
-/* ::<number | string, string, string> */
-(transparentize);
-
-var _templateObject;
-var baseSliderStyles = 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.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 ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""]))) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        .rc-slider-mark-text,\n        .rc-slider-dot {\n          visibility: hidden;\n        }\n      "])));
-  return 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.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.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 = debounced(100);
-var ChildrenWrapper = styled.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];
+  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, "%")
       }
-    });
-    return newProps;
+    }, /*#__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 Tooltip = toolTipComponent;
-  return /*#__PURE__*/React.createElement(Fragment, {
-    key: index
-  }, /*#__PURE__*/React.createElement(Handle, _extends({
-    offset: offset,
-    value: value
-  }, restHandleProps, {
-    dragging: dragging.toString()
-  })), toolTipComponent && /*#__PURE__*/React.createElement(ToolTipWrapper, {
-    style: {
-      left: "".concat(offset, "%")
-    }
-  }, /*#__PURE__*/React.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 = useState(defaultMinValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      currMinVal = _useState2[0],
-      setMinVal = _useState2[1];
-
-  var _useState3 = 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 = 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 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)));
   };
 
-  var prevMinVal = usePrevious(currMinVal);
-  var prevMaxVal = usePrevious(currMaxVal);
-  useEffect(function () {
-    manuallyChangeMinValue(min);
-    manuallyChangeMaxValue(max);
-  }, [min, max]);
-  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.createElement(SliderContainer, {
-    "data-qe-id": identifier,
-    showMarks: showMarks
-  }, renderTitleSection(actionsObj), childRenderer && /*#__PURE__*/React.createElement(ChildrenWrapper, null, typeof childRenderer === 'function' ? childRenderer(actionsObj) : childRenderer), /*#__PURE__*/React.createElement(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);
+  RangeSlider.defaultProps = {
+    renderTitleSection: function renderTitleSection() {
+      return false;
+    },
+    marks: {},
+    toolTipComponent: null,
+    renderFooterSection: function renderFooterSection() {
+      return false;
     },
-    value: [currMinVal, currMaxVal],
-    marks: marks,
-    step: isObjectEmpty(marks) ? 1 : null,
-    handle: function handle(props) {
-      return renderCustomHandle(marks, toolTipComponent, props);
+    onChange: function onChange() {
+      return false;
     },
-    allowCross: false
-  }, restProps)), /*#__PURE__*/React.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 _excluded$1 = ["value", "onChange", "prefix", "allowNegativeValue", "groupSeparator", "decimalSeparator"];
-var unMask = function unMask() {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return value.replace(/\D/g, '');
-};
-/**
- * Currency Input which formats the value to a specific format
- */
-
-var CurrencyInputFormatter = function CurrencyInputFormatter(_ref) {
-  var value = _ref.value,
-      onChange = _ref.onChange,
-      prefix = _ref.prefix,
-      allowNegativeValue = _ref.allowNegativeValue,
-      groupSeparator = _ref.groupSeparator,
-      decimalSeparator = _ref.decimalSeparator,
-      rest = _objectWithoutProperties(_ref, _excluded$1);
-
-  var handleValueChange = function handleValueChange(event) {
-    var inputValue = event.target.value;
-    var unmaskedValue = unMask(inputValue);
-    onChange(unmaskedValue);
+    children: null,
+    showMarks: false
   };
+  var RangeSlider$1 = themed(RangeSlider);
 
-  var formatCurrency = function formatCurrency(originalValue) {
-    var numericValue = Number(originalValue);
-    var formattedValue = numericValue.toLocaleString('en-US');
-    return prefix + formattedValue;
+  var _excluded$1 = ["value", "onChange", "prefix", "allowNegativeValue", "groupSeparator", "decimalSeparator"];
+  var unMask = function unMask() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return value.replace(/\D/g, '');
   };
+  /**
+   * Currency Input which formats the value to a specific format
+   */
+
+  var CurrencyInputFormatter = function CurrencyInputFormatter(_ref) {
+    var value = _ref.value,
+        onChange = _ref.onChange,
+        prefix = _ref.prefix,
+        allowNegativeValue = _ref.allowNegativeValue,
+        groupSeparator = _ref.groupSeparator,
+        decimalSeparator = _ref.decimalSeparator,
+        rest = _objectWithoutProperties(_ref, _excluded$1);
+
+    var handleValueChange = function handleValueChange(event) {
+      var inputValue = event.target.value;
+      var unmaskedValue = unMask(inputValue);
+      onChange(unmaskedValue);
+    };
 
-  var formattedValue = formatCurrency(value);
-  return /*#__PURE__*/React.createElement("input", _extends({}, rest, {
-    type: "text",
-    value: formattedValue,
-    onChange: handleValueChange
-  }));
-};
-
-CurrencyInputFormatter.defaultProps = {
-  value: '',
-  prefix: 'R',
-  groupSeparator: ',',
-  decimalSeparator: '.',
-  allowNegativeValue: false,
-  onChange: function onChange() {}
-};
-
-var _templateObject$5, _templateObject2$1;
-var disabledButtonStyle = css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  opacity: 0.4;\n"])));
-var baseButtonStyle = css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding: 1rem 2rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n"])));
-
-var _excluded$2 = ["children"];
-
-var _templateObject$6;
-var Button = styled.button(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    ", "\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), baseButtonStyle, function (props) {
-  return props.theme.colors.ntrlMin;
-}, function (props) {
-  return props.theme.colors.primary;
-}, function (props) {
-  return props.theme.colors.primary;
-}, function (props) {
-  return props.theme.colors.primary;
-}, function (props) {
-  return props.theme.colors.ntrlMin;
-}, disabledButtonStyle, function (props) {
-  return props.theme.colors.base;
-});
-
-var SecondaryButton = function SecondaryButton(_ref) {
-  var children = _ref.children,
-      restProps = _objectWithoutProperties(_ref, _excluded$2);
-
-  return /*#__PURE__*/React.createElement(Button, restProps, children);
-};
-
-var SecondaryButton$1 = themed(SecondaryButton);
-
-var _templateObject$7, _templateObject2$2;
-var Title = styled.h1(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"])), function (props) {
-  return props.theme.fontSizes[2];
-});
-var InterestsSubheadingContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"])), function (props) {
-  return props.theme.marginPaddings[1];
-}, function (props) {
-  return props.theme.colors.primary;
-}, function (props) {
-  return props.theme.marginPaddings[3];
-}, function (props) {
-  return props.theme.marginPaddings[3];
-});
-
-var InterestsSubheading = function InterestsSubheading(_ref) {
-  var title = _ref.title,
-      children = _ref.children,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement(InterestsSubheadingContainer, {
-    className: className
-  }, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement("div", null, children));
-};
-
-var interestCategories = {
-  SHOES: 'SHOES',
-  BAGS: 'BAGS',
-  ACCESSORIES: 'ACCESSORIES',
-  WATCHES: 'WATCHES',
-  APPAREL: 'APPAREL',
-  JEWELLERY: 'JEWELLERY'
-};
-var interestCategoryMaxPrices = {
-  SHOES: 50000,
-  BAGS: 500000,
-  ACCESSORIES: 100000,
-  WATCHES: 500000,
-  APPAREL: 100000,
-  JEWELLERY: 100000
-};
-
-var _templateObject$8;
-var CurrencyInputWrapper = styled.div(_templateObject$8 || (_templateObject$8 = _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: 30%;\n    border-left: none;\n    border-right: none;\n    border-top: none;\n    border-bottom: 1px solid ", ";\n  }\n"])), function (props) {
-  return props.theme.colors.primary;
-});
-
-var debounceBuilder$1 = debounced(50);
-
-var getMaxPrice = function getMaxPrice() {
-  var interestCategory = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
-  switch (interestCategory) {
-    case interestCategories.ACCESSORIES:
-      return interestCategoryMaxPrices.ACCESSORIES;
-
-    case interestCategories.BAGS:
-      return interestCategoryMaxPrices.BAGS;
-
-    case interestCategories.SHOES:
-      return interestCategoryMaxPrices.SHOES;
-
-    case interestCategories.WATCHES:
-      return interestCategoryMaxPrices.WATCHES;
-
-    case interestCategories.APPAREL:
-      return interestCategoryMaxPrices.APPAREL;
-
-    case interestCategories.JEWELLERY:
-      return interestCategoryMaxPrices.JEWELLERY;
-
-    default:
-      return 0;
-  }
-};
-
-var getFooterButtons = function getFooterButtons(actionObj) {
-  var giveFullRange = actionObj.giveFullRange;
-  return /*#__PURE__*/React.createElement(SecondaryButton$1, {
-    type: "button",
-    onClick: giveFullRange
-  }, "Full Price Range");
-};
-/** UI Slider with minimum and max input fields give the ability to
- * select a price range */
-
-
-var PriceRangeSelector = function PriceRangeSelector(_ref) {
-  var onChange = _ref.onChange,
-      category = _ref.category;
-  var maxPrice = getMaxPrice(category);
-
-  var handleSlideChange = function handleSlideChange(value) {
-    var min_price = value.min,
-        max_price = value.max;
-    onChange({
-      min_price: min_price,
-      max_price: max_price
-    });
+    var formatCurrency = function formatCurrency(originalValue) {
+      var numericValue = Number(originalValue);
+      var formattedValue = numericValue.toLocaleString('en-US');
+      return prefix + formattedValue;
+    };
+
+    var formattedValue = formatCurrency(value);
+    return /*#__PURE__*/React__default.createElement("input", _extends({}, rest, {
+      type: "text",
+      value: formattedValue,
+      onChange: handleValueChange
+    }));
   };
 
-  var handleMinCurrencyChange = function handleMinCurrencyChange(targetValue, currMaxVal, manuallyChangeMinValue) {
-    var value = parseInt(unMask(targetValue), 10);
-    value = Number.isNaN(value) ? 0 : value;
-    value = value > currMaxVal ? currMaxVal : value;
-    debounceBuilder$1(function () {
-      manuallyChangeMinValue(value);
-      onChange({
-        min_price: value,
-        max_price: currMaxVal
-      });
-    });
+  CurrencyInputFormatter.defaultProps = {
+    value: '',
+    prefix: 'R',
+    groupSeparator: ',',
+    decimalSeparator: '.',
+    allowNegativeValue: false,
+    onChange: function onChange() {}
+  };
+
+  var _templateObject$5, _templateObject2$1;
+  var disabledButtonStyle = styled.css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  opacity: 0.4;\n"])));
+  var baseButtonStyle = styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding: 1rem 2rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n"])));
+
+  var _excluded$2 = ["children"];
+
+  var _templateObject$6;
+  var Button = styled__default.button(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    ", "\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), baseButtonStyle, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, disabledButtonStyle, function (props) {
+    return props.theme.colors.base;
+  });
+
+  var SecondaryButton = function SecondaryButton(_ref) {
+    var children = _ref.children,
+        restProps = _objectWithoutProperties(_ref, _excluded$2);
+
+    return /*#__PURE__*/React__default.createElement(Button, restProps, children);
+  };
+
+  var SecondaryButton$1 = themed(SecondaryButton);
+
+  var _templateObject$7, _templateObject2$2;
+  var Title = styled__default.h1(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"])), function (props) {
+    return props.theme.fontSizes[2];
+  });
+  var InterestsSubheadingContainer = styled__default.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"])), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  });
+
+  var InterestsSubheading = function InterestsSubheading(_ref) {
+    var title = _ref.title,
+        children = _ref.children,
+        className = _ref.className;
+    return /*#__PURE__*/React__default.createElement(InterestsSubheadingContainer, {
+      className: className
+    }, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement("div", null, children));
+  };
+
+  var interestCategories = {
+    SHOES: 'SHOES',
+    BAGS: 'BAGS',
+    ACCESSORIES: 'ACCESSORIES',
+    WATCHES: 'WATCHES',
+    APPAREL: 'APPAREL',
+    JEWELLERY: 'JEWELLERY'
+  };
+  var interestCategoryMaxPrices = {
+    SHOES: 50000,
+    BAGS: 500000,
+    ACCESSORIES: 100000,
+    WATCHES: 500000,
+    APPAREL: 100000,
+    JEWELLERY: 100000
+  };
+
+  var media = {
+    xs: '576px',
+    sm: '768px',
+    md: '992px',
+    lg: '1200px'
   };
 
-  var handleMaxCurrencyChange = function handleMaxCurrencyChange(targetValue, currMinVal, manuallyChangeMaxValue) {
-    var value = parseInt(unMask(targetValue), 10);
-    value = Number.isNaN(value) ? 0 : value;
-    value = value < currMinVal ? currMinVal : value;
-    debounceBuilder$1(function () {
-      manuallyChangeMaxValue(value);
+  var _templateObject$8;
+  var CurrencyInputWrapper = styled__default.div(_templateObject$8 || (_templateObject$8 = _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: 30%;\n    border-left: none;\n    border-right: none;\n    border-top: none;\n    border-bottom: 1px solid ", ";\n    min-width: 0;\n  }\n\n  @media (max-width: ", ") {\n    input[data-qe-id='masked-input-min'],\n    input[data-qe-id='masked-input-max'] {\n      flex-basis: 45%;\n    }\n  }\n"])), function (props) {
+    return props.theme.colors.primary;
+  }, media.xs);
+
+  var debounceBuilder$1 = functions.debounced(50);
+
+  var getMaxPrice = function getMaxPrice() {
+    var interestCategory = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
+    switch (interestCategory) {
+      case interestCategories.ACCESSORIES:
+        return interestCategoryMaxPrices.ACCESSORIES;
+
+      case interestCategories.BAGS:
+        return interestCategoryMaxPrices.BAGS;
+
+      case interestCategories.SHOES:
+        return interestCategoryMaxPrices.SHOES;
+
+      case interestCategories.WATCHES:
+        return interestCategoryMaxPrices.WATCHES;
+
+      case interestCategories.APPAREL:
+        return interestCategoryMaxPrices.APPAREL;
+
+      case interestCategories.JEWELLERY:
+        return interestCategoryMaxPrices.JEWELLERY;
+
+      default:
+        return 0;
+    }
+  };
+
+  var getFooterButtons = function getFooterButtons(actionObj) {
+    var giveFullRange = actionObj.giveFullRange;
+    return /*#__PURE__*/React__default.createElement(SecondaryButton$1, {
+      type: "button",
+      onClick: giveFullRange
+    }, "Full Price Range");
+  };
+  /** UI Slider with minimum and max input fields give the ability to
+   * select a price range */
+
+
+  var PriceRangeSelector = function PriceRangeSelector(_ref) {
+    var onChange = _ref.onChange,
+        category = _ref.category;
+    var maxPrice = getMaxPrice(category);
+
+    var handleSlideChange = function handleSlideChange(value) {
+      var min_price = value.min,
+          max_price = value.max;
       onChange({
-        max_price: value,
-        min_price: currMinVal
+        min_price: min_price,
+        max_price: max_price
       });
-    });
-  };
+    };
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: "price-ranges"
-  }, /*#__PURE__*/React.createElement(RangeSlider$1, {
-    renderTitleSection: function renderTitleSection() {
-      return /*#__PURE__*/React.createElement(InterestsSubheading, {
-        title: "Price Range"
+    var handleMinCurrencyChange = function handleMinCurrencyChange(targetValue, currMaxVal, manuallyChangeMinValue) {
+      var value = parseInt(unMask(targetValue), 10);
+      value = Number.isNaN(value) ? 0 : value;
+      value = value > currMaxVal ? currMaxVal : value;
+      debounceBuilder$1(function () {
+        manuallyChangeMinValue(value);
+        onChange({
+          min_price: value,
+          max_price: currMaxVal
+        });
       });
-    },
-    identifier: "price-range-slider",
-    max: maxPrice,
-    defaultMinValue: 0,
-    min: 0,
-    onChange: handleSlideChange,
-    defaultMaxValue: maxPrice,
-    renderFooterButtons: getFooterButtons,
-    title: "Price Ranges"
-  }, function (_ref2) {
-    var manuallyChangeMinValue = _ref2.manuallyChangeMinValue,
-        manuallyChangeMaxValue = _ref2.manuallyChangeMaxValue,
-        currMinVal = _ref2.currMinVal,
-        currMaxVal = _ref2.currMaxVal;
-    return /*#__PURE__*/React.createElement(CurrencyInputWrapper, null, /*#__PURE__*/React.createElement(CurrencyInputFormatter, {
-      "data-qe-id": "masked-input-min",
-      value: currMinVal,
-      onChange: function onChange(value) {
-        handleMinCurrencyChange(value, currMaxVal, manuallyChangeMinValue);
-      }
-    }), /*#__PURE__*/React.createElement(CurrencyInputFormatter, {
-      "data-qe-id": "masked-input-max",
-      value: currMaxVal,
-      onChange: function onChange(value) {
-        handleMaxCurrencyChange(value, currMinVal, manuallyChangeMaxValue);
-      }
+    };
+
+    var handleMaxCurrencyChange = function handleMaxCurrencyChange(targetValue, currMinVal, manuallyChangeMaxValue) {
+      var value = parseInt(unMask(targetValue), 10);
+      value = Number.isNaN(value) ? 0 : value;
+      value = value < currMinVal ? currMinVal : value;
+      debounceBuilder$1(function () {
+        manuallyChangeMaxValue(value);
+        onChange({
+          max_price: value,
+          min_price: currMinVal
+        });
+      });
+    };
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "price-ranges"
+    }, /*#__PURE__*/React__default.createElement(RangeSlider$1, {
+      renderTitleSection: function renderTitleSection() {
+        return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
+          title: "Price Range"
+        });
+      },
+      identifier: "price-range-slider",
+      max: maxPrice,
+      defaultMinValue: 0,
+      min: 0,
+      onChange: handleSlideChange,
+      defaultMaxValue: maxPrice,
+      renderFooterButtons: getFooterButtons,
+      title: "Price Ranges"
+    }, function (_ref2) {
+      var manuallyChangeMinValue = _ref2.manuallyChangeMinValue,
+          manuallyChangeMaxValue = _ref2.manuallyChangeMaxValue,
+          currMinVal = _ref2.currMinVal,
+          currMaxVal = _ref2.currMaxVal;
+      return /*#__PURE__*/React__default.createElement(CurrencyInputWrapper, null, /*#__PURE__*/React__default.createElement(CurrencyInputFormatter, {
+        "data-qe-id": "masked-input-min",
+        value: currMinVal,
+        onChange: function onChange(value) {
+          handleMinCurrencyChange(value, currMaxVal, manuallyChangeMinValue);
+        }
+      }), /*#__PURE__*/React__default.createElement(CurrencyInputFormatter, {
+        "data-qe-id": "masked-input-max",
+        value: currMaxVal,
+        onChange: function onChange(value) {
+          handleMaxCurrencyChange(value, currMinVal, manuallyChangeMaxValue);
+        }
+      }));
     }));
-  }));
-};
+  };
+
+  PriceRangeSelector.defaultProps = {
+    onChange: function onChange() {
+      return false;
+    },
+    category: ''
+  };
 
-PriceRangeSelector.defaultProps = {
-  onChange: function onChange() {
-    return false;
-  },
-  category: ''
-};
+  return PriceRangeSelector;
 
-export default PriceRangeSelector;
+})));