@thecb/components 10.6.2-beta.7 → 10.6.2

package/dist/index.cjs.js

@@ -6427,7 +6427,7 @@ var Text = function Text(_ref) {
 };
 var Text$1 = themeComponent(Text, "Text", fallbackValues, "p");
 
-var _excluded$2 = ["activeStyles", "focusStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles", "ariaControls", "ariaLabel"];
+var _excluded$2 = ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles", "ariaControls", "ariaLabel"];
 /*
   The child span selector on hover styles targets the text inside of buttons when a button is hovered,
   as long as the box wrapper has an "as" prop equal to "button"
@@ -6439,7 +6439,6 @@ var _excluded$2 = ["activeStyles", "focusStyles", "hoverStyles", "disabledStyles
 /* eslint-disable no-unused-vars */
 var BoxWrapper = styled__default(function (_ref) {
   var activeStyles = _ref.activeStyles,
-    focusStyles = _ref.focusStyles,
     hoverStyles = _ref.hoverStyles,
     disabledStyles = _ref.disabledStyles,
     extraStyles = _ref.extraStyles,
@@ -6508,9 +6507,8 @@ var BoxWrapper = styled__default(function (_ref) {
     disabled = _ref14.disabled;
   return styled.css(["", " ", ""], hoverStyles, as === "button" && !disabled ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref15) {
-  var focusStyles = _ref15.focusStyles,
-    as = _ref15.as;
-  return styled.css(["", " outline:3px solid ", ";outline-offset:2px;", ""], focusStyles, ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
+  var as = _ref15.as;
+  return styled.css(["outline:3px solid ", ";outline-offset:2px;", ""], ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
 }, function (_ref16) {
   var activeStyles = _ref16.activeStyles,
     as = _ref16.as;
@@ -6535,7 +6533,7 @@ var BoxWrapper = styled__default(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var _excluded$3 = ["autocompleteValue", "padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "focusStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"];
+var _excluded$3 = ["autocompleteValue", "padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"];
 
 /*
   Box component to create generic boxes
@@ -6568,7 +6566,6 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     disabledStyles = _ref.disabledStyles,
-    focusStyles = _ref.focusStyles,
     variant = _ref.variant,
     as = _ref.as,
     onClick = _ref.onClick,
@@ -6604,7 +6601,6 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     hoverStyles: hoverStyles,
     activeStyles: activeStyles,
     disabledStyles: disabledStyles,
-    focusStyles: focusStyles,
     variant: variant,
     as: as,
     onClick: onClick,
@@ -13589,7 +13585,8 @@ var SettingsIconSmall$1 = themeComponent(SettingsIconSmall, "Icons", fallbackVal
 var WalletIconSmall = function WalletIconSmall(_ref) {
   var themeValues = _ref.themeValues,
     _ref$iconIndex = _ref.iconIndex,
-    iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex;
+    iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex,
+    colorOverride = _ref.colorOverride;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "20",
     height: "20",
@@ -13600,7 +13597,7 @@ var WalletIconSmall = function WalletIconSmall(_ref) {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M16.3125 6.94643C16.0446 6.70536 15.7232 6.57143 15.3482 6.57143L5.14283 6.57143C5.0089 6.57143 4.90176 6.54464 4.8214 6.46429C4.74104 6.38393 4.71426 6.27678 4.71426 6.14286C4.71426 6.03571 4.74104 5.92857 4.8214 5.84821C4.90176 5.76786 5.0089 5.71428 5.14283 5.71428L15.4285 5.71428C15.5357 5.71428 15.6428 5.6875 15.7232 5.60714C15.8035 5.52678 15.8571 5.41964 15.8571 5.28571C15.8571 4.9375 15.7232 4.64286 15.4821 4.375C15.2143 4.13393 14.9196 4 14.5714 4L4.71426 4C4.23211 4 3.80354 4.1875 3.48211 4.50893C3.16068 4.83036 2.99997 5.23214 2.99997 5.71428V14.2857C2.99997 14.7679 3.16068 15.1964 3.48211 15.5179C3.80354 15.8393 4.23211 16 4.71426 16L15.3482 16C15.7232 16 16.0446 15.8929 16.3125 15.625C16.5803 15.3839 16.7143 15.0893 16.7143 14.7143V7.85714C16.7143 7.50893 16.5803 7.21428 16.3125 6.94643ZM12.7142 13.143C13.661 13.143 14.4285 12.3755 14.4285 11.4288C14.4285 10.482 13.661 9.71447 12.7142 9.71447C11.7674 9.71447 10.9999 10.482 10.9999 11.4288C10.9999 12.3755 11.7674 13.143 12.7142 13.143Z",
-    fill: themeValues.singleIconColor
+    fill: colorOverride || themeValues.singleIconColor
   }), /*#__PURE__*/React__default.createElement("mask", {
     id: "mask0_503_574-".concat(iconIndex),
     style: {
@@ -13621,7 +13618,7 @@ var WalletIconSmall = function WalletIconSmall(_ref) {
   }, /*#__PURE__*/React__default.createElement("rect", {
     width: "20",
     height: "20",
-    fill: themeValues.singleIconColor
+    fill: colorOverride || themeValues.singleIconColor
   })));
 };
 var WalletIconSmall$1 = themeComponent(WalletIconSmall, "Icons", fallbackValues$2, "primary");
@@ -19618,7 +19615,6 @@ 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
@@ -19703,84 +19699,71 @@ 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;
@@ -19800,7 +19783,6 @@ function hslToRgb(hue, saturation, lightness, convert) {
     red = chroma;
     blue = secondComponent;
   }
-
   var lightnessModification = lightness - chroma / 2;
   var finalRed = red + lightnessModification;
   var finalGreen = green + lightnessModification;
@@ -19958,11 +19940,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();
@@ -19977,6 +19959,7 @@ 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
@@ -19988,14 +19971,11 @@ 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),
@@ -20003,7 +19983,6 @@ 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 {
@@ -20013,7 +19992,6 @@ function parseToRgb(color) {
       alpha: alpha
     };
   }
-
   if (normalizedColor.match(reducedHexRegex)) {
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
@@ -20021,10 +19999,8 @@ 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),
@@ -20032,9 +20008,7 @@ function parseToRgb(color) {
       alpha: _alpha
     };
   }
-
   var rgbMatched = rgbRegex.exec(normalizedColor);
-
   if (rgbMatched) {
     return {
       red: parseInt("" + rgbMatched[1], 10),
@@ -20042,9 +20016,7 @@ function parseToRgb(color) {
       blue: parseInt("" + rgbMatched[3], 10)
     };
   }
-
   var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
-
   if (rgbaMatched) {
     return {
       red: parseInt("" + rgbaMatched[1], 10),
@@ -20053,44 +20025,32 @@ 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),
@@ -20098,10 +20058,82 @@ 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));
+}
+
 /**
  * Reduces hex values if possible e.g. #ff8866 to #f86
  * @private
@@ -20110,10 +20142,8 @@ 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) {
@@ -20121,6 +20151,83 @@ 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.
  *
@@ -20150,7 +20257,6 @@ 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);
 }
 
@@ -20197,10 +20303,62 @@ 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);
+}
+
 // 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
@@ -20211,14 +20369,156 @@ 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.
  *
@@ -20245,25 +20545,21 @@ function curry(f) {
  *   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:
-  // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
-
+  });
 
+  // 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;
@@ -20277,14 +20573,218 @@ function mix$1(weight, color, otherColor) {
     alpha: color1.alpha * parseFloat(weight) + color2.alpha * (1 - parseFloat(weight))
   };
   return rgba$1(mixedColor);
-} // prettier-ignore
-
+}
 
-var curriedMix = /*#__PURE__*/curry
-/* ::<number | string, string, string, string> */
-(mix$1);
+// 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
+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);
+
 /**
  * Tints a color by mixing it with white. `tint` can produce
  * hue shifts, where as `lighten` manipulates the luminance channel and therefore
@@ -20311,14 +20811,52 @@ var mix$1$1 = curriedMix;
 function tint(percentage, color) {
   if (color === 'transparent') return color;
   return mix$1$1(parseFloat(percentage), 'rgb(255, 255, 255)', color);
-} // prettier-ignore
-
+}
 
-var curriedTint = /*#__PURE__*/curry
-/* ::<number | string, string, string> */
-(tint);
+// prettier-ignore
+var curriedTint = curry /* ::<number | string, string, string> */(tint);
 var curriedTint$1 = curriedTint;
 
+/**
+ * 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 linkColor = MATISSE_BLUE;
 var fallbackValues$8 = {
   linkColor: linkColor
@@ -23008,32 +23546,19 @@ var toIndexedObject = function (it) {
   return indexedObject(requireObjectCoercible(it));
 };
 
-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;
+var documentAll = typeof document == 'object' && document.all;
 
 // `IsCallable` abstract operation
 // https://tc39.es/ecma262/#sec-iscallable
-var isCallable = documentAll_1.IS_HTMLDDA ? function (argument) {
-  return typeof argument == 'function' || argument === documentAll$1;
+// 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;
 } : function (argument) {
   return typeof argument == 'function';
 };
 
-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) {
+var isObject = function (it) {
   return typeof it == 'object' ? it !== null : isCallable(it);
 };
 
@@ -23169,10 +23694,10 @@ var shared = createCommonjsModule(function (module) {
 (module.exports = function (key, value) {
   return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.33.3',
+  version: '3.35.1',
   mode:  'global',
-  copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.33.3/LICENSE',
+  copyright: '© 2014-2024 Denis Pushkarev (zloirock.ru)',
+  license: 'https://github.com/zloirock/core-js/blob/v3.35.1/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 });
@@ -23469,7 +23994,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;
@@ -23557,7 +24082,8 @@ var min$1 = Math.min;
 // `ToLength` abstract operation
 // https://tc39.es/ecma262/#sec-tolength
 var toLength = function (argument) {
-  return argument > 0 ? min$1(toIntegerOrInfinity(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
+  var len = toIntegerOrInfinity(argument);
+  return len > 0 ? min$1(len, 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
 };
 
 // `LengthOfArrayLike` abstract operation
@@ -23717,7 +24243,7 @@ var _export = function (options, source) {
   } else if (STATIC) {
     target = global_1[TARGET] || defineGlobalProperty(TARGET, {});
   } else {
-    target = (global_1[TARGET] || {}).prototype;
+    target = global_1[TARGET] && global_1[TARGET].prototype;
   }
   if (target) for (key in source) {
     sourceProperty = source[key];
@@ -23980,11 +24506,15 @@ 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 (typeof argument == 'object' || isCallable(argument)) return argument;
+  if (isPossiblePrototype(argument)) return argument;
   throw new $TypeError$6("Can't set " + $String$4(argument) + ' as a prototype');
 };
 
@@ -27585,11 +28115,7 @@ var renderContent = function renderContent(_ref2) {
     padding: "0",
     minHeight: "100%",
     extraStyles: "cursor: pointer;",
-    dataQa: dataQa,
-    tabIndex: "0",
-    onKeyPress: function onKeyPress(e) {
-      return e.key === "Enter" && action();
-    }
+    dataQa: dataQa
   }, children);
 };
 var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref3) {
@@ -27624,7 +28150,6 @@ var Placeholder = function Placeholder(_ref4) {
     _ref4$isDisabled = _ref4.isDisabled,
     isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled,
     dataQa = _ref4.dataQa;
-  var borderColor = isDisabled ? MANATEE_GREY : themeValues.color;
   return /*#__PURE__*/React__default.createElement(PlaceholderContentWrapper, {
     isLink: isLink,
     action: action,
@@ -27637,14 +28162,16 @@ var Placeholder = function Placeholder(_ref4) {
     border: "none",
     minHeight: themeValues.height,
     hiddenStyles: !visible,
-    extraStyles: "\n          display: flex;\n          justify-content: center;\n          align-items:center;\n          background-image: repeating-linear-gradient(0deg, ".concat(borderColor, ", ").concat(borderColor, " 2px, transparent 2px, transparent 4px, ").concat(borderColor, " 4px), repeating-linear-gradient(90deg, ").concat(borderColor, ", ").concat(borderColor, " 2px, transparent 2px, transparent 4px, ").concat(borderColor, " 4px), repeating-linear-gradient(180deg, ").concat(borderColor, ", ").concat(borderColor, " 2px, transparent 2px, transparent 4px, ").concat(borderColor, " 4px), repeating-linear-gradient(270deg, ").concat(borderColor, ", ").concat(borderColor, " 2px, transparent 2px, transparent 4px, ").concat(borderColor, " 4px);\n          background-size: 2px 100%, 100% 2px, 2px 100% , 100% 2px;\n          background-position: 0 0, 0 0, 100% 0, 0 100%;\n          background-repeat: no-repeat;\n        "),
-    hoverStyles: "background-color: ".concat(isDisabled ? TRANSPARENT : curriedTint$1(0.9, themeValues.color), ";"),
-    focusStyles: "background-color: ".concat(isDisabled ? TRANSPARENT : curriedTint$1(0.9, themeValues.color), ";"),
-    activeStyles: "background-color: ".concat(isDisabled ? TRANSPARENT : curriedTint$1(0.8, themeValues.color), "; ").concat(!isDisabled && "background-image:none; border: 2px solid ".concat(borderColor, ";}"))
+    extraStyles: isDisabled ? "border: 1px dashed ".concat(MANATEE_GREY, "; \n        display: flex;\n        justify-content: center;\n        align-items:center;") : "\n        background: linear-gradient(\n          to right,\n          ".concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
+    hoverStyles: "background-color: ".concat(isDisabled ? TRANSPARENT : variant === "large" ? GRECIAN_GREY : curriedTint$1(0.9, themeValues.color), ";")
   }, /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0"
+    padding: "0",
+    tabIndex: "0",
+    onKeyPress: function onKeyPress(e) {
+      return isDisabled ? noop : e.key === "Enter" && action();
+    }
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
     align: "center",
@@ -27655,7 +28182,7 @@ var Placeholder = function Placeholder(_ref4) {
   }, variant === "large" && /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     "aria-disabled": isDisabled,
-    extraStyles: ".fill { \n                    fill: ".concat(isDisabled ? MANATEE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(isDisabled ? MANATEE_GREY : themeValues.color, "; \n                  } ")
+    extraStyles: ".fill { \n                    fill: ".concat(isDisabled ? MANATEE_GREY : variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(isDisabled ? MANATEE_GREY : variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } ")
   }, variant === "large" ? /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
   }, getLargeIcon(largeIcon, isDisabled), /*#__PURE__*/React__default.createElement(Text$1, {
@@ -27669,8 +28196,9 @@ var Placeholder = function Placeholder(_ref4) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
     align: "center"
-  }, /*#__PURE__*/React__default.createElement(PlusCircleIcon, {
-    color: isDisabled ? MANATEE_GREY : themeValues.color
+  }, /*#__PURE__*/React__default.createElement(IconAdd, {
+    fill: isDisabled ? MANATEE_GREY : WHITE,
+    strokeWidth: "2"
   }), /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -39119,7 +39647,9 @@ var Module = function Module(_ref) {
     spacingBottom = _ref$spacingBottom === void 0 ? "2.5rem" : _ref$spacingBottom,
     fontSize = _ref.fontSize,
     themeValues = _ref.themeValues,
-    children = _ref.children;
+    children = _ref.children,
+    _ref$allowContentOver = _ref.allowContentOverflow,
+    allowContentOverflow = _ref$allowContentOver === void 0 ? false : _ref$allowContentOver;
   var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
   var computedFontSize = fontSize || themedFontSize;
   var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
@@ -39142,6 +39672,7 @@ var Module = function Module(_ref) {
   }, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center",
+    overflow: allowContentOverflow,
     nowrap: true
   }, headingText, rightTitleContent), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 ".concat(spacingBottom),
@@ -48391,9 +48922,9 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     justify: "space-between",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Title$1, {
-    weight: FONT_WEIGHT_BOLD,
+    weight: FONT_WEIGHT_SEMIBOLD,
     as: "h2",
-    extraStyles: "font-size: 1.375rem;",
+    extraStyles: "font-size: 1.5rem; line-height: ".concat(isMobile ? "2.2857rem" : "2.25rem", ";"),
     id: "payment-details-title"
   }, titleText), /*#__PURE__*/React__default.createElement(Title$1, {
     weight: FONT_WEIGHT_BOLD,
@@ -48401,9 +48932,9 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     extraStyles: "font-size: 1.375rem;"
   }, displayCurrency(total)))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Title$1, {
     as: "h2",
-    weight: FONT_WEIGHT_BOLD,
+    weight: FONT_WEIGHT_SEMIBOLD,
     margin: "1rem 0 0 0",
-    extraStyles: "font-size: 1.75rem;",
+    extraStyles: "font-size: 1.5rem; line-height: ".concat(isMobile ? "2.2857rem" : "2.25rem", ";"),
     id: "payment-details-title"
   }, titleText), agencySubheading);
   return isCollapsible ? /*#__PURE__*/React__default.createElement(Collapsible, {