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

package/dist/index.cjs.js

@@ -4787,7 +4787,7 @@ var fontSize = {
   pXL: "1.5rem" // 24px
 
 };
-var fallbackValues$1 = {
+var fallbackValues = {
   fontFamily: fontFamily,
   fontSize: fontSize
 };
@@ -6414,7 +6414,7 @@ var Text = function Text(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.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"];
 /*
@@ -12771,7 +12771,7 @@ var activeColor = {
   whiteSecondary: WHITE,
   whitePrimary: WHITE
 };
-var fallbackValues$2 = {
+var fallbackValues$1 = {
   padding: padding,
   color: color$1,
   fontSizeVariant: fontSizeVariant,
@@ -12931,7 +12931,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
       rest = _objectWithoutProperties(_ref2, _excluded$h);
 
   var themeContext = React.useContext(styled.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  ");
@@ -12987,7 +12987,7 @@ var singleIconColor = {
   secondary: "".concat(BRIGHT_GREY),
   darkMode: "".concat(WHITE)
 };
-var fallbackValues$3 = {
+var fallbackValues$2 = {
   primaryColor: primaryColor,
   accentColor: accentColor,
   subIconColor: subIconColor,
@@ -13027,7 +13027,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;
@@ -13066,7 +13066,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;
@@ -13104,7 +13104,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;
@@ -13134,7 +13134,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;
@@ -13178,7 +13178,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;
@@ -13213,7 +13213,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;
@@ -13252,7 +13252,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;
@@ -13303,7 +13303,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;
@@ -13367,7 +13367,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;
@@ -13396,7 +13396,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;
@@ -13447,7 +13447,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,
@@ -13488,7 +13488,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,
@@ -13530,7 +13530,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;
@@ -13599,7 +13599,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;
@@ -13626,7 +13626,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__default.createElement("svg", {
@@ -14531,7 +14531,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__default.createElement("svg", {
@@ -14782,7 +14782,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,
@@ -14994,7 +14994,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;
@@ -15032,7 +15032,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__default.createElement("svg", {
@@ -15093,7 +15093,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__default.createElement("svg", {
@@ -15165,7 +15165,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__default.createElement("svg", {
@@ -15758,7 +15758,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__default.createElement("svg", {
@@ -17270,7 +17270,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;
@@ -17296,7 +17296,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,
@@ -18031,7 +18031,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
@@ -18073,7 +18073,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,
@@ -18462,7 +18462,7 @@ var link = {
   error: "".concat(SCIENCE_BLUE),
   success: "".concat(SCIENCE_BLUE)
 };
-var fallbackValues$5 = {
+var fallbackValues$4 = {
   background: background,
   border: border$1,
   iconBackground: iconBackground,
@@ -18615,7 +18615,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__default.h1.withConfig({
   displayName: "Titlestyled__TitleText",
@@ -18660,7 +18660,7 @@ var mobileFontSize = {
   small: "1.2142rem" // 17px
 
 };
-var fallbackValues$6 = {
+var fallbackValues$5 = {
   fontFamily: fontFamily$1,
   fontSize: fontSize$1
 };
@@ -18697,7 +18697,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,
@@ -18737,7 +18737,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
 };
 
@@ -18756,7 +18756,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) {
@@ -19575,7 +19575,7 @@ var curriedTint = /*#__PURE__*/curry
 var curriedTint$1 = curriedTint;
 
 var linkColor = MATISSE_BLUE;
-var fallbackValues$8 = {
+var fallbackValues$7 = {
   linkColor: linkColor
 };
 
@@ -19602,7 +19602,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";
 /*
@@ -19618,7 +19618,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,
@@ -19636,7 +19636,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,
@@ -19711,7 +19711,7 @@ var ExternalLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       ariaLabel = _ref.ariaLabel,
       children = _ref.children;
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
+  var themeValues = createThemeValues(themeContext, fallbackValues$9, "Link", variant);
   return /*#__PURE__*/React__default.createElement(StyledExternalLink, {
     href: href,
     target: newTab ? "_blank" : "",
@@ -19803,7 +19803,7 @@ var InternalLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$extraStyles = _ref.extraStyles,
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles;
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
+  var themeValues = createThemeValues(themeContext, fallbackValues$9, "Link", variant);
   return /*#__PURE__*/React__default.createElement(StyledInternalLink, {
     to: to,
     color: color,
@@ -19826,7 +19826,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   var _ref$breadcrumbsList = _ref.breadcrumbsList,
       breadcrumbsList = _ref$breadcrumbsList === void 0 ? [] : _ref$breadcrumbsList;
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$9, "Breadcrumb");
+  var themeValues = createThemeValues(themeContext, fallbackValues$8, "Breadcrumb");
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     as: "nav",
@@ -21507,7 +21507,7 @@ var fontSize$3 = {
   pXL: "1.5rem" // 24px
 
 };
-var fallbackValues$b = {
+var fallbackValues$a = {
   fontFamily: fontFamily$3,
   fontSize: fontSize$3
 };
@@ -21564,11 +21564,11 @@ var Paragraph = function Paragraph(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.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
 };
@@ -21711,7 +21711,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) {
@@ -21782,7 +21782,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,
@@ -21923,7 +21923,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),
@@ -21949,7 +21949,7 @@ var radioButtonInactive = {
   "default": "".concat(GHOST_GREY),
   disabled: "".concat(GHOST_GREY)
 };
-var fallbackValues$e = {
+var fallbackValues$d = {
   listBackgroundColor: listBackgroundColor,
   listItemColor: listItemColor,
   listItemBackgroundColor: listItemBackgroundColor,
@@ -22120,7 +22120,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__default.createElement("svg", {
@@ -23421,7 +23421,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
 };
@@ -23816,7 +23816,7 @@ var Dropdown = function Dropdown(_ref8) {
   }))) : /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
 
-var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$f);
+var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$e);
 
 var SelectContainer = styled__default.div.withConfig({
   displayName: "FormSelectstyled__SelectContainer",
@@ -23887,7 +23887,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,
@@ -23990,7 +23990,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",
@@ -24807,7 +24807,7 @@ var mobileFontSize$1 = {
   extraSmall: "0.71428rem" // 10px
 
 };
-var fallbackValues$h = {
+var fallbackValues$g = {
   fontFamily: fontFamily$4,
   fontSize: fontSize$5
 };
@@ -24847,7 +24847,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,
@@ -24888,7 +24888,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
 };
@@ -24909,7 +24909,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) {
@@ -25300,7 +25300,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
@@ -25458,7 +25458,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,
@@ -25576,7 +25576,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,
@@ -25798,7 +25798,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"];
 
@@ -25854,7 +25854,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,
@@ -25878,7 +25878,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",
@@ -25892,7 +25892,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
@@ -25935,11 +25935,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
 };
@@ -25979,11 +25979,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
 };
@@ -26020,7 +26020,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__default.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -26102,7 +26102,7 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$o = {
+var fallbackValues$n = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
@@ -26144,7 +26144,7 @@ var Heading = function Heading(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
 
-var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$o, "h1");
+var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$n, "h1");
 
 var Image = styled__default.img.withConfig({
   displayName: "ImageBoxstyled__Image",
@@ -26271,7 +26271,7 @@ var fontWeight$4 = {
   pL: "600",
   h6: "700"
 };
-var fallbackValues$p = {
+var fallbackValues$o = {
   fontWeight: fontWeight$4
 };
 
@@ -26299,7 +26299,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",
@@ -26309,7 +26309,7 @@ var paragraphVariant = {
   "default": "pL",
   small: "pS"
 };
-var fallbackValues$q = {
+var fallbackValues$p = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -26343,10 +26343,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
 };
 
@@ -26402,7 +26402,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__default.createElement(Box, {
@@ -26668,7 +26668,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$s = {
+var fallbackValues$r = {
   color: color$9,
   height: height$1
 };
@@ -26777,12 +26777,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
 };
 
@@ -26810,7 +26810,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__default.input.withConfig({
   displayName: "RadioButtonWithLabel__HiddenRadioInput",
@@ -26847,12 +26854,14 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
       groupName = _ref5.groupName,
       setValue = _ref5.setValue,
       ariaInvalid = _ref5.ariaInvalid,
+      themeValues = _ref5.themeValues,
       index = _ref5.index,
       _ref5$handleChange = _ref5.handleChange,
       handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange;
   return /*#__PURE__*/React__default.createElement(InputAndLabelContainer, {
     align: "center",
-    childGap: "0.5rem"
+    childGap: "0.5rem",
+    backgroundColor: themeValues.backgroundColor
   }, /*#__PURE__*/React__default.createElement(HiddenRadioInput, {
     "aria-invalid": ariaInvalid,
     style: {
@@ -26871,10 +26880,13 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     as: "label",
     htmlFor: id,
     extraStyles: "\n          font-size: 1rem;\n          display: flex; \n          width: 100%;\n          :hover {\n            cursor: pointer;\n          }\n        "
-  }, /*#__PURE__*/React__default.createElement(Circle, null), labelText));
+  }, /*#__PURE__*/React__default.createElement(Circle, {
+    backgroundColor: themeValues.backgroundColor,
+    borderColor: themeValues.borderColor
+  }), 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);
@@ -27055,14 +27067,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
 };
 
@@ -37883,12 +37895,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
@@ -38175,11 +38187,11 @@ var TableCell_styled = styled__default.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__default.thead.withConfig({
@@ -38197,10 +38209,10 @@ var StyledTableHead = styled__default.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
 };
 
@@ -40177,9 +40189,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) {
@@ -40535,7 +40547,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.
@@ -41174,10 +41186,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) {
@@ -46382,7 +46394,7 @@ var borderRadius = {
   largeTitle: "0.25rem",
   small: "0.25rem"
 };
-var backgroundColor$9 = {
+var backgroundColor$a = {
   "default": WHITE,
   largeTitle: WHITE,
   small: WHITE
@@ -46397,7 +46409,7 @@ var fallbackValues$H = {
   titleSpacing: titleSpacing,
   boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$9
+  backgroundColor: backgroundColor$a
 };
 
 /*
@@ -46457,7 +46469,7 @@ var Module = function Module(_ref) {
 
 var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$H, "default"));
 
-var backgroundColor$a = {
+var backgroundColor$b = {
   profile: "#3b414d",
   cms: "#3b414d"
 };
@@ -46466,7 +46478,7 @@ var shadowColor = {
   cms: "#292A33"
 };
 var fallbackValues$I = {
-  backgroundColor: backgroundColor$a,
+  backgroundColor: backgroundColor$b,
   shadowColor: shadowColor
 };
 
@@ -47706,7 +47718,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, !hideBackButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, backButton), !hideForwardButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, forwardButton))));
 };
 
-var backgroundColor$b = {
+var backgroundColor$c = {
   "default": "transparent",
   small: "transparent"
 };
@@ -47723,7 +47735,7 @@ var labeledAmountTotal = {
   small: "p"
 };
 var fallbackValues$L = {
-  backgroundColor: backgroundColor$b,
+  backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
@@ -48120,7 +48132,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"
 };
@@ -48150,7 +48162,7 @@ var modalLinkHoverFocus$2 = {
   footer: standardInteractionStyles
 };
 var fallbackValues$N = {
-  backgroundColor: backgroundColor$c,
+  backgroundColor: backgroundColor$d,
   linkColor: linkColor$6,
   border: border$3,
   fontSize: fontSize$b,
@@ -49011,13 +49023,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
 };