@thecb/components 10.4.9-beta.0 → 10.5.0-beta.1

package/dist/index.cjs.js

@@ -4908,27 +4908,35 @@ var themeUtils = /*#__PURE__*/Object.freeze({
 
 /* These are constants used by nav frontend components */
 
-var HEADER_HEIGHT = "104px";
-var FOOTER_HEIGHT = "100px";
-var SPACER_HEIGHT = "65px";
-var JUMBO_HEIGHT = "300px";
-var COMPACT_JUMBO_HEIGHT = "65px";
+var BORDER_THIN = "1px";
+var CORNER_STANDARD = "4px";
 var FONT_WEIGHT_REGULAR = "400";
-var FONT_WEIGHT_BOLD = "700";
 var FONT_WEIGHT_SEMIBOLD = "600";
+var FONT_WEIGHT_BOLD = "700";
+var FOOTER_HEIGHT = "100px";
+var HEADER_HEIGHT = "104px";
+var COMPACT_JUMBO_HEIGHT = "65px";
+var JUMBO_HEIGHT = "300px";
+var SPACER_HEIGHT = "65px";
 var LINK_TEXT_DECORATION = "underline solid 1px";
+var SPACING_XS = "1.0rem";
+var SPACING_NORMAL = "1.5rem";
 
 var style_constants = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  HEADER_HEIGHT: HEADER_HEIGHT,
-  FOOTER_HEIGHT: FOOTER_HEIGHT,
-  SPACER_HEIGHT: SPACER_HEIGHT,
-  JUMBO_HEIGHT: JUMBO_HEIGHT,
-  COMPACT_JUMBO_HEIGHT: COMPACT_JUMBO_HEIGHT,
+  BORDER_THIN: BORDER_THIN,
+  CORNER_STANDARD: CORNER_STANDARD,
   FONT_WEIGHT_REGULAR: FONT_WEIGHT_REGULAR,
-  FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
   FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD,
-  LINK_TEXT_DECORATION: LINK_TEXT_DECORATION
+  FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
+  FOOTER_HEIGHT: FOOTER_HEIGHT,
+  HEADER_HEIGHT: HEADER_HEIGHT,
+  COMPACT_JUMBO_HEIGHT: COMPACT_JUMBO_HEIGHT,
+  JUMBO_HEIGHT: JUMBO_HEIGHT,
+  SPACER_HEIGHT: SPACER_HEIGHT,
+  LINK_TEXT_DECORATION: LINK_TEXT_DECORATION,
+  SPACING_XS: SPACING_XS,
+  SPACING_NORMAL: SPACING_NORMAL
 });
 
 /*
@@ -14180,7 +14188,7 @@ var IconQuitLarge = function IconQuitLarge(_ref) {
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink"
-  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("polygon", {
+  }, /*#__PURE__*/React__default.createElement("title", null, "Icon/X"), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("polygon", {
     id: "quit-large-path-1",
     points: "18.9999989 6.40999946 17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993"
   })), /*#__PURE__*/React__default.createElement("g", {
@@ -19308,7 +19316,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
@@ -19393,84 +19400,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;
@@ -19490,7 +19484,6 @@ function hslToRgb(hue, saturation, lightness, convert) {
     red = chroma;
     blue = secondComponent;
   }
-
   var lightnessModification = lightness - chroma / 2;
   var finalRed = red + lightnessModification;
   var finalGreen = green + lightnessModification;
@@ -19648,11 +19641,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();
@@ -19667,6 +19660,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
@@ -19678,14 +19672,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),
@@ -19693,7 +19684,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 {
@@ -19703,7 +19693,6 @@ function parseToRgb(color) {
       alpha: alpha
     };
   }
-
   if (normalizedColor.match(reducedHexRegex)) {
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
@@ -19711,10 +19700,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),
@@ -19722,9 +19709,7 @@ function parseToRgb(color) {
       alpha: _alpha
     };
   }
-
   var rgbMatched = rgbRegex.exec(normalizedColor);
-
   if (rgbMatched) {
     return {
       red: parseInt("" + rgbMatched[1], 10),
@@ -19732,9 +19717,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),
@@ -19743,44 +19726,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),
@@ -19788,10 +19759,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
@@ -19800,10 +19843,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) {
@@ -19811,6 +19852,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.
  *
@@ -19840,7 +19958,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);
 }
 
@@ -19887,10 +20004,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
@@ -19901,14 +20070,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.
  *
@@ -19935,25 +20246,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;
@@ -19967,14 +20274,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
@@ -20001,14 +20512,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
@@ -22698,32 +23247,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);
 };
 
@@ -22859,10 +23395,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'
 });
 });
@@ -23159,7 +23695,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;
@@ -23247,7 +23783,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
@@ -23407,7 +23944,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];
@@ -23670,11 +24207,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');
 };
 
@@ -25461,7 +26002,7 @@ var useToastNotification = function useToastNotification() {
     toastState = _useState2[0],
     setToastState = _useState2[1];
   React.useEffect(function () {
-    if (toastState.isOpen && timeout > 0) {
+    if (toastState.isOpen) {
       setTimeout(function () {
         setToastState(initialToastState);
       }, timeout);
@@ -45895,6 +46436,282 @@ var Modal$1 = function Modal(_ref) {
   }))))))))), children);
 };
 
+var ButtonLayoutWrapper = function ButtonLayoutWrapper(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? [] : _ref$children,
+    _ref$isMobile = _ref.isMobile,
+    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
+  var safeChildren = Array.isArray(children) ? children : [children];
+  var flexGrow = isMobile ? "flex-grow: 1;" : "";
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: SPACING_NORMAL
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "1rem",
+    direction: "row",
+    justify: "flex-end"
+  }, safeChildren.map(function (child, index) {
+    return /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0",
+      extraStyles: flexGrow,
+      key: index
+    }, child);
+  })));
+};
+
+var CancelButton = function CancelButton(_ref) {
+  var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
+    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
+    _ref$cancelAction = _ref.cancelAction,
+    cancelAction = _ref$cancelAction === void 0 ? noop : _ref$cancelAction,
+    _ref$cancelButtonText = _ref.cancelButtonText,
+    cancelButtonText = _ref$cancelButtonText === void 0 ? "" : _ref$cancelButtonText,
+    _ref$hideModal = _ref.hideModal,
+    hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
+    _ref$isMobile = _ref.isMobile,
+    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
+  var fullWidth = isMobile ? "width: 100%;" : "";
+  return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    action: cancelAction ? cancelAction : hideModal,
+    borderRadius: CORNER_STANDARD,
+    className: "modal-cancel-button",
+    dataQa: cancelButtonText,
+    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(fullWidth),
+    name: cancelButtonText,
+    role: "button",
+    text: cancelButtonText,
+    variant: "secondary"
+  });
+};
+
+var CloseButton = function CloseButton(_ref) {
+  var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
+    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
+    _ref$closeButtonText = _ref.closeButtonText,
+    closeButtonText = _ref$closeButtonText === void 0 ? "" : _ref$closeButtonText,
+    _ref$hideModal = _ref.hideModal,
+    hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
+    _ref$isMobile = _ref.isMobile,
+    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
+  var fullWidth = isMobile ? "width: 100%;" : "";
+  return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    action: hideModal,
+    borderRadius: CORNER_STANDARD,
+    className: "modal-close-button",
+    dataQa: closeButtonText,
+    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(fullWidth),
+    name: closeButtonText,
+    role: "button",
+    text: closeButtonText,
+    variant: "primary"
+  });
+};
+
+var ContinueButton = function ContinueButton(_ref) {
+  var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
+    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
+    _ref$continueAction = _ref.continueAction,
+    continueAction = _ref$continueAction === void 0 ? noop : _ref$continueAction,
+    _ref$continueButtonTe = _ref.continueButtonText,
+    continueButtonText = _ref$continueButtonTe === void 0 ? "" : _ref$continueButtonTe,
+    _ref$continueURL = _ref.continueURL,
+    continueURL = _ref$continueURL === void 0 ? "" : _ref$continueURL,
+    _ref$isContinueAction = _ref.isContinueActionDisabled,
+    isContinueActionDisabled = _ref$isContinueAction === void 0 ? false : _ref$isContinueAction,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$isMobile = _ref.isMobile,
+    isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
+    _ref$useDangerButton = _ref.useDangerButton,
+    useDangerButton = _ref$useDangerButton === void 0 ? false : _ref$useDangerButton;
+  var ContinueButtonAtom = continueURL ? ButtonWithLink : ButtonWithAction;
+  var fullWidth = isMobile ? "width: 100%;" : "";
+  return /*#__PURE__*/React__default.createElement(ContinueButtonAtom, {
+    action: continueAction,
+    borderRadius: CORNER_STANDARD,
+    className: "modal-continue-button",
+    dataQa: continueButtonText,
+    disabled: isContinueActionDisabled,
+    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(fullWidth),
+    isLoading: isLoading,
+    linkExtraStyles: "display: inline-block; ".concat(fullWidth),
+    name: continueButtonText,
+    role: "button",
+    text: continueButtonText,
+    url: continueURL,
+    variant: useDangerButton ? "danger" : "primary"
+  });
+};
+
+/*
+Default Modal molecule
+Uses react-aria-modal behind the scenes for a11y purposes
+Styling accomplished with our atoms / layout primitives
+
+Cancel button will (for now) always use hideModal as its action
+Continue button takes an action, if you want to navigate to
+a different route (as with a link) connect() and use "push" from @thecb/connected-react-router
+*/
+
+var getApplicationNode$1 = function getApplicationNode() {
+  return document.getElementById("root");
+};
+var Modal$2 = function Modal(_ref) {
+  var _ref$blurUnderlay = _ref.blurUnderlay,
+    blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay,
+    _ref$buttonExtraStyle = _ref.buttonExtraStyles,
+    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
+    _ref$cancelAction = _ref.cancelAction,
+    cancelAction = _ref$cancelAction === void 0 ? noop : _ref$cancelAction,
+    _ref$cancelButtonText = _ref.cancelButtonText,
+    cancelButtonText = _ref$cancelButtonText === void 0 ? "Cancel" : _ref$cancelButtonText,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? [] : _ref$children,
+    _ref$closeButtonText = _ref.closeButtonText,
+    closeButtonText = _ref$closeButtonText === void 0 ? "Close" : _ref$closeButtonText,
+    _ref$continueAction = _ref.continueAction,
+    continueAction = _ref$continueAction === void 0 ? noop : _ref$continueAction,
+    _ref$continueButtonTe = _ref.continueButtonText,
+    continueButtonText = _ref$continueButtonTe === void 0 ? "Continue" : _ref$continueButtonTe,
+    _ref$continueURL = _ref.continueURL,
+    continueURL = _ref$continueURL === void 0 ? "" : _ref$continueURL,
+    _ref$customWidth = _ref.customWidth,
+    customWidth = _ref$customWidth === void 0 ? "" : _ref$customWidth,
+    _ref$dataQa = _ref.dataQa,
+    dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
+    _ref$defaultWrapper = _ref.defaultWrapper,
+    defaultWrapper = _ref$defaultWrapper === void 0 ? true : _ref$defaultWrapper,
+    _ref$hideModal = _ref.hideModal,
+    hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
+    _ref$initialFocusSele = _ref.initialFocusSelector,
+    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+    _ref$isContinueAction = _ref.isContinueActionDisabled,
+    isContinueActionDisabled = _ref$isContinueAction === void 0 ? false : _ref$isContinueAction,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? "" : _ref$maxHeight,
+    _ref$modalBodyBg = _ref.modalBodyBg,
+    modalBodyBg = _ref$modalBodyBg === void 0 ? ATHENS_GREY : _ref$modalBodyBg,
+    _ref$modalBodyText = _ref.modalBodyText,
+    modalBodyText = _ref$modalBodyText === void 0 ? "" : _ref$modalBodyText,
+    _ref$modalHeaderBg = _ref.modalHeaderBg,
+    modalHeaderBg = _ref$modalHeaderBg === void 0 ? WHITE : _ref$modalHeaderBg,
+    _ref$modalHeaderText = _ref.modalHeaderText,
+    modalHeaderText = _ref$modalHeaderText === void 0 ? "" : _ref$modalHeaderText,
+    _ref$modalOpen = _ref.modalOpen,
+    modalOpen = _ref$modalOpen === void 0 ? false : _ref$modalOpen,
+    _ref$noButtons = _ref.noButtons,
+    noButtons = _ref$noButtons === void 0 ? false : _ref$noButtons,
+    _ref$onExit = _ref.onExit,
+    onExit = _ref$onExit === void 0 ? hideModal : _ref$onExit,
+    _ref$onlyCloseButton = _ref.onlyCloseButton,
+    onlyCloseButton = _ref$onlyCloseButton === void 0 ? false : _ref$onlyCloseButton,
+    _ref$onlyContinueButt = _ref.onlyContinueButton,
+    onlyContinueButton = _ref$onlyContinueButt === void 0 ? false : _ref$onlyContinueButt,
+    _ref$underlayClickExi = _ref.underlayClickExits,
+    underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi,
+    _ref$useDangerButton = _ref.useDangerButton,
+    useDangerButton = _ref$useDangerButton === void 0 ? false : _ref$useDangerButton;
+  var _useContext = React.useContext(styled.ThemeContext),
+    isMobile = _useContext.isMobile;
+  var modalContainerRef = React.useRef(null);
+  var hasCloseButton = onlyCloseButton && !noButtons;
+  var hasCancelButton = !onlyContinueButton && !onlyCloseButton && !noButtons;
+  var hasContinueButton = onlyContinueButton && !noButtons || !onlyCloseButton && !noButtons;
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: modalContainerRef,
+    "data-qa": dataQa
+  }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal
+  // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
+  , {
+    focusTrapOptions: {
+      fallbackFocus: modalContainerRef === null || modalContainerRef === void 0 ? void 0 : modalContainerRef.current
+    },
+    onExit: onExit,
+    getApplicationNode: getApplicationNode$1,
+    titleText: modalHeaderText,
+    underlayStyle: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      background: "rgba(41, 42, 51, 0.45)",
+      backdropFilter: blurUnderlay ? "blur(4px)" : "none",
+      WebkitBackdropFilter: blurUnderlay ? "blur(4px)" : "none"
+    },
+    dialogStyle: {
+      borderRadius: CORNER_STANDARD,
+      width: isMobile ? "" : customWidth || "615px",
+      overflow: "auto"
+    },
+    underlayClickExits: underlayClickExits,
+    "aria-modal": true,
+    initialFocus: initialFocusSelector,
+    focusDialog: !initialFocusSelector // Focus the dialogue box itself if no selector for initial focus was provided
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    boxShadow: "inset 0px -2px 0px 0px rgb(0, 80, 149)"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    background: modalHeaderBg,
+    borderColor: SILVER_GREY,
+    borderWidthOverride: "0 0 ".concat(BORDER_THIN, " 0"),
+    padding: "".concat(SPACING_XS, " ").concat(SPACING_NORMAL)
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "flex-start",
+    align: "center"
+  }, /*#__PURE__*/React__default.createElement(Title$1, {
+    as: "h2",
+    weight: FONT_WEIGHT_SEMIBOLD,
+    fontSize: "1.25rem"
+  }, modalHeaderText))), /*#__PURE__*/React__default.createElement(Box, {
+    background: modalBodyBg,
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: SPACING_NORMAL,
+    borderWidthOverride: !noButtons && "0 0 ".concat(BORDER_THIN, " 0"),
+    borderColor: !noButtons && SILVER_GREY,
+    extraStyles: maxHeight ? "max-height: ".concat(maxHeight, "; overflow: auto;") : ""
+  }, defaultWrapper ? /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    variant: "p"
+  }, modalBodyText) : /*#__PURE__*/React__default.createElement(Box, {
+    padding: maxHeight ? "0 0 ".concat(SPACING_XS, " 0") : "0"
+  }, modalBodyText)), noButtons ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null) : /*#__PURE__*/React__default.createElement(ButtonLayoutWrapper, {
+    isMobile: isMobile
+  }, [hasCancelButton && /*#__PURE__*/React__default.createElement(CancelButton, {
+    buttonExtraStyles: buttonExtraStyles,
+    cancelAction: cancelAction,
+    cancelButtonText: cancelButtonText,
+    hideModal: hideModal,
+    isMobile: isMobile
+  }), hasContinueButton && /*#__PURE__*/React__default.createElement(ContinueButton, {
+    buttonExtraStyles: buttonExtraStyles,
+    continueAction: continueAction,
+    continueButtonText: continueButtonText,
+    continueURL: continueURL,
+    isContinueActionDisabled: isContinueActionDisabled,
+    isLoading: isLoading,
+    isMobile: isMobile,
+    useDangerButton: useDangerButton
+  }), hasCloseButton && /*#__PURE__*/React__default.createElement(CloseButton, {
+    buttonExtraStyles: buttonExtraStyles,
+    closeButtonText: closeButtonText,
+    hideModal: hideModal,
+    isMobile: isMobile
+  })].filter(function (button) {
+    return button;
+  }))))), children);
+};
+var ModalControlV2 = withWindowSize(Modal$2);
+
+var _excluded$A = ["version"];
+var Modal$3 = function Modal(_ref) {
+  var _ref$version = _ref.version,
+    version = _ref$version === void 0 ? "v1" : _ref$version,
+    rest = _objectWithoutProperties(_ref, _excluded$A);
+  var ModalControl = version === "v1" ? Modal$1 : ModalControlV2;
+  return /*#__PURE__*/React__default.createElement(ModalControl, rest);
+};
+
 var fontSize$9 = {
   "default": "1.375rem",
   largeTitle: "1.75rem",
@@ -46302,7 +47119,7 @@ var AutopayModal = function AutopayModal(_ref) {
         }
     }
   };
-  return /*#__PURE__*/React__default.createElement(Modal$1, _extends({
+  return /*#__PURE__*/React__default.createElement(Modal$3, _extends({
     showModal: function showModal() {
       return toggleModal(true);
     },
@@ -46541,7 +47358,7 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
     return formattedAccount === agencyName ? agencyName : acc + formattedAccount;
   }, "".concat(agencyName, " - ")) : "";
   var identifier = accountType === "Account" && obligations.length > 1 ? "accounts" : accountType === "Property" && obligations.length > 1 ? "properties" : accountType.toLowerCase();
-  return /*#__PURE__*/React__default.createElement(Modal$1, {
+  return /*#__PURE__*/React__default.createElement(Modal$3, {
     showModal: function showModal() {
       return setModalIsOpen(true);
     },
@@ -47300,7 +48117,7 @@ var fallbackValues$N = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$A = ["amount"],
+var _excluded$B = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -47545,7 +48362,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-      rest = _objectWithoutProperties(_ref5, _excluded$A);
+      rest = _objectWithoutProperties(_ref5, _excluded$B);
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
     });
@@ -47705,7 +48522,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     themeValues = _ref.themeValues,
     _ref$dataQa = _ref.dataQa,
     dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
-  return /*#__PURE__*/React__default.createElement(Modal$1, {
+  return /*#__PURE__*/React__default.createElement(Modal$3, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
       return toggleOpen(false);
@@ -47809,7 +48626,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     themeValues = _ref.themeValues,
     _ref$initialFocusSele = _ref.initialFocusSelector,
     initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
-  return /*#__PURE__*/React__default.createElement(Modal$1, {
+  return /*#__PURE__*/React__default.createElement(Modal$3, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
       return toggleOpen(false);
@@ -47982,11 +48799,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$B = ["version"];
+var _excluded$C = ["version"];
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
 };
@@ -48785,7 +49602,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$C = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
+var _excluded$D = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -48833,7 +49650,7 @@ var RadioSection = function RadioSection(_ref) {
     _ref$isSectionRequire = _ref.isSectionRequired,
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
     groupedSections = _ref.groupedSections,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -49386,9 +50203,7 @@ var ToastNotification = function ToastNotification(_ref) {
     height = _ref$height === void 0 ? "56px" : _ref$height,
     _ref$childGap = _ref.childGap,
     childGap = _ref$childGap === void 0 ? "1rem" : _ref$childGap,
-    backgroundColor = _ref.backgroundColor,
-    _ref$role = _ref.role,
-    role = _ref$role === void 0 ? "alert" : _ref$role;
+    backgroundColor = _ref.backgroundColor;
   return /*#__PURE__*/React__default.createElement(Box, {
     onClick: closeToastNotification,
     background: backgroundColor ? backgroundColor : variant === VARIANTS.SUCCESS ? HINT_GREEN : variant === VARIANTS.ERROR ? ERROR_BACKGROUND_COLOR : WHITE,
@@ -49399,12 +50214,7 @@ var ToastNotification = function ToastNotification(_ref) {
     padding: "0rem 1rem",
     borderRadius: "4px",
     boxShadow: generateShadows().standard.base,
-    extraStyles: "\n      display: ".concat(toastOpen ? "block" : "none", ";\n      position: fixed; bottom: 4rem; left: 4rem;\n      ").concat(extraStyles, ";\n      cursor: pointer;\n    "),
-    role: role
-  }, /*#__PURE__*/React__default.createElement(Cluster, {
-    align: "center",
-    childGap: childGap,
-    justify: "space-between"
+    extraStyles: "\n      display: ".concat(toastOpen ? "block" : "none", ";\n      position: fixed; bottom: 4rem; left: 4rem;\n      ").concat(extraStyles, ";\n      cursor: pointer;\n    ")
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     align: "center",
     childGap: childGap
@@ -49414,7 +50224,7 @@ var ToastNotification = function ToastNotification(_ref) {
   }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
     weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "word-break: break-word;"
-  }, message))), /*#__PURE__*/React__default.createElement(IconQuitLarge, null)));
+  }, message)), /*#__PURE__*/React__default.createElement(IconQuitLarge, null)));
 };
 
 var fontWeight$9 = "600";
@@ -49549,7 +50359,7 @@ var PopupMenuItemContainer = styled__default(ButtonWithAction).withConfig({
   return "\n    background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n  ");
 });
 
-var _excluded$D = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
+var _excluded$E = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
 var PopupMenuItem = function PopupMenuItem(_ref) {
   var id = _ref.id,
     closeMenuCallback = _ref.closeMenuCallback,
@@ -49565,7 +50375,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     extraStyles = _ref.extraStyles,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
     id: id,
     role: "menuItem",
@@ -50137,7 +50947,7 @@ exports.LinkCard = LinkCard$1;
 exports.Loading = Loading;
 exports.LoadingLine = LoadingLine;
 exports.LoginForm = LoginForm;
-exports.Modal = Modal$1;
+exports.Modal = Modal$3;
 exports.Module = Module$1;
 exports.Motion = Motion;
 exports.MultiCartIcon = MultiCartIcon;