@thecb/components 4.1.3 → 4.1.6

package/dist/index.cjs.js

@@ -17991,7 +17991,7 @@ var textLineHeight = {
   "default": "2rem"
 };
 var textColor = {
-  "default": "".concat(STORM_GREY)
+  "default": "".concat(CHARADE_GREY)
 };
 var disabledCheckColor = {
   "default": "".concat(GHOST_GREY, ";")
@@ -18212,10 +18212,10 @@ var Checkbox = function Checkbox(_ref4) {
   }, /*#__PURE__*/React__default.createElement("polyline", {
     points: "20 6 9 17 4 12"
   })))), /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "pL",
+    variant: "p",
     weight: themeValues.textFontWeight,
     color: themeValues.textColor,
-    extraStyles: "margin-left: 0.5rem"
+    extraStyles: "margin-left: 1rem"
   }, title)));
 };
 
@@ -18505,7 +18505,7 @@ function _templateObject3$5() {
 }
 
 function _templateObject2$b() {
-  var data = _taggedTemplateLiteral(["\n  transform-origin: 0 0;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 8px 0 8px;\n  position: absolute;\n  width: 100%;\n  max-height: 400px;\n  overflow-y: scroll;\n  z-index: 1;\n  box-sizing: border-box;\n  &:focus {\n    outline: none;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  transform-origin: 0 0;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 8px 0 8px;\n  position: absolute;\n  width: 100%;\n  max-height: ", ";\n  overflow-y: scroll;\n  z-index: 1;\n  box-sizing: border-box;\n  &:focus {\n    outline: none;\n  }\n"]);
 
   _templateObject2$b = function _templateObject2() {
     return data;
@@ -18527,44 +18527,48 @@ var IconWrapper = styled__default.div(_templateObject$n(), function (_ref) {
   var open = _ref.open;
   return open ? "transform: rotate(-180deg)" : "";
 });
-var DropdownContentWrapper = styled__default.div(_templateObject2$b(), GREY_CHATEAU, WHITE);
-var DropdownItemWrapper = styled__default.div(_templateObject3$5(), function (_ref2) {
-  var selected = _ref2.selected,
-      themeValues = _ref2.themeValues;
+var DropdownContentWrapper = styled__default.div(_templateObject2$b(), GREY_CHATEAU, WHITE, function (_ref2) {
+  var maxHeight = _ref2.maxHeight;
+  return maxHeight || "400px";
+});
+var DropdownItemWrapper = styled__default.div(_templateObject3$5(), function (_ref3) {
+  var selected = _ref3.selected,
+      themeValues = _ref3.themeValues;
   return selected ? themeValues.selectedColor : WHITE;
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? "default" : "pointer";
 }, function (_ref4) {
-  var selected = _ref4.selected,
-      disabled = _ref4.disabled,
-      themeValues = _ref4.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+  var disabled = _ref4.disabled;
+  return disabled ? "default" : "pointer";
 }, function (_ref5) {
   var selected = _ref5.selected,
       disabled = _ref5.disabled,
       themeValues = _ref5.themeValues;
   return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+}, function (_ref6) {
+  var selected = _ref6.selected,
+      disabled = _ref6.disabled,
+      themeValues = _ref6.themeValues;
+  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
 });
-var SearchInput = styled__default.input(_templateObject4$2(), function (_ref6) {
-  var themeValues = _ref6.themeValues;
+var SearchInput = styled__default.input(_templateObject4$2(), function (_ref7) {
+  var themeValues = _ref7.themeValues;
   return themeValues.hoverColor && themeValues.hoverColor;
 });
 
-var Dropdown = function Dropdown(_ref7) {
+var Dropdown = function Dropdown(_ref8) {
   var _options$find;
 
-  var placeholder = _ref7.placeholder,
-      options = _ref7.options,
-      value = _ref7.value,
-      isOpen = _ref7.isOpen,
-      isError = _ref7.isError,
-      onSelect = _ref7.onSelect,
-      _ref7$disabledValues = _ref7.disabledValues,
-      disabledValues = _ref7$disabledValues === void 0 ? [] : _ref7$disabledValues,
-      _ref7$onClick = _ref7.onClick,
-      onClick = _ref7$onClick === void 0 ? noop : _ref7$onClick,
-      themeValues = _ref7.themeValues;
+  var placeholder = _ref8.placeholder,
+      options = _ref8.options,
+      value = _ref8.value,
+      isOpen = _ref8.isOpen,
+      isError = _ref8.isError,
+      onSelect = _ref8.onSelect,
+      _ref8$disabledValues = _ref8.disabledValues,
+      disabledValues = _ref8$disabledValues === void 0 ? [] : _ref8$disabledValues,
+      _ref8$onClick = _ref8.onClick,
+      onClick = _ref8$onClick === void 0 ? noop : _ref8$onClick,
+      themeValues = _ref8.themeValues,
+      maxHeight = _ref8.maxHeight;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18728,6 +18732,7 @@ var Dropdown = function Dropdown(_ref7) {
   })) === null || _options$find === void 0 ? void 0 : _options$find.text : placeholder), /*#__PURE__*/React__default.createElement(IconWrapper, {
     open: isOpen
   }, /*#__PURE__*/React__default.createElement(DropdownIcon, null)))), isOpen ? /*#__PURE__*/React__default.createElement(DropdownContentWrapper, {
+    maxHeight: maxHeight,
     open: isOpen,
     ref: dropdownRef,
     tabIndex: 0
@@ -18823,7 +18828,8 @@ var FormSelect = function FormSelect(_ref) {
       options = _ref.options,
       field = _ref.field,
       showErrors = _ref.showErrors,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      dropdownMaxHeight = _ref.dropdownMaxHeight;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18852,6 +18858,7 @@ var FormSelect = function FormSelect(_ref) {
     weight: "400",
     extraStyles: "margin-bottom: 4px;"
   }, labelTextWhenNoError), /*#__PURE__*/React__default.createElement(Dropdown$1, {
+    maxHeight: dropdownMaxHeight,
     placeholder: options[0] ? options[0].text : "",
     options: options,
     value: field.rawValue,
@@ -33799,6 +33806,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;
 
@@ -33809,7 +33827,21 @@ var AddressForm = function AddressForm(_ref) {
       clearOnDismount = _ref.clearOnDismount,
       showErrors = _ref.showErrors,
       _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
+      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+      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();
+    }
+  };
 
   if (clearOnDismount) {
     React.useEffect(function () {
@@ -33882,7 +33914,24 @@ 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, {
+    name: "address checkbox",
+    title: "Save address to wallet",
+    checked: walletCheckboxMarked,
+    onChange: saveToWallet,
+    focused: checkboxFocused
+  }))));
 };
 
 var formConfig = {
@@ -34185,16 +34234,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";
 });
@@ -34379,16 +34428,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";
 });
@@ -34500,6 +34549,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;
 
@@ -34511,7 +34571,21 @@ var EmailForm = function EmailForm(_ref) {
       showErrors = _ref.showErrors,
       guestCheckout = _ref.guestCheckout,
       _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
+      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+      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();
+    }
+  };
 
   if (clearOnDismount) {
     React.useEffect(function () {
@@ -34538,7 +34612,24 @@ 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, {
+    name: "email checkbox",
+    title: "Save email address to wallet",
+    checked: walletCheckboxMarked,
+    onChange: saveToWallet,
+    focused: checkboxFocused
+  }))));
 };
 
 var formConfig$3 = {
@@ -36117,10 +36208,10 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
 
 var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$u, "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;
   };
 
@@ -36156,7 +36247,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,
@@ -38569,16 +38660,27 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
 
 var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$x, "default");
 
-function _templateObject$A() {
+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$A = function _templateObject() {
+  _templateObject$C = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var ModalWrapper = styled__default.div(_templateObject$A());
+var ModalWrapper = styled__default.div(_templateObject$C());
+var CheckboxWrapper$2 = styled__default.div(_templateObject2$l());
 
 var PaymentFormACH = function PaymentFormACH(_ref) {
   var _routingNumberErrors, _accountNumberErrors;
@@ -38595,7 +38697,21 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       actions = _ref.actions,
       showErrors = _ref.showErrors,
       _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
+      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+      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();
+    }
+  };
 
   if (clearOnDismount) {
     React.useEffect(function () {
@@ -38605,15 +38721,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");
 
@@ -38728,7 +38844,24 @@ 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, {
+    name: "bank checkbox",
+    title: "Save bank account to wallet",
+    checked: walletCheckboxMarked,
+    onChange: saveToWallet,
+    focused: checkboxFocused
+  }))));
 };
 
 var formConfig$6 = {
@@ -38768,6 +38901,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);
@@ -38786,7 +38930,22 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       showErrors = _ref.showErrors,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
-      isMobile = _ref.isMobile;
+      isMobile = _ref.isMobile,
+      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 () {
@@ -38851,6 +39010,23 @@ 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, {
+    name: "credit card checkbox",
+    title: "Save credit card to wallet",
+    checked: walletCheckboxMarked,
+    onChange: saveToWallet,
+    focused: checkboxFocused
   }))));
 };
 
@@ -38885,6 +39061,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;
 
@@ -38895,7 +39082,21 @@ var PhoneForm = function PhoneForm(_ref) {
       clearOnDismount = _ref.clearOnDismount,
       showErrors = _ref.showErrors,
       _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
+      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+      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();
+    }
+  };
 
   if (clearOnDismount) {
     React.useEffect(function () {
@@ -38920,7 +39121,24 @@ 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, {
+    name: "phone checkbox",
+    title: "Save phone number to wallet",
+    checked: walletCheckboxMarked,
+    onChange: saveToWallet,
+    focused: checkboxFocused
+  }))));
 };
 
 var formConfig$8 = {
@@ -38952,10 +39170,10 @@ var fallbackValues$y = {
   focusStyles: focusStyles
 };
 
-function _templateObject$B() {
+function _templateObject$F() {
   var data = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n    ", "\n    transition: opacity 0.3s ease;\n  "]);
 
-  _templateObject$B = function _templateObject() {
+  _templateObject$F = function _templateObject() {
     return data;
   };
 
@@ -39025,7 +39243,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$B(), function (_ref2) {
+  var RightIcon = styled__default.img(_templateObject$F(), function (_ref2) {
     var isMobile = _ref2.isMobile;
     return isMobile ? "14px" : "18px";
   }, function (_ref3) {
@@ -39576,27 +39794,27 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
 
 var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$A, "default");
 
-function _templateObject2$l() {
+function _templateObject2$m() {
   var data = _taggedTemplateLiteral([""]);
 
-  _templateObject2$l = function _templateObject2() {
+  _templateObject2$m = function _templateObject2() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject$C() {
+function _templateObject$G() {
   var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
 
-  _templateObject$C = function _templateObject() {
+  _templateObject$G = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var CheckboxWrapper = styled__default.div(_templateObject$C());
-var ModalWrapper$1 = styled__default.div(_templateObject2$l());
+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,
@@ -39624,7 +39842,7 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
 
   return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row"
-  }, /*#__PURE__*/React__default.createElement(CheckboxWrapper, {
+  }, /*#__PURE__*/React__default.createElement(CheckboxWrapper$5, {
     tabIndex: "0",
     onFocus: function onFocus() {
       return focusCheckbox(true);
@@ -39711,16 +39929,16 @@ var fallbackValues$B = {
   imageBackgroundColor: imageBackgroundColor
 };
 
-function _templateObject$D() {
+function _templateObject$H() {
   var data = _taggedTemplateLiteral(["\n  width: auto;\n  height: 215px;\n"]);
 
-  _templateObject$D = function _templateObject() {
+  _templateObject$H = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var WelcomeImage = styled__default.img(_templateObject$D());
+var WelcomeImage = styled__default.img(_templateObject$H());
 
 var WelcomeModule = function WelcomeModule(_ref) {
   var heading = _ref.heading,

package/package.json

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

package/src/components/atoms/checkbox/Checkbox.js

@@ -130,10 +130,10 @@ const Checkbox = ({
         </StyledCheckbox>
       </CheckboxContainer>
       <Text
-        variant="pL"
+        variant="p"
         weight={themeValues.textFontWeight}
         color={themeValues.textColor}
-        extraStyles={`margin-left: 0.5rem`}
+        extraStyles={`margin-left: 1rem`}
       >
         {title}
       </Text>

package/src/components/atoms/checkbox/Checkbox.theme.js

@@ -2,17 +2,17 @@ import {
   WHITE,
   TRANSPARENT,
   GHOST_GREY,
-  STORM_GREY,
   SEASHELL_WHITE,
   MATISSE_BLUE,
-  RED
+  RED,
+  CHARADE_GREY
 } from "../../../constants/colors";
 
 const backgroundColor = { default: `${TRANSPARENT}` };
 const textFontSize = { default: "1.1rem" };
 const textFontWeight = { default: "400" };
 const textLineHeight = { default: "2rem" };
-const textColor = { default: `${STORM_GREY}` };
+const textColor = { default: `${CHARADE_GREY}` };
 const disabledCheckColor = { default: `${GHOST_GREY};` };
 const checkColor = { default: `${WHITE};` };
 const errorStyles = { default: `border: 1px solid ${RED};` };

package/src/components/atoms/dropdown/Dropdown.js

@@ -31,7 +31,7 @@ const DropdownContentWrapper = styled.div`
   padding: 8px 0 8px;
   position: absolute;
   width: 100%;
-  max-height: 400px;
+  max-height: ${({ maxHeight }) => maxHeight || "400px"};
   overflow-y: scroll;
   z-index: 1;
   box-sizing: border-box;
@@ -88,7 +88,8 @@ const Dropdown = ({
   onSelect,
   disabledValues = [],
   onClick = noop,
-  themeValues
+  themeValues,
+  maxHeight
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -242,7 +243,12 @@ const Dropdown = ({
         </Stack>
       </Box>
       {isOpen ? (
-        <DropdownContentWrapper open={isOpen} ref={dropdownRef} tabIndex={0}>
+        <DropdownContentWrapper
+          maxHeight={maxHeight}
+          open={isOpen}
+          ref={dropdownRef}
+          tabIndex={0}
+        >
           <Stack childGap="0">
             {filteredOptions.map((choice, i) => (
               <DropdownItemWrapper

package/src/components/atoms/form-select/FormSelect.js

@@ -11,7 +11,8 @@ const FormSelect = ({
   options,
   field,
   showErrors,
-  onChange
+  onChange,
+  dropdownMaxHeight
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -40,6 +41,7 @@ const FormSelect = ({
         {labelTextWhenNoError}
       </Text>
       <Dropdown
+        maxHeight={dropdownMaxHeight}
         placeholder={options[0] ? options[0].text : ""}
         options={options}
         value={field.rawValue}

package/src/components/molecules/address-form/AddressForm.js

@@ -1,6 +1,8 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { required, hasLength } from "redux-freeform";
+import styled from "styled-components";
 import StateProvinceDropdown from "../../atoms/state-province-dropdown";
+import Checkbox from "../../atoms/checkbox";
 // import CountryDropdown from "../../atoms/country-dropdown";
 import { zipFormat } from "../../../util/formats";
 import { noop } from "../../../util/general";
@@ -10,14 +12,28 @@ import {
   FormInputColumn
 } from "../../atoms/form-layouts";
 
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
+
 const AddressForm = ({
   variant = "default",
   fields,
   actions,
   clearOnDismount,
   showErrors,
-  handleSubmit = noop
+  handleSubmit = noop,
+  showWalletCheckbox,
+  saveToWallet,
+  walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -103,6 +119,22 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
+        {showWalletCheckbox && (
+          <CheckboxWrapper
+            tabIndex="0"
+            onFocus={() => focusCheckbox(true)}
+            onBlur={() => focusCheckbox(false)}
+            onKeyDown={e => handleClick(e, saveToWallet)}
+          >
+            <Checkbox
+              name="address checkbox"
+              title="Save address to wallet"
+              checked={walletCheckboxMarked}
+              onChange={saveToWallet}
+              focused={checkboxFocused}
+            />
+          </CheckboxWrapper>
+        )}
       </FormInputColumn>
     </FormContainer>
   );

package/src/components/molecules/email-form/EmailForm.js

@@ -1,13 +1,19 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
 import { required, isProbablyEmail } from "redux-freeform";
 import {
   FormInput,
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
+import Checkbox from "../../atoms/checkbox";
 import Paragraph from "../../atoms/paragraph";
 import { noop } from "../../../util/general";
 
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
+
 const EmailForm = ({
   variant = "default",
   clearOnDismount,
@@ -15,8 +21,18 @@ const EmailForm = ({
   actions,
   showErrors,
   guestCheckout,
-  handleSubmit = noop
+  handleSubmit = noop,
+  showWalletCheckbox,
+  saveToWallet,
+  walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
+
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -42,6 +58,22 @@ const EmailForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
+        {showWalletCheckbox && (
+          <CheckboxWrapper
+            tabIndex="0"
+            onFocus={() => focusCheckbox(true)}
+            onBlur={() => focusCheckbox(false)}
+            onKeyDown={e => handleClick(e, saveToWallet)}
+          >
+            <Checkbox
+              name="email checkbox"
+              title="Save email address to wallet"
+              checked={walletCheckboxMarked}
+              onChange={saveToWallet}
+              focused={checkboxFocused}
+            />
+          </CheckboxWrapper>
+        )}
       </FormInputColumn>
     </FormContainer>
   );

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

@@ -18,6 +18,10 @@ import { noop } from "../../../util/general";
 
 const ModalWrapper = styled.div``;
 
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
+
 const PaymentFormACH = ({
   variant = "default",
   defaultMethod,
@@ -28,8 +32,17 @@ const PaymentFormACH = ({
   fields,
   actions,
   showErrors,
-  handleSubmit = noop
+  handleSubmit = noop,
+  showWalletCheckbox,
+  saveToWallet,
+  walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -162,6 +175,22 @@ const PaymentFormACH = ({
             hidden={hideDefaultPayment}
           />
         )}
+        {showWalletCheckbox && (
+          <CheckboxWrapper
+            tabIndex="0"
+            onFocus={() => focusCheckbox(true)}
+            onBlur={() => focusCheckbox(false)}
+            onKeyDown={e => handleClick(e, saveToWallet)}
+          >
+            <Checkbox
+              name="bank checkbox"
+              title="Save bank account to wallet"
+              checked={walletCheckboxMarked}
+              onChange={saveToWallet}
+              focused={checkboxFocused}
+            />
+          </CheckboxWrapper>
+        )}
       </FormInputColumn>
     </FormContainer>
   );

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

@@ -1,5 +1,7 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
 import { required, hasLength, matchesRegex } from "redux-freeform";
+import Checkbox from "../../atoms/checkbox";
 import { checkCardBrand, noop } from "../../../util/general";
 import { expirationDateFormat, creditCardFormat } from "../../../util/formats";
 import {
@@ -10,6 +12,10 @@ import {
 } from "../../atoms/form-layouts";
 import { Box } from "../../atoms/layouts";
 
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
+
 const nameOnCardErrors = {
   [required.error]: "Name is required"
 };
@@ -39,8 +45,17 @@ const PaymentFormCard = ({
   actions,
   showErrors,
   handleSubmit = noop,
-  isMobile
+  isMobile,
+  showWalletCheckbox,
+  saveToWallet,
+  walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
   useEffect(() => {
     if (clearOnDismount) {
       return () => actions.form.clear();
@@ -105,6 +120,22 @@ const PaymentFormCard = ({
             />
           </Box>
         )}
+        {showWalletCheckbox && (
+          <CheckboxWrapper
+            tabIndex="0"
+            onFocus={() => focusCheckbox(true)}
+            onBlur={() => focusCheckbox(false)}
+            onKeyDown={e => handleClick(e, saveToWallet)}
+          >
+            <Checkbox
+              name="credit card checkbox"
+              title="Save credit card to wallet"
+              checked={walletCheckboxMarked}
+              onChange={saveToWallet}
+              focused={checkboxFocused}
+            />
+          </CheckboxWrapper>
+        )}
       </FormInputColumn>
     </FormContainer>
   );

package/src/components/molecules/phone-form/PhoneForm.js

@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import { phoneFormats, formatDelimiter } from "../../../util/formats";
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
 import { required, hasLength } from "redux-freeform";
 import { createFormat } from "formatted-input";
 import {
@@ -7,7 +7,13 @@ import {
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
+import Checkbox from "../../atoms/checkbox";
 import { noop } from "../../../util/general";
+import { phoneFormats, formatDelimiter } from "../../../util/formats";
+
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
 
 const PhoneForm = ({
   variant = "default",
@@ -15,8 +21,18 @@ const PhoneForm = ({
   actions,
   clearOnDismount,
   showErrors,
-  handleSubmit = noop
+  handleSubmit = noop,
+  showWalletCheckbox,
+  saveToWallet,
+  walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
+
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -37,6 +53,22 @@ const PhoneForm = ({
           formatter={createFormat(phoneFormats, formatDelimiter)}
           onKeyUp={e => e.key === "Enter" && handleSubmit(e)}
         />
+        {showWalletCheckbox && (
+          <CheckboxWrapper
+            tabIndex="0"
+            onFocus={() => focusCheckbox(true)}
+            onBlur={() => focusCheckbox(false)}
+            onKeyDown={e => handleClick(e, saveToWallet)}
+          >
+            <Checkbox
+              name="phone checkbox"
+              title="Save phone number to wallet"
+              checked={walletCheckboxMarked}
+              onChange={saveToWallet}
+              focused={checkboxFocused}
+            />
+          </CheckboxWrapper>
+        )}
       </FormInputColumn>
     </FormContainer>
   );