@thecb/components 8.0.4-beta.3 → 8.0.4-beta.4

package/dist/index.esm.js

@@ -4779,7 +4779,7 @@ var fontSize = {
   pXL: "1.5rem" // 24px
 
 };
-var fallbackValues$1 = {
+var fallbackValues = {
   fontFamily: fontFamily,
   fontSize: fontSize
 };
@@ -6406,7 +6406,7 @@ var Text = function Text(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
-var Text$1 = themeComponent(Text, "Text", fallbackValues$1, "p");
+var Text$1 = themeComponent(Text, "Text", fallbackValues, "p");
 
 var _excluded$2 = ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles", "ariaControls", "ariaLabel"];
 /*
@@ -12763,7 +12763,7 @@ var activeColor = {
   whiteSecondary: WHITE,
   whitePrimary: WHITE
 };
-var fallbackValues$2 = {
+var fallbackValues$1 = {
   padding: padding,
   color: color$1,
   fontSizeVariant: fontSizeVariant,
@@ -12923,7 +12923,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
       rest = _objectWithoutProperties(_ref2, _excluded$h);
 
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$2, "Button", variant);
+  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  ");
@@ -12979,7 +12979,7 @@ var singleIconColor = {
   secondary: "".concat(BRIGHT_GREY),
   darkMode: "".concat(WHITE)
 };
-var fallbackValues$3 = {
+var fallbackValues$2 = {
   primaryColor: primaryColor,
   accentColor: accentColor,
   subIconColor: subIconColor,
@@ -13019,7 +13019,7 @@ var AccountsIcon = function AccountsIcon(_ref) {
   })));
 };
 
-var AccountsIcon$1 = themeComponent(AccountsIcon, "Icons", fallbackValues$3, "info");
+var AccountsIcon$1 = themeComponent(AccountsIcon, "Icons", fallbackValues$2, "info");
 
 var AccountsAddIcon = function AccountsAddIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13058,7 +13058,7 @@ var AccountsAddIcon = function AccountsAddIcon(_ref) {
   })));
 };
 
-var AccountsAddIcon$1 = themeComponent(AccountsAddIcon, "Icons", fallbackValues$3, "info");
+var AccountsAddIcon$1 = themeComponent(AccountsAddIcon, "Icons", fallbackValues$2, "info");
 
 var ForgotPasswordIcon = function ForgotPasswordIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13096,7 +13096,7 @@ var ForgotPasswordIcon = function ForgotPasswordIcon(_ref) {
   })));
 };
 
-var ForgotPasswordIcon$1 = themeComponent(ForgotPasswordIcon, "Icons", fallbackValues$3, "info");
+var ForgotPasswordIcon$1 = themeComponent(ForgotPasswordIcon, "Icons", fallbackValues$2, "info");
 
 var GoToEmailIcon = function GoToEmailIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13126,7 +13126,7 @@ var GoToEmailIcon = function GoToEmailIcon(_ref) {
   })));
 };
 
-var GoToEmailIcon$1 = themeComponent(GoToEmailIcon, "Icons", fallbackValues$3, "info");
+var GoToEmailIcon$1 = themeComponent(GoToEmailIcon, "Icons", fallbackValues$2, "info");
 
 var VerifiedEmailIcon = function VerifiedEmailIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13170,7 +13170,7 @@ var VerifiedEmailIcon = function VerifiedEmailIcon(_ref) {
   })));
 };
 
-var VerifiedEmailIcon$1 = themeComponent(VerifiedEmailIcon, "Icons", fallbackValues$3, "info");
+var VerifiedEmailIcon$1 = themeComponent(VerifiedEmailIcon, "Icons", fallbackValues$2, "info");
 
 var PaymentMethodIcon = function PaymentMethodIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13205,7 +13205,7 @@ var PaymentMethodIcon = function PaymentMethodIcon(_ref) {
   })));
 };
 
-var PaymentMethodIcon$1 = themeComponent(PaymentMethodIcon, "Icons", fallbackValues$3, "info");
+var PaymentMethodIcon$1 = themeComponent(PaymentMethodIcon, "Icons", fallbackValues$2, "info");
 
 var AccountsIconSmall = function AccountsIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13244,7 +13244,7 @@ var AccountsIconSmall = function AccountsIconSmall(_ref) {
   }))))))));
 };
 
-var AccountsIconSmall$1 = themeComponent(AccountsIconSmall, "Icons", fallbackValues$3, "primary");
+var AccountsIconSmall$1 = themeComponent(AccountsIconSmall, "Icons", fallbackValues$2, "primary");
 
 var PaymentsIconSmall = function PaymentsIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13295,7 +13295,7 @@ var PaymentsIconSmall = function PaymentsIconSmall(_ref) {
   }))))))));
 };
 
-var PaymentsIconSmall$1 = themeComponent(PaymentsIconSmall, "Icons", fallbackValues$3, "primary");
+var PaymentsIconSmall$1 = themeComponent(PaymentsIconSmall, "Icons", fallbackValues$2, "primary");
 
 var PaymentMethodAddIcon = function PaymentMethodAddIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13359,7 +13359,7 @@ var PaymentMethodAddIcon = function PaymentMethodAddIcon(_ref) {
   })))))));
 };
 
-var PaymentMethodAddIcon$1 = themeComponent(PaymentMethodAddIcon, "Icons", fallbackValues$3, "info");
+var PaymentMethodAddIcon$1 = themeComponent(PaymentMethodAddIcon, "Icons", fallbackValues$2, "info");
 
 var ProfileIconSmall = function ProfileIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13388,7 +13388,7 @@ var ProfileIconSmall = function ProfileIconSmall(_ref) {
   })))));
 };
 
-var ProfileIconSmall$1 = themeComponent(ProfileIconSmall, "Icons", fallbackValues$3, "primary");
+var ProfileIconSmall$1 = themeComponent(ProfileIconSmall, "Icons", fallbackValues$2, "primary");
 
 var SettingsIconSmall = function SettingsIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13439,7 +13439,7 @@ var SettingsIconSmall = function SettingsIconSmall(_ref) {
   }))))))));
 };
 
-var SettingsIconSmall$1 = themeComponent(SettingsIconSmall, "Icons", fallbackValues$3, "primary");
+var SettingsIconSmall$1 = themeComponent(SettingsIconSmall, "Icons", fallbackValues$2, "primary");
 
 var WalletIconSmall = function WalletIconSmall(_ref) {
   var themeValues = _ref.themeValues,
@@ -13480,7 +13480,7 @@ var WalletIconSmall = function WalletIconSmall(_ref) {
   })));
 };
 
-var WalletIconSmall$1 = themeComponent(WalletIconSmall, "Icons", fallbackValues$3, "primary");
+var WalletIconSmall$1 = themeComponent(WalletIconSmall, "Icons", fallbackValues$2, "primary");
 
 var ChevronIcon = function ChevronIcon(_ref) {
   var themeValues = _ref.themeValues,
@@ -13522,7 +13522,7 @@ var ChevronIcon = function ChevronIcon(_ref) {
   }))));
 };
 
-var ChevronIcon$1 = themeComponent(ChevronIcon, "Icons", fallbackValues$3, "secondary");
+var ChevronIcon$1 = themeComponent(ChevronIcon, "Icons", fallbackValues$2, "secondary");
 
 var PropertiesAddIcon = function PropertiesAddIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13591,7 +13591,7 @@ var PropertiesAddIcon = function PropertiesAddIcon(_ref) {
   })))))));
 };
 
-var PropertiesAddIcon$1 = themeComponent(PropertiesAddIcon, "Icons", fallbackValues$3, "info");
+var PropertiesAddIcon$1 = themeComponent(PropertiesAddIcon, "Icons", fallbackValues$2, "info");
 
 var PropertiesIconSmall = function PropertiesIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13618,7 +13618,7 @@ var PropertiesIconSmall = function PropertiesIconSmall(_ref) {
   })));
 };
 
-var PropertiesIconSmall$1 = themeComponent(PropertiesIconSmall, "Icons", fallbackValues$3, "primary");
+var PropertiesIconSmall$1 = themeComponent(PropertiesIconSmall, "Icons", fallbackValues$2, "primary");
 
 var AccountNumberImage = function AccountNumberImage() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -14523,7 +14523,7 @@ var WalletIcon = function WalletIcon(_ref) {
   }))));
 };
 
-var WalletIcon$1 = themeComponent(WalletIcon, "Icons", fallbackValues$3, "info");
+var WalletIcon$1 = themeComponent(WalletIcon, "Icons", fallbackValues$2, "info");
 
 var AchReturnIcon = function AchReturnIcon() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -14774,7 +14774,7 @@ var PencilIcon = function PencilIcon(_ref) {
   }));
 };
 
-var PencilIcon$1 = themeComponent(PencilIcon, "Icons", fallbackValues$3, "info");
+var PencilIcon$1 = themeComponent(PencilIcon, "Icons", fallbackValues$2, "info");
 
 var PendingIcon = function PendingIcon(_ref) {
   var _ref$fill = _ref.fill,
@@ -14986,7 +14986,7 @@ var CarrotIcon = function CarrotIcon(_ref) {
   }))))))));
 };
 
-var CarrotIcon$1 = themeComponent(CarrotIcon, "Icons", fallbackValues$3, "darkMode");
+var CarrotIcon$1 = themeComponent(CarrotIcon, "Icons", fallbackValues$2, "darkMode");
 
 var ProfileIcon = function ProfileIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -15024,7 +15024,7 @@ var ProfileIcon = function ProfileIcon(_ref) {
   }))));
 };
 
-var ProfileIcon$1 = themeComponent(ProfileIcon, "Icons", fallbackValues$3, "info");
+var ProfileIcon$1 = themeComponent(ProfileIcon, "Icons", fallbackValues$2, "info");
 
 var GenericCardLarge = function GenericCardLarge() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -15085,7 +15085,7 @@ var EmptyCartIcon = function EmptyCartIcon(_ref) {
   })));
 };
 
-var EmptyCartIcon$1 = themeComponent(EmptyCartIcon, "Icons", fallbackValues$3, "info");
+var EmptyCartIcon$1 = themeComponent(EmptyCartIcon, "Icons", fallbackValues$2, "info");
 
 var ShoppingCartIcon = function ShoppingCartIcon() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -15157,7 +15157,7 @@ var TrashIcon = function TrashIcon(_ref) {
   })));
 };
 
-var TrashIcon$1 = themeComponent(TrashIcon, "Icons", fallbackValues$3, "primary");
+var TrashIcon$1 = themeComponent(TrashIcon, "Icons", fallbackValues$2, "primary");
 
 var NoCustomerResultsIcon = function NoCustomerResultsIcon() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -15750,7 +15750,7 @@ var WalletBannerIcon = function WalletBannerIcon(_ref) {
   }));
 };
 
-var WalletBannerIcon$1 = themeComponent(WalletBannerIcon, "Icons", fallbackValues$3, "primary");
+var WalletBannerIcon$1 = themeComponent(WalletBannerIcon, "Icons", fallbackValues$2, "primary");
 
 var StandardCheckoutImage = function StandardCheckoutImage() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -17262,7 +17262,7 @@ var FindIconSmall = function FindIconSmall(_ref) {
   })));
 };
 
-var FindIconSmall$1 = themeComponent(FindIconSmall, "Icons", fallbackValues$3, "primary");
+var FindIconSmall$1 = themeComponent(FindIconSmall, "Icons", fallbackValues$2, "primary");
 
 var HistoryIconSmall = function HistoryIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -17288,7 +17288,7 @@ var HistoryIconSmall = function HistoryIconSmall(_ref) {
   }));
 };
 
-var HistoryIconSmall$1 = themeComponent(HistoryIconSmall, "Icons", fallbackValues$3, "primary");
+var HistoryIconSmall$1 = themeComponent(HistoryIconSmall, "Icons", fallbackValues$2, "primary");
 
 var ChargebackIconSmall = function ChargebackIconSmall(_ref) {
   var _ref$color = _ref.color,
@@ -18023,7 +18023,7 @@ var ChargebackReversalIconMedium = function ChargebackReversalIconMedium(_ref) {
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
-var fallbackValues$4 = {
+var fallbackValues$3 = {
   color: color$2,
   hoverColor: hoverColor$1,
   activeColor: activeColor$1
@@ -18065,7 +18065,7 @@ var AddObligation = function AddObligation(_ref) {
   })))));
 };
 
-var AddObligation$1 = themeComponent(AddObligation, "AddObligation", fallbackValues$4);
+var AddObligation$1 = themeComponent(AddObligation, "AddObligation", fallbackValues$3);
 
 var IconChevron = function IconChevron(_ref) {
   var _ref$fill = _ref.fill,
@@ -18454,7 +18454,7 @@ var link = {
   error: "".concat(SCIENCE_BLUE),
   success: "".concat(SCIENCE_BLUE)
 };
-var fallbackValues$5 = {
+var fallbackValues$4 = {
   background: background,
   border: border$1,
   iconBackground: iconBackground,
@@ -18607,7 +18607,7 @@ var Alert = function Alert(_ref) {
   }, content) : content);
 };
 
-var Alert$1 = themeComponent(Alert, "Alert", fallbackValues$5, "info");
+var Alert$1 = themeComponent(Alert, "Alert", fallbackValues$4, "info");
 
 var TitleText = styled.h1.withConfig({
   displayName: "Titlestyled__TitleText",
@@ -18652,7 +18652,7 @@ var mobileFontSize = {
   small: "1.2142rem" // 17px
 
 };
-var fallbackValues$6 = {
+var fallbackValues$5 = {
   fontFamily: fontFamily$1,
   fontSize: fontSize$1
 };
@@ -18689,7 +18689,7 @@ var _excluded$i = ["themeValues", "weight", "color", "margin", "textAlign", "ext
 var isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
 var isTouchDevice$1 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
 var mobileDeviceDetected = isBelowBreakpoint && isTouchDevice$1;
-var fallbacks = mobileDeviceDetected ? mobileFallbackValues : fallbackValues$6;
+var fallbacks = mobileDeviceDetected ? mobileFallbackValues : fallbackValues$5;
 
 var Title = function Title(_ref) {
   var themeValues = _ref.themeValues,
@@ -18729,7 +18729,7 @@ var Title = function Title(_ref) {
 var Title$1 = themeComponent(Title, "Title", fallbacks, "large");
 
 var color$3 = "#292A33";
-var fallbackValues$7 = {
+var fallbackValues$6 = {
   color: color$3
 };
 
@@ -18748,7 +18748,7 @@ var AmountCallout = function AmountCallout(_ref) {
   }, amount));
 };
 
-var AmountCallout$1 = themeComponent(AmountCallout, "AmountCallout", fallbackValues$7);
+var AmountCallout$1 = themeComponent(AmountCallout, "AmountCallout", fallbackValues$6);
 
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
@@ -19567,7 +19567,7 @@ var curriedTint = /*#__PURE__*/curry
 var curriedTint$1 = curriedTint;
 
 var linkColor = MATISSE_BLUE;
-var fallbackValues$8 = {
+var fallbackValues$7 = {
   linkColor: linkColor
 };
 
@@ -19594,7 +19594,7 @@ var BoxWithShadow = function BoxWithShadow(_ref) {
   }, props), children);
 };
 
-var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues$8);
+var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues$7);
 
 // import theme from "styled-theming";
 /*
@@ -19610,7 +19610,7 @@ var lineHeight = "1.25rem";
 var fontWeight$1 = "400";
 var margin = "0.5rem";
 var hover = "text-decoration: none;";
-var fallbackValues$9 = {
+var fallbackValues$8 = {
   color: color$4,
   activeColor: activeColor$2,
   activeBreadcrumbColor: activeBreadcrumbColor,
@@ -19628,7 +19628,7 @@ var fontFamily$2 = {
 var hoverColor$2 = "#116285";
 var activeColor$3 = "#0E506D";
 var externalLinkColor = "#15749D";
-var fallbackValues$a = {
+var fallbackValues$9 = {
   fontFamily: fontFamily$2,
   hoverColor: hoverColor$2,
   activeColor: activeColor$3,
@@ -19703,7 +19703,7 @@ var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
       ariaLabel = _ref.ariaLabel,
       children = _ref.children;
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
+  var themeValues = createThemeValues(themeContext, fallbackValues$9, "Link", variant);
   return /*#__PURE__*/React.createElement(StyledExternalLink, {
     href: href,
     target: newTab ? "_blank" : "",
@@ -19795,7 +19795,7 @@ var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _ref$extraStyles = _ref.extraStyles,
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles;
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
+  var themeValues = createThemeValues(themeContext, fallbackValues$9, "Link", variant);
   return /*#__PURE__*/React.createElement(StyledInternalLink, {
     to: to,
     color: color,
@@ -19818,7 +19818,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   var _ref$breadcrumbsList = _ref.breadcrumbsList,
       breadcrumbsList = _ref$breadcrumbsList === void 0 ? [] : _ref$breadcrumbsList;
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$9, "Breadcrumb");
+  var themeValues = createThemeValues(themeContext, fallbackValues$8, "Breadcrumb");
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     as: "nav",
@@ -21499,7 +21499,7 @@ var fontSize$3 = {
   pXL: "1.5rem" // 24px
 
 };
-var fallbackValues$b = {
+var fallbackValues$a = {
   fontFamily: fontFamily$3,
   fontSize: fontSize$3
 };
@@ -21556,11 +21556,11 @@ var Paragraph = function Paragraph(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
-var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$b, "p");
+var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$a, "p");
 
 var backgroundColor$1 = WHITE;
 var iconBackgroundColor = GRECIAN_GREY;
-var fallbackValues$c = {
+var fallbackValues$b = {
   backgroundColor: backgroundColor$1,
   iconBackgroundColor: iconBackgroundColor
 };
@@ -21703,7 +21703,7 @@ var CardRegistryCard = function CardRegistryCard(_ref2) {
   }))))));
 };
 
-var CardRegistryCard$1 = themeComponent(withWindowSize(CardRegistryCard), "CardRegistryCard", fallbackValues$c);
+var CardRegistryCard$1 = themeComponent(withWindowSize(CardRegistryCard), "CardRegistryCard", fallbackValues$b);
 
 var cardRegistry = {
   accounts: function accounts(props) {
@@ -21774,7 +21774,7 @@ var checkedStyles = {
 var defaultStyles = {
   "default": "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(STORM_GREY, ";\n")
 };
-var fallbackValues$d = {
+var fallbackValues$c = {
   backgroundColor: backgroundColor$2,
   textFontSize: textFontSize,
   textFontWeight: textFontWeight,
@@ -21915,7 +21915,7 @@ var Checkbox = function Checkbox(_ref4) {
   }, title)));
 };
 
-var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$d, "default");
+var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$c, "default");
 
 var listBackgroundColor = {
   "default": "".concat(ATHENS_GREY),
@@ -21941,7 +21941,7 @@ var radioButtonInactive = {
   "default": "".concat(GHOST_GREY),
   disabled: "".concat(GHOST_GREY)
 };
-var fallbackValues$e = {
+var fallbackValues$d = {
   listBackgroundColor: listBackgroundColor,
   listItemColor: listItemColor,
   listItemBackgroundColor: listItemBackgroundColor,
@@ -22112,7 +22112,7 @@ var CheckboxList = function CheckboxList(_ref2) {
   })));
 };
 
-var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$e, "default");
+var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$d, "default");
 
 var DropdownIcon = function DropdownIcon() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -23413,7 +23413,7 @@ exportTypedArrayMethod$1('at', function at(index) {
 
 var selectedColor = "".concat(MATISSE_BLUE);
 var hoverColor$3 = "".concat(HOVER_LIGHT_BLUE);
-var fallbackValues$f = {
+var fallbackValues$e = {
   selectedColor: selectedColor,
   hoverColor: hoverColor$3
 };
@@ -23808,7 +23808,7 @@ var Dropdown = function Dropdown(_ref8) {
   }))) : /*#__PURE__*/React.createElement(Fragment$1, null)));
 };
 
-var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$f);
+var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$e);
 
 var SelectContainer = styled.div.withConfig({
   displayName: "FormSelectstyled__SelectContainer",
@@ -23879,7 +23879,7 @@ var hoverFocusStyles = {
   "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6D717E;"
 };
-var fallbackValues$g = {
+var fallbackValues$f = {
   linkColor: linkColor$1,
   formBackgroundColor: formBackgroundColor,
   inputBackgroundColor: inputBackgroundColor,
@@ -23982,7 +23982,7 @@ var FormSelect = function FormSelect(_ref) {
   })));
 };
 
-var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$g, "default");
+var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$f, "default");
 
 var options = [{
   text: "Afghanistan",
@@ -24799,7 +24799,7 @@ var mobileFontSize$1 = {
   extraSmall: "0.71428rem" // 10px
 
 };
-var fallbackValues$h = {
+var fallbackValues$g = {
   fontFamily: fontFamily$4,
   fontSize: fontSize$5
 };
@@ -24839,7 +24839,7 @@ var _excluded$o = ["themeValues", "weight", "color", "margin", "textAlign", "ext
 var isBelowBreakpoint$1 = window.innerWidth < MOBILE_BREAKPOINT$1;
 var isTouchDevice$2 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
 var mobileDeviceDetected$1 = isBelowBreakpoint$1 && isTouchDevice$2;
-var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$h;
+var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$g;
 
 var Detail = function Detail(_ref) {
   var themeValues = _ref.themeValues,
@@ -24880,7 +24880,7 @@ var Detail$1 = themeComponent(Detail, "Detail", fallbacks$1, "regular");
 
 var backgroundColor$3 = WHITE;
 var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
-var fallbackValues$i = {
+var fallbackValues$h = {
   backgroundColor: backgroundColor$3,
   boxShadow: boxShadow
 };
@@ -24901,7 +24901,7 @@ var DisplayBox = function DisplayBox(_ref) {
   }, children));
 };
 
-var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$i);
+var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$h);
 
 function _extends$2() {
   _extends$2 = Object.assign || function (target) {
@@ -25292,7 +25292,7 @@ var index$4 = /*#__PURE__*/Object.freeze({
 var hoverColor$4 = "#116285";
 var activeColor$4 = "#0E506D";
 var popoverTriggerColor = "#15749D";
-var fallbackValues$j = {
+var fallbackValues$i = {
   hoverColor: hoverColor$4,
   activeColor: activeColor$4,
   popoverTriggerColor: popoverTriggerColor
@@ -25450,7 +25450,7 @@ var Popover = function Popover(_ref) {
   })));
 };
 
-var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$j);
+var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$i);
 
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
@@ -25568,7 +25568,7 @@ var hoverFocusStyles$1 = {
 var formFooterPanel = {
   "default": "".concat(INFO_BLUE)
 };
-var fallbackValues$k = {
+var fallbackValues$j = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
   inputBackgroundColor: inputBackgroundColor$1,
@@ -25790,7 +25790,7 @@ var FormInput = function FormInput(_ref15) {
   }, decorator)));
 };
 
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$k, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$j, "default");
 
 var _excluded$q = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 
@@ -25846,7 +25846,7 @@ var FormContainer = function FormContainer(_ref) {
   }, rest), children);
 };
 
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$k, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$j, "default");
 
 var FormFooterPanel = function FormFooterPanel(_ref) {
   var themeValues = _ref.themeValues,
@@ -25870,7 +25870,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
   })));
 };
 
-var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$k, "default");
+var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$j, "default");
 
 var fontSize$7 = {
   "default": "1rem",
@@ -25884,7 +25884,7 @@ var color$7 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$l = {
+var fallbackValues$k = {
   fontSize: fontSize$7,
   padding: padding$1,
   color: color$7
@@ -25927,11 +25927,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
 
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$l, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$k, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$m = {
+var fallbackValues$l = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -25971,11 +25971,11 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
   }, "Autopay Enabled")));
 };
 
-var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$m);
+var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$l);
 
 var textColor$2 = "".concat(CHARADE_GREY);
 var autopayTextColor$1 = "".concat(REGENT_GREY);
-var fallbackValues$n = {
+var fallbackValues$m = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
 };
@@ -26012,7 +26012,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   }, "Autopay Enabled")));
 };
 
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$n);
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$m);
 
 var Hamburger = styled.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -26094,7 +26094,7 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$o = {
+var fallbackValues$n = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
@@ -26136,7 +26136,7 @@ var Heading = function Heading(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
-var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$o, "h1");
+var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$n, "h1");
 
 var Image = styled.img.withConfig({
   displayName: "ImageBoxstyled__Image",
@@ -26263,7 +26263,7 @@ var fontWeight$4 = {
   pL: "600",
   h6: "700"
 };
-var fallbackValues$p = {
+var fallbackValues$o = {
   fontWeight: fontWeight$4
 };
 
@@ -26291,7 +26291,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   }, amount));
 };
 
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$p, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$o, "default");
 
 var weightTitle = {
   "default": "600",
@@ -26301,7 +26301,7 @@ var paragraphVariant = {
   "default": "pL",
   small: "pS"
 };
-var fallbackValues$q = {
+var fallbackValues$p = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -26335,10 +26335,10 @@ var LineItem = function LineItem(_ref) {
   }, amount));
 };
 
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$q, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$p, "default");
 
 var color$8 = "#15749D";
-var fallbackValues$r = {
+var fallbackValues$q = {
   color: color$8
 };
 
@@ -26394,7 +26394,7 @@ var Spinner$1 = function Spinner(_ref6) {
   })));
 };
 
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$r);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$q);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React.createElement(Box, {
@@ -26660,7 +26660,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$s = {
+var fallbackValues$r = {
   color: color$9,
   height: height$1
 };
@@ -26769,12 +26769,12 @@ var Placeholder = function Placeholder(_ref2) {
   }, text)))))))))));
 };
 
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$s, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$r, "default");
 
 var backgroundColor$4 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$t = {
+var fallbackValues$s = {
   backgroundColor: backgroundColor$4
 };
 
@@ -26802,7 +26802,14 @@ var ProcessingFee = function ProcessingFee(_ref) {
   }));
 };
 
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$t, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$s, "default");
+
+var backgroundColor$5 = MATISSE_BLUE;
+var borderColor$2 = GREY_CHATEAU;
+var fallbackValues$t = {
+  borderColor: borderColor$2,
+  backgroundColor: backgroundColor$5
+};
 
 var HiddenRadioInput = styled.input.withConfig({
   displayName: "RadioButtonWithLabel__HiddenRadioInput",
@@ -26866,7 +26873,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
   }, /*#__PURE__*/React.createElement(Circle, null), labelText));
 };
 
-var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues);
+var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$t);
 
 var activeColor$5 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
@@ -27047,14 +27054,14 @@ var SearchableSelect = function SearchableSelect(_ref) {
 
 var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$v, "default");
 
-var borderColor$2 = {
+var borderColor$3 = {
   "default": "".concat(GREY_CHATEAU)
 };
 var borderSize = {
   "default": "1px"
 };
 var fallbackValues$w = {
-  borderColor: borderColor$2,
+  borderColor: borderColor$3,
   borderSize: borderSize
 };
 
@@ -37875,12 +37882,12 @@ var TypeaheadInput = function TypeaheadInput(_ref) {
   }));
 };
 
-var backgroundColor$5 = WHITE;
+var backgroundColor$6 = WHITE;
 var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
 var fallbackValues$y = {
-  backgroundColor: backgroundColor$5,
+  backgroundColor: backgroundColor$6,
   imageBackgroundColor: imageBackgroundColor,
   headerBackgroundColor: headerBackgroundColor,
   headerColor: headerColor
@@ -38167,11 +38174,11 @@ var TableCell_styled = styled.td.withConfig({
   return extraStyles;
 });
 
-var backgroundColor$6 = ALABASTER_WHITE;
-var borderColor$3 = GREY_CHATEAU;
+var backgroundColor$7 = ALABASTER_WHITE;
+var borderColor$4 = GREY_CHATEAU;
 var fallbackValues$B = {
-  backgroundColor: backgroundColor$6,
-  borderColor: borderColor$3
+  backgroundColor: backgroundColor$7,
+  borderColor: borderColor$4
 };
 
 var StyledTableHead = styled.thead.withConfig({
@@ -38189,10 +38196,10 @@ var StyledTableHead = styled.thead.withConfig({
   return fontSize;
 });
 
-var borderColor$4 = GREY_CHATEAU;
+var borderColor$5 = GREY_CHATEAU;
 var hoverBackgroundColor$1 = HOVER_LIGHT_BLUE;
 var fallbackValues$C = {
-  borderColor: borderColor$4,
+  borderColor: borderColor$5,
   hoverBackgroundColor: hoverBackgroundColor$1
 };
 
@@ -40169,9 +40176,9 @@ AddressForm.reducer = reducer;
 AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
-var backgroundColor$7 = "#ebeffb";
+var backgroundColor$8 = "#ebeffb";
 var fallbackValues$D = {
-  backgroundColor: backgroundColor$7
+  backgroundColor: backgroundColor$8
 };
 
 var Banner = function Banner(_ref) {
@@ -40527,7 +40534,7 @@ var ClipboardIcon = function ClipboardIcon(_ref) {
   })));
 };
 
-var ClipboardIcon$1 = themeComponent(ClipboardIcon, "Icons", fallbackValues$3, "primary");
+var ClipboardIcon$1 = themeComponent(ClipboardIcon, "Icons", fallbackValues$2, "primary");
 
 /*
 This component will render `content` and a clipboard icon.
@@ -41166,10 +41173,10 @@ ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
-var backgroundColor$8 = "#182848";
+var backgroundColor$9 = "#182848";
 var fallbackValues$G = {
   textColor: textColor$4,
-  backgroundColor: backgroundColor$8
+  backgroundColor: backgroundColor$9
 };
 
 var HighlightTabRow = function HighlightTabRow(_ref) {
@@ -46374,7 +46381,7 @@ var borderRadius = {
   largeTitle: "0.25rem",
   small: "0.25rem"
 };
-var backgroundColor$9 = {
+var backgroundColor$a = {
   "default": WHITE,
   largeTitle: WHITE,
   small: WHITE
@@ -46389,7 +46396,7 @@ var fallbackValues$H = {
   titleSpacing: titleSpacing,
   boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$9
+  backgroundColor: backgroundColor$a
 };
 
 /*
@@ -46449,7 +46456,7 @@ var Module = function Module(_ref) {
 
 var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$H, "default"));
 
-var backgroundColor$a = {
+var backgroundColor$b = {
   profile: "#3b414d",
   cms: "#3b414d"
 };
@@ -46458,7 +46465,7 @@ var shadowColor = {
   cms: "#292A33"
 };
 var fallbackValues$I = {
-  backgroundColor: backgroundColor$a,
+  backgroundColor: backgroundColor$b,
   shadowColor: shadowColor
 };
 
@@ -47698,7 +47705,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, !hideBackButton && /*#__PURE__*/React.createElement(Fragment$1, null, backButton), !hideForwardButton && /*#__PURE__*/React.createElement(Fragment$1, null, forwardButton))));
 };
 
-var backgroundColor$b = {
+var backgroundColor$c = {
   "default": "transparent",
   small: "transparent"
 };
@@ -47715,7 +47722,7 @@ var labeledAmountTotal = {
   small: "p"
 };
 var fallbackValues$L = {
-  backgroundColor: backgroundColor$b,
+  backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
@@ -48112,7 +48119,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
 
 var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$M, "default");
 
-var backgroundColor$c = {
+var backgroundColor$d = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
@@ -48142,7 +48149,7 @@ var modalLinkHoverFocus$2 = {
   footer: standardInteractionStyles
 };
 var fallbackValues$N = {
-  backgroundColor: backgroundColor$c,
+  backgroundColor: backgroundColor$d,
   linkColor: linkColor$6,
   border: border$3,
   fontSize: fontSize$b,
@@ -49003,13 +49010,13 @@ var RadioGroup = function RadioGroup(_ref) {
 var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
-var borderColor$5 = "".concat(GREY_CHATEAU);
+var borderColor$6 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
 var fallbackValues$O = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
-  borderColor: borderColor$5,
+  borderColor: borderColor$6,
   focusStyles: focusStyles
 };