@thecb/components 4.0.11 → 4.0.14-beta.0

package/dist/index.cjs.js

@@ -12633,7 +12633,7 @@ var ButtonWithAction = function ButtonWithAction(_ref) {
   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; 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 hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n    cursor: pointer;\n  ");
   var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   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  ";
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -13000,6 +13000,70 @@ var PaymentsIconSmall = function PaymentsIconSmall(_ref) {
 
 var PaymentsIconSmall$1 = themeComponent(PaymentsIconSmall, "Icons", fallbackValues$2, "primary");
 
+var PaymentMethodAddIcon = function PaymentMethodAddIcon(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    width: "100",
+    height: "100",
+    viewBox: "0 0 100 100"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
+    id: "path-1",
+    d: "M0 0H103V100H0z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    id: "path-3",
+    d: "M16.624999 11.3749994L11.3749994 11.3749994 11.3749994 16.624999 9.62499952 16.624999 9.62499952 11.3749994 4.37499993 11.3749994 4.37499993 9.62499952 9.62499952 9.62499952 9.62499952 4.37499993 11.3749994 4.37499993 11.3749994 9.62499952 16.624999 9.62499952z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1",
+    transform: "translate(-1)"
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask-2",
+    fill: themeValues.primaryColor
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#path-1"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask-2)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(11.33 11)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: themeValues.primaryColor,
+    fillRule: "evenodd",
+    d: "M85.49 9v38H40.17v16.251c0 .918-.726 1.67-1.65 1.743l-.147.006h-27.41c-1.966-2.87-3.557-5.537-4.842-8H31.93v-4H5.15v2.055C-1.194 41.772 1.678 35 1.678 35H15.45V9h70.04z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: themeValues.accentColor,
+    fillRule: "nonzero",
+    d: "M39.963 0c8.67 0 16.925 2.695 23.741 7.603l.461.336H85.49c.547 0 .997.414 1.055.945l.006.116v38c0 .547-.414.997-.945 1.055l-.116.006h-6.75l-.01.04c-4.35 17.186-20.282 29.496-38.767 29.496C17.92 77.597.038 60.235.038 38.799c0-11.976 5.58-22.68 14.35-29.795V9c0-.547.415-.997.946-1.055l.116-.006h.31c6.716-4.981 15.105-7.94 24.203-7.94zM76.095 48.06H40.201v15.19c0 1.5-1.185 2.717-2.672 2.805l-.172.005H15.346c6.573 5.588 15.185 8.976 24.617 8.976 17.105 0 31.859-11.237 36.132-26.976zM13.053 63.94l24.304-.001c.37 0 .668-.263.715-.595l.007-.093L38.078 48H3.813c1.642 6.084 4.874 11.545 9.24 15.94zM84.428 10.06H17.197c-.231.172-.46.347-.687.524l.001 23.354h20.846c1.508 0 2.75 1.163 2.84 2.64l.004.17v9.19l44.227-.001V10.061zm-25.629 25.59l.226.14.334.217.869.584 2.017 1.396c.608.413 1.147.76 1.657 1.066 1.562.934 2.772 1.404 3.545 1.353.706-.047 1.215-.139 1.724-.306l.257-.092 2.175-.952.957-.407.352-.143.32-.126c1.831-.702 3.446.022 4.737 1.553.534.632.903 1.26 1.106 1.7a.875.875 0 01-1.538.828l-.15-.29-.113-.198a6.64 6.64 0 00-.642-.912c-.863-1.023-1.773-1.432-2.774-1.048l-.456.182-.798.335-2.562 1.116-.046.018c-.749.277-1.463.424-2.434.487-1.234.082-2.708-.49-4.558-1.597-.433-.259-.882-.545-1.369-.869l-2.409-1.66-.857-.577-.377-.243a2.382 2.382 0 00-.057-.034c-2.004-1.14-4.756 1.386-6.683 5.22a.875.875 0 11-1.564-.785c.088-.173.176-.344.266-.513l.275-.5c.464-.821.962-1.582 1.488-2.258l.318-.396c2.035-2.442 4.432-3.615 6.764-2.288zm-56.09.34l-.032.426A35.67 35.67 0 002.666 41L38.078 41v-4.25a.701.701 0 00-.623-.682l-.098-.007H3.09c-.134 0-.263-.025-.381-.07zm.22-2.04l.045-.006.116-.006h11.298V12.377C8.276 17.947 4.097 25.487 2.93 33.952zM77.352 14v1.697c1.402.247 2.599.742 3.634 1.48l-1.963 2.457c-1.295-.826-2.71-1.238-3.965-1.238-.95 0-1.417.34-1.417.807v.036c0 .574.487.824 2.47 1.22 3.236.627 5.259 1.56 5.259 3.91v.035c0 2.11-1.551 3.515-4.018 3.947V30h-3.737v-1.671c-1.735-.278-3.33-.916-4.605-1.916l2.184-2.314c1.416.986 2.954 1.507 4.592 1.507 1.072 0 1.639-.324 1.639-.862v-.035c0-.538-.465-.808-2.407-1.22-3.015-.61-5.341-1.363-5.341-3.928v-.035c0-1.953 1.466-3.45 3.938-3.885V14h3.737zM49.44 26.625a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007h29.87zm-12.36-6a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007h17.51zm11.33-6a.875.875 0 01.11 1.743l-.11.007H35.02a.875.875 0 01-.11-1.743l.11-.007h13.39zm-17.51 0a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007H30.9zM39.963 2.56c-7.19 0-13.902 1.969-19.599 5.38h39.197c-5.824-3.489-12.562-5.38-19.598-5.38z"
+  })))), /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(59 61)"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "13.3",
+    cy: "13.3",
+    r: "13.3",
+    fill: themeValues.subIconColor
+  }), /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(2.8 2.8)"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask-4",
+    fill: "#fff"
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#path-3"
+  })), /*#__PURE__*/React__default.createElement("use", {
+    fill: "#000",
+    xlinkHref: "#path-3"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    fill: themeValues.primaryColor,
+    mask: "url(#mask-4)"
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 0H21V21H0z"
+  })))))));
+};
+
+var PaymentMethodAddIcon$1 = themeComponent(PaymentMethodAddIcon, "Icons", fallbackValues$2, "info");
+
 var ProfileIconSmall = function ProfileIconSmall(_ref) {
   var themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -16229,9 +16293,10 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
       _ref$fileLink = _ref.fileLink,
       fileLink = _ref$fileLink === void 0 ? false : _ref$fileLink,
       extraStyles = _ref.extraStyles,
+      linkExtraStyles = _ref.linkExtraStyles,
       _ref$newTab = _ref.newTab,
       newTab = _ref$newTab === void 0 ? false : _ref$newTab,
-      otherProps = _objectWithoutProperties(_ref, ["url", "disabled", "fileLink", "extraStyles", "newTab"]);
+      otherProps = _objectWithoutProperties(_ref, ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab"]);
 
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
@@ -16260,15 +16325,94 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     url: url,
     disabled: disabled,
     newTab: newTab,
-    extraStyles: "text-decoration: none; &:hover {\n        text-decoration: none; }"
+    extraStyles: "".concat(linkExtraStyles, " text-decoration: none; &:hover {\n        text-decoration: none; }")
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, _extends({}, otherProps, {
     extraStyles: extraStyles
   })));
 };
 
+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
 };
@@ -16366,10 +16510,10 @@ var Card = function Card(_ref2) {
         return /*#__PURE__*/React__default.createElement(PropertiesAddIcon$1, null);
 
       case "payment":
-        return /*#__PURE__*/React__default.createElement(PaymentMethodIcon$1, null);
+        return /*#__PURE__*/React__default.createElement(PaymentMethodAddIcon$1, null);
 
       default:
-        return /*#__PURE__*/React__default.createElement(PaymentMethodIcon$1, null);
+        return /*#__PURE__*/React__default.createElement(PaymentMethodAddIcon$1, null);
     }
   };
 
@@ -16378,7 +16522,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, {
@@ -16386,7 +16530,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, {
@@ -16401,7 +16545,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, {
@@ -16409,8 +16553,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, {
@@ -16425,7 +16570,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) {
@@ -16433,7 +16578,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));
   },
@@ -16442,16 +16587,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 tax 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));
   }
@@ -16493,7 +16638,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,
@@ -16608,16 +16753,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,
@@ -16698,7 +16843,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),
@@ -16724,7 +16869,7 @@ var radioButtonInactive = {
   "default": "".concat(GHOST_GREY),
   disabled: "".concat(GHOST_GREY)
 };
-var fallbackValues$b = {
+var fallbackValues$c = {
   listBackgroundColor: listBackgroundColor,
   listItemColor: listItemColor,
   listItemBackgroundColor: listItemBackgroundColor,
@@ -16752,10 +16897,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;
   };
 
@@ -16767,7 +16912,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;
@@ -16809,16 +16954,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());
 
@@ -16928,7 +17073,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", {
@@ -16958,7 +17103,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
 };
@@ -16993,16 +17138,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)" : "";
 });
@@ -17235,7 +17380,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([""]);
@@ -17267,16 +17412,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;
@@ -18113,7 +18258,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
 };
@@ -18134,86 +18279,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,
-      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$e, "p");
+var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$e);
 
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
@@ -19851,9 +19917,7 @@ var ERRORS = {
   "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
   "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
   "73": "Please provide a valid CSS variable.\n\n",
-  "74": "CSS variable not found and no default was provided.\n\n",
-  "75": "important requires a valid style object, got a %s instead.\n\n",
-  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
+  "74": "CSS variable not found.\n"
 };
 /**
  * super basic version of sprintf
@@ -33331,12 +33395,10 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var focusStyles = "outline: none;";
 var fallbackValues$q = {
   titleColor: titleColor,
   headingBackgroundColor: headingBackgroundColor,
-  bodyBackgroundColor: bodyBackgroundColor,
-  focusStyles: focusStyles
+  bodyBackgroundColor: bodyBackgroundColor
 };
 
 var CollapsibleSection = function CollapsibleSection(_ref) {
@@ -33394,7 +33456,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     padding: "0",
     tabIndex: "0",
     onKeyDown: handleKeyDown,
-    hoverStyles: themeValues.focusStyles,
+    hoverStyles: "outline: none;",
     animate: isOpen ? "open" : "closed",
     positionTransition: true
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -33404,7 +33466,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     background: themeValues.headingBackgroundColor,
     onClick: isMobile && supportsTouch ? noop : toggleSection,
     onTouchEnd: isMobile && supportsTouch ? toggleSection : noop,
-    key: "header"
+    key: "header",
+    hoverStyles: "cursor: pointer;"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center"
@@ -33418,10 +33481,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     as: "h6"
   }, title), /*#__PURE__*/React__default.createElement(Motion, {
     variants: icon,
-    style: {
-      display: "flex",
-      alignItems: "center"
-    }
+    extraStyles: "display: flex; align-items: center;"
   }, /*#__PURE__*/React__default.createElement(ChevronIcon$1, null)))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
     initial: false
   }, isOpen && /*#__PURE__*/React__default.createElement(Motion, {
@@ -37898,7 +37958,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       fields = _ref.fields,
       actions = _ref.actions,
       showErrors = _ref.showErrors,
-      fees = _ref.fees,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
 
@@ -38033,13 +38092,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
     hidden: hideDefaultPayment
-  }), !!(fees === null || fees === void 0 ? void 0 : fees.value) && /*#__PURE__*/React__default.createElement(Alert$1, {
-    heading: "Processing Fee",
-    text: "There is a processing fee of ".concat(fees.type === "FLAT" ? "".concat(displayCurrency(fees.value)) : "".concat(fees.value * 100, "%"), " ").concat(ifElse(isNil, always(""), function (a) {
-      return "with a minimum of ".concat(displayCurrency(a), " ");
-    })(fees.minimumInCents), "on all bank account payments."),
-    variant: "info",
-    showQuitLink: false
   })));
 };
 
@@ -38096,7 +38148,6 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       fields = _ref.fields,
       actions = _ref.actions,
       showErrors = _ref.showErrors,
-      fees = _ref.fees,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       isMobile = _ref.isMobile;
@@ -38256,13 +38307,13 @@ var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$2 = "".concat(GREY_CHATEAU);
-var focusStyles$1 = "outline: none;";
+var focusStyles = "outline: none;";
 var fallbackValues$x = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
   borderColor: borderColor$2,
-  focusStyles: focusStyles$1
+  focusStyles: focusStyles
 };
 
 function _templateObject$A() {
@@ -38606,7 +38657,8 @@ var ResetConfirmationForm = function ResetConfirmationForm() {
     url: "/login",
     text: "Back to Login",
     variant: "primary",
-    extraStyles: "width: 100%;"
+    extraStyles: "width: 100%;",
+    linkExtraStyles: "width: 100%;"
   })))));
 };
 
@@ -38726,7 +38778,8 @@ var ResetConfirmationForm$2 = function ResetConfirmationForm() {
     url: "/login",
     text: "Log in",
     variant: "primary",
-    extraStyles: "width: 100%;"
+    extraStyles: "width: 100%;",
+    linkExtraStyles: "width: 100%;"
   }))))));
 };
 
@@ -39023,7 +39076,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;
@@ -39048,13 +39101,14 @@ var WelcomeModule = function WelcomeModule(_ref) {
   }, /*#__PURE__*/React__default.createElement(WelcomeImage, {
     src: welcomeImage
   }))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: isMobile ? "0.875rem 1rem" : "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,
-    as: "h5"
+    as: "h6"
   }, heading)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     background: themeValues.imageBackgroundColor
@@ -39463,6 +39517,7 @@ exports.PaymentDetails = PaymentDetails$1;
 exports.PaymentFormACH = PaymentFormACH;
 exports.PaymentFormCard = PaymentFormCard;
 exports.PaymentIcon = PaymentIcon;
+exports.PaymentMethodAddIcon = PaymentMethodAddIcon$1;
 exports.PaymentMethodIcon = PaymentMethodIcon$1;
 exports.PaymentsIconSmall = PaymentsIconSmall$1;
 exports.PhoneForm = PhoneForm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.0.11",
+  "version": "4.0.14-beta.0",
   "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

@@ -93,6 +93,7 @@ const ButtonWithAction = ({
     text-decoration: ${
       variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
     };
+    cursor: pointer;
   `;
   const activeStyles = `
     outline: none;

package/src/components/atoms/button-with-link/ButtonWithLink.js

@@ -10,6 +10,7 @@ const ButtonWithLink = ({
   disabled = false,
   fileLink = false,
   extraStyles,
+  linkExtraStyles,
   newTab = false,
   ...otherProps
 }) => {
@@ -44,7 +45,7 @@ const ButtonWithLink = ({
       url={url}
       disabled={disabled}
       newTab={newTab}
-      extraStyles={`text-decoration: none; &:hover {
+      extraStyles={`${linkExtraStyles} text-decoration: none; &:hover {
         text-decoration: none; }`}
     >
       <ButtonWithAction {...otherProps} extraStyles={extraStyles} />

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

@@ -3,14 +3,14 @@ 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";
 import {
   AccountsAddIcon,
   PropertiesAddIcon,
-  PaymentMethodIcon
+  PaymentMethodAddIcon
 } from "../icons";
 import withWindowSize from "../../withWindowSize";
 
@@ -45,9 +45,9 @@ const Card = ({
       case "properties":
         return <PropertiesAddIcon />;
       case "payment":
-        return <PaymentMethodIcon />;
+        return <PaymentMethodAddIcon />;
       default:
-        return <PaymentMethodIcon />;
+        return <PaymentMethodAddIcon />;
     }
   };
 
@@ -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 tax 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/icons/PaymentMethodAddIcon.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const PaymentMethodAddIcon = ({ themeValues }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="100"
+      height="100"
+      viewBox="0 0 100 100"
+    >
+      <defs>
+        <path id="path-1" d="M0 0H103V100H0z"></path>
+        <path
+          id="path-3"
+          d="M16.624999 11.3749994L11.3749994 11.3749994 11.3749994 16.624999 9.62499952 16.624999 9.62499952 11.3749994 4.37499993 11.3749994 4.37499993 9.62499952 9.62499952 9.62499952 9.62499952 4.37499993 11.3749994 4.37499993 11.3749994 9.62499952 16.624999 9.62499952z"
+        ></path>
+      </defs>
+      <g
+        fill="none"
+        fillRule="evenodd"
+        stroke="none"
+        strokeWidth="1"
+        transform="translate(-1)"
+      >
+        <g>
+          <mask id="mask-2" fill={themeValues.primaryColor}>
+            <use xlinkHref="#path-1"></use>
+          </mask>
+          <g mask="url(#mask-2)">
+            <g transform="translate(11.33 11)">
+              <path
+                fill={themeValues.primaryColor}
+                fillRule="evenodd"
+                d="M85.49 9v38H40.17v16.251c0 .918-.726 1.67-1.65 1.743l-.147.006h-27.41c-1.966-2.87-3.557-5.537-4.842-8H31.93v-4H5.15v2.055C-1.194 41.772 1.678 35 1.678 35H15.45V9h70.04z"
+              ></path>
+              <path
+                fill={themeValues.accentColor}
+                fillRule="nonzero"
+                d="M39.963 0c8.67 0 16.925 2.695 23.741 7.603l.461.336H85.49c.547 0 .997.414 1.055.945l.006.116v38c0 .547-.414.997-.945 1.055l-.116.006h-6.75l-.01.04c-4.35 17.186-20.282 29.496-38.767 29.496C17.92 77.597.038 60.235.038 38.799c0-11.976 5.58-22.68 14.35-29.795V9c0-.547.415-.997.946-1.055l.116-.006h.31c6.716-4.981 15.105-7.94 24.203-7.94zM76.095 48.06H40.201v15.19c0 1.5-1.185 2.717-2.672 2.805l-.172.005H15.346c6.573 5.588 15.185 8.976 24.617 8.976 17.105 0 31.859-11.237 36.132-26.976zM13.053 63.94l24.304-.001c.37 0 .668-.263.715-.595l.007-.093L38.078 48H3.813c1.642 6.084 4.874 11.545 9.24 15.94zM84.428 10.06H17.197c-.231.172-.46.347-.687.524l.001 23.354h20.846c1.508 0 2.75 1.163 2.84 2.64l.004.17v9.19l44.227-.001V10.061zm-25.629 25.59l.226.14.334.217.869.584 2.017 1.396c.608.413 1.147.76 1.657 1.066 1.562.934 2.772 1.404 3.545 1.353.706-.047 1.215-.139 1.724-.306l.257-.092 2.175-.952.957-.407.352-.143.32-.126c1.831-.702 3.446.022 4.737 1.553.534.632.903 1.26 1.106 1.7a.875.875 0 01-1.538.828l-.15-.29-.113-.198a6.64 6.64 0 00-.642-.912c-.863-1.023-1.773-1.432-2.774-1.048l-.456.182-.798.335-2.562 1.116-.046.018c-.749.277-1.463.424-2.434.487-1.234.082-2.708-.49-4.558-1.597-.433-.259-.882-.545-1.369-.869l-2.409-1.66-.857-.577-.377-.243a2.382 2.382 0 00-.057-.034c-2.004-1.14-4.756 1.386-6.683 5.22a.875.875 0 11-1.564-.785c.088-.173.176-.344.266-.513l.275-.5c.464-.821.962-1.582 1.488-2.258l.318-.396c2.035-2.442 4.432-3.615 6.764-2.288zm-56.09.34l-.032.426A35.67 35.67 0 002.666 41L38.078 41v-4.25a.701.701 0 00-.623-.682l-.098-.007H3.09c-.134 0-.263-.025-.381-.07zm.22-2.04l.045-.006.116-.006h11.298V12.377C8.276 17.947 4.097 25.487 2.93 33.952zM77.352 14v1.697c1.402.247 2.599.742 3.634 1.48l-1.963 2.457c-1.295-.826-2.71-1.238-3.965-1.238-.95 0-1.417.34-1.417.807v.036c0 .574.487.824 2.47 1.22 3.236.627 5.259 1.56 5.259 3.91v.035c0 2.11-1.551 3.515-4.018 3.947V30h-3.737v-1.671c-1.735-.278-3.33-.916-4.605-1.916l2.184-2.314c1.416.986 2.954 1.507 4.592 1.507 1.072 0 1.639-.324 1.639-.862v-.035c0-.538-.465-.808-2.407-1.22-3.015-.61-5.341-1.363-5.341-3.928v-.035c0-1.953 1.466-3.45 3.938-3.885V14h3.737zM49.44 26.625a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007h29.87zm-12.36-6a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007h17.51zm11.33-6a.875.875 0 01.11 1.743l-.11.007H35.02a.875.875 0 01-.11-1.743l.11-.007h13.39zm-17.51 0a.875.875 0 01.11 1.743l-.11.007H19.57a.875.875 0 01-.11-1.743l.11-.007H30.9zM39.963 2.56c-7.19 0-13.902 1.969-19.599 5.38h39.197c-5.824-3.489-12.562-5.38-19.598-5.38z"
+              ></path>
+            </g>
+          </g>
+        </g>
+        <g transform="translate(59 61)">
+          <circle
+            cx="13.3"
+            cy="13.3"
+            r="13.3"
+            fill={themeValues.subIconColor}
+          ></circle>
+          <g transform="translate(2.8 2.8)">
+            <mask id="mask-4" fill="#fff">
+              <use xlinkHref="#path-3"></use>
+            </mask>
+            <use fill="#000" xlinkHref="#path-3"></use>
+            <g fill={themeValues.primaryColor} mask="url(#mask-4)">
+              <g>
+                <path d="M0 0H21V21H0z"></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  PaymentMethodAddIcon,
+  "Icons",
+  fallbackValues,
+  "info"
+);

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

@@ -6,6 +6,7 @@ import VerifiedEmailIcon from "./VerifiedEmailIcon";
 import PaymentMethodIcon from "./PaymentMethodIcon";
 import AccountsIconSmall from "./AccountsIconSmall";
 import PaymentsIconSmall from "./PaymentsIconSmall";
+import PaymentMethodAddIcon from "./PaymentMethodAddIcon";
 import ProfileIconSmall from "./ProfileIconSmall";
 import SettingsIconSmall from "./SettingsIconSmall";
 import ChevronIcon from "./ChevronIcon";
@@ -30,6 +31,7 @@ export {
   PaymentMethodIcon,
   AccountsIconSmall,
   PaymentsIconSmall,
+  PaymentMethodAddIcon,
   ProfileIconSmall,
   SettingsIconSmall,
   ChevronIcon,

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

@@ -64,7 +64,7 @@ const CollapsibleSection = ({
       padding="0"
       tabIndex="0"
       onKeyDown={handleKeyDown}
-      hoverStyles={themeValues.focusStyles}
+      hoverStyles={`outline: none;`}
       animate={isOpen ? "open" : "closed"}
       positionTransition
     >
@@ -75,6 +75,7 @@ const CollapsibleSection = ({
           onClick={isMobile && supportsTouch ? noop : toggleSection}
           onTouchEnd={isMobile && supportsTouch ? toggleSection : noop}
           key="header"
+          hoverStyles={`cursor: pointer;`}
         >
           <Cluster justify="space-between" align="center">
             {customTitle ? (
@@ -93,7 +94,7 @@ const CollapsibleSection = ({
             )}
             <Motion
               variants={icon}
-              style={{ display: "flex", alignItems: "center" }}
+              extraStyles={`display: flex; align-items: center;`}
             >
               <ChevronIcon />
             </Motion>

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

@@ -1,11 +1,9 @@
 const titleColor = "#292A33";
 const headingBackgroundColor = "transparent";
 const bodyBackgroundColor = "transparent";
-const focusStyles = `outline: none;`;
 
 export const fallbackValues = {
   titleColor,
   headingBackgroundColor,
-  bodyBackgroundColor,
-  focusStyles
+  bodyBackgroundColor
 };

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-import { ifElse, isNil, always } from "ramda";
 import Checkbox from "../../atoms/checkbox";
 import {
   required,
@@ -14,9 +13,8 @@ import {
   FormInputColumn,
   FormContainer
 } from "../../atoms/form-layouts";
-import Alert from "../../atoms/alert";
 import AccountAndRoutingModal from "../account-and-routing-modal";
-import { displayCurrency, noop } from "../../../util/general";
+import { noop } from "../../../util/general";
 
 const ModalWrapper = styled.div``;
 
@@ -30,7 +28,6 @@ const PaymentFormACH = ({
   fields,
   actions,
   showErrors,
-  fees,
   handleSubmit = noop
 }) => {
   if (clearOnDismount) {
@@ -165,22 +162,6 @@ const PaymentFormACH = ({
             hidden={hideDefaultPayment}
           />
         )}
-        {!!fees?.value && (
-          <Alert
-            heading="Processing Fee"
-            text={`There is a processing fee of ${
-              fees.type === "FLAT"
-                ? `${displayCurrency(fees.value)}`
-                : `${fees.value * 100}%`
-            } ${ifElse(
-              isNil,
-              always(""),
-              a => `with a minimum of ${displayCurrency(a)} `
-            )(fees.minimumInCents)}on all bank account payments.`}
-            variant="info"
-            showQuitLink={false}
-          />
-        )}
       </FormInputColumn>
     </FormContainer>
   );

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import { required, hasLength, matchesRegex } from "redux-freeform";
-import { ifElse, isNil, always } from "ramda";
-import { checkCardBrand, displayCurrency, noop } from "../../../util/general";
+import { checkCardBrand, noop } from "../../../util/general";
 import { expirationDateFormat, creditCardFormat } from "../../../util/formats";
 import {
   FormInput,
@@ -10,7 +9,6 @@ import {
   FormInputRow
 } from "../../atoms/form-layouts";
 import { Box } from "../../atoms/layouts";
-import Alert from "../../atoms/alert";
 
 const nameOnCardErrors = {
   [required.error]: "Name is required"
@@ -40,7 +38,6 @@ const PaymentFormCard = ({
   fields,
   actions,
   showErrors,
-  fees,
   handleSubmit = noop,
   isMobile
 }) => {

package/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.js

@@ -46,6 +46,7 @@ const ResetConfirmationForm = () => {
               text="Back to Login"
               variant="primary"
               extraStyles={`width: 100%;`}
+              linkExtraStyles={`width: 100%;`}
             />
           </Cluster>
         </Box>

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.js

@@ -44,6 +44,7 @@ const ResetConfirmationForm = () => {
                 text="Log in"
                 variant="primary"
                 extraStyles={`width: 100%;`}
+                linkExtraStyles={`width: 100%;`}
               />
             </Cluster>
           </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={isMobile ? "0.875rem 1rem" : "0.875rem 1.5rem"}
+          background={themeValues.headerBackgroundColor}
+        >
           <Heading
-            variant="h5"
+            variant="h6"
             weight={themeValues.fontWeight}
             color={themeValues.fontColor}
             textAlign={themeValues.textAlign}
-            as="h5"
+            as="h6"
           >
             {heading}
           </Heading>