@thecb/components 4.3.15 → 4.4.0-beta.1

package/dist/index.cjs.js

@@ -40363,14 +40363,11 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       showErrors = _ref.showErrors,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+      isMobile = _ref.isMobile,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked,
       deniedCards = _ref.deniedCards;
-
-  var _useContext = React.useContext(styled.ThemeContext),
-      isMobile = _useContext.isMobile;
-
   React.useEffect(function () {
     if (deniedCards) {
       deniedCards.map(function (card) {
@@ -40434,8 +40431,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInputRow, {
-    breakpoint: isMobile ? "1000rem" : "21rem",
-    childGap: isMobile ? "0rem" : "1rem"
+    breakpoint: "20rem"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Expiration date (MM/YY)",
     errorMessages: expirationDateErrors,
@@ -40480,8 +40476,6 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
   })));
 };
 
-var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
-
 var formConfig$8 = {
   country: {
     defaultValue: "US",
@@ -40513,9 +40507,9 @@ var _createFormState$8 = createFormState(formConfig$8),
     mapStateToProps$9 = _createFormState$8.mapStateToProps,
     mapDispatchToProps$8 = _createFormState$8.mapDispatchToProps;
 
-PaymentFormCard$1.reducer = reducer$8;
-PaymentFormCard$1.mapStateToProps = mapStateToProps$9;
-PaymentFormCard$1.mapDispatchToProps = mapDispatchToProps$8;
+PaymentFormCard.reducer = reducer$8;
+PaymentFormCard.mapStateToProps = mapStateToProps$9;
+PaymentFormCard.mapDispatchToProps = mapDispatchToProps$8;
 
 var PhoneForm = function PhoneForm(_ref) {
   var _phoneErrorMessage;
@@ -41875,7 +41869,7 @@ exports.PasswordRequirements = PasswordRequirements;
 exports.PaymentButtonBar = PaymentButtonBar;
 exports.PaymentDetails = PaymentDetails$1;
 exports.PaymentFormACH = PaymentFormACH;
-exports.PaymentFormCard = PaymentFormCard$1;
+exports.PaymentFormCard = PaymentFormCard;
 exports.PaymentIcon = PaymentIcon;
 exports.PaymentMethodAddIcon = PaymentMethodAddIcon$1;
 exports.PaymentMethodIcon = PaymentMethodIcon$1;

package/package.json

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

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

@@ -1,5 +1,4 @@
-import React, { useEffect, useContext } from "react";
-import { ThemeContext } from "styled-components";
+import React, { useEffect } from "react";
 import { required, hasLength, matchesRegex } from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
@@ -21,7 +20,6 @@ import {
   FormInputRow
 } from "../../atoms/form-layouts";
 import { Box } from "../../atoms/layouts";
-import withWindowSize from "../../withWindowSize";
 
 const PaymentFormCard = ({
   variant = "default",
@@ -31,12 +29,12 @@ const PaymentFormCard = ({
   actions,
   showErrors,
   handleSubmit = noop,
+  isMobile,
   showWalletCheckbox,
   saveToWallet,
   walletCheckboxMarked,
   deniedCards
 }) => {
-  const { isMobile } = useContext(ThemeContext);
   useEffect(() => {
     if (deniedCards) {
       deniedCards.map(card =>
@@ -118,10 +116,7 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
         />
-        <FormInputRow
-          breakpoint={isMobile ? "1000rem" : "21rem"}
-          childGap={isMobile ? "0rem" : "1rem"}
-        >
+        <FormInputRow breakpoint="20rem">
           <FormInput
             labelTextWhenNoError="Expiration date (MM/YY)"
             errorMessages={expirationDateErrors}
@@ -177,4 +172,4 @@ const PaymentFormCard = ({
   );
 };
 
-export default withWindowSize(PaymentFormCard);
+export default PaymentFormCard;