@thecb/components 10.4.6-beta.2 → 10.4.6-beta.3

package/dist/index.cjs.js

@@ -13061,6 +13061,251 @@ var fallbackValues$2 = {
   backgroundColor: backgroundColor$1
 };
 
+var fontSize$1 = {
+  "default": "1.375rem",
+  largeTitle: "1.75rem",
+  small: "1.25rem"
+};
+var fontWeight$1 = {
+  "default": "600",
+  largeTitle: "700",
+  small: "600"
+};
+var fontColor = {
+  "default": CHARADE_GREY,
+  largeTitle: CHARADE_GREY,
+  small: CHARADE_GREY
+};
+var lineHeight = {
+  "default": "2rem",
+  largeTitle: "2rem",
+  small: "2rem"
+};
+var textAlign = {
+  "default": "left",
+  largeTitle: "left",
+  small: "left"
+};
+var titleType = {
+  "default": "h5",
+  largeTitle: "h1",
+  small: "h6"
+};
+var titleSpacing = {
+  "default": "0.5rem",
+  largeTitle: "1.125rem",
+  small: "0.5rem"
+};
+var boxShadow = {
+  "default": "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
+  largeTitle: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
+  small: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
+};
+var borderRadius = {
+  "default": "0.25rem",
+  largeTitle: "0.25rem",
+  small: "0.25rem"
+};
+var backgroundColor$2 = {
+  "default": WHITE,
+  largeTitle: WHITE,
+  small: WHITE
+};
+var fallbackValues$3 = {
+  fontSize: fontSize$1,
+  fontWeight: fontWeight$1,
+  fontColor: fontColor,
+  lineHeight: lineHeight,
+  textAlign: textAlign,
+  titleType: titleType,
+  titleSpacing: titleSpacing,
+  boxShadow: boxShadow,
+  borderRadius: borderRadius,
+  backgroundColor: backgroundColor$2
+};
+
+var TitleText = styled__default.h1.withConfig({
+  displayName: "Titlestyled__TitleText",
+  componentId: "sc-11lhluq-0"
+})(["font-size:", ";line-height:1.5;color:", ";font-weight:", ";margin:", ";text-align:", ";font-family:", ";", ";"], function (_ref) {
+  var fontSize = _ref.fontSize;
+  return fontSize;
+}, function (_ref2) {
+  var color = _ref2.color;
+  return color;
+}, function (_ref3) {
+  var weight = _ref3.weight;
+  return weight;
+}, function (_ref4) {
+  var margin = _ref4.margin;
+  return margin;
+}, function (_ref5) {
+  var textAlign = _ref5.textAlign;
+  return textAlign;
+}, function (_ref6) {
+  var fontFamily = _ref6.fontFamily;
+  return fontFamily;
+}, function (_ref7) {
+  var extraStyles = _ref7.extraStyles;
+  return extraStyles;
+});
+
+// Comments assume desktop base font size of 16px, mobile base font size of 14px
+
+var fontSize$2 = {
+  large: "1.5rem",
+  // 24px (at base font size of 16px)
+  small: "1.25rem" // 20px
+};
+var fontFamily$1 = {
+  large: "Public Sans",
+  small: "Public Sans"
+};
+var mobileFontSize = {
+  large: "1.5rem",
+  // 21px (at base font size of 14px)
+  small: "1.2142rem" // 17px
+};
+var fallbackValues$4 = {
+  fontFamily: fontFamily$1,
+  fontSize: fontSize$2
+};
+var mobileFallbackValues = {
+  fontFamily: fontFamily$1,
+  fontSize: mobileFontSize
+};
+var MOBILE_BREAKPOINT = 768;
+
+var _excluded$i = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+
+/*
+  New responsive text component for Title elements
+  Size is decoupled from tag
+  Comes with two variants - "large" and "small"
+  Large variant results in text that is 1.5rem (24px desktop, 21px mobile)
+  Small variant results in text that is 1.25rem/1.2142rem (20px desktop, 17px mobile)
+  
+  If you need a smaller text size, use the <Detail /> atom, which has smaller variants
+  
+  Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
+  If you need an inline text element (span), use the <Text /> atom
+  The "as" value should be dictated by the structure of your page, not what font-size you want
+
+  Title / Detail both use slightly different desktop/mobile scales
+  (Mobile scale is different to allow for design-friendly px values)
+  Both atoms detect the presence of a mobile device on their own
+  and apply the corresponding scale
+
+  Mobile breakpoint value is specified in Title.theme.js
+
+  If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set both the "large" and "small" variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
+*/
+
+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$4;
+var Title = function Title(_ref) {
+  var themeValues = _ref.themeValues,
+    _ref$weight = _ref.weight,
+    weight = _ref$weight === void 0 ? FONT_WEIGHT_REGULAR : _ref$weight,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? FIREFLY_GREY : _ref$color,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? 0 : _ref$margin,
+    textAlign = _ref.textAlign,
+    _ref$extraStyles = _ref.extraStyles,
+    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
+    className = _ref.className,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "large" : _ref$variant,
+    _ref$as = _ref.as,
+    as = _ref$as === void 0 ? "h1" : _ref$as,
+    dataQa = _ref.dataQa,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded$i);
+  return /*#__PURE__*/React__default.createElement(TitleText, _extends({
+    variant: variant,
+    as: as,
+    weight: weight,
+    color: color,
+    margin: margin,
+    textAlign: textAlign,
+    extraStyles: extraStyles,
+    className: className,
+    fontFamily: themeValues.fontFamily,
+    fontSize: themeValues.fontSize,
+    "data-qa": dataQa
+  }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
+};
+var Title$1 = themeComponent(Title, "Title", fallbacks, "large");
+
+/*
+  New (01/22) - updated <Module /> to use <Title /> atom
+  Because <Title /> decouples size from element, also gave <Module />
+  two new props: "as" and "fontSize"
+
+  When present, <Module /> will use those values to dictate element type and font size.
+
+  For backwards compatability, <Module /> still computes a themed font size and element type based on old
+  <Heading /> variants. If "fontSize" or "as" is undefined, <Module /> will use themed values.
+*/
+
+var Module = function Module(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "default" : _ref$variant,
+    as = _ref.as,
+    disabled = _ref.disabled,
+    heading = _ref.heading,
+    rightTitleContent = _ref.rightTitleContent,
+    _ref$titleID = _ref.titleID,
+    titleID = _ref$titleID === void 0 ? "" : _ref$titleID,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? "1rem" : _ref$spacing,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? "0" : _ref$padding,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? "0" : _ref$margin,
+    _ref$spacingBottom = _ref.spacingBottom,
+    spacingBottom = _ref$spacingBottom === void 0 ? "2.5rem" : _ref$spacingBottom,
+    fontSize = _ref.fontSize,
+    themeValues = _ref.themeValues,
+    children = _ref.children;
+  var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
+  var computedFontSize = fontSize || themedFontSize;
+  var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
+  var computedElemType = as || themedElemType;
+  var disabledStyles = "opacity: 0.40;";
+  var headingText = /*#__PURE__*/React__default.createElement(Title$1, {
+    weight: themeValues.fontWeight,
+    color: themeValues.fontColor,
+    margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
+    textAlign: themeValues.textAlign,
+    as: computedElemType,
+    extraStyles: "font-size: ".concat(computedFontSize, ";"),
+    id: titleID
+  }, heading);
+  return /*#__PURE__*/React__default.createElement(Box, {
+    "aria-disabled": disabled,
+    extraStyles: disabled && disabledStyles,
+    padding: "0",
+    role: "group"
+  }, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    nowrap: true
+  }, headingText, rightTitleContent), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0 ".concat(spacingBottom),
+    extraStyles: "margin: ".concat(margin)
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: padding,
+    background: themeValues.backgroundColor,
+    borderRadius: themeValues.borderRadius,
+    boxShadow: themeValues.boxShadow
+  }, children)));
+};
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$3, "default"));
+
 var WalletName = function WalletName(_ref) {
   var _ref$variant = _ref.variant,
     personName = _ref.personName,
@@ -13073,11 +13318,15 @@ var WalletName = function WalletName(_ref) {
     themeValues = _ref.themeValues;
   var themeContext = React.useContext(styled.ThemeContext);
   var isMobile = themeContext.isMobile;
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
-    background: themeValues.backgroundColor,
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Module$1, {
+    spacingBottom: isMobile ? "0" : "1.5rem"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "24px",
+    spacingBottom: "0",
+    margin: "0 0 0 0",
     extraStyles: isMobile ? "display: flex; flex-direction: column; flex-wrap: wrap; \n          span {text - align: right;}" : "display: flex; justify-content: space-between; align-items: center;"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0"
+    padding: "0 0 0"
   }, /*#__PURE__*/React__default.createElement(Text$1, null, personName)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -13087,7 +13336,7 @@ var WalletName = function WalletName(_ref) {
     action: action,
     variant: "smallGhost",
     extraStyles: "span {font-size: 12px;}"
-  }))), isMobile && /*#__PURE__*/React__default.createElement(Box, {
+  })))), isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     extraStyles: "display: flex; align-items: center; justify-content: flex-end;"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -13121,7 +13370,7 @@ var singleIconColor = {
   secondary: "".concat(BRIGHT_GREY),
   darkMode: "".concat(WHITE)
 };
-var fallbackValues$3 = {
+var fallbackValues$5 = {
   primaryColor: primaryColor,
   accentColor: accentColor,
   subIconColor: subIconColor,
@@ -13160,7 +13409,7 @@ var AccountsIcon = function AccountsIcon(_ref) {
     mask: "url(#b)"
   })));
 };
-var AccountsIcon$1 = themeComponent(AccountsIcon, "Icons", fallbackValues$3, "info");
+var AccountsIcon$1 = themeComponent(AccountsIcon, "Icons", fallbackValues$5, "info");
 
 // Fill color based on default "success" variant color
 var AutopayIcon = function AutopayIcon(_ref) {
@@ -13231,7 +13480,7 @@ var AccountsAddIcon = function AccountsAddIcon(_ref) {
     mask: "url(#b)"
   })));
 };
-var AccountsAddIcon$1 = themeComponent(AccountsAddIcon, "Icons", fallbackValues$3, "info");
+var AccountsAddIcon$1 = themeComponent(AccountsAddIcon, "Icons", fallbackValues$5, "info");
 
 var ForgotPasswordIcon = function ForgotPasswordIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13268,7 +13517,7 @@ var ForgotPasswordIcon = function ForgotPasswordIcon(_ref) {
     xlinkHref: "#prefix__c"
   })));
 };
-var ForgotPasswordIcon$1 = themeComponent(ForgotPasswordIcon, "Icons", fallbackValues$3, "info");
+var ForgotPasswordIcon$1 = themeComponent(ForgotPasswordIcon, "Icons", fallbackValues$5, "info");
 
 var GoToEmailIcon = function GoToEmailIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13297,7 +13546,7 @@ var GoToEmailIcon = function GoToEmailIcon(_ref) {
     mask: "url(#prefix__b)"
   })));
 };
-var GoToEmailIcon$1 = themeComponent(GoToEmailIcon, "Icons", fallbackValues$3, "info");
+var GoToEmailIcon$1 = themeComponent(GoToEmailIcon, "Icons", fallbackValues$5, "info");
 
 var VerifiedEmailIcon = function VerifiedEmailIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13340,7 +13589,7 @@ var VerifiedEmailIcon = function VerifiedEmailIcon(_ref) {
     xlinkHref: "#prefix__d"
   })));
 };
-var VerifiedEmailIcon$1 = themeComponent(VerifiedEmailIcon, "Icons", fallbackValues$3, "info");
+var VerifiedEmailIcon$1 = themeComponent(VerifiedEmailIcon, "Icons", fallbackValues$5, "info");
 
 var PaymentMethodIcon = function PaymentMethodIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13374,7 +13623,7 @@ var PaymentMethodIcon = function PaymentMethodIcon(_ref) {
     mask: "url(#b)"
   })));
 };
-var PaymentMethodIcon$1 = themeComponent(PaymentMethodIcon, "Icons", fallbackValues$3, "info");
+var PaymentMethodIcon$1 = themeComponent(PaymentMethodIcon, "Icons", fallbackValues$5, "info");
 
 var AccountsIconSmall = function AccountsIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13412,7 +13661,7 @@ var AccountsIconSmall = function AccountsIconSmall(_ref) {
     mask: "url(#mask-2-accountssmall)"
   }))))))));
 };
-var AccountsIconSmall$1 = themeComponent(AccountsIconSmall, "Icons", fallbackValues$3, "primary");
+var AccountsIconSmall$1 = themeComponent(AccountsIconSmall, "Icons", fallbackValues$5, "primary");
 
 var PaymentsIconSmall = function PaymentsIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13462,7 +13711,7 @@ var PaymentsIconSmall = function PaymentsIconSmall(_ref) {
     mask: "url(#mask-2-paymentssmall)"
   }))))))));
 };
-var PaymentsIconSmall$1 = themeComponent(PaymentsIconSmall, "Icons", fallbackValues$3, "primary");
+var PaymentsIconSmall$1 = themeComponent(PaymentsIconSmall, "Icons", fallbackValues$5, "primary");
 
 var PaymentMethodAddIcon = function PaymentMethodAddIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13525,7 +13774,7 @@ var PaymentMethodAddIcon = function PaymentMethodAddIcon(_ref) {
     d: "M0 0H21V21H0z"
   })))))));
 };
-var PaymentMethodAddIcon$1 = themeComponent(PaymentMethodAddIcon, "Icons", fallbackValues$3, "info");
+var PaymentMethodAddIcon$1 = themeComponent(PaymentMethodAddIcon, "Icons", fallbackValues$5, "info");
 
 var ProfileIconSmall = function ProfileIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13553,7 +13802,7 @@ var ProfileIconSmall = function ProfileIconSmall(_ref) {
     id: "user-circle"
   })))));
 };
-var ProfileIconSmall$1 = themeComponent(ProfileIconSmall, "Icons", fallbackValues$3, "primary");
+var ProfileIconSmall$1 = themeComponent(ProfileIconSmall, "Icons", fallbackValues$5, "primary");
 
 var SettingsIconSmall = function SettingsIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13603,7 +13852,7 @@ var SettingsIconSmall = function SettingsIconSmall(_ref) {
     mask: "url(#mask-2-paymentssmall)"
   }))))))));
 };
-var SettingsIconSmall$1 = themeComponent(SettingsIconSmall, "Icons", fallbackValues$3, "primary");
+var SettingsIconSmall$1 = themeComponent(SettingsIconSmall, "Icons", fallbackValues$5, "primary");
 
 var WalletIconSmall = function WalletIconSmall(_ref) {
   var themeValues = _ref.themeValues,
@@ -13643,7 +13892,7 @@ var WalletIconSmall = function WalletIconSmall(_ref) {
     fill: themeValues.singleIconColor
   })));
 };
-var WalletIconSmall$1 = themeComponent(WalletIconSmall, "Icons", fallbackValues$3, "primary");
+var WalletIconSmall$1 = themeComponent(WalletIconSmall, "Icons", fallbackValues$5, "primary");
 
 var ChevronIcon = function ChevronIcon(_ref) {
   var themeValues = _ref.themeValues,
@@ -13684,7 +13933,7 @@ var ChevronIcon = function ChevronIcon(_ref) {
     height: "24"
   }))));
 };
-var ChevronIcon$1 = themeComponent(ChevronIcon, "Icons", fallbackValues$3, "secondary");
+var ChevronIcon$1 = themeComponent(ChevronIcon, "Icons", fallbackValues$5, "secondary");
 
 var PropertiesAddIcon = function PropertiesAddIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13752,7 +14001,7 @@ var PropertiesAddIcon = function PropertiesAddIcon(_ref) {
     d: "M0 0h21v21H0z"
   })))))));
 };
-var PropertiesAddIcon$1 = themeComponent(PropertiesAddIcon, "Icons", fallbackValues$3, "info");
+var PropertiesAddIcon$1 = themeComponent(PropertiesAddIcon, "Icons", fallbackValues$5, "info");
 
 var PropertiesIconSmall = function PropertiesIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13778,7 +14027,7 @@ var PropertiesIconSmall = function PropertiesIconSmall(_ref) {
     d: "M16.875 8.5a.297.297 0 00.25-.125l.781-.969a.389.389 0 00.078-.281.397.397 0 00-.109-.25L15.25 4.719V.375a.362.362 0 00-.11-.266.362.362 0 00-.265-.109h-1.75a.362.362 0 00-.266.11.362.362 0 00-.109.265v2.281L9.969.344A1.531 1.531 0 009 0c-.354 0-.667.115-.938.344L.125 6.875a.397.397 0 00-.11.25.389.389 0 00.079.281l.781.969a.297.297 0 00.25.125.457.457 0 00.281-.094L8.75 2.375A.416.416 0 019 2.281c.083 0 .167.032.25.094l7.344 6.031a.457.457 0 00.281.094zM7.125 14a.362.362 0 00.266-.11.362.362 0 00.109-.265v-3.5c0-.104.036-.193.11-.266a.362.362 0 01.265-.109h2.25c.104 0 .193.036.266.11.073.072.109.16.109.265v3.5c0 .104.036.193.11.266.072.073.16.109.265.109H14.5a.723.723 0 00.531-.219.723.723 0 00.219-.531V8.781a.424.424 0 00-.125-.312L9.25 3.656A.416.416 0 009 3.563a.416.416 0 00-.25.093L2.875 8.47a.424.424 0 00-.125.312v4.469c0 .208.073.385.219.531A.723.723 0 003.5 14h3.625z"
   })));
 };
-var PropertiesIconSmall$1 = themeComponent(PropertiesIconSmall, "Icons", fallbackValues$3, "primary");
+var PropertiesIconSmall$1 = themeComponent(PropertiesIconSmall, "Icons", fallbackValues$5, "primary");
 
 var AccountNumberImage = function AccountNumberImage() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -14800,7 +15049,7 @@ var WalletIcon = function WalletIcon(_ref) {
     d: "M239.196 71.402v3.56l3.562.002V77.1h-3.562v3.562h-2.137V77.1h-3.562v-2.137l3.561-.001.001-3.561h2.137z"
   }))));
 };
-var WalletIcon$1 = themeComponent(WalletIcon, "Icons", fallbackValues$3, "info");
+var WalletIcon$1 = themeComponent(WalletIcon, "Icons", fallbackValues$5, "info");
 
 var AchReturnIcon = function AchReturnIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -15050,7 +15299,7 @@ var PencilIcon = function PencilIcon(_ref) {
     fill: themeValues.subIconColor
   }));
 };
-var PencilIcon$1 = themeComponent(PencilIcon, "Icons", fallbackValues$3, "info");
+var PencilIcon$1 = themeComponent(PencilIcon, "Icons", fallbackValues$5, "info");
 
 var PendingIcon = function PendingIcon(_ref) {
   var _ref$fill = _ref.fill,
@@ -15261,7 +15510,7 @@ var CarrotIcon = function CarrotIcon(_ref) {
     d: "M0 0H24V24H0z"
   }))))))));
 };
-var CarrotIcon$1 = themeComponent(CarrotIcon, "Icons", fallbackValues$3, "darkMode");
+var CarrotIcon$1 = themeComponent(CarrotIcon, "Icons", fallbackValues$5, "darkMode");
 
 var ProfileIcon = function ProfileIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -15298,7 +15547,7 @@ var ProfileIcon = function ProfileIcon(_ref) {
     d: "M51.196 76.402v3.56l3.562.002V82.1h-3.562v3.562H49.06V82.1h-3.562v-2.137l3.561-.001.001-3.561h2.137zm196-5v3.56l3.562.002V77.1h-3.562v3.562h-2.137V77.1h-3.562v-2.137l3.561-.001.001-3.561h2.137z"
   }))));
 };
-var ProfileIcon$1 = themeComponent(ProfileIcon, "Icons", fallbackValues$3, "info");
+var ProfileIcon$1 = themeComponent(ProfileIcon, "Icons", fallbackValues$5, "info");
 
 var GenericCardLarge = function GenericCardLarge() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -15360,7 +15609,7 @@ var EmptyCartIcon = function EmptyCartIcon(_ref) {
     fillRule: "nonzero"
   })));
 };
-var EmptyCartIcon$1 = themeComponent(EmptyCartIcon, "Icons", fallbackValues$3, "info");
+var EmptyCartIcon$1 = themeComponent(EmptyCartIcon, "Icons", fallbackValues$5, "info");
 
 var ShoppingCartIcon = function ShoppingCartIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -15432,7 +15681,7 @@ var TrashIcon = function TrashIcon(_ref) {
     points: "0 0 20 0 20 20 0 20"
   })));
 };
-var TrashIcon$1 = themeComponent(TrashIcon, "Icons", fallbackValues$3, "primary");
+var TrashIcon$1 = themeComponent(TrashIcon, "Icons", fallbackValues$5, "primary");
 
 var NoCustomerResultsIcon = function NoCustomerResultsIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -16024,7 +16273,7 @@ var WalletBannerIcon = function WalletBannerIcon(_ref) {
     fill: "white"
   }));
 };
-var WalletBannerIcon$1 = themeComponent(WalletBannerIcon, "Icons", fallbackValues$3, "primary");
+var WalletBannerIcon$1 = themeComponent(WalletBannerIcon, "Icons", fallbackValues$5, "primary");
 
 var StandardCheckoutImage = function StandardCheckoutImage() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -17535,7 +17784,7 @@ var FindIconSmall = function FindIconSmall(_ref) {
     fill: themeValues.singleIconColor
   })));
 };
-var FindIconSmall$1 = themeComponent(FindIconSmall, "Icons", fallbackValues$3, "primary");
+var FindIconSmall$1 = themeComponent(FindIconSmall, "Icons", fallbackValues$5, "primary");
 
 var HistoryIconSmall = function HistoryIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -17560,7 +17809,7 @@ var HistoryIconSmall = function HistoryIconSmall(_ref) {
     fill: themeValues.singleIconColor
   }));
 };
-var HistoryIconSmall$1 = themeComponent(HistoryIconSmall, "Icons", fallbackValues$3, "primary");
+var HistoryIconSmall$1 = themeComponent(HistoryIconSmall, "Icons", fallbackValues$5, "primary");
 
 var ChargebackIconSmall = function ChargebackIconSmall(_ref) {
   var _ref$color = _ref.color,
@@ -18381,7 +18630,7 @@ var KebabMenuIcon = function KebabMenuIcon() {
   }));
 };
 
-var _excluded$i = ["iconFill", "iconWidth", "iconHeight"];
+var _excluded$j = ["iconFill", "iconWidth", "iconHeight"];
 var MultiCartIcon = function MultiCartIcon(_ref) {
   var _ref$iconFill = _ref.iconFill,
     iconFill = _ref$iconFill === void 0 ? "#3B5BDB" : _ref$iconFill,
@@ -18389,7 +18638,7 @@ var MultiCartIcon = function MultiCartIcon(_ref) {
     iconWidth = _ref$iconWidth === void 0 ? "20" : _ref$iconWidth,
     _ref$iconHeight = _ref.iconHeight,
     iconHeight = _ref$iconHeight === void 0 ? "17" : _ref$iconHeight,
-    rest = _objectWithoutProperties(_ref, _excluded$i);
+    rest = _objectWithoutProperties(_ref, _excluded$j);
   return /*#__PURE__*/React__default.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: iconWidth,
@@ -18403,7 +18652,7 @@ var MultiCartIcon = function MultiCartIcon(_ref) {
   }));
 };
 
-var _excluded$j = ["iconFill", "iconWidth", "iconHeight"];
+var _excluded$k = ["iconFill", "iconWidth", "iconHeight"];
 var CloseIcon = function CloseIcon(_ref) {
   var _ref$iconFill = _ref.iconFill,
     iconFill = _ref$iconFill === void 0 ? "#3B414D" : _ref$iconFill,
@@ -18411,7 +18660,7 @@ var CloseIcon = function CloseIcon(_ref) {
     iconWidth = _ref$iconWidth === void 0 ? "24" : _ref$iconWidth,
     _ref$iconHeight = _ref.iconHeight,
     iconHeight = _ref$iconHeight === void 0 ? "24" : _ref$iconHeight,
-    rest = _objectWithoutProperties(_ref, _excluded$j);
+    rest = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React__default.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: iconWidth,
@@ -18479,12 +18728,12 @@ var TrashIconV2 = function TrashIconV2(_ref) {
     mask: "url(#mask0_4292_11876)"
   }));
 };
-var TrashIconV2$1 = themeComponent(TrashIconV2, "Icons", fallbackValues$3, "primary");
+var TrashIconV2$1 = themeComponent(TrashIconV2, "Icons", fallbackValues$5, "primary");
 
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
-var fallbackValues$4 = {
+var fallbackValues$6 = {
   color: color$2,
   hoverColor: hoverColor$1,
   activeColor: activeColor$1
@@ -18525,7 +18774,7 @@ var AddObligation = function AddObligation(_ref) {
     tabIndex: "-1"
   })))));
 };
-var AddObligation$1 = themeComponent(AddObligation, "AddObligation", fallbackValues$4);
+var AddObligation$1 = themeComponent(AddObligation, "AddObligation", fallbackValues$6);
 
 var IconChevron = function IconChevron(_ref) {
   var _ref$fill = _ref.fill,
@@ -18914,7 +19163,7 @@ var link = {
   error: "".concat(SCIENCE_BLUE),
   success: "".concat(SCIENCE_BLUE)
 };
-var fallbackValues$5 = {
+var fallbackValues$7 = {
   background: background,
   border: border$1,
   iconBackground: iconBackground,
@@ -19073,126 +19322,10 @@ var Alert = function Alert(_ref) {
     maxWidth: maxContentWidth
   }, content) : content);
 };
-var Alert$1 = themeComponent(Alert, "Alert", fallbackValues$5, "info");
-
-var TitleText = styled__default.h1.withConfig({
-  displayName: "Titlestyled__TitleText",
-  componentId: "sc-11lhluq-0"
-})(["font-size:", ";line-height:1.5;color:", ";font-weight:", ";margin:", ";text-align:", ";font-family:", ";", ";"], function (_ref) {
-  var fontSize = _ref.fontSize;
-  return fontSize;
-}, function (_ref2) {
-  var color = _ref2.color;
-  return color;
-}, function (_ref3) {
-  var weight = _ref3.weight;
-  return weight;
-}, function (_ref4) {
-  var margin = _ref4.margin;
-  return margin;
-}, function (_ref5) {
-  var textAlign = _ref5.textAlign;
-  return textAlign;
-}, function (_ref6) {
-  var fontFamily = _ref6.fontFamily;
-  return fontFamily;
-}, function (_ref7) {
-  var extraStyles = _ref7.extraStyles;
-  return extraStyles;
-});
-
-// Comments assume desktop base font size of 16px, mobile base font size of 14px
-
-var fontSize$1 = {
-  large: "1.5rem",
-  // 24px (at base font size of 16px)
-  small: "1.25rem" // 20px
-};
-var fontFamily$1 = {
-  large: "Public Sans",
-  small: "Public Sans"
-};
-var mobileFontSize = {
-  large: "1.5rem",
-  // 21px (at base font size of 14px)
-  small: "1.2142rem" // 17px
-};
-var fallbackValues$6 = {
-  fontFamily: fontFamily$1,
-  fontSize: fontSize$1
-};
-var mobileFallbackValues = {
-  fontFamily: fontFamily$1,
-  fontSize: mobileFontSize
-};
-var MOBILE_BREAKPOINT = 768;
-
-var _excluded$k = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
-
-/*
-  New responsive text component for Title elements
-  Size is decoupled from tag
-  Comes with two variants - "large" and "small"
-  Large variant results in text that is 1.5rem (24px desktop, 21px mobile)
-  Small variant results in text that is 1.25rem/1.2142rem (20px desktop, 17px mobile)
-  
-  If you need a smaller text size, use the <Detail /> atom, which has smaller variants
-  
-  Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
-  If you need an inline text element (span), use the <Text /> atom
-  The "as" value should be dictated by the structure of your page, not what font-size you want
-
-  Title / Detail both use slightly different desktop/mobile scales
-  (Mobile scale is different to allow for design-friendly px values)
-  Both atoms detect the presence of a mobile device on their own
-  and apply the corresponding scale
-
-  Mobile breakpoint value is specified in Title.theme.js
-
-  If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set both the "large" and "small" variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
-*/
-
-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 Title = function Title(_ref) {
-  var themeValues = _ref.themeValues,
-    _ref$weight = _ref.weight,
-    weight = _ref$weight === void 0 ? FONT_WEIGHT_REGULAR : _ref$weight,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? FIREFLY_GREY : _ref$color,
-    _ref$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? 0 : _ref$margin,
-    textAlign = _ref.textAlign,
-    _ref$extraStyles = _ref.extraStyles,
-    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
-    className = _ref.className,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "large" : _ref$variant,
-    _ref$as = _ref.as,
-    as = _ref$as === void 0 ? "h1" : _ref$as,
-    dataQa = _ref.dataQa,
-    children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$k);
-  return /*#__PURE__*/React__default.createElement(TitleText, _extends({
-    variant: variant,
-    as: as,
-    weight: weight,
-    color: color,
-    margin: margin,
-    textAlign: textAlign,
-    extraStyles: extraStyles,
-    className: className,
-    fontFamily: themeValues.fontFamily,
-    fontSize: themeValues.fontSize,
-    "data-qa": dataQa
-  }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
-};
-var Title$1 = themeComponent(Title, "Title", fallbacks, "large");
+var Alert$1 = themeComponent(Alert, "Alert", fallbackValues$7, "info");
 
 var color$3 = "#292A33";
-var fallbackValues$7 = {
+var fallbackValues$8 = {
   color: color$3
 };
 
@@ -19210,7 +19343,7 @@ var AmountCallout = function AmountCallout(_ref) {
     as: "p"
   }, amount));
 };
-var AmountCallout$1 = themeComponent(AmountCallout, "AmountCallout", fallbackValues$7);
+var AmountCallout$1 = themeComponent(AmountCallout, "AmountCallout", fallbackValues$8);
 
 var background$1 = {
   info: "".concat(INFO_BLUE),
@@ -19226,7 +19359,7 @@ var color$4 = {
   success: "".concat(SEA_GREEN),
   disabled: "".concat(MANATEE_GREY)
 };
-var fallbackValues$8 = {
+var fallbackValues$9 = {
   background: background$1,
   color: color$4
 };
@@ -19257,7 +19390,7 @@ var Badge = function Badge(_ref) {
     fill: themeValues.color
   }));
 };
-var Badge$1 = themeComponent(Badge, "Badge", fallbackValues$8, "success");
+var Badge$1 = themeComponent(Badge, "Badge", fallbackValues$9, "success");
 
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
@@ -20598,7 +20731,7 @@ function transparentize(amount, color) {
 var curriedTransparentize = curry /* ::<number | string, string, string> */(transparentize);
 
 var linkColor = MATISSE_BLUE;
-var fallbackValues$9 = {
+var fallbackValues$a = {
   linkColor: linkColor
 };
 
@@ -20622,7 +20755,7 @@ var BoxWithShadow = function BoxWithShadow(_ref) {
     boxShadow: shadowRegistry[variant]
   }, props), children);
 };
-var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues$9);
+var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues$a);
 
 // import theme from "styled-theming";
 var MATISSE_BLUE$2 = MATISSE_BLUE,
@@ -20637,18 +20770,18 @@ var LINK_TEXT_DECORATION$2 = LINK_TEXT_DECORATION;
 var color$5 = "".concat(MATISSE_BLUE$2);
 var activeColor$2 = "".concat(STORM_GREY$1);
 var activeBreadcrumbColor = "".concat(STORM_GREY$1);
-var fontSize$2 = "0.875rem";
-var lineHeight = "1.25rem";
-var fontWeight$1 = "400";
+var fontSize$3 = "0.875rem";
+var lineHeight$1 = "1.25rem";
+var fontWeight$2 = "400";
 var margin = "0.5rem";
 var hover = "text-decoration: ".concat(LINK_TEXT_DECORATION$2, ";");
-var fallbackValues$a = {
+var fallbackValues$b = {
   color: color$5,
   activeColor: activeColor$2,
   activeBreadcrumbColor: activeBreadcrumbColor,
-  fontSize: fontSize$2,
-  lineHeight: lineHeight,
-  fontWeight: fontWeight$1,
+  fontSize: fontSize$3,
+  lineHeight: lineHeight$1,
+  fontWeight: fontWeight$2,
   margin: margin,
   hover: hover
 };
@@ -20660,7 +20793,7 @@ var fontFamily$2 = {
 var hoverColor$2 = SAPPHIRE_BLUE;
 var activeColor$3 = PEACOCK_BLUE;
 var externalLinkColor = MATISSE_BLUE;
-var fallbackValues$b = {
+var fallbackValues$c = {
   fontFamily: fontFamily$2,
   hoverColor: hoverColor$2,
   activeColor: activeColor$3,
@@ -20736,7 +20869,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$b, "Link", variant);
+  var themeValues = createThemeValues(themeContext, fallbackValues$c, "Link", variant);
   return /*#__PURE__*/React__default.createElement(StyledExternalLink, {
     href: href,
     target: newTab ? "_blank" : "",
@@ -20829,7 +20962,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$b, "Link", variant);
+  var themeValues = createThemeValues(themeContext, fallbackValues$c, "Link", variant);
   return /*#__PURE__*/React__default.createElement(StyledInternalLink, {
     to: to,
     color: color,
@@ -20852,7 +20985,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$a, "Breadcrumb");
+  var themeValues = createThemeValues(themeContext, fallbackValues$b, "Breadcrumb");
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     as: "nav",
@@ -22517,7 +22650,7 @@ var fontFamily$3 = {
 
 // Comments assume base font size of 16px
 
-var fontSize$3 = {
+var fontSize$4 = {
   p: "1rem",
   // 16px
   pL: "1.125rem",
@@ -22530,9 +22663,9 @@ var fontSize$3 = {
   // 10px
   pXL: "1.5rem" // 24px
 };
-var fallbackValues$c = {
+var fallbackValues$d = {
   fontFamily: fontFamily$3,
-  fontSize: fontSize$3
+  fontSize: fontSize$4
 };
 
 var ParagraphText = styled__default.p.withConfig({
@@ -22584,12 +22717,12 @@ var Paragraph = function Paragraph(_ref) {
     "data-qa": dataQa
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
-var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$c, "p");
+var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$d, "p");
 
-var backgroundColor$2 = WHITE;
+var backgroundColor$3 = WHITE;
 var iconBackgroundColor = GRECIAN_GREY;
-var fallbackValues$d = {
-  backgroundColor: backgroundColor$2,
+var fallbackValues$e = {
+  backgroundColor: backgroundColor$3,
   iconBackgroundColor: iconBackgroundColor
 };
 
@@ -22719,7 +22852,7 @@ var CardRegistryCard = function CardRegistryCard(_ref2) {
     extraStyles: "width: 100%;"
   }))))));
 };
-var CardRegistryCard$1 = themeComponent(withWindowSize(CardRegistryCard), "CardRegistryCard", fallbackValues$d);
+var CardRegistryCard$1 = themeComponent(withWindowSize(CardRegistryCard), "CardRegistryCard", fallbackValues$e);
 
 var cardRegistry = {
   accounts: function accounts(props) {
@@ -22751,7 +22884,7 @@ var cardRegistry = {
   }
 };
 
-var backgroundColor$3 = {
+var backgroundColor$4 = {
   "default": "".concat(TRANSPARENT)
 };
 var textFontSize = {
@@ -22790,8 +22923,8 @@ var checkedStyles = {
 var defaultStyles = {
   "default": "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(STORM_GREY, ";\n")
 };
-var fallbackValues$e = {
-  backgroundColor: backgroundColor$3,
+var fallbackValues$f = {
+  backgroundColor: backgroundColor$4,
   textFontSize: textFontSize,
   textFontWeight: textFontWeight,
   textLineHeight: textLineHeight,
@@ -22946,7 +23079,7 @@ var Checkbox = function Checkbox(_ref4) {
     extraStyles: textExtraStyles ? "".concat(textExtraStyles, " ").concat(disabled && "color: #6e727e; background-color: #f7f7f7;", " ") : "margin-left: 1rem ".concat(disabled && "color: #6e727e; background-color: #f7f7f7;")
   }, title)));
 };
-var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$e, "default");
+var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$f, "default");
 
 var listBackgroundColor = {
   "default": "".concat(ATHENS_GREY),
@@ -22972,7 +23105,7 @@ var radioButtonInactive = {
   "default": "".concat(GHOST_GREY),
   disabled: "".concat(GHOST_GREY)
 };
-var fallbackValues$f = {
+var fallbackValues$g = {
   listBackgroundColor: listBackgroundColor,
   listItemColor: listItemColor,
   listItemBackgroundColor: listItemBackgroundColor,
@@ -23139,7 +23272,7 @@ var CheckboxList = function CheckboxList(_ref2) {
     });
   })));
 };
-var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$f, "default");
+var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$g, "default");
 
 var DropdownIcon = function DropdownIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -24476,7 +24609,7 @@ exportTypedArrayMethod$1('at', function at(index) {
 var selectedColor = "".concat(MATISSE_BLUE);
 var hoverColor$3 = "".concat(HOVER_LIGHT_BLUE);
 var focusColor = "".concat(MATISSE_BLUE_DARK);
-var fallbackValues$g = {
+var fallbackValues$h = {
   selectedColor: selectedColor,
   hoverColor: hoverColor$3,
   focusColor: focusColor
@@ -24865,7 +24998,7 @@ var Dropdown = function Dropdown(_ref13) {
     }, choice.text)));
   }))) : /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
-var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$g);
+var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$h);
 
 var SelectContainer = styled__default.div.withConfig({
   displayName: "FormSelectstyled__SelectContainer",
@@ -24916,11 +25049,11 @@ var borderColor = {
   "default": "".concat(GREY_CHATEAU),
   disabled: "".concat(GREY_CHATEAU)
 };
-var lineHeight$1 = {
+var lineHeight$2 = {
   "default": "1rem",
   disabled: "1rem"
 };
-var fontSize$4 = {
+var fontSize$5 = {
   "default": "0.875rem",
   disabled: "0.875rem"
 };
@@ -24928,7 +25061,7 @@ var errorFontSize = {
   "default": "0.75rem",
   disabled: "0.75rem"
 };
-var fontWeight$2 = {
+var fontWeight$3 = {
   "default": "".concat(FONT_WEIGHT_REGULAR),
   disabled: "".concat(FONT_WEIGHT_REGULAR)
 };
@@ -24936,17 +25069,17 @@ var hoverFocusStyles = {
   "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6D717E;"
 };
-var fallbackValues$h = {
+var fallbackValues$i = {
   linkColor: linkColor$1,
   formBackgroundColor: formBackgroundColor,
   inputBackgroundColor: inputBackgroundColor,
   color: color$6,
   labelColor: labelColor,
   borderColor: borderColor,
-  lineHeight: lineHeight$1,
-  fontSize: fontSize$4,
+  lineHeight: lineHeight$2,
+  fontSize: fontSize$5,
   errorFontSize: errorFontSize,
-  fontWeight: fontWeight$2,
+  fontWeight: fontWeight$3,
   hoverFocusStyles: hoverFocusStyles
 };
 
@@ -25048,7 +25181,7 @@ var FormSelect = function FormSelect(_ref) {
     extraStyles: "height: ".concat(themeValues.lineHeight, ";")
   })));
 };
-var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$h, "default");
+var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$i, "default");
 
 var options = [{
   text: "Afghanistan",
@@ -25847,7 +25980,7 @@ var DetailText = styled__default.p.withConfig({
 
 // Comments assume desktop base font size of 16px, mobile base font size of 14px
 
-var fontSize$5 = {
+var fontSize$6 = {
   large: "1.125rem",
   // 18px (at base font size of 16)
   regular: "1rem",
@@ -25871,9 +26004,9 @@ var mobileFontSize$1 = {
   // 12px
   extraSmall: "0.71428rem" // 10px
 };
-var fallbackValues$i = {
+var fallbackValues$j = {
   fontFamily: fontFamily$4,
-  fontSize: fontSize$5
+  fontSize: fontSize$6
 };
 var mobileFallbackValues$1 = {
   fontFamily: fontFamily$4,
@@ -25912,7 +26045,7 @@ var _excluded$q = ["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$i;
+var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$j;
 var Detail = function Detail(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -25948,11 +26081,11 @@ var Detail = function Detail(_ref) {
 };
 var Detail$1 = themeComponent(Detail, "Detail", fallbacks$1, "regular");
 
-var backgroundColor$4 = WHITE;
-var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
-var fallbackValues$j = {
-  backgroundColor: backgroundColor$4,
-  boxShadow: boxShadow
+var backgroundColor$5 = WHITE;
+var boxShadow$1 = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
+var fallbackValues$k = {
+  backgroundColor: backgroundColor$5,
+  boxShadow: boxShadow$1
 };
 
 var DisplayBox = function DisplayBox(_ref) {
@@ -25973,7 +26106,7 @@ var DisplayBox = function DisplayBox(_ref) {
     dataQa: dataQa
   }, children));
 };
-var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$j);
+var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$k);
 
 /* 
   Hook that assigns a click event listener to the main document element
@@ -26080,7 +26213,7 @@ var index$4 = /*#__PURE__*/Object.freeze({
 var hoverColor$4 = "#116285";
 var activeColor$4 = "#0E506D";
 var popoverTriggerColor = "#15749D";
-var fallbackValues$k = {
+var fallbackValues$l = {
   hoverColor: hoverColor$4,
   activeColor: activeColor$4,
   popoverTriggerColor: popoverTriggerColor
@@ -26230,7 +26363,7 @@ var Popover = function Popover(_ref) {
     extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
   })));
 };
-var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$k);
+var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$l);
 
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
@@ -26603,11 +26736,11 @@ var borderColor$1 = {
   "default": "".concat(STORM_GREY),
   disabled: "".concat(STORM_GREY)
 };
-var lineHeight$2 = {
+var lineHeight$3 = {
   "default": "1rem",
   disabled: "1rem"
 };
-var fontSize$6 = {
+var fontSize$7 = {
   "default": "0.875rem",
   disabled: "0.875rem"
 };
@@ -26615,7 +26748,7 @@ var errorFontSize$1 = {
   "default": "0.75rem",
   disabled: "0.75rem"
 };
-var fontWeight$3 = {
+var fontWeight$4 = {
   "default": "".concat(FONT_WEIGHT_REGULAR),
   disabled: "".concat(FONT_WEIGHT_REGULAR)
 };
@@ -26626,17 +26759,17 @@ var hoverFocusStyles$1 = {
 var formFooterPanel = {
   "default": "".concat(INFO_BLUE)
 };
-var fallbackValues$l = {
+var fallbackValues$m = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
   inputBackgroundColor: inputBackgroundColor$1,
   color: color$7,
   labelColor: labelColor$1,
   borderColor: borderColor$1,
-  lineHeight: lineHeight$2,
-  fontSize: fontSize$6,
+  lineHeight: lineHeight$3,
+  fontSize: fontSize$7,
   errorFontSize: errorFontSize$1,
-  fontWeight: fontWeight$3,
+  fontWeight: fontWeight$4,
   hoverFocusStyles: hoverFocusStyles$1,
   formFooterPanel: formFooterPanel
 };
@@ -26846,7 +26979,7 @@ var FormInput = function FormInput(_ref15) {
     padding: "0 0 0 auto"
   }, decorator)));
 };
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$l, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$m, "default");
 
 var _excluded$s = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
@@ -26894,7 +27027,7 @@ var FormContainer = function FormContainer(_ref) {
     borderRadius: "4px"
   }, rest), children);
 };
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$l, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$m, "default");
 
 var FormFooterPanel = function FormFooterPanel(_ref) {
   var themeValues = _ref.themeValues,
@@ -26915,9 +27048,9 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
     text: linkText
   })));
 };
-var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$l, "default");
+var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$m, "default");
 
-var fontSize$7 = {
+var fontSize$8 = {
   "default": "1rem",
   radio: "1.0625rem"
 };
@@ -26929,8 +27062,8 @@ var color$8 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$m = {
-  fontSize: fontSize$7,
+var fallbackValues$n = {
+  fontSize: fontSize$8,
   padding: padding$1,
   color: color$8
 };
@@ -26971,11 +27104,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
     dataQa: "".concat(qaPrefix, "-3")
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$m, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$n, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$n = {
+var fallbackValues$o = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -27013,11 +27146,11 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
     extraStyles: "font-style: italic;"
   }, "Autopay Enabled")));
 };
-var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$n);
+var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$o);
 
 var textColor$2 = "".concat(CHARADE_GREY);
 var autopayTextColor$1 = "".concat(REGENT_GREY);
-var fallbackValues$o = {
+var fallbackValues$p = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
 };
@@ -27109,7 +27242,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
     extraStyles: "font-style: italic;"
   }, "Autopay Enabled")));
 };
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$o);
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$p);
 
 var Hamburger = styled__default.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -27182,7 +27315,7 @@ var fontFamily$5 = {
   primary: "Public Sans",
   secondary: "Open Sans"
 };
-var fontSize$8 = {
+var fontSize$9 = {
   h1: "2.25rem",
   h2: "2rem",
   h3: "1.75rem",
@@ -27190,9 +27323,9 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$p = {
+var fallbackValues$q = {
   fontFamily: fontFamily$5,
-  fontSize: fontSize$8
+  fontSize: fontSize$9
 };
 
 var _excluded$v = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
@@ -27229,7 +27362,7 @@ var Heading = function Heading(_ref) {
     "data-qa": dataQa
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
-var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$p, "h1");
+var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$q, "h1");
 
 var Image = styled__default.img.withConfig({
   displayName: "ImageBoxstyled__Image",
@@ -27348,7 +27481,7 @@ var Jumbo = function Jumbo(_ref) {
 };
 var Jumbo$1 = withWindowSize(Jumbo);
 
-var fontWeight$4 = {
+var fontWeight$5 = {
   // v1 variants
   "default": "600",
   pS: "600",
@@ -27364,8 +27497,8 @@ var fontWeight$4 = {
   // fontsize Detail regular
   large: "700" // fontsize Title small
 };
-var fallbackValues$q = {
-  fontWeight: fontWeight$4
+var fallbackValues$r = {
+  fontWeight: fontWeight$5
 };
 
 var LabeledAmountV1 = function LabeledAmountV1(_ref) {
@@ -27423,7 +27556,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
 };
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$q, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$r, "default");
 
 var weightTitle = {
   "default": "600",
@@ -27433,7 +27566,7 @@ var detailVariant = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$r = {
+var fallbackValues$s = {
   weightTitle: weightTitle,
   detailVariant: detailVariant
 };
@@ -27481,10 +27614,10 @@ var LineItem = function LineItem(_ref) {
     childGap: "0.25rem"
   }, visibleCustomAttrs));
 };
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$r, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$s, "default");
 
 var color$9 = "#15749D";
-var fallbackValues$s = {
+var fallbackValues$t = {
   color: color$9
 };
 
@@ -27540,7 +27673,7 @@ var Spinner$1 = function Spinner(_ref6) {
     strokeWidth: "6"
   })));
 };
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$s);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$t);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -27800,7 +27933,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$t = {
+var fallbackValues$u = {
   color: color$a,
   height: height$1
 };
@@ -27906,13 +28039,13 @@ var Placeholder = function Placeholder(_ref2) {
     extraStyles: "padding: 0 0 0 8px; text-align: center;"
   }, text)))))))))));
 };
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$t, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$u, "default");
 
-var backgroundColor$5 = {
+var backgroundColor$6 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$u = {
-  backgroundColor: backgroundColor$5
+var fallbackValues$v = {
+  backgroundColor: backgroundColor$6
 };
 
 var ProcessingFee = function ProcessingFee(_ref) {
@@ -27938,11 +28071,11 @@ var ProcessingFee = function ProcessingFee(_ref) {
     showQuitLink: false
   }));
 };
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$u, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$v, "default");
 
 var activeColor$5 = MATISSE_BLUE;
 var inactiveBorderColor = GREY_CHATEAU;
-var fallbackValues$v = {
+var fallbackValues$w = {
   inactiveBorderColor: inactiveBorderColor,
   activeColor: activeColor$5
 };
@@ -28025,11 +28158,11 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     inactiveBorderColor: themeValues.inactiveBorderColor
   }), labelText));
 };
-var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$v);
+var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$w);
 
 var activeColor$6 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(STORM_GREY);
-var fallbackValues$w = {
+var fallbackValues$x = {
   activeColor: activeColor$6,
   inactiveColor: inactiveColor
 };
@@ -28134,12 +28267,12 @@ var RadioButton$1 = function RadioButton(_ref2) {
     borderRadius: "8px"
   })));
 };
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$w);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$x);
 
 var border$2 = {
   "default": "1px solid #caced8"
 };
-var fallbackValues$x = {
+var fallbackValues$y = {
   border: border$2
 };
 
@@ -28212,7 +28345,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
     });
   }))));
 };
-var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$x, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$y, "default");
 
 var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU)
@@ -28220,7 +28353,7 @@ var borderColor$2 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$y = {
+var fallbackValues$z = {
   borderColor: borderColor$2,
   borderSize: borderSize
 };
@@ -28238,7 +28371,7 @@ var SolidDivider = function SolidDivider(_ref) {
     borderWidthOverride: "0px 0px ".concat(borderSize || themeValues.borderSize, " 0px")
   });
 };
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$y, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$z, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -38824,7 +38957,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$z = {
+var fallbackValues$A = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   white: white,
@@ -38996,7 +39129,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     color: CHARADE_GREY
   }, label))));
 };
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$z);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$A);
 
 var background$2 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -39038,12 +39171,12 @@ var TypeaheadInput = function TypeaheadInput(_ref) {
   }));
 };
 
-var backgroundColor$6 = WHITE;
+var backgroundColor$7 = WHITE;
 var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
-var fallbackValues$A = {
-  backgroundColor: backgroundColor$6,
+var fallbackValues$B = {
+  backgroundColor: backgroundColor$7,
   imageBackgroundColor: imageBackgroundColor,
   headerBackgroundColor: headerBackgroundColor,
   headerColor: headerColor
@@ -39066,7 +39199,7 @@ var CardImage = styled__default.img.withConfig({
 var titleColor = BRIGHT_GREY;
 var titleWeight = FONT_WEIGHT_BOLD;
 var textColor$3 = BRIGHT_GREY;
-var fallbackValues$B = {
+var fallbackValues$C = {
   titleColor: titleColor,
   titleWeight: titleWeight,
   textColor: textColor$3
@@ -39090,7 +39223,7 @@ var CardText = function CardText(_ref) {
     color: themeValues.textColor
   }, text))));
 };
-var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$B);
+var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$C);
 
 var CardHeader = function CardHeader(_ref) {
   var backgroundColor = _ref.backgroundColor,
@@ -39192,12 +39325,12 @@ var Card = function Card(_ref) {
     titleVariant: titleVariant
   }), children)))));
 };
-var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$A);
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$B);
 
 var fontFamily$6 = "Public Sans, sans-serif";
 var activeColor$7 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
-var fallbackValues$C = {
+var fallbackValues$D = {
   fontFamily: fontFamily$6,
   activeColor: activeColor$7,
   linkColor: linkColor$3
@@ -39226,7 +39359,7 @@ var NavTab = function NavTab(_ref) {
     extraStyles: "\n          border-bottom: 3px solid transparent;\n          font-family: ".concat(themeValues.fontFamily, ";\n          text-decoration: none;\n          ").concat(isActive && !isMobile ? border : "none", ";\n          &:hover {\n            text-decoration: none;\n            color: ").concat(themeValues.activeColor, ";\n            ").concat(isMobile ? "" : "".concat(border), "\n          };\n          padding: 1.25rem 0;\n        ")
   }, label));
 };
-var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$C);
+var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$D);
 
 var NavTabs = function NavTabs(_ref) {
   var tabsConfig = _ref.tabsConfig,
@@ -39315,10 +39448,10 @@ var TableCell_styled = styled__default.td.withConfig({
   return extraStyles;
 });
 
-var backgroundColor$7 = ALABASTER_WHITE;
+var backgroundColor$8 = ALABASTER_WHITE;
 var borderColor$3 = GREY_CHATEAU;
-var fallbackValues$D = {
-  backgroundColor: backgroundColor$7,
+var fallbackValues$E = {
+  backgroundColor: backgroundColor$8,
   borderColor: borderColor$3
 };
 
@@ -39339,7 +39472,7 @@ var StyledTableHead = styled__default.thead.withConfig({
 
 var borderColor$4 = GREY_CHATEAU;
 var hoverBackgroundColor$1 = HOVER_LIGHT_BLUE;
-var fallbackValues$E = {
+var fallbackValues$F = {
   borderColor: borderColor$4,
   hoverBackgroundColor: hoverBackgroundColor$1
 };
@@ -39378,7 +39511,7 @@ var TableRow = function TableRow(_ref) {
     hoverBackgroundColor: themeValues.hoverBackgroundColor
   }, props), children);
 };
-var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$E);
+var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$F);
 
 var TableHead = function TableHead(_ref) {
   var children = _ref.children,
@@ -39393,7 +39526,7 @@ var TableHead = function TableHead(_ref) {
     hoverEffect: false
   }, children));
 };
-var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$D);
+var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$E);
 
 var TableHeading_styled = styled__default.th.withConfig({
   displayName: "TableHeadingstyled",
@@ -40227,9 +40360,9 @@ AddressForm.reducer = reducer;
 AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
-var backgroundColor$8 = "#ebeffb";
-var fallbackValues$F = {
-  backgroundColor: backgroundColor$8
+var backgroundColor$9 = "#ebeffb";
+var fallbackValues$G = {
+  backgroundColor: backgroundColor$9
 };
 
 var Banner = function Banner(_ref) {
@@ -40277,7 +40410,7 @@ var Banner = function Banner(_ref) {
     extraStyles: isMobile && "> svg { width: 176px; }"
   }, /*#__PURE__*/React__default.createElement(Image, null))));
 };
-var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$F);
+var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$G);
 
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -40411,7 +40544,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor$1 = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$G = {
+var fallbackValues$H = {
   titleColor: titleColor$1,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -40536,7 +40669,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     "aria-labelledby": "".concat(id, "-button")
   }, children))));
 };
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$G);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$H);
 
 var ClipboardIcon = function ClipboardIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -40569,7 +40702,7 @@ var ClipboardIcon = function ClipboardIcon(_ref) {
     fill: themeValues.singleIconColor
   })));
 };
-var ClipboardIcon$1 = themeComponent(ClipboardIcon, "Icons", fallbackValues$3, "primary");
+var ClipboardIcon$1 = themeComponent(ClipboardIcon, "Icons", fallbackValues$5, "primary");
 
 /*
 This component will render `content` and a clipboard icon.
@@ -41112,7 +41245,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
 var footerBackgroundColor = BRIGHT_GREY;
 var subfooterBackgroundColor = STORM_GREY;
-var fallbackValues$H = {
+var fallbackValues$I = {
   footerBackgroundColor: footerBackgroundColor,
   subfooterBackgroundColor: subfooterBackgroundColor
 };
@@ -41143,7 +41276,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
     rightContent: rightSubfooterContent
   }));
 };
-var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$H);
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$I);
 
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var fields = _ref.fields,
@@ -41189,10 +41322,10 @@ ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
-var backgroundColor$9 = "#182848";
-var fallbackValues$I = {
+var backgroundColor$a = "#182848";
+var fallbackValues$J = {
   textColor: textColor$4,
-  backgroundColor: backgroundColor$9
+  backgroundColor: backgroundColor$a
 };
 
 // this component needs some fix'n
@@ -41249,7 +41382,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     }, t));
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
-var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$I);
+var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$J);
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -42714,7 +42847,7 @@ var disabledColor$1 = {
 var activeBackgroundColor$1 = {
   primary: CORNFLOWER_BLUE
 };
-var backgroundColor$a = {
+var backgroundColor$b = {
   primary: LINK_WATER
 };
 var borderColor$5 = {
@@ -42723,12 +42856,12 @@ var borderColor$5 = {
 var color$b = {
   primary: ROYAL_BLUE_VIVID
 };
-var fallbackValues$J = {
+var fallbackValues$K = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
   disabledColor: disabledColor$1,
   activeBackgroundColor: activeBackgroundColor$1,
-  backgroundColor: backgroundColor$a,
+  backgroundColor: backgroundColor$b,
   borderColor: borderColor$5,
   color: color$b
 };
@@ -42844,7 +42977,7 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: "margin-right: auto;"
   }), showRight && !!rightContent && rightContent))));
 };
-var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$J, "primary");
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$K, "primary");
 
 var LoginForm = function LoginForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -46483,135 +46616,6 @@ var Modal$1 = function Modal(_ref) {
   }))))))))), children);
 };
 
-var fontSize$9 = {
-  "default": "1.375rem",
-  largeTitle: "1.75rem",
-  small: "1.25rem"
-};
-var fontWeight$5 = {
-  "default": "600",
-  largeTitle: "700",
-  small: "600"
-};
-var fontColor = {
-  "default": CHARADE_GREY,
-  largeTitle: CHARADE_GREY,
-  small: CHARADE_GREY
-};
-var lineHeight$3 = {
-  "default": "2rem",
-  largeTitle: "2rem",
-  small: "2rem"
-};
-var textAlign = {
-  "default": "left",
-  largeTitle: "left",
-  small: "left"
-};
-var titleType = {
-  "default": "h5",
-  largeTitle: "h1",
-  small: "h6"
-};
-var titleSpacing = {
-  "default": "0.5rem",
-  largeTitle: "1.125rem",
-  small: "0.5rem"
-};
-var boxShadow$1 = {
-  "default": "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-  largeTitle: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-  small: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
-};
-var borderRadius = {
-  "default": "0.25rem",
-  largeTitle: "0.25rem",
-  small: "0.25rem"
-};
-var backgroundColor$b = {
-  "default": WHITE,
-  largeTitle: WHITE,
-  small: WHITE
-};
-var fallbackValues$K = {
-  fontSize: fontSize$9,
-  fontWeight: fontWeight$5,
-  fontColor: fontColor,
-  lineHeight: lineHeight$3,
-  textAlign: textAlign,
-  titleType: titleType,
-  titleSpacing: titleSpacing,
-  boxShadow: boxShadow$1,
-  borderRadius: borderRadius,
-  backgroundColor: backgroundColor$b
-};
-
-/*
-  New (01/22) - updated <Module /> to use <Title /> atom
-  Because <Title /> decouples size from element, also gave <Module />
-  two new props: "as" and "fontSize"
-
-  When present, <Module /> will use those values to dictate element type and font size.
-
-  For backwards compatability, <Module /> still computes a themed font size and element type based on old
-  <Heading /> variants. If "fontSize" or "as" is undefined, <Module /> will use themed values.
-*/
-
-var Module = function Module(_ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "default" : _ref$variant,
-    as = _ref.as,
-    disabled = _ref.disabled,
-    heading = _ref.heading,
-    rightTitleContent = _ref.rightTitleContent,
-    _ref$titleID = _ref.titleID,
-    titleID = _ref$titleID === void 0 ? "" : _ref$titleID,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? "1rem" : _ref$spacing,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? "0" : _ref$padding,
-    _ref$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? "0" : _ref$margin,
-    _ref$spacingBottom = _ref.spacingBottom,
-    spacingBottom = _ref$spacingBottom === void 0 ? "2.5rem" : _ref$spacingBottom,
-    fontSize = _ref.fontSize,
-    themeValues = _ref.themeValues,
-    children = _ref.children;
-  var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
-  var computedFontSize = fontSize || themedFontSize;
-  var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
-  var computedElemType = as || themedElemType;
-  var disabledStyles = "opacity: 0.40;";
-  var headingText = /*#__PURE__*/React__default.createElement(Title$1, {
-    weight: themeValues.fontWeight,
-    color: themeValues.fontColor,
-    margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
-    textAlign: themeValues.textAlign,
-    as: computedElemType,
-    extraStyles: "font-size: ".concat(computedFontSize, ";"),
-    id: titleID
-  }, heading);
-  return /*#__PURE__*/React__default.createElement(Box, {
-    "aria-disabled": disabled,
-    extraStyles: disabled && disabledStyles,
-    padding: "0",
-    role: "group"
-  }, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: "space-between",
-    align: "center",
-    nowrap: true
-  }, headingText, rightTitleContent), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 0 ".concat(spacingBottom),
-    extraStyles: "margin: ".concat(margin)
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: padding,
-    background: themeValues.backgroundColor,
-    borderRadius: themeValues.borderRadius,
-    boxShadow: themeValues.boxShadow
-  }, children)));
-};
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$K, "default"));
-
 var backgroundColor$c = {
   profile: "#3b414d",
   cms: "#3b414d"