@comicrelief/component-library 7.37.0 → 7.38.0

package/dist/components/Atoms/Button/Button.js

@@ -28,7 +28,7 @@ const StyledButton = _styledComponents.default.button.withConfig({
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, (0, _breakpoint.default)('medium'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
 const Button = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {

package/dist/components/Atoms/Icons/Arrow.js

@@ -33,7 +33,7 @@ const Icon = _styledComponents.default.svg.withConfig({
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref4 => {
   let {
     colour,

package/dist/components/Atoms/Icons/AtSign.js

@@ -23,7 +23,7 @@ const StyledSVG = _styledComponents.default.svg.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref3 => {
   let {
     colour,

package/dist/components/Atoms/Icons/Chevron.js

@@ -33,7 +33,7 @@ const Icon = _styledComponents.default.svg.withConfig({
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref4 => {
   let {
     colour,

package/dist/components/Atoms/Icons/Download.js

@@ -22,7 +22,7 @@ const StyledSVG = _styledComponents.default.svg.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref3 => {
   let {
     colour,

package/dist/components/Atoms/Icons/External.js

@@ -22,7 +22,7 @@ const StyledSVG = _styledComponents.default.svg.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref3 => {
   let {
     colour,

package/dist/components/Atoms/Icons/Favourite.js

@@ -22,7 +22,7 @@ const StyledSVG = _styledComponents.default.svg.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref3 => {
   let {
     colour,

package/dist/components/Atoms/Icons/Internal.js

@@ -22,7 +22,7 @@ const StyledSVG = _styledComponents.default.svg.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref3 => {
   let {
     colour,

package/dist/components/Atoms/Input/Input.js

@@ -25,7 +25,7 @@ const InputField = _styledComponents.default.input.withConfig({
     error,
     prefixLength
   } = _ref;
-  return (0, _styledComponents.css)(["position:relative;box-sizing:border-box;width:100%;height:48px;padding:", " ", ";", " background-color:", ";border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:", ";font-size:inherit;z-index:2;font-family:", ";:focus{border:1px solid ", ";}@media ", "{max-width:290px;}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), prefixLength > 0 ? "padding-left: ".concat(getPrefixWidth(prefixLength), ";") : '', theme.color('grey_light'), error ? theme.color('red') : theme.color('grey_medium'), theme.color('black'), (0, _spacing.default)('sm'), theme.fontFamilies(theme.font.regular), theme.color('grey_for_forms'), theme.breakpoint('small'));
+  return (0, _styledComponents.css)(["position:relative;box-sizing:border-box;width:100%;height:48px;padding:", " ", ";", " background-color:", ";border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:", ";font-size:inherit;z-index:2;font-family:", ";:focus{border:1px solid ", ";}@media ", "{max-width:290px;}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), prefixLength > 0 ? "padding-left: ".concat(getPrefixWidth(prefixLength), ";") : '', theme.color('grey_light'), error ? theme.color('red') : theme.color('grey_medium'), theme.color('black'), (0, _spacing.default)('sm'), theme.fontFamilies(theme.font.regular), theme.color('grey_for_forms'), theme.allBreakpoints('M'));
 });
 const InputWrapper = _styledComponents.default.div.withConfig({
   displayName: "Input__InputWrapper",

package/dist/components/Atoms/Link/Link.style.js

@@ -30,12 +30,12 @@ const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;posit
   let {
     theme
   } = _ref4;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref5 => {
   let {
     theme
   } = _ref5;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref6 => {
   let {
     color,
@@ -68,7 +68,7 @@ const IconWrapper = exports.IconWrapper = _styledComponents.default.span.withCon
   let {
     theme
   } = _ref10;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref11 => {
   let {
     type

package/dist/components/Atoms/Logo/Logo.js

@@ -29,7 +29,7 @@ const LogoWrapper = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref;
-  return theme.breakpoint('nav');
+  return theme.allBreakpoints('Nav');
 }, props => props.sizeMd);
 const themeSwitcher = theme => {
   switch (theme) {

package/dist/components/Atoms/Select/Select.js

@@ -52,7 +52,7 @@ const StyledSelect = _styledComponents.default.select.withConfig({
   let {
     theme
   } = _ref7;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 });
 const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {

package/dist/components/Atoms/SocialIcons/SocialIcons.js

@@ -18,7 +18,7 @@ const StyledList = _styledComponents.default.ul.withConfig({
   let {
     theme
   } = _ref;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 });
 const StyledItem = _styledComponents.default.li.withConfig({
   displayName: "SocialIcons__StyledItem",
@@ -27,7 +27,7 @@ const StyledItem = _styledComponents.default.li.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 });
 
 /** Social media icons with customizable style linked to campaign social media accounts */

package/dist/components/Atoms/Text/Text.js

@@ -67,7 +67,7 @@ const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
     size,
     theme
   } = _ref10;
-  return size === 'super' ? (0, _styledComponents.css)(["font-size:", ";line-height:3rem;@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}"], theme.fontSize('xxl'), theme.breakpoint('small'), theme.fontSize('big'), theme.fontSize('big'), theme.breakpoint('medium'), theme.fontSize('super'), theme.fontSize('super')) : null;
+  return size === 'super' ? (0, _styledComponents.css)(["font-size:", ";line-height:3rem;@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}"], theme.fontSize('xxl'), theme.allBreakpoints('M'), theme.fontSize('big'), theme.fontSize('big'), theme.allBreakpoints('L'), theme.fontSize('super'), theme.fontSize('super')) : null;
 }, _ref11 => {
   let {
     mobileColor,
@@ -79,7 +79,7 @@ const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
     size,
     theme
   } = _ref12;
-  return size === 'm' ? (0, _styledComponents.css)(["font-size:", ";@media ", "{font-size:", ";}"], theme.fontSize('s'), theme.breakpoint('small'), theme.fontSize('m')) : null;
+  return size === 'm' ? (0, _styledComponents.css)(["font-size:", ";@media ", "{font-size:", ";}"], theme.fontSize('s'), theme.allBreakpoints('M'), theme.fontSize('m')) : null;
 });
 
 /** Text renders different elements based on the `tag` prop

package/dist/components/Molecules/Accordion/Accordion.js

@@ -27,7 +27,7 @@ const Button = _styledComponents.default.button.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, (0, _spacing.default)('l'), (0, _spacing.default)('lg'));
 const Icon = _styledComponents.default.div.withConfig({
   displayName: "Accordion__Icon",
@@ -40,7 +40,7 @@ const Copy = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, (0, _spacing.default)('lg'), _ref4 => {
   let {
     isOpen
@@ -49,7 +49,7 @@ const Copy = _styledComponents.default.div.withConfig({
     let {
       theme
     } = _ref5;
-    return theme.breakpoint('small');
+    return theme.allBreakpoints('M');
   }, (0, _spacing.default)('lg'), (0, _spacing.default)('l'));
 });
 const Accordion = _ref6 => {

package/dist/components/Molecules/ArticleTeaser/ArticleTeaser.js

@@ -44,12 +44,12 @@ const Link = (0, _styledComponents.default)(_Link.default).withConfig({
   let {
     theme
   } = _ref4;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref5 => {
   let {
     theme
   } = _ref5;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref6 => {
   let {
     category
@@ -72,12 +72,12 @@ const ImageWrapper = _styledComponents.default.div.withConfig({
     let {
       theme
     } = _ref9;
-    return theme.breakpoint('small');
+    return theme.allBreakpoints('M');
   }, _ref10 => {
     let {
       theme
     } = _ref10;
-    return theme.breakpoint('medium');
+    return theme.allBreakpoints('L');
   });
 });
 const CopyWrapper = _styledComponents.default.div.withConfig({
@@ -91,13 +91,13 @@ const CopyWrapper = _styledComponents.default.div.withConfig({
     let {
       theme
     } = _ref12;
-    return theme.breakpoint('small');
+    return theme.allBreakpoints('M');
   });
 }, _ref13 => {
   let {
     theme
   } = _ref13;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const Title = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "ArticleTeaser__Title",

package/dist/components/Molecules/Banner/Banner.js

@@ -26,12 +26,12 @@ const Container = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, (0, _spacing.default)('xl'), (0, _spacing.default)('l'), _ref3 => {
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('large');
+  return theme.allBreakpoints('XL');
 }, (0, _spacing.default)('xl'), (0, _spacing.default)('xl'));
 const Banner = _ref4 => {
   let {

package/dist/components/Molecules/Box/Box.js

@@ -16,12 +16,12 @@ const Container = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref2 => {
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('large');
+  return theme.allBreakpoints('XL');
 });
 const Image = _styledComponents.default.div.withConfig({
   displayName: "Box__Image",
@@ -34,12 +34,12 @@ const Copy = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref4 => {
   let {
     theme
   } = _ref4;
-  return theme.breakpoint('large');
+  return theme.allBreakpoints('XL');
 });
 const Box = _ref5 => {
   let {

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

@@ -22,12 +22,12 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref3 => {
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('large');
+  return theme.allBreakpoints('XL');
 });
 const Image = exports.Image = _styledComponents.default.div.withConfig({
   displayName: "CardDsstyle__Image",
@@ -36,7 +36,7 @@ const Image = exports.Image = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref4;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('md'), (0, _spacing.default)('md'));
 const MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
   displayName: "CardDsstyle__MediaLink",
@@ -45,12 +45,12 @@ const MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
   let {
     theme
   } = _ref5;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref6 => {
   let {
     theme
   } = _ref6;
-  return theme.breakpoint('large');
+  return theme.allBreakpoints('XL');
 });
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "CardDsstyle__Copy",
@@ -70,7 +70,7 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref9;
-  return theme.breakpoint('large');
+  return theme.allBreakpoints('XL');
 }, (0, _zIndex.default)('low'), _ref10 => {
   let {
     hasImage
@@ -79,12 +79,12 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
     let {
       theme
     } = _ref11;
-    return theme.breakpoint('small');
+    return theme.allBreakpoints('M');
   }, (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('m'), _ref12 => {
     let {
       theme
     } = _ref12;
-    return theme.breakpoint('large');
+    return theme.allBreakpoints('XL');
   }, (0, _spacing.default)('m'), (0, _spacing.default)('m'));
 });
 const CTA = exports.CTA = _styledComponents.default.div.withConfig({
@@ -94,7 +94,7 @@ const CTA = exports.CTA = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref13;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, (0, _spacing.default)('l'), (0, _spacing.default)('md'), _ref14 => {
   let {
     hasImage

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

@@ -14,7 +14,7 @@ const Section = exports.Section = _styledComponents.default.section.withConfig({
   let {
     theme
   } = _ref;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 });
 const CopyWrapper = exports.CopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "DoubleCopystyle__CopyWrapper",

package/dist/components/Molecules/InfoBanner/InfoBanner.js

@@ -18,7 +18,7 @@ const Container = _styledComponents.default.section.withConfig({
   let {
     theme
   } = _ref;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 });
 const Info = _styledComponents.default.div.withConfig({
   displayName: "InfoBanner__Info",
@@ -27,7 +27,7 @@ const Info = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 });
 
 /**

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

@@ -17,7 +17,7 @@ const MoreInfo = exports.MoreInfo = (0, _styledComponents.default)(_Text.default
   let {
     theme
   } = _ref;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref2 => {
   let {
     theme

package/dist/components/Molecules/Promo/_PromoVideoButton.style.js

@@ -42,7 +42,7 @@ const PlayButton = exports.PlayButton = _styledComponents.default.button.withCon
   let {
     theme
   } = _ref5;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref6 => {
   let {
     copyLeft

package/dist/components/Molecules/SearchResult/SearchResult.js

@@ -30,7 +30,7 @@ const Item = (0, _styledComponents.default)(_Link.default).withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 });
 const ImageWrapper = _styledComponents.default.div.withConfig({
   displayName: "SearchResult__ImageWrapper",
@@ -39,7 +39,7 @@ const ImageWrapper = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref4 => {
   let {
     smallImageWidth
@@ -49,7 +49,7 @@ const ImageWrapper = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref5;
-  return theme.breakpoint('large');
+  return theme.allBreakpoints('XL');
 }, _ref6 => {
   let {
     largeImageWidth

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

@@ -71,12 +71,12 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref9;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }) : (0, _styledComponents.css)(["@media ", "{width:100%;max-width ", ";padding:", ";}margin:auto;padding:", ";"], _ref10 => {
   let {
     theme
   } = _ref10;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _size.container.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')), (0, _size.media)('medium'), _ref11 => {
   let {
     paddingOption
@@ -95,7 +95,7 @@ const Media = exports.Media = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref13;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref14 => {
   let {
     fullImage
@@ -160,7 +160,7 @@ const Image = exports.Image = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref24;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref25 => {
   let {
     fullImage,

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.md

@@ -12,7 +12,7 @@ const Title = styled(Text)`
   letter-spacing: 0.03em;
   text-transform: uppercase;
   margin: ${spacing('md')} 0;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin-bottom: ${spacing('m')};
   }
 `;
@@ -57,7 +57,7 @@ import spacing from '../../../theme/shared/spacing';
 
 const Title = styled(Text)`
   margin: ${spacing('md')} 0;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin-bottom: ${spacing('m')};
   }
 `;
@@ -103,7 +103,7 @@ import spacing from '../../../theme/shared/spacing';
 
 const Title = styled(Text)`
   margin: ${spacing('md')} 0;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin-bottom: ${spacing('m')};
   }
 `;

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.style.js

@@ -23,7 +23,7 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref3 => {
   let {
     imageLeft
@@ -41,7 +41,7 @@ const Image = exports.Image = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref4;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, boxShadow);
 const MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
   displayName: "SingleMessageDsstyle__MediaLink",
@@ -55,7 +55,7 @@ const MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
   let {
     theme
   } = _ref6;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 });
 const PlayHolder = exports.PlayHolder = _styledComponents.default.div.withConfig({
   displayName: "SingleMessageDsstyle__PlayHolder",
@@ -81,7 +81,7 @@ const CTA = exports.CTA = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref8;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref9 => {
   let {
     hasImage
@@ -111,7 +111,7 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref13;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, (0, _spacing.default)('l'), _ref14 => {
   let {
     hasLink
@@ -126,7 +126,7 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref16;
-  return theme.breakpoint('large');
+  return theme.allBreakpoints('XL');
 }, (0, _spacing.default)('m'), _ref17 => {
   let {
     hasLink

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

@@ -26,7 +26,7 @@ const CookieText = exports.CookieText = (0, _styledComponents.default)(_Text.def
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, (0, _spacing.default)('none'), (0, _spacing.default)('md'));
 const AcceptCookieBtn = exports.AcceptCookieBtn = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "CookieBannerstyle__AcceptCookieBtn",
@@ -35,7 +35,7 @@ const AcceptCookieBtn = exports.AcceptCookieBtn = (0, _styledComponents.default)
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, (0, _spacing.default)('xsm'));
 const LinkStyle = exports.LinkStyle = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "CookieBannerstyle__LinkStyle",

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

@@ -78,7 +78,7 @@ const NameWrapper = exports.NameWrapper = _styledComponents.default.div.withConf
   let {
     theme
   } = _ref9;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref10 => {
   let {
     columnLayout
@@ -102,7 +102,7 @@ const InputField = exports.InputField = (0, _styledComponents.default)(_TextInpu
   let {
     theme
   } = _ref13;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const Title = exports.Title = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "EmailSignUpstyle__Title",

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

@@ -18,7 +18,7 @@ const FooterWrapper = exports.FooterWrapper = _styledComponents.default.footer.a
   let {
     theme
   } = _ref;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, (0, _spacing.default)('l'));
 const Angle = exports.Angle = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__Angle",
@@ -27,7 +27,7 @@ const Angle = exports.Angle = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__InnerWrapper",
@@ -36,7 +36,7 @@ const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withCo
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, (0, _spacing.default)('md'), (0, _spacing.default)('xl'));
 const FooterLegalLine = exports.FooterLegalLine = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Footerstyle__FooterLegalLine",
@@ -53,7 +53,7 @@ const FooterCopyright = exports.FooterCopyright = _styledComponents.default.div.
   let {
     theme
   } = _ref4;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const Brand = exports.Brand = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "Footerstyle__Brand",