@thecb/components 4.0.9 → 4.0.12

package/dist/index.cjs.js

@@ -6119,15 +6119,17 @@ var Text = function Text(_ref) {
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
       hoverStyles = _ref.hoverStyles,
       onClick = _ref.onClick,
+      as = _ref.as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "dataQa", "children"]);
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "as", "dataQa", "children"]);
 
   return /*#__PURE__*/React__default.createElement(TextSpan, _extends({
     fontSize: themeValues.fontSize,
     weight: weight,
     color: color,
     fontFamily: themeValues.fontFamily,
+    as: as,
     extraStyles: extraStyles,
     hoverStyles: hoverStyles,
     onClick: onClick,
@@ -12630,7 +12632,7 @@ var ButtonWithAction = function ButtonWithAction(_ref) {
       children = _ref.children;
   var themeContext = React.useContext(styled.ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
-  var loadingExtraStyles = "".concat(extraStyles, "; padding-top: 0.75rem; padding-bottom: 0.75rem;");
+  var loadingExtraStyles = "".concat(extraStyles, "; padding-top: 0.75rem; padding-bottom: 0.75rem; height: ").concat(themeContext.isMobile ? "50px" : "57px", " ");
   var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var disabledStyles = "\n    background-clor: #6E727E;\n    border-color: #6E727E;\n    color: #FFFFFF;\n    &:focus {\n      box-shadow: 0 0 10px #6E727E;\n      outline: none;\n    }\n  ";
@@ -14337,7 +14339,7 @@ var Heading = function Heading(_ref) {
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "h1" : _ref$variant,
       _ref$as = _ref.as,
-      as = _ref$as === void 0 ? "h1" : _ref$as,
+      as = _ref$as === void 0 ? variant : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"]);
@@ -16264,9 +16266,88 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
   })));
 };
 
+var fontFamily$3 = {
+  p: "Public Sans",
+  pL: "Public Sans",
+  pS: "Public Sans",
+  pXS: "Public Sans",
+  pXXS: "Public Sans",
+  pXL: "Public Sans"
+};
+var fontSize$4 = {
+  p: "1rem",
+  pL: "1.125rem",
+  pS: "0.875rem",
+  pXS: "0.75rem",
+  pXXS: "0.65rem",
+  pXL: "1.5rem"
+};
+var fallbackValues$9 = {
+  fontFamily: fontFamily$3,
+  fontSize: fontSize$4
+};
+
+function _templateObject$j() {
+  var data = _taggedTemplateLiteral(["\n  --font-size: ", ";\n  font-size: var(--font-size);\n  line-height: calc(1.5 * var(--font-size));\n  font-weight: ", ";\n  font-family: ", ";\n  color: ", ";\n  margin: ", ";\n\n  ", "\n"]);
+
+  _templateObject$j = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var ParagraphText = styled__default.p(_templateObject$j(), function (_ref) {
+  var fontSize = _ref.fontSize;
+  return fontSize;
+}, function (_ref2) {
+  var weight = _ref2.weight;
+  return weight;
+}, function (_ref3) {
+  var fontFamily = _ref3.fontFamily;
+  return fontFamily;
+}, function (_ref4) {
+  var color = _ref4.color;
+  return color;
+}, function (_ref5) {
+  var margin = _ref5.margin;
+  return margin;
+}, function (_ref6) {
+  var extraStyles = _ref6.extraStyles;
+  return extraStyles;
+});
+
+var Paragraph = function Paragraph(_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,
+      _ref$extraStyles = _ref.extraStyles,
+      extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
+      dataQa = _ref.dataQa,
+      children = _ref.children,
+      as = _ref.as,
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"]);
+
+  return /*#__PURE__*/React__default.createElement(ParagraphText, _extends({
+    weight: weight,
+    color: color,
+    margin: margin,
+    fontFamily: themeValues.fontFamily,
+    fontSize: themeValues.fontSize,
+    as: as,
+    extraStyles: extraStyles,
+    "data-qa": dataQa
+  }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
+};
+
+var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$9, "p");
+
 var backgroundColor$1 = WHITE;
 var iconBackgroundColor = GRECIAN_GREY;
-var fallbackValues$9 = {
+var fallbackValues$a = {
   backgroundColor: backgroundColor$1,
   iconBackgroundColor: iconBackgroundColor
 };
@@ -16376,7 +16457,7 @@ var Card = function Card(_ref2) {
     borderRadius: "4px",
     boxShadow: " 0px 1px 10px 0px rgb(246, 246, 249), 0px 2px 5px 0px rgb(202, 206, 216)",
     padding: "0",
-    maxWidth: "100%",
+    maxWidth: variant !== "vertical" ? "100%" : "306px",
     minHeight: "100%",
     minWidth: variant !== "vertical" && "300px"
   }, /*#__PURE__*/React__default.createElement(Cover, {
@@ -16384,7 +16465,7 @@ var Card = function Card(_ref2) {
     fillCenter: true
   }, /*#__PURE__*/React__default.createElement(Stack, {
     direction: variant === "vertical" ? "column" : "row",
-    justify: variant === "vertical" && "center",
+    justify: variant === "vertical" && "space-evenly",
     fullHeight: true,
     childGap: "0"
   }, icon && /*#__PURE__*/React__default.createElement(Box, {
@@ -16399,7 +16480,7 @@ var Card = function Card(_ref2) {
   }, renderIcon(icon)))), /*#__PURE__*/React__default.createElement(CardVariantSwitcher, {
     variant: variant
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.5rem 1rem",
+    padding: "1rem",
     width: "100%",
     extraStyles: "flex-grow: 1; width: 100%;"
   }, /*#__PURE__*/React__default.createElement(Cover, {
@@ -16407,8 +16488,9 @@ var Card = function Card(_ref2) {
     fillCenter: true
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
-  }, /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h6"
+  }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    variant: "p",
+    weight: "600"
   }, heading), /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS"
   }, text)))), /*#__PURE__*/React__default.createElement(Box, {
@@ -16423,7 +16505,7 @@ var Card = function Card(_ref2) {
   }))))));
 };
 
-var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$9);
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$a);
 
 var cardRegistry = {
   accounts: function accounts(props) {
@@ -16431,7 +16513,7 @@ var cardRegistry = {
       icon: "accounts",
       heading: "Add an Account",
       buttonText: "Add Account",
-      text: "Add your accounts to this profile to make your payments simple.",
+      text: "Find and attach your accounts to make your payments simple.",
       cardAction: "/profile/accounts"
     }, props));
   },
@@ -16440,16 +16522,16 @@ var cardRegistry = {
       icon: "properties",
       heading: "Add a Property",
       buttonText: "Add Property",
-      text: "Add a home, car, or other types of personal or business property.",
+      text: "Find and attach your properties to make your payments simple.",
       cardAction: "/profile/properties"
     }, props));
   },
   payment: function payment(props) {
     return /*#__PURE__*/React__default.createElement(Card$1, _extends({
       icon: "payment",
-      heading: "Add a Payment Method",
-      buttonText: "Add Payment Method",
-      text: "Save cards and/or bank accounts to your profile for fast future payments.",
+      heading: "Configure Your Settings",
+      buttonText: "Configure Settings",
+      text: "Add your personal information and payment methods to make fast payments.",
       cardAction: "/profile/settings"
     }, props));
   }
@@ -16491,7 +16573,7 @@ var checkedStyles = {
 var defaultStyles = {
   "default": "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(GHOST_GREY, ";\n")
 };
-var fallbackValues$a = {
+var fallbackValues$b = {
   backgroundColor: backgroundColor$2,
   textFontSize: textFontSize,
   textFontWeight: textFontWeight,
@@ -16606,16 +16688,16 @@ function _templateObject2$8() {
   return data;
 }
 
-function _templateObject$j() {
+function _templateObject$k() {
   var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: middle;\n"]);
 
-  _templateObject$j = function _templateObject() {
+  _templateObject$k = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var CheckboxContainer = styled__default.div(_templateObject$j());
+var CheckboxContainer = styled__default.div(_templateObject$k());
 var CheckboxLabelContainer = styled__default.label(_templateObject2$8());
 var CheckboxIcon = styled__default.svg(_templateObject3$3(), function (_ref) {
   var disabled = _ref.disabled,
@@ -16696,7 +16778,7 @@ var Checkbox = function Checkbox(_ref4) {
   }, title)));
 };
 
-var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$a, "default");
+var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$b, "default");
 
 var listBackgroundColor = {
   "default": "".concat(ATHENS_GREY),
@@ -16722,7 +16804,7 @@ var radioButtonInactive = {
   "default": "".concat(GHOST_GREY),
   disabled: "".concat(GHOST_GREY)
 };
-var fallbackValues$b = {
+var fallbackValues$c = {
   listBackgroundColor: listBackgroundColor,
   listItemColor: listItemColor,
   listItemBackgroundColor: listItemBackgroundColor,
@@ -16750,10 +16832,10 @@ function _templateObject2$9() {
   return data;
 }
 
-function _templateObject$k() {
+function _templateObject$l() {
   var data = _taggedTemplateLiteral(["\n  height: 24px;\n  width: 24px;\n  border: 1px solid\n    ", ";\n  border-radius: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 10px;\n  min-width: 24px;\n  min-height: 24px;\n"]);
 
-  _templateObject$k = function _templateObject() {
+  _templateObject$l = function _templateObject() {
     return data;
   };
 
@@ -16765,7 +16847,7 @@ var defaultTheme = {
     inactiveColor: PEWTER_GREY$1
   }
 };
-var RadioButtonBorder = styled__default.div(_templateObject$k(), function (_ref) {
+var RadioButtonBorder = styled__default.div(_templateObject$l(), function (_ref) {
   var isSelected = _ref.isSelected,
       theme = _ref.theme;
   return isSelected ? theme.accentColor : theme.inactiveColor;
@@ -16807,16 +16889,16 @@ function _templateObject2$a() {
   return data;
 }
 
-function _templateObject$l() {
+function _templateObject$m() {
   var data = _taggedTemplateLiteral(["\n  width: 2rem;\n"]);
 
-  _templateObject$l = function _templateObject() {
+  _templateObject$m = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var CheckboxItemIcon = styled__default.img(_templateObject$l());
+var CheckboxItemIcon = styled__default.img(_templateObject$m());
 var HiddenCheckboxInput = styled__default.input(_templateObject2$a());
 var CheckboxLabel = styled__default.label(_templateObject3$4());
 
@@ -16926,7 +17008,7 @@ var CheckboxList = function CheckboxList(_ref2) {
   })));
 };
 
-var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$b, "default");
+var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$c, "default");
 
 var DropdownIcon = function DropdownIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -16956,7 +17038,7 @@ var DropdownIcon = function DropdownIcon() {
 
 var selectedColor = "".concat(MATISSE_BLUE);
 var hoverColor$3 = "".concat(HOVER_LIGHT_BLUE);
-var fallbackValues$c = {
+var fallbackValues$d = {
   selectedColor: selectedColor,
   hoverColor: hoverColor$3
 };
@@ -16991,16 +17073,16 @@ function _templateObject2$b() {
   return data;
 }
 
-function _templateObject$m() {
+function _templateObject$n() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  transition: transform 0.3s ease;\n  ", "\n"]);
 
-  _templateObject$m = function _templateObject() {
+  _templateObject$n = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var IconWrapper = styled__default.div(_templateObject$m(), function (_ref) {
+var IconWrapper = styled__default.div(_templateObject$n(), function (_ref) {
   var open = _ref.open;
   return open ? "transform: rotate(-180deg)" : "";
 });
@@ -17233,7 +17315,7 @@ var Dropdown = function Dropdown(_ref7) {
   }))) : /*#__PURE__*/React__default.createElement(React.Fragment, null));
 };
 
-var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$c);
+var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$d);
 
 function _templateObject4$3() {
   var data = _taggedTemplateLiteral([""]);
@@ -17265,16 +17347,16 @@ function _templateObject2$c() {
   return data;
 }
 
-function _templateObject$n() {
+function _templateObject$o() {
   var data = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n"]);
 
-  _templateObject$n = function _templateObject() {
+  _templateObject$o = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var SelectContainer = styled__default.div(_templateObject$n());
+var SelectContainer = styled__default.div(_templateObject$o());
 var SelectLabel = styled__default.label(_templateObject2$c(), function (_ref) {
   var field = _ref.field,
       showErrors = _ref.showErrors;
@@ -18111,7 +18193,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
 
 var backgroundColor$3 = WHITE;
 var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
-var fallbackValues$d = {
+var fallbackValues$e = {
   backgroundColor: backgroundColor$3,
   boxShadow: boxShadow
 };
@@ -18132,84 +18214,7 @@ var DisplayBox = function DisplayBox(_ref) {
   }, children));
 };
 
-var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$d);
-
-var fontFamily$3 = {
-  p: "Public Sans",
-  pL: "Public Sans",
-  pS: "Public Sans",
-  pXS: "Public Sans",
-  pXXS: "Public Sans",
-  pXL: "Public Sans"
-};
-var fontSize$4 = {
-  p: "1rem",
-  pL: "1.125rem",
-  pS: "0.875rem",
-  pXS: "0.75rem",
-  pXXS: "0.65rem",
-  pXL: "1.5rem"
-};
-var fallbackValues$e = {
-  fontFamily: fontFamily$3,
-  fontSize: fontSize$4
-};
-
-function _templateObject$o() {
-  var data = _taggedTemplateLiteral(["\n  --font-size: ", ";\n  font-size: var(--font-size);\n  line-height: calc(1.5 * var(--font-size));\n  font-weight: ", ";\n  font-family: ", ";\n  color: ", ";\n  margin: ", ";\n\n  ", "\n"]);
-
-  _templateObject$o = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var ParagraphText = styled__default.p(_templateObject$o(), function (_ref) {
-  var fontSize = _ref.fontSize;
-  return fontSize;
-}, function (_ref2) {
-  var weight = _ref2.weight;
-  return weight;
-}, function (_ref3) {
-  var fontFamily = _ref3.fontFamily;
-  return fontFamily;
-}, function (_ref4) {
-  var color = _ref4.color;
-  return color;
-}, function (_ref5) {
-  var margin = _ref5.margin;
-  return margin;
-}, function (_ref6) {
-  var extraStyles = _ref6.extraStyles;
-  return extraStyles;
-});
-
-var Paragraph = function Paragraph(_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,
-      _ref$extraStyles = _ref.extraStyles,
-      extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
-      dataQa = _ref.dataQa,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children"]);
-
-  return /*#__PURE__*/React__default.createElement(ParagraphText, _extends({
-    weight: weight,
-    color: color,
-    margin: margin,
-    fontFamily: themeValues.fontFamily,
-    fontSize: themeValues.fontSize,
-    extraStyles: extraStyles,
-    "data-qa": dataQa
-  }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
-};
-
-var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$e, "p");
+var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$e);
 
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
@@ -33411,7 +33416,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     variant: "h6",
     weight: FONT_WEIGHT_SEMIBOLD,
     color: themeValues.titleColor,
-    "aria-level": "3"
+    as: "h6"
   }, title), /*#__PURE__*/React__default.createElement(Motion, {
     variants: icon,
     style: {
@@ -33555,8 +33560,7 @@ var EditableList = function EditableList(_ref) {
     variant: "pL",
     weight: titleWeight,
     color: CHARADE_GREY,
-    extraStyles: "letter-spacing: 0.29px;",
-    "aria-level": "3"
+    extraStyles: "letter-spacing: 0.29px;"
   }, title)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
@@ -33799,8 +33803,7 @@ var TableListItem = function TableListItem(_ref) {
     isMobile: isMobile
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
-    color: CHARADE_GREY,
-    "aria-level": "3"
+    color: CHARADE_GREY
   }, title)), /*#__PURE__*/React__default.createElement(TableItemValue, {
     isMobile: isMobile
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -35201,6 +35204,7 @@ var Modal$1 = function Modal(_ref) {
   var ModalLink = _ref.ModalLink,
       hideModal = _ref.hideModal,
       continueAction = _ref.continueAction,
+      cancelAction = _ref.cancelAction,
       modalOpen = _ref.modalOpen,
       modalHeaderText = _ref.modalHeaderText,
       modalBodyText = _ref.modalBodyText,
@@ -35218,7 +35222,9 @@ var Modal$1 = function Modal(_ref) {
       defaultWrapper = _ref$defaultWrapper === void 0 ? true : _ref$defaultWrapper,
       _ref$onlyCloseButton = _ref.onlyCloseButton,
       onlyCloseButton = _ref$onlyCloseButton === void 0 ? false : _ref$onlyCloseButton,
-      maxHeight = _ref.maxHeight;
+      maxHeight = _ref.maxHeight,
+      _ref$underlayClickExi = _ref.underlayClickExits,
+      underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -35235,7 +35241,8 @@ var Modal$1 = function Modal(_ref) {
     },
     dialogStyle: {
       width: "615px"
-    }
+    },
+    underlayClickExits: underlayClickExits
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
@@ -35274,7 +35281,7 @@ var Modal$1 = function Modal(_ref) {
     extraStyles: isMobile ? "flex-grow: 1" : ""
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: "secondary",
-    action: hideModal,
+    action: cancelAction ? cancelAction : hideModal,
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: "width: 100%;"
@@ -36983,11 +36990,10 @@ var TitleModule = function TitleModule(_ref) {
     variant: "h6",
     weight: FONT_WEIGHT_SEMIBOLD,
     color: titleColor,
-    "aria-level": "2"
+    as: "h2"
   }, title), /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
-    color: subtitleColor,
-    "aria-level": "3"
+    color: subtitleColor
   }, subtitle)));
 };
 
@@ -38416,8 +38422,7 @@ var RadioSection = function RadioSection(_ref) {
       padding: section.titleIcon ? "0 0 0 8px" : "0"
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
-      color: CHARADE_GREY,
-      "aria-level": "3"
+      color: CHARADE_GREY
     }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
       childGap: "0.5rem"
     }, section.rightIcons.map(function (icon) {
@@ -39019,7 +39024,7 @@ var fallbackValues$A = {
 };
 
 function _templateObject$C() {
-  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n"]);
+  var data = _taggedTemplateLiteral(["\n  width: auto;\n  height: 215px;\n"]);
 
   _templateObject$C = function _templateObject() {
     return data;
@@ -39044,13 +39049,14 @@ var WelcomeModule = function WelcomeModule(_ref) {
   }, /*#__PURE__*/React__default.createElement(WelcomeImage, {
     src: welcomeImage
   }))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0.875rem 1.5rem",
     background: themeValues.headerBackgroundColor
   }, /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h5",
+    variant: "h6",
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
     textAlign: themeValues.textAlign,
-    "aria-level": "3"
+    as: "h6"
   }, heading)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     background: themeValues.imageBackgroundColor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.0.9",
+  "version": "4.0.12",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -82,7 +82,9 @@ const ButtonWithAction = ({
     "Button",
     variant
   );
-  const loadingExtraStyles = `${extraStyles}; padding-top: 0.75rem; padding-bottom: 0.75rem;`;
+  const loadingExtraStyles = `${extraStyles}; padding-top: 0.75rem; padding-bottom: 0.75rem; height: ${
+    themeContext.isMobile ? "50px" : "57px"
+  } `;
   const hoverStyles = `
     outline: none;
     background-color: ${themeValues.hoverBackgroundColor};

package/src/components/atoms/card/Card.js

@@ -3,7 +3,7 @@ import { ThemeContext } from "styled-components";
 import { useNavigate } from "react-router-dom";
 import { Box, Stack, Cover } from "../layouts";
 import Text from "../text";
-import Heading from "../heading";
+import Paragraph from "../paragraph";
 import ButtonWithAction from "../button-with-action";
 import { fallbackValues } from "./Card.theme";
 import { themeComponent } from "../../../util/themeUtils";
@@ -58,14 +58,14 @@ const Card = ({
       boxShadow=" 0px 1px 10px 0px rgb(246, 246, 249),
     0px 2px 5px 0px rgb(202, 206, 216)"
       padding="0"
-      maxWidth="100%"
+      maxWidth={variant !== "vertical" ? "100%" : "306px"}
       minHeight="100%"
       minWidth={variant !== "vertical" && "300px"}
     >
       <Cover singleChild fillCenter>
         <Stack
           direction={variant === "vertical" ? "column" : "row"}
-          justify={variant === "vertical" && "center"}
+          justify={variant === "vertical" && "space-evenly"}
           fullHeight
           childGap="0"
         >
@@ -92,13 +92,15 @@ const Card = ({
           )}
           <CardVariantSwitcher variant={variant}>
             <Box
-              padding="0.5rem 1rem"
+              padding="1rem"
               width="100%"
               extraStyles={`flex-grow: 1; width: 100%;`}
             >
               <Cover singleChild fillCenter>
                 <Box padding="0">
-                  <Heading variant="h6">{heading}</Heading>
+                  <Paragraph variant="p" weight="600">
+                    {heading}
+                  </Paragraph>
                   <Text variant="pS">{text}</Text>
                 </Box>
               </Cover>

package/src/components/atoms/card/index.js

@@ -7,7 +7,7 @@ export const cardRegistry = {
       icon="accounts"
       heading="Add an Account"
       buttonText="Add Account"
-      text="Add your accounts to this profile to make your payments simple."
+      text="Find and attach your accounts to make your payments simple."
       cardAction="/profile/accounts"
       {...props}
     />
@@ -17,7 +17,7 @@ export const cardRegistry = {
       icon="properties"
       heading="Add a Property"
       buttonText="Add Property"
-      text="Add a home, car, or other types of personal or business property."
+      text="Find and attach your properties to make your payments simple."
       cardAction="/profile/properties"
       {...props}
     />
@@ -25,9 +25,9 @@ export const cardRegistry = {
   payment: props => (
     <Card
       icon="payment"
-      heading="Add a Payment Method"
-      buttonText="Add Payment Method"
-      text="Save cards and/or bank accounts to your profile for fast future payments."
+      heading="Configure Your Settings"
+      buttonText="Configure Settings"
+      text="Add your personal information and payment methods to make fast payments."
       cardAction="/profile/settings"
       {...props}
     />

package/src/components/atoms/heading/Heading.js

@@ -15,7 +15,7 @@ const Heading = ({
   extraStyles = ``,
   className,
   variant = "h1",
-  as = "h1",
+  as = variant,
   dataQa,
   children,
   ...rest

package/src/components/atoms/paragraph/Paragraph.js

@@ -14,6 +14,7 @@ const Paragraph = ({
   extraStyles = ``,
   dataQa,
   children,
+  as,
   ...rest
 }) => (
   <ParagraphText
@@ -22,6 +23,7 @@ const Paragraph = ({
     margin={margin}
     fontFamily={themeValues.fontFamily}
     fontSize={themeValues.fontSize}
+    as={as}
     extraStyles={extraStyles}
     data-qa={dataQa}
     {...rest}

package/src/components/atoms/text/Text.js

@@ -13,6 +13,7 @@ const Text = ({
   extraStyles = ``,
   hoverStyles,
   onClick,
+  as,
   dataQa,
   children,
   ...rest
@@ -22,6 +23,7 @@ const Text = ({
     weight={weight}
     color={color}
     fontFamily={themeValues.fontFamily}
+    as={as}
     extraStyles={extraStyles}
     hoverStyles={hoverStyles}
     onClick={onClick}

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -86,7 +86,7 @@ const CollapsibleSection = ({
                 variant="h6"
                 weight={FONT_WEIGHT_SEMIBOLD}
                 color={themeValues.titleColor}
-                aria-level="3"
+                as="h6"
               >
                 {title}
               </Heading>

package/src/components/molecules/editable-list/EditableList.js

@@ -43,7 +43,6 @@ const EditableList = ({
             weight={titleWeight}
             color={CHARADE_GREY}
             extraStyles="letter-spacing: 0.29px;"
-            aria-level="3"
           >
             {title}
           </Paragraph>

package/src/components/molecules/editable-table/TableListItem.js

@@ -29,7 +29,7 @@ const TableListItem = ({
     <ItemWrapper>
       <EditableTableListItem isMobile={isMobile}>
         <TableItemKey isMobile={isMobile}>
-          <Text variant="pS" color={CHARADE_GREY} aria-level="3">
+          <Text variant="pS" color={CHARADE_GREY}>
             {title}
           </Text>
         </TableItemKey>

package/src/components/molecules/modal/Modal.js

@@ -24,6 +24,7 @@ const Modal = ({
   ModalLink,
   hideModal,
   continueAction,
+  cancelAction,
   modalOpen,
   modalHeaderText,
   modalBodyText,
@@ -34,7 +35,8 @@ const Modal = ({
   useDangerButton = false,
   defaultWrapper = true,
   onlyCloseButton = false,
-  maxHeight
+  maxHeight,
+  underlayClickExits = true
 }) => {
   const { isMobile } = useContext(ThemeContext);
   return (
@@ -54,6 +56,7 @@ const Modal = ({
           dialogStyle={{
             width: "615px"
           }}
+          underlayClickExits={underlayClickExits}
         >
           <Box
             padding="0"
@@ -95,7 +98,7 @@ const Modal = ({
                         >
                           <ButtonWithAction
                             variant="secondary"
-                            action={hideModal}
+                            action={cancelAction ? cancelAction : hideModal}
                             text={cancelButtonText}
                             dataQa={cancelButtonText}
                             extraStyles="width: 100%;"

package/src/components/molecules/obligation/modules/TitleModule.js

@@ -11,11 +11,11 @@ const TitleModule = ({ title, subtitle, titleColor, subtitleColor }) => (
         variant="h6"
         weight={FONT_WEIGHT_SEMIBOLD}
         color={titleColor}
-        aria-level="2"
+        as="h2"
       >
         {title}
       </Heading>
-      <Text variant="pS" color={subtitleColor} aria-level="3">
+      <Text variant="pS" color={subtitleColor}>
         {subtitle}
       </Text>
     </Stack>

package/src/components/molecules/radio-section/RadioSection.js

@@ -168,7 +168,7 @@ const RadioSection = ({
                         <Cluster align="center">{section.titleIcon}</Cluster>
                       )}
                       <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
-                        <Text variant="p" color={CHARADE_GREY} aria-level="3">
+                        <Text variant="p" color={CHARADE_GREY}>
                           {section.title}
                         </Text>
                       </Box>

package/src/components/molecules/welcome-module/WelcomeModule.js

@@ -6,8 +6,8 @@ import Heading from "../../atoms/heading";
 import { Box, Cluster } from "../../atoms/layouts";
 
 const WelcomeImage = styled.img`
-  width: 100%;
-  height: auto;
+  width: auto;
+  height: 215px;
 `;
 
 const WelcomeModule = ({ heading, isMobile, themeValues }) => {
@@ -24,13 +24,16 @@ const WelcomeModule = ({ heading, isMobile, themeValues }) => {
             </Cluster>
           </Box>
         )}
-        <Box background={themeValues.headerBackgroundColor}>
+        <Box
+          padding="0.875rem 1.5rem"
+          background={themeValues.headerBackgroundColor}
+        >
           <Heading
-            variant="h5"
+            variant="h6"
             weight={themeValues.fontWeight}
             color={themeValues.fontColor}
             textAlign={themeValues.textAlign}
-            aria-level="3"
+            as="h6"
           >
             {heading}
           </Heading>