@bonlineza/luxity-lib 2.39.4 → 2.39.6

package/RangeSlider.js

@@ -1,1158 +1,1152 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('rc-slider'), require('styled-components'), require('@bonlineza/b-lib/functions')) :
-  typeof define === 'function' && define.amd ? define(['react', 'rc-slider', 'styled-components', '@bonlineza/b-lib/functions'], factory) :
-  (global = global || self, global.RangeSlider = factory(global.React, global.rcSlider, global.styled, global.function));
-}(this, (function (React, rcSlider, styled, functions) { '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];
-          }
+import React, { forwardRef, useState, useEffect, Fragment } from 'react';
+import { Range, Handle } from 'rc-slider';
+import styled, { ThemeProvider, css } from 'styled-components';
+import { debounced, usePrevious, isObjectEmpty } from '@bonlineza/b-lib/functions';
+
+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];
   }
 
-  function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
+  return target;
+}
 
-    var target = _objectWithoutPropertiesLoose(source, excluded);
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
 
-    var key, i;
+  var target = _objectWithoutPropertiesLoose(source, excluded);
 
-    if (Object.getOwnPropertySymbols) {
-      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+  var key, i;
 
-      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];
-      }
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
     }
+  }
 
-    return target;
+  return target;
+}
+
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
   }
 
-  function _taggedTemplateLiteral(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
     }
+  }));
+}
 
-    return Object.freeze(Object.defineProperties(strings, {
-      raw: {
-        value: Object.freeze(raw)
-      }
-    }));
-  }
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
 
-  function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-  }
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-  function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-  }
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
-  function _iterableToArrayLimit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
 
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
+  var _s, _e;
 
-    var _s, _e;
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
 
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
     try {
-      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;
+      if (!_n && _i["return"] != null) _i["return"]();
     } finally {
-      try {
-        if (!_n && _i["return"] != null) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
+      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 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
-      })));
-    });
+};
+
+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
+    })));
   });
+});
 
-  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);
-  }
-
-  function _assertThisInitialized(self) {
-    if (self === void 0) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
     }
 
-    return self;
-  }
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
+}
 
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-    return _setPrototypeOf(o, p);
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   }
 
-  function _inheritsLoose(subClass, superClass) {
-    subClass.prototype = Object.create(superClass.prototype);
-    subClass.prototype.constructor = subClass;
-    _setPrototypeOf(subClass, superClass);
-  }
+  return self;
+}
 
-  function _getPrototypeOf(o) {
-    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
-      return o.__proto__ || Object.getPrototypeOf(o);
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _isNativeFunction(fn) {
+  return Function.toString.call(fn).indexOf("[native code]") !== -1;
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function _construct(Parent, args, Class) {
+  if (_isNativeReflectConstruct()) {
+    _construct = Reflect.construct.bind();
+  } else {
+    _construct = function _construct(Parent, args, Class) {
+      var a = [null];
+      a.push.apply(a, args);
+      var Constructor = Function.bind.apply(Parent, a);
+      var instance = new Constructor();
+      if (Class) _setPrototypeOf(instance, Class.prototype);
+      return instance;
     };
-    return _getPrototypeOf(o);
   }
 
-  function _isNativeFunction(fn) {
-    return Function.toString.call(fn).indexOf("[native code]") !== -1;
-  }
+  return _construct.apply(null, arguments);
+}
 
-  function _isNativeReflectConstruct() {
-    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-    if (Reflect.construct.sham) return false;
-    if (typeof Proxy === "function") return true;
+function _wrapNativeSuper(Class) {
+  var _cache = typeof Map === "function" ? new Map() : undefined;
 
-    try {
-      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
+  _wrapNativeSuper = function _wrapNativeSuper(Class) {
+    if (Class === null || !_isNativeFunction(Class)) return Class;
 
-  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 Class !== "function") {
+      throw new TypeError("Super expression must either be null or a function");
     }
 
-    return _construct.apply(null, arguments);
-  }
-
-  function _wrapNativeSuper(Class) {
-    var _cache = typeof Map === "function" ? new Map() : undefined;
-
-    _wrapNativeSuper = function _wrapNativeSuper(Class) {
-      if (Class === null || !_isNativeFunction(Class)) return Class;
-
-      if (typeof Class !== "function") {
-        throw new TypeError("Super expression must either be null or a function");
-      }
+    if (typeof _cache !== "undefined") {
+      if (_cache.has(Class)) return _cache.get(Class);
 
-      if (typeof _cache !== "undefined") {
-        if (_cache.has(Class)) return _cache.get(Class);
+      _cache.set(Class, Wrapper);
+    }
 
-        _cache.set(Class, Wrapper);
-      }
+    function Wrapper() {
+      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+    }
 
-      function Wrapper() {
-        return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+    Wrapper.prototype = Object.create(Class.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: false,
+        writable: true,
+        configurable: true
       }
-
-      Wrapper.prototype = Object.create(Class.prototype, {
-        constructor: {
-          value: Wrapper,
-          enumerable: false,
-          writable: true,
-          configurable: true
-        }
-      });
-      return _setPrototypeOf(Wrapper, Class);
-    };
-
-    return _wrapNativeSuper(Class);
-  }
-
-  // based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js
-
-  /**
-   * Parse errors.md and turn it into a simple hash of code: message
-   * @private
-   */
-  var ERRORS = {
-    "1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
-    "2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
-    "3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
-    "4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
-    "5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
-    "6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
-    "7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
-    "8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
-    "9": "Please provide a number of steps to the modularScale helper.\n\n",
-    "10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
-    "11": "Invalid value passed as base to modularScale, expected number or em string but got \"%s\"\n\n",
-    "12": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got \"%s\" instead.\n\n",
-    "13": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got \"%s\" instead.\n\n",
-    "14": "Passed invalid pixel value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
-    "15": "Passed invalid base value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
-    "16": "You must provide a template to this method.\n\n",
-    "17": "You passed an unsupported selector state to this method.\n\n",
-    "18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
-    "19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
-    "20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
-    "21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
-    "22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
-    "23": "fontFace expects a name of a font-family.\n\n",
-    "24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
-    "25": "fontFace expects localFonts to be an array.\n\n",
-    "26": "fontFace expects fileFormats to be an array.\n\n",
-    "27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
-    "28": "Please supply a filename to retinaImage() as the first argument.\n\n",
-    "29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
-    "30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
-    "31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
-    "32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
-    "33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
-    "34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
-    "35": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
-    "36": "Property must be a string value.\n\n",
-    "37": "Syntax Error at %s.\n\n",
-    "38": "Formula contains a function that needs parentheses at %s.\n\n",
-    "39": "Formula is missing closing parenthesis at %s.\n\n",
-    "40": "Formula has too many closing parentheses at %s.\n\n",
-    "41": "All values in a formula must have the same unit or be unitless.\n\n",
-    "42": "Please provide a number of steps to the modularScale helper.\n\n",
-    "43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
-    "44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
-    "45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
-    "46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
-    "47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
-    "48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
-    "49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
-    "50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
-    "51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
-    "52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
-    "53": "fontFace expects localFonts to be an array.\n\n",
-    "54": "fontFace expects fileFormats to be an array.\n\n",
-    "55": "fontFace expects a name of a font-family.\n\n",
-    "56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
-    "57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
-    "58": "Please supply a filename to retinaImage() as the first argument.\n\n",
-    "59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
-    "60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
-    "61": "Property must be a string value.\n\n",
-    "62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
-    "63": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
-    "64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
-    "65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
-    "66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
-    "67": "You must provide a template to this method.\n\n",
-    "68": "You passed an unsupported selector state to this method.\n\n",
-    "69": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got %s instead.\n\n",
-    "70": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got %s instead.\n\n",
-    "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
-    "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
-    "73": "Please provide a valid CSS variable.\n\n",
-    "74": "CSS variable not found.\n\n",
-    "75": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
+    });
+    return _setPrototypeOf(Wrapper, Class);
   };
-  /**
-   * 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;
+  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];
+  }
 
-    for (c = 1; c < args.length; c += 1) {
-      b.push(args[c]);
-    }
+  var a = args[0];
+  var b = [];
+  var c;
 
-    b.forEach(function (d) {
-      a = a.replace(/%[a-z]/, d);
-    });
-    return a;
+  for (c = 1; c < args.length; c += 1) {
+    b.push(args[c]);
   }
-  /**
-   * 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);
 
-    function PolishedError(code) {
-      var _this;
+var PolishedError = /*#__PURE__*/function (_Error) {
+  _inheritsLoose(PolishedError, _Error);
 
-      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];
-        }
+  function PolishedError(code) {
+    var _this;
 
-        _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || 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];
       }
 
-      return _assertThisInitialized(_this);
+      _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
     }
 
-    return PolishedError;
-  }( /*#__PURE__*/_wrapNativeSuper(Error));
-
-  function colorToInt(color) {
-    return Math.round(color * 255);
+    return _assertThisInitialized(_this);
   }
 
-  function convertToInt(red, green, blue) {
-    return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
-  }
+  return PolishedError;
+}( /*#__PURE__*/_wrapNativeSuper(Error));
 
-  function hslToRgb(hue, saturation, lightness, convert) {
-    if (convert === void 0) {
-      convert = convertToInt;
-    }
+function colorToInt(color) {
+  return Math.round(color * 255);
+}
 
-    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 convertToInt(red, green, blue) {
+  return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
+}
 
-    var lightnessModification = lightness - chroma / 2;
-    var finalRed = red + lightnessModification;
-    var finalGreen = green + lightnessModification;
-    var finalBlue = blue + lightnessModification;
-    return convert(finalRed, finalGreen, finalBlue);
+function hslToRgb(hue, saturation, lightness, convert) {
+  if (convert === void 0) {
+    convert = convertToInt;
   }
 
-  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;
+  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 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 lightnessModification = lightness - chroma / 2;
+  var finalRed = red + lightnessModification;
+  var finalGreen = green + lightnessModification;
+  var finalBlue = blue + lightnessModification;
+  return convert(finalRed, finalGreen, finalBlue);
+}
+
+var namedColorMap = {
+  aliceblue: 'f0f8ff',
+  antiquewhite: 'faebd7',
+  aqua: '00ffff',
+  aquamarine: '7fffd4',
+  azure: 'f0ffff',
+  beige: 'f5f5dc',
+  bisque: 'ffe4c4',
+  black: '000',
+  blanchedalmond: 'ffebcd',
+  blue: '0000ff',
+  blueviolet: '8a2be2',
+  brown: 'a52a2a',
+  burlywood: 'deb887',
+  cadetblue: '5f9ea0',
+  chartreuse: '7fff00',
+  chocolate: 'd2691e',
+  coral: 'ff7f50',
+  cornflowerblue: '6495ed',
+  cornsilk: 'fff8dc',
+  crimson: 'dc143c',
+  cyan: '00ffff',
+  darkblue: '00008b',
+  darkcyan: '008b8b',
+  darkgoldenrod: 'b8860b',
+  darkgray: 'a9a9a9',
+  darkgreen: '006400',
+  darkgrey: 'a9a9a9',
+  darkkhaki: 'bdb76b',
+  darkmagenta: '8b008b',
+  darkolivegreen: '556b2f',
+  darkorange: 'ff8c00',
+  darkorchid: '9932cc',
+  darkred: '8b0000',
+  darksalmon: 'e9967a',
+  darkseagreen: '8fbc8f',
+  darkslateblue: '483d8b',
+  darkslategray: '2f4f4f',
+  darkslategrey: '2f4f4f',
+  darkturquoise: '00ced1',
+  darkviolet: '9400d3',
+  deeppink: 'ff1493',
+  deepskyblue: '00bfff',
+  dimgray: '696969',
+  dimgrey: '696969',
+  dodgerblue: '1e90ff',
+  firebrick: 'b22222',
+  floralwhite: 'fffaf0',
+  forestgreen: '228b22',
+  fuchsia: 'ff00ff',
+  gainsboro: 'dcdcdc',
+  ghostwhite: 'f8f8ff',
+  gold: 'ffd700',
+  goldenrod: 'daa520',
+  gray: '808080',
+  green: '008000',
+  greenyellow: 'adff2f',
+  grey: '808080',
+  honeydew: 'f0fff0',
+  hotpink: 'ff69b4',
+  indianred: 'cd5c5c',
+  indigo: '4b0082',
+  ivory: 'fffff0',
+  khaki: 'f0e68c',
+  lavender: 'e6e6fa',
+  lavenderblush: 'fff0f5',
+  lawngreen: '7cfc00',
+  lemonchiffon: 'fffacd',
+  lightblue: 'add8e6',
+  lightcoral: 'f08080',
+  lightcyan: 'e0ffff',
+  lightgoldenrodyellow: 'fafad2',
+  lightgray: 'd3d3d3',
+  lightgreen: '90ee90',
+  lightgrey: 'd3d3d3',
+  lightpink: 'ffb6c1',
+  lightsalmon: 'ffa07a',
+  lightseagreen: '20b2aa',
+  lightskyblue: '87cefa',
+  lightslategray: '789',
+  lightslategrey: '789',
+  lightsteelblue: 'b0c4de',
+  lightyellow: 'ffffe0',
+  lime: '0f0',
+  limegreen: '32cd32',
+  linen: 'faf0e6',
+  magenta: 'f0f',
+  maroon: '800000',
+  mediumaquamarine: '66cdaa',
+  mediumblue: '0000cd',
+  mediumorchid: 'ba55d3',
+  mediumpurple: '9370db',
+  mediumseagreen: '3cb371',
+  mediumslateblue: '7b68ee',
+  mediumspringgreen: '00fa9a',
+  mediumturquoise: '48d1cc',
+  mediumvioletred: 'c71585',
+  midnightblue: '191970',
+  mintcream: 'f5fffa',
+  mistyrose: 'ffe4e1',
+  moccasin: 'ffe4b5',
+  navajowhite: 'ffdead',
+  navy: '000080',
+  oldlace: 'fdf5e6',
+  olive: '808000',
+  olivedrab: '6b8e23',
+  orange: 'ffa500',
+  orangered: 'ff4500',
+  orchid: 'da70d6',
+  palegoldenrod: 'eee8aa',
+  palegreen: '98fb98',
+  paleturquoise: 'afeeee',
+  palevioletred: 'db7093',
+  papayawhip: 'ffefd5',
+  peachpuff: 'ffdab9',
+  peru: 'cd853f',
+  pink: 'ffc0cb',
+  plum: 'dda0dd',
+  powderblue: 'b0e0e6',
+  purple: '800080',
+  rebeccapurple: '639',
+  red: 'f00',
+  rosybrown: 'bc8f8f',
+  royalblue: '4169e1',
+  saddlebrown: '8b4513',
+  salmon: 'fa8072',
+  sandybrown: 'f4a460',
+  seagreen: '2e8b57',
+  seashell: 'fff5ee',
+  sienna: 'a0522d',
+  silver: 'c0c0c0',
+  skyblue: '87ceeb',
+  slateblue: '6a5acd',
+  slategray: '708090',
+  slategrey: '708090',
+  snow: 'fffafa',
+  springgreen: '00ff7f',
+  steelblue: '4682b4',
+  tan: 'd2b48c',
+  teal: '008080',
+  thistle: 'd8bfd8',
+  tomato: 'ff6347',
+  turquoise: '40e0d0',
+  violet: 'ee82ee',
+  wheat: 'f5deb3',
+  white: 'fff',
+  whitesmoke: 'f5f5f5',
+  yellow: 'ff0',
+  yellowgreen: '9acd32'
+};
+/**
+ * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
+ * @private
+ */
+
+function nameToHex(color) {
+  if (typeof color !== 'string') return color;
+  var normalizedColorName = color.toLowerCase();
+  return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
+}
+
+var hexRegex = /^#[a-fA-F0-9]{6}$/;
+var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
+var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
+var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
+var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
+var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+/**
+ * Returns an RgbColor or RgbaColor object. This utility function is only useful
+ * if want to extract a color component. With the color util `toColorString` you
+ * can convert a RgbColor or RgbaColor object back to a string.
+ *
+ * @example
+ * // Assigns `{ red: 255, green: 0, blue: 0 }` to color1
+ * const color1 = parseToRgb('rgb(255, 0, 0)');
+ * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
+ * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
+ */
+
+function parseToRgb(color) {
+  if (typeof color !== 'string') {
+    throw new PolishedError(3);
+  }
 
-    var normalizedColor = nameToHex(color);
+  var normalizedColor = nameToHex(color);
 
-    if (normalizedColor.match(hexRegex)) {
-      return {
-        red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
-        green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
-        blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
-      };
-    }
-
-    if (normalizedColor.match(hexRgbaRegex)) {
-      var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
-      return {
-        red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
-        green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
-        blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
-        alpha: alpha
-      };
-    }
+  if (normalizedColor.match(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(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(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(reducedRgbaHexRegex)) {
-      var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
+  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)
+    };
+  }
 
-      return {
-        red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
-        green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
-        blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
-        alpha: _alpha
-      };
-    }
+  if (normalizedColor.match(reducedRgbaHexRegex)) {
+    var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
 
-    var rgbMatched = rgbRegex.exec(normalizedColor);
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
+      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
+      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
+      alpha: _alpha
+    };
+  }
 
-    if (rgbMatched) {
-      return {
-        red: parseInt("" + rgbMatched[1], 10),
-        green: parseInt("" + rgbMatched[2], 10),
-        blue: parseInt("" + rgbMatched[3], 10)
-      };
-    }
+  var rgbMatched = rgbRegex.exec(normalizedColor);
 
-    var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
+  if (rgbMatched) {
+    return {
+      red: parseInt("" + rgbMatched[1], 10),
+      green: parseInt("" + rgbMatched[2], 10),
+      blue: parseInt("" + rgbMatched[3], 10)
+    };
+  }
 
-    if (rgbaMatched) {
-      return {
-        red: parseInt("" + rgbaMatched[1], 10),
-        green: parseInt("" + rgbaMatched[2], 10),
-        blue: parseInt("" + rgbaMatched[3], 10),
-        alpha: parseFloat("" + rgbaMatched[4])
-      };
-    }
+  var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
 
-    var hslMatched = hslRegex.exec(normalizedColor);
+  if (rgbaMatched) {
+    return {
+      red: parseInt("" + rgbaMatched[1], 10),
+      green: parseInt("" + rgbaMatched[2], 10),
+      blue: parseInt("" + rgbaMatched[3], 10),
+      alpha: parseFloat("" + rgbaMatched[4])
+    };
+  }
 
-    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);
+  var hslMatched = hslRegex.exec(normalizedColor);
 
-      if (!hslRgbMatched) {
-        throw new PolishedError(4, normalizedColor, 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);
 
-      return {
-        red: parseInt("" + hslRgbMatched[1], 10),
-        green: parseInt("" + hslRgbMatched[2], 10),
-        blue: parseInt("" + hslRgbMatched[3], 10)
-      };
+    if (!hslRgbMatched) {
+      throw new PolishedError(4, normalizedColor, rgbColorString);
     }
 
-    var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
-
-    if (hslaMatched) {
-      var _hue = parseInt("" + hslaMatched[1], 10);
-
-      var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
+    return {
+      red: parseInt("" + hslRgbMatched[1], 10),
+      green: parseInt("" + hslRgbMatched[2], 10),
+      blue: parseInt("" + hslRgbMatched[3], 10)
+    };
+  }
 
-      var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
+  var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
 
-      var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
+  if (hslaMatched) {
+    var _hue = parseInt("" + hslaMatched[1], 10);
 
-      var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
+    var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
 
-      if (!_hslRgbMatched) {
-        throw new PolishedError(4, normalizedColor, _rgbColorString);
-      }
+    var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
 
-      return {
-        red: parseInt("" + _hslRgbMatched[1], 10),
-        green: parseInt("" + _hslRgbMatched[2], 10),
-        blue: parseInt("" + _hslRgbMatched[3], 10),
-        alpha: parseFloat("" + hslaMatched[4])
-      };
-    }
+    var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
 
-    throw new PolishedError(5);
-  }
+    var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
 
-  /**
-   * 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];
+    if (!_hslRgbMatched) {
+      throw new PolishedError(4, normalizedColor, _rgbColorString);
     }
 
-    return value;
-  };
-
-  function numberToHex(value) {
-    var hex = value.toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
-  }
-
-  /**
-   * Returns a string value for the color. The returned result is the smallest possible hex notation.
-   *
-   * @example
-   * // Styles as object usage
-   * const styles = {
-   *   background: rgb(255, 205, 100),
-   *   background: rgb({ red: 255, green: 205, blue: 100 }),
-   * }
-   *
-   * // styled-components usage
-   * const div = styled.div`
-   *   background: ${rgb(255, 205, 100)};
-   *   background: ${rgb({ red: 255, green: 205, blue: 100 })};
-   * `
-   *
-   * // CSS in JS Output
-   *
-   * element {
-   *   background: "#ffcd64";
-   *   background: "#ffcd64";
-   * }
-   */
-  function rgb(value, green, blue) {
-    if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') {
-      return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
-    } else if (typeof value === 'object' && green === undefined && blue === undefined) {
-      return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
-    }
-
-    throw new PolishedError(6);
+    return {
+      red: parseInt("" + _hslRgbMatched[1], 10),
+      green: parseInt("" + _hslRgbMatched[2], 10),
+      blue: parseInt("" + _hslRgbMatched[3], 10),
+      alpha: parseFloat("" + hslaMatched[4])
+    };
   }
 
-  /**
-   * 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(5);
+}
 
-    throw new PolishedError(7);
+/**
+ * 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];
   }
 
-  // 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, []);
+  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));
   }
 
-  function guard(lowerBoundary, upperBoundary, value) {
-    return Math.max(lowerBoundary, Math.min(upperBoundary, value));
+  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 + ")";
   }
 
-  /**
-   * 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);
+  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);
   };
-
-  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];
+} // 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 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 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];
       }
-    }, /*#__PURE__*/React__default.createElement(Tooltip, _extends({
-      marks: marks
-    }, getToolTipProps()))));
+    });
+    return newProps;
   };
-  /** slider ui component for react */
-
-
-  var RangeSlider = function RangeSlider(_ref) {
-    var renderTitleSection = _ref.renderTitleSection,
-        marks = _ref.marks,
-        defaultMinValue = _ref.defaultMinValue,
-        defaultMaxValue = _ref.defaultMaxValue,
-        min = _ref.min,
-        max = _ref.max,
-        toolTipComponent = _ref.toolTipComponent,
-        renderFooterSection = _ref.renderFooterSection,
-        onChange = _ref.onChange,
-        childRenderer = _ref.children,
-        identifier = _ref.identifier,
-        showMarks = _ref.showMarks,
-        restProps = _objectWithoutProperties(_ref, _excluded2);
-
-    var _useState = React.useState(defaultMinValue),
-        _useState2 = _slicedToArray(_useState, 2),
-        currMinVal = _useState2[0],
-        setMinVal = _useState2[1];
-
-    var _useState3 = React.useState(defaultMaxValue),
-        _useState4 = _slicedToArray(_useState3, 2),
-        currMaxVal = _useState4[0],
-        setMaxVal = _useState4[1];
-    /*
-     *Description variable stores the time that the component renders
-     * the state is used to enforce reenders for the component since the date now
-     * is always changing
-     * */
-
-
-    var _useState5 = React.useState(0),
-        _useState6 = _slicedToArray(_useState5, 2),
-        seed = _useState6[0],
-        setSeed = _useState6[1];
-
-    var manuallyChangeMinValue = function manuallyChangeMinValue(val) {
-      setMinVal(val);
-      setSeed(Date.now());
-    };
 
-    var manuallyChangeMaxValue = function manuallyChangeMaxValue(val) {
-      setMaxVal(val);
-      setSeed(Date.now());
-    };
+  var 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 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 manuallyChangeMaxValue = function manuallyChangeMaxValue(val) {
+    setMaxVal(val);
+    setSeed(Date.now());
   };
 
-  RangeSlider.defaultProps = {
-    renderTitleSection: function renderTitleSection() {
-      return false;
-    },
-    marks: {},
-    toolTipComponent: null,
-    renderFooterSection: function renderFooterSection() {
-      return false;
+  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);
     },
-    onChange: function onChange() {
-      return false;
+    value: [currMinVal, currMaxVal],
+    marks: marks,
+    step: isObjectEmpty(marks) ? 1 : null,
+    handle: function handle(props) {
+      return renderCustomHandle(marks, toolTipComponent, props);
     },
-    children: null,
-    showMarks: false
-  };
-  var index = themed(RangeSlider);
-
-  return index;
-
-})));
+    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 index = themed(RangeSlider);
+
+export default index;