@thecb/components 10.3.0 → 10.3.1

package/dist/index.cjs.js

@@ -19256,6 +19256,7 @@ function _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
@@ -19340,71 +19341,84 @@ var ERRORS = {
   "77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
   "78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
 };
-
 /**
  * super basic version of sprintf
  * @private
  */
+
 function format() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
+
   var a = args[0];
   var b = [];
   var c;
+
   for (c = 1; c < args.length; c += 1) {
     b.push(args[c]);
   }
+
   b.forEach(function (d) {
     a = a.replace(/%[a-z]/, d);
   });
   return a;
 }
-
 /**
  * Create an error file out of errors.md for development and a simple web link to the full errors
  * in production mode.
  * @private
  */
+
+
 var PolishedError = /*#__PURE__*/function (_Error) {
   _inheritsLoose(PolishedError, _Error);
+
   function PolishedError(code) {
     var _this;
+
     if (process.env.NODE_ENV === 'production') {
       _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
     } else {
       for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
         args[_key2 - 1] = arguments[_key2];
       }
+
       _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
     }
+
     return _assertThisInitialized(_this);
   }
+
   return PolishedError;
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 
 function colorToInt(color) {
   return Math.round(color * 255);
 }
+
 function convertToInt(red, green, blue) {
   return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
 }
+
 function hslToRgb(hue, saturation, lightness, convert) {
   if (convert === void 0) {
     convert = convertToInt;
   }
+
   if (saturation === 0) {
     // achromatic
     return convert(lightness, lightness, lightness);
-  }
+  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
+
 
-  // 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;
@@ -19424,6 +19438,7 @@ function hslToRgb(hue, saturation, lightness, convert) {
     red = chroma;
     blue = secondComponent;
   }
+
   var lightnessModification = lightness - chroma / 2;
   var finalRed = red + lightnessModification;
   var finalGreen = green + lightnessModification;
@@ -19581,11 +19596,11 @@ var namedColorMap = {
   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();
@@ -19600,7 +19615,6 @@ var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\
 var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
 var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
 var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\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
@@ -19612,11 +19626,14 @@ var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[
  * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
  * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
  */
+
 function parseToRgb(color) {
   if (typeof color !== 'string') {
     throw new PolishedError(3);
   }
+
   var normalizedColor = nameToHex(color);
+
   if (normalizedColor.match(hexRegex)) {
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
@@ -19624,6 +19641,7 @@ function parseToRgb(color) {
       blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
     };
   }
+
   if (normalizedColor.match(hexRgbaRegex)) {
     var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
     return {
@@ -19633,6 +19651,7 @@ function parseToRgb(color) {
       alpha: alpha
     };
   }
+
   if (normalizedColor.match(reducedHexRegex)) {
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
@@ -19640,8 +19659,10 @@ function parseToRgb(color) {
       blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
     };
   }
+
   if (normalizedColor.match(reducedRgbaHexRegex)) {
     var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
+
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
       green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
@@ -19649,7 +19670,9 @@ function parseToRgb(color) {
       alpha: _alpha
     };
   }
+
   var rgbMatched = rgbRegex.exec(normalizedColor);
+
   if (rgbMatched) {
     return {
       red: parseInt("" + rgbMatched[1], 10),
@@ -19657,7 +19680,9 @@ function parseToRgb(color) {
       blue: parseInt("" + rgbMatched[3], 10)
     };
   }
+
   var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
+
   if (rgbaMatched) {
     return {
       red: parseInt("" + rgbaMatched[1], 10),
@@ -19666,32 +19691,44 @@ function parseToRgb(color) {
       alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
     };
   }
+
   var hslMatched = hslRegex.exec(normalizedColor);
+
   if (hslMatched) {
     var hue = parseInt("" + hslMatched[1], 10);
     var saturation = parseInt("" + hslMatched[2], 10) / 100;
     var lightness = parseInt("" + hslMatched[3], 10) / 100;
     var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
     var hslRgbMatched = rgbRegex.exec(rgbColorString);
+
     if (!hslRgbMatched) {
       throw new PolishedError(4, normalizedColor, rgbColorString);
     }
+
     return {
       red: parseInt("" + hslRgbMatched[1], 10),
       green: parseInt("" + hslRgbMatched[2], 10),
       blue: parseInt("" + hslRgbMatched[3], 10)
     };
   }
+
   var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
+
   if (hslaMatched) {
     var _hue = parseInt("" + hslaMatched[1], 10);
+
     var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
+
     var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
+
     var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
+
     var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
+
     if (!_hslRgbMatched) {
       throw new PolishedError(4, normalizedColor, _rgbColorString);
     }
+
     return {
       red: parseInt("" + _hslRgbMatched[1], 10),
       green: parseInt("" + _hslRgbMatched[2], 10),
@@ -19699,80 +19736,8 @@ function parseToRgb(color) {
       alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
     };
   }
-  throw new PolishedError(5);
-}
-
-function rgbToHsl(color) {
-  // make sure rgb are contained in a set of [0, 255]
-  var red = color.red / 255;
-  var green = color.green / 255;
-  var blue = color.blue / 255;
-  var max = Math.max(red, green, blue);
-  var min = Math.min(red, green, blue);
-  var lightness = (max + min) / 2;
-  if (max === min) {
-    // achromatic
-    if (color.alpha !== undefined) {
-      return {
-        hue: 0,
-        saturation: 0,
-        lightness: lightness,
-        alpha: color.alpha
-      };
-    } else {
-      return {
-        hue: 0,
-        saturation: 0,
-        lightness: lightness
-      };
-    }
-  }
-  var hue;
-  var delta = max - min;
-  var saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
-  switch (max) {
-    case red:
-      hue = (green - blue) / delta + (green < blue ? 6 : 0);
-      break;
-    case green:
-      hue = (blue - red) / delta + 2;
-      break;
-    default:
-      // blue case
-      hue = (red - green) / delta + 4;
-      break;
-  }
-  hue *= 60;
-  if (color.alpha !== undefined) {
-    return {
-      hue: hue,
-      saturation: saturation,
-      lightness: lightness,
-      alpha: color.alpha
-    };
-  }
-  return {
-    hue: hue,
-    saturation: saturation,
-    lightness: lightness
-  };
-}
 
-/**
- * Returns an HslColor or HslaColor object. This utility function is only useful
- * if want to extract a color component. With the color util `toColorString` you
- * can convert a HslColor or HslaColor object back to a string.
- *
- * @example
- * // Assigns `{ hue: 0, saturation: 1, lightness: 0.5 }` to color1
- * const color1 = parseToHsl('rgb(255, 0, 0)');
- * // Assigns `{ hue: 128, saturation: 1, lightness: 0.5, alpha: 0.75 }` to color2
- * const color2 = parseToHsl('hsla(128, 100%, 50%, 0.75)');
- */
-function parseToHsl(color) {
-  // Note: At a later stage we can optimize this function as right now a hsl
-  // color would be parsed converted to rgb values and converted back to hsl.
-  return rgbToHsl(parseToRgb(color));
+  throw new PolishedError(5);
 }
 
 /**
@@ -19783,8 +19748,10 @@ var reduceHexValue = function reduceHexValue(value) {
   if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
     return "#" + value[1] + value[3] + value[5];
   }
+
   return value;
 };
+
 var reduceHexValue$1 = reduceHexValue;
 
 function numberToHex(value) {
@@ -19792,83 +19759,6 @@ function numberToHex(value) {
   return hex.length === 1 ? "0" + hex : hex;
 }
 
-function colorToHex(color) {
-  return numberToHex(Math.round(color * 255));
-}
-function convertToHex(red, green, blue) {
-  return reduceHexValue$1("#" + colorToHex(red) + colorToHex(green) + colorToHex(blue));
-}
-function hslToHex(hue, saturation, lightness) {
-  return hslToRgb(hue, saturation, lightness, convertToHex);
-}
-
-/**
- * Returns a string value for the color. The returned result is the smallest possible hex notation.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: hsl(359, 0.75, 0.4),
- *   background: hsl({ hue: 360, saturation: 0.75, lightness: 0.4 }),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${hsl(359, 0.75, 0.4)};
- *   background: ${hsl({ hue: 360, saturation: 0.75, lightness: 0.4 })};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#b3191c";
- *   background: "#b3191c";
- * }
- */
-function hsl(value, saturation, lightness) {
-  if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number') {
-    return hslToHex(value, saturation, lightness);
-  } else if (typeof value === 'object' && saturation === undefined && lightness === undefined) {
-    return hslToHex(value.hue, value.saturation, value.lightness);
-  }
-  throw new PolishedError(1);
-}
-
-/**
- * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: hsla(359, 0.75, 0.4, 0.7),
- *   background: hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 }),
- *   background: hsla(359, 0.75, 0.4, 1),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${hsla(359, 0.75, 0.4, 0.7)};
- *   background: ${hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 })};
- *   background: ${hsla(359, 0.75, 0.4, 1)};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "rgba(179,25,28,0.7)";
- *   background: "rgba(179,25,28,0.7)";
- *   background: "#b3191c";
- * }
- */
-function hsla$1(value, saturation, lightness, alpha) {
-  if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number' && typeof alpha === 'number') {
-    return alpha >= 1 ? hslToHex(value, saturation, lightness) : "rgba(" + hslToRgb(value, saturation, lightness) + "," + alpha + ")";
-  } else if (typeof value === 'object' && saturation === undefined && lightness === undefined && alpha === undefined) {
-    return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : "rgba(" + hslToRgb(value.hue, value.saturation, value.lightness) + "," + value.alpha + ")";
-  }
-  throw new PolishedError(2);
-}
-
 /**
  * Returns a string value for the color. The returned result is the smallest possible hex notation.
  *
@@ -19898,6 +19788,7 @@ function rgb(value, green, blue) {
   } else if (typeof value === 'object' && green === undefined && blue === undefined) {
     return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
   }
+
   throw new PolishedError(6);
 }
 
@@ -19944,60 +19835,8 @@ function rgba$1(firstValue, secondValue, thirdValue, fourthValue) {
   } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
     return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
   }
-  throw new PolishedError(7);
-}
 
-var isRgb = function isRgb(color) {
-  return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
-};
-var isRgba$1 = function isRgba(color) {
-  return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && typeof color.alpha === 'number';
-};
-var isHsl = function isHsl(color) {
-  return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
-};
-var isHsla$1 = function isHsla(color) {
-  return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && typeof color.alpha === 'number';
-};
-
-/**
- * Converts a RgbColor, RgbaColor, HslColor or HslaColor object to a color string.
- * This util is useful in case you only know on runtime which color object is
- * used. Otherwise we recommend to rely on `rgb`, `rgba`, `hsl` or `hsla`.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: toColorString({ red: 255, green: 205, blue: 100 }),
- *   background: toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }),
- *   background: toColorString({ hue: 240, saturation: 1, lightness: 0.5 }),
- *   background: toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${toColorString({ red: 255, green: 205, blue: 100 })};
- *   background: ${toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })};
- *   background: ${toColorString({ hue: 240, saturation: 1, lightness: 0.5 })};
- *   background: ${toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#ffcd64";
- *   background: "rgba(255,205,100,0.72)";
- *   background: "#00f";
- *   background: "rgba(179,25,25,0.72)";
- * }
- */
-
-function toColorString(color) {
-  if (typeof color !== 'object') throw new PolishedError(8);
-  if (isRgba$1(color)) return rgba$1(color);
-  if (isRgb(color)) return rgb(color);
-  if (isHsla$1(color)) return hsla$1(color);
-  if (isHsl(color)) return hsl(color);
-  throw new PolishedError(8);
+  throw new PolishedError(7);
 }
 
 // Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
@@ -20010,156 +19849,14 @@ function curried(f, length, acc) {
     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
+
 
-// eslint-disable-next-line no-redeclare
 function curry(f) {
   // eslint-disable-line no-redeclare
   return curried(f, f.length, []);
 }
 
-/**
- * Changes the hue of the color. Hue is a number between 0 to 360. The first
- * argument for adjustHue is the amount of degrees the color is rotated around
- * the color wheel, always producing a positive hue value.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: adjustHue(180, '#448'),
- *   background: adjustHue('180', 'rgba(101,100,205,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${adjustHue(180, '#448')};
- *   background: ${adjustHue('180', 'rgba(101,100,205,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#888844";
- *   background: "rgba(136,136,68,0.7)";
- * }
- */
-function adjustHue(degree, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    hue: hslColor.hue + parseFloat(degree)
-  }));
-}
-
-// prettier-ignore
-var curriedAdjustHue = curry /* ::<number | string, string, string> */(adjustHue);
-
-function guard(lowerBoundary, upperBoundary, value) {
-  return Math.max(lowerBoundary, Math.min(upperBoundary, value));
-}
-
-/**
- * Returns a string value for the darkened color.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: darken(0.2, '#FFCD64'),
- *   background: darken('0.2', 'rgba(255,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${darken(0.2, '#FFCD64')};
- *   background: ${darken('0.2', 'rgba(255,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#ffbd31";
- *   background: "rgba(255,189,49,0.7)";
- * }
- */
-function darken(amount, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    lightness: guard(0, 1, hslColor.lightness - parseFloat(amount))
-  }));
-}
-
-// prettier-ignore
-var curriedDarken = curry /* ::<number | string, string, string> */(darken);
-
-/**
- * Decreases the intensity of a color. Its range is between 0 to 1. The first
- * argument of the desaturate function is the amount by how much the color
- * intensity should be decreased.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: desaturate(0.2, '#CCCD64'),
- *   background: desaturate('0.2', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${desaturate(0.2, '#CCCD64')};
- *   background: ${desaturate('0.2', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#b8b979";
- *   background: "rgba(184,185,121,0.7)";
- * }
- */
-function desaturate(amount, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    saturation: guard(0, 1, hslColor.saturation - parseFloat(amount))
-  }));
-}
-
-// prettier-ignore
-var curriedDesaturate = curry /* ::<number | string, string, string> */(desaturate);
-
-/**
- * Returns a string value for the lightened color.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: lighten(0.2, '#CCCD64'),
- *   background: lighten('0.2', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${lighten(0.2, '#FFCD64')};
- *   background: ${lighten('0.2', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#e5e6b1";
- *   background: "rgba(229,230,177,0.7)";
- * }
- */
-function lighten(amount, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    lightness: guard(0, 1, hslColor.lightness + parseFloat(amount))
-  }));
-}
-
-// prettier-ignore
-var curriedLighten = curry /* ::<number | string, string, string> */(lighten);
-
 /**
  * Mixes the two provided colors together by calculating the average of each of the RGB components weighted to the first color by the provided weight.
  *
@@ -20186,21 +19883,25 @@ var curriedLighten = curry /* ::<number | string, string, string> */(lighten);
  *   background: "rgba(63, 0, 191, 0.75)";
  * }
  */
+
 function mix$1(weight, color, otherColor) {
   if (color === 'transparent') return otherColor;
   if (otherColor === 'transparent') return color;
   if (weight === 0) return otherColor;
   var parsedColor1 = parseToRgb(color);
+
   var color1 = _extends$1({}, parsedColor1, {
     alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1
   });
+
   var parsedColor2 = parseToRgb(otherColor);
+
   var color2 = _extends$1({}, parsedColor2, {
     alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1
-  });
-
-  // The formula is copied from the original Sass implementation:
+  }); // The formula is copied from the original Sass implementation:
   // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
+
+
   var alphaDelta = color1.alpha - color2.alpha;
   var x = parseFloat(weight) * 2 - 1;
   var y = x * alphaDelta === -1 ? x : x + alphaDelta;
@@ -20214,217 +19915,13 @@ function mix$1(weight, color, otherColor) {
     alpha: color1.alpha * parseFloat(weight) + color2.alpha * (1 - parseFloat(weight))
   };
   return rgba$1(mixedColor);
-}
-
-// prettier-ignore
-var curriedMix = curry /* ::<number | string, string, string, string> */(mix$1);
-var mix$1$1 = curriedMix;
-
-/**
- * Increases the opacity of a color. Its range for the amount is between 0 to 1.
- *
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: opacify(0.1, 'rgba(255, 255, 255, 0.9)');
- *   background: opacify(0.2, 'hsla(0, 0%, 100%, 0.5)'),
- *   background: opacify('0.5', 'rgba(255, 0, 0, 0.2)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${opacify(0.1, 'rgba(255, 255, 255, 0.9)')};
- *   background: ${opacify(0.2, 'hsla(0, 0%, 100%, 0.5)')},
- *   background: ${opacify('0.5', 'rgba(255, 0, 0, 0.2)')},
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#fff";
- *   background: "rgba(255,255,255,0.7)";
- *   background: "rgba(255,0,0,0.7)";
- * }
- */
-function opacify(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) / 100)
-  });
-  return rgba$1(colorWithAlpha);
-}
+} // prettier-ignore
 
-// prettier-ignore
-var curriedOpacify = curry /* ::<number | string, string, string> */(opacify);
 
-/**
- * Increases the intensity of a color. Its range is between 0 to 1. The first
- * argument of the saturate function is the amount by how much the color
- * intensity should be increased.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: saturate(0.2, '#CCCD64'),
- *   background: saturate('0.2', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${saturate(0.2, '#FFCD64')};
- *   background: ${saturate('0.2', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#e0e250";
- *   background: "rgba(224,226,80,0.7)";
- * }
- */
-function saturate(amount, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    saturation: guard(0, 1, hslColor.saturation + parseFloat(amount))
-  }));
-}
-
-// prettier-ignore
-var curriedSaturate = curry /* ::<number | string, string, string> */(saturate);
-
-/**
- * Sets the hue of a color to the provided value. The hue range can be
- * from 0 and 359.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: setHue(42, '#CCCD64'),
- *   background: setHue('244', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${setHue(42, '#CCCD64')};
- *   background: ${setHue('244', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#cdae64";
- *   background: "rgba(107,100,205,0.7)";
- * }
- */
-function setHue(hue, color) {
-  if (color === 'transparent') return color;
-  return toColorString(_extends$1({}, parseToHsl(color), {
-    hue: parseFloat(hue)
-  }));
-}
-
-// prettier-ignore
-var curriedSetHue = curry /* ::<number | string, string, string> */(setHue);
-
-/**
- * Sets the lightness of a color to the provided value. The lightness range can be
- * from 0 and 1.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: setLightness(0.2, '#CCCD64'),
- *   background: setLightness('0.75', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${setLightness(0.2, '#CCCD64')};
- *   background: ${setLightness('0.75', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#4d4d19";
- *   background: "rgba(223,224,159,0.7)";
- * }
- */
-function setLightness(lightness, color) {
-  if (color === 'transparent') return color;
-  return toColorString(_extends$1({}, parseToHsl(color), {
-    lightness: parseFloat(lightness)
-  }));
-}
-
-// prettier-ignore
-var curriedSetLightness = curry /* ::<number | string, string, string> */(setLightness);
-
-/**
- * Sets the saturation of a color to the provided value. The saturation range can be
- * from 0 and 1.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: setSaturation(0.2, '#CCCD64'),
- *   background: setSaturation('0.75', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${setSaturation(0.2, '#CCCD64')};
- *   background: ${setSaturation('0.75', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#adad84";
- *   background: "rgba(228,229,76,0.7)";
- * }
- */
-function setSaturation(saturation, color) {
-  if (color === 'transparent') return color;
-  return toColorString(_extends$1({}, parseToHsl(color), {
-    saturation: parseFloat(saturation)
-  }));
-}
-
-// prettier-ignore
-var curriedSetSaturation = curry /* ::<number | string, string, string> */(setSaturation);
-
-/**
- * Shades a color by mixing it with black. `shade` can produce
- * hue shifts, where as `darken` manipulates the luminance channel and therefore
- * doesn't produce hue shifts.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: shade(0.25, '#00f')
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${shade(0.25, '#00f')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#00003f";
- * }
- */
-
-function shade(percentage, color) {
-  if (color === 'transparent') return color;
-  return mix$1$1(parseFloat(percentage), 'rgb(0, 0, 0)', color);
-}
-
-// prettier-ignore
-var curriedShade = curry /* ::<number | string, string, string> */(shade);
+var curriedMix = /*#__PURE__*/curry
+/* ::<number | string, string, string, string> */
+(mix$1);
+var mix$1$1 = curriedMix;
 
 /**
  * Tints a color by mixing it with white. `tint` can produce
@@ -20452,51 +19949,13 @@ var curriedShade = curry /* ::<number | string, string, string> */(shade);
 function tint(percentage, color) {
   if (color === 'transparent') return color;
   return mix$1$1(parseFloat(percentage), 'rgb(255, 255, 255)', color);
-}
-
-// prettier-ignore
-var curriedTint = curry /* ::<number | string, string, string> */(tint);
-var curriedTint$1 = curriedTint;
+} // prettier-ignore
 
-/**
- * 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$1(colorWithAlpha);
-}
 
-// prettier-ignore
-var curriedTransparentize = curry /* ::<number | string, string, string> */(transparentize);
+var curriedTint = /*#__PURE__*/curry
+/* ::<number | string, string, string> */
+(tint);
+var curriedTint$1 = curriedTint;
 
 var linkColor = MATISSE_BLUE;
 var fallbackValues$8 = {
@@ -23187,19 +22646,32 @@ var toIndexedObject = function (it) {
   return indexedObject(requireObjectCoercible(it));
 };
 
-// https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot
 var documentAll = typeof document == 'object' && document.all;
 
+// https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot
+// eslint-disable-next-line unicorn/no-typeof-undefined -- required for testing
+var IS_HTMLDDA = typeof documentAll == 'undefined' && documentAll !== undefined;
+
+var documentAll_1 = {
+  all: documentAll,
+  IS_HTMLDDA: IS_HTMLDDA
+};
+
+var documentAll$1 = documentAll_1.all;
+
 // `IsCallable` abstract operation
 // https://tc39.es/ecma262/#sec-iscallable
-// eslint-disable-next-line unicorn/no-typeof-undefined -- required for testing
-var isCallable = typeof documentAll == 'undefined' && documentAll !== undefined ? function (argument) {
-  return typeof argument == 'function' || argument === documentAll;
+var isCallable = documentAll_1.IS_HTMLDDA ? function (argument) {
+  return typeof argument == 'function' || argument === documentAll$1;
 } : function (argument) {
   return typeof argument == 'function';
 };
 
-var isObject = function (it) {
+var documentAll$2 = documentAll_1.all;
+
+var isObject = documentAll_1.IS_HTMLDDA ? function (it) {
+  return typeof it == 'object' ? it !== null : isCallable(it) || it === documentAll$2;
+} : function (it) {
   return typeof it == 'object' ? it !== null : isCallable(it);
 };
 
@@ -23335,10 +22807,10 @@ var shared = createCommonjsModule(function (module) {
 (module.exports = function (key, value) {
   return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.35.1',
+  version: '3.33.3',
   mode:  'global',
-  copyright: '© 2014-2024 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.35.1/LICENSE',
+  copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
+  license: 'https://github.com/zloirock/core-js/blob/v3.33.3/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 });
@@ -23635,7 +23107,7 @@ var TEMPLATE = String(String).split('String');
 
 var makeBuiltIn = module.exports = function (value, name, options) {
   if (stringSlice($String(name), 0, 7) === 'Symbol(') {
-    name = '[' + replace($String(name), /^Symbol\(([^)]*)\).*$/, '$1') + ']';
+    name = '[' + replace($String(name), /^Symbol\(([^)]*)\)/, '$1') + ']';
   }
   if (options && options.getter) name = 'get ' + name;
   if (options && options.setter) name = 'set ' + name;
@@ -23723,8 +23195,7 @@ var min$1 = Math.min;
 // `ToLength` abstract operation
 // https://tc39.es/ecma262/#sec-tolength
 var toLength = function (argument) {
-  var len = toIntegerOrInfinity(argument);
-  return len > 0 ? min$1(len, 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
+  return argument > 0 ? min$1(toIntegerOrInfinity(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
 };
 
 // `LengthOfArrayLike` abstract operation
@@ -23884,7 +23355,7 @@ var _export = function (options, source) {
   } else if (STATIC) {
     target = global_1[TARGET] || defineGlobalProperty(TARGET, {});
   } else {
-    target = global_1[TARGET] && global_1[TARGET].prototype;
+    target = (global_1[TARGET] || {}).prototype;
   }
   if (target) for (key in source) {
     sourceProperty = source[key];
@@ -24147,15 +23618,11 @@ var functionUncurryThisAccessor = function (object, key, method) {
   } catch (error) { /* empty */ }
 };
 
-var isPossiblePrototype = function (argument) {
-  return isObject(argument) || argument === null;
-};
-
 var $String$4 = String;
 var $TypeError$6 = TypeError;
 
 var aPossiblePrototype = function (argument) {
-  if (isPossiblePrototype(argument)) return argument;
+  if (typeof argument == 'object' || isCallable(argument)) return argument;
   throw new $TypeError$6("Can't set " + $String$4(argument) + ' as a prototype');
 };
 
@@ -46208,7 +45675,9 @@ var Modal$1 = function Modal(_ref) {
     _ref$dataQa = _ref.dataQa,
     dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
     _ref$initialFocusSele = _ref.initialFocusSelector,
-    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+    _ref$blurUnderlay = _ref.blurUnderlay,
+    blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   var modalContainerRef = React.useRef(null);
@@ -46228,7 +45697,10 @@ var Modal$1 = function Modal(_ref) {
       display: "flex",
       flexDirection: "column",
       justifyContent: "center",
-      alignItems: "center"
+      alignItems: "center",
+      background: "rgba(41, 42, 51, 0.45)",
+      backdropFilter: blurUnderlay ? "blur(4px)" : "none",
+      WebkitBackdropFilter: blurUnderlay ? "blur(4px)" : "none"
     },
     dialogStyle: {
       width: customWidth || "615px",