@comicrelief/component-library 7.38.0 → 7.39.0

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

@@ -10,24 +10,28 @@ 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 _size = require("../../../theme/shared/size");
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 var _utils = _interopRequireDefault(require("../../../utils/_utils"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Container",
   componentId: "sc-8rjm3t-0"
-})(["position:relative;display:flex;flex-direction:column;justify-content:center;height:auto;background-color:", ";", "{flex-direction:row;align-items:center;justify-content:inherit;background-color:", ";}"], _ref => {
+})(["position:relative;display:flex;flex-direction:column;justify-content:center;height:auto;background-color:", ";@media ", "{flex-direction:row;align-items:center;justify-content:inherit;background-color:", ";}"], _ref => {
   let {
     theme,
     mobileBackgroundColor
   } = _ref;
   return theme.color(mobileBackgroundColor);
-}, (0, _size.media)('medium'), _ref2 => {
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.allBreakpoints('L');
+}, _ref3 => {
   let {
     theme,
     desktopOverlayColor
-  } = _ref2;
+  } = _ref3;
   return theme.color(desktopOverlayColor);
 });
 const PopUp = exports.PopUp = _styledComponents.default.div.withConfig({
@@ -37,40 +41,55 @@ const PopUp = exports.PopUp = _styledComponents.default.div.withConfig({
 const BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.default).withConfig({
   displayName: "Donatestyle__BgImage",
   componentId: "sc-8rjm3t-2"
-})(["display:block;position:absolute;bottom:0;left:0;right:0;height:100%;", ""], _ref3 => {
+})(["display:block;position:absolute;bottom:0;left:0;right:0;height:100%;", ""], _ref4 => {
   let {
     backgroundColor
-  } = _ref3;
+  } = _ref4;
   return backgroundColor !== 'transparent' && "\n    opacity: 0.4;\n  ";
 });
 const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Wrapper",
   componentId: "sc-8rjm3t-3"
-})(["position:relative;text-align:center;padding:", " ", ";flex-direction:row;align-items:center;display:block;width:100%;flex-direction:", ";", ";", "{padding:", " ", ";}", "{display:flex;padding:", " 0;", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('md'), _ref4 => {
+})(["position:relative;text-align:center;padding:", " ", ";flex-direction:row;align-items:center;display:block;width:100%;flex-direction:", ";", ";@media ", "{padding:", " ", ";}@media ", "{display:flex;padding:", " 0;", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('md'), _ref5 => {
   let {
     formAlignRight
-  } = _ref4;
+  } = _ref5;
   return formAlignRight === true ? 'row-reverse' : 'row';
-}, _ref5 => {
+}, _ref6 => {
   let {
     noTitlesAtAll
-  } = _ref5;
+  } = _ref6;
   return noTitlesAtAll === true && (0, _styledComponents.css)(["justify-content:center;"]);
-}, (0, _size.media)('small'), (0, _spacing.default)('xl'), (0, _spacing.default)('md'), (0, _size.media)('medium'), (0, _spacing.default)('xl'), _ref6 => {
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('xl'), (0, _spacing.default)('md'), _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('xl'), _ref9 => {
   let {
     paddingOption
-  } = _ref6;
+  } = _ref9;
   return (0, _utils.default)(paddingOption);
 });
 const TitleWrapperOuter = exports.TitleWrapperOuter = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__TitleWrapperOuter",
   componentId: "sc-8rjm3t-4"
-})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], _ref7 => {
+})(["width:100%;display:flex;font-family:", ";@media ", "{width:50%;padding:", ";align-items:center;}"], _ref10 => {
   let {
     theme
-  } = _ref7;
+  } = _ref10;
   return theme.fontFamilies(theme.font.regular);
-}, (0, _size.media)('medium'), (0, _spacing.default)('xl'));
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('xl'));
 const TitleWrapperInner = exports.TitleWrapperInner = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__TitleWrapperInner",
   componentId: "sc-8rjm3t-5"
@@ -78,39 +97,54 @@ const TitleWrapperInner = exports.TitleWrapperInner = _styledComponents.default.
 const FormWrapper = exports.FormWrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__FormWrapper",
   componentId: "sc-8rjm3t-6"
-})(["position:relative;font-family:", ";", "{width:50%;}"], _ref8 => {
+})(["position:relative;font-family:", ";@media ", "{width:50%;}"], _ref12 => {
   let {
     theme
-  } = _ref8;
+  } = _ref12;
   return theme.fontFamilies(theme.font.regular);
-}, (0, _size.media)('medium'));
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.allBreakpoints('L');
+});
 const Error = exports.Error = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Error",
   componentId: "sc-8rjm3t-7"
-})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], _ref9 => {
+})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], _ref14 => {
   let {
     theme
-  } = _ref9;
+  } = _ref14;
   return theme.color('red');
-}, _ref10 => {
+}, _ref15 => {
   let {
     theme
-  } = _ref10;
+  } = _ref15;
   return theme.fontSize('s');
 }, (0, _spacing.default)('l'));
 const Form = exports.Form = _styledComponents.default.form.withConfig({
   displayName: "Donatestyle__Form",
   componentId: "sc-8rjm3t-8"
-})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}", "{width:450px;margin-right:auto;margin-left:auto;}"], _ref11 => {
+})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}@media ", "{width:450px;margin-right:auto;margin-left:auto;}"], _ref16 => {
   let {
     theme
-  } = _ref11;
+  } = _ref16;
   return theme.color('white');
-}, (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _size.media)('small'));
+}, (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.allBreakpoints('M');
+});
 const OuterFieldset = exports.OuterFieldset = _styledComponents.default.fieldset.withConfig({
   displayName: "Donatestyle__OuterFieldset",
   componentId: "sc-8rjm3t-9"
-})(["padding:0 ", " ", ";margin:0;border:none;", "{padding:0 ", " ", ";}input[type='submit']{margin-bottom:0;}"], (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _size.media)('small'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
+})(["padding:0 ", " ", ";margin:0;border:none;@media ", "{padding:0 ", " ", ";}input[type='submit']{margin-bottom:0;}"], (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('l'), (0, _spacing.default)('l'));
 const Legend = exports.Legend = _styledComponents.default.legend.withConfig({
   displayName: "Donatestyle__Legend",
   componentId: "sc-8rjm3t-10"
@@ -118,7 +152,17 @@ const Legend = exports.Legend = _styledComponents.default.legend.withConfig({
 const MoneyBuys = exports.MoneyBuys = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__MoneyBuys",
   componentId: "sc-8rjm3t-11"
-})(["display:flex;justify-content:space-between;flex-direction:column;margin-bottom:", ";", "{flex-direction:row;}label{flex:0 0 30%;margin-bottom:", ";", "{margin-bottom:0;}input{cursor:pointer;padding:", "  ", ";}}"], (0, _spacing.default)('l'), (0, _size.media)('small'), (0, _spacing.default)('sm'), (0, _size.media)('small'), (0, _spacing.default)('m'), (0, _spacing.default)('sm'));
+})(["display:flex;justify-content:space-between;flex-direction:column;margin-bottom:", ";@media ", "{flex-direction:row;}label{flex:0 0 30%;margin-bottom:", ";@media ", "{margin-bottom:0;}input{cursor:pointer;padding:", "  ", ";}}"], (0, _spacing.default)('l'), _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('sm'), _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('m'), (0, _spacing.default)('sm'));
 const FormFieldset = exports.FormFieldset = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__FormFieldset",
   componentId: "sc-8rjm3t-12"
@@ -130,20 +174,25 @@ const Label = exports.Label = (0, _styledComponents.default)(_Text.default).with
 const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "Donatestyle__AmountField",
   componentId: "sc-8rjm3t-14"
-})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;", "{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:2px solid ", ";background:", ";border-radius:10px;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], (0, _size.media)('small'), (0, _zIndex.default)('high'), _ref12 => {
+})(["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:2px solid ", ";background:", ";border-radius:10px;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], _ref21 => {
   let {
     theme
-  } = _ref12;
+  } = _ref21;
+  return theme.allBreakpoints('M');
+}, (0, _zIndex.default)('high'), _ref22 => {
+  let {
+    theme
+  } = _ref22;
   return theme.color('grey');
-}, _ref13 => {
+}, _ref23 => {
   let {
     theme
-  } = _ref13;
+  } = _ref23;
   return theme.color('grey_light');
-}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref14 => {
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref24 => {
   let {
     theme
-  } = _ref14;
+  } = _ref24;
   return theme.color('grey');
 });
 const Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withConfig({
@@ -153,25 +202,30 @@ const Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withCo
 const Button = exports.Button = _styledComponents.default.button.withConfig({
   displayName: "Donatestyle__Button",
   componentId: "sc-8rjm3t-16"
-})(["width:100%;margin:", " 0 ", ";color:", ";font-size:", ";font-weight:bold;cursor:pointer;min-height:48px;background:", ";text-decoration:none;border-radius:2rem;border:none;box-shadow:0px 0px 16px rgba(0,0,0,0.15);appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}", "{padding:", " ", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref15 => {
+})(["width:100%;margin:", " 0 ", ";color:", ";font-size:", ";font-weight:bold;cursor:pointer;min-height:48px;background:", ";text-decoration:none;border-radius:2rem;border:none;box-shadow:0px 0px 16px rgba(0,0,0,0.15);appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}@media ", "{padding:", " ", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref25 => {
   let {
     theme
-  } = _ref15;
+  } = _ref25;
   return theme.color('white');
-}, _ref16 => {
+}, _ref26 => {
   let {
     theme
-  } = _ref16;
+  } = _ref26;
   return theme.fontSize('s');
-}, _ref17 => {
+}, _ref27 => {
   let {
     theme,
     color
-  } = _ref17;
+  } = _ref27;
   return theme.color(color);
-}, _ref18 => {
+}, _ref28 => {
   let {
     theme
-  } = _ref18;
+  } = _ref28;
   return theme.color('coral_dark');
-}, (0, _size.media)('small'), (0, _spacing.default)('md'), (0, _spacing.default)('l'));
+}, _ref29 => {
+  let {
+    theme
+  } = _ref29;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('md'), (0, _spacing.default)('l'));

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

@@ -9,7 +9,6 @@ exports.default = void 0;
 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"));
 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;}"]);
@@ -17,12 +16,17 @@ const fadeOpen = (0, _styledComponents.keyframes)(["0%{opacity:0;max-height:0px;
 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;}"], props => props.fadeOpen, props => props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, props.fadeClose), _ref => {
+})(["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;@media ", "{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'));
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.allBreakpoints('M');
+});
 const TextWrapper = _styledComponents.default.div.withConfig({
   displayName: "PopUpComponent__TextWrapper",
   componentId: "sc-1d7imlo-1"
@@ -30,17 +34,17 @@ const TextWrapper = _styledComponents.default.div.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;}"], _ref2 => {
+})(["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;}"], _ref3 => {
   let {
     theme
-  } = _ref2;
+  } = _ref3;
   return theme.color('grey');
 });
-const PopUpComponent = _ref3 => {
+const PopUpComponent = _ref4 => {
   let {
     PopUpText,
     setPopOpen
-  } = _ref3;
+  } = _ref4;
   const [isClosed, setIsClosed] = (0, _react.useState)(false);
 
   // Only update centralised state - which renders

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Wrapper = exports.Switch = exports.MoneyBox = exports.Label = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-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"));
@@ -26,44 +25,49 @@ const Wrapper = exports.Wrapper = _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'), _ref2 => {
+})(["width:100%;padding:2px;position:relative;display:flex;flex-direction:row;margin:", " 0;border-radius:2rem;background:", ";@media ", "{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, _ref3 => {
+}, _ref3 => {
   let {
     theme
   } = _ref3;
+  return theme.allBreakpoints('M');
+}, Switch, _hideVisually.default, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.color('blue');
 });
 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 ", ";}"], _ref4 => {
+})(["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 ", ";}"], _ref5 => {
   let {
     theme
-  } = _ref4;
+  } = _ref5;
   return theme.fontSize('s');
-}, _ref5 => {
+}, _ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme.fontFamilies('Montserrat');
-}, (0, _zIndex.default)('medium'), _ref6 => {
+}, (0, _zIndex.default)('medium'), _ref7 => {
   let {
     active
-  } = _ref6;
+  } = _ref7;
   return active === true ? 'default' : 'pointer';
-}, _ref7 => {
+}, _ref8 => {
   let {
     active,
     theme
-  } = _ref7;
+  } = _ref8;
   return active === true ? theme.color('white') : theme.color('black');
-}, _ref8 => {
+}, _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.color('blue');
 });

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

@@ -10,11 +10,10 @@ 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");
 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);}", "}"], _ref => {
+})(["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;@media ", "{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;
@@ -34,40 +33,45 @@ const MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig
     theme
   } = _ref4;
   return theme.fontFamilies('Anton');
-}, (0, _spacing.default)('s'), (0, _size.media)('small'), _ref5 => {
+}, (0, _spacing.default)('s'), _ref5 => {
   let {
     theme
   } = _ref5;
-  return theme.fontSize('xl');
-}, (0, _spacing.default)('m'), _ref6 => {
+  return theme.allBreakpoints('M');
+}, _ref6 => {
   let {
     theme
   } = _ref6;
+  return theme.fontSize('xl');
+}, (0, _spacing.default)('m'), _ref7 => {
+  let {
+    theme
+  } = _ref7;
   return theme.color('blue');
-}, _ref7 => {
+}, _ref8 => {
   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 => {
+  } = _ref8;
+  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);}"], _ref9 => {
     let {
       theme
-    } = _ref8;
+    } = _ref9;
     return theme.color('blue');
-  }, _ref9 => {
+  }, _ref10 => {
     let {
       theme
-    } = _ref9;
+    } = _ref10;
     return theme.color('white');
   });
 });
-const MoneyBuy = _ref10 => {
+const MoneyBuy = _ref11 => {
   let {
     setOtherAmount,
     amount,
     currency,
     description,
     ...rest
-  } = _ref10;
+  } = _ref11;
   return /*#__PURE__*/_react.default.createElement(MoneyBuyButton, Object.assign({}, rest, {
     "aria-label": description,
     value: "".concat(currency, " ").concat(amount),

package/dist/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap

@@ -70,12 +70,6 @@ exports[`renders correctly 1`] = `
   color: #FFFFFF;
 }
 
-.c15 (min-width:1024px) {
-  width: auto;
-  padding: 1rem 2rem;
-  margin: 0 auto 2rem;
-}
-
 .c8 {
   position: relative;
   display: -webkit-box;
@@ -223,6 +217,14 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c15 {
+    width: auto;
+    padding: 1rem 2rem;
+    margin: 0 auto 2rem;
+  }
+}
+
 @media (min-width:740px) {
   .c13 {
     max-width: 290px;

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.MetaIcons = exports.InnerWrapper = exports.HeaderWrapper = exports.Brand = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
-var _size = require("../../../theme/shared/size");
+var _allContainers = _interopRequireDefault(require("../../../theme/shared/allContainers"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 const HeaderWrapper = exports.HeaderWrapper = _styledComponents.default.header.attrs(() => ({
   role: 'banner'
@@ -28,7 +28,7 @@ const HeaderWrapper = exports.HeaderWrapper = _styledComponents.default.header.a
 const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "Headerstyle__InnerWrapper",
   componentId: "sc-11ghppe-1"
-})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _size.container.large, _ref3 => {
+})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _allContainers.default.large, _ref3 => {
   let {
     theme
   } = _ref3;

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

@@ -8,20 +8,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.TopCopyWrapper = exports.ShowHideInputWrapper = exports.OuterWrapper = exports.MPTextInput = exports.Head = exports.FormField = exports.ExtraInfo = exports.CheckLabel = exports.CheckInput = exports.CheckContainer = exports.BottomCopyWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var _size = require("../../../theme/shared/size");
 var _CR_Tick_black = _interopRequireDefault(require("./assets/CR_Tick_black.svg"));
 var _TextInput = _interopRequireDefault(require("./_TextInput"));
 const OuterWrapper = exports.OuterWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__OuterWrapper",
   componentId: "sc-68n85q-0"
-})(["display:flex;flex-direction:column;", "{flex-direction:row;flex-wrap:wrap;}"], (0, _size.media)('small'));
+})(["display:flex;flex-direction:column;@media ", "{flex-direction:row;flex-wrap:wrap;}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.allBreakpoints('M');
+});
 const TopCopyWrapper = exports.TopCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__TopCopyWrapper",
   componentId: "sc-68n85q-1"
-})(["margin:", " 0;display:flex;width:100%;@media ", "{padding:10px;}"], (0, _spacing.default)('l'), _ref => {
+})(["margin:", " 0;display:flex;width:100%;@media ", "{padding:10px;}"], (0, _spacing.default)('l'), _ref2 => {
   let {
     theme
-  } = _ref;
+  } = _ref2;
   return theme.allBreakpoints('M');
 });
 const BottomCopyWrapper = exports.BottomCopyWrapper = _styledComponents.default.div.withConfig({
@@ -35,71 +39,71 @@ const Head = exports.Head = _styledComponents.default.div.withConfig({
 const FormField = exports.FormField = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__FormField",
   componentId: "sc-68n85q-4"
-})(["", ""], _ref2 => {
+})(["", ""], _ref3 => {
   let {
     theme
-  } = _ref2;
+  } = _ref3;
   return (0, _styledComponents.css)(["position:relative;margin-bottom:", ";width:100%;display:flex;flex-direction:column;@media ", "{width:50%;padding:10px;}label{position:relative;margin-bottom:", ";width:100%;color:", ";}h3{position:relative;margin-bottom:", ";&:before{position:absolute;top:0;left:0;width:24px;height:24px;content:'';}}"], (0, _spacing.default)('md'), theme.allBreakpoints('M'), (0, _spacing.default)('md'), theme.color('grey_dark'), (0, _spacing.default)('md'));
 });
 const CheckContainer = exports.CheckContainer = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckContainer",
   componentId: "sc-68n85q-5"
-})(["", ""], _ref3 => {
+})(["", ""], _ref4 => {
   let {
     theme
-  } = _ref3;
+  } = _ref4;
   return (0, _styledComponents.css)(["width:100%;display:flex;justify-content:space-between;font-size:", ";font-family:", ";"], theme.fontSize('md'), theme.fontFamilies(theme.font.regular));
 });
 const CheckLabel = exports.CheckLabel = _styledComponents.default.label.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckLabel",
   componentId: "sc-68n85q-6"
-})(["", ""], _ref4 => {
+})(["", ""], _ref5 => {
   let {
     theme
-  } = _ref4;
+  } = _ref5;
   return (0, _styledComponents.css)(["display:flex;align-items:center;font-size:", ";@media ", "{font-size:", ";}"], theme.fontSize('xs'), theme.allBreakpoints('M'), theme.fontSize('s'));
 });
 const CheckInput = exports.CheckInput = _styledComponents.default.input.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckInput",
   componentId: "sc-68n85q-7"
-})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;width:100%;height:100%;left:0;top:0;margin:0;border:1px solid ", ";+ span{margin-right:10px;width:30px;height:30px;background-color:", ";border:1px solid ", ";float:left;border-radius:8px;@media ", "{margin-right:15px;}}:checked + span{background:url(", ") no-repeat center;background-color:", ";background-size:contain;}"], _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.fontSize('sm');
-}, _ref6 => {
+})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;width:100%;height:100%;left:0;top:0;margin:0;border:1px solid ", ";+ span{margin-right:10px;width:30px;height:30px;background-color:", ";border:1px solid ", ";float:left;border-radius:8px;@media ", "{margin-right:15px;}}:checked + span{background:url(", ") no-repeat center;background-color:", ";background-size:contain;}"], _ref6 => {
   let {
     theme
   } = _ref6;
-  return theme.color('grey_for_forms');
+  return theme.fontSize('sm');
 }, _ref7 => {
   let {
     theme
   } = _ref7;
-  return theme.color('grey_light');
+  return theme.color('grey_for_forms');
 }, _ref8 => {
   let {
     theme
   } = _ref8;
-  return theme.color('black');
+  return theme.color('grey_light');
 }, _ref9 => {
   let {
     theme
   } = _ref9;
-  return theme.allBreakpoints('M');
-}, _CR_Tick_black.default, _ref10 => {
+  return theme.color('black');
+}, _ref10 => {
   let {
     theme
   } = _ref10;
+  return theme.allBreakpoints('M');
+}, _CR_Tick_black.default, _ref11 => {
+  let {
+    theme
+  } = _ref11;
   return theme.color('grey_light');
 });
 const ShowHideInputWrapper = exports.ShowHideInputWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__ShowHideInputWrapper",
   componentId: "sc-68n85q-8"
-})(["display:", ";width:100%;label{width:100%;border:none;padding:0;}"], _ref11 => {
+})(["display:", ";width:100%;label{width:100%;border:none;padding:0;}"], _ref12 => {
   let {
     show
-  } = _ref11;
+  } = _ref12;
   return show ? 'block' : 'none';
 });
 const ExtraInfo = exports.ExtraInfo = _styledComponents.default.span.withConfig({
@@ -109,9 +113,14 @@ const ExtraInfo = exports.ExtraInfo = _styledComponents.default.span.withConfig(
 const MPTextInput = exports.MPTextInput = (0, _styledComponents.default)(_TextInput.default).withConfig({
   displayName: "MarketingPreferencesDSstyle__MPTextInput",
   componentId: "sc-68n85q-10"
-})(["input{border:1px solid  ", ";;", "{max-width:none;}}"], _ref12 => {
+})(["input{border:1px solid  ", ";;@media ", "{max-width:none;}}"], _ref13 => {
   let {
     theme
-  } = _ref12;
+  } = _ref13;
   return theme.color('black');
-}, (0, _size.media)('small'));
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.allBreakpoints('M');
+});