@comicrelief/component-library 8.52.3 → 8.53.0

package/.github/workflows/main.yml

@@ -58,7 +58,7 @@ jobs:
 
   playwright:
     name: Playwright test
-    timeout-minutes: 10
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

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

@@ -14,6 +14,9 @@ var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Form = _interopRequireDefault(require("./Form/Form"));
 var _utils = require("./_utils");
 var _Donate = require("./Donate.style");
+// NB this is now our 'old' Donate widget, which is being replaced by the DonateBanner component
+// This component is now deprecated and will be removed in a future release.
+// TODO: Remove this component in a future release.
 const Donate = _ref => {
   let {
     alt = '',

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

@@ -36,7 +36,6 @@ const Signup = _ref => {
     givingType = null,
     ...rest
   } = _ref;
-  // const [givingType, setGivingType] = useState();
   const [errorMsg, setErrorMsg] = (0, _react.useState)(false);
   const [amountDonate, setAmountDonate] = (0, _react.useState)(10);
   const [moneyBuyCopy, setMoneyBuyCopy] = (0, _react.useState)(true);

package/dist/components/Organisms/DonateBanner/DonateBanner.js

@@ -0,0 +1,132 @@
+"use strict";
+
+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 _react = _interopRequireWildcard(require("react"));
+var _reactResponsive = require("react-responsive");
+var _allBreakpoints = require("../../../theme/shared/allBreakpoints");
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
+var _Form = _interopRequireDefault(require("./Form/Form"));
+var _utils = require("./_utils");
+var _DonateBanner = require("./DonateBanner.style");
+const DonateBanner = _ref => {
+  let {
+    donateWidgetIsTextOnly = false,
+    donateOrientation = 'right',
+    paddingAbove = '2rem',
+    paddingBelow = '2rem',
+    pageBackgroundColour = 'transparent',
+    componentBackgroundColour = 'white',
+    title = null,
+    subtitle = '',
+    monthlyTitle = '',
+    monthlySubtitle = '',
+    popUpText = 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
+    chooseAmountText = null,
+    monthlyChooseAmountText = null,
+    otherAmountText = 'will help us fund amazing projects in the UK and around the world.',
+    monthlyOtherAmountText = '',
+    hideMoneyBuys = false,
+    imageL = null,
+    imageM = null,
+    imageS = null,
+    data = {},
+    cartID,
+    clientID,
+    donateLink,
+    mbshipID
+  } = _ref;
+  const isLarge = (0, _reactResponsive.useMediaQuery)({
+    query: `(min-width: ${_allBreakpoints.breakpointValues.L}px)`
+  });
+  const isMedium = (0, _reactResponsive.useMediaQuery)({
+    query: `(min-width: ${_allBreakpoints.breakpointValues.M}px)`
+  });
+  const [givingType, setGivingType] = (0, _react.useState)();
+  const {
+    showCopy,
+    thisTitle,
+    thisSubtitle,
+    noTitlesAtAll
+  } = (0, _utils.handleTitles)(givingType, title, subtitle, monthlyTitle, monthlySubtitle);
+  const {
+    thisOtherAmountText
+  } = (0, _utils.handleOtherAmountText)(givingType, otherAmountText, monthlyOtherAmountText);
+  const shouldShowImage = donateWidgetIsTextOnly === false;
+  const shouldShowDesktopImage = shouldShowImage && isLarge && imageL && (imageL.images || imageL.image);
+  const shouldShowTopImage = shouldShowImage && !isLarge;
+  const topImage = isMedium ? imageM : imageS;
+  const shouldRenderTopImage = shouldShowTopImage && topImage && (topImage.images || topImage.image);
+
+  // For text-only variants, we hide the title area on non-desktop widths
+  // (M and below), so only the form is shown.
+  const shouldShowTitleSection = noTitlesAtAll === false && isLarge && donateWidgetIsTextOnly;
+  return /*#__PURE__*/_react.default.createElement(_DonateBanner.Container, {
+    paddingAbove: paddingAbove,
+    paddingBelow: paddingBelow,
+    pageBackgroundColour: pageBackgroundColour,
+    id: mbshipID
+  }, /*#__PURE__*/_react.default.createElement(_DonateBanner.InnerContainer, {
+    componentBackgroundColour: componentBackgroundColour,
+    $donateWidgetIsTextOnly: donateWidgetIsTextOnly
+  }, shouldRenderTopImage ? /*#__PURE__*/_react.default.createElement(_Picture.default, {
+    image: topImage.image,
+    images: topImage.images,
+    imageLow: topImage.imageLow,
+    objectFit: "cover",
+    width: "100%",
+    height: "100%",
+    alt: topImage.alt || ''
+    // Force React to re-render with any updated image details
+    ,
+    key: topImage.imageLow
+  }) : null, shouldShowDesktopImage ? /*#__PURE__*/_react.default.createElement(_DonateBanner.BgImage, {
+    image: imageL.image,
+    images: imageL.images,
+    imageLow: imageL.imageLow,
+    objectFit: "cover",
+    width: "100%",
+    height: "100%",
+    alt: imageL.alt || '',
+    isBackgroundImage: true
+  }) : null, /*#__PURE__*/_react.default.createElement(_DonateBanner.Wrapper, {
+    donateOrientation: donateOrientation,
+    "aria-live": "polite",
+    noTitlesAtAll: noTitlesAtAll,
+    hasTopImage: shouldRenderTopImage,
+    shouldShowTitleSection: shouldShowTitleSection
+  }, shouldShowTitleSection && /*#__PURE__*/_react.default.createElement(_DonateBanner.TitleWrapperOuter, {
+    donateOrientation: donateOrientation
+  }, /*#__PURE__*/_react.default.createElement(_DonateBanner.TitleWrapperInner, null, showCopy && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "h2",
+    size: "big",
+    family: "Anton",
+    weight: "normal"
+  }, thisTitle), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "p",
+    size: "m"
+  }, thisSubtitle)))), /*#__PURE__*/_react.default.createElement(_Form.default, {
+    data: data,
+    otherAmountText: thisOtherAmountText,
+    cartID: cartID,
+    clientID: clientID,
+    mbshipID: mbshipID,
+    donateLink: donateLink,
+    hideMoneyBuys: hideMoneyBuys,
+    popUpText: popUpText,
+    chooseAmountText: chooseAmountText,
+    monthlyChooseAmountText: monthlyChooseAmountText,
+    donateWidgetIsTextOnly: donateWidgetIsTextOnly,
+    hasTopImage: shouldRenderTopImage,
+    shouldShowTitleSection: shouldShowTitleSection,
+    donateOrientation: donateOrientation,
+    givingType: givingType,
+    changeGivingType: setGivingType
+  }))));
+};
+var _default = exports.default = DonateBanner;

package/dist/components/Organisms/DonateBanner/DonateBanner.md

@@ -0,0 +1,168 @@
+# DonateBanner
+
+## Image banner (widget right), custom padding + background
+
+```js
+import data from './dev-data/data';
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+
+const imageL = {
+  images: desktopPictures.images,
+  imageLow: desktopPictures.imageLow,
+  alt: 'Background image'
+};
+
+const imageM = {
+  images: desktopPictures.images,
+  imageLow: desktopPictures.imageLow,
+  alt: 'Background image'
+};
+
+const imageS = {
+  images: mobilePictures.images,
+  imageLow: mobilePictures.imageLow,
+  alt: 'Background image'
+};
+
+<DonateBanner
+  pageBackgroundColour="grey_light"
+  paddingAbove="0rem"
+  paddingBelow="2rem"
+  donateOrientation="right"
+  imageL={imageL}
+  imageM={imageM}
+  imageS={imageS}
+  data={data}
+  mbshipID="mbship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+/>;
+```
+
+## Image banner (widget left), monthly title/subtitle + choose amount text overrides
+
+```js
+import data from './dev-data/data';
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+
+const imageL = {
+  images: desktopPictures.images,
+  imageLow: desktopPictures.imageLow,
+  alt: 'Background image'
+};
+
+const imageM = {
+  images: desktopPictures.images,
+  imageLow: desktopPictures.imageLow,
+  alt: 'Background image'
+};
+
+const imageS = {
+  images: mobilePictures.images,
+  imageLow: mobilePictures.imageLow,
+  alt: 'Background image'
+};
+
+<DonateBanner
+  pageBackgroundColour="grey_light"
+  paddingAbove="2rem"
+  paddingBelow="2rem"
+  donateOrientation="left"
+  imageL={imageL}
+  imageM={imageM}
+  imageS={imageS}
+  data={data}
+  mbshipID="mbship-2"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate today"
+  subtitle="Your support can help people facing the toughest times."
+  monthlyTitle="Give monthly"
+  monthlySubtitle="A regular gift helps fund long-term impact."
+  chooseAmountText="Choose a one-off amount"
+  monthlyChooseAmountText="Choose a monthly amount"
+  popUpText="Switching to a single gift means less predictable funding."
+/>;
+```
+
+## Text-only widget (no image), custom widget background + text colour
+
+```js
+import data from './dev-data/data-single';
+
+<DonateBanner
+  donateWidgetIsTextOnly
+  pageBackgroundColour="rnd_25_glitzy_grape"
+  componentBackgroundColour="deep_violet_dark"
+  paddingAbove="2rem"
+  paddingBelow="2rem"
+  donateOrientation="right"
+  data={data}
+  mbshipID="mbship-3"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate now"
+  subtitle="Make a difference today."
+  chooseAmountText="Enter an amount to give"
+  noMoneyBuys
+/>;
+```
+
+## Text-only widget (no image), with the usual moneybuys, standard colours
+
+```js
+import data from './dev-data/data';
+
+<DonateBanner
+  donateWidgetIsTextOnly
+  pageBackgroundColour="grey_light"
+  componentBackgroundColour="white"
+  paddingAbove="2rem"
+  paddingBelow="2rem"
+  donateOrientation="right"
+  data={data}
+  mbshipID="mbship-3b"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate now"
+  subtitle="Choose an amount or pick a moneybuy."
+/>;
+```
+
+## Different “Other amount” copy for single vs monthly
+
+```js
+import data from './dev-data/data';
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+const imageL = {
+  images: desktopPictures.images,
+  imageLow: desktopPictures.imageLow,
+  alt: 'Background image'
+};
+
+<DonateBanner
+  pageBackgroundColour="grey_light"
+  paddingAbove="0rem"
+  paddingBelow="0rem"
+  donateOrientation="left"
+  imageL={imageL}
+  data={data}
+  mbshipID="mbship-4"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate now"
+  subtitle="Help fund life-changing work."
+  otherAmountText="can help support people in crisis."
+  monthlyOtherAmountText="each month can help provide long-term support."
+/>;
+```

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

@@ -0,0 +1,291 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.TitleWrapperOuter = exports.TitleWrapperInner = exports.SecondaryTitleText = exports.PrimaryTitleText = exports.OuterFieldset = exports.MoneyBuys = exports.Legend = exports.Label = exports.InnerContainer = exports.FormWrapper = exports.FormFieldset = exports.Form = exports.Error = exports.Copy = exports.Container = exports.Button = exports.BgImage = exports.AmountField = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Input = _interopRequireDefault(require("../../Atoms/Input/Input"));
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
+var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
+var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
+const Container = exports.Container = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__Container",
+  componentId: "sc-a4o3ek-0"
+})(["position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;margin:", ";background-color:", ";width:100%;padding:2rem;"], _ref => {
+  let {
+    paddingAbove,
+    paddingBelow
+  } = _ref;
+  return `${paddingAbove} 0 ${paddingBelow}`;
+}, _ref2 => {
+  let {
+    theme,
+    pageBackgroundColour
+  } = _ref2;
+  return theme.color(pageBackgroundColour);
+});
+const InnerContainer = exports.InnerContainer = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__InnerContainer",
+  componentId: "sc-a4o3ek-1"
+})(["position:relative;background-color:", ";border-radius:1rem;overflow:hidden;padding:none;width:100%;box-sizing:border-box;@media ", "{padding:", ";", "}@media ", "{padding-left:", ";padding-right:", ";}max-width:1500px;"], _ref3 => {
+  let {
+    theme,
+    componentBackgroundColour
+  } = _ref3;
+  return theme.color(componentBackgroundColour);
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('l'), _ref5 => {
+  let {
+    $donateWidgetIsTextOnly
+  } = _ref5;
+  return $donateWidgetIsTextOnly && (0, _styledComponents.css)(["padding-top:7.5rem;padding-bottom:7.5rem;"]);
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.allBreakpoints('XL');
+}, (0, _spacing.default)('xxl'), (0, _spacing.default)('xxl'));
+const BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.default).withConfig({
+  displayName: "DonateBannerstyle__BgImage",
+  componentId: "sc-a4o3ek-2"
+})(["display:block;position:absolute;bottom:0;left:0;right:0;height:100%;"]);
+const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__Wrapper",
+  componentId: "sc-a4o3ek-3"
+})(["position:relative;text-align:center;align-items:center;display:block;width:100%;", " ", ";@media ", "{display:flex;padding:", " ", ";gap:", ";flex-direction:row;}"], _ref7 => {
+  let {
+    hasTopImage,
+    shouldShowTitleSection
+  } = _ref7;
+  return hasTopImage && !shouldShowTitleSection && (0, _styledComponents.css)(["padding:0;"]);
+}, _ref8 => {
+  let {
+    noTitlesAtAll
+  } = _ref8;
+  return noTitlesAtAll === true && (0, _styledComponents.css)(["justify-content:center;"]);
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('l'), (0, _spacing.default)('md'), (0, _spacing.default)('l'));
+const TitleWrapperOuter = exports.TitleWrapperOuter = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__TitleWrapperOuter",
+  componentId: "sc-a4o3ek-4"
+})(["width:100%;display:flex;font-family:", ";padding-bottom:", ";@media ", "{flex:1 1 0;width:auto;padding:0;align-items:center;order:", ";}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.fontFamilies(theme.font.regular);
+}, (0, _spacing.default)('l'), _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.allBreakpoints('L');
+}, _ref12 => {
+  let {
+    donateOrientation
+  } = _ref12;
+  return donateOrientation === 'left' ? 2 : 1;
+});
+const TitleWrapperInner = exports.TitleWrapperInner = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__TitleWrapperInner",
+  componentId: "sc-a4o3ek-5"
+})(["position:relative;text-align:left;"]);
+const FormWrapper = exports.FormWrapper = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__FormWrapper",
+  componentId: "sc-a4o3ek-6"
+})(["position:relative;font-family:", ";@media ", "{flex:1 1 0;min-width:0;width:auto;display:flex;justify-content:", ";order:", ";}"], _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.fontFamilies(theme.font.regular);
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.allBreakpoints('L');
+}, _ref15 => {
+  let {
+    donateOrientation
+  } = _ref15;
+  return donateOrientation === 'left' ? 'flex-start' : 'flex-end';
+}, _ref16 => {
+  let {
+    donateOrientation
+  } = _ref16;
+  return donateOrientation === 'left' ? 1 : 2;
+});
+const Error = exports.Error = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "DonateBannerstyle__Error",
+  componentId: "sc-a4o3ek-7"
+})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.color('red');
+}, _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.fontSize('s');
+}, (0, _spacing.default)('l'));
+const Form = exports.Form = _styledComponents.default.form.withConfig({
+  displayName: "DonateBannerstyle__Form",
+  componentId: "sc-a4o3ek-8"
+})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);margin-left:auto;margin-right:auto;", " h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}@media ", "{width:100%;margin-right:auto;margin-left:auto;}@media ", "{margin-top:", ";border-radius:0.5rem;max-width:461px;min-width:400px;margin-left:0;margin-right:0;}"], _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.color('white');
+}, _ref20 => {
+  let {
+    hasTopImage,
+    shouldShowTitleSection
+  } = _ref20;
+  return hasTopImage && !shouldShowTitleSection && (0, _styledComponents.css)(["margin-top:0;"]);
+}, (0, _spacing.default)('md'), (0, _spacing.default)('l'), _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.allBreakpoints('M');
+}, _ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('md'));
+const OuterFieldset = exports.OuterFieldset = _styledComponents.default.fieldset.withConfig({
+  displayName: "DonateBannerstyle__OuterFieldset",
+  componentId: "sc-a4o3ek-9"
+})(["color:", ";padding:0 ", " ", ";margin:0;border:none;@media ", "{padding:0 ", " ", ";}input[type='submit']{margin-bottom:0;}"], _ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.color('black');
+}, (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('l'), (0, _spacing.default)('l'));
+const Legend = exports.Legend = _styledComponents.default.legend.withConfig({
+  displayName: "DonateBannerstyle__Legend",
+  componentId: "sc-a4o3ek-10"
+})(["margin:0;padding:", " ", " 0 ", ";display:block;width:100%;"], (0, _spacing.default)('l'), (0, _spacing.default)('sm'), (0, _spacing.default)('sm'));
+const PrimaryTitleText = exports.PrimaryTitleText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "DonateBannerstyle__PrimaryTitleText",
+  componentId: "sc-a4o3ek-11"
+})(["display:block;text-align:left;font-size:", ";font-weight:700;"], _ref25 => {
+  let {
+    theme
+  } = _ref25;
+  return theme.fontSize('s');
+});
+const SecondaryTitleText = exports.SecondaryTitleText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "DonateBannerstyle__SecondaryTitleText",
+  componentId: "sc-a4o3ek-12"
+})(["display:block;text-align:left;font-size:", ";line-height:1.5;margin-top:", ";"], _ref26 => {
+  let {
+    theme
+  } = _ref26;
+  return theme.fontSize('s');
+}, (0, _spacing.default)('sm'));
+const MoneyBuys = exports.MoneyBuys = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__MoneyBuys",
+  componentId: "sc-a4o3ek-13"
+})(["display:flex;justify-content:space-between;flex-direction:column;margin-bottom:", ";@media ", "{flex-direction:row;margin-top:", ";}label{flex:0 0 31%;margin-bottom:", ";@media ", "{margin-bottom:0;}input{cursor:pointer;padding:", "  ", ";}}"], (0, _spacing.default)('md'), _ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('m'), (0, _spacing.default)('sm'), _ref28 => {
+  let {
+    theme
+  } = _ref28;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('m'));
+const FormFieldset = exports.FormFieldset = _styledComponents.default.div.withConfig({
+  displayName: "DonateBannerstyle__FormFieldset",
+  componentId: "sc-a4o3ek-14"
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;"]);
+const Label = exports.Label = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "DonateBannerstyle__Label",
+  componentId: "sc-a4o3ek-15"
+})(["margin-bottom:", ";"], (0, _spacing.default)('sm'));
+const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
+  displayName: "DonateBannerstyle__AmountField",
+  componentId: "sc-a4o3ek-16"
+})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;", " @media ", "{flex-basis:60%;}span{position:absolute;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;padding:0px 15px;", ";}input{height:48px;border:1px solid ", ";background:", ";border-radius:0.5rem;padding:", " ", " ", " ", ";&:focus{outline:none;border:1px solid ", ";}}"], _ref29 => {
+  let {
+    $noMoneyBuys
+  } = _ref29;
+  return $noMoneyBuys === true && (0, _styledComponents.css)(["margin-top:", ";"], (0, _spacing.default)('sm'));
+}, _ref30 => {
+  let {
+    theme
+  } = _ref30;
+  return theme.allBreakpoints('M');
+}, (0, _zIndex.default)('high'), _ref31 => {
+  let {
+    theme
+  } = _ref31;
+  return theme.color('grey');
+}, _ref32 => {
+  let {
+    theme
+  } = _ref32;
+  return theme.color('grey_light');
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref33 => {
+  let {
+    theme
+  } = _ref33;
+  return theme.color('grey');
+});
+const Copy = exports.Copy = _styledComponents.default.p.withConfig({
+  displayName: "DonateBannerstyle__Copy",
+  componentId: "sc-a4o3ek-17"
+})(["line-height:1.5;margin-top:", ";color:", ";"], (0, _spacing.default)('l'), _ref34 => {
+  let {
+    theme
+  } = _ref34;
+  return theme.color('black');
+});
+const Button = exports.Button = _styledComponents.default.button.withConfig({
+  displayName: "DonateBannerstyle__Button",
+  componentId: "sc-a4o3ek-18"
+})(["width:100%;margin:", " 0 ", ";color:", ";font-size:", ";font-weight:bold;cursor:pointer;min-height:48px;background:", ";text-decoration:none;border-radius:0.5rem;border:none;appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}@media ", "{padding:", " ", ";}"], (0, _spacing.default)('sm'), (0, _spacing.default)('sm'), _ref35 => {
+  let {
+    theme
+  } = _ref35;
+  return theme.color('white');
+}, _ref36 => {
+  let {
+    theme
+  } = _ref36;
+  return theme.fontSize('s');
+}, _ref37 => {
+  let {
+    theme,
+    color
+  } = _ref37;
+  return theme.color(color);
+}, _ref38 => {
+  let {
+    theme
+  } = _ref38;
+  return theme.color('coral_dark');
+}, _ref39 => {
+  let {
+    theme
+  } = _ref39;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('md'), (0, _spacing.default)('l'));