@thecb/components 4.1.14-beta.0 → 4.1.14

package/dist/index.cjs.js

@@ -6121,11 +6121,10 @@ var Text = function Text(_ref) {
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
       hoverStyles = _ref.hoverStyles,
       onClick = _ref.onClick,
-      onKeyPress = _ref.onKeyPress,
       as = _ref.as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"]);
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "as", "dataQa", "children"]);
 
   return /*#__PURE__*/React__default.createElement(TextSpan, _extends({
     fontSize: themeValues.fontSize,
@@ -6136,7 +6135,6 @@ var Text = function Text(_ref) {
     extraStyles: extraStyles,
     hoverStyles: hoverStyles,
     onClick: onClick,
-    onKeyPress: onKeyPress,
     "data-qa": dataQa
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
@@ -18577,38 +18575,17 @@ var Checkbox = function Checkbox(_ref4) {
       onChange = _ref4$onChange === void 0 ? noop : _ref4$onChange,
       _ref4$disabled = _ref4.disabled,
       disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
+      _ref4$focused = _ref4.focused,
+      focused = _ref4$focused === void 0 ? false : _ref4$focused,
       themeValues = _ref4.themeValues,
       _ref4$hidden = _ref4.hidden,
       hidden = _ref4$hidden === void 0 ? false : _ref4$hidden,
       _ref4$error = _ref4.error,
       error = _ref4$error === void 0 ? false : _ref4$error;
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      focused = _useState2[0],
-      setFocused = _useState2[1];
-
-  var handleClick = function handleClick(e, func) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
-      func();
-    }
-  };
-
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    tabIndex: "0",
-    onFocus: function onFocus() {
-      return setFocused(true);
-    },
-    onBlur: function onBlur() {
-      return setFocused(false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return handleClick(e, onChange);
-    },
     hiddenStyles: hidden,
-    background: themeValues.backgroundColor,
-    extraStyles: "outline: none;"
+    background: themeValues.backgroundColor
   }, /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, null, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React__default.createElement(HiddenCheckbox, {
@@ -19131,6 +19108,7 @@ var Dropdown = function Dropdown(_ref9) {
   return /*#__PURE__*/React__default.createElement(Box, {
     onKeyDown: onKeyDown,
     onClick: onClick,
+    tabIndex: 0,
     padding: "0",
     width: "100%",
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
@@ -19144,8 +19122,7 @@ var Dropdown = function Dropdown(_ref9) {
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
     borderRadius: "2px",
-    tabIndex: 0,
-    extraStyles: "height: 48px;",
+    extraStyles: "tabindex: 0; height: 48px;",
     dataQa: placeholder
   }, /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
@@ -34316,6 +34293,17 @@ var formats = /*#__PURE__*/Object.freeze({
   moneyFormat: moneyFormat
 });
 
+function _templateObject$x() {
+  var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
+
+  _templateObject$x = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var CheckboxWrapper = styled__default.div(_templateObject$x());
+
 var AddressForm = function AddressForm(_ref) {
   var _zipErrorMessages;
 
@@ -34331,6 +34319,17 @@ var AddressForm = function AddressForm(_ref) {
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked;
 
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      checkboxFocused = _useState2[0],
+      focusCheckbox = _useState2[1];
+
+  var handleClick = function handleClick(e, func) {
+    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
+      func();
+    }
+  };
+
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -34418,12 +34417,24 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(CheckboxWrapper, {
+    tabIndex: "0",
+    onFocus: function onFocus() {
+      return focusCheckbox(true);
+    },
+    onBlur: function onBlur() {
+      return focusCheckbox(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return handleClick(e, saveToWallet);
+    }
+  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
-  })));
+    onChange: saveToWallet,
+    focused: checkboxFocused
+  }))));
 };
 
 var formConfig = {
@@ -34726,16 +34737,16 @@ function _templateObject2$j() {
   return data;
 }
 
-function _templateObject$x() {
+function _templateObject$y() {
   var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  background: ", ";\n  height: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  :not(:last-child),\n  :not(:first-child) {\n    box-shadow: inset 0px -1px 0px 0px rgb(202, 206, 216);\n  }\n  :first-child {\n    border-top-left-radius: 3px;\n    border-top-right-radius: 3px;\n  }\n  :last-child {\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    box-shadow: none;\n  }\n"]);
 
-  _templateObject$x = function _templateObject() {
+  _templateObject$y = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var EditableListItem = styled__default.div(_templateObject$x(), WHITE, function (_ref) {
+var EditableListItem = styled__default.div(_templateObject$y(), WHITE, function (_ref) {
   var listItemSize = _ref.listItemSize;
   return listItemSize === "big" ? "120px" : "72px";
 });
@@ -34920,16 +34931,16 @@ function _templateObject2$k() {
   return data;
 }
 
-function _templateObject$y() {
+function _templateObject$z() {
   var data = _taggedTemplateLiteral(["\n  display: ", ";\n  flex-direction: column;\n  flex: 1;\n"]);
 
-  _templateObject$y = function _templateObject() {
+  _templateObject$z = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var EditableTableContainer = styled__default.div(_templateObject$y(), function (_ref) {
+var EditableTableContainer = styled__default.div(_templateObject$z(), function (_ref) {
   var hide = _ref.hide;
   return hide ? "none" : "flex";
 });
@@ -35041,6 +35052,17 @@ var TableListItem = function TableListItem(_ref) {
   }, "Edit")) : /*#__PURE__*/React__default.createElement(React.Fragment, null))));
 };
 
+function _templateObject$A() {
+  var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
+
+  _templateObject$A = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var CheckboxWrapper$1 = styled__default.div(_templateObject$A());
+
 var EmailForm = function EmailForm(_ref) {
   var _emailFieldErrorMessa;
 
@@ -35057,6 +35079,17 @@ var EmailForm = function EmailForm(_ref) {
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked;
 
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      checkboxFocused = _useState2[0],
+      focusCheckbox = _useState2[1];
+
+  var handleClick = function handleClick(e, func) {
+    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
+      func();
+    }
+  };
+
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -35082,12 +35115,24 @@ var EmailForm = function EmailForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(CheckboxWrapper$1, {
+    tabIndex: "0",
+    onFocus: function onFocus() {
+      return focusCheckbox(true);
+    },
+    onBlur: function onBlur() {
+      return focusCheckbox(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return handleClick(e, saveToWallet);
+    }
+  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
-  })));
+    onChange: saveToWallet,
+    focused: checkboxFocused
+  }))));
 };
 
 var formConfig$3 = {
@@ -36431,7 +36476,8 @@ var getApplicationNode = function getApplicationNode() {
 };
 
 var Modal$1 = function Modal(_ref) {
-  var hideModal = _ref.hideModal,
+  var ModalLink = _ref.ModalLink,
+      hideModal = _ref.hideModal,
       continueAction = _ref.continueAction,
       cancelAction = _ref.cancelAction,
       modalOpen = _ref.modalOpen,
@@ -36453,13 +36499,12 @@ var Modal$1 = function Modal(_ref) {
       onlyCloseButton = _ref$onlyCloseButton === void 0 ? false : _ref$onlyCloseButton,
       maxHeight = _ref.maxHeight,
       _ref$underlayClickExi = _ref.underlayClickExits,
-      underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi,
-      children = _ref.children;
+      underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
 
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(ModalLink, null), modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
     onExit: hideModal,
     getApplicationNode: getApplicationNode,
     titleText: modalHeaderText,
@@ -36531,7 +36576,7 @@ var Modal$1 = function Modal(_ref) {
     variant: "primary",
     text: "Close",
     dataQa: "Close"
-  })))))))), children);
+  })))))))));
 };
 
 var fontSize$8 = {
@@ -36668,10 +36713,10 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
 
 var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$v, "profile");
 
-function _templateObject$z() {
+function _templateObject$B() {
   var data = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 72px;\n"]);
 
-  _templateObject$z = function _templateObject() {
+  _templateObject$B = function _templateObject() {
     return data;
   };
 
@@ -36707,7 +36752,7 @@ var menu = posed.div({
     }
   }
 });
-var ImposterMenu = styled__default(menu)(_templateObject$z());
+var ImposterMenu = styled__default(menu)(_templateObject$B());
 
 var NavMenuMobile = function NavMenuMobile(_ref) {
   var id = _ref.id,
@@ -38230,16 +38275,10 @@ var TitleModule = function TitleModule(_ref) {
 var color$a = "#15749D";
 var hoverColor$4 = "#116285";
 var activeColor$5 = "#0E506D";
-var linkColor$3 = "#357fb8";
-var fontWeight$6 = FONT_WEIGHT_REGULAR;
-var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #357fb8;";
 var fallbackValues$w = {
   color: color$a,
   hoverColor: hoverColor$4,
-  activeColor: activeColor$5,
-  linkColor: linkColor$3,
-  fontWeight: fontWeight$6,
-  modalLinkHoverFocus: modalLinkHoverFocus
+  activeColor: activeColor$5
 };
 
 var AutopayModal = function AutopayModal(_ref) {
@@ -38269,6 +38308,34 @@ var AutopayModal = function AutopayModal(_ref) {
   var activeStyles = "\n   &:active {\n    .autopayIcon { fill: ".concat(themeValues.activeColor, "; text-decoration: underline; }\n    }");
   var defaultStyles = "\n    .autopayIcon { fill: ".concat(themeValues.color, "; text-decoration: underline; }\n     ");
   return /*#__PURE__*/React__default.createElement(Modal$1, _extends({
+    ModalLink: function ModalLink() {
+      return buttonLinkType ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+        text: autoPayActive ? "Manage ".concat(planType) : "Set Up ".concat(planType),
+        variant: "tertiary",
+        action: function action() {
+          toggleModal(true);
+        },
+        dataQa: "Manage Autopay",
+        extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+      }) : /*#__PURE__*/React__default.createElement(Box, {
+        padding: "0",
+        onClick: function onClick() {
+          toggleModal(true);
+        },
+        hoverStyles: hoverStyles,
+        activeStyles: activeStyles,
+        extraStyles: defaultStyles
+      }, /*#__PURE__*/React__default.createElement(Cluster, {
+        justify: isMobile ? "flex-start" : "flex-end",
+        align: "center"
+      }, /*#__PURE__*/React__default.createElement(AutopayOnIcon$1, null), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+        text: "".concat(planType, " On"),
+        variant: "smallGhost",
+        dataQa: "Autopay On",
+        textExtraStyles: "font-size: 0.875rem; ",
+        extraStyles: "min-width: auto; padding: 0 0 0 6px;"
+      })));
+    },
     showModal: function showModal() {
       return toggleModal(true);
     },
@@ -38276,43 +38343,7 @@ var AutopayModal = function AutopayModal(_ref) {
       return toggleModal(false);
     },
     modalOpen: modalOpen
-  }, modalExtraProps), buttonLinkType ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    text: autoPayActive ? "Manage ".concat(planType) : "Set Up ".concat(planType),
-    variant: "tertiary",
-    action: function action() {
-      toggleModal(true);
-    },
-    dataQa: "Manage Autopay",
-    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
-  }) : /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    onClick: function onClick() {
-      toggleModal(true);
-    },
-    hoverStyles: hoverStyles,
-    activeStyles: activeStyles,
-    extraStyles: defaultStyles
-  }, /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: isMobile ? "flex-start" : "flex-end",
-    align: "center"
-  }, /*#__PURE__*/React__default.createElement(AutopayOnIcon$1, null), /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "pS",
-    onClick: function onClick() {
-      return toggleModal(true);
-    },
-    onKeyPress: function onKeyPress(e) {
-      console.log({
-        e: e
-      });
-      e.key === "Enter" && toggleModal(true);
-    },
-    tabIndex: "0",
-    dataQa: "".concat(planType, " On"),
-    color: themeValues.linkColor,
-    weight: themeValues.fontWeight,
-    hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "padding: 0 0 0 6px;"
-  }, "".concat(planType, " On")))));
+  }, modalExtraProps));
 };
 
 var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$w);
@@ -39050,27 +39081,32 @@ var PaymentDetails = function PaymentDetails(_ref4) {
 
 var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$x, "default");
 
-var linkColor$4 = {
-  "default": "#357fb8"
+var linkColor$3 = {
+  "default": "#357fb8",
+  footer: "#ffffff"
 };
 var fontSize$9 = {
-  "default": "1rem"
+  "default": "1rem",
+  footer: "0.875rem"
 };
 var lineHeight$5 = {
-  "default": "1.5rem"
+  "default": "1.5rem",
+  footer: "1.25rem"
 };
-var fontWeight$7 = {
-  "default": FONT_WEIGHT_REGULAR
+var fontWeight$6 = {
+  "default": FONT_WEIGHT_REGULAR,
+  footer: FONT_WEIGHT_SEMIBOLD
 };
-var modalLinkHoverFocus$1 = {
-  "default": "outline: none; text-decoration: underline;"
+var modalLinkHoverFocus = {
+  "default": "",
+  footer: "outline: none; text-decoration: underline;"
 };
 var fallbackValues$y = {
-  linkColor: linkColor$4,
+  linkColor: linkColor$3,
   fontSize: fontSize$9,
   lineHeight: lineHeight$5,
-  fontWeight: fontWeight$7,
-  modalLinkHoverFocus: modalLinkHoverFocus$1
+  fontWeight: fontWeight$6,
+  modalLinkHoverFocus: modalLinkHoverFocus
 };
 
 var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
@@ -39082,8 +39118,25 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       acceptText = _ref.acceptText,
       content = _ref.content,
       imageType = _ref.imageType,
+      variant = _ref.variant,
       themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
+    ModalLink: function ModalLink() {
+      return /*#__PURE__*/React__default.createElement(Text$1, {
+        variant: variant === "default" ? "pS" : "pXS",
+        onClick: function onClick() {
+          return toggleOpen(true);
+        },
+        color: themeValues.linkColor,
+        weight: themeValues.fontWeight,
+        hoverStyles: themeValues.modalLinkHoverFocus,
+        extraStyles: "cursor: pointer;",
+        tabIndex: "0",
+        onKeyPress: function onKeyPress(e) {
+          return e.key === "Enter" && toggleOpen(true);
+        }
+      }, link);
+    },
     modalOpen: isOpen,
     hideModal: function hideModal() {
       return toggleOpen(false);
@@ -39108,24 +39161,33 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       toggleAccepted(true);
       toggleOpen(false);
     }
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "pS",
-    onClick: function onClick() {
-      return toggleOpen(true);
-    },
-    onKeyPress: function onKeyPress(e) {
-      return e.key === "Enter" && toggleOpen(true);
-    },
-    tabIndex: "0",
-    color: themeValues.linkColor,
-    weight: themeValues.fontWeight,
-    hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "cursor: pointer;"
-  }, link));
+  });
 };
 
 var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$y, "default");
 
+function _templateObject2$l() {
+  var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
+
+  _templateObject2$l = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$C() {
+  var data = _taggedTemplateLiteral([""]);
+
+  _templateObject$C = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var ModalWrapper = styled__default.div(_templateObject$C());
+var CheckboxWrapper$2 = styled__default.div(_templateObject2$l());
+
 var PaymentFormACH = function PaymentFormACH(_ref) {
   var _routingNumberErrors, _accountNumberErrors;
 
@@ -39146,6 +39208,17 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked;
 
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      checkboxFocused = _useState2[0],
+      focusCheckbox = _useState2[1];
+
+  var handleClick = function handleClick(e, func) {
+    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
+      func();
+    }
+  };
+
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -39154,15 +39227,15 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     }, []);
   }
 
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showRouting = _useState2[0],
-      toggleShowRouting = _useState2[1];
-
   var _useState3 = React.useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      showAccount = _useState4[0],
-      toggleShowAccount = _useState4[1];
+      showRouting = _useState4[0],
+      toggleShowRouting = _useState4[1];
+
+  var _useState5 = React.useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showAccount = _useState6[0],
+      toggleShowAccount = _useState6[1];
 
   var nameErrors = _defineProperty({}, required.error, "Name is required");
 
@@ -39196,14 +39269,19 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     fieldActions: actions.fields.routingNumber,
     showErrors: showErrors,
     helperModal: function helperModal() {
-      return /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
+      return /*#__PURE__*/React__default.createElement(ModalWrapper, {
+        tabIndex: "0",
+        onKeyDown: function onKeyDown(e) {
+          return e.key === "Enter" && toggleShowAccount(!showRouting);
+        }
+      }, /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
         link: "What is this?",
         title: "Where is my routing number?",
         content: "Your routing number is the 9-digit number in the bottom left corner of your check.",
         imageType: "Routing",
         isOpen: showRouting,
         toggleOpen: toggleShowRouting
-      });
+      }));
     },
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
@@ -39224,14 +39302,19 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     fieldActions: actions.fields.accountNumber,
     showErrors: showErrors,
     helperModal: function helperModal() {
-      return /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
+      return /*#__PURE__*/React__default.createElement(ModalWrapper, {
+        tabIndex: "0",
+        onKeyDown: function onKeyDown(e) {
+          return e.key === "Enter" && toggleShowAccount(!showAccount);
+        }
+      }, /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
         link: "What is this?",
         title: "Where is my account number?",
         content: "Your account number is usually the 10-digit number in the bottom of your check to the right of the routing number.",
         imageType: "Account",
         isOpen: showAccount,
         toggleOpen: toggleShowAccount
-      });
+      }));
     },
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
@@ -39267,12 +39350,24 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
     hidden: hideDefaultPayment
-  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(CheckboxWrapper$2, {
+    tabIndex: "0",
+    onFocus: function onFocus() {
+      return focusCheckbox(true);
+    },
+    onBlur: function onBlur() {
+      return focusCheckbox(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return handleClick(e, saveToWallet);
+    }
+  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "bank checkbox",
     title: "Save bank account to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
-  })));
+    onChange: saveToWallet,
+    focused: checkboxFocused
+  }))));
 };
 
 var formConfig$6 = {
@@ -39312,6 +39407,17 @@ PaymentFormACH.mapDispatchToProps = mapDispatchToProps$6;
 
 var _creditCardNumberErro, _expirationDateErrors, _cvvErrors, _zipCodeErrors;
 
+function _templateObject$D() {
+  var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
+
+  _templateObject$D = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var CheckboxWrapper$3 = styled__default.div(_templateObject$D());
+
 var nameOnCardErrors = _defineProperty({}, required.error, "Name is required");
 
 var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required.error, "Credit card number is required"), _defineProperty(_creditCardNumberErro, hasLength.error, "Credit card number is invalid"), _creditCardNumberErro);
@@ -39336,6 +39442,18 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked;
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      checkboxFocused = _useState2[0],
+      focusCheckbox = _useState2[1];
+
+  var handleClick = function handleClick(e, func) {
+    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
+      func();
+    }
+  };
+
   React.useEffect(function () {
     if (clearOnDismount) {
       return function () {
@@ -39416,12 +39534,24 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  })), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  })), showWalletCheckbox && /*#__PURE__*/React__default.createElement(CheckboxWrapper$3, {
+    tabIndex: "0",
+    onFocus: function onFocus() {
+      return focusCheckbox(true);
+    },
+    onBlur: function onBlur() {
+      return focusCheckbox(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return handleClick(e, saveToWallet);
+    }
+  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "credit card checkbox",
     title: "Save credit card to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
-  })));
+    onChange: saveToWallet,
+    focused: checkboxFocused
+  }))));
 };
 
 var formConfig$7 = {
@@ -39459,6 +39589,17 @@ PaymentFormCard.reducer = reducer$7;
 PaymentFormCard.mapStateToProps = mapStateToProps$8;
 PaymentFormCard.mapDispatchToProps = mapDispatchToProps$7;
 
+function _templateObject$E() {
+  var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
+
+  _templateObject$E = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var CheckboxWrapper$4 = styled__default.div(_templateObject$E());
+
 var PhoneForm = function PhoneForm(_ref) {
   var _phoneErrorMessage;
 
@@ -39474,6 +39615,17 @@ var PhoneForm = function PhoneForm(_ref) {
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked;
 
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      checkboxFocused = _useState2[0],
+      focusCheckbox = _useState2[1];
+
+  var handleClick = function handleClick(e, func) {
+    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
+      func();
+    }
+  };
+
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -39497,12 +39649,24 @@ var PhoneForm = function PhoneForm(_ref) {
     onKeyUp: function onKeyUp(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(CheckboxWrapper$4, {
+    tabIndex: "0",
+    onFocus: function onFocus() {
+      return focusCheckbox(true);
+    },
+    onBlur: function onBlur() {
+      return focusCheckbox(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return handleClick(e, saveToWallet);
+    }
+  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
-  })));
+    onChange: saveToWallet,
+    focused: checkboxFocused
+  }))));
 };
 
 var formConfig$8 = {
@@ -39534,10 +39698,10 @@ var fallbackValues$z = {
   focusStyles: focusStyles
 };
 
-function _templateObject$A() {
+function _templateObject$F() {
   var data = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n    ", "\n    transition: opacity 0.3s ease;\n  "]);
 
-  _templateObject$A = function _templateObject() {
+  _templateObject$F = function _templateObject() {
     return data;
   };
 
@@ -39607,7 +39771,7 @@ var RadioSection = function RadioSection(_ref) {
     }
   };
   var borderStyles = "\n    border-width: 0 0 1px 0;\n    border-color: ".concat(themeValues.borderColor, ";\n    border-style: solid;\n    border-radius: 0px;\n    transform-origin: 100% 0;\n\n    &:last-child {\n      border-width: 0;\n    }\n  ");
-  var RightIcon = styled__default.img(_templateObject$A(), function (_ref2) {
+  var RightIcon = styled__default.img(_templateObject$F(), function (_ref2) {
     var isMobile = _ref2.isMobile;
     return isMobile ? "14px" : "18px";
   }, function (_ref3) {
@@ -40068,7 +40232,7 @@ var backgroundColor$9 = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
-var linkColor$5 = {
+var linkColor$4 = {
   "default": "#357fb8",
   footer: "#ffffff"
 };
@@ -40084,22 +40248,22 @@ var lineHeight$6 = {
   "default": "1.5rem",
   footer: "1.25rem"
 };
-var fontWeight$8 = {
+var fontWeight$7 = {
   "default": FONT_WEIGHT_REGULAR,
   footer: FONT_WEIGHT_SEMIBOLD
 };
-var modalLinkHoverFocus$2 = {
-  "default": "outline: none; text-decoration: underline;",
+var modalLinkHoverFocus$1 = {
+  "default": "",
   footer: "outline: none; text-decoration: underline;"
 };
 var fallbackValues$B = {
   backgroundColor: backgroundColor$9,
-  linkColor: linkColor$5,
+  linkColor: linkColor$4,
   border: border$2,
   fontSize: fontSize$a,
   lineHeight: lineHeight$6,
-  fontWeight: fontWeight$8,
-  modalLinkHoverFocus: modalLinkHoverFocus$2
+  fontWeight: fontWeight$7,
+  modalLinkHoverFocus: modalLinkHoverFocus$1
 };
 
 var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
@@ -40114,6 +40278,22 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       variant = _ref.variant,
       themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
+    ModalLink: function ModalLink() {
+      return /*#__PURE__*/React__default.createElement(Text$1, {
+        variant: variant === "default" ? "pS" : "pXS",
+        onClick: function onClick() {
+          return toggleOpen(true);
+        },
+        color: themeValues.linkColor,
+        weight: themeValues.fontWeight,
+        hoverStyles: themeValues.modalLinkHoverFocus,
+        extraStyles: "cursor: pointer;",
+        tabIndex: "0",
+        onKeyPress: function onKeyPress(e) {
+          return e.key === "Enter" && toggleOpen(true);
+        }
+      }, link);
+    },
     modalOpen: isOpen,
     hideModal: function hideModal() {
       return toggleOpen(false);
@@ -40137,24 +40317,33 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       toggleAccepted(true);
       toggleOpen(false);
     }
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: variant === "default" ? "pS" : "pXS",
-    onClick: function onClick() {
-      return toggleOpen(true);
-    },
-    onKeyPress: function onKeyPress(e) {
-      return e.key === "Enter" && toggleOpen(true);
-    },
-    tabIndex: "0",
-    color: themeValues.linkColor,
-    weight: themeValues.fontWeight,
-    hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "cursor: pointer;"
-  }, link));
+  });
 };
 
 var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$B, "default");
 
+function _templateObject2$m() {
+  var data = _taggedTemplateLiteral([""]);
+
+  _templateObject2$m = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$G() {
+  var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
+
+  _templateObject$G = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var CheckboxWrapper$5 = styled__default.div(_templateObject$G());
+var ModalWrapper$1 = styled__default.div(_templateObject2$m());
+
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var onCheck = _ref.onCheck,
       isChecked = _ref.isChecked,
@@ -40168,24 +40357,54 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
       showTerms = _useState2[0],
       toggleShowTerms = _useState2[1];
 
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      checkboxFocused = _useState4[0],
+      focusCheckbox = _useState4[1];
+
+  var handleClick = function handleClick(e, func) {
+    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
+      func();
+    }
+  };
+
   return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row"
+  }, /*#__PURE__*/React__default.createElement(CheckboxWrapper$5, {
+    tabIndex: "0",
+    onFocus: function onFocus() {
+      return focusCheckbox(true);
+    },
+    onBlur: function onBlur() {
+      return focusCheckbox(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return handleClick(e, onCheck);
+    }
   }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "terms",
     error: error,
     checked: isChecked,
-    onChange: onCheck
-  }), /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Text$1, {
+    onChange: onCheck,
+    focused: checkboxFocused
+  })), /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     fontWeight: FONT_WEIGHT_BOLD
   }, "Terms and Conditions"), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
-  }, html), terms && /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
+  }, html), terms && /*#__PURE__*/React__default.createElement(ModalWrapper$1, {
+    tabIndex: "0",
+    onKeyDown: function onKeyDown(e) {
+      return handleClick(e, function () {
+        return toggleShowTerms(!showTerms);
+      });
+    }
+  }, /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
     link: "Learn More",
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms
-  }))));
+  })))));
 };
 
 var Timeout = function Timeout(_ref) {
@@ -40225,29 +40444,29 @@ var Timeout = function Timeout(_ref) {
 
 var Timeout$1 = withWindowSize(Timeout);
 
-var fontWeight$9 = "600";
+var fontWeight$8 = "600";
 var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor = BRIGHT_GREY;
 var imageBackgroundColor = MATISSE_BLUE;
 var fallbackValues$C = {
-  fontWeight: fontWeight$9,
+  fontWeight: fontWeight$8,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
   headerBackgroundColor: headerBackgroundColor,
   imageBackgroundColor: imageBackgroundColor
 };
 
-function _templateObject$B() {
+function _templateObject$H() {
   var data = _taggedTemplateLiteral(["\n  width: auto;\n  height: 215px;\n"]);
 
-  _templateObject$B = function _templateObject() {
+  _templateObject$H = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var WelcomeImage = styled__default.img(_templateObject$B());
+var WelcomeImage = styled__default.img(_templateObject$H());
 
 var WelcomeModule = function WelcomeModule(_ref) {
   var heading = _ref.heading,