@comicrelief/component-library 8.55.0 → 8.55.2

package/dist/components/Molecules/HeroBanner/HeroBanner.style.js

@@ -31,7 +31,7 @@ const handleVariant = variant => {
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__Container",
   componentId: "sc-2ch4eo-0"
-})(["width:100%;height:auto;display:flex;position:relative;flex-direction:column;background:", ";justify-content:center;", ";@media ", "{", " align-items:center;}"], _ref => {
+})(["width:100%;height:auto;display:flex;position:relative;flex-direction:column;background:", ";justify-content:center;", " ", ";@media ", "{", " align-items:center;}"], _ref => {
   let {
     theme,
     pageBackgroundColour
@@ -39,185 +39,191 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
   return theme.color(pageBackgroundColour);
 }, _ref2 => {
   let {
-    variant,
     paddingTop,
     paddingBottom
   } = _ref2;
-  return variant === _variants.default.TEXT_BANNER && (0, _styledComponents.css)(["padding:", " 1rem ", ";@media ", "{padding-left:2rem;padding-right:2rem;}"], paddingTop, paddingBottom, _ref3 => {
+  return (0, _styledComponents.css)(["padding:", " 0 ", ";"], paddingTop, paddingBottom);
+}, _ref3 => {
+  let {
+    variant,
+    paddingTop,
+    paddingBottom
+  } = _ref3;
+  return variant === _variants.default.TEXT_BANNER && (0, _styledComponents.css)(["padding:", " 1rem ", ";@media ", "{padding-left:2rem;padding-right:2rem;}"], paddingTop, paddingBottom, _ref4 => {
     let {
       theme
-    } = _ref3;
+    } = _ref4;
     return theme.breakpoints2026('M');
   });
-}, _ref4 => {
+}, _ref5 => {
   let {
     theme
-  } = _ref4;
+  } = _ref5;
   return theme.breakpoints2026('L');
-}, _ref5 => {
+}, _ref6 => {
   let {
     paddingTop,
     paddingBottom
-  } = _ref5;
+  } = _ref6;
   return (0, _styledComponents.css)(["padding:", " 2rem ", ";"], paddingTop, paddingBottom);
 });
 const OuterWrapper = exports.OuterWrapper = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__OuterWrapper",
   componentId: "sc-2ch4eo-1"
-})(["width:100%;max-width:none;position:relative;display:flex;flex-direction:column;align-items:center;@media ", "{width:100%;max-width:1500px;border-radius:1rem;overflow:hidden;", ""], _ref6 => {
+})(["width:100%;max-width:none;position:relative;display:flex;flex-direction:column;align-items:center;@media ", "{width:100%;max-width:1500px;border-radius:1rem;overflow:hidden;", ""], _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.breakpoints2026('L');
-}, _ref7 => {
+}, _ref8 => {
   let {
     variant
-  } = _ref7;
+  } = _ref8;
   return variant && (0, _styledComponents.css)(["", ""], handleVariant(variant));
 });
 const MediaWrapper = exports.MediaWrapper = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__MediaWrapper",
   componentId: "sc-2ch4eo-2"
-})(["width:100%;height:100%;@media ", "{position:absolute;top:0;left:0;img{object-position:top center;height:100%;transform:scale(1.02);transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");", ";}&:has(+ div a:hover){> div > img{transform:scale(1.04);}}}"], _ref8 => {
+})(["width:100%;height:100%;@media ", "{position:absolute;top:0;left:0;img{object-position:top center;height:100%;transform:scale(1.02);transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");", ";}&:has(+ div a:hover){> div > img{transform:scale(1.04);}}}"], _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.breakpoints2026('L');
-}, 0.4, -1.15, 2.35, _ref9 => {
+}, 0.4, -1.15, 2.35, _ref10 => {
   let {
     variant
-  } = _ref9;
+  } = _ref10;
   return variant === _variants.default.HALF_HEIGHT && 'min-height: 450px;';
 });
 const CopyOuterWrapper = exports.CopyOuterWrapper = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__CopyOuterWrapper",
   componentId: "sc-2ch4eo-3"
-})(["position:relative;height:100%;left:0;right:0;display:flex;width:calc(100% - (2 * 1rem));", " @media ", "{", "}@media ", "{position:relative;top:auto;left:auto;height:100%;width:100%;", " display:flex;align-items:center;margin:0 auto;justify-content:", ";", "}"], _ref10 => {
+})(["position:relative;height:100%;left:0;right:0;display:flex;width:calc(100% - (2 * 1rem));", " @media ", "{", "}@media ", "{position:relative;top:auto;left:auto;height:100%;width:100%;", " display:flex;align-items:center;margin:0 auto;justify-content:", ";", "}"], _ref11 => {
   let {
     variant
-  } = _ref10;
-  return variant !== _variants.default.TEXT_BANNER ? 'margin: -2rem 1rem 2rem;' : 'margin: 0; width: 100%;';
-}, _ref11 => {
-  let {
-    theme
   } = _ref11;
-  return theme.breakpoints2026('M');
+  return variant !== _variants.default.TEXT_BANNER ? 'margin: -2rem 1rem 0;' : 'margin: 0; width: 100%;';
 }, _ref12 => {
   let {
-    variant
+    theme
   } = _ref12;
-  return variant !== _variants.default.TEXT_BANNER ? 'margin: -2rem 2rem 2rem; width: calc(100% - (2 * 2rem));' : 'margin: 0; width: 100%;';
+  return theme.breakpoints2026('M');
 }, _ref13 => {
   let {
-    theme
+    variant
   } = _ref13;
-  return theme.breakpoints2026('L');
+  return variant !== _variants.default.TEXT_BANNER ? 'margin: -2rem 2rem 0rem; width: calc(100% - (2 * 2rem));' : 'margin: 0; width: 100%;';
 }, _ref14 => {
   let {
-    variant
+    theme
   } = _ref14;
-  return variant !== _variants.default.TEXT_BANNER && 'max-width: 1200px;';
+  return theme.breakpoints2026('L');
 }, _ref15 => {
+  let {
+    variant
+  } = _ref15;
+  return variant !== _variants.default.TEXT_BANNER && 'max-width: 1200px;';
+}, _ref16 => {
   let {
     variant,
     copyLeft
-  } = _ref15;
+  } = _ref16;
   if (variant === _variants.default.TEXT_BANNER) return 'center';
   return copyLeft ? 'flex-start' : 'flex-end';
-}, _ref16 => {
+}, _ref17 => {
   let {
     variant
-  } = _ref16;
+  } = _ref17;
   return variant && (0, _styledComponents.css)(["", ""], handleVariant(variant));
 });
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__Copy",
   componentId: "sc-2ch4eo-4"
-})(["width:100%;", ";border-radius:1rem;padding:", ";color:", ";box-shadow:rgba(0,0,0,0.15) 0px 0px 1.5rem;background-color:", ";", ";", ";@media ", "{width:", ";}"], (0, _zIndex.default)('low'), _ref17 => {
+})(["width:100%;", ";border-radius:1rem;padding:", ";color:", ";box-shadow:rgba(0,0,0,0.15) 0px 0px 1.5rem;background-color:", ";", ";", ";@media ", "{width:", ";}"], (0, _zIndex.default)('low'), _ref18 => {
   let {
     variant
-  } = _ref17;
+  } = _ref18;
   return variant === _variants.default.TEXT_BANNER ? '3rem 1.5rem' : '1.5rem';
-}, _ref18 => {
+}, _ref19 => {
   let {
     theme,
     copyColour
-  } = _ref18;
+  } = _ref19;
   return theme.color(copyColour);
-}, _ref19 => {
+}, _ref20 => {
   let {
     theme,
     variant,
     textBannerCopyBackgroundColour
-  } = _ref19;
+  } = _ref20;
   return variant === _variants.default.TEXT_BANNER ? theme.color(textBannerCopyBackgroundColour) : theme.color('white');
-}, _ref20 => {
+}, _ref21 => {
   let {
     variant,
     theme
-  } = _ref20;
+  } = _ref21;
   return variant !== _variants.default.TEXT_BANNER && `
     @media ${theme.breakpoints2026('L')} {
       padding: 2rem 2rem 1.75rem;
     }
   `;
-}, _ref21 => {
+}, _ref22 => {
   let {
     variant,
     theme
-  } = _ref21;
+  } = _ref22;
   return variant === _variants.default.TEXT_BANNER && `
     text-align: center;
     @media ${theme.breakpoints2026('M')} {
       padding: 4rem 11%;
     }
   `;
-}, _ref22 => {
+}, _ref23 => {
   let {
     theme
-  } = _ref22;
+  } = _ref23;
   return theme.breakpoints2026('L');
-}, _ref23 => {
+}, _ref24 => {
   let {
     variant
-  } = _ref23;
+  } = _ref24;
   return variant !== _variants.default.TEXT_BANNER ? '92%' : '100%';
 });
 const CopyInnerWrapper = exports.CopyInnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__CopyInnerWrapper",
   componentId: "sc-2ch4eo-5"
-})(["width:100%;height:100%;display:flex;align-items:center;border-radius:1rem;@media ", "{height:auto;", ";", ";justify-content:", ";}"], _ref24 => {
+})(["width:100%;height:100%;display:flex;align-items:center;border-radius:1rem;@media ", "{height:auto;", ";", ";justify-content:", ";}"], _ref25 => {
   let {
     theme
-  } = _ref24;
+  } = _ref25;
   return theme.breakpoints2026('L');
-}, _ref25 => {
+}, _ref26 => {
   let {
     variant
-  } = _ref25;
+  } = _ref26;
   return variant === _variants.default.TEXT_BANNER ? (0, _styledComponents.css)(["width:100%;"]) : (0, _styledComponents.css)(["width:50%;"]);
-}, _ref26 => {
+}, _ref27 => {
   let {
     variant
-  } = _ref26;
+  } = _ref27;
   return variant === _variants.default.TEXT_BANNER ? (0, _styledComponents.css)(["margin:0;"]) : (0, _styledComponents.css)(["margin:2rem 0;"]);
-}, _ref27 => {
+}, _ref28 => {
   let {
     copyLeft
-  } = _ref27;
+  } = _ref28;
   return copyLeft ? (0, _styledComponents.css)([" flex-end;"]) : (0, _styledComponents.css)([" flex-start;"]);
 });
 const CTAWrapper = exports.CTAWrapper = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__CTAWrapper",
   componentId: "sc-2ch4eo-6"
-})(["width:100%;height:auto;position:relative;padding:0.5rem 2.5rem 0 0;margin-top:1.25rem;", ""], _ref28 => {
+})(["width:100%;height:auto;position:relative;padding:0.5rem 2.5rem 0 0;margin-top:1.25rem;", ""], _ref29 => {
   let {
     variant
-  } = _ref28;
-  return variant !== _variants.default.TEXT_BANNER && (0, _styledComponents.css)(["span{font-weight:bold;color:", ";}"], _ref29 => {
+  } = _ref29;
+  return variant !== _variants.default.TEXT_BANNER && (0, _styledComponents.css)(["span{font-weight:bold;color:", ";}"], _ref30 => {
     let {
       theme
-    } = _ref29;
+    } = _ref30;
     return theme.color('red');
   });
 });
@@ -236,14 +242,14 @@ const CtaTextUnderline = exports.CtaTextUnderline = _styledComponents.default.im
 const HeroBannerLink = exports.HeroBannerLink = _styledComponents.default.a.withConfig({
   displayName: "HeroBannerstyle__HeroBannerLink",
   componentId: "sc-2ch4eo-10"
-})(["text-decoration:none;width:100%;> div{transition:box-shadow 0.35s;box-shadow:rgba(0,0,0,0.15) 0px 0px 1.5rem;}&:hover{> div{box-shadow:rgba(0,0,0,0.25) 0px 0px 1.5rem;}}@media ", "{", " width:", ";> div{width:100%;}&:hover{img.cta-text-underline{opacity:1;}}}"], _ref30 => {
+})(["text-decoration:none;width:100%;> div{transition:box-shadow 0.35s;box-shadow:rgba(0,0,0,0.15) 0px 0px 1.5rem;}&:hover{> div{box-shadow:rgba(0,0,0,0.25) 0px 0px 1.5rem;}}@media ", "{", " width:", ";> div{width:100%;}&:hover{img.cta-text-underline{opacity:1;}}}"], _ref31 => {
   let {
     theme
-  } = _ref30;
+  } = _ref31;
   return theme.breakpoints2026('L');
-}, (0, _animations.bounceUpAnimation)(true, 10, 2), _ref31 => {
+}, (0, _animations.bounceUpAnimation)(true, 10, 2, true), _ref32 => {
   let {
     variant
-  } = _ref31;
+  } = _ref32;
   return variant !== _variants.default.TEXT_BANNER ? '92%' : '100%';
 });

package/dist/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap

@@ -73,6 +73,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 0 2rem;
 }
 
 .c1 {
@@ -107,7 +108,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: calc(100% - (2 * 1rem));
-  margin: -2rem 1rem 2rem;
+  margin: -2rem 1rem 0;
 }
 
 .c7 {
@@ -211,7 +212,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    margin: -2rem 2rem 2rem;
+    margin: -2rem 2rem 0rem;
     width: calc(100% - (2 * 2rem));
   }
 }
@@ -394,6 +395,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 0 2rem;
 }
 
 .c1 {
@@ -428,7 +430,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: calc(100% - (2 * 1rem));
-  margin: -2rem 1rem 2rem;
+  margin: -2rem 1rem 0;
 }
 
 .c7 {
@@ -532,7 +534,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    margin: -2rem 2rem 2rem;
+    margin: -2rem 2rem 0rem;
     width: calc(100% - (2 * 2rem));
   }
 }
@@ -700,6 +702,7 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 0 2rem;
   padding: 0rem 1rem 2rem;
 }
 

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

@@ -26,7 +26,6 @@ const DonateBanner = _ref => {
     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.',
@@ -41,7 +40,7 @@ const DonateBanner = _ref => {
     donateLink,
     mbshipID
   } = _ref;
-  const isLarge = (0, _reactResponsive.useMediaQuery)({
+  const isLargeBreakpoint = (0, _reactResponsive.useMediaQuery)({
     query: `(min-width: ${_allBreakpoints.breakpointValues.L}px)`
   });
   const isMedium = (0, _reactResponsive.useMediaQuery)({
@@ -58,14 +57,14 @@ const DonateBanner = _ref => {
     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 shouldShowDesktopImage = shouldShowImage && isLargeBreakpoint && imageL && (imageL.images || imageL.image);
+  const shouldShowTopImage = shouldShowImage && !isLargeBreakpoint;
   const topImage = isMedium ? imageM : imageS;
-  const shouldRenderTopImage = shouldShowTopImage && topImage && (topImage.images || topImage.image);
+  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;
+  const shouldShowTitleSection = noTitlesAtAll === false && isLargeBreakpoint && donateWidgetIsTextOnly;
   return /*#__PURE__*/_react.default.createElement(_DonateBanner.Container, {
     paddingAbove: paddingAbove,
     paddingBelow: paddingBelow,
@@ -103,8 +102,7 @@ const DonateBanner = _ref => {
   }, 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",
+    tag: "h1",
     family: "Anton",
     weight: "normal"
   }, thisTitle), /*#__PURE__*/_react.default.createElement(_Text.default, {
@@ -118,7 +116,6 @@ const DonateBanner = _ref => {
     mbshipID: mbshipID,
     donateLink: donateLink,
     hideMoneyBuys: hideMoneyBuys,
-    popUpText: popUpText,
     chooseAmountText: chooseAmountText,
     monthlyChooseAmountText: monthlyChooseAmountText,
     donateWidgetIsTextOnly: donateWidgetIsTextOnly,
@@ -126,7 +123,12 @@ const DonateBanner = _ref => {
     shouldShowTitleSection: shouldShowTitleSection,
     donateOrientation: donateOrientation,
     givingType: givingType,
-    changeGivingType: setGivingType
+    changeGivingType: setGivingType,
+    thisTitle: thisTitle,
+    thisSubtitle: thisSubtitle,
+    showCopy: showCopy,
+    isLargeBreakpoint: isLargeBreakpoint,
+    isMediumBreakpoint: isMedium
   }))));
 };
 var _default = exports.default = DonateBanner;

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

@@ -87,7 +87,6 @@ const imageS = {
   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."
 />;
 ```
 
@@ -137,7 +136,30 @@ import data from './dev-data/data';
 />;
 ```
 
-## Different “Other amount” copy for single vs monthly
+## Text-only widget (no image), with giving selector (single vs monthly)
+
+```js
+import data from './dev-data/data';
+
+<DonateBanner
+  donateWidgetIsTextOnly
+  pageBackgroundColour="grey_light"
+  paddingAbove="2rem"
+  paddingBelow="2rem"
+  donateOrientation="right"
+  data={data}
+  mbshipID="mbship-3c"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate now"
+  subtitle="Choose between a one-off or monthly gift."
+  monthlyTitle="Give monthly"
+  monthlySubtitle="A regular gift helps fund long-term impact."
+/>;
+```
+
+## Different "Other amount" copy for single vs monthly
 
 ```js
 import data from './dev-data/data';

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

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 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;
+exports.Wrapper = exports.TitleWrapperOuter = exports.TitleWrapperInner = exports.SecondaryTitleText = exports.PrimaryTitleText = exports.OuterFieldset = exports.MoneybuyCopy = exports.MoneyBuys = exports.Legend = exports.Label = exports.InnerContainer = exports.FormWrapper = exports.FormFieldset = exports.Form = exports.Error = 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"));
@@ -31,7 +31,7 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
 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 => {
+})(["position:relative;background-color:", ";border-radius:1rem;overflow:hidden;padding:none;width:100%;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0,0,0,0.15);@media ", "{padding:", ";", "}@media ", "{padding-left:", ";padding-right:", ";}max-width:1500px;"], _ref3 => {
   let {
     theme,
     componentBackgroundColour
@@ -141,7 +141,7 @@ const Error = exports.Error = (0, _styledComponents.default)(_Text.default).with
 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 => {
+})(["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:1rem;max-width:461px;min-width:400px;margin-left:0;margin-right:0;}"], _ref19 => {
   let {
     theme
   } = _ref19;
@@ -166,12 +166,12 @@ const Form = exports.Form = _styledComponents.default.form.withConfig({
 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 => {
+})(["color:", ";padding:", ";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 => {
+}, (0, _spacing.default)('m'), _ref24 => {
   let {
     theme
   } = _ref24;
@@ -184,33 +184,28 @@ const Legend = exports.Legend = _styledComponents.default.legend.withConfig({
 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');
-});
+})(["display:block;text-align:left;font-weight:700;"]);
 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 => {
+})(["display:block;text-align:left;font-size:", ";line-height:1.5;margin:", " 0 !important;"], _ref25 => {
   let {
     theme
-  } = _ref26;
+  } = _ref25;
   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 => {
+})(["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'), _ref26 => {
   let {
     theme
-  } = _ref27;
+  } = _ref26;
   return theme.allBreakpoints('M');
-}, (0, _spacing.default)('m'), (0, _spacing.default)('sm'), _ref28 => {
+}, (0, _spacing.default)('m'), (0, _spacing.default)('sm'), _ref27 => {
   let {
     theme
-  } = _ref28;
+  } = _ref27;
   return theme.allBreakpoints('M');
 }, (0, _spacing.default)('sm'), (0, _spacing.default)('m'));
 const FormFieldset = exports.FormFieldset = _styledComponents.default.div.withConfig({
@@ -224,45 +219,50 @@ const Label = exports.Label = (0, _styledComponents.default)(_Text.default).with
 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 => {
+})(["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 ", ";}}"], _ref28 => {
   let {
     $noMoneyBuys
-  } = _ref29;
+  } = _ref28;
   return $noMoneyBuys === true && (0, _styledComponents.css)(["margin-top:", ";"], (0, _spacing.default)('sm'));
-}, _ref30 => {
+}, _ref29 => {
   let {
     theme
-  } = _ref30;
+  } = _ref29;
   return theme.allBreakpoints('M');
-}, (0, _zIndex.default)('high'), _ref31 => {
+}, (0, _zIndex.default)('high'), _ref30 => {
   let {
     theme
-  } = _ref31;
+  } = _ref30;
   return theme.color('grey');
-}, _ref32 => {
+}, _ref31 => {
   let {
     theme
-  } = _ref32;
+  } = _ref31;
   return theme.color('grey_light');
-}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref33 => {
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref32 => {
   let {
     theme
-  } = _ref33;
+  } = _ref32;
   return theme.color('grey');
 });
-const Copy = exports.Copy = _styledComponents.default.p.withConfig({
-  displayName: "DonateBannerstyle__Copy",
+const MoneybuyCopy = exports.MoneybuyCopy = _styledComponents.default.p.withConfig({
+  displayName: "DonateBannerstyle__MoneybuyCopy",
   componentId: "sc-a4o3ek-17"
-})(["line-height:1.5;margin-top:", ";color:", ";"], (0, _spacing.default)('l'), _ref34 => {
+})(["line-height:1.5;margin-top:", ";color:", ";margin:", " 0 ", ";@media ", "{margin:", " 0 ", ";}"], (0, _spacing.default)('l'), _ref33 => {
   let {
     theme
-  } = _ref34;
+  } = _ref33;
   return theme.color('black');
-});
+}, (0, _spacing.default)('md'), (0, _spacing.default)('sm'), _ref34 => {
+  let {
+    theme
+  } = _ref34;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('m'), (0, _spacing.default)('md'));
 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 => {
+})(["width:100%;margin-top:", ";color:", ";font-size:", ";font-weight:bold;min-height:44px;cursor:pointer;background:", ";text-decoration:none;border-radius:0.5rem;border:none;appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}"], (0, _spacing.default)('md'), _ref35 => {
   let {
     theme
   } = _ref35;
@@ -283,9 +283,4 @@ const Button = exports.Button = _styledComponents.default.button.withConfig({
     theme
   } = _ref38;
   return theme.color('coral_dark');
-}, _ref39 => {
-  let {
-    theme
-  } = _ref39;
-  return theme.allBreakpoints('M');
-}, (0, _spacing.default)('md'), (0, _spacing.default)('l'));
+});