@thecb/components 4.3.12 → 4.3.13

package/dist/index.cjs.js

@@ -15886,10 +15886,19 @@ function _assertThisInitialized(self) {
   return self;
 }
 
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
+  _setPrototypeOf(subClass, superClass);
 }
 
 function _getPrototypeOf(o) {
@@ -15899,15 +15908,6 @@ function _getPrototypeOf(o) {
   return _getPrototypeOf(o);
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
 function _isNativeFunction(fn) {
   return Function.toString.call(fn).indexOf("[native code]") !== -1;
 }
@@ -15918,7 +15918,7 @@ function _isNativeReflectConstruct() {
   if (typeof Proxy === "function") return true;
 
   try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
     return true;
   } catch (e) {
     return false;
@@ -16058,7 +16058,9 @@ var ERRORS = {
   "73": "Please provide a valid CSS variable.\n\n",
   "74": "CSS variable not found and no default was provided.\n\n",
   "75": "important requires a valid style object, got a %s instead.\n\n",
-  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
+  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n\n",
+  "77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
+  "78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
 };
 /**
  * super basic version of sprintf
@@ -40361,11 +40363,14 @@ 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) {
@@ -40429,7 +40434,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInputRow, {
-    breakpoint: "20rem"
+    breakpoint: isMobile ? "1000rem" : "21rem",
+    childGap: isMobile ? "0rem" : "1rem"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Expiration date (MM/YY)",
     errorMessages: expirationDateErrors,
@@ -40474,6 +40480,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
   })));
 };
 
+var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
+
 var formConfig$8 = {
   country: {
     defaultValue: "US",
@@ -40505,9 +40513,9 @@ var _createFormState$8 = createFormState(formConfig$8),
     mapStateToProps$9 = _createFormState$8.mapStateToProps,
     mapDispatchToProps$8 = _createFormState$8.mapDispatchToProps;
 
-PaymentFormCard.reducer = reducer$8;
-PaymentFormCard.mapStateToProps = mapStateToProps$9;
-PaymentFormCard.mapDispatchToProps = mapDispatchToProps$8;
+PaymentFormCard$1.reducer = reducer$8;
+PaymentFormCard$1.mapStateToProps = mapStateToProps$9;
+PaymentFormCard$1.mapDispatchToProps = mapDispatchToProps$8;
 
 var PhoneForm = function PhoneForm(_ref) {
   var _phoneErrorMessage;
@@ -41867,7 +41875,7 @@ exports.PasswordRequirements = PasswordRequirements;
 exports.PaymentButtonBar = PaymentButtonBar;
 exports.PaymentDetails = PaymentDetails$1;
 exports.PaymentFormACH = PaymentFormACH;
-exports.PaymentFormCard = PaymentFormCard;
+exports.PaymentFormCard = PaymentFormCard$1;
 exports.PaymentIcon = PaymentIcon;
 exports.PaymentMethodAddIcon = PaymentMethodAddIcon$1;
 exports.PaymentMethodIcon = PaymentMethodIcon$1;

package/package.json

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