@thecb/components 4.1.13 → 4.1.14-beta.0

package/dist/index.cjs.js

@@ -6121,10 +6121,11 @@ 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", "as", "dataQa", "children"]);
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"]);
 
   return /*#__PURE__*/React__default.createElement(TextSpan, _extends({
     fontSize: themeValues.fontSize,
@@ -6135,6 +6136,7 @@ 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)));
 };
@@ -18575,17 +18577,38 @@ 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
+    background: themeValues.backgroundColor,
+    extraStyles: "outline: none;"
   }, /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, null, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React__default.createElement(HiddenCheckbox, {
@@ -19108,7 +19131,6 @@ 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, ";"),
@@ -19122,7 +19144,8 @@ var Dropdown = function Dropdown(_ref9) {
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
     borderRadius: "2px",
-    extraStyles: "tabindex: 0; height: 48px;",
+    tabIndex: 0,
+    extraStyles: "height: 48px;",
     dataQa: placeholder
   }, /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
@@ -19202,7 +19225,7 @@ function _templateObject2$c() {
 }
 
 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"]);
+  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n  > * + * {\n    margin-top: 0.25rem;\n  }\n"]);
 
   _templateObject$o = function _templateObject() {
     return data;
@@ -19221,14 +19244,74 @@ var SelectField = styled__default.select(_templateObject3$6(), function (_ref2)
       showErrors = _ref2.showErrors;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : GHOST_GREY;
 }, FONT_WEIGHT_REGULAR, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? SEASHELL_WHITE : WHITE;
+  var themeValues = _ref3.themeValues;
+  return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
 }, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled ? DUSTY_GREY : MINESHAFT_GREY;
+  var themeValues = _ref4.themeValues;
+  return themeValues.color && themeValues.color;
 }, MATISSE_BLUE);
 var SelectOption = styled__default.option(_templateObject4$3());
 
+var linkColor$1 = {
+  "default": "".concat(MATISSE_BLUE),
+  disabled: "".concat(MATISSE_BLUE)
+};
+var formBackgroundColor = {
+  "default": "".concat(WHITE),
+  disabled: "".concat(WHITE),
+  checkout: "".concat(ATHENS_GREY),
+  collapsible: "".concat(ATHENS_GREY)
+};
+var inputBackgroundColor = {
+  "default": "".concat(WHITE),
+  disabled: "".concat(SEASHELL_WHITE)
+};
+var color$5 = {
+  "default": "".concat(MINESHAFT_GREY),
+  disabled: "".concat(DUSTY_GREY)
+};
+var labelColor = {
+  "default": "".concat(CHARADE_GREY),
+  disabled: "".concat(CHARADE_GREY)
+};
+var borderColor = {
+  "default": "".concat(GREY_CHATEAU),
+  disabled: "".concat(GREY_CHATEAU)
+};
+var lineHeight$2 = {
+  "default": "1rem",
+  disabled: "1rem"
+};
+var fontSize$5 = {
+  "default": "0.875rem",
+  disabled: "0.875rem"
+};
+var errorFontSize = {
+  "default": "0.75rem",
+  disabled: "0.75rem"
+};
+var fontWeight$2 = {
+  "default": "".concat(FONT_WEIGHT_REGULAR),
+  disabled: "".concat(FONT_WEIGHT_REGULAR)
+};
+var hoverFocusStyles = {
+  "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
+  disabled: "color: #6E727E;"
+};
+var fallbackValues$f = {
+  linkColor: linkColor$1,
+  formBackgroundColor: formBackgroundColor,
+  inputBackgroundColor: inputBackgroundColor,
+  color: color$5,
+  labelColor: labelColor,
+  borderColor: borderColor,
+  lineHeight: lineHeight$2,
+  fontSize: fontSize$5,
+  errorFontSize: errorFontSize,
+  fontWeight: fontWeight$2,
+  hoverFocusStyles: hoverFocusStyles
+};
+
 var FormSelect = function FormSelect(_ref) {
   var fieldActions = _ref.fieldActions,
       labelTextWhenNoError = _ref.labelTextWhenNoError,
@@ -19237,7 +19320,9 @@ var FormSelect = function FormSelect(_ref) {
       field = _ref.field,
       showErrors = _ref.showErrors,
       onChange = _ref.onChange,
-      dropdownMaxHeight = _ref.dropdownMaxHeight;
+      dropdownMaxHeight = _ref.dropdownMaxHeight,
+      disabledValues = _ref.disabledValues,
+      themeValues = _ref.themeValues;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19260,18 +19345,26 @@ var FormSelect = function FormSelect(_ref) {
   });
   return /*#__PURE__*/React__default.createElement(SelectContainer, {
     ref: dropdownRef
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    minWidth: "100%"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "center"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
+    as: "label",
     variant: "pS",
-    color: STORM_GREY,
-    weight: "400",
-    extraStyles: "margin-bottom: 4px;"
-  }, labelTextWhenNoError), /*#__PURE__*/React__default.createElement(Dropdown$1, {
+    color: themeValues.labelColor,
+    weight: themeValues.fontWeight,
+    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }"
+  }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
     maxHeight: dropdownMaxHeight,
     placeholder: options[0] ? options[0].text : "",
     options: options,
     value: field.rawValue,
+    disabledValues: disabledValues,
     isOpen: open,
-    isError: false,
+    isError: field.hasErrors && field.dirty || field.hasErrors && showErrors,
     onSelect: onChange ? function (value) {
       return onChange(value);
     } : function (value) {
@@ -19283,9 +19376,18 @@ var FormSelect = function FormSelect(_ref) {
   }), /*#__PURE__*/React__default.createElement(SelectLabel, {
     field: field,
     showErrors: showErrors
-  }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? errorMessages[field.errors[0]] : null));
+  }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
+    color: ERROR_COLOR,
+    variant: "pXS",
+    weight: themeValues.fontWeight,
+    extraStyles: "word-break: break-word;\n                font-family: Public Sans;\n                &::first-letter {\n                  text-transform: uppercase;\n                }"
+  }, errorMessages[field.errors[0]]) : /*#__PURE__*/React__default.createElement(Text$1, {
+    extraStyles: "height: ".concat(themeValues.lineHeight, ";")
+  })));
 };
 
+var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$f, "default");
+
 var options = [{
   text: "Afghanistan",
   value: "AF"
@@ -20036,7 +20138,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
       onChange = _ref.onChange;
-  return /*#__PURE__*/React__default.createElement(FormSelect, {
+  return /*#__PURE__*/React__default.createElement(FormSelect$1, {
     options: options,
     field: field,
     fieldActions: fieldActions,
@@ -20049,7 +20151,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$f = {
+var fallbackValues$g = {
   backgroundColor: backgroundColor$3,
   boxShadow: boxShadow
 };
@@ -20070,7 +20172,7 @@ var DisplayBox = function DisplayBox(_ref) {
   }, children));
 };
 
-var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$f);
+var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$g);
 
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
@@ -20417,64 +20519,64 @@ var src_1 = src.FormattedInput;
 var src_2 = src.createFormat;
 var src_3 = src.format;
 
-var linkColor$1 = {
+var linkColor$2 = {
   "default": "".concat(MATISSE_BLUE),
   disabled: "".concat(MATISSE_BLUE)
 };
-var formBackgroundColor = {
+var formBackgroundColor$1 = {
   "default": "".concat(WHITE),
   disabled: "".concat(WHITE),
   checkout: "".concat(ATHENS_GREY),
   collapsible: "".concat(ATHENS_GREY)
 };
-var inputBackgroundColor = {
+var inputBackgroundColor$1 = {
   "default": "".concat(WHITE),
   disabled: "".concat(SEASHELL_WHITE)
 };
-var color$5 = {
+var color$6 = {
   "default": "".concat(MINESHAFT_GREY),
   disabled: "".concat(DUSTY_GREY)
 };
-var labelColor = {
-  "default": "".concat(FIREFLY_GREY),
-  disabled: "".concat(FIREFLY_GREY)
+var labelColor$1 = {
+  "default": "".concat(CHARADE_GREY),
+  disabled: "".concat(CHARADE_GREY)
 };
-var borderColor = {
+var borderColor$1 = {
   "default": "".concat(GREY_CHATEAU),
   disabled: "".concat(GREY_CHATEAU)
 };
-var lineHeight$2 = {
+var lineHeight$3 = {
   "default": "1rem",
   disabled: "1rem"
 };
-var fontSize$5 = {
+var fontSize$6 = {
   "default": "0.875rem",
   disabled: "0.875rem"
 };
-var errorFontSize = {
+var errorFontSize$1 = {
   "default": "0.75rem",
   disabled: "0.75rem"
 };
-var fontWeight$2 = {
+var fontWeight$3 = {
   "default": "".concat(FONT_WEIGHT_REGULAR),
   disabled: "".concat(FONT_WEIGHT_REGULAR)
 };
-var hoverFocusStyles = {
+var hoverFocusStyles$1 = {
   "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6E727E;"
 };
-var fallbackValues$g = {
-  linkColor: linkColor$1,
-  formBackgroundColor: formBackgroundColor,
-  inputBackgroundColor: inputBackgroundColor,
-  color: color$5,
-  labelColor: labelColor,
-  borderColor: borderColor,
-  lineHeight: lineHeight$2,
-  fontSize: fontSize$5,
-  errorFontSize: errorFontSize,
-  fontWeight: fontWeight$2,
-  hoverFocusStyles: hoverFocusStyles
+var fallbackValues$h = {
+  linkColor: linkColor$2,
+  formBackgroundColor: formBackgroundColor$1,
+  inputBackgroundColor: inputBackgroundColor$1,
+  color: color$6,
+  labelColor: labelColor$1,
+  borderColor: borderColor$1,
+  lineHeight: lineHeight$3,
+  fontSize: fontSize$6,
+  errorFontSize: errorFontSize$1,
+  fontWeight: fontWeight$3,
+  hoverFocusStyles: hoverFocusStyles$1
 };
 
 function _templateObject4$4() {
@@ -20690,7 +20792,7 @@ var FormInput = function FormInput(_ref13) {
   }, decorator)));
 };
 
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$g, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$h, "default");
 
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
@@ -20740,9 +20842,9 @@ var FormContainer = function FormContainer(_ref) {
   }, rest), children);
 };
 
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$g, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$h, "default");
 
-var fontSize$6 = {
+var fontSize$7 = {
   "default": "1rem",
   radio: "1.0625rem"
 };
@@ -20750,14 +20852,14 @@ var padding$1 = {
   "default": "0",
   radio: "0.625rem 0"
 };
-var color$6 = {
+var color$7 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$h = {
-  fontSize: fontSize$6,
+var fallbackValues$i = {
+  fontSize: fontSize$7,
   padding: padding$1,
-  color: color$6
+  color: color$7
 };
 
 var FormattedAddress = function FormattedAddress(_ref) {
@@ -20797,11 +20899,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
 
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$h, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$i, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$i = {
+var fallbackValues$j = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -20854,7 +20956,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   }, "Autopay Enabled")));
 };
 
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$i, "default");
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$j, "default");
 
 function _templateObject3$8() {
   var data = _taggedTemplateLiteral(["\n  display: block;\n  top: auto;\n  bottom: 6px;\n  left: 2px;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  margin-top: 12px;\n  background-color: ", ";\n\n  &, &::before, &::after {\n    background-color: ", ";\n    width: 30px;\n    height: 3px;\n    position: absolute;\n    transition-property: transform;\n    transition-duration: 0.15s;\n    transition-timing-function: ease;\n  }\n\n  &::before, &::after {\n    content: \"\";\n    display: block;\n  }\n\n  &::before {\n    top: -10px;\n    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  }\n\n  &::after {\n    bottom: -10px;\n    top: -20px;\n    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                opacity 0.1s linear;\n  }\n\n  &.active, &.active::before, &.active::after {\n    background-color: ", ";\n  }\n\n  &.active {\n    transform: translate3d(0, -10px, 0) rotate(-45deg);\n    transition-delay: 0.22s;\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  &.active::after {\n    top: 0;\n    opacity: 0;\n    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                opacity: 0.1s 0.22s linear;\n  }\n\n  &.active::before {\n    top: 0;\n    transform: rotate(-90deg);\n    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n"]);
@@ -20971,14 +21073,14 @@ var Jumbo = function Jumbo(_ref) {
 
 var Jumbo$1 = withWindowSize(Jumbo);
 
-var fontWeight$3 = {
+var fontWeight$4 = {
   "default": "600",
   p: "600",
   pL: "600",
   h6: "700"
 };
-var fallbackValues$j = {
-  fontWeight: fontWeight$3
+var fallbackValues$k = {
+  fontWeight: fontWeight$4
 };
 
 var LabeledAmount = function LabeledAmount(_ref) {
@@ -21004,7 +21106,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   }, amount));
 };
 
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$j, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$k, "default");
 
 var weightTitle = {
   "default": "600",
@@ -21014,7 +21116,7 @@ var paragraphVariant = {
   "default": "pL",
   small: "p"
 };
-var fallbackValues$k = {
+var fallbackValues$l = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -21043,11 +21145,11 @@ var LineItem = function LineItem(_ref) {
   }, amount));
 };
 
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$k, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$l, "default");
 
-var color$7 = "#15749D";
-var fallbackValues$l = {
-  color: color$7
+var color$8 = "#15749D";
+var fallbackValues$m = {
+  color: color$8
 };
 
 function _templateObject2$g() {
@@ -21098,7 +21200,7 @@ var Spinner$1 = function Spinner(_ref4) {
   })));
 };
 
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$l);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$m);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -21512,7 +21614,7 @@ var PasswordRequirements = function PasswordRequirements(_ref) {
   }))));
 };
 
-var color$8 = {
+var color$9 = {
   "default": "".concat(CHARADE_GREY),
   large: "".concat(BRIGHT_GREY)
 };
@@ -21520,8 +21622,8 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$m = {
-  color: color$8,
+var fallbackValues$n = {
+  color: color$9,
   height: height$1
 };
 
@@ -21609,12 +21711,12 @@ var Placeholder = function Placeholder(_ref2) {
   }, text)))))))))));
 };
 
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$m, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$n, "default");
 
 var backgroundColor$4 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$n = {
+var fallbackValues$o = {
   backgroundColor: backgroundColor$4
 };
 
@@ -21642,11 +21744,11 @@ var ProcessingFee = function ProcessingFee(_ref) {
   }));
 };
 
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$n, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$o, "default");
 
 var activeColor$4 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
-var fallbackValues$o = {
+var fallbackValues$p = {
   activeColor: activeColor$4,
   inactiveColor: inactiveColor
 };
@@ -21742,16 +21844,16 @@ var RadioButton$1 = function RadioButton(_ref2) {
   })));
 };
 
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$o);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$p);
 
-var borderColor$1 = {
+var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU)
 };
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$p = {
-  borderColor: borderColor$1,
+var fallbackValues$q = {
+  borderColor: borderColor$2,
   borderSize: borderSize
 };
 
@@ -21767,7 +21869,7 @@ var SolidDivider = function SolidDivider(_ref) {
   });
 };
 
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$p, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$q, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -32332,7 +32434,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
       countryCode = _ref.countryCode;
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
-  return /*#__PURE__*/React__default.createElement(FormSelect, {
+  return /*#__PURE__*/React__default.createElement(FormSelect$1, {
     options: options,
     field: field,
     fieldActions: fieldActions,
@@ -32349,7 +32451,7 @@ var offBackground = "".concat(REGENT_GREY);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
 var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
-var fallbackValues$q = {
+var fallbackValues$r = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   white: white,
@@ -32551,7 +32653,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, label))));
 };
 
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$q);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$r);
 
 var background$1 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -34214,17 +34316,6 @@ 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;
 
@@ -34240,17 +34331,6 @@ 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 () {
@@ -34338,24 +34418,12 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  }), 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, {
+  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet,
-    focused: checkboxFocused
-  }))));
+    onChange: saveToWallet
+  })));
 };
 
 var formConfig = {
@@ -34483,7 +34551,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$r = {
+var fallbackValues$s = {
   titleColor: titleColor,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -34584,7 +34652,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, children))));
 };
 
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$r);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$s);
 
 var EditNameForm = function EditNameForm(_ref) {
   var fields = _ref.fields,
@@ -34658,16 +34726,16 @@ function _templateObject2$j() {
   return data;
 }
 
-function _templateObject$y() {
+function _templateObject$x() {
   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$y = function _templateObject() {
+  _templateObject$x = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var EditableListItem = styled__default.div(_templateObject$y(), WHITE, function (_ref) {
+var EditableListItem = styled__default.div(_templateObject$x(), WHITE, function (_ref) {
   var listItemSize = _ref.listItemSize;
   return listItemSize === "big" ? "120px" : "72px";
 });
@@ -34852,16 +34920,16 @@ function _templateObject2$k() {
   return data;
 }
 
-function _templateObject$z() {
+function _templateObject$y() {
   var data = _taggedTemplateLiteral(["\n  display: ", ";\n  flex-direction: column;\n  flex: 1;\n"]);
 
-  _templateObject$z = function _templateObject() {
+  _templateObject$y = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var EditableTableContainer = styled__default.div(_templateObject$z(), function (_ref) {
+var EditableTableContainer = styled__default.div(_templateObject$y(), function (_ref) {
   var hide = _ref.hide;
   return hide ? "none" : "flex";
 });
@@ -34973,17 +35041,6 @@ 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;
 
@@ -35000,17 +35057,6 @@ 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 () {
@@ -35036,24 +35082,12 @@ var EmailForm = function EmailForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  }), 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, {
+  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet,
-    focused: checkboxFocused
-  }))));
+    onChange: saveToWallet
+  })));
 };
 
 var formConfig$3 = {
@@ -35119,7 +35153,7 @@ ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$2 = "#ffffff";
 var backgroundColor$5 = "#182848";
-var fallbackValues$s = {
+var fallbackValues$t = {
   textColor: textColor$2,
   backgroundColor: backgroundColor$5
 };
@@ -35165,7 +35199,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
 
-var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$s));
+var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$t));
 
 var LoginForm = function LoginForm(_ref) {
   var _emailErrorMessages;
@@ -36397,8 +36431,7 @@ var getApplicationNode = function getApplicationNode() {
 };
 
 var Modal$1 = function Modal(_ref) {
-  var ModalLink = _ref.ModalLink,
-      hideModal = _ref.hideModal,
+  var hideModal = _ref.hideModal,
       continueAction = _ref.continueAction,
       cancelAction = _ref.cancelAction,
       modalOpen = _ref.modalOpen,
@@ -36420,12 +36453,13 @@ 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;
+      underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi,
+      children = _ref.children;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
 
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(ModalLink, null), modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
     onExit: hideModal,
     getApplicationNode: getApplicationNode,
     titleText: modalHeaderText,
@@ -36497,14 +36531,14 @@ var Modal$1 = function Modal(_ref) {
     variant: "primary",
     text: "Close",
     dataQa: "Close"
-  })))))))));
+  })))))))), children);
 };
 
-var fontSize$7 = {
+var fontSize$8 = {
   "default": "1.375rem",
   largeTitle: "1.75rem"
 };
-var fontWeight$4 = {
+var fontWeight$5 = {
   "default": "600",
   largeTitle: "700"
 };
@@ -36512,7 +36546,7 @@ var fontColor = {
   "default": CHARADE_GREY,
   largeTitle: CHARADE_GREY
 };
-var lineHeight$3 = {
+var lineHeight$4 = {
   "default": "2rem",
   largeTitle: "2rem"
 };
@@ -36540,11 +36574,11 @@ var backgroundColor$6 = {
   "default": WHITE,
   largeTitle: WHITE
 };
-var fallbackValues$t = {
-  fontSize: fontSize$7,
-  fontWeight: fontWeight$4,
+var fallbackValues$u = {
+  fontSize: fontSize$8,
+  fontWeight: fontWeight$5,
   fontColor: fontColor,
-  lineHeight: lineHeight$3,
+  lineHeight: lineHeight$4,
   textAlign: textAlign,
   titleType: titleType,
   titleSpacing: titleSpacing,
@@ -36581,7 +36615,7 @@ var Module = function Module(_ref) {
   }, children)));
 };
 
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$t, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$u, "default"));
 
 var backgroundColor$7 = {
   profile: "#3b414d",
@@ -36591,7 +36625,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$u = {
+var fallbackValues$v = {
   backgroundColor: backgroundColor$7,
   shadowColor: shadowColor
 };
@@ -36632,12 +36666,12 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$u, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$v, "profile");
 
-function _templateObject$B() {
+function _templateObject$z() {
   var data = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 72px;\n"]);
 
-  _templateObject$B = function _templateObject() {
+  _templateObject$z = function _templateObject() {
     return data;
   };
 
@@ -36673,7 +36707,7 @@ var menu = posed.div({
     }
   }
 });
-var ImposterMenu = styled__default(menu)(_templateObject$B());
+var ImposterMenu = styled__default(menu)(_templateObject$z());
 
 var NavMenuMobile = function NavMenuMobile(_ref) {
   var id = _ref.id,
@@ -36694,7 +36728,7 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$u, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$v, "profile");
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -38193,13 +38227,19 @@ var TitleModule = function TitleModule(_ref) {
   }, subtitle)));
 };
 
-var color$9 = "#15749D";
+var color$a = "#15749D";
 var hoverColor$4 = "#116285";
 var activeColor$5 = "#0E506D";
-var fallbackValues$v = {
-  color: color$9,
+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
+  activeColor: activeColor$5,
+  linkColor: linkColor$3,
+  fontWeight: fontWeight$6,
+  modalLinkHoverFocus: modalLinkHoverFocus
 };
 
 var AutopayModal = function AutopayModal(_ref) {
@@ -38229,34 +38269,6 @@ 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);
     },
@@ -38264,10 +38276,46 @@ var AutopayModal = function AutopayModal(_ref) {
       return toggleModal(false);
     },
     modalOpen: modalOpen
-  }, modalExtraProps));
+  }, 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")))));
 };
 
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$v);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$w);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -38824,7 +38872,7 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "pL"
 };
-var fallbackValues$w = {
+var fallbackValues$x = {
   backgroundColor: backgroundColor$8,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -39000,34 +39048,29 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$w, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$x, "default");
 
-var linkColor$2 = {
-  "default": "#357fb8",
-  footer: "#ffffff"
+var linkColor$4 = {
+  "default": "#357fb8"
 };
-var fontSize$8 = {
-  "default": "1rem",
-  footer: "0.875rem"
+var fontSize$9 = {
+  "default": "1rem"
 };
-var lineHeight$4 = {
-  "default": "1.5rem",
-  footer: "1.25rem"
+var lineHeight$5 = {
+  "default": "1.5rem"
 };
-var fontWeight$5 = {
-  "default": FONT_WEIGHT_REGULAR,
-  footer: FONT_WEIGHT_SEMIBOLD
+var fontWeight$7 = {
+  "default": FONT_WEIGHT_REGULAR
 };
-var modalLinkHoverFocus = {
-  "default": "",
-  footer: "outline: none; text-decoration: underline;"
+var modalLinkHoverFocus$1 = {
+  "default": "outline: none; text-decoration: underline;"
 };
-var fallbackValues$x = {
-  linkColor: linkColor$2,
-  fontSize: fontSize$8,
-  lineHeight: lineHeight$4,
-  fontWeight: fontWeight$5,
-  modalLinkHoverFocus: modalLinkHoverFocus
+var fallbackValues$y = {
+  linkColor: linkColor$4,
+  fontSize: fontSize$9,
+  lineHeight: lineHeight$5,
+  fontWeight: fontWeight$7,
+  modalLinkHoverFocus: modalLinkHoverFocus$1
 };
 
 var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
@@ -39039,25 +39082,8 @@ 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);
@@ -39082,32 +39108,23 @@ 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$x, "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 AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$y, "default");
 
 var PaymentFormACH = function PaymentFormACH(_ref) {
   var _routingNumberErrors, _accountNumberErrors;
@@ -39129,17 +39146,6 @@ 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 () {
@@ -39148,15 +39154,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),
-      showRouting = _useState4[0],
-      toggleShowRouting = _useState4[1];
-
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      showAccount = _useState6[0],
-      toggleShowAccount = _useState6[1];
+      showAccount = _useState4[0],
+      toggleShowAccount = _useState4[1];
 
   var nameErrors = _defineProperty({}, required.error, "Name is required");
 
@@ -39190,19 +39196,14 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     fieldActions: actions.fields.routingNumber,
     showErrors: showErrors,
     helperModal: function helperModal() {
-      return /*#__PURE__*/React__default.createElement(ModalWrapper, {
-        tabIndex: "0",
-        onKeyDown: function onKeyDown(e) {
-          return e.key === "Enter" && toggleShowAccount(!showRouting);
-        }
-      }, /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
+      return /*#__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);
@@ -39223,19 +39224,14 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     fieldActions: actions.fields.accountNumber,
     showErrors: showErrors,
     helperModal: function helperModal() {
-      return /*#__PURE__*/React__default.createElement(ModalWrapper, {
-        tabIndex: "0",
-        onKeyDown: function onKeyDown(e) {
-          return e.key === "Enter" && toggleShowAccount(!showAccount);
-        }
-      }, /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
+      return /*#__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);
@@ -39249,7 +39245,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  }), allowBankAccountType && /*#__PURE__*/React__default.createElement(FormSelect, {
+  }), allowBankAccountType && /*#__PURE__*/React__default.createElement(FormSelect$1, {
     labelTextWhenNoError: "Account type",
     options: [{
       text: "Select account type",
@@ -39271,24 +39267,12 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
     hidden: hideDefaultPayment
-  }), 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, {
+  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "bank checkbox",
     title: "Save bank account to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet,
-    focused: checkboxFocused
-  }))));
+    onChange: saveToWallet
+  })));
 };
 
 var formConfig$6 = {
@@ -39328,17 +39312,6 @@ 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);
@@ -39363,18 +39336,6 @@ 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 () {
@@ -39455,24 +39416,12 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  })), 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, {
+  })), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "credit card checkbox",
     title: "Save credit card to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet,
-    focused: checkboxFocused
-  }))));
+    onChange: saveToWallet
+  })));
 };
 
 var formConfig$7 = {
@@ -39510,17 +39459,6 @@ 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;
 
@@ -39536,17 +39474,6 @@ 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 () {
@@ -39570,24 +39497,12 @@ var PhoneForm = function PhoneForm(_ref) {
     onKeyUp: function onKeyUp(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  }), 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, {
+  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet,
-    focused: checkboxFocused
-  }))));
+    onChange: saveToWallet
+  })));
 };
 
 var formConfig$8 = {
@@ -39609,20 +39524,20 @@ PhoneForm.mapDispatchToProps = mapDispatchToProps$8;
 var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
-var borderColor$2 = "".concat(GREY_CHATEAU);
+var borderColor$3 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
-var fallbackValues$y = {
+var fallbackValues$z = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
-  borderColor: borderColor$2,
+  borderColor: borderColor$3,
   focusStyles: focusStyles
 };
 
-function _templateObject$F() {
+function _templateObject$A() {
   var data = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n    ", "\n    transition: opacity 0.3s ease;\n  "]);
 
-  _templateObject$F = function _templateObject() {
+  _templateObject$A = function _templateObject() {
     return data;
   };
 
@@ -39692,7 +39607,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$F(), function (_ref2) {
+  var RightIcon = styled__default.img(_templateObject$A(), function (_ref2) {
     var isMobile = _ref2.isMobile;
     return isMobile ? "14px" : "18px";
   }, function (_ref3) {
@@ -39802,7 +39717,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$y);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$z);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -40091,7 +40006,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$z = {
+var fallbackValues$A = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -40147,13 +40062,13 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$z);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$A);
 
 var backgroundColor$9 = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
-var linkColor$3 = {
+var linkColor$5 = {
   "default": "#357fb8",
   footer: "#ffffff"
 };
@@ -40161,30 +40076,30 @@ var border$2 = {
   "default": "#cdcdcd",
   footer: "#cdcdcd"
 };
-var fontSize$9 = {
+var fontSize$a = {
   "default": "1rem",
   footer: "0.875rem"
 };
-var lineHeight$5 = {
+var lineHeight$6 = {
   "default": "1.5rem",
   footer: "1.25rem"
 };
-var fontWeight$6 = {
+var fontWeight$8 = {
   "default": FONT_WEIGHT_REGULAR,
   footer: FONT_WEIGHT_SEMIBOLD
 };
-var modalLinkHoverFocus$1 = {
-  "default": "",
+var modalLinkHoverFocus$2 = {
+  "default": "outline: none; text-decoration: underline;",
   footer: "outline: none; text-decoration: underline;"
 };
-var fallbackValues$A = {
+var fallbackValues$B = {
   backgroundColor: backgroundColor$9,
-  linkColor: linkColor$3,
+  linkColor: linkColor$5,
   border: border$2,
-  fontSize: fontSize$9,
-  lineHeight: lineHeight$5,
-  fontWeight: fontWeight$6,
-  modalLinkHoverFocus: modalLinkHoverFocus$1
+  fontSize: fontSize$a,
+  lineHeight: lineHeight$6,
+  fontWeight: fontWeight$8,
+  modalLinkHoverFocus: modalLinkHoverFocus$2
 };
 
 var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
@@ -40199,22 +40114,6 @@ 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);
@@ -40238,32 +40137,23 @@ 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$A, "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 TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$B, "default");
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var onCheck = _ref.onCheck,
@@ -40278,54 +40168,24 @@ 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,
-    focused: checkboxFocused
-  })), /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Text$1, {
+    onChange: onCheck
+  }), /*#__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(ModalWrapper$1, {
-    tabIndex: "0",
-    onKeyDown: function onKeyDown(e) {
-      return handleClick(e, function () {
-        return toggleShowTerms(!showTerms);
-      });
-    }
-  }, /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
+  }, html), terms && /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
     link: "Learn More",
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms
-  })))));
+  }))));
 };
 
 var Timeout = function Timeout(_ref) {
@@ -40365,29 +40225,29 @@ var Timeout = function Timeout(_ref) {
 
 var Timeout$1 = withWindowSize(Timeout);
 
-var fontWeight$7 = "600";
+var fontWeight$9 = "600";
 var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor = BRIGHT_GREY;
 var imageBackgroundColor = MATISSE_BLUE;
-var fallbackValues$B = {
-  fontWeight: fontWeight$7,
+var fallbackValues$C = {
+  fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
   headerBackgroundColor: headerBackgroundColor,
   imageBackgroundColor: imageBackgroundColor
 };
 
-function _templateObject$H() {
+function _templateObject$B() {
   var data = _taggedTemplateLiteral(["\n  width: auto;\n  height: 215px;\n"]);
 
-  _templateObject$H = function _templateObject() {
+  _templateObject$B = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var WelcomeImage = styled__default.img(_templateObject$H());
+var WelcomeImage = styled__default.img(_templateObject$B());
 
 var WelcomeModule = function WelcomeModule(_ref) {
   var heading = _ref.heading,
@@ -40423,7 +40283,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   })))));
 };
 
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$B));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$C));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -40471,7 +40331,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#F6F6F9";
-var fallbackValues$C = {
+var fallbackValues$D = {
   pageBackground: pageBackground
 };
 
@@ -40518,7 +40378,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$C));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$D));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -40560,7 +40420,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$C));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$D));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -40600,7 +40460,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$C));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$D));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -40654,7 +40514,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$C));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$D));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -40725,7 +40585,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$C));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$D));
 
 
 
@@ -40795,7 +40655,7 @@ exports.FormContainer = FormContainer$1;
 exports.FormInput = FormInput$1;
 exports.FormInputColumn = FormInputColumn;
 exports.FormInputRow = FormInputRow;
-exports.FormSelect = FormSelect;
+exports.FormSelect = FormSelect$1;
 exports.FormattedAddress = FormattedAddress$1;
 exports.FormattedCreditCard = FormattedCreditCard$1;
 exports.Frame = Frame;