@comicrelief/component-library 7.24.1 → 7.25.0

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

@@ -1,12 +1,11 @@
 "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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _PopUpComponent = _interopRequireDefault(require("./PopUpComponent"));
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
@@ -14,68 +13,52 @@ var _MoneyBuy = _interopRequireDefault(require("../MoneyBuy/MoneyBuy"));
 var _Membership = require("../../../../utils/Membership");
 var _Donate = require("../Donate.style");
 var _GivingSelector = _interopRequireDefault(require("../GivingSelector/GivingSelector"));
-var _excluded = ["data", "donateLink", "otherAmountText", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText", "submitButtonColor", "otherAmountValue"];
-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 _ref$data = _ref.data,
-    singleGiving = _ref$data.singleGiving,
-    regularGiving = _ref$data.regularGiving,
-    donateLink = _ref.donateLink,
-    otherAmountText = _ref.otherAmountText,
-    clientID = _ref.clientID,
-    cartID = _ref.cartID,
-    mbshipID = _ref.mbshipID,
-    noMoneyBuys = _ref.noMoneyBuys,
-    PopUpText = _ref.PopUpText,
-    chooseAmountText = _ref.chooseAmountText,
-    submitButtonColor = _ref.submitButtonColor,
-    otherAmountValue = _ref.otherAmountValue,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)('single'),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    givingType = _useState2[0],
-    setGivingType = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    errorMsg = _useState4[0],
-    setErrorMsg = _useState4[1];
-  var _useState5 = (0, _react.useState)(10),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    amountDonate = _useState6[0],
-    setAmountDonate = _useState6[1];
-  var _useState7 = (0, _react.useState)(true),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    moneyBuyCopy = _useState8[0],
-    setMoneyBuyCopy = _useState8[1];
-  var _useState9 = (0, _react.useState)(false),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    popOpen = _useState10[0],
-    setPopOpen = _useState10[1];
+const Signup = _ref => {
+  let {
+    data: {
+      singleGiving,
+      regularGiving
+    },
+    donateLink,
+    otherAmountText,
+    clientID,
+    cartID,
+    mbshipID,
+    noMoneyBuys,
+    PopUpText,
+    chooseAmountText,
+    submitButtonColor,
+    otherAmountValue,
+    additionalSingleCopy,
+    additionalMonthlyCopy,
+    ...rest
+  } = _ref;
+  const [givingType, setGivingType] = (0, _react.useState)('single');
+  const [errorMsg, setErrorMsg] = (0, _react.useState)(false);
+  const [amountDonate, setAmountDonate] = (0, _react.useState)(10);
+  const [moneyBuyCopy, setMoneyBuyCopy] = (0, _react.useState)(true);
+  const [popOpen, setPopOpen] = (0, _react.useState)(false);
   // In order to keep track of whether the user has ever been shown the popup
-  var _useState11 = (0, _react.useState)(false),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    popUpShown = _useState12[0],
-    setPopUpShown = _useState12[1];
-  (0, _react.useEffect)(function () {
+  const [popUpShown, setPopUpShown] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
     // If a specific 'other amount' has been passed down, use it,
     // otherwise assign based on the associated moneybuys:
     if (otherAmountValue) {
       setAmountDonate(otherAmountValue);
     } else {
-      var _givingData = givingType === 'single' ? singleGiving : regularGiving;
+      const givingData = givingType === 'single' ? singleGiving : regularGiving;
 
       // Check the 2nd moneybuy exists before using it;
       // 'philantrophy' carts have been set up to use a single moneybuy.
       // See ENG-1685 for more details
-      var thisAmount = _givingData.moneybuys[1] ? _givingData.moneybuys[1].value : _givingData.moneybuys[0].value;
+      const thisAmount = givingData.moneybuys[1] ? givingData.moneybuys[1].value : givingData.moneybuys[0].value;
       setAmountDonate(thisAmount);
     }
   }, [givingType, singleGiving, regularGiving, otherAmountValue]);
-  (0, _react.useEffect)(function () {
-    var givingData = givingType === 'single' ? singleGiving : regularGiving;
-    var moneyBuyNewDescription = otherAmountText;
-    givingData.moneybuys.map(function (moneyBuy, index) {
+  (0, _react.useEffect)(() => {
+    const givingData = givingType === 'single' ? singleGiving : regularGiving;
+    let moneyBuyNewDescription = otherAmountText;
+    givingData.moneybuys.map((moneyBuy, index) => {
       if (moneyBuy.value === amountDonate) {
         moneyBuyNewDescription = moneyBuy.description;
       }
@@ -92,10 +75,10 @@ var Signup = function Signup(_ref) {
 
   // Updates our flag that differentiates between the popup
   // being *currently* open and it *ever* having been shown to user
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (popOpen && !popUpShown) setPopUpShown(true);
   }, [popOpen, popUpShown]);
-  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, givingType, popUpShown);
@@ -106,21 +89,21 @@ var Signup = function Signup(_ref) {
   };
 
   // Update the local state if the prop has been set and changed
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (otherAmountValue) {
       setAmountDonate(otherAmountValue);
     }
   }, [otherAmountValue, setAmountDonate]);
 
   // Create money buy boxes
-  var givingData = givingType === 'single' ? singleGiving : regularGiving;
-  var showGivingSelector = singleGiving !== null && regularGiving !== null;
+  const givingData = givingType === 'single' ? singleGiving : regularGiving;
+  const showGivingSelector = singleGiving !== null && regularGiving !== null;
 
   // Create ref for amount input
-  var amountRef = (0, _react.useRef)(null);
+  const amountRef = (0, _react.useRef)(null);
   // Create ref for amount button
-  var buttonRef = (0, _react.useRef)(null);
-  var handleClickOutside = (0, _react.useCallback)(function (event) {
+  const buttonRef = (0, _react.useRef)(null);
+  const handleClickOutside = (0, _react.useCallback)(event => {
     if (!errorMsg) {
       return;
     }
@@ -131,23 +114,23 @@ var Signup = function Signup(_ref) {
       // Check the 2nd moneybuy exists before using it;
       // 'philantrophy' carts have been set up to use a single moneybuy.
       // See ENG-1685 for more details
-      var thisAmount = givingData.moneybuys[1] ? givingData.moneybuys[1].value : givingData.moneybuys[0].value;
+      const thisAmount = givingData.moneybuys[1] ? givingData.moneybuys[1].value : givingData.moneybuys[0].value;
       setAmountDonate(thisAmount);
     }
   }, [errorMsg, givingData.moneybuys]);
 
   // Listen for click outside custom amount input if there is no value entered.
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     // Bind the event listener
     document.addEventListener('mousedown', handleClickOutside);
-    return function () {
+    return () => {
       // Unbind the event listener on clean up
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [errorMsg, handleClickOutside]);
 
   // Create function to conditionally render button text
-  var renderButtonText = function renderButtonText() {
+  const renderButtonText = () => {
     if (errorMsg) {
       return 'Donate';
     }
@@ -156,33 +139,32 @@ var Signup = function Signup(_ref) {
     }
     return "Donate \xA3".concat(amountDonate, " monthly");
   };
+  const showAdditionalSingleCopy = givingType === 'single' && additionalSingleCopy;
+  const showAdditionalMonthlyCopy = givingType === 'monthly' && additionalMonthlyCopy;
+  const additionalCopy = showAdditionalSingleCopy || showAdditionalMonthlyCopy;
   return /*#__PURE__*/_react.default.createElement(_Donate.FormWrapper, null, showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {
     givingType: givingType,
-    changeGivingType: function changeGivingType(data) {
-      return setGivingType(data);
-    },
+    changeGivingType: data => setGivingType(data),
     setPopOpen: setPopOpen,
     mbshipID: mbshipID
   }), popOpen && /*#__PURE__*/_react.default.createElement(_PopUpComponent.default, {
     PopUpText: PopUpText,
     setPopOpen: setPopOpen
   }), /*#__PURE__*/_react.default.createElement(_Donate.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(_Donate.OuterFieldset, null, /*#__PURE__*/_react.default.createElement(_Donate.Legend, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "span",
     size: "l",
     weight: "bold"
-  }, chooseAmountText || "".concat(noMoneyBuys ? 'Enter' : 'Choose', " an amount to give"))), !noMoneyBuys && /*#__PURE__*/_react.default.createElement(_Donate.MoneyBuys, null, givingData.moneybuys.map(function (_ref2, index) {
-    var value = _ref2.value;
+  }, chooseAmountText || "".concat(noMoneyBuys ? 'Enter' : 'Choose', " an amount to give"))), !noMoneyBuys && /*#__PURE__*/_react.default.createElement(_Donate.MoneyBuys, null, givingData.moneybuys.map((_ref2, index) => {
+    let {
+      value
+    } = _ref2;
     return /*#__PURE__*/_react.default.createElement(_MoneyBuy.default, {
       isSelected: amountDonate === value,
       amount: value.toString(),
       description: "\xA3".concat((0, _Membership.amountFormatter)(value)),
-      setOtherAmount: function setOtherAmount() {
-        return setAmountDonate(value);
-      },
+      setOtherAmount: () => setAmountDonate(value),
       key: value,
       name: "".concat(mbshipID, "--moneyBuy").concat(index + 1),
       id: "".concat(mbshipID, "--moneyBuy-box").concat(index + 1)
@@ -206,9 +188,7 @@ var Signup = function Signup(_ref) {
     pattern: "[^[0-9]+([,.][0-9]+)?$]" // this only applies on submit
     ,
     placeholder: "0.00",
-    onChange: function onChange(e) {
-      return setAmountDonate(e.target.value.trim());
-    },
+    onChange: e => setAmountDonate(e.target.value.trim()),
     "aria-label": "Input a different amount",
     ref: amountRef
   }))), amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Donate.Copy, {
@@ -216,7 +196,9 @@ var Signup = function Signup(_ref) {
   }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate, " ")), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
     className: "error--amount",
     tag: "p"
-  }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
+  }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), additionalCopy && /*#__PURE__*/_react.default.createElement("p", {
+    className: "additional-copy"
+  }, /*#__PURE__*/_react.default.createElement("strong", null, additionalCopy)), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     color: submitButtonColor
   }, errorMsg ? 'Donate' : "Donate \xA3".concat(amountDonate)) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
@@ -228,6 +210,8 @@ var Signup = function Signup(_ref) {
 Signup.defaultProps = {
   noMoneyBuys: false,
   otherAmountValue: null,
-  data: {}
+  data: {},
+  additionalSingleCopy: null,
+  additionalMonthlyCopy: null
 };
 var _default = exports.default = Signup;

package/dist/components/Organisms/Donate/Form/PopUpComponent.js

@@ -1,56 +1,53 @@
 "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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
 var _size = require("../../../../theme/shared/size");
 var _close = _interopRequireDefault(require("../assets/close.svg"));
-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 closeDuration = 0.6;
-var fadeClose = (0, _styledComponents.keyframes)(["0%{opacity:1;max-height:350px;}100%{opacity:0;max-height:0px;display:none;margin-top:-16px;}"]);
-var fadeOpen = (0, _styledComponents.keyframes)(["0%{opacity:0;max-height:0px;display:none;margin-top:-16px;}100%{opacity:1;max-height:350px;}"]);
-var StyledPopUp = _styledComponents.default.div.withConfig({
+const closeDuration = 0.6;
+const fadeClose = (0, _styledComponents.keyframes)(["0%{opacity:1;max-height:350px;}100%{opacity:0;max-height:0px;display:none;margin-top:-16px;}"]);
+const fadeOpen = (0, _styledComponents.keyframes)(["0%{opacity:0;max-height:0px;display:none;margin-top:-16px;}100%{opacity:1;max-height:350px;}"]);
+const StyledPopUp = _styledComponents.default.div.withConfig({
   displayName: "PopUpComponent__StyledPopUp",
   componentId: "sc-1d7imlo-0"
-})(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;", "{width:450px;margin-right:auto;margin-left:auto;}"], function (props) {
-  return props.fadeOpen;
-}, function (props) {
-  return props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, props.fadeClose);
-}, function (_ref) {
-  var theme = _ref.theme;
+})(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;", "{width:450px;margin-right:auto;margin-left:auto;}"], props => props.fadeOpen, props => props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, props.fadeClose), _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('blue_light');
 }, (0, _size.media)('small'));
-var TextWrapper = _styledComponents.default.div.withConfig({
+const TextWrapper = _styledComponents.default.div.withConfig({
   displayName: "PopUpComponent__TextWrapper",
   componentId: "sc-1d7imlo-1"
 })(["margin:0 32px 32px;"]);
-var Button = _styledComponents.default.button.withConfig({
+const Button = _styledComponents.default.button.withConfig({
   displayName: "PopUpComponent__Button",
   componentId: "sc-1d7imlo-2"
-})(["justify-self:end;background-color:transparent;border:0;cursor:pointer;width:30px;height:30px;margin:3px;:active,:focus,:hover{outline:none;border:1px solid ", ";}img{width:15px;height:15px;vertical-align:middle;}"], function (_ref2) {
-  var theme = _ref2.theme;
+})(["justify-self:end;background-color:transparent;border:0;cursor:pointer;width:30px;height:30px;margin:3px;:active,:focus,:hover{outline:none;border:1px solid ", ";}img{width:15px;height:15px;vertical-align:middle;}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.color('grey');
 });
-var PopUpComponent = function PopUpComponent(_ref3) {
-  var PopUpText = _ref3.PopUpText,
-    setPopOpen = _ref3.setPopOpen;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isClosed = _useState2[0],
-    setIsClosed = _useState2[1];
+const PopUpComponent = _ref3 => {
+  let {
+    PopUpText,
+    setPopOpen
+  } = _ref3;
+  const [isClosed, setIsClosed] = (0, _react.useState)(false);
 
   // Only update centralised state - which renders
   // this component - once the closing animation is complete
-  var handleCloser = function handleCloser() {
+  const handleCloser = () => {
     setIsClosed(true);
-    setTimeout(function () {
+    setTimeout(() => {
       setPopOpen(false);
     }, closeDuration * 1000);
   };
@@ -59,9 +56,7 @@ var PopUpComponent = function PopUpComponent(_ref3) {
     fadeOpen: fadeOpen,
     fadeClose: fadeClose
   }, /*#__PURE__*/_react.default.createElement(Button, {
-    onClick: function onClick() {
-      return handleCloser();
-    },
+    onClick: () => handleCloser(),
     "aria-label": "Close"
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: _close.default,

package/dist/components/Organisms/Donate/GivingSelector/GivingSelector.js

@@ -1,19 +1,21 @@
 "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 _react = _interopRequireDefault(require("react"));
 var _GivingSelector = require("./GivingSelector.style");
-var GivingSelector = function GivingSelector(_ref) {
-  var givingType = _ref.givingType,
-    changeGivingType = _ref.changeGivingType,
-    setPopOpen = _ref.setPopOpen,
-    mbshipID = _ref.mbshipID;
+const GivingSelector = _ref => {
+  let {
+    givingType,
+    changeGivingType,
+    setPopOpen,
+    mbshipID
+  } = _ref;
   // Only updates giving type and popup status when appropriate
-  var handleGivingTypeChange = function handleGivingTypeChange(thisButtonType, currentGivingType) {
+  const handleGivingTypeChange = (thisButtonType, currentGivingType) => {
     if (currentGivingType !== thisButtonType) {
       changeGivingType(thisButtonType);
       setPopOpen(thisButtonType === 'single');
@@ -27,9 +29,7 @@ var GivingSelector = function GivingSelector(_ref) {
     type: "radio",
     label: "",
     checked: givingType === 'single',
-    onClick: function onClick() {
-      return handleGivingTypeChange('single', givingType);
-    }
+    onClick: () => handleGivingTypeChange('single', givingType)
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'single',
     htmlFor: "give-once--".concat(mbshipID)
@@ -41,9 +41,7 @@ var GivingSelector = function GivingSelector(_ref) {
     type: "radio",
     label: "",
     checked: givingType === 'monthly',
-    onClick: function onClick() {
-      return handleGivingTypeChange('monthly', givingType);
-    }
+    onClick: () => handleGivingTypeChange('monthly', givingType)
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'monthly',
     htmlFor: "give-monthly--".concat(mbshipID)

package/dist/components/Organisms/Donate/GivingSelector/GivingSelector.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
 });
@@ -10,44 +10,60 @@ var _size = require("../../../../theme/shared/size");
 var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"));
 var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
 var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
-var Switch = exports.Switch = _styledComponents.default.span.withConfig({
+const Switch = exports.Switch = _styledComponents.default.span.withConfig({
   displayName: "GivingSelectorstyle__Switch",
   componentId: "sc-5ktn9c-0"
-})(["width:50%;height:48px;border-radius:2rem;", ";display:block;position:absolute;transition:left 0.15s ease-out;background-color:", ";left:2px;box-shadow:0px 0px 16px rgba(0,0,0,0.3);"], (0, _zIndex.default)('low'), function (_ref) {
-  var theme = _ref.theme;
+})(["width:50%;height:48px;border-radius:2rem;", ";display:block;position:absolute;transition:left 0.15s ease-out;background-color:", ";left:2px;box-shadow:0px 0px 16px rgba(0,0,0,0.3);"], (0, _zIndex.default)('low'), _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('blue');
 });
-var Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
+const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "GivingSelectorstyle__Wrapper",
   componentId: "sc-5ktn9c-1"
 })(["display:flex;margin:", " 0;"], (0, _spacing.default)('md'));
-var MoneyBox = exports.MoneyBox = _styledComponents.default.div.withConfig({
+const MoneyBox = exports.MoneyBox = _styledComponents.default.div.withConfig({
   displayName: "GivingSelectorstyle__MoneyBox",
   componentId: "sc-5ktn9c-2"
-})(["width:100%;padding:2px;position:relative;display:flex;flex-direction:row;margin:", " 0;border-radius:2rem;background:", ";", "{width:450px;margin:0 auto;}.give-monthly:checked ~ ", "{left:calc(50% - 2px);}input{", "}input:focus:not(:checked) + label{box-shadow:inset 0 0 0 4px ", ";}"], (0, _spacing.default)('md'), function (_ref2) {
-  var theme = _ref2.theme;
+})(["width:100%;padding:2px;position:relative;display:flex;flex-direction:row;margin:", " 0;border-radius:2rem;background:", ";", "{width:450px;margin:0 auto;}.give-monthly:checked ~ ", "{left:calc(50% - 2px);}input{", "}input:focus:not(:checked) + label{box-shadow:inset 0 0 0 4px ", ";}"], (0, _spacing.default)('md'), _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.color('blue_light');
-}, (0, _size.media)('small'), Switch, _hideVisually.default, function (_ref3) {
-  var theme = _ref3.theme;
+}, (0, _size.media)('small'), Switch, _hideVisually.default, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.color('blue');
 });
-var Label = exports.Label = _styledComponents.default.label.withConfig({
+const Label = exports.Label = _styledComponents.default.label.withConfig({
   displayName: "GivingSelectorstyle__Label",
   componentId: "sc-5ktn9c-3"
-})(["font-size:", ";font-family:", ";font-weight:bold;min-height:48px;align-items:center;justify-content:center;display:flex;flex-basis:50%;border:none;transition:color 0.15s ease-out;", ";cursor:", ";border-radius:2rem;color:", ";&:active:focus{box-shadow:none;}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}"], function (_ref4) {
-  var theme = _ref4.theme;
+})(["font-size:", ";font-family:", ";font-weight:bold;min-height:48px;align-items:center;justify-content:center;display:flex;flex-basis:50%;border:none;transition:color 0.15s ease-out;", ";cursor:", ";border-radius:2rem;color:", ";&:active:focus{box-shadow:none;}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}"], _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.fontSize('s');
-}, function (_ref5) {
-  var theme = _ref5.theme;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.fontFamilies('Montserrat');
-}, (0, _zIndex.default)('medium'), function (_ref6) {
-  var active = _ref6.active;
+}, (0, _zIndex.default)('medium'), _ref6 => {
+  let {
+    active
+  } = _ref6;
   return active === true ? 'default' : 'pointer';
-}, function (_ref7) {
-  var active = _ref7.active,
-    theme = _ref7.theme;
+}, _ref7 => {
+  let {
+    active,
+    theme
+  } = _ref7;
   return active === true ? theme.color('white') : theme.color('black');
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.color('blue');
 });

package/dist/components/Organisms/Donate/MoneyBuy/MoneyBuy.js

@@ -1,56 +1,73 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Input = _interopRequireDefault(require("../../../Atoms/Input/Input"));
 var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"));
 var _size = require("../../../../theme/shared/size");
-var _excluded = ["setOtherAmount", "amount", "currency", "description"];
-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 MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig({
+const MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "MoneyBuy__MoneyBuyButton",
   componentId: "sc-38g5hn-0"
-})(["display:block;input{border:none;background-color:", ";color:", ";font-size:", ";font-family:", ";font-weight:normal;border-radius:10px;padding:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);height:auto;", "{font-size:", ";padding:", ";}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}&:active:focus{box-shadow:0px 0px 16px rgba(0,0,0,0.3);}", "}"], function (_ref) {
-  var theme = _ref.theme;
+})(["display:block;input{border:none;background-color:", ";color:", ";font-size:", ";font-family:", ";font-weight:normal;border-radius:10px;padding:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);height:auto;", "{font-size:", ";padding:", ";}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}&:active:focus{box-shadow:0px 0px 16px rgba(0,0,0,0.3);}", "}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('blue_light');
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.color('black');
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.fontSize('l');
-}, function (_ref4) {
-  var theme = _ref4.theme;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.fontFamilies('Anton');
-}, (0, _spacing.default)('s'), (0, _size.media)('small'), function (_ref5) {
-  var theme = _ref5.theme;
+}, (0, _spacing.default)('s'), (0, _size.media)('small'), _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.fontSize('xl');
-}, (0, _spacing.default)('m'), function (_ref6) {
-  var theme = _ref6.theme;
+}, (0, _spacing.default)('m'), _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.color('blue');
-}, function (_ref7) {
-  var isSelected = _ref7.isSelected;
-  return isSelected && (0, _styledComponents.css)(["background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.3);color:", ";&:focus{box-shadow:0px 0px 16px rgba(0,0,0,0.3);}"], function (_ref8) {
-    var theme = _ref8.theme;
+}, _ref7 => {
+  let {
+    isSelected
+  } = _ref7;
+  return isSelected && (0, _styledComponents.css)(["background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.3);color:", ";&:focus{box-shadow:0px 0px 16px rgba(0,0,0,0.3);}"], _ref8 => {
+    let {
+      theme
+    } = _ref8;
     return theme.color('blue');
-  }, function (_ref9) {
-    var theme = _ref9.theme;
+  }, _ref9 => {
+    let {
+      theme
+    } = _ref9;
     return theme.color('white');
   });
 });
-var MoneyBuy = function MoneyBuy(_ref10) {
-  var setOtherAmount = _ref10.setOtherAmount,
-    amount = _ref10.amount,
-    currency = _ref10.currency,
-    description = _ref10.description,
-    rest = (0, _objectWithoutProperties2.default)(_ref10, _excluded);
+const MoneyBuy = _ref10 => {
+  let {
+    setOtherAmount,
+    amount,
+    currency,
+    description,
+    ...rest
+  } = _ref10;
   return /*#__PURE__*/_react.default.createElement(MoneyBuyButton, Object.assign({}, rest, {
     "aria-label": description,
     value: "".concat(currency, " ").concat(amount),