@thecb/components 10.2.4-beta.9 → 10.3.1-beta.0

package/dist/index.cjs.js

@@ -4916,6 +4916,7 @@ var COMPACT_JUMBO_HEIGHT = "65px";
 var FONT_WEIGHT_REGULAR = "400";
 var FONT_WEIGHT_BOLD = "700";
 var FONT_WEIGHT_SEMIBOLD = "600";
+var LINK_TEXT_DECORATION = "underline solid 1px";
 
 var style_constants = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4926,7 +4927,8 @@ var style_constants = /*#__PURE__*/Object.freeze({
   COMPACT_JUMBO_HEIGHT: COMPACT_JUMBO_HEIGHT,
   FONT_WEIGHT_REGULAR: FONT_WEIGHT_REGULAR,
   FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
-  FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD
+  FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD,
+  LINK_TEXT_DECORATION: LINK_TEXT_DECORATION
 });
 
 /*
@@ -5163,7 +5165,7 @@ var colors = /*#__PURE__*/Object.freeze({
 var TextSpan = styled__default.span.withConfig({
   displayName: "Textstyled__TextSpan",
   componentId: "sc-1oy97we-0"
-})(["--font-size:", ";font-size:var(--font-size);line-height:calc(1.5 * var(--font-size));font-weight:", ";font-family:", ";color:", ";white-space:", ";&:hover{", "}&:focus{outline:3px solid ", ";outline-offset:2px;}", " ", ""], function (_ref) {
+})(["--font-size:", ";font-size:var(--font-size);line-height:calc(1.5 * var(--font-size));font-weight:", ";font-family:", ";color:", ";text-decoration:", ";white-space:", ";&:hover{", "}&:focus{outline:3px solid ", ";outline-offset:2px;}", " ", ""], function (_ref) {
   var fontSize = _ref.fontSize;
   return fontSize;
 }, function (_ref2) {
@@ -5176,17 +5178,20 @@ var TextSpan = styled__default.span.withConfig({
   var color = _ref4.color;
   return color;
 }, function (_ref5) {
-  var $textWrap = _ref5.$textWrap;
-  return $textWrap ? "initial" : "nowrap";
+  var textDecoration = _ref5.textDecoration;
+  return textDecoration;
 }, function (_ref6) {
-  var hoverStyles = _ref6.hoverStyles;
+  var $textWrap = _ref6.$textWrap;
+  return $textWrap ? "initial" : "nowrap";
+}, function (_ref7) {
+  var hoverStyles = _ref7.hoverStyles;
   return styled.css(["", ""], hoverStyles);
-}, ROYAL_BLUE, function (_ref7) {
-  var disabled = _ref7.disabled,
-    disabledStyles = _ref7.disabledStyles;
+}, ROYAL_BLUE, function (_ref8) {
+  var disabled = _ref8.disabled,
+    disabledStyles = _ref8.disabledStyles;
   return disabled && styled.css(["", ""], disabledStyles);
-}, function (_ref8) {
-  var extraStyles = _ref8.extraStyles;
+}, function (_ref9) {
+  var extraStyles = _ref9.extraStyles;
   return extraStyles;
 });
 
@@ -6504,7 +6509,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", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "disabled", "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
@@ -6552,7 +6557,6 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$srOnly = _ref.srOnly,
     srOnly = _ref$srOnly === void 0 ? false : _ref$srOnly,
     dataQa = _ref.dataQa,
-    _ref$disabled = _ref.disabled,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React__default.createElement(BoxWrapper, _extends({
@@ -12557,6 +12561,43 @@ var Reel = function Reel(_ref) {
   }), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
 
+var ACH_METHOD = "BANK_ACCOUNT";
+var CC_METHOD = "CREDIT_CARD";
+var CASH_METHOD = "CASH";
+
+var general$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ACH_METHOD: ACH_METHOD,
+  CC_METHOD: CC_METHOD,
+  CASH_METHOD: CASH_METHOD
+});
+
+var URL_TEST = /(([a-z]{3,6}:\/\/)|(^|\s))([a-zA-Z0-9\-]+\.)+[a-z]{2,13}[\.\?\=\&\%\/\w\-]*\b([^@]|$)/;
+
+var regex_constants = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  URL_TEST: URL_TEST
+});
+
+
+
+var index$4 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  colors: colors,
+  general: general$1,
+  regexConstants: regex_constants,
+  styleConstants: style_constants,
+  fontWeights: style_constants
+});
+
+var WHITE$1 = WHITE,
+  TRANSPARENT$1 = TRANSPARENT,
+  SAPPHIRE_BLUE$1 = SAPPHIRE_BLUE,
+  PEACOCK_BLUE$1 = PEACOCK_BLUE,
+  MATISSE_BLUE$1 = MATISSE_BLUE,
+  RASPBERRY$1 = RASPBERRY,
+  ERROR_COLOR$1 = ERROR_COLOR;
+var LINK_TEXT_DECORATION$1 = LINK_TEXT_DECORATION;
 var padding = {
   primary: "0.75rem 1.5rem",
   secondary: "0.75rem 1.5rem",
@@ -12569,25 +12610,21 @@ var padding = {
   danger: "0.75rem 1.5rem",
   dangerSecondary: "0.75rem 1.5rem",
   whiteSecondary: "0.75rem 2rem",
-  whitePrimary: "1.125rem 0.75rem",
-  disabled: "0.75rem 1.5rem",
-  smallDisabled: "0.75rem 1rem"
+  whitePrimary: "1.125rem 0.75rem"
 };
 var color$1 = {
-  primary: WHITE,
-  secondary: MATISSE_BLUE,
-  back: MATISSE_BLUE,
-  smallPrimary: WHITE,
-  smallSecondary: MATISSE_BLUE,
-  smallGhost: MATISSE_BLUE,
-  ghost: MATISSE_BLUE,
-  tertiary: MATISSE_BLUE,
-  danger: WHITE,
-  dangerSecondary: ERROR_COLOR,
-  whiteSecondary: WHITE,
-  whitePrimary: WHITE,
-  disabled: MANATEE_GREY,
-  smallDisabled: MANATEE_GREY
+  primary: WHITE$1,
+  secondary: MATISSE_BLUE$1,
+  back: MATISSE_BLUE$1,
+  smallPrimary: WHITE$1,
+  smallSecondary: MATISSE_BLUE$1,
+  smallGhost: MATISSE_BLUE$1,
+  ghost: MATISSE_BLUE$1,
+  tertiary: MATISSE_BLUE$1,
+  danger: WHITE$1,
+  dangerSecondary: ERROR_COLOR$1,
+  whiteSecondary: WHITE$1,
+  whitePrimary: WHITE$1
 };
 var fontSizeVariant = {
   primary: "pS",
@@ -12601,9 +12638,7 @@ var fontSizeVariant = {
   danger: "pS",
   dangerSecondary: "pS",
   whiteSecondary: "pS",
-  whitePrimary: "pS",
-  disabled: "pS",
-  smallDisabled: "pS"
+  whitePrimary: "pS"
 };
 var fontWeight = {
   primary: "600",
@@ -12617,9 +12652,7 @@ var fontWeight = {
   danger: "600",
   dangerSecondary: "600",
   whiteSecondary: "600",
-  whitePrimary: "600",
-  disabled: "600",
-  smallDisabled: "600"
+  whitePrimary: "600"
 };
 var height = {
   primary: "3rem",
@@ -12633,9 +12666,7 @@ var height = {
   danger: "3rem",
   dangerSecondary: "3rem",
   whiteSecondary: "3rem",
-  whitePrimary: "auto",
-  disabled: "3rem",
-  smallDisabled: "2.5rem"
+  whitePrimary: "auto"
 };
 var minWidth = {
   primary: "130px",
@@ -12649,137 +12680,133 @@ var minWidth = {
   danger: "130px",
   dangerSecondary: "157px",
   whiteSecondary: "160px",
-  whitePrimary: "130px",
-  disabled: "130px",
-  smallDisabled: "100px"
+  whitePrimary: "130px"
+};
+var textDecoration = {
+  primary: "none",
+  secondary: "none",
+  back: "none",
+  smallPrimary: "none",
+  smallSecondary: "none",
+  smallGhost: LINK_TEXT_DECORATION$1,
+  ghost: LINK_TEXT_DECORATION$1,
+  tertiary: "none",
+  danger: "none",
+  dangerSecondary: "none",
+  whiteSecondary: "none",
+  whitePrimary: "none"
 };
 var backgroundColor = {
-  primary: MATISSE_BLUE,
-  secondary: TRANSPARENT,
-  back: TRANSPARENT,
-  smallPrimary: MATISSE_BLUE,
-  smallSecondary: TRANSPARENT,
-  smallGhost: TRANSPARENT,
-  ghost: TRANSPARENT,
-  tertiary: TRANSPARENT,
-  danger: RASPBERRY,
-  dangerSecondary: TRANSPARENT,
-  whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT,
-  disabled: GRECIAN_GREY,
-  smallDisabled: GRECIAN_GREY
+  primary: MATISSE_BLUE$1,
+  secondary: TRANSPARENT$1,
+  back: TRANSPARENT$1,
+  smallPrimary: MATISSE_BLUE$1,
+  smallSecondary: TRANSPARENT$1,
+  smallGhost: TRANSPARENT$1,
+  ghost: TRANSPARENT$1,
+  tertiary: TRANSPARENT$1,
+  danger: RASPBERRY$1,
+  dangerSecondary: TRANSPARENT$1,
+  whiteSecondary: TRANSPARENT$1,
+  whitePrimary: TRANSPARENT$1
 };
 var border = {
-  primary: "2px solid " + MATISSE_BLUE,
-  secondary: "2px solid " + MATISSE_BLUE,
-  back: "2px solid " + MATISSE_BLUE,
-  smallPrimary: "2px solid " + MATISSE_BLUE,
-  smallSecondary: "2px solid " + MATISSE_BLUE,
+  primary: "2px solid " + MATISSE_BLUE$1,
+  secondary: "2px solid " + MATISSE_BLUE$1,
+  back: "2px solid " + MATISSE_BLUE$1,
+  smallPrimary: "2px solid " + MATISSE_BLUE$1,
+  smallSecondary: "2px solid " + MATISSE_BLUE$1,
   smallGhost: "none",
   ghost: "none",
   tertiary: "none",
-  danger: "2px solid " + RASPBERRY,
-  dangerSecondary: "2px solid " + ERROR_COLOR,
-  whiteSecondary: "2px solid " + WHITE,
-  whitePrimary: "2px solid " + TRANSPARENT,
-  disabled: "2px solid " + MANATEE_GREY,
-  smallDisabled: "2px solid " + MANATEE_GREY
+  danger: "2px solid " + RASPBERRY$1,
+  dangerSecondary: "2px solid " + ERROR_COLOR$1,
+  whiteSecondary: "2px solid " + WHITE$1,
+  whitePrimary: "2px solid " + TRANSPARENT$1
 };
 var hoverBackgroundColor = {
-  primary: SAPPHIRE_BLUE,
+  primary: SAPPHIRE_BLUE$1,
   secondary: "#DBEAF0",
-  back: TRANSPARENT,
-  smallPrimary: SAPPHIRE_BLUE,
+  back: TRANSPARENT$1,
+  smallPrimary: SAPPHIRE_BLUE$1,
   smallSecondary: "#DBEAF0",
-  smallGhost: TRANSPARENT,
-  ghost: TRANSPARENT,
-  tertiary: TRANSPARENT,
+  smallGhost: TRANSPARENT$1,
+  ghost: TRANSPARENT$1,
+  tertiary: TRANSPARENT$1,
   danger: "#BA002C",
   dangerSecondary: "#FAE7EE",
-  whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT,
-  disabled: TRANSPARENT,
-  smallDisabled: TRANSPARENT
+  whiteSecondary: TRANSPARENT$1,
+  whitePrimary: TRANSPARENT$1
 };
 var hoverBorderColor = {
-  primary: SAPPHIRE_BLUE,
-  secondary: MATISSE_BLUE,
+  primary: SAPPHIRE_BLUE$1,
+  secondary: MATISSE_BLUE$1,
   back: "#DCEAF1",
-  smallPrimary: SAPPHIRE_BLUE,
-  smallSecondary: MATISSE_BLUE,
-  smallGhost: TRANSPARENT,
-  ghost: TRANSPARENT,
-  tertiary: TRANSPARENT,
+  smallPrimary: SAPPHIRE_BLUE$1,
+  smallSecondary: MATISSE_BLUE$1,
+  smallGhost: TRANSPARENT$1,
+  ghost: TRANSPARENT$1,
+  tertiary: TRANSPARENT$1,
   danger: "#BA002C",
   dangerSecondary: "#B10541",
-  whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT,
-  disabled: MANATEE_GREY,
-  smallDisabled: MANATEE_GREY
+  whiteSecondary: "2px solid " + TRANSPARENT$1,
+  whitePrimary: "2px solid " + TRANSPARENT$1
 };
 var hoverColor = {
-  primary: WHITE,
-  secondary: SAPPHIRE_BLUE,
-  back: SAPPHIRE_BLUE,
-  smallPrimary: WHITE,
-  smallSecondary: SAPPHIRE_BLUE,
-  smallGhost: SAPPHIRE_BLUE,
-  ghost: SAPPHIRE_BLUE,
-  tertiary: SAPPHIRE_BLUE,
-  danger: WHITE,
+  primary: WHITE$1,
+  secondary: SAPPHIRE_BLUE$1,
+  back: SAPPHIRE_BLUE$1,
+  smallPrimary: WHITE$1,
+  smallSecondary: SAPPHIRE_BLUE$1,
+  smallGhost: SAPPHIRE_BLUE$1,
+  ghost: SAPPHIRE_BLUE$1,
+  tertiary: SAPPHIRE_BLUE$1,
+  danger: WHITE$1,
   dangerSecondary: "#B10541",
-  whiteSecondary: WHITE,
-  whitePrimary: WHITE,
-  disabled: MANATEE_GREY,
-  smallDisabled: MANATEE_GREY
+  whiteSecondary: WHITE$1,
+  whitePrimary: WHITE$1
 };
 var activeBackgroundColor = {
-  primary: PEACOCK_BLUE,
+  primary: PEACOCK_BLUE$1,
   secondary: "#B8D5E1",
-  back: TRANSPARENT,
-  smallPrimary: PEACOCK_BLUE,
+  back: TRANSPARENT$1,
+  smallPrimary: PEACOCK_BLUE$1,
   smallSecondary: "#B8D5E1",
-  smallGhost: TRANSPARENT,
-  ghost: TRANSPARENT,
-  tertiary: TRANSPARENT,
+  smallGhost: TRANSPARENT$1,
+  ghost: TRANSPARENT$1,
+  tertiary: TRANSPARENT$1,
   danger: "#870000",
   dangerSecondary: "#FAE7EE",
-  whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT,
-  disabled: TRANSPARENT,
-  smallDisabled: TRANSPARENT
+  whiteSecondary: TRANSPARENT$1,
+  whitePrimary: TRANSPARENT$1
 };
 var activeBorderColor = {
-  primary: PEACOCK_BLUE,
-  secondary: MATISSE_BLUE,
-  back: PEACOCK_BLUE,
-  smallPrimary: PEACOCK_BLUE,
-  smallSecondary: MATISSE_BLUE,
-  smallGhost: TRANSPARENT,
-  ghost: TRANSPARENT,
-  tertiary: TRANSPARENT,
+  primary: PEACOCK_BLUE$1,
+  secondary: MATISSE_BLUE$1,
+  back: PEACOCK_BLUE$1,
+  smallPrimary: PEACOCK_BLUE$1,
+  smallSecondary: MATISSE_BLUE$1,
+  smallGhost: TRANSPARENT$1,
+  ghost: TRANSPARENT$1,
+  tertiary: TRANSPARENT$1,
   danger: "#870000",
   dangerSecondary: "#910029",
-  whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT,
-  disabled: TRANSPARENT,
-  smallDisabled: TRANSPARENT
+  whiteSecondary: "2px solid " + TRANSPARENT$1,
+  whitePrimary: "2px solid " + TRANSPARENT$1
 };
 var activeColor = {
-  primary: WHITE,
-  secondary: MATISSE_BLUE,
-  back: PEACOCK_BLUE,
-  smallPrimary: WHITE,
-  smallSecondary: PEACOCK_BLUE,
-  smallGhost: PEACOCK_BLUE,
-  ghost: PEACOCK_BLUE,
-  tertiary: PEACOCK_BLUE,
-  danger: WHITE,
+  primary: WHITE$1,
+  secondary: MATISSE_BLUE$1,
+  back: PEACOCK_BLUE$1,
+  smallPrimary: WHITE$1,
+  smallSecondary: PEACOCK_BLUE$1,
+  smallGhost: PEACOCK_BLUE$1,
+  ghost: PEACOCK_BLUE$1,
+  tertiary: PEACOCK_BLUE$1,
+  danger: WHITE$1,
   dangerSecondary: "#910029",
-  whiteSecondary: WHITE,
-  whitePrimary: WHITE,
-  disabled: MANATEE_GREY,
-  smallDisabled: MANATEE_GREY
+  whiteSecondary: WHITE$1,
+  whitePrimary: WHITE$1
 };
 var fallbackValues$1 = {
   padding: padding,
@@ -12788,6 +12815,7 @@ var fallbackValues$1 = {
   fontWeight: fontWeight,
   height: height,
   minWidth: minWidth,
+  textDecoration: textDecoration,
   backgroundColor: backgroundColor,
   border: border,
   hoverBackgroundColor: hoverBackgroundColor,
@@ -12911,7 +12939,7 @@ var Spinner = function Spinner(_ref) {
 
   Note: the children prop is only used if contentOverride is set to true, in which case
   the text prop is ignored.
-  
+
 */
 
 var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
@@ -12939,13 +12967,12 @@ var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     children = _ref2.children,
     extraDisabledStyles = _ref2.extraDisabledStyles,
     rest = _objectWithoutProperties(_ref2, _excluded$h);
-  var isGhostVariant = variant === "ghost" || variant === "smallGhost";
   var themeContext = React.useContext(styled.ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
   var isMobile = themeContext.isMobile;
-  var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n    cursor: pointer;\n  ");
-  var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
-  var disabledStyles = "\n    background-color: ".concat(isGhostVariant ? "transparent;" : "#6D717E;", ";\n    border-color: ").concat(isGhostVariant ? "transparent;" : "#6D717E;", ";\n    color: ").concat(isGhostVariant ? "#6D717E;" : "#FFFFFF", ";\n    cursor: default;\n    &:focus {\n      outline: 3px solid #6D717E;\n      outline-offset: 2px;\n    }\n    ").concat(extraDisabledStyles, "\n  ");
+  var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    cursor: pointer;\n  ");
+  var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n  ");
+  var disabledStyles = "\n    background-color: #6D717E;\n    border-color: #6D717E;\n    color: #FFFFFF;\n    cursor: default;\n    &:focus {\n      outline: 3px solid #6D717E;\n      outline-offset: 2px;\n    }\n    ".concat(extraDisabledStyles, "\n  ");
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     ref: ref,
     variant: variant,
@@ -12975,8 +13002,9 @@ var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     weight: themeValues.fontWeight,
     variant: themeValues.fontSizeVariant,
     color: themeValues.color,
+    textDecoration: themeValues.textDecoration,
     textWrap: textWrap,
-    extraStyles: disabled ? textExtraStyles + disabledStyles : textExtraStyles
+    extraStyles: textExtraStyles
   }, text)));
 });
 
@@ -18280,6 +18308,84 @@ var MultiCartIcon = function MultiCartIcon(_ref) {
   }));
 };
 
+var _excluded$j = ["iconFill", "iconWidth", "iconHeight"];
+var CloseIcon = function CloseIcon(_ref) {
+  var _ref$iconFill = _ref.iconFill,
+    iconFill = _ref$iconFill === void 0 ? "#3B414D" : _ref$iconFill,
+    _ref$iconWidth = _ref.iconWidth,
+    iconWidth = _ref$iconWidth === void 0 ? "24" : _ref$iconWidth,
+    _ref$iconHeight = _ref.iconHeight,
+    iconHeight = _ref$iconHeight === void 0 ? "24" : _ref$iconHeight,
+    rest = _objectWithoutProperties(_ref, _excluded$j);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: iconWidth,
+    height: iconHeight,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, rest), /*#__PURE__*/React__default.createElement("title", null, "Close Icon"), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.3033 5.98982C17.108 5.79456 16.7915 5.79456 16.5962 5.98982L12 10.586L7.40381 5.98982C7.20854 5.79456 6.89196 5.79456 6.6967 5.98982L5.98959 6.69693C5.79433 6.89219 5.79433 7.20878 5.98959 7.40404L10.5858 12.0002L5.98959 16.5964C5.79433 16.7917 5.79433 17.1083 5.98959 17.3035L6.6967 18.0106C6.89196 18.2059 7.20854 18.2059 7.40381 18.0106L12 13.4144L16.5962 18.0106C16.7915 18.2059 17.108 18.2059 17.3033 18.0106L18.0104 17.3035C18.2057 17.1083 18.2057 16.7917 18.0104 16.5964L13.4142 12.0002L18.0104 7.40404C18.2057 7.20878 18.2057 6.89219 18.0104 6.69693L17.3033 5.98982Z",
+    fill: iconFill
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_3727_16765",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "5",
+    y: "5",
+    width: "14",
+    height: "14"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.3033 5.98982C17.108 5.79456 16.7915 5.79456 16.5962 5.98982L12 10.586L7.40381 5.98982C7.20854 5.79456 6.89196 5.79456 6.6967 5.98982L5.98959 6.69693C5.79433 6.89219 5.79433 7.20878 5.98959 7.40404L10.5858 12.0002L5.98959 16.5964C5.79433 16.7917 5.79433 17.1083 5.98959 17.3035L6.6967 18.0106C6.89196 18.2059 7.20854 18.2059 7.40381 18.0106L12 13.4144L16.5962 18.0106C16.7915 18.2059 17.108 18.2059 17.3033 18.0106L18.0104 17.3035C18.2057 17.1083 18.2057 16.7917 18.0104 16.5964L13.4142 12.0002L18.0104 7.40404C18.2057 7.20878 18.2057 6.89219 18.0104 6.69693L17.3033 5.98982Z",
+    fill: "none"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_3727_16765)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 0H24V24H0V0Z",
+    fill: iconFill
+  })));
+};
+
+var TrashIconV2 = function TrashIconV2(_ref) {
+  var themeValues = _ref.themeValues,
+    iconFill = _ref.iconFill;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.5 4H14V6H4V4H6.5L7.21429 3H10.7857L11.5 4ZM6.99048 15C6.25714 15 5.65714 14.4857 5.65714 13.8571L4.85714 7H12.8571L12.0571 13.8571C12.0571 14.4857 11.4571 15 10.7238 15H6.99048Z",
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_4292_11876",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "4",
+    y: "3",
+    width: "10",
+    height: "12"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.5 4H14V6H4V4H6.5L7.21429 3H10.7857L11.5 4ZM6.99048 15C6.25714 15 5.65714 14.4857 5.65714 13.8571L4.85714 7H12.8571L12.0571 13.8571C12.0571 14.4857 11.4571 15 10.7238 15H6.99048Z",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_4292_11876)"
+  }));
+};
+var TrashIconV2$1 = themeComponent(TrashIconV2, "Icons", fallbackValues$2, "primary");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -18926,7 +19032,7 @@ var mobileFallbackValues = {
 };
 var MOBILE_BREAKPOINT = 768;
 
-var _excluded$j = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$k = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Title elements
@@ -18973,7 +19079,7 @@ var Title = function Title(_ref) {
     as = _ref$as === void 0 ? "h1" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$j);
+    rest = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React__default.createElement(TitleText, _extends({
     variant: variant,
     as: as,
@@ -19015,15 +19121,13 @@ var background$1 = {
   info: "".concat(INFO_BLUE),
   warn: "".concat(HALF_COLONIAL_WHITE),
   primary: "".concat(CORNFLOWER_BLUE),
-  success: "".concat(HINT_GREEN),
-  disabled: "".concat(GRECIAN_GREY)
+  success: "".concat(HINT_GREEN)
 };
 var color$4 = {
   info: "".concat(MATISSE_BLUE),
   warn: "".concat(ZEST_ORANGE),
   primary: "".concat(ROYAL_BLUE_VIVID),
-  success: "".concat(SEA_GREEN),
-  disabled: "".concat(MANATEE_GREY)
+  success: "".concat(SEA_GREEN)
 };
 var fallbackValues$7 = {
   background: background$1,
@@ -19152,6 +19256,7 @@ function _wrapNativeSuper(Class) {
 }
 
 // based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js
+
 /**
  * Parse errors.md and turn it into a simple hash of code: message
  * @private
@@ -19236,71 +19341,84 @@ var ERRORS = {
   "77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
   "78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
 };
-
 /**
  * super basic version of sprintf
  * @private
  */
+
 function format() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
+
   var a = args[0];
   var b = [];
   var c;
+
   for (c = 1; c < args.length; c += 1) {
     b.push(args[c]);
   }
+
   b.forEach(function (d) {
     a = a.replace(/%[a-z]/, d);
   });
   return a;
 }
-
 /**
  * Create an error file out of errors.md for development and a simple web link to the full errors
  * in production mode.
  * @private
  */
+
+
 var PolishedError = /*#__PURE__*/function (_Error) {
   _inheritsLoose(PolishedError, _Error);
+
   function PolishedError(code) {
     var _this;
+
     if (process.env.NODE_ENV === 'production') {
       _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
     } else {
       for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
         args[_key2 - 1] = arguments[_key2];
       }
+
       _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
     }
+
     return _assertThisInitialized(_this);
   }
+
   return PolishedError;
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 
 function colorToInt(color) {
   return Math.round(color * 255);
 }
+
 function convertToInt(red, green, blue) {
   return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
 }
+
 function hslToRgb(hue, saturation, lightness, convert) {
   if (convert === void 0) {
     convert = convertToInt;
   }
+
   if (saturation === 0) {
     // achromatic
     return convert(lightness, lightness, lightness);
-  }
+  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
+
 
-  // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
   var huePrime = (hue % 360 + 360) % 360 / 60;
   var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
   var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
   var red = 0;
   var green = 0;
   var blue = 0;
+
   if (huePrime >= 0 && huePrime < 1) {
     red = chroma;
     green = secondComponent;
@@ -19320,6 +19438,7 @@ function hslToRgb(hue, saturation, lightness, convert) {
     red = chroma;
     blue = secondComponent;
   }
+
   var lightnessModification = lightness - chroma / 2;
   var finalRed = red + lightnessModification;
   var finalGreen = green + lightnessModification;
@@ -19477,11 +19596,11 @@ var namedColorMap = {
   yellow: 'ff0',
   yellowgreen: '9acd32'
 };
-
 /**
  * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
  * @private
  */
+
 function nameToHex(color) {
   if (typeof color !== 'string') return color;
   var normalizedColorName = color.toLowerCase();
@@ -19496,7 +19615,6 @@ var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\
 var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
 var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
 var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
-
 /**
  * Returns an RgbColor or RgbaColor object. This utility function is only useful
  * if want to extract a color component. With the color util `toColorString` you
@@ -19508,11 +19626,14 @@ var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[
  * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
  * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
  */
+
 function parseToRgb(color) {
   if (typeof color !== 'string') {
     throw new PolishedError(3);
   }
+
   var normalizedColor = nameToHex(color);
+
   if (normalizedColor.match(hexRegex)) {
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
@@ -19520,6 +19641,7 @@ function parseToRgb(color) {
       blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
     };
   }
+
   if (normalizedColor.match(hexRgbaRegex)) {
     var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
     return {
@@ -19529,6 +19651,7 @@ function parseToRgb(color) {
       alpha: alpha
     };
   }
+
   if (normalizedColor.match(reducedHexRegex)) {
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
@@ -19536,8 +19659,10 @@ function parseToRgb(color) {
       blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
     };
   }
+
   if (normalizedColor.match(reducedRgbaHexRegex)) {
     var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
+
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
       green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
@@ -19545,7 +19670,9 @@ function parseToRgb(color) {
       alpha: _alpha
     };
   }
+
   var rgbMatched = rgbRegex.exec(normalizedColor);
+
   if (rgbMatched) {
     return {
       red: parseInt("" + rgbMatched[1], 10),
@@ -19553,7 +19680,9 @@ function parseToRgb(color) {
       blue: parseInt("" + rgbMatched[3], 10)
     };
   }
+
   var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
+
   if (rgbaMatched) {
     return {
       red: parseInt("" + rgbaMatched[1], 10),
@@ -19562,32 +19691,44 @@ function parseToRgb(color) {
       alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
     };
   }
+
   var hslMatched = hslRegex.exec(normalizedColor);
+
   if (hslMatched) {
     var hue = parseInt("" + hslMatched[1], 10);
     var saturation = parseInt("" + hslMatched[2], 10) / 100;
     var lightness = parseInt("" + hslMatched[3], 10) / 100;
     var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
     var hslRgbMatched = rgbRegex.exec(rgbColorString);
+
     if (!hslRgbMatched) {
       throw new PolishedError(4, normalizedColor, rgbColorString);
     }
+
     return {
       red: parseInt("" + hslRgbMatched[1], 10),
       green: parseInt("" + hslRgbMatched[2], 10),
       blue: parseInt("" + hslRgbMatched[3], 10)
     };
   }
+
   var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
+
   if (hslaMatched) {
     var _hue = parseInt("" + hslaMatched[1], 10);
+
     var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
+
     var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
+
     var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
+
     var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
+
     if (!_hslRgbMatched) {
       throw new PolishedError(4, normalizedColor, _rgbColorString);
     }
+
     return {
       red: parseInt("" + _hslRgbMatched[1], 10),
       green: parseInt("" + _hslRgbMatched[2], 10),
@@ -19595,80 +19736,8 @@ function parseToRgb(color) {
       alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
     };
   }
-  throw new PolishedError(5);
-}
-
-function rgbToHsl(color) {
-  // make sure rgb are contained in a set of [0, 255]
-  var red = color.red / 255;
-  var green = color.green / 255;
-  var blue = color.blue / 255;
-  var max = Math.max(red, green, blue);
-  var min = Math.min(red, green, blue);
-  var lightness = (max + min) / 2;
-  if (max === min) {
-    // achromatic
-    if (color.alpha !== undefined) {
-      return {
-        hue: 0,
-        saturation: 0,
-        lightness: lightness,
-        alpha: color.alpha
-      };
-    } else {
-      return {
-        hue: 0,
-        saturation: 0,
-        lightness: lightness
-      };
-    }
-  }
-  var hue;
-  var delta = max - min;
-  var saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
-  switch (max) {
-    case red:
-      hue = (green - blue) / delta + (green < blue ? 6 : 0);
-      break;
-    case green:
-      hue = (blue - red) / delta + 2;
-      break;
-    default:
-      // blue case
-      hue = (red - green) / delta + 4;
-      break;
-  }
-  hue *= 60;
-  if (color.alpha !== undefined) {
-    return {
-      hue: hue,
-      saturation: saturation,
-      lightness: lightness,
-      alpha: color.alpha
-    };
-  }
-  return {
-    hue: hue,
-    saturation: saturation,
-    lightness: lightness
-  };
-}
 
-/**
- * Returns an HslColor or HslaColor object. This utility function is only useful
- * if want to extract a color component. With the color util `toColorString` you
- * can convert a HslColor or HslaColor object back to a string.
- *
- * @example
- * // Assigns `{ hue: 0, saturation: 1, lightness: 0.5 }` to color1
- * const color1 = parseToHsl('rgb(255, 0, 0)');
- * // Assigns `{ hue: 128, saturation: 1, lightness: 0.5, alpha: 0.75 }` to color2
- * const color2 = parseToHsl('hsla(128, 100%, 50%, 0.75)');
- */
-function parseToHsl(color) {
-  // Note: At a later stage we can optimize this function as right now a hsl
-  // color would be parsed converted to rgb values and converted back to hsl.
-  return rgbToHsl(parseToRgb(color));
+  throw new PolishedError(5);
 }
 
 /**
@@ -19679,8 +19748,10 @@ var reduceHexValue = function reduceHexValue(value) {
   if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
     return "#" + value[1] + value[3] + value[5];
   }
+
   return value;
 };
+
 var reduceHexValue$1 = reduceHexValue;
 
 function numberToHex(value) {
@@ -19688,83 +19759,6 @@ function numberToHex(value) {
   return hex.length === 1 ? "0" + hex : hex;
 }
 
-function colorToHex(color) {
-  return numberToHex(Math.round(color * 255));
-}
-function convertToHex(red, green, blue) {
-  return reduceHexValue$1("#" + colorToHex(red) + colorToHex(green) + colorToHex(blue));
-}
-function hslToHex(hue, saturation, lightness) {
-  return hslToRgb(hue, saturation, lightness, convertToHex);
-}
-
-/**
- * Returns a string value for the color. The returned result is the smallest possible hex notation.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: hsl(359, 0.75, 0.4),
- *   background: hsl({ hue: 360, saturation: 0.75, lightness: 0.4 }),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${hsl(359, 0.75, 0.4)};
- *   background: ${hsl({ hue: 360, saturation: 0.75, lightness: 0.4 })};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#b3191c";
- *   background: "#b3191c";
- * }
- */
-function hsl(value, saturation, lightness) {
-  if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number') {
-    return hslToHex(value, saturation, lightness);
-  } else if (typeof value === 'object' && saturation === undefined && lightness === undefined) {
-    return hslToHex(value.hue, value.saturation, value.lightness);
-  }
-  throw new PolishedError(1);
-}
-
-/**
- * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: hsla(359, 0.75, 0.4, 0.7),
- *   background: hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 }),
- *   background: hsla(359, 0.75, 0.4, 1),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${hsla(359, 0.75, 0.4, 0.7)};
- *   background: ${hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 })};
- *   background: ${hsla(359, 0.75, 0.4, 1)};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "rgba(179,25,28,0.7)";
- *   background: "rgba(179,25,28,0.7)";
- *   background: "#b3191c";
- * }
- */
-function hsla$1(value, saturation, lightness, alpha) {
-  if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number' && typeof alpha === 'number') {
-    return alpha >= 1 ? hslToHex(value, saturation, lightness) : "rgba(" + hslToRgb(value, saturation, lightness) + "," + alpha + ")";
-  } else if (typeof value === 'object' && saturation === undefined && lightness === undefined && alpha === undefined) {
-    return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : "rgba(" + hslToRgb(value.hue, value.saturation, value.lightness) + "," + value.alpha + ")";
-  }
-  throw new PolishedError(2);
-}
-
 /**
  * Returns a string value for the color. The returned result is the smallest possible hex notation.
  *
@@ -19794,6 +19788,7 @@ function rgb(value, green, blue) {
   } else if (typeof value === 'object' && green === undefined && blue === undefined) {
     return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
   }
+
   throw new PolishedError(6);
 }
 
@@ -19840,60 +19835,8 @@ function rgba$1(firstValue, secondValue, thirdValue, fourthValue) {
   } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
     return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
   }
-  throw new PolishedError(7);
-}
-
-var isRgb = function isRgb(color) {
-  return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
-};
-var isRgba$1 = function isRgba(color) {
-  return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && typeof color.alpha === 'number';
-};
-var isHsl = function isHsl(color) {
-  return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
-};
-var isHsla$1 = function isHsla(color) {
-  return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && typeof color.alpha === 'number';
-};
 
-/**
- * Converts a RgbColor, RgbaColor, HslColor or HslaColor object to a color string.
- * This util is useful in case you only know on runtime which color object is
- * used. Otherwise we recommend to rely on `rgb`, `rgba`, `hsl` or `hsla`.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: toColorString({ red: 255, green: 205, blue: 100 }),
- *   background: toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }),
- *   background: toColorString({ hue: 240, saturation: 1, lightness: 0.5 }),
- *   background: toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${toColorString({ red: 255, green: 205, blue: 100 })};
- *   background: ${toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })};
- *   background: ${toColorString({ hue: 240, saturation: 1, lightness: 0.5 })};
- *   background: ${toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#ffcd64";
- *   background: "rgba(255,205,100,0.72)";
- *   background: "#00f";
- *   background: "rgba(179,25,25,0.72)";
- * }
- */
-
-function toColorString(color) {
-  if (typeof color !== 'object') throw new PolishedError(8);
-  if (isRgba$1(color)) return rgba$1(color);
-  if (isRgb(color)) return rgb(color);
-  if (isHsla$1(color)) return hsla$1(color);
-  if (isHsl(color)) return hsl(color);
-  throw new PolishedError(8);
+  throw new PolishedError(7);
 }
 
 // Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
@@ -19906,156 +19849,14 @@ function curried(f, length, acc) {
     var combined = acc.concat(Array.prototype.slice.call(arguments));
     return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
   };
-}
+} // eslint-disable-next-line no-redeclare
+
 
-// eslint-disable-next-line no-redeclare
 function curry(f) {
   // eslint-disable-line no-redeclare
   return curried(f, f.length, []);
 }
 
-/**
- * Changes the hue of the color. Hue is a number between 0 to 360. The first
- * argument for adjustHue is the amount of degrees the color is rotated around
- * the color wheel, always producing a positive hue value.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: adjustHue(180, '#448'),
- *   background: adjustHue('180', 'rgba(101,100,205,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${adjustHue(180, '#448')};
- *   background: ${adjustHue('180', 'rgba(101,100,205,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#888844";
- *   background: "rgba(136,136,68,0.7)";
- * }
- */
-function adjustHue(degree, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    hue: hslColor.hue + parseFloat(degree)
-  }));
-}
-
-// prettier-ignore
-var curriedAdjustHue = curry /* ::<number | string, string, string> */(adjustHue);
-
-function guard(lowerBoundary, upperBoundary, value) {
-  return Math.max(lowerBoundary, Math.min(upperBoundary, value));
-}
-
-/**
- * Returns a string value for the darkened color.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: darken(0.2, '#FFCD64'),
- *   background: darken('0.2', 'rgba(255,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${darken(0.2, '#FFCD64')};
- *   background: ${darken('0.2', 'rgba(255,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#ffbd31";
- *   background: "rgba(255,189,49,0.7)";
- * }
- */
-function darken(amount, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    lightness: guard(0, 1, hslColor.lightness - parseFloat(amount))
-  }));
-}
-
-// prettier-ignore
-var curriedDarken = curry /* ::<number | string, string, string> */(darken);
-
-/**
- * Decreases the intensity of a color. Its range is between 0 to 1. The first
- * argument of the desaturate function is the amount by how much the color
- * intensity should be decreased.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: desaturate(0.2, '#CCCD64'),
- *   background: desaturate('0.2', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${desaturate(0.2, '#CCCD64')};
- *   background: ${desaturate('0.2', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#b8b979";
- *   background: "rgba(184,185,121,0.7)";
- * }
- */
-function desaturate(amount, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    saturation: guard(0, 1, hslColor.saturation - parseFloat(amount))
-  }));
-}
-
-// prettier-ignore
-var curriedDesaturate = curry /* ::<number | string, string, string> */(desaturate);
-
-/**
- * Returns a string value for the lightened color.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: lighten(0.2, '#CCCD64'),
- *   background: lighten('0.2', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${lighten(0.2, '#FFCD64')};
- *   background: ${lighten('0.2', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#e5e6b1";
- *   background: "rgba(229,230,177,0.7)";
- * }
- */
-function lighten(amount, color) {
-  if (color === 'transparent') return color;
-  var hslColor = parseToHsl(color);
-  return toColorString(_extends$1({}, hslColor, {
-    lightness: guard(0, 1, hslColor.lightness + parseFloat(amount))
-  }));
-}
-
-// prettier-ignore
-var curriedLighten = curry /* ::<number | string, string, string> */(lighten);
-
 /**
  * Mixes the two provided colors together by calculating the average of each of the RGB components weighted to the first color by the provided weight.
  *
@@ -20082,21 +19883,25 @@ var curriedLighten = curry /* ::<number | string, string, string> */(lighten);
  *   background: "rgba(63, 0, 191, 0.75)";
  * }
  */
+
 function mix$1(weight, color, otherColor) {
   if (color === 'transparent') return otherColor;
   if (otherColor === 'transparent') return color;
   if (weight === 0) return otherColor;
   var parsedColor1 = parseToRgb(color);
+
   var color1 = _extends$1({}, parsedColor1, {
     alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1
   });
+
   var parsedColor2 = parseToRgb(otherColor);
+
   var color2 = _extends$1({}, parsedColor2, {
     alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1
-  });
-
-  // The formula is copied from the original Sass implementation:
+  }); // The formula is copied from the original Sass implementation:
   // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
+
+
   var alphaDelta = color1.alpha - color2.alpha;
   var x = parseFloat(weight) * 2 - 1;
   var y = x * alphaDelta === -1 ? x : x + alphaDelta;
@@ -20110,217 +19915,13 @@ function mix$1(weight, color, otherColor) {
     alpha: color1.alpha * parseFloat(weight) + color2.alpha * (1 - parseFloat(weight))
   };
   return rgba$1(mixedColor);
-}
-
-// prettier-ignore
-var curriedMix = curry /* ::<number | string, string, string, string> */(mix$1);
-var mix$1$1 = curriedMix;
-
-/**
- * Increases the opacity of a color. Its range for the amount is between 0 to 1.
- *
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: opacify(0.1, 'rgba(255, 255, 255, 0.9)');
- *   background: opacify(0.2, 'hsla(0, 0%, 100%, 0.5)'),
- *   background: opacify('0.5', 'rgba(255, 0, 0, 0.2)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${opacify(0.1, 'rgba(255, 255, 255, 0.9)')};
- *   background: ${opacify(0.2, 'hsla(0, 0%, 100%, 0.5)')},
- *   background: ${opacify('0.5', 'rgba(255, 0, 0, 0.2)')},
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#fff";
- *   background: "rgba(255,255,255,0.7)";
- *   background: "rgba(255,0,0,0.7)";
- * }
- */
-function opacify(amount, color) {
-  if (color === 'transparent') return color;
-  var parsedColor = parseToRgb(color);
-  var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
-  var colorWithAlpha = _extends$1({}, parsedColor, {
-    alpha: guard(0, 1, (alpha * 100 + parseFloat(amount) * 100) / 100)
-  });
-  return rgba$1(colorWithAlpha);
-}
-
-// prettier-ignore
-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
 
-// prettier-ignore
-var curriedSetHue = curry /* ::<number | string, string, string> */(setHue);
 
-/**
- * Sets the lightness of a color to the provided value. The lightness range can be
- * from 0 and 1.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: setLightness(0.2, '#CCCD64'),
- *   background: setLightness('0.75', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${setLightness(0.2, '#CCCD64')};
- *   background: ${setLightness('0.75', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#4d4d19";
- *   background: "rgba(223,224,159,0.7)";
- * }
- */
-function setLightness(lightness, color) {
-  if (color === 'transparent') return color;
-  return toColorString(_extends$1({}, parseToHsl(color), {
-    lightness: parseFloat(lightness)
-  }));
-}
-
-// prettier-ignore
-var curriedSetLightness = curry /* ::<number | string, string, string> */(setLightness);
-
-/**
- * Sets the saturation of a color to the provided value. The saturation range can be
- * from 0 and 1.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: setSaturation(0.2, '#CCCD64'),
- *   background: setSaturation('0.75', 'rgba(204,205,100,0.7)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${setSaturation(0.2, '#CCCD64')};
- *   background: ${setSaturation('0.75', 'rgba(204,205,100,0.7)')};
- * `
- *
- * // CSS in JS Output
- * element {
- *   background: "#adad84";
- *   background: "rgba(228,229,76,0.7)";
- * }
- */
-function setSaturation(saturation, color) {
-  if (color === 'transparent') return color;
-  return toColorString(_extends$1({}, parseToHsl(color), {
-    saturation: parseFloat(saturation)
-  }));
-}
-
-// prettier-ignore
-var curriedSetSaturation = curry /* ::<number | string, string, string> */(setSaturation);
-
-/**
- * Shades a color by mixing it with black. `shade` can produce
- * hue shifts, where as `darken` manipulates the luminance channel and therefore
- * doesn't produce hue shifts.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: shade(0.25, '#00f')
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${shade(0.25, '#00f')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#00003f";
- * }
- */
-
-function shade(percentage, color) {
-  if (color === 'transparent') return color;
-  return mix$1$1(parseFloat(percentage), 'rgb(0, 0, 0)', color);
-}
-
-// prettier-ignore
-var curriedShade = curry /* ::<number | string, string, string> */(shade);
+var curriedMix = /*#__PURE__*/curry
+/* ::<number | string, string, string, string> */
+(mix$1);
+var mix$1$1 = curriedMix;
 
 /**
  * Tints a color by mixing it with white. `tint` can produce
@@ -20348,63 +19949,25 @@ var curriedShade = curry /* ::<number | string, string, string> */(shade);
 function tint(percentage, color) {
   if (color === 'transparent') return color;
   return mix$1$1(parseFloat(percentage), 'rgb(255, 255, 255)', color);
-}
+} // prettier-ignore
 
-// 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 curriedTint = /*#__PURE__*/curry
+/* ::<number | string, string, string> */
+(tint);
+var curriedTint$1 = curriedTint;
 
 var linkColor = MATISSE_BLUE;
 var fallbackValues$8 = {
   linkColor: linkColor
 };
 
-var _excluded$k = ["variant", "themeValues", "children"];
+var _excluded$l = ["variant", "themeValues", "children"];
 var BoxWithShadow = function BoxWithShadow(_ref) {
   var variant = _ref.variant,
     themeValues = _ref.themeValues,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   var shadowRegistry = {
     baseStandard: "0px 3px 7px 2px ".concat(rgba$1(BLACK, 0.1), ", 0px 1px 2px 1px ").concat(rgba$1(BLACK, 0.1), ";"),
     baseHover: "0px 1px 7px 0px ".concat(rgba$1(BLACK, 0.3), ", 0px 1px 4px 0px ").concat(rgba$1(BLACK, 0.2), ", 0px 7px 12px 0px ").concat(rgba$1(BLACK, 0.2), ";"),
@@ -20422,20 +19985,23 @@ var BoxWithShadow = function BoxWithShadow(_ref) {
 var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues$8);
 
 // import theme from "styled-theming";
+var MATISSE_BLUE$2 = MATISSE_BLUE,
+  STORM_GREY$1 = STORM_GREY;
+var LINK_TEXT_DECORATION$2 = LINK_TEXT_DECORATION;
 
 /*
   For now I'm using string values, eventually shared components library will have its own constants file
   for colors/values that should be used here instead
 */
 
-var color$5 = "".concat(MATISSE_BLUE);
-var activeColor$2 = "".concat(STORM_GREY);
-var activeBreadcrumbColor = "".concat(STORM_GREY);
+var color$5 = "".concat(MATISSE_BLUE$2);
+var activeColor$2 = "".concat(STORM_GREY$1);
+var activeBreadcrumbColor = "".concat(STORM_GREY$1);
 var fontSize$2 = "0.875rem";
 var lineHeight = "1.25rem";
 var fontWeight$1 = "400";
 var margin = "0.5rem";
-var hover = "text-decoration: none;";
+var hover = "text-decoration: ".concat(LINK_TEXT_DECORATION$2, ";");
 var fallbackValues$9 = {
   color: color$5,
   activeColor: activeColor$2,
@@ -20461,7 +20027,10 @@ var fallbackValues$a = {
   externalLinkColor: externalLinkColor
 };
 
-var _excluded$l = ["hoverColor", "activeColor", "extrastyles"];
+var _excluded$m = ["hoverColor", "activeColor", "extrastyles"];
+var ROYAL_BLUE$1 = ROYAL_BLUE;
+var LINK_TEXT_DECORATION$3 = LINK_TEXT_DECORATION;
+
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
   unrecognized DOM attributes.
@@ -20472,14 +20041,14 @@ var StyledExternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
   var hoverColor = _ref.hoverColor,
     activeColor = _ref.activeColor,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/React__default.createElement("a", _extends({}, props, {
     ref: ref
   }));
 })).withConfig({
   displayName: "ExternalLinkstyled__StyledExternalLink",
   componentId: "sc-m1q2m2-0"
-})(["display:flex;font-size:", ";color:", ";font-weight:", ";font-family:", ";line-height:", ";&:hover{color:", ";text-decoration:underline;}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{text-decoration:underline;color:", ";}", ""], function (_ref2) {
+})(["display:flex;font-size:", ";color:", ";font-weight:", ";font-family:", ";line-height:", ";text-decoration:", ";&:hover{color:", ";}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{color:", ";}", ""], function (_ref2) {
   var size = _ref2.size;
   return size;
 }, function (_ref3) {
@@ -20494,10 +20063,10 @@ var StyledExternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
 }, function (_ref6) {
   var lineheight = _ref6.lineheight;
   return lineheight;
-}, function (_ref7) {
+}, LINK_TEXT_DECORATION$3, function (_ref7) {
   var hoverColor = _ref7.hoverColor;
   return hoverColor;
-}, ROYAL_BLUE, function (_ref8) {
+}, ROYAL_BLUE$1, function (_ref8) {
   var activeColor = _ref8.activeColor;
   return activeColor;
 }, function (_ref9) {
@@ -20547,7 +20116,10 @@ var ExternalLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 });
 
-var _excluded$m = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
+var _excluded$n = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
+var ROYAL_BLUE$2 = ROYAL_BLUE;
+var LINK_TEXT_DECORATION$4 = LINK_TEXT_DECORATION;
+
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
   unrecognized DOM attributes.
@@ -20560,14 +20132,14 @@ var StyledInternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
     active = _ref.active,
     color = _ref.color,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/React__default.createElement(reactRouterDom.Link, _extends({}, props, {
     ref: ref
   }));
 })).withConfig({
   displayName: "InternalLinkstyled__StyledInternalLink",
   componentId: "sc-cuqxud-0"
-})(["display:flex;color:", ";font-weight:", ";line-height:", ";font-size:", ";font-family:", ";margin:", ";&:hover{color:", ";text-decoration:underline;}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{text-decoration:underline;color:", ";}", ""], function (_ref2) {
+})(["display:flex;color:", ";font-weight:", ";line-height:", ";font-size:", ";font-family:", ";margin:", ";text-decoration:", ";&:hover{color:", ";}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{color:", ";}", ""], function (_ref2) {
   var color = _ref2.color,
     active = _ref2.active,
     activeColor = _ref2.activeColor;
@@ -20587,10 +20159,10 @@ var StyledInternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
 }, function (_ref7) {
   var margin = _ref7.margin;
   return margin;
-}, function (_ref8) {
+}, LINK_TEXT_DECORATION$4, function (_ref8) {
   var hoverColor = _ref8.hoverColor;
   return hoverColor;
-}, ROYAL_BLUE, function (_ref9) {
+}, ROYAL_BLUE$2, function (_ref9) {
   var activeColor = _ref9.activeColor;
   return activeColor;
 }, function (_ref10) {
@@ -20663,7 +20235,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       lineheight: themeValues.lineHeight,
       fontWeight: themeValues.fontWeight,
       margin: themeValues.margin,
-      extraStyles: "\n                          text-transform: uppercase;\n                          ".concat(isActive.toString() === "true" && "pointer-events: none;\n                             color: ".concat(themeValues.activeBreadcrumbColor, ";\n                            "), "\n                          &:first-child {\n                            margin-left: 0;\n                          }\n                          &:active {\n                            color: ").concat(themeValues.activeColor, "; \n                          }")
+      extraStyles: "\n                          text-transform: uppercase;\n                          text-decoration: none;\n                          ".concat(isActive.toString() === "true" && "color: ".concat(themeValues.activeBreadcrumbColor, ";\n                             pointer-events: none;\n                            "), "\n                          &:first-child {\n                            margin-left: 0;\n                          }\n                          &:active {\n                            color: ").concat(themeValues.activeColor, ";\n                          }")
     }, linkText), index < breadcrumbsList.length - 1 ? /*#__PURE__*/React__default.createElement(IconChevron, null) : /*#__PURE__*/React__default.createElement(React.Fragment, null));
   })));
 };
@@ -22243,9 +21815,7 @@ _curry2(function test(pattern, str) {
   return _cloneRegExp(pattern).test(str);
 });
 
-var URL_TEST = /(([a-z]{3,6}:\/\/)|(^|\s))([a-zA-Z0-9\-]+\.)+[a-z]{2,13}[\.\?\=\&\%\/\w\-]*\b([^@]|$)/;
-
-var _excluded$n = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
+var _excluded$o = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
 var ButtonWithLink = function ButtonWithLink(_ref) {
   var _ref$url = _ref.url,
     url = _ref$url === void 0 ? "/" : _ref$url,
@@ -22253,12 +21823,14 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$fileLink = _ref.fileLink,
     fileLink = _ref$fileLink === void 0 ? false : _ref$fileLink,
-    extraStyles = _ref.extraStyles,
-    linkExtraStyles = _ref.linkExtraStyles,
+    _ref$extraStyles = _ref.extraStyles,
+    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
+    _ref$linkExtraStyles = _ref.linkExtraStyles,
+    linkExtraStyles = _ref$linkExtraStyles === void 0 ? "" : _ref$linkExtraStyles,
     _ref$newTab = _ref.newTab,
     newTab = _ref$newTab === void 0 ? false : _ref$newTab,
     dataQa = _ref.dataQa,
-    otherProps = _objectWithoutProperties(_ref, _excluded$n);
+    otherProps = _objectWithoutProperties(_ref, _excluded$o);
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
       url = _ref2.url,
@@ -22346,7 +21918,7 @@ var ParagraphText = styled__default.p.withConfig({
   return extraStyles;
 });
 
-var _excluded$o = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
+var _excluded$p = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
 var Paragraph = function Paragraph(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -22360,7 +21932,7 @@ var Paragraph = function Paragraph(_ref) {
     dataQa = _ref.dataQa,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutProperties(_ref, _excluded$o);
+    rest = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(ParagraphText, _extends({
     weight: weight,
     color: color,
@@ -23074,19 +22646,32 @@ var toIndexedObject = function (it) {
   return indexedObject(requireObjectCoercible(it));
 };
 
-// https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot
 var documentAll = typeof document == 'object' && document.all;
 
+// https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot
+// eslint-disable-next-line unicorn/no-typeof-undefined -- required for testing
+var IS_HTMLDDA = typeof documentAll == 'undefined' && documentAll !== undefined;
+
+var documentAll_1 = {
+  all: documentAll,
+  IS_HTMLDDA: IS_HTMLDDA
+};
+
+var documentAll$1 = documentAll_1.all;
+
 // `IsCallable` abstract operation
 // https://tc39.es/ecma262/#sec-iscallable
-// eslint-disable-next-line unicorn/no-typeof-undefined -- required for testing
-var isCallable = typeof documentAll == 'undefined' && documentAll !== undefined ? function (argument) {
-  return typeof argument == 'function' || argument === documentAll;
+var isCallable = documentAll_1.IS_HTMLDDA ? function (argument) {
+  return typeof argument == 'function' || argument === documentAll$1;
 } : function (argument) {
   return typeof argument == 'function';
 };
 
-var isObject = function (it) {
+var documentAll$2 = documentAll_1.all;
+
+var isObject = documentAll_1.IS_HTMLDDA ? function (it) {
+  return typeof it == 'object' ? it !== null : isCallable(it) || it === documentAll$2;
+} : function (it) {
   return typeof it == 'object' ? it !== null : isCallable(it);
 };
 
@@ -23222,10 +22807,10 @@ var shared = createCommonjsModule(function (module) {
 (module.exports = function (key, value) {
   return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.35.1',
+  version: '3.33.3',
   mode:  'global',
-  copyright: '© 2014-2024 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.35.1/LICENSE',
+  copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
+  license: 'https://github.com/zloirock/core-js/blob/v3.33.3/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 });
@@ -23522,7 +23107,7 @@ var TEMPLATE = String(String).split('String');
 
 var makeBuiltIn = module.exports = function (value, name, options) {
   if (stringSlice($String(name), 0, 7) === 'Symbol(') {
-    name = '[' + replace($String(name), /^Symbol\(([^)]*)\).*$/, '$1') + ']';
+    name = '[' + replace($String(name), /^Symbol\(([^)]*)\)/, '$1') + ']';
   }
   if (options && options.getter) name = 'get ' + name;
   if (options && options.setter) name = 'set ' + name;
@@ -23610,8 +23195,7 @@ var min$1 = Math.min;
 // `ToLength` abstract operation
 // https://tc39.es/ecma262/#sec-tolength
 var toLength = function (argument) {
-  var len = toIntegerOrInfinity(argument);
-  return len > 0 ? min$1(len, 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
+  return argument > 0 ? min$1(toIntegerOrInfinity(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
 };
 
 // `LengthOfArrayLike` abstract operation
@@ -23771,7 +23355,7 @@ var _export = function (options, source) {
   } else if (STATIC) {
     target = global_1[TARGET] || defineGlobalProperty(TARGET, {});
   } else {
-    target = global_1[TARGET] && global_1[TARGET].prototype;
+    target = (global_1[TARGET] || {}).prototype;
   }
   if (target) for (key in source) {
     sourceProperty = source[key];
@@ -24034,15 +23618,11 @@ var functionUncurryThisAccessor = function (object, key, method) {
   } catch (error) { /* empty */ }
 };
 
-var isPossiblePrototype = function (argument) {
-  return isObject(argument) || argument === null;
-};
-
 var $String$4 = String;
 var $TypeError$6 = TypeError;
 
 var aPossiblePrototype = function (argument) {
-  if (isPossiblePrototype(argument)) return argument;
+  if (typeof argument == 'object' || isCallable(argument)) return argument;
   throw new $TypeError$6("Can't set " + $String$4(argument) + ' as a prototype');
 };
 
@@ -25669,7 +25249,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$p = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$q = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Detail elements
@@ -25719,7 +25299,7 @@ var Detail = function Detail(_ref) {
     as = _ref$as === void 0 ? "p" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$p);
+    rest = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React__default.createElement(DetailText, _extends({
     variant: variant,
     as: as,
@@ -25858,7 +25438,7 @@ var useToastNotification = function useToastNotification() {
 
 
 
-var index$4 = /*#__PURE__*/Object.freeze({
+var index$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   useOutsideClick: useOutsideClickHook,
   useScrollTo: useScrollTo,
@@ -26429,7 +26009,7 @@ var fallbackValues$k = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$q = ["showErrors", "themeValues"],
+var _excluded$r = ["showErrors", "themeValues"],
   _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
@@ -26464,7 +26044,7 @@ var InputField = styled__default.input.withConfig({
 var FormattedInputField = styled__default(function (_ref8) {
   var showErrors = _ref8.showErrors,
     themeValues = _ref8.themeValues,
-    props = _objectWithoutProperties(_ref8, _excluded$q);
+    props = _objectWithoutProperties(_ref8, _excluded$r);
   return /*#__PURE__*/React__default.createElement(FormattedInput, props);
 }).withConfig({
   displayName: "FormInput__FormattedInputField",
@@ -26563,7 +26143,7 @@ var FormInput = function FormInput(_ref15) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.hoverFocusStyles,
-    extraStyles: "cursor: pointer; &:focus { outline-offset: -2px; }",
+    extraStyles: "text-decoration: underline; cursor: pointer; &:focus { outline-offset: -2px; }",
     onClick: function onClick() {
       return setShowPassword(!showPassword);
     },
@@ -26636,7 +26216,7 @@ var FormInput = function FormInput(_ref15) {
 };
 var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$k, "default");
 
-var _excluded$r = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
+var _excluded$s = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
     breakpoint = _ref$breakpoint === void 0 ? "30rem" : _ref$breakpoint,
@@ -26645,7 +26225,7 @@ var FormInputRow = function FormInputRow(_ref) {
     largeChild = _ref.largeChild,
     largeChildSize = _ref.largeChildSize,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$r);
+    rest = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0"
   }, rest), /*#__PURE__*/React__default.createElement(Switcher, {
@@ -26656,24 +26236,24 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$s = ["childGap", "bottomItem", "children"];
+var _excluded$t = ["childGap", "bottomItem", "children"];
 var FormInputColumn = function FormInputColumn(_ref) {
   var _ref$childGap = _ref.childGap,
     childGap = _ref$childGap === void 0 ? "0.5rem" : _ref$childGap,
     bottomItem = _ref.bottomItem,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$s);
+    rest = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: childGap,
     bottomItem: bottomItem
   }, rest), children);
 };
 
-var _excluded$t = ["themeValues", "children"];
+var _excluded$u = ["themeValues", "children"];
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$t);
+    rest = _objectWithoutProperties(_ref, _excluded$u);
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, _extends({
@@ -26983,7 +26563,7 @@ var fallbackValues$o = {
   fontSize: fontSize$8
 };
 
-var _excluded$u = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$v = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -27002,7 +26582,7 @@ var Heading = function Heading(_ref) {
     as = _ref$as === void 0 ? variant : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$u);
+    rest = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
     variant: variant,
     as: as,
@@ -27203,11 +26783,11 @@ var LabeledAmountV2 = function LabeledAmountV2(_ref) {
   }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, amount));
 };
 
-var _excluded$v = ["version"];
+var _excluded$w = ["version"];
 var LabeledAmount = function LabeledAmount(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$v);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
 };
@@ -27344,7 +26924,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$w = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$x = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -27359,7 +26939,7 @@ var NavFooter = function NavFooter(_ref) {
     footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
     isMobile = _ref.isMobile,
     footerWidth = _ref.footerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$w);
+    rest = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
     background: backgroundColor,
@@ -27390,7 +26970,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$x = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$y = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -27399,7 +26979,7 @@ var NavHeader = function NavHeader(_ref) {
     isMobile = _ref.isMobile,
     backgroundColor = _ref.backgroundColor,
     headerWidth = _ref.headerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
     background: backgroundColor,
@@ -27610,24 +27190,23 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
     action = _ref.action,
     destination = _ref.destination,
     children = _ref.children,
-    dataQa = _ref.dataQa,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    dataQa = _ref.dataQa;
   return isLink ? /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
     to: destination,
     "data-qa": dataQa,
-    "aria-disabled": disabled
+    style: {
+      textDecoration: "none"
+    }
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minHeight: "100%",
-    extraStyles: disabled ? "cursor: default;" : "cursor: pointer;"
+    extraStyles: "cursor: pointer;"
   }, children)) : /*#__PURE__*/React__default.createElement(Box, {
-    onClick: disabled ? noop : action,
+    onClick: action,
     padding: "0",
     minHeight: "100%",
-    dataQa: dataQa,
-    "aria-disabled": disabled,
-    extraStyles: disabled ? "cursor: default;" : "cursor: pointer;"
+    extraStyles: "cursor: pointer;",
+    dataQa: dataQa
   }, children);
 };
 var Placeholder = function Placeholder(_ref2) {
@@ -27641,16 +27220,12 @@ var Placeholder = function Placeholder(_ref2) {
     variant = _ref2.variant,
     largeIcon = _ref2.largeIcon,
     themeValues = _ref2.themeValues,
-    dataQa = _ref2.dataQa,
-    _ref2$disabled = _ref2.disabled,
-    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
-  var tintedColor = "".concat(curriedTint$1(0.9, themeValues.color));
+    dataQa = _ref2.dataQa;
   return /*#__PURE__*/React__default.createElement(PlaceholderContentWrapper, {
     isLink: isLink,
     action: action,
     destination: destination,
-    dataQa: dataQa,
-    disabled: disabled
+    dataQa: dataQa
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
@@ -27658,14 +27233,14 @@ var Placeholder = function Placeholder(_ref2) {
     minHeight: themeValues.height,
     hiddenStyles: !visible,
     extraStyles: "\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(variant === "large" ? GRECIAN_GREY : tintedColor, ";")
+    hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : curriedTint$1(0.9, themeValues.color), ";")
   }, /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     tabIndex: "0",
     onKeyPress: function onKeyPress(e) {
-      return e.key === "Enter" && !disabled && action();
+      return e.key === "Enter" && action();
     }
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
@@ -39041,14 +38616,6 @@ var NavTabs = function NavTabs(_ref) {
   }, tabs)));
 };
 
-
-
-var index$5 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  colors: colors,
-  fontWeights: style_constants
-});
-
 var shineFrames = styled.keyframes(["{0{background-position:0 0;}20%{background-position:100% 100%;}100%{background-position:100% 100%;}}"]);
 var LoadingPill = styled__default.div.withConfig({
   displayName: "LoadingPillstyled__LoadingPill",
@@ -39161,7 +38728,7 @@ var TableRowWrapper = styled__default.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$y = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$z = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
     extraStyles = _ref.extraStyles,
@@ -39170,7 +38737,7 @@ var TableRow = function TableRow(_ref) {
     hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
     onClick = _ref.onClick,
     themeValues = _ref.themeValues,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(TableRowWrapper, _extends({
     onClick: onClick,
     hoverEffect: hoverEffect,
@@ -42495,22 +42062,10 @@ var PROPERTIES_COMMERCIAL_AUTO_ICON = "PROPERTIES_COMMERCIAL_AUTO";
 var MISC_BILL_ICON = "MISC_SINGLE_BILL";
 var iconsMap = (_iconsMap = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconsMap, ACCOUNTS_GENERIC_ICON, AccountGenericIcon), ACCOUNTS_CONSTRUCTION_ICON, AccountConstructionIcon), ACCOUNTS_HEALTH_ICON, AccountMedicalIcon), ACCOUNTS_DENTAL_ICON, AccountDentalIcon), ACCOUNTS_UTILITY_ELECTRIC_ICON, AccountElectricIcon), ACCOUNTS_UTILITY_GARBAGE_ICON, AccountGarbageIcon), ACCOUNTS_UTILITY_GAS_ICON, AccountGasIcon), ACCOUNTS_UTILITY_WATER_ICON, AccountWaterIcon), PROPERTIES_PERSONAL_ICON, PropertyPersonalIcon), PROPERTIES_GARAGE_ICON, PropertyGarageIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconsMap, PROPERTIES_BUSINESS_ICON, PropertyBusinessIcon), PROPERTIES_STOREFRONT_ICON, PropertyStorefrontIcon), PROPERTIES_APARTMENT_ICON, PropertyApartmentIcon), PROPERTIES_LAND_ICON, PropertyLandIcon), PROPERTIES_CAR_ICON, PropertyCarIcon), PROPERTIES_MOTORCYCLE_ICON, PropertyMotorcycleIcon), PROPERTIES_COMMERCIAL_AUTO_ICON, PropertyCommercialVehicleIcon), MISC_BILL_ICON, AccountBillIcon));
 
-var activeBackgroundColor$1 = {
-  primary: "".concat(CORNFLOWER_BLUE),
-  disabled: "".concat(ATHENS_GREY)
-};
-var backgroundColor$9 = {
-  primary: "".concat(LINK_WATER),
-  disabled: "".concat(ATHENS_GREY)
-};
-var borderColor$5 = {
-  primary: "".concat(MOON_RAKER),
-  disabled: "".concat(MANATEE_GREY)
-};
-var color$b = {
-  primary: "".concat(ROYAL_BLUE_VIVID),
-  disabled: "".concat(MANATEE_GREY)
-};
+var activeBackgroundColor$1 = CORNFLOWER_BLUE;
+var backgroundColor$9 = LINK_WATER;
+var borderColor$5 = MOON_RAKER;
+var color$b = ROYAL_BLUE_VIVID;
 var fallbackValues$I = {
   activeBackgroundColor: activeBackgroundColor$1,
   backgroundColor: backgroundColor$9,
@@ -42551,9 +42106,7 @@ var Footer = styled__default(Stack).withConfig({
 })(["align-items:center;width:100%;"]);
 
 var LinkCard = function LinkCard(_ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "primary" : _ref$variant,
-    _ref$title = _ref.title,
+  var _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Test Workflow" : _ref$title,
     _ref$subtitle = _ref.subtitle,
     subtitle = _ref$subtitle === void 0 ? "Link your benefit plan" : _ref$subtitle,
@@ -42587,8 +42140,7 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: extraStyles,
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
-    onClick: variant === "disabled" ? noop : onClick,
-    "aria-disabled": variant === "disabled"
+    onClick: onClick
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
@@ -42621,7 +42173,7 @@ var LinkCard = function LinkCard(_ref) {
     justify: "space-between"
   }, showLeft && !leftContent && /*#__PURE__*/React__default.createElement(Box, null), showLeft && leftContent, showRight && rightContent))));
 };
-var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "primary");
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I);
 
 var LoginForm = function LoginForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -46123,7 +45675,9 @@ var Modal$1 = function Modal(_ref) {
     _ref$dataQa = _ref.dataQa,
     dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
     _ref$initialFocusSele = _ref.initialFocusSelector,
-    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+    _ref$blurUnderlay = _ref.blurUnderlay,
+    blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   var modalContainerRef = React.useRef(null);
@@ -46143,7 +45697,10 @@ var Modal$1 = function Modal(_ref) {
       display: "flex",
       flexDirection: "column",
       justifyContent: "center",
-      alignItems: "center"
+      alignItems: "center",
+      background: "rgba(41, 42, 51, 0.45)",
+      backdropFilter: blurUnderlay ? "blur(4px)" : "none",
+      WebkitBackdropFilter: blurUnderlay ? "blur(4px)" : "none"
     },
     dialogStyle: {
       width: customWidth || "615px",
@@ -46494,10 +46051,6 @@ var NavMenuMobile = function NavMenuMobile(_ref2) {
 };
 var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$K, "profile");
 
-var ACH_METHOD = "BANK_ACCOUNT";
-var CC_METHOD = "CREDIT_CARD";
-var CASH_METHOD = "CASH";
-
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
     iconDefault = _ref.iconDefault,
@@ -46577,9 +46130,7 @@ var AutopayModal = function AutopayModal(_ref) {
     inactive = _ref.inactive,
     description = _ref.description,
     subDescription = _ref.subDescription,
-    allowedPaymentInstruments = _ref.allowedPaymentInstruments,
-    _ref$isInCustomerMana = _ref.isInCustomerManagement,
-    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
+    allowedPaymentInstruments = _ref.allowedPaymentInstruments;
   var generateMethodNeededText = function generateMethodNeededText(planText, allowedPaymentInstruments) {
     var allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
     var allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
@@ -46608,7 +46159,6 @@ var AutopayModal = function AutopayModal(_ref) {
       case "secondary":
         {
           return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-            disabled: isInCustomerManagement,
             text: autoPayActive ? "Turn off ".concat(shortPlan) : "Set Up ".concat(shortPlan),
             variant: "secondary",
             action: function action() {
@@ -46621,7 +46171,6 @@ var AutopayModal = function AutopayModal(_ref) {
       case "tertiary":
         {
           return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-            disabled: isInCustomerManagement,
             text: autoPayActive ? "Manage ".concat(shortPlan) : "Set Up ".concat(shortPlan),
             variant: "tertiary",
             action: function action() {
@@ -46738,9 +46287,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     dueDate = _ref.dueDate,
     description = _ref.description,
     subDescription = _ref.subDescription,
-    allowedPaymentInstruments = _ref.allowedPaymentInstruments,
-    _ref$isInCustomerMana = _ref.isInCustomerManagement,
-    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
+    allowedPaymentInstruments = _ref.allowedPaymentInstruments;
   var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -46820,8 +46367,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
       handleAutopayAction();
     },
     dataQa: "Set Up Autopay",
-    extraStyles: isMobile && "flex-grow: 1; width: 100%;",
-    disabled: isInCustomerManagement
+    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
   }) : /*#__PURE__*/React__default.createElement(AutopayModalModule, {
     autoPayActive: autoPayEnabled,
     autoPaySchedule: autoPaySchedule,
@@ -46847,8 +46393,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     },
     text: "Pay Now",
     variant: isMobile ? "smallSecondary" : "secondary",
-    dataQa: "Pay Now",
-    disabled: isInCustomerManagement
+    dataQa: "Pay Now"
   }))), isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "8px 0 0",
     width: "100%"
@@ -46860,8 +46405,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     text: "Pay Now",
     variant: isMobile ? "smallSecondary" : "secondary",
     dataQa: "Pay Now",
-    extraStyles: isMobile && "flex-grow: 1; width: 100%; margin: 0;",
-    disabled: isInCustomerManagement
+    extraStyles: isMobile && "flex-grow: 1; width: 100%; margin: 0;"
   }))));
 };
 
@@ -47033,9 +46577,7 @@ var Obligation = function Obligation(_ref) {
     _ref$inactiveLookupIn = _ref.inactiveLookupInput,
     inactiveLookupInput = _ref$inactiveLookupIn === void 0 ? "Account" : _ref$inactiveLookupIn,
     _ref$inactiveLookupVa = _ref.inactiveLookupValue,
-    inactiveLookupValue = _ref$inactiveLookupVa === void 0 ? "" : _ref$inactiveLookupVa,
-    _ref$isInCustomerMana = _ref.isInCustomerManagement,
-    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
+    inactiveLookupValue = _ref$inactiveLookupVa === void 0 ? "" : _ref$inactiveLookupVa;
   /*
     The value of obligations is always an array. It can contain:
       - A single obligation
@@ -47123,8 +46665,7 @@ var Obligation = function Obligation(_ref) {
     obligationAssocID: obligationAssocID,
     description: description,
     subDescription: subDescription,
-    allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    allowedPaymentInstruments: allowedPaymentInstruments
   }))), isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -47142,8 +46683,7 @@ var Obligation = function Obligation(_ref) {
     obligationAssocID: obligationAssocID,
     description: description,
     subDescription: subDescription,
-    allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    allowedPaymentInstruments: allowedPaymentInstruments
   }));
   var inactiveObligation = /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -47428,6 +46968,7 @@ var getPagesPanel = function getPagesPanel(page, pagesCount) {
 var Pagination = function Pagination(_ref3) {
   var _ref3$activeBorderWid = _ref3.activeBorderWidth,
     activeBorderWidth = _ref3$activeBorderWid === void 0 ? "3px" : _ref3$activeBorderWid,
+    ariaLabel = _ref3.ariaLabel,
     arrowColor = _ref3.arrowColor,
     _ref3$borderRadius = _ref3.borderRadius,
     borderRadius = _ref3$borderRadius === void 0 ? "3px" : _ref3$borderRadius,
@@ -47447,11 +46988,10 @@ var Pagination = function Pagination(_ref3) {
     pageNext = _ref3.pageNext,
     pagePrevious = _ref3.pagePrevious,
     setCurrentPage = _ref3.setCurrentPage,
-    ariaLabel = _ref3.ariaLabel,
     themeValues = _ref3.themeValues;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
-  var extraStyles = "\n    min-width: ".concat(buttonWidth, "; min-height: 100%; padding: 0;\n    border-radius: ").concat(borderRadius, ";\n    &:hover, &:focus {\n      text-decoration: none;\n      > * > span {\n        text-decoration: none;\n      }\n    }\n    > * > span {\n      color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, "\n    }\n    margin: 0;\n    &:hover {\n        background-color: ").concat(themeValues.hoverBackgroundColor, "\n    }\n  ");
+  var extraStyles = "\n    min-width: ".concat(buttonWidth, "; min-height: 100%; padding: 0;\n    border-radius: ").concat(borderRadius, ";\n    > * > span {\n      color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, "\n    }\n    margin: 0;\n    &:hover {\n        background-color: ").concat(themeValues.hoverBackgroundColor, "\n    }\n  ");
   var currentPageStyles = "\n    border: ".concat(activeBorderWidth, " solid ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, ";\n    color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.activeColor, ";\n    background-color: ").concat(themeValues.activeBackgroundColor, ";\n    &:focus {\n      box-shadow: none;\n    }\n    &:hover {\n      background-color: initial;\n      border: ").concat(activeBorderWidth, " solid ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, ";\n      background-color: ").concat(themeValues.activeBackgroundColor, ";\n    }\n  ");
   return /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
@@ -47632,7 +47172,7 @@ var fallbackValues$N = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$z = ["amount"],
+var _excluded$A = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -47872,7 +47412,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-      rest = _objectWithoutProperties(_ref5, _excluded$z);
+      rest = _objectWithoutProperties(_ref5, _excluded$A);
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
     });
@@ -47989,12 +47529,16 @@ var fontWeight$7 = {
 var modalLinkHoverFocus$1 = {
   "default": "outline: none; text-decoration: underline;"
 };
+var linkTextDecoration = {
+  "default": LINK_TEXT_DECORATION
+};
 var fallbackValues$O = {
   linkColor: linkColor$5,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
   fontWeight: fontWeight$7,
-  modalLinkHoverFocus: modalLinkHoverFocus$1
+  modalLinkHoverFocus: modalLinkHoverFocus$1,
+  linkTextDecoration: linkTextDecoration
 };
 
 var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
@@ -48048,6 +47592,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
+    textDecoration: themeValues.linkTextDecoration,
     extraStyles: "cursor: pointer;",
     role: "button",
     className: "modal-trigger"
@@ -48084,6 +47629,10 @@ var modalLinkHoverFocus$2 = {
   "default": standardInteractionStyles,
   footer: standardInteractionStyles
 };
+var modalLinkTextDecoration = {
+  "default": LINK_TEXT_DECORATION,
+  footer: "none"
+};
 var fallbackValues$P = {
   backgroundColor: backgroundColor$d,
   linkColor: linkColor$6,
@@ -48091,7 +47640,8 @@ var fallbackValues$P = {
   fontSize: fontSize$b,
   lineHeight: lineHeight$5,
   fontWeight: fontWeight$8,
-  modalLinkHoverFocus: modalLinkHoverFocus$2
+  modalLinkHoverFocus: modalLinkHoverFocus$2,
+  modalLinkTextDecoration: modalLinkTextDecoration
 };
 
 var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
@@ -48148,6 +47698,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
+    textDecoration: themeValues.modalLinkTextDecoration,
     extraStyles: "display: inline-block; width: fit-content; cursor: pointer",
     role: "button" // This should always be a "button" since it opens a modal
     ,
@@ -48281,11 +47832,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$A = ["version"];
+var _excluded$B = ["version"];
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
 };
@@ -49084,7 +48635,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$B = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
+var _excluded$C = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -49132,7 +48683,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$B);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -49604,7 +49155,7 @@ var TabSidebar = function TabSidebar(_ref) {
     return /*#__PURE__*/React__default.createElement(InternalLink, {
       to: route,
       key: "".concat(route, "-").concat(index),
-      extraStyles: "&:hover {\n            text-decoration: none; \n            ".concat(active ? "> * {\n                background-color: ".concat(themeValues.activeTabHover, ";\n              }") : "> * { \n                background-color: rgba(8, 27, 43, 0.05);\n              }", "}")
+      extraStyles: "text-decoration: none;\n            &:hover {\n            ".concat(active ? "> * {\n                background-color: ".concat(themeValues.activeTabHover, ";\n              }") : "> * { \n                background-color: rgba(8, 27, 43, 0.05);\n              }", "}")
     }, /*#__PURE__*/React__default.createElement(Box, {
       padding: isMobile ? "6px 4px" : "18px 16px",
       background: active ? themeValues.activeTabBackground : "transparent",
@@ -49813,8 +49364,225 @@ var WorkflowTile = function WorkflowTile(_ref) {
   }))));
 };
 
-var pageBackground = "#FBFCFD";
+var menuItemBackgroundColor = WHITE;
+var menuItemColor = ROYAL_BLUE_VIVID;
+var menuItemColorDelete = RAZZMATAZZ_RED;
+var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
+var menuItemHoverBackgroundColorDelete = BLUSH_RED;
+var menuItemHoverColor = ROYAL_BLUE_VIVID;
 var fallbackValues$U = {
+  menuItemBackgroundColor: menuItemBackgroundColor,
+  menuItemColor: menuItemColor,
+  menuItemColorDelete: menuItemColorDelete,
+  menuItemHoverBackgroundColor: menuItemHoverBackgroundColor,
+  menuItemHoverBackgroundColorDelete: menuItemHoverBackgroundColorDelete,
+  menuItemHoverColor: menuItemHoverColor
+};
+
+var PopupMenuItemContainer = styled__default(ButtonWithAction).withConfig({
+  displayName: "PopupMenuItemstyled__PopupMenuItemContainer",
+  componentId: "sc-urj1su-0"
+})(["width:100%;margin:0;padding:17px 11px;margin-bottom:5px;border:0;cursor:pointer;text-decoration:none;", " &:hover,&:active{text-decoration:none;", "}"], function (_ref) {
+  var theme = _ref.theme,
+    isDeleteAction = _ref.isDeleteAction;
+  return "\n    background-color: ".concat(theme.menuItemBackgroundColor, ";\n    color: ").concat(isDeleteAction ? theme.menuItemColorDelete : theme.menuItemColor, ";\n  ");
+}, function (_ref2) {
+  var theme = _ref2.theme,
+    isDeleteAction = _ref2.isDeleteAction;
+  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 PopupMenuItem = function PopupMenuItem(_ref) {
+  var id = _ref.id,
+    closeMenuCallback = _ref.closeMenuCallback,
+    _action = _ref.action,
+    themeValues = _ref.themeValues,
+    text = _ref.text,
+    _ref$hasIcon = _ref.hasIcon,
+    hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
+    _ref$isDeleteAction = _ref.isDeleteAction,
+    isDeleteAction = _ref$isDeleteAction === void 0 ? false : _ref$isDeleteAction,
+    Icon = _ref.icon,
+    textExtraStyles = _ref.textExtraStyles,
+    hoverStyles = _ref.hoverStyles,
+    activeStyles = _ref.activeStyles,
+    extraStyles = _ref.extraStyles,
+    rest = _objectWithoutProperties(_ref, _excluded$D);
+  return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
+    id: id,
+    role: "menuItem",
+    text: text,
+    action: function action() {
+      _action();
+      closeMenuCallback();
+    },
+    variant: "smallGhost",
+    isDeleteAction: isDeleteAction,
+    theme: themeValues,
+    contentOverride: true,
+    textExtraStyles: textExtraStyles,
+    hoverStyles: hoverStyles,
+    extraStyles: extraStyles,
+    activeStyles: "outline: none; ".concat(activeStyles)
+  }, rest), /*#__PURE__*/React__default.createElement(Box, {
+    extraStyles: "\n            display: flex;\n            gap: 8px;\n            justify-content: center;\n            padding: 0;\n        "
+  }, hasIcon && /*#__PURE__*/React__default.createElement(Icon, {
+    iconFill: isDeleteAction ? themeValues.menuItemColorDelete : themeValues.menuItemColor
+  }), text && /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "pS",
+    weight: FONT_WEIGHT_SEMIBOLD,
+    fontFamily: "Public Sans, sans-serif",
+    color: isDeleteAction ? themeValues.menuItemColorDelete : themeValues.menuItemColor,
+    extraStyles: textExtraStyles
+  }, text)));
+};
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$U);
+
+var hoverColor$6 = "#116285";
+var activeColor$a = "#0E506D";
+var menuTriggerColor = "#15749D";
+var backgroundColor$e = "white";
+var fallbackValues$V = {
+  hoverColor: hoverColor$6,
+  activeColor: activeColor$a,
+  menuTriggerColor: menuTriggerColor,
+  backgroundColor: backgroundColor$e
+};
+
+var PopupMenuContainer = styled__default(Box).withConfig({
+  displayName: "PopupMenustyled__PopupMenuContainer",
+  componentId: "sc-1ge13q9-0"
+})(["display:flex;position:relative;padding:0;"]);
+var PopupMenuTriggerButton = styled__default(ButtonWithAction).withConfig({
+  displayName: "PopupMenustyled__PopupMenuTriggerButton",
+  componentId: "sc-1ge13q9-1"
+})(["padding:10px 15px;min-width:auto;&:active,&:focus{outline:none;border:1px solid rgba(196,206,244,1);background-color:rgba(235,239,251,1);}"]);
+
+var PopupMenu = function PopupMenu(_ref) {
+  var _ref$menuId = _ref.menuId,
+    menuId = _ref$menuId === void 0 ? "popup-menu" : _ref$menuId,
+    _ref$menuItems = _ref.menuItems,
+    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems,
+    themeValues = _ref.themeValues,
+    _ref$triggerText = _ref.triggerText,
+    triggerText = _ref$triggerText === void 0 ? "trigger text" : _ref$triggerText,
+    _ref$hasIcon = _ref.hasIcon,
+    hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
+    Icon = _ref.icon,
+    _ref$iconHelpText = _ref.iconHelpText,
+    iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
+    menuFocus = _ref.menuFocus,
+    containerExtraStyles = _ref.containerExtraStyles,
+    textExtraStyles = _ref.textExtraStyles,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? "300px" : _ref$maxWidth,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "auto" : _ref$height,
+    position = _ref.position,
+    _ref$transform = _ref.transform,
+    transform = _ref$transform === void 0 ? "none" : _ref$transform,
+    buttonExtraStyles = _ref.buttonExtraStyles,
+    popupExtraStyles = _ref.popupExtraStyles;
+  var hoverColor = themeValues.hoverColor,
+    activeColor = themeValues.activeColor,
+    menuTriggerColor = themeValues.menuTriggerColor,
+    backgroundColor = themeValues.backgroundColor;
+  var _ref2 = position !== null && position !== void 0 ? position : {},
+    _ref2$top = _ref2.top,
+    top = _ref2$top === void 0 ? "".concat(height, "px") : _ref2$top,
+    _ref2$right = _ref2.right,
+    right = _ref2$right === void 0 ? "auto" : _ref2$right,
+    _ref2$bottom = _ref2.bottom,
+    bottom = _ref2$bottom === void 0 ? "auto" : _ref2$bottom,
+    _ref2$left = _ref2.left,
+    left = _ref2$left === void 0 ? "0" : _ref2$left;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMenuOpen = _useState2[0],
+    setIsMenuOpen = _useState2[1];
+  var menuRef = React.useRef();
+  var triggerRef = React.useRef();
+  var toggleMenu = function toggleMenu(menuState) {
+    return setIsMenuOpen(menuState);
+  };
+  React.useEffect(function () {
+    var checkIfClickedOutside = function checkIfClickedOutside(e) {
+      // If the menu is open and the clicked target is not within the menu or the trigger
+      if (isMenuOpen && menuRef.current && !menuRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
+        toggleMenu(false);
+      }
+    };
+    document.addEventListener("click", checkIfClickedOutside);
+    return function () {
+      document.removeEventListener("click", checkIfClickedOutside);
+    };
+  }, [isMenuOpen]);
+  return /*#__PURE__*/React__default.createElement(PopupMenuContainer, {
+    extraStyles: containerExtraStyles
+  }, /*#__PURE__*/React__default.createElement(PopupMenuTriggerButton, {
+    ref: triggerRef,
+    action: function action() {
+      toggleMenu(!isMenuOpen);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Escape") {
+        toggleMenu(false);
+      }
+    },
+    contentOverride: true,
+    variant: "smallGhost",
+    tabIndex: "0",
+    id: menuId,
+    borderRadius: "8px",
+    "aria-haspopup": "true",
+    "aria-expanded": isMenuOpen,
+    "aria-controls": "".concat(menuId, "-container"),
+    extraStyles: buttonExtraStyles
+  }, hasIcon && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, null), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    srOnly: true
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    id: "btn".concat(menuId, "_info")
+  }, iconHelpText))), !hasIcon && /*#__PURE__*/React__default.createElement(Text$1, {
+    color: menuTriggerColor,
+    extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
+  }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
+    as: "div",
+    id: "".concat(menuId, "-container"),
+    ref: menuRef,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Escape") {
+        toggleMenu(false);
+      }
+    },
+    background: backgroundColor,
+    borderRadius: "8px",
+    boxShadow: "\n          0px 7px 32px 0px rgba(41, 42, 51, 0.2),\n          0px 1px 4px 0px rgba(41, 42, 51, 0.2),\n          0px 1px 8px -1px rgba(41, 42, 51, 0.3);\n        ",
+    role: "menu",
+    "aria-labelledby": menuId,
+    tabIndex: menuFocus && isMenuOpen ? "0" : "-1",
+    minWidth: minWidth,
+    maxWidth: maxWidth,
+    extraStyles: "\n          display: ".concat(isMenuOpen ? "block" : "none", ";\n          position: absolute;\n          padding: 8px 8px 3px 8px;\n          top: ").concat(top, "; \n          left: ").concat(left, ";\n          right: ").concat(right, ";\n          bottom: ").concat(bottom, ";\n          height: ").concat(height, ";\n          transform: ").concat(transform, ";\n          ").concat(popupExtraStyles, ";\n        ")
+  }, menuItems.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(PopupMenuItem$1, _extends({
+      key: index,
+      id: "".concat(menuId, "-item-").concat(index),
+      closeMenuCallback: function closeMenuCallback() {
+        toggleMenu(false);
+        // focus back to trigger button when menu closes
+        triggerRef.current.focus();
+      }
+    }, item));
+  })));
+};
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$V);
+
+var pageBackground = "#FBFCFD";
+var fallbackValues$W = {
   pageBackground: pageBackground
 };
 
@@ -49862,7 +49630,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$U));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$W));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -49905,7 +49673,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$U));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$W));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -49920,13 +49688,15 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     _ref$gutters = _ref.gutters,
     gutters = _ref$gutters === void 0 ? "2rem" : _ref$gutters,
     _ref$fillPageVertical = _ref.fillPageVertical,
-    fillPageVertical = _ref$fillPageVertical === void 0 ? false : _ref$fillPageVertical;
+    fillPageVertical = _ref$fillPageVertical === void 0 ? false : _ref$fillPageVertical,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? COOL_GREY_05 : _ref$background;
   var themeContext = React.useContext(styled.ThemeContext);
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: COOL_GREY_05,
+    background: background,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(Cover, {
     childGap: "0",
@@ -49949,7 +49719,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$U));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$W));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -50002,7 +49772,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$U));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$W));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -50072,7 +49842,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$U));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$W));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -50150,6 +49920,7 @@ exports.Checkbox = Checkbox$1;
 exports.CheckboxList = CheckboxList$1;
 exports.CheckmarkIcon = CheckmarkIcon;
 exports.ChevronIcon = ChevronIcon$1;
+exports.CloseIcon = CloseIcon;
 exports.Cluster = Cluster;
 exports.CollapsibleSection = CollapsibleSection$1;
 exports.Copyable = Copyable;
@@ -50244,6 +50015,7 @@ exports.Placeholder = Placeholder$1;
 exports.PlusCircleIcon = PlusCircleIcon;
 exports.PointOfSaleImage = PointOfSaleImage;
 exports.Popover = Popover$1;
+exports.PopupMenu = PopupMenu$1;
 exports.ProcessingFee = ProcessingFee$1;
 exports.ProfileIcon = ProfileIcon$1;
 exports.ProfileIconSmall = ProfileIconSmall$1;
@@ -50302,6 +50074,7 @@ exports.Title = Title$1;
 exports.ToastNotification = ToastNotification;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.TrashIcon = TrashIcon$1;
+exports.TrashIconV2 = TrashIconV2$1;
 exports.TypeaheadInput = TypeaheadInput;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
 exports.VoidedIcon = VoidedIcon;
@@ -50314,10 +50087,10 @@ exports.WorkflowTile = WorkflowTile;
 exports.XCircleIconMedium = XCircleIconMedium;
 exports.XCircleIconSmall = XCircleIconSmall;
 exports.cardRegistry = cardRegistry;
-exports.constants = index$5;
+exports.constants = index$4;
 exports.createPartialAmountFormState = createPartialAmountFormState;
 exports.createPartialAmountFormValidators = createPartialAmountFormValidators;
-exports.hooks = index$4;
+exports.hooks = index$5;
 exports.util = index$6;
 exports.withWindowSize = withWindowSize;
 //# sourceMappingURL=index.cjs.js.map