@thecb/components 8.2.2-beta.1 → 8.3.0-beta.0

package/dist/index.cjs.js

@@ -5002,6 +5002,7 @@ var COOL_GREY_05 = "#fbfcfd"; // CBS-050
 var CLOUDBURST_BLUE = "#26395c";
 var ZODIAC_BLUE = "#14284b";
 var CONGRESS_BLUE = "#005095";
+var ROYAL_BLUE = "#3B5BDB";
 var SCIENCE_BLUE = "#0074D9";
 var MARINER_BLUE = "#2E75D2";
 var CURIOUS_BLUE = "#27A9E1";
@@ -5013,9 +5014,9 @@ var FOAM_BLUE = "#EFF4FD";
 var CELLO_BLUE = "#214566";
 var BOSTON_BLUE = "#357fb8";
 var INFO_BLUE = "#E4F4FD";
+var CORNFLOWER_BLUE = "#EBEFFB";
 var HOVER_LIGHT_BLUE = "#EFFAFF";
 var MATISSE_BLUE = "#15749D";
-var ROYAL_BLUE = "#3181E3";
 var ASTRAL_BLUE = "#3176AA";
 var SAPPHIRE_BLUE = "#116285";
 var PEACOCK_BLUE = "#0E506D"; // GREEN
@@ -5107,6 +5108,7 @@ var colors = /*#__PURE__*/Object.freeze({
   AQUA_HAZE_WHITE: AQUA_HAZE_WHITE,
   BLEACH_WHITE: BLEACH_WHITE,
   CATSKILL_WHITE: CATSKILL_WHITE,
+  CORNFLOWER_BLUE: CORNFLOWER_BLUE,
   HALF_COLONIAL_WHITE: HALF_COLONIAL_WHITE,
   ATHENS_GREY: ATHENS_GREY,
   ALTO_GREY: ALTO_GREY,
@@ -13029,6 +13031,36 @@ var AccountsIcon = function AccountsIcon(_ref) {
 
 var AccountsIcon$1 = themeComponent(AccountsIcon, "Icons", fallbackValues$2, "info");
 
+var AutopayIcon = function AutopayIcon(_ref) {
+  var _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? "#317D4F" : _ref$fill;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_5560_39870",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "3",
+    y: "3",
+    width: "10",
+    height: "10"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M4.81368 7.38351C4.87789 7.38351 4.92927 7.36745 4.9678 7.33535C5.00633 7.30324 5.03202 7.2615 5.04486 7.21012C5.22467 6.49089 5.60677 5.9033 6.19114 5.44736C6.77552 4.99142 7.44018 4.76344 8.1851 4.76344C8.59609 4.76344 8.99103 4.83729 9.36991 4.98499C9.74879 5.13269 10.0924 5.34782 10.4006 5.63038L9.59146 6.43951C9.50155 6.52942 9.45661 6.63859 9.45661 6.76702C9.45661 6.89546 9.50155 7.00463 9.59146 7.09453C9.68136 7.18443 9.79054 7.22939 9.91897 7.22939L12.5005 7.22939C12.629 7.22939 12.7381 7.18443 12.828 7.09453C12.9179 7.00463 12.9629 6.89546 12.9629 6.76702L12.9629 4.18548C12.9629 4.05705 12.9179 3.94788 12.828 3.85797C12.7381 3.76807 12.629 3.72312 12.5005 3.72312C12.3721 3.72312 12.2629 3.76807 12.173 3.85797L11.4795 4.55152C11.0428 4.12769 10.5419 3.80018 9.97677 3.569C9.41166 3.33781 8.81443 3.22222 8.1851 3.22222C7.41449 3.22222 6.69846 3.3924 6.03702 3.73275C5.37558 4.0731 4.82009 4.53868 4.37057 5.12948C3.92105 5.72028 3.62565 6.38172 3.48437 7.1138C3.47153 7.17801 3.48759 7.23902 3.53253 7.29682C3.57749 7.35461 3.63849 7.38351 3.71555 7.38351L4.81368 7.38351ZM8.1851 12.7778C8.95571 12.7778 9.67173 12.6076 10.3332 12.2672C10.9946 11.9269 11.5501 11.4613 11.9996 10.8705C12.4491 10.2797 12.7445 9.61827 12.8858 8.88619C12.8987 8.82197 12.8826 8.76097 12.8377 8.70317C12.7927 8.64537 12.7317 8.61648 12.6546 8.61648H11.5565C11.4923 8.61648 11.4409 8.63253 11.4024 8.66464C11.3639 8.69675 11.3382 8.73849 11.3253 8.78986C11.1455 9.5091 10.7634 10.0967 10.1791 10.5526C9.59467 11.0086 8.93002 11.2366 8.1851 11.2366C7.77411 11.2366 7.37916 11.1627 7.00028 11.015C6.6214 10.8673 6.27784 10.6522 5.96959 10.3696L6.77873 9.56048C6.86864 9.47057 6.91359 9.3614 6.91359 9.23297C6.91359 9.10453 6.86864 8.99536 6.77873 8.90546C6.68882 8.81555 6.57966 8.7706 6.45122 8.7706H3.86968C3.74124 8.7706 3.63207 8.81555 3.54217 8.90546C3.45227 8.99536 3.40731 9.10453 3.40731 9.23297L3.40731 11.8145C3.40731 11.9429 3.45226 12.0521 3.54217 12.142C3.63207 12.2319 3.74124 12.2769 3.86968 12.2769C3.99811 12.2769 4.10728 12.2319 4.19719 12.142L4.89074 11.4485C5.32742 11.8723 5.82831 12.1998 6.39343 12.431C6.95854 12.6622 7.55577 12.7778 8.1851 12.7778Z",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_5560_39870)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 0H16V16H0V0Z",
+    fill: fill
+  })));
+};
+
 var AccountsAddIcon = function AccountsAddIcon(_ref) {
   var themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -18758,6 +18790,51 @@ var AmountCallout = function AmountCallout(_ref) {
 
 var AmountCallout$1 = themeComponent(AmountCallout, "AmountCallout", fallbackValues$6);
 
+var background$1 = {
+  info: "".concat(INFO_BLUE),
+  warn: "".concat(HALF_COLONIAL_WHITE),
+  primary: "".concat(CORNFLOWER_BLUE),
+  success: "".concat(HINT_GREEN)
+};
+var color$4 = {
+  info: "".concat(MATISSE_BLUE),
+  warn: "".concat(ZEST_ORANGE),
+  primary: "".concat(ROYAL_BLUE),
+  success: "".concat(SEA_GREEN)
+};
+var fallbackValues$7 = {
+  background: background$1,
+  color: color$4
+};
+
+var StyledBadgeContainer = styled__default(Box).withConfig({
+  displayName: "Badge__StyledBadgeContainer",
+  componentId: "sc-1g438j-0"
+})(["display:inline-flex;padding:2px 8px;align-items:center;align-self:flex-start;gap:4px;border-radius:4px;"]);
+var StyledBadge = styled__default(Text$1).withConfig({
+  displayName: "Badge__StyledBadge",
+  componentId: "sc-1g438j-1"
+})(["font-family:\"Public Sans\",sans-serif;font-size:10px;font-style:normal;font-weight:400;line-height:150%;letter-spacing:0.2px;@media screen and (min-width:1049px){font-size:12px;line-height:150%;letter-spacing:0.24px;}"]);
+
+var Badge = function Badge(_ref) {
+  var label = _ref.label,
+      Icon = _ref.Icon,
+      themeValues = _ref.themeValues,
+      _ref$iconOnLeft = _ref.iconOnLeft,
+      iconOnLeft = _ref$iconOnLeft === void 0 ? true : _ref$iconOnLeft;
+  return /*#__PURE__*/React__default.createElement(StyledBadgeContainer, {
+    background: themeValues.background
+  }, iconOnLeft && Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    fill: themeValues.color
+  }), /*#__PURE__*/React__default.createElement(StyledBadge, {
+    color: themeValues.color
+  }, label), !iconOnLeft && Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    fill: themeValues.color
+  }));
+};
+
+var Badge$1 = themeComponent(Badge, "Badge", fallbackValues$7, "success");
+
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -19575,7 +19652,7 @@ var curriedTint = /*#__PURE__*/curry
 var curriedTint$1 = curriedTint;
 
 var linkColor = MATISSE_BLUE;
-var fallbackValues$7 = {
+var fallbackValues$8 = {
   linkColor: linkColor
 };
 
@@ -19602,7 +19679,7 @@ var BoxWithShadow = function BoxWithShadow(_ref) {
   }, props), children);
 };
 
-var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues$7);
+var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues$8);
 
 // import theme from "styled-theming";
 /*
@@ -19610,7 +19687,7 @@ var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackVal
   for colors/values that should be used here instead
 */
 
-var color$4 = "".concat(MATISSE_BLUE);
+var color$5 = "".concat(MATISSE_BLUE);
 var activeColor$2 = "".concat(STORM_GREY);
 var activeBreadcrumbColor = "".concat(STORM_GREY);
 var fontSize$2 = "0.875rem";
@@ -19618,8 +19695,8 @@ var lineHeight = "1.25rem";
 var fontWeight$1 = "400";
 var margin = "0.5rem";
 var hover = "text-decoration: none;";
-var fallbackValues$8 = {
-  color: color$4,
+var fallbackValues$9 = {
+  color: color$5,
   activeColor: activeColor$2,
   activeBreadcrumbColor: activeBreadcrumbColor,
   fontSize: fontSize$2,
@@ -19636,7 +19713,7 @@ var fontFamily$2 = {
 var hoverColor$2 = "#116285";
 var activeColor$3 = "#0E506D";
 var externalLinkColor = "#15749D";
-var fallbackValues$9 = {
+var fallbackValues$a = {
   fontFamily: fontFamily$2,
   hoverColor: hoverColor$2,
   activeColor: activeColor$3,
@@ -19711,7 +19788,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$9, "Link", variant);
+  var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
   return /*#__PURE__*/React__default.createElement(StyledExternalLink, {
     href: href,
     target: newTab ? "_blank" : "",
@@ -19803,7 +19880,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$9, "Link", variant);
+  var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
   return /*#__PURE__*/React__default.createElement(StyledInternalLink, {
     to: to,
     color: color,
@@ -19826,7 +19903,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$8, "Breadcrumb");
+  var themeValues = createThemeValues(themeContext, fallbackValues$9, "Breadcrumb");
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     as: "nav",
@@ -21507,7 +21584,7 @@ var fontSize$3 = {
   pXL: "1.5rem" // 24px
 
 };
-var fallbackValues$a = {
+var fallbackValues$b = {
   fontFamily: fontFamily$3,
   fontSize: fontSize$3
 };
@@ -21564,11 +21641,11 @@ var Paragraph = function Paragraph(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
 
-var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$a, "p");
+var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$b, "p");
 
 var backgroundColor$1 = WHITE;
 var iconBackgroundColor = GRECIAN_GREY;
-var fallbackValues$b = {
+var fallbackValues$c = {
   backgroundColor: backgroundColor$1,
   iconBackgroundColor: iconBackgroundColor
 };
@@ -21711,7 +21788,7 @@ var CardRegistryCard = function CardRegistryCard(_ref2) {
   }))))));
 };
 
-var CardRegistryCard$1 = themeComponent(withWindowSize(CardRegistryCard), "CardRegistryCard", fallbackValues$b);
+var CardRegistryCard$1 = themeComponent(withWindowSize(CardRegistryCard), "CardRegistryCard", fallbackValues$c);
 
 var cardRegistry = {
   accounts: function accounts(props) {
@@ -21782,7 +21859,7 @@ var checkedStyles = {
 var defaultStyles = {
   "default": "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(STORM_GREY, ";\n")
 };
-var fallbackValues$c = {
+var fallbackValues$d = {
   backgroundColor: backgroundColor$2,
   textFontSize: textFontSize,
   textFontWeight: textFontWeight,
@@ -21923,7 +22000,7 @@ var Checkbox = function Checkbox(_ref4) {
   }, title)));
 };
 
-var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$c, "default");
+var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$d, "default");
 
 var listBackgroundColor = {
   "default": "".concat(ATHENS_GREY),
@@ -21949,7 +22026,7 @@ var radioButtonInactive = {
   "default": "".concat(GHOST_GREY),
   disabled: "".concat(GHOST_GREY)
 };
-var fallbackValues$d = {
+var fallbackValues$e = {
   listBackgroundColor: listBackgroundColor,
   listItemColor: listItemColor,
   listItemBackgroundColor: listItemBackgroundColor,
@@ -22120,7 +22197,7 @@ var CheckboxList = function CheckboxList(_ref2) {
   })));
 };
 
-var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$d, "default");
+var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$e, "default");
 
 var DropdownIcon = function DropdownIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -23421,7 +23498,7 @@ exportTypedArrayMethod$1('at', function at(index) {
 
 var selectedColor = "".concat(MATISSE_BLUE);
 var hoverColor$3 = "".concat(HOVER_LIGHT_BLUE);
-var fallbackValues$e = {
+var fallbackValues$f = {
   selectedColor: selectedColor,
   hoverColor: hoverColor$3
 };
@@ -23816,7 +23893,7 @@ var Dropdown = function Dropdown(_ref8) {
   }))) : /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
 
-var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$e);
+var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$f);
 
 var SelectContainer = styled__default.div.withConfig({
   displayName: "FormSelectstyled__SelectContainer",
@@ -23855,7 +23932,7 @@ var inputBackgroundColor = {
   "default": "".concat(WHITE),
   disabled: "".concat(SEASHELL_WHITE)
 };
-var color$5 = {
+var color$6 = {
   "default": "".concat(MINESHAFT_GREY),
   disabled: "".concat(DUSTY_GREY)
 };
@@ -23887,11 +23964,11 @@ var hoverFocusStyles = {
   "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6D717E;"
 };
-var fallbackValues$f = {
+var fallbackValues$g = {
   linkColor: linkColor$1,
   formBackgroundColor: formBackgroundColor,
   inputBackgroundColor: inputBackgroundColor,
-  color: color$5,
+  color: color$6,
   labelColor: labelColor,
   borderColor: borderColor,
   lineHeight: lineHeight$1,
@@ -23990,7 +24067,7 @@ var FormSelect = function FormSelect(_ref) {
   })));
 };
 
-var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$f, "default");
+var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$g, "default");
 
 var options = [{
   text: "Afghanistan",
@@ -24807,7 +24884,7 @@ var mobileFontSize$1 = {
   extraSmall: "0.71428rem" // 10px
 
 };
-var fallbackValues$g = {
+var fallbackValues$h = {
   fontFamily: fontFamily$4,
   fontSize: fontSize$5
 };
@@ -24847,7 +24924,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$g;
+var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$h;
 
 var Detail = function Detail(_ref) {
   var themeValues = _ref.themeValues,
@@ -24888,7 +24965,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$h = {
+var fallbackValues$i = {
   backgroundColor: backgroundColor$3,
   boxShadow: boxShadow
 };
@@ -24909,7 +24986,7 @@ var DisplayBox = function DisplayBox(_ref) {
   }, children));
 };
 
-var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$h);
+var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$i);
 
 function _extends$2() {
   _extends$2 = Object.assign || function (target) {
@@ -25300,7 +25377,7 @@ var index$4 = /*#__PURE__*/Object.freeze({
 var hoverColor$4 = "#116285";
 var activeColor$4 = "#0E506D";
 var popoverTriggerColor = "#15749D";
-var fallbackValues$i = {
+var fallbackValues$j = {
   hoverColor: hoverColor$4,
   activeColor: activeColor$4,
   popoverTriggerColor: popoverTriggerColor
@@ -25458,7 +25535,7 @@ var Popover = function Popover(_ref) {
   })));
 };
 
-var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$i);
+var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$j);
 
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
@@ -25541,7 +25618,7 @@ var inputBackgroundColor$1 = {
   "default": "".concat(WHITE),
   disabled: "".concat(SEASHELL_WHITE)
 };
-var color$6 = {
+var color$7 = {
   "default": "".concat(MINESHAFT_GREY),
   disabled: "".concat(DUSTY_GREY)
 };
@@ -25576,11 +25653,11 @@ var hoverFocusStyles$1 = {
 var formFooterPanel = {
   "default": "".concat(INFO_BLUE)
 };
-var fallbackValues$j = {
+var fallbackValues$k = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
   inputBackgroundColor: inputBackgroundColor$1,
-  color: color$6,
+  color: color$7,
   labelColor: labelColor$1,
   borderColor: borderColor$1,
   lineHeight: lineHeight$2,
@@ -25798,7 +25875,7 @@ var FormInput = function FormInput(_ref15) {
   }, decorator)));
 };
 
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$j, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$k, "default");
 
 var _excluded$q = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 
@@ -25854,7 +25931,7 @@ var FormContainer = function FormContainer(_ref) {
   }, rest), children);
 };
 
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$j, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$k, "default");
 
 var FormFooterPanel = function FormFooterPanel(_ref) {
   var themeValues = _ref.themeValues,
@@ -25878,7 +25955,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
   })));
 };
 
-var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$j, "default");
+var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$k, "default");
 
 var fontSize$7 = {
   "default": "1rem",
@@ -25888,14 +25965,14 @@ var padding$1 = {
   "default": "0",
   radio: "0.625rem 0"
 };
-var color$7 = {
+var color$8 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$k = {
+var fallbackValues$l = {
   fontSize: fontSize$7,
   padding: padding$1,
-  color: color$7
+  color: color$8
 };
 
 var FormattedAddress = function FormattedAddress(_ref) {
@@ -25935,11 +26012,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
 
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$k, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$l, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$l = {
+var fallbackValues$m = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -25979,11 +26056,11 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
   }, "Autopay Enabled")));
 };
 
-var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$l);
+var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$m);
 
 var textColor$2 = "".concat(CHARADE_GREY);
 var autopayTextColor$1 = "".concat(REGENT_GREY);
-var fallbackValues$m = {
+var fallbackValues$n = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
 };
@@ -26020,7 +26097,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   }, "Autopay Enabled")));
 };
 
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$m);
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$n);
 
 var Hamburger = styled__default.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -26102,7 +26179,7 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$n = {
+var fallbackValues$o = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
@@ -26144,7 +26221,7 @@ var Heading = function Heading(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
 
-var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$n, "h1");
+var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$o, "h1");
 
 var Image = styled__default.img.withConfig({
   displayName: "ImageBoxstyled__Image",
@@ -26271,7 +26348,7 @@ var fontWeight$4 = {
   pL: "600",
   h6: "700"
 };
-var fallbackValues$o = {
+var fallbackValues$p = {
   fontWeight: fontWeight$4
 };
 
@@ -26299,7 +26376,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   }, amount));
 };
 
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$o, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$p, "default");
 
 var weightTitle = {
   "default": "600",
@@ -26309,7 +26386,7 @@ var paragraphVariant = {
   "default": "pL",
   small: "pS"
 };
-var fallbackValues$p = {
+var fallbackValues$q = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -26343,11 +26420,11 @@ var LineItem = function LineItem(_ref) {
   }, amount));
 };
 
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$p, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$q, "default");
 
-var color$8 = "#15749D";
-var fallbackValues$q = {
-  color: color$8
+var color$9 = "#15749D";
+var fallbackValues$r = {
+  color: color$9
 };
 
 var SpinnerSvgAnimation = styled__default.svg.withConfig({
@@ -26402,7 +26479,7 @@ var Spinner$1 = function Spinner(_ref6) {
   })));
 };
 
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$q);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$r);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -26660,7 +26737,7 @@ var PasswordRequirements = function PasswordRequirements(_ref) {
   }))));
 };
 
-var color$9 = {
+var color$a = {
   "default": "".concat(CHARADE_GREY),
   large: "".concat(BRIGHT_GREY)
 };
@@ -26668,8 +26745,8 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$r = {
-  color: color$9,
+var fallbackValues$s = {
+  color: color$a,
   height: height$1
 };
 
@@ -26777,12 +26854,12 @@ var Placeholder = function Placeholder(_ref2) {
   }, text)))))))))));
 };
 
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$r, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$s, "default");
 
 var backgroundColor$4 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$s = {
+var fallbackValues$t = {
   backgroundColor: backgroundColor$4
 };
 
@@ -26810,11 +26887,11 @@ var ProcessingFee = function ProcessingFee(_ref) {
   }));
 };
 
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$s, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$t, "default");
 
 var activeColor$5 = MATISSE_BLUE;
 var inactiveBorderColor = GREY_CHATEAU;
-var fallbackValues$t = {
+var fallbackValues$u = {
   inactiveBorderColor: inactiveBorderColor,
   activeColor: activeColor$5
 };
@@ -26886,11 +26963,11 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
   }), labelText));
 };
 
-var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$t);
+var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$u);
 
 var activeColor$6 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
-var fallbackValues$u = {
+var fallbackValues$v = {
   activeColor: activeColor$6,
   inactiveColor: inactiveColor
 };
@@ -26983,12 +27060,12 @@ var RadioButton$1 = function RadioButton(_ref2) {
   })));
 };
 
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$u);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$v);
 
 var border$2 = {
   "default": "1px solid #caced8"
 };
-var fallbackValues$v = {
+var fallbackValues$w = {
   border: border$2
 };
 
@@ -27065,7 +27142,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
   }))));
 };
 
-var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$v, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$w, "default");
 
 var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU)
@@ -27073,7 +27150,7 @@ var borderColor$2 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$w = {
+var fallbackValues$x = {
   borderColor: borderColor$2,
   borderSize: borderSize
 };
@@ -27090,7 +27167,7 @@ var SolidDivider = function SolidDivider(_ref) {
   });
 };
 
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$w, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$x, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -37674,7 +37751,7 @@ var offBackground = "".concat(REGENT_GREY);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
 var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
-var fallbackValues$x = {
+var fallbackValues$y = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   white: white,
@@ -37850,14 +37927,14 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, label))));
 };
 
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$x);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$y);
 
-var background$1 = "".concat(ATHENS_GREY);
+var background$2 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
 var black = "#000";
 var focusBorder = "".concat(MATISSE_BLUE);
 var themeValues = {
-  background: background$1,
+  background: background$2,
   white: white$1,
   black: black,
   focusBorder: focusBorder
@@ -37899,7 +37976,7 @@ var backgroundColor$5 = WHITE;
 var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
-var fallbackValues$y = {
+var fallbackValues$z = {
   backgroundColor: backgroundColor$5,
   imageBackgroundColor: imageBackgroundColor,
   headerBackgroundColor: headerBackgroundColor,
@@ -37923,7 +38000,7 @@ var CardImage = styled__default.img.withConfig({
 var titleColor = BRIGHT_GREY;
 var titleWeight = FONT_WEIGHT_BOLD;
 var textColor$3 = BRIGHT_GREY;
-var fallbackValues$z = {
+var fallbackValues$A = {
   titleColor: titleColor,
   titleWeight: titleWeight,
   textColor: textColor$3
@@ -37947,7 +38024,7 @@ var CardText = function CardText(_ref) {
     color: themeValues.textColor
   }, text))));
 };
-var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$z);
+var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$A);
 
 var CardHeader = function CardHeader(_ref) {
   var backgroundColor = _ref.backgroundColor,
@@ -38050,12 +38127,12 @@ var Card = function Card(_ref) {
   }), children)))));
 };
 
-var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$y);
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$z);
 
 var fontFamily$6 = "Public Sans, sans-serif";
 var activeColor$7 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
-var fallbackValues$A = {
+var fallbackValues$B = {
   fontFamily: fontFamily$6,
   activeColor: activeColor$7,
   linkColor: linkColor$3
@@ -38088,7 +38165,7 @@ var NavTab = function NavTab(_ref) {
   }, label));
 };
 
-var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$A);
+var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$B);
 
 var NavTabs = function NavTabs(_ref) {
   var tabsConfig = _ref.tabsConfig,
@@ -38189,7 +38266,7 @@ var TableCell_styled = styled__default.td.withConfig({
 
 var backgroundColor$6 = ALABASTER_WHITE;
 var borderColor$3 = GREY_CHATEAU;
-var fallbackValues$B = {
+var fallbackValues$C = {
   backgroundColor: backgroundColor$6,
   borderColor: borderColor$3
 };
@@ -38211,7 +38288,7 @@ var StyledTableHead = styled__default.thead.withConfig({
 
 var borderColor$4 = GREY_CHATEAU;
 var hoverBackgroundColor$1 = HOVER_LIGHT_BLUE;
-var fallbackValues$C = {
+var fallbackValues$D = {
   borderColor: borderColor$4,
   hoverBackgroundColor: hoverBackgroundColor$1
 };
@@ -38253,7 +38330,7 @@ var TableRow = function TableRow(_ref) {
   }, props), children);
 };
 
-var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$C);
+var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$D);
 
 var TableHead = function TableHead(_ref) {
   var children = _ref.children,
@@ -38269,7 +38346,7 @@ var TableHead = function TableHead(_ref) {
   }, children));
 };
 
-var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$B);
+var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$C);
 
 var TableHeading_styled = styled__default.th.withConfig({
   displayName: "TableHeadingstyled",
@@ -40190,7 +40267,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
 var backgroundColor$7 = "#ebeffb";
-var fallbackValues$D = {
+var fallbackValues$E = {
   backgroundColor: backgroundColor$7
 };
 
@@ -40242,7 +40319,7 @@ var Banner = function Banner(_ref) {
   }, /*#__PURE__*/React__default.createElement(Image, null))));
 };
 
-var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$D);
+var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$E);
 
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var _newPasswordErrorMess;
@@ -40384,7 +40461,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor$1 = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$E = {
+var fallbackValues$F = {
   titleColor: titleColor$1,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -40513,7 +40590,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, children))));
 };
 
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$E);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$F);
 
 var ClipboardIcon = function ClipboardIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -41103,7 +41180,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
 var footerBackgroundColor = BRIGHT_GREY;
 var subfooterBackgroundColor = STORM_GREY;
-var fallbackValues$F = {
+var fallbackValues$G = {
   footerBackgroundColor: footerBackgroundColor,
   subfooterBackgroundColor: subfooterBackgroundColor
 };
@@ -41135,7 +41212,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
   }));
 };
 
-var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$F);
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$G);
 
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var _EmailErrorMessages;
@@ -41187,7 +41264,7 @@ ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
 var backgroundColor$8 = "#182848";
-var fallbackValues$G = {
+var fallbackValues$H = {
   textColor: textColor$4,
   backgroundColor: backgroundColor$8
 };
@@ -41247,7 +41324,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
 
-var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$G);
+var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$H);
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -46399,7 +46476,7 @@ var backgroundColor$9 = {
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$H = {
+var fallbackValues$I = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -46467,7 +46544,7 @@ var Module = function Module(_ref) {
   }, children)));
 };
 
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$H, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$I, "default"));
 
 var backgroundColor$a = {
   profile: "#3b414d",
@@ -46477,7 +46554,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$I = {
+var fallbackValues$J = {
   backgroundColor: backgroundColor$a,
   shadowColor: shadowColor
 };
@@ -46518,7 +46595,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$I, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$J, "profile");
 
 var menu = posed.div({
   invisible: {
@@ -46580,7 +46657,7 @@ var NavMenuMobile = function NavMenuMobile(_ref2) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$I, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$J, "profile");
 
 var ACH_METHOD = "BANK_ACCOUNT";
 var CC_METHOD = "CREDIT_CARD";
@@ -46635,14 +46712,14 @@ var TitleModule = function TitleModule(_ref) {
   }, subtitle)));
 };
 
-var color$a = "#15749D";
+var color$b = "#15749D";
 var hoverColor$5 = "#116285";
 var activeColor$8 = "#0E506D";
 var linkColor$4 = "#3176AA";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
 var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
-var fallbackValues$J = {
-  color: color$a,
+var fallbackValues$K = {
+  color: color$b,
   hoverColor: hoverColor$5,
   activeColor: activeColor$8,
   linkColor: linkColor$4,
@@ -46767,7 +46844,7 @@ var AutopayModal = function AutopayModal(_ref) {
   }, modalExtraProps), renderAutoPayControl());
 };
 
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$J);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$K);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -47442,7 +47519,7 @@ var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$1 = WHITE;
 var activeColor$9 = MATISSE_BLUE;
-var fallbackValues$K = {
+var fallbackValues$L = {
   activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$1,
   arrowColor: arrowColor,
@@ -47650,7 +47727,7 @@ var Pagination = function Pagination(_ref3) {
   }));
 };
 
-var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$K);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$L);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
@@ -47734,7 +47811,7 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "p"
 };
-var fallbackValues$L = {
+var fallbackValues$M = {
   backgroundColor: backgroundColor$b,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -48054,7 +48131,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$L, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$M, "default");
 
 var linkColor$5 = {
   "default": "#3176AA"
@@ -48071,7 +48148,7 @@ var fontWeight$7 = {
 var modalLinkHoverFocus$1 = {
   "default": "outline: none; text-decoration: underline;"
 };
-var fallbackValues$M = {
+var fallbackValues$N = {
   linkColor: linkColor$5,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -48130,7 +48207,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   }, link));
 };
 
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$M, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$N, "default");
 
 var backgroundColor$c = {
   "default": "#ffffff",
@@ -48161,7 +48238,7 @@ var modalLinkHoverFocus$2 = {
   "default": standardInteractionStyles,
   footer: standardInteractionStyles
 };
-var fallbackValues$N = {
+var fallbackValues$O = {
   backgroundColor: backgroundColor$c,
   linkColor: linkColor$6,
   border: border$3,
@@ -48226,7 +48303,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   }, link));
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$N, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$O, "default");
 
 var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   var onCheck = _ref.onCheck,
@@ -49025,7 +49102,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$5 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
-var fallbackValues$O = {
+var fallbackValues$P = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -49215,7 +49292,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$O);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$P);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -49512,7 +49589,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$P = {
+var fallbackValues$Q = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49591,12 +49668,12 @@ var Tabs = function Tabs(_ref) {
   }))));
 };
 
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$P);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$Q);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$Q = {
+var fallbackValues$R = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49652,7 +49729,7 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$Q);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$R);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -49696,7 +49773,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$R = {
+var fallbackValues$S = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -49743,7 +49820,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   })))));
 };
 
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$R));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$S));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -49798,7 +49875,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$S = {
+var fallbackValues$T = {
   pageBackground: pageBackground
 };
 
@@ -49847,7 +49924,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$S));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$T));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -49889,7 +49966,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$S));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$T));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -49934,7 +50011,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$S));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$T));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -49988,7 +50065,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$S));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$T));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -50059,7 +50136,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$S));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$T));
 
 exports.AccountNumberImage = AccountNumberImage;
 exports.AccountsAddIcon = AccountsAddIcon$1;
@@ -50076,7 +50153,9 @@ exports.ArrowLeftCircleIconMedium = ArrowLeftCircleIconMedium;
 exports.ArrowLeftCircleIconSmall = ArrowLeftCircleIconSmall;
 exports.ArrowRightCircleIconSmall = ArrowRightCircleIconSmall;
 exports.ArrowUpCircleIconSmall = ArrowUpCircleIconSmall;
+exports.AutopayIcon = AutopayIcon;
 exports.AutopayOnIcon = AutopayOnIcon;
+exports.Badge = Badge$1;
 exports.BankIcon = BankIcon;
 exports.BankIconLarge = BankIconLarge;
 exports.Banner = Banner$1;