@comicrelief/component-library 7.36.0 → 7.38.0

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/Accordion/__snapshots__/Accordion.test.js.snap

@@ -20,6 +20,7 @@ exports[`renders correctly 1`] = `
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
+  fill: #000000;
 }
 
 .c0 {
@@ -88,6 +89,12 @@ exports[`renders correctly 1`] = `
   padding: 0 2rem;
 }
 
+@media (min-width:1024px) {
+  .c4 {
+    fill: #000000;
+  }
+}
+
 @media (min-width:740px) {
   .c1 {
     padding: 2rem 3rem;

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/CardDs/__snapshots__/CardDs.test.js.snap

@@ -115,6 +115,10 @@ exports[`renders correctly 1`] = `
   z-index: 2;
 }
 
+.c9 {
+  fill: #FFFFFF;
+}
+
 @media (min-width:740px) {
   .c8 {
     width: auto;
@@ -201,6 +205,12 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c9 {
+    fill: #FFFFFF;
+  }
+}
+
 <div
   className="c0"
 >
@@ -258,6 +268,7 @@ exports[`renders correctly 1`] = `
         type="button"
       >
         <svg
+          className="c9"
           fill="#FFFFFF"
           height={24}
           viewBox="0 0 96 96"

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/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -79,6 +79,10 @@ exports[`renders correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c13 {
+  fill: #FFFFFF;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -175,6 +179,12 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c13 {
+    fill: #FFFFFF;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -310,6 +320,7 @@ exports[`renders correctly 1`] = `
           type="button"
         >
           <svg
+            className="c13"
             fill="#FFFFFF"
             height={24}
             viewBox="0 0 96 96"

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",

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

@@ -46,7 +46,7 @@ const SubNavMenu = exports.SubNavMenu = _styledComponents.default.ul.withConfig(
   let {
     theme
   } = _ref4;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref5 => {
   let {
     column
@@ -64,7 +64,7 @@ const SubNavItem = exports.SubNavItem = _styledComponents.default.li.withConfig(
   let {
     theme
   } = _ref6;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref7 => {
   let {
     column
@@ -74,7 +74,7 @@ const SubNavItem = exports.SubNavItem = _styledComponents.default.li.withConfig(
   let {
     theme
   } = _ref8;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref9 => {
   let {
     column
@@ -100,7 +100,7 @@ const NavMenu = exports.NavMenu = _styledComponents.default.ul.withConfig({
   let {
     theme
   } = _ref10;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 });
 
 /**
@@ -121,17 +121,17 @@ const NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
   let {
     theme
   } = _ref11;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref12 => {
   let {
     theme
   } = _ref12;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref13 => {
   let {
     theme
   } = _ref13;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref14 => {
   let {
     theme
@@ -151,5 +151,5 @@ const NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
   let {
     theme
   } = _ref17;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 });

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

@@ -73,5 +73,5 @@ const BurgerWrapper = exports.BurgerWrapper = (0, _styledComponents.default)(_Li
   let {
     theme
   } = _ref8;
-  return theme.breakpoint('nav');
+  return theme.allBreakpoints('Nav');
 });

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

@@ -23,7 +23,7 @@ const HeaderWrapper = exports.HeaderWrapper = _styledComponents.default.header.a
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('nav');
+  return theme.allBreakpoints('Nav');
 });
 const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "Headerstyle__InnerWrapper",
@@ -32,7 +32,7 @@ const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withCo
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('nav');
+  return theme.allBreakpoints('Nav');
 });
 const Brand = exports.Brand = _styledComponents.default.div.withConfig({
   displayName: "Headerstyle__Brand",
@@ -45,7 +45,7 @@ const MetaIcons = exports.MetaIcons = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref4;
-  return theme.breakpoint('nav');
+  return theme.allBreakpoints('Nav');
 }, _ref5 => {
   let {
     theme