@thecb/components 8.1.0 → 8.2.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,
@@ -18758,6 +18760,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:flex;padding:2px 8px;align-items:center;gap:4px;border-radius:4px;background-color:", ";"], function (_ref) {
+  var variant = _ref.variant;
+  return fallbackValues$7.background[variant];
+});
+var StyledBadge = styled__default(Text$1).withConfig({
+  displayName: "Badge__StyledBadge",
+  componentId: "sc-1g438j-1"
+})(["font-family:\"Public Sans\";font-size:10px;font-style:normal;font-weight:400;line-height:150%;letter-spacing:0.2px;color:", ";@media screen and (min-width:1024px){font-size:12px;line-height:150%;letter-spacing:0.24px;}"], function (_ref2) {
+  var variant = _ref2.variant;
+  return fallbackValues$7.color[variant];
+});
+
+var Badge = function Badge(_ref3) {
+  var label = _ref3.label,
+      Icon = _ref3.Icon,
+      variant = _ref3.variant;
+  return /*#__PURE__*/React__default.createElement(StyledBadgeContainer, {
+    variant: variant
+  }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    fill: fallbackValues$7.color[variant]
+  }), /*#__PURE__*/React__default.createElement(StyledBadge, {
+    variant: variant
+  }, label));
+};
+
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -19575,7 +19622,7 @@ var curriedTint = /*#__PURE__*/curry
 var curriedTint$1 = curriedTint;
 
 var linkColor = MATISSE_BLUE;
-var fallbackValues$7 = {
+var fallbackValues$8 = {
   linkColor: linkColor
 };
 
@@ -19602,7 +19649,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 +19657,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 +19665,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 +19683,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 +19758,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 +19850,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 +19873,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 +21554,7 @@ var fontSize$3 = {
   pXL: "1.5rem" // 24px
 
 };
-var fallbackValues$a = {
+var fallbackValues$b = {
   fontFamily: fontFamily$3,
   fontSize: fontSize$3
 };
@@ -21564,11 +21611,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 +21758,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 +21829,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 +21970,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 +21996,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 +22167,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 +23468,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 +23863,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 +23902,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 +23934,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 +24037,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 +24854,7 @@ var mobileFontSize$1 = {
   extraSmall: "0.71428rem" // 10px
 
 };
-var fallbackValues$g = {
+var fallbackValues$h = {
   fontFamily: fontFamily$4,
   fontSize: fontSize$5
 };
@@ -24847,7 +24894,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 +24935,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 +24956,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 +25347,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 +25505,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 +25588,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 +25623,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 +25845,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 +25901,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 +25925,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 +25935,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 +25982,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 +26026,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 +26067,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 +26149,7 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$n = {
+var fallbackValues$o = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
@@ -26144,7 +26191,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 +26318,7 @@ var fontWeight$4 = {
   pL: "600",
   h6: "700"
 };
-var fallbackValues$o = {
+var fallbackValues$p = {
   fontWeight: fontWeight$4
 };
 
@@ -26299,7 +26346,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 +26356,7 @@ var paragraphVariant = {
   "default": "pL",
   small: "pS"
 };
-var fallbackValues$p = {
+var fallbackValues$q = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -26343,11 +26390,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 +26449,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 +26707,7 @@ var PasswordRequirements = function PasswordRequirements(_ref) {
   }))));
 };
 
-var color$9 = {
+var color$a = {
   "default": "".concat(CHARADE_GREY),
   large: "".concat(BRIGHT_GREY)
 };
@@ -26668,8 +26715,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 +26824,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 +26857,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 +26933,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 +27030,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 +27112,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 +27120,7 @@ var borderColor$2 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$w = {
+var fallbackValues$x = {
   borderColor: borderColor$2,
   borderSize: borderSize
 };
@@ -27090,7 +27137,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 +37721,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 +37897,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 +37946,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 +37970,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 +37994,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 +38097,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 +38135,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 +38236,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 +38258,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 +38300,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 +38316,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 +40237,7 @@ AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
 var backgroundColor$7 = "#ebeffb";
-var fallbackValues$D = {
+var fallbackValues$E = {
   backgroundColor: backgroundColor$7
 };
 
@@ -40242,7 +40289,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 +40431,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 +40560,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 +41150,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 +41182,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 +41234,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 +41294,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 +46446,7 @@ var backgroundColor$9 = {
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$H = {
+var fallbackValues$I = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -46467,7 +46514,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 +46524,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$I = {
+var fallbackValues$J = {
   backgroundColor: backgroundColor$a,
   shadowColor: shadowColor
 };
@@ -46518,7 +46565,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 +46627,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 +46682,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 +46814,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 +47489,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 +47697,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 +47781,7 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "p"
 };
-var fallbackValues$L = {
+var fallbackValues$M = {
   backgroundColor: backgroundColor$b,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -48054,7 +48101,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 +48118,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 +48177,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 +48208,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 +48273,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 +49072,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 +49262,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 +49559,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 +49638,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 +49699,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 +49743,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 +49790,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 +49845,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$S = {
+var fallbackValues$T = {
   pageBackground: pageBackground
 };
 
@@ -49847,7 +49894,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 +49936,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 +49981,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 +50035,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 +50106,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;
@@ -50077,6 +50124,7 @@ exports.ArrowLeftCircleIconSmall = ArrowLeftCircleIconSmall;
 exports.ArrowRightCircleIconSmall = ArrowRightCircleIconSmall;
 exports.ArrowUpCircleIconSmall = ArrowUpCircleIconSmall;
 exports.AutopayOnIcon = AutopayOnIcon;
+exports.Badge = Badge;
 exports.BankIcon = BankIcon;
 exports.BankIconLarge = BankIconLarge;
 exports.Banner = Banner$1;