@comicrelief/component-library 7.24.0 → 7.24.2

package/dist/components/Organisms/MarketingPreferencesDS/_TextInput.js

@@ -1,33 +1,35 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _Input = _interopRequireDefault(require("../../Atoms/Input/Input"));
-var _excluded = ["fieldName", "label", "optional", "fieldType", "formContext"];
-var TextInput = function TextInput(_ref) {
-  var fieldName = _ref.fieldName,
-    label = _ref.label,
-    optional = _ref.optional,
-    fieldType = _ref.fieldType,
-    formContext = _ref.formContext,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var errors = formContext.errors,
-    register = formContext.register;
-  var props = (0, _objectSpread2.default)({
+const TextInput = _ref => {
+  let {
+    fieldName,
+    label,
+    optional,
+    fieldType,
+    formContext,
+    ...rest
+  } = _ref;
+  const {
+    errors,
+    register
+  } = formContext;
+  const props = {
     name: fieldName,
     type: fieldType,
-    label: label,
+    label,
     placeholder: label,
     errorMsg: errors && errors[fieldName] && errors[fieldName].message,
-    optional: optional,
-    'aria-required': !optional
-  }, rest);
+    optional,
+    'aria-required': !optional,
+    ...rest
+  };
   return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, {
     ref: register
   }));

package/dist/components/Organisms/Membership/Form/Form.js

@@ -1,74 +1,48 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
 var _MoneyBox = _interopRequireDefault(require("../MoneyBox/MoneyBox"));
 var _Membership = require("../../../../utils/Membership");
 var _Membership2 = require("../Membership.style");
-var _excluded = ["data", "donateLink", "otherDescription", "clientID", "cartID", "mbshipID"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
-var Signup = function Signup(_ref) {
-  var regularGiving = _ref.data.regularGiving,
-    donateLink = _ref.donateLink,
-    otherDescription = _ref.otherDescription,
-    clientID = _ref.clientID,
-    cartID = _ref.cartID,
-    mbshipID = _ref.mbshipID,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)({
-      box1: '',
-      box2: '',
-      box3: ''
-    }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    moneyBoxes = _useState2[0],
-    setMoneyBoxes = _useState2[1];
+const Signup = _ref => {
+  let {
+    data: {
+      regularGiving
+    },
+    donateLink,
+    otherDescription,
+    clientID,
+    cartID,
+    mbshipID,
+    ...rest
+  } = _ref;
+  const [moneyBoxes, setMoneyBoxes] = (0, _react.useState)({
+    box1: '',
+    box2: '',
+    box3: ''
+  });
   // Highlight one the money buy box when the page load
-  var _useState3 = (0, _react.useState)(true),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isSelected = _useState4[0],
-    setIsSelected = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    errorMsg = _useState6[0],
-    setErrorMsg = _useState6[1];
-  var _useState7 = (0, _react.useState)(''),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    amountDonate = _useState8[0],
-    setAmountDonate = _useState8[1];
-  var _useState9 = (0, _react.useState)(''),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    userInput = _useState10[0],
-    setUserInput = _useState10[1];
-  var _useState11 = (0, _react.useState)(''),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    boxBorderColor = _useState12[0],
-    setBoxBorderColor = _useState12[1];
-  var _useState13 = (0, _react.useState)(false),
-    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    inputBorderColor = _useState14[0],
-    setInputBorderColor = _useState14[1];
-  var _useState15 = (0, _react.useState)(true),
-    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-    moneyBuyCopy = _useState16[0],
-    setMoneyBuyCopy = _useState16[1];
+  const [isSelected, setIsSelected] = (0, _react.useState)(true);
+  const [errorMsg, setErrorMsg] = (0, _react.useState)(false);
+  const [amountDonate, setAmountDonate] = (0, _react.useState)('');
+  const [userInput, setUserInput] = (0, _react.useState)('');
+  const [boxBorderColor, setBoxBorderColor] = (0, _react.useState)('');
+  const [inputBorderColor, setInputBorderColor] = (0, _react.useState)(false);
+  const [moneyBuyCopy, setMoneyBuyCopy] = (0, _react.useState)(true);
 
   // This function is triggered when one of the money buy box is selected
-  var selectMoneyBuy = function selectMoneyBuy(copy, value) {
+  const selectMoneyBuy = (copy, value) => {
     if (isSelected) setIsSelected(false);
     if (errorMsg) setErrorMsg(false);
     // Check if input is highlighted and his value matches one of the money buy box
-    var isUserInputMatch = userInput * 1 === value; // convert string to number string * 1
+    const isUserInputMatch = userInput * 1 === value; // convert string to number string * 1
     if (inputBorderColor && !isUserInputMatch) {
       setInputBorderColor(false);
       setUserInput('');
@@ -79,7 +53,7 @@ var Signup = function Signup(_ref) {
   };
 
   // Handle user other amount input
-  var handleChange = function handleChange(input, description) {
+  const handleChange = (input, description) => {
     if (!(0, _Membership.isAmountValid)(input)) {
       if (moneyBuyCopy) setMoneyBuyCopy(false);
       if (boxBorderColor) setBoxBorderColor(false);
@@ -95,7 +69,7 @@ var Signup = function Signup(_ref) {
     setInputBorderColor(true);
     setUserInput(input);
   };
-  var hightlightInput = function hightlightInput(value, description) {
+  const hightlightInput = (value, description) => {
     if (isSelected) setIsSelected(false);
     if (errorMsg) {
       setMoneyBuyCopy(false);
@@ -106,17 +80,18 @@ var Signup = function Signup(_ref) {
     }
     setInputBorderColor(true);
   };
-  (0, _react.useEffect)(function () {
-    regularGiving.moneybuys.map(function (moneyBuy, index) {
-      var box = "box".concat(index + 1);
+  (0, _react.useEffect)(() => {
+    regularGiving.moneybuys.map((moneyBuy, index) => {
+      const box = "box".concat(index + 1);
       // eslint-disable-next-line no-shadow
-      setMoneyBoxes(function (moneyBoxes) {
-        return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, moneyBoxes), {}, (0, _defineProperty2.default)({}, box, moneyBuy));
-      });
+      setMoneyBoxes(moneyBoxes => ({
+        ...moneyBoxes,
+        [box]: moneyBuy
+      }));
       return isSelected && index === 1 && (setMoneyBuyCopy(moneyBuy.description), setAmountDonate(moneyBuy.value));
     });
   }, [isSelected, regularGiving.moneybuys]);
-  var submitDonation = function submitDonation(event, amount, clientId, cartId, mbshipId, donateURL) {
+  const submitDonation = (event, amount, clientId, cartId, mbshipId, donateURL) => {
     event.preventDefault();
     if ((0, _Membership.isAmountValid)(amount) && !errorMsg) {
       (0, _Membership.handleDonateSubmission)(amount, clientId, cartId, mbshipId, donateURL);
@@ -127,27 +102,25 @@ var Signup = function Signup(_ref) {
   };
 
   // Create money buy boxes
-  var MoneyBoxes = regularGiving.moneybuys.map(function (_ref2, index) {
-    var value = _ref2.value,
-      description = _ref2.description;
+  const MoneyBoxes = regularGiving.moneybuys.map((_ref2, index) => {
+    let {
+      value,
+      description
+    } = _ref2;
     return /*#__PURE__*/_react.default.createElement(_MoneyBox.default, {
       isSelected: index === 1 && isSelected,
       boxBorderColor: boxBorderColor,
       isInputMatchBox: value,
       amount: value,
       description: "\xA3".concat(value),
-      setOtherAmount: function setOtherAmount() {
-        return selectMoneyBuy(description, value);
-      },
+      setOtherAmount: () => selectMoneyBuy(description, value),
       key: value,
       name: "".concat(mbshipID, "--moneyBuy").concat(index + 1),
       id: "".concat(mbshipID, "--moneyBuy-box").concat(index + 1)
     });
   });
   return /*#__PURE__*/_react.default.createElement(_Membership2.FormWrapper, null, /*#__PURE__*/_react.default.createElement(_Membership2.Form, {
-    onSubmit: function onSubmit(e) {
-      return submitDonation(e, amountDonate, clientID, cartID, mbshipID, donateLink);
-    }
+    onSubmit: e => submitDonation(e, amountDonate, clientID, cartID, mbshipID, donateLink)
   }, /*#__PURE__*/_react.default.createElement(_Membership2.OuterFieldset, null, /*#__PURE__*/_react.default.createElement(_Membership2.Legend, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h3"
   }, "Choose your monthly donation")), /*#__PURE__*/_react.default.createElement(_Membership2.MoneyBuys, null, MoneyBoxes), /*#__PURE__*/_react.default.createElement(_Membership2.FormFieldset, null, /*#__PURE__*/_react.default.createElement(_Membership2.Label, {
@@ -169,15 +142,9 @@ var Signup = function Signup(_ref) {
     pattern: "[^[0-9]+([,.][0-9]+)?$]" // this only applies on submit
     ,
     placeholder: "0.00",
-    onChange: function onChange(e) {
-      return handleChange(e.target.value, otherDescription);
-    },
-    onClick: function onClick(e) {
-      return hightlightInput(e.target.value, otherDescription);
-    },
-    onKeyPress: function onKeyPress(e) {
-      return (0, _Membership.onKeyPress)(e);
-    },
+    onChange: e => handleChange(e.target.value, otherDescription),
+    onClick: e => hightlightInput(e.target.value, otherDescription),
+    onKeyPress: e => (0, _Membership.onKeyPress)(e),
     "aria-label": "Input a different amount"
   }))), /*#__PURE__*/_react.default.createElement(_Membership2.Button, {
     as: "input",

package/dist/components/Organisms/Membership/Membership.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,20 +9,22 @@ var _react = _interopRequireDefault(require("react"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _Form = _interopRequireDefault(require("./Form/Form"));
 var _Membership = require("./Membership.style");
-var Membership = function Membership(_ref) {
-  var alt = _ref.alt,
-    cartID = _ref.cartID,
-    backgroundColor = _ref.backgroundColor,
-    donateLink = _ref.donateLink,
-    data = _ref.data,
-    title = _ref.title,
-    subtitle = _ref.subtitle,
-    otherDescription = _ref.otherDescription,
-    formAligntRight = _ref.formAligntRight,
-    images = _ref.images,
-    image = _ref.image,
-    imageLow = _ref.imageLow,
-    mbshipID = _ref.mbshipID;
+const Membership = _ref => {
+  let {
+    alt,
+    cartID,
+    backgroundColor,
+    donateLink,
+    data,
+    title,
+    subtitle,
+    otherDescription,
+    formAligntRight,
+    images,
+    image,
+    imageLow,
+    mbshipID
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Membership.Container, {
     formAligntRight: formAligntRight,
     backgroundColor: backgroundColor,

package/dist/components/Organisms/Membership/Membership.style.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,112 +11,142 @@ var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _size = require("../../../theme/shared/size");
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
-var Container = exports.Container = _styledComponents.default.div.withConfig({
+const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "Membershipstyle__Container",
   componentId: "sc-13acbel-0"
-})(["background-color:", ";position:relative;display:flex;justify-content:center;min-height:100vh;@media ", "{align-items:center;justify-content:inherit;min-height:750px;height:100vh;max-height:900px;flex-direction:", ";}"], function (_ref) {
-  var theme = _ref.theme,
-    backgroundColor = _ref.backgroundColor;
+})(["background-color:", ";position:relative;display:flex;justify-content:center;min-height:100vh;@media ", "{align-items:center;justify-content:inherit;min-height:750px;height:100vh;max-height:900px;flex-direction:", ";}"], _ref => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref;
   return theme.color(backgroundColor);
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.breakpoint('medium');
-}, function (_ref3) {
-  var formAligntRight = _ref3.formAligntRight;
+}, _ref3 => {
+  let {
+    formAligntRight
+  } = _ref3;
   return formAligntRight ? 'row-reverse' : 'row';
 });
-var BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.default).withConfig({
+const BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.default).withConfig({
   displayName: "Membershipstyle__BgImage",
   componentId: "sc-13acbel-1"
-})(["position:absolute;bottom:0;left:0;right:0;height:auto;:before{color:", ";content:'';position:absolute;width:100%;height:100%;box-shadow:inset 0px ", " ", " -", ";}@media ", "{height:100%;:before{content:none;}}"], function (_ref4) {
-  var theme = _ref4.theme,
-    backgroundColor = _ref4.backgroundColor;
+})(["position:absolute;bottom:0;left:0;right:0;height:auto;:before{color:", ";content:'';position:absolute;width:100%;height:100%;box-shadow:inset 0px ", " ", " -", ";}@media ", "{height:100%;:before{content:none;}}"], _ref4 => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref4;
   return theme.color(backgroundColor);
-}, (0, _spacing.default)('xl'), (0, _spacing.default)('l'), (0, _spacing.default)('l'), function (_ref5) {
-  var theme = _ref5.theme;
+}, (0, _spacing.default)('xl'), (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.breakpoint('medium');
 });
-var Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
+const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Membershipstyle__Wrapper",
   componentId: "sc-13acbel-2"
 })(["position:relative;max-width:320px;text-align:center;margin-bottom:50%;", "{margin:0 ", ";max-width:420px;}"], (0, _size.media)('medium'), (0, _spacing.default)('xxl'));
-var Header = exports.Header = _styledComponents.default.div.withConfig({
+const Header = exports.Header = _styledComponents.default.div.withConfig({
   displayName: "Membershipstyle__Header",
   componentId: "sc-13acbel-3"
 })(["padding:", " ", " 0;margin-bottom:", ";"], (0, _spacing.default)('l'), (0, _spacing.default)('md'), (0, _spacing.default)('l'));
-var FormWrapper = exports.FormWrapper = _styledComponents.default.div.withConfig({
+const FormWrapper = exports.FormWrapper = _styledComponents.default.div.withConfig({
   displayName: "Membershipstyle__FormWrapper",
   componentId: "sc-13acbel-4"
-})(["background-color:", ";box-shadow:0px ", " ", " rgba(0,0,0,0.3);height:450px;", "{height:430px;}"], function (_ref6) {
-  var theme = _ref6.theme;
+})(["background-color:", ";box-shadow:0px ", " ", " rgba(0,0,0,0.3);height:450px;", "{height:430px;}"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.color('white');
 }, (0, _spacing.default)('md'), (0, _spacing.default)('xl'), (0, _size.media)('medium'));
-var Error = exports.Error = (0, _styledComponents.default)(_Text.default).withConfig({
+const Error = exports.Error = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Membershipstyle__Error",
   componentId: "sc-13acbel-5"
-})(["color:", ";font-size:", ";font-weight:500;"], function (_ref7) {
-  var theme = _ref7.theme;
+})(["color:", ";font-size:", ";font-weight:500;"], _ref7 => {
+  let {
+    theme
+  } = _ref7;
   return theme.color('red');
 }, (0, _spacing.default)('md'));
-var Form = exports.Form = _styledComponents.default.form.withConfig({
+const Form = exports.Form = _styledComponents.default.form.withConfig({
   displayName: "Membershipstyle__Form",
   componentId: "sc-13acbel-6"
 })(["padding:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}"], (0, _spacing.default)('md'), (0, _spacing.default)('md'));
-var OuterFieldset = exports.OuterFieldset = _styledComponents.default.fieldset.withConfig({
+const OuterFieldset = exports.OuterFieldset = _styledComponents.default.fieldset.withConfig({
   displayName: "Membershipstyle__OuterFieldset",
   componentId: "sc-13acbel-7"
-})(["padding:0;margin:0;border:none;>:not(:last-child):not(legend){margin-bottom:", ";}"], (0, _spacing.default)('l'));
-var Legend = exports.Legend = _styledComponents.default.legend.withConfig({
+})(["padding:0;margin:0;border:none;> :not(:last-child):not(legend){margin-bottom:", ";}"], (0, _spacing.default)('l'));
+const Legend = exports.Legend = _styledComponents.default.legend.withConfig({
   displayName: "Membershipstyle__Legend",
   componentId: "sc-13acbel-8"
 })(["margin:0;padding:0;"]);
-var MoneyBuys = exports.MoneyBuys = _styledComponents.default.div.withConfig({
+const MoneyBuys = exports.MoneyBuys = _styledComponents.default.div.withConfig({
   displayName: "Membershipstyle__MoneyBuys",
   componentId: "sc-13acbel-9"
-})(["display:flex;justify-content:space-between;label{flex:0 0 30%;input{cursor:pointer;padding:", ";}:hover input{border-color:", ";}}"], (0, _spacing.default)('md'), function (_ref8) {
-  var theme = _ref8.theme;
+})(["display:flex;justify-content:space-between;label{flex:0 0 30%;input{cursor:pointer;padding:", ";}:hover input{border-color:", ";}}"], (0, _spacing.default)('md'), _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.color('red');
 });
-var FormFieldset = exports.FormFieldset = _styledComponents.default.div.withConfig({
+const FormFieldset = exports.FormFieldset = _styledComponents.default.div.withConfig({
   displayName: "Membershipstyle__FormFieldset",
   componentId: "sc-13acbel-10"
 })(["display:flex;align-items:center;"]);
-var Label = exports.Label = (0, _styledComponents.default)(_Text.default).withConfig({
+const Label = exports.Label = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Membershipstyle__Label",
   componentId: "sc-13acbel-11"
 })(["margin-right:auto;"]);
-var AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
+const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "Membershipstyle__AmountField",
   componentId: "sc-13acbel-12"
-})(["position:relative;flex:0 0 50%;font-weight:400;display:block;", "{flex:0 0 60%;}span{position:absolute;padding:0px 15px;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;}input{border:2px solid ", ";background:transparent;padding:", " ", " ", " ", ";", ":focus{border:2px solid ", ";}}"], (0, _size.media)('medium'), function (_ref9) {
-  var theme = _ref9.theme;
+})(["position:relative;flex:0 0 50%;font-weight:400;display:block;", "{flex:0 0 60%;}span{position:absolute;padding:0px 15px;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;}input{border:2px solid ", ";background:transparent;padding:", " ", " ", " ", ";", " :focus{border:2px solid ", ";}}"], (0, _size.media)('medium'), _ref9 => {
+  let {
+    theme
+  } = _ref9;
   return theme.color('grey_medium');
-}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), function (_ref10) {
-  var inputBorderColor = _ref10.inputBorderColor,
-    theme = _ref10.theme;
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref10 => {
+  let {
+    inputBorderColor,
+    theme
+  } = _ref10;
   return inputBorderColor && "border: 2px solid ".concat(theme.color('red'), ";");
-}, function (_ref11) {
-  var theme = _ref11.theme;
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
   return theme.color('red');
 });
-var Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withConfig({
+const Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Membershipstyle__Copy",
   componentId: "sc-13acbel-13"
 })(["line-height:1.5;"]);
-var Button = exports.Button = _styledComponents.default.button.withConfig({
+const Button = exports.Button = _styledComponents.default.button.withConfig({
   displayName: "Membershipstyle__Button",
   componentId: "sc-13acbel-14"
-})(["width:100%;color:", ";font-size:", ";font-weight:bold;cursor:pointer;padding:", " ", ";background:", ";border:none;border-radius:100px;:active,:focus,:hover{background-color:", ";}", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], function (_ref12) {
-  var theme = _ref12.theme;
+})(["width:100%;color:", ";font-size:", ";font-weight:bold;cursor:pointer;padding:", " ", ";background:", ";border:none;border-radius:100px;:active,:focus,:hover{background-color:", ";}", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.color('white');
-}, function (_ref13) {
-  var theme = _ref13.theme;
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
   return theme.fontSize('s');
-}, (0, _spacing.default)('md'), (0, _spacing.default)('sm'), function (_ref14) {
-  var theme = _ref14.theme,
-    color = _ref14.color;
+}, (0, _spacing.default)('md'), (0, _spacing.default)('sm'), _ref14 => {
+  let {
+    theme,
+    color
+  } = _ref14;
   return color ? theme.color(color) : theme.color('red');
-}, function (_ref15) {
-  var theme = _ref15.theme;
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
   return theme.color('coral_dark');
 }, (0, _size.media)('medium'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));

package/dist/components/Organisms/Membership/Membership.test.js

@@ -1,14 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Membership = _interopRequireDefault(require("./Membership"));
 var _data = require("../../../styleguide/data/data");
 var _data2 = _interopRequireDefault(require("./dev-data/data"));
-it("renders correctly", function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Membership.default, {
+it("renders correctly", () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Membership.default, {
     alt: "Background image",
     backgroundColor: "orange_light",
     formAligntRight: false,
@@ -22,5 +22,5 @@ it("renders correctly", function () {
     subtitle: "Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.",
     otherDescription: "Your donation will help us fund amazing projects in the UK and around the world."
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c6 {\n      font-size: 1.5rem;\n      line-height: 1.5rem;\n      text-transform: inherit;\n      font-weight: 800;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c7 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c12 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c16 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c22 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: 500;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c14 {\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n      width: 100%;\n    }\n\n    .c17 {\n      margin-bottom: 0.5rem;\n    }\n\n    .c19 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c19:focus {\n      border: 1px solid #666;\n    }\n\n    .c18 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c15 {\n      display: block;\n    }\n\n    .c15 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n    }\n\n    .c20 {\n      display: block;\n    }\n\n    .c20 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n      border-color: #E52630;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 {\n      background-color: #FEE3CC;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      min-height: 100vh;\n    }\n\n    .c2 {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: auto;\n    }\n\n    .c2:before {\n      color: #FEE3CC;\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-shadow: inset 0px 4rem 2rem -2rem;\n    }\n\n    .c4 {\n      position: relative;\n      max-width: 320px;\n      text-align: center;\n      margin-bottom: 50%;\n    }\n\n    .c5 {\n      padding: 2rem 1rem 0;\n      margin-bottom: 2rem;\n    }\n\n    .c8 {\n      background-color: #FFFFFF;\n      box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n      height: 450px;\n    }\n\n    .c9 {\n      padding: 1rem;\n    }\n\n    .c9 h3 {\n      margin-top: 1rem;\n    }\n\n    .c9 input {\n      max-width: 100%;\n      margin: 0;\n    }\n\n    .c10 {\n      padding: 0;\n      margin: 0;\n      border: none;\n    }\n\n    .c10 >:not(:last-child):not(legend) {\n      margin-bottom: 2rem;\n    }\n\n    .c11 {\n      margin: 0;\n      padding: 0;\n    }\n\n    .c13 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: justify;\n      -webkit-justify-content: space-between;\n      -ms-flex-pack: justify;\n      justify-content: space-between;\n    }\n\n    .c13 label {\n      -webkit-flex: 0 0 30%;\n      -ms-flex: 0 0 30%;\n      flex: 0 0 30%;\n    }\n\n    .c13 label input {\n      cursor: pointer;\n      padding: 1rem;\n    }\n\n    .c13 label:hover input {\n      border-color: #E52630;\n    }\n\n    .c21 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c23 {\n      margin-right: auto;\n    }\n\n    .c24 {\n      position: relative;\n      -webkit-flex: 0 0 50%;\n      -ms-flex: 0 0 50%;\n      flex: 0 0 50%;\n      font-weight: 400;\n      display: block;\n    }\n\n    .c24 span {\n      position: absolute;\n      padding: 0px 15px;\n      font-size: 20px;\n      top: 50%;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      left: 0px;\n      font-weight: 500;\n    }\n\n    .c24 input {\n      border: 2px solid #E1E2E3;\n      background: transparent;\n      padding: 0.5rem 1rem 0.5rem 2rem;\n    }\n\n    .c24 input:focus {\n      border: 2px solid #E52630;\n    }\n\n    .c26 {\n      line-height: 1.5;\n    }\n\n    .c25 {\n      width: 100%;\n      color: #FFFFFF;\n      font-size: 1rem;\n      font-weight: bold;\n      cursor: pointer;\n      padding: 1rem 0.5rem;\n      background: #E52630;\n      border: none;\n      border-radius: 100px;\n    }\n\n    .c25:active,\n    .c25:focus,\n    .c25:hover {\n      background-color: #961D35;\n    }\n\n    @media (min-width:740px) {\n      .c19 {\n        max-width: 290px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        -webkit-align-items: center;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        align-items: center;\n        -webkit-box-pack: inherit;\n        -webkit-justify-content: inherit;\n        -ms-flex-pack: inherit;\n        justify-content: inherit;\n        min-height: 750px;\n        height: 100vh;\n        max-height: 900px;\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        height: 100%;\n      }\n\n      .c2:before {\n        content: none;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        margin: 0 8rem;\n        max-width: 420px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c8 {\n        height: 430px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c24 {\n        -webkit-flex: 0 0 60%;\n        -ms-flex: 0 0 60%;\n        flex: 0 0 60%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c25 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n      id=\"mship-1\"\n    >\n      <div\n        className=\"c1 c2\"\n        height=\"100%\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"Background image\"\n          className=\"c3 lazyload\"\n          data-src={null}\n          height=\"100%\"\n          width=\"100%\"\n        />\n      </div>\n      <div\n        className=\"c4\"\n      >\n        <div\n          className=\"c5\"\n        >\n          <h2\n            className=\"c6\"\n            color=\"inherit\"\n            size=\"l\"\n          >\n            Help someone like Jordan see a better tomorrow\n          </h2>\n          <p\n            className=\"c7\"\n            color=\"inherit\"\n            size=\"s\"\n          >\n            Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n          </p>\n        </div>\n        <div\n          className=\"c8\"\n        >\n          <form\n            className=\"c9\"\n            onSubmit={[Function]}\n          >\n            <fieldset\n              className=\"c10\"\n            >\n              <legend\n                className=\"c11\"\n              >\n                <h3\n                  className=\"c12\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Choose your monthly donation\n                </h3>\n              </legend>\n              <div\n                className=\"c13\"\n              >\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box1\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box1\"\n                      aria-label=\"\xA35\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box1\"\n                      name=\"mship-1--moneyBuy1\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 5\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c20\"\n                  htmlFor=\"mship-1--moneyBuy-box2\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box2\"\n                      aria-label=\"\xA310\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box2\"\n                      name=\"mship-1--moneyBuy2\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 10\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box3\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box3\"\n                      aria-label=\"\xA320\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box3\"\n                      name=\"mship-1--moneyBuy3\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 20\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <div\n                className=\"c21\"\n              >\n                <span\n                  className=\"c22 c23\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Other amount\n                </span>\n                <label\n                  className=\"c14 c24\"\n                  htmlFor=\"mship-1--MoneyBuy-userInput\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\xA3\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--MoneyBuy-userInput\"\n                      aria-label=\"Input a different amount\"\n                      className=\"c19\"\n                      id=\"mship-1--MoneyBuy-userInput\"\n                      max=\"25000\"\n                      min=\"1\"\n                      name=\"membership_amount\"\n                      onChange={[Function]}\n                      onClick={[Function]}\n                      onKeyPress={[Function]}\n                      pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n                      placeholder=\"0.00\"\n                      required={false}\n                      step=\"0.01\"\n                      type=\"number\"\n                      value=\"\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <input\n                className=\"c25\"\n                type=\"submit\"\n                value=\"Donate\"\n              />\n              <p\n                className=\"c26\"\n              />\n            </fieldset>\n          </form>\n        </div>\n      </div>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c6 {\n      font-size: 1.5rem;\n      line-height: 1.5rem;\n      text-transform: inherit;\n      font-weight: 800;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c7 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c12 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c16 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c22 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: 500;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c14 {\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n      width: 100%;\n    }\n\n    .c17 {\n      margin-bottom: 0.5rem;\n    }\n\n    .c19 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c19:focus {\n      border: 1px solid #666;\n    }\n\n    .c18 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c15 {\n      display: block;\n    }\n\n    .c15 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n    }\n\n    .c20 {\n      display: block;\n    }\n\n    .c20 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n      border-color: #E52630;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 {\n      background-color: #FEE3CC;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      min-height: 100vh;\n    }\n\n    .c2 {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: auto;\n    }\n\n    .c2:before {\n      color: #FEE3CC;\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-shadow: inset 0px 4rem 2rem -2rem;\n    }\n\n    .c4 {\n      position: relative;\n      max-width: 320px;\n      text-align: center;\n      margin-bottom: 50%;\n    }\n\n    .c5 {\n      padding: 2rem 1rem 0;\n      margin-bottom: 2rem;\n    }\n\n    .c8 {\n      background-color: #FFFFFF;\n      box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n      height: 450px;\n    }\n\n    .c9 {\n      padding: 1rem;\n    }\n\n    .c9 h3 {\n      margin-top: 1rem;\n    }\n\n    .c9 input {\n      max-width: 100%;\n      margin: 0;\n    }\n\n    .c10 {\n      padding: 0;\n      margin: 0;\n      border: none;\n    }\n\n    .c10 > :not(:last-child):not(legend) {\n      margin-bottom: 2rem;\n    }\n\n    .c11 {\n      margin: 0;\n      padding: 0;\n    }\n\n    .c13 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: justify;\n      -webkit-justify-content: space-between;\n      -ms-flex-pack: justify;\n      justify-content: space-between;\n    }\n\n    .c13 label {\n      -webkit-flex: 0 0 30%;\n      -ms-flex: 0 0 30%;\n      flex: 0 0 30%;\n    }\n\n    .c13 label input {\n      cursor: pointer;\n      padding: 1rem;\n    }\n\n    .c13 label:hover input {\n      border-color: #E52630;\n    }\n\n    .c21 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c23 {\n      margin-right: auto;\n    }\n\n    .c24 {\n      position: relative;\n      -webkit-flex: 0 0 50%;\n      -ms-flex: 0 0 50%;\n      flex: 0 0 50%;\n      font-weight: 400;\n      display: block;\n    }\n\n    .c24 span {\n      position: absolute;\n      padding: 0px 15px;\n      font-size: 20px;\n      top: 50%;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      left: 0px;\n      font-weight: 500;\n    }\n\n    .c24 input {\n      border: 2px solid #E1E2E3;\n      background: transparent;\n      padding: 0.5rem 1rem 0.5rem 2rem;\n    }\n\n    .c24 input:focus {\n      border: 2px solid #E52630;\n    }\n\n    .c26 {\n      line-height: 1.5;\n    }\n\n    .c25 {\n      width: 100%;\n      color: #FFFFFF;\n      font-size: 1rem;\n      font-weight: bold;\n      cursor: pointer;\n      padding: 1rem 0.5rem;\n      background: #E52630;\n      border: none;\n      border-radius: 100px;\n    }\n\n    .c25:active,\n    .c25:focus,\n    .c25:hover {\n      background-color: #961D35;\n    }\n\n    @media (min-width:740px) {\n      .c19 {\n        max-width: 290px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        -webkit-align-items: center;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        align-items: center;\n        -webkit-box-pack: inherit;\n        -webkit-justify-content: inherit;\n        -ms-flex-pack: inherit;\n        justify-content: inherit;\n        min-height: 750px;\n        height: 100vh;\n        max-height: 900px;\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        height: 100%;\n      }\n\n      .c2:before {\n        content: none;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        margin: 0 8rem;\n        max-width: 420px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c8 {\n        height: 430px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c24 {\n        -webkit-flex: 0 0 60%;\n        -ms-flex: 0 0 60%;\n        flex: 0 0 60%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c25 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n      id=\"mship-1\"\n    >\n      <div\n        className=\"c1 c2\"\n        height=\"100%\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"Background image\"\n          className=\"c3 lazyload\"\n          data-src={null}\n          height=\"100%\"\n          width=\"100%\"\n        />\n      </div>\n      <div\n        className=\"c4\"\n      >\n        <div\n          className=\"c5\"\n        >\n          <h2\n            className=\"c6\"\n            color=\"inherit\"\n            size=\"l\"\n          >\n            Help someone like Jordan see a better tomorrow\n          </h2>\n          <p\n            className=\"c7\"\n            color=\"inherit\"\n            size=\"s\"\n          >\n            Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n          </p>\n        </div>\n        <div\n          className=\"c8\"\n        >\n          <form\n            className=\"c9\"\n            onSubmit={[Function]}\n          >\n            <fieldset\n              className=\"c10\"\n            >\n              <legend\n                className=\"c11\"\n              >\n                <h3\n                  className=\"c12\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Choose your monthly donation\n                </h3>\n              </legend>\n              <div\n                className=\"c13\"\n              >\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box1\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box1\"\n                      aria-label=\"\xA35\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box1\"\n                      name=\"mship-1--moneyBuy1\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 5\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c20\"\n                  htmlFor=\"mship-1--moneyBuy-box2\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box2\"\n                      aria-label=\"\xA310\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box2\"\n                      name=\"mship-1--moneyBuy2\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 10\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box3\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box3\"\n                      aria-label=\"\xA320\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box3\"\n                      name=\"mship-1--moneyBuy3\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 20\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <div\n                className=\"c21\"\n              >\n                <span\n                  className=\"c22 c23\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Other amount\n                </span>\n                <label\n                  className=\"c14 c24\"\n                  htmlFor=\"mship-1--MoneyBuy-userInput\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\xA3\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--MoneyBuy-userInput\"\n                      aria-label=\"Input a different amount\"\n                      className=\"c19\"\n                      id=\"mship-1--MoneyBuy-userInput\"\n                      max=\"25000\"\n                      min=\"1\"\n                      name=\"membership_amount\"\n                      onChange={[Function]}\n                      onClick={[Function]}\n                      onKeyPress={[Function]}\n                      pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n                      placeholder=\"0.00\"\n                      required={false}\n                      step=\"0.01\"\n                      type=\"number\"\n                      value=\"\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <input\n                className=\"c25\"\n                type=\"submit\"\n                value=\"Donate\"\n              />\n              <p\n                className=\"c26\"\n              />\n            </fieldset>\n          </form>\n        </div>\n      </div>\n    </div>\n  ");
 });