@comicrelief/component-library 7.37.0 → 7.38.0

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

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

@@ -40,7 +40,7 @@ const Nav = exports.Nav = _styledComponents.default.nav.withConfig({
   let {
     theme
   } = _ref4;
-  return theme.breakpoint('nav');
+  return theme.allBreakpoints('Nav');
 }, (0, _zIndex.default)('medium'), _hideVisually.default);
 
 /**
@@ -63,7 +63,7 @@ const SubNavMenu = exports.SubNavMenu = _styledComponents.default.ul.withConfig(
   let {
     theme
   } = _ref7;
-  return theme.breakpoint('nav');
+  return theme.allBreakpoints('Nav');
 }, _ref8 => {
   let {
     isKeyPressed
@@ -117,7 +117,7 @@ const SubNavLinkUnderline = exports.SubNavLinkUnderline = (0, _styledComponents.
   let {
     theme
   } = _ref13;
-  return theme.breakpoint('nav');
+  return theme.allBreakpoints('Nav');
 }, _ref14 => {
   let {
     theme
@@ -145,7 +145,7 @@ const NavMenu = exports.NavMenu = _styledComponents.default.ul.withConfig({
   let {
     theme
   } = _ref17;
-  return theme.breakpoint('nav');
+  return theme.allBreakpoints('Nav');
 }, _ref18 => {
   let {
     theme
@@ -168,7 +168,7 @@ const NavLink = exports.NavLink = (0, _styledComponents.default)(NavLinkClass).w
   let {
     theme
   } = _ref20;
-  return theme.breakpoint('nav');
+  return theme.allBreakpoints('Nav');
 }, SubNavMenu);
 
 /**
@@ -186,7 +186,7 @@ const NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
   let {
     theme
   } = _ref22;
-  return theme.breakpoint('nav');
+  return theme.allBreakpoints('Nav');
 }, SubNavMenu, SubNavMenu, (0, _zIndex.default)('high'), _ref23 => {
   let {
     theme

package/dist/components/Organisms/ImpactSlider/ImpactMoneybuys.style.js

@@ -15,7 +15,7 @@ const MoneybuyWrapper = exports.MoneybuyWrapper = _styledComponents.default.div.
   let {
     theme
   } = _ref;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const Moneybuy = exports.Moneybuy = _styledComponents.default.div.withConfig({
   displayName: "ImpactMoneybuysstyle__Moneybuy",
@@ -24,12 +24,12 @@ const Moneybuy = exports.Moneybuy = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref3 => {
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const OrLabel = exports.OrLabel = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "ImpactMoneybuysstyle__OrLabel",
@@ -42,7 +42,7 @@ const MoneybuyImage = exports.MoneybuyImage = _styledComponents.default.span.wit
   let {
     theme
   } = _ref4;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const MoneybuyAmount = exports.MoneybuyAmount = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "ImpactMoneybuysstyle__MoneybuyAmount",
@@ -51,7 +51,7 @@ const MoneybuyAmount = exports.MoneybuyAmount = (0, _styledComponents.default)(_
   let {
     theme
   } = _ref5;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const MoneybuyDescription = exports.MoneybuyDescription = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "ImpactMoneybuysstyle__MoneybuyDescription",
@@ -60,5 +60,5 @@ const MoneybuyDescription = exports.MoneybuyDescription = (0, _styledComponents.
   let {
     theme
   } = _ref6;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });

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

@@ -15,12 +15,12 @@ const OuterWrapper = exports.OuterWrapper = _styledComponents.default.div.withCo
   let {
     theme
   } = _ref;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref2 => {
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "ImpactSliderstyle__InnerWrapper",
@@ -29,7 +29,7 @@ const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withCo
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "ImpactSliderstyle__Copy",
@@ -38,7 +38,7 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref4;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const CurrentAmountCopy = exports.CurrentAmountCopy = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "ImpactSliderstyle__CurrentAmountCopy",
@@ -47,7 +47,7 @@ const CurrentAmountCopy = exports.CurrentAmountCopy = (0, _styledComponents.defa
   let {
     theme
   } = _ref5;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const SubmitButton = exports.SubmitButton = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "ImpactSliderstyle__SubmitButton",
@@ -61,10 +61,10 @@ const SubmitButton = exports.SubmitButton = (0, _styledComponents.default)(_Butt
   let {
     theme
   } = _ref7;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref8 => {
   let {
     theme
   } = _ref8;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });

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

@@ -22,7 +22,7 @@ const TopCopyWrapper = exports.TopCopyWrapper = _styledComponents.default.div.wi
   let {
     theme
   } = _ref;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 });
 const BottomCopyWrapper = exports.BottomCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__BottomCopyWrapper",
@@ -39,7 +39,7 @@ const FormField = exports.FormField = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref2;
-  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.breakpoint('small'), (0, _spacing.default)('md'), theme.color('grey_dark'), (0, _spacing.default)('md'));
+  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",
@@ -57,7 +57,7 @@ const CheckLabel = exports.CheckLabel = _styledComponents.default.label.withConf
   let {
     theme
   } = _ref4;
-  return (0, _styledComponents.css)(["display:flex;align-items:center;font-size:", ";@media ", "{font-size:", ";}"], theme.fontSize('xs'), theme.breakpoint('small'), theme.fontSize('s'));
+  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",
@@ -86,7 +86,7 @@ const CheckInput = exports.CheckInput = _styledComponents.default.input.withConf
   let {
     theme
   } = _ref9;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _CR_Tick_black.default, _ref10 => {
   let {
     theme

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

@@ -24,7 +24,7 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, _ref3 => {
   let {
     formAligntRight
@@ -44,7 +44,7 @@ const BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.defaul
   let {
     theme
   } = _ref5;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Membershipstyle__Wrapper",

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

@@ -21,7 +21,7 @@ const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withCo
   let {
     theme
   } = _ref;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const AmountWrapper = exports.AmountWrapper = _styledComponents.default.div.withConfig({
   displayName: "WYMDCarouselstyle__AmountWrapper",
@@ -30,7 +30,7 @@ const AmountWrapper = exports.AmountWrapper = _styledComponents.default.div.with
   let {
     theme
   } = _ref2;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 });
 const CopyWrapper = exports.CopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "WYMDCarouselstyle__CopyWrapper",
@@ -53,7 +53,7 @@ const Heading = exports.Heading = (0, _styledComponents.default)(_Text.default).
   let {
     theme
   } = _ref5;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const PeopleHelpedText = exports.PeopleHelpedText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "WYMDCarouselstyle__PeopleHelpedText",
@@ -62,12 +62,12 @@ const PeopleHelpedText = exports.PeopleHelpedText = (0, _styledComponents.defaul
   let {
     theme
   } = _ref6;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, _ref7 => {
   let {
     theme
   } = _ref7;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 });
 const Including = exports.Including = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "WYMDCarouselstyle__Including",
@@ -76,7 +76,7 @@ const Including = exports.Including = (0, _styledComponents.default)(_Text.defau
   let {
     theme
   } = _ref8;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 });
 
 // Unfortunately having to target plugin-created markup ye olde fashioned way:
@@ -92,20 +92,20 @@ const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.
   let {
     theme
   } = _ref10;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, (0, _spacing.default)('l'), _ref11 => {
   let {
     theme
   } = _ref11;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, animationSpeed, animationSpeed, animationSpeed, animationSpeed, props => props.mobileHeight, _ref12 => {
   let {
     theme
   } = _ref12;
-  return theme.breakpoint('small');
+  return theme.allBreakpoints('M');
 }, props => props.tabletHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, animationSpeed, textScaleOffsetA, textScaleOffsetB, textScaleOffsetA, textScaleOffsetB, _ref13 => {
   let {
     theme
   } = _ref13;
-  return theme.breakpoint('medium');
+  return theme.allBreakpoints('L');
 }, props => props.desktopHeight);

package/dist/theme/crTheme/theme.js

@@ -10,6 +10,7 @@ var _buttonColors = _interopRequireDefault(require("./buttonColors"));
 var _linkStyles = _interopRequireDefault(require("./linkStyles"));
 var _fontSizes = _interopRequireDefault(require("./fontSizes"));
 var _breakpoint = _interopRequireDefault(require("../shared/breakpoint"));
+var _allBreakpoints = _interopRequireDefault(require("../shared/allBreakpoints"));
 var _fontFamilies = _interopRequireDefault(require("../shared/fontFamilies"));
 var _default = exports.default = {
   color: _colors.default,
@@ -17,6 +18,7 @@ var _default = exports.default = {
   linkStyles: _linkStyles.default,
   fontSize: _fontSizes.default,
   breakpoint: _breakpoint.default,
+  allBreakpoints: _allBreakpoints.default,
   fontFamilies: _fontFamilies.default,
   font: {
     regular: 'Montserrat',

package/dist/theme/shared/allBreakpoints.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sizes = exports.default = void 0;
+const sizes = exports.sizes = {
+  S: 0,
+  M: 740,
+  L: 1024,
+  Nav: 1150,
+  XL: 1440
+};
+var _default = size => {
+  if (size) {
+    return "(min-width: ".concat(sizes[size], "px)");
+  }
+  return 'inherit';
+};
+exports.default = _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.37.0",
+  "version": "7.38.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/Button/Button.js

@@ -23,7 +23,7 @@ const StyledButton = styled.button`
     text-decoration: none;
   }
   ${({ color, theme }) => (color ? theme.buttonColors(color) : theme.buttonColors('red'))};
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: auto;
   }
 

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

@@ -16,7 +16,7 @@ const Icon = styled.svg`
   fill: ${({ mobileColour, colour, theme }) => (mobileColour ? theme.color(mobileColour) : theme.color(colour))};
 
   // Reinstate standard styles for 'desktop', adding a fallback for good measure:
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     fill: ${({ colour, theme }) => (colour ? theme.color(colour) : theme.color('white'))};
   }
 `;

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

@@ -9,7 +9,7 @@ const StyledSVG = styled.svg`
   fill: ${({ mobileColour, colour, theme }) => (mobileColour ? theme.color(mobileColour) : theme.color(colour))};
 
   // Reinstate standard styles for 'desktop', adding a fallback for good measure:
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     fill: ${({ colour, theme }) => (colour ? theme.color(colour) : theme.color('white'))};
   }
 `;

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

@@ -16,7 +16,7 @@ const Icon = styled.svg`
   fill: ${({ mobileColour, colour, theme }) => (mobileColour ? theme.color(mobileColour) : theme.color(colour))};
 
   // Reinstate standard styles for 'desktop', adding a fallback for good measure:
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     fill: ${({ colour, theme }) => (colour ? theme.color(colour) : theme.color('white'))};
   }
 `;

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

@@ -7,7 +7,7 @@ const StyledSVG = styled.svg`
   fill: ${({ mobileColour, colour, theme }) => (mobileColour ? theme.color(mobileColour) : theme.color(colour))};
 
   // Reinstate standard styles for 'desktop', adding a fallback for good measure:
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     fill: ${({ colour, theme }) => (colour ? theme.color(colour) : theme.color('white'))};
   }
 `;

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

@@ -7,7 +7,7 @@ const StyledSVG = styled.svg`
   fill: ${({ mobileColour, colour, theme }) => (mobileColour ? theme.color(mobileColour) : theme.color(colour))};
 
   // Reinstate standard styles for 'desktop', adding a fallback for good measure:
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     fill: ${({ colour, theme }) => (colour ? theme.color(colour) : theme.color('white'))};
   }
 `;

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

@@ -7,7 +7,7 @@ const StyledSVG = styled.svg`
   fill: ${({ mobileColour, colour, theme }) => (mobileColour ? theme.color(mobileColour) : theme.color(colour))};
 
   // Reinstate standard styles for 'desktop', adding a fallback for good measure:
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     fill: ${({ colour, theme }) => (colour ? theme.color(colour) : theme.color('white'))};
   }
 `;

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

@@ -7,7 +7,7 @@ const StyledSVG = styled.svg`
   fill: ${({ mobileColour, colour, theme }) => (mobileColour ? theme.color(mobileColour) : theme.color(colour))};
 
   // Reinstate standard styles for 'desktop', adding a fallback for good measure:
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     fill: ${({ colour, theme }) => (colour ? theme.color(colour) : theme.color('white'))};
   }
 `;

package/src/components/Atoms/Input/Input.js

@@ -33,7 +33,7 @@ const InputField = styled.input`${({ theme, error, prefixLength }) => css`
     border: 1px solid ${theme.color('grey_for_forms')};
   }
 
-  @media ${theme.breakpoint('small')} {
+  @media ${theme.allBreakpoints('M')} {
     max-width: 290px;
   }
 `}`;

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

@@ -21,12 +21,12 @@ const buttonStyle = () => css`
   // Override with mobile-specific colours where available:
   ${({ mobileColour, theme }) => (mobileColour ? theme.buttonColors(mobileColour) : null)};
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: auto;
   }
 
   // Reinstate general styles for 'desktop':
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     ${({ color, theme }) => (color ? theme.buttonColors(color) : theme.buttonColors('red'))};
   }
 `;
@@ -53,7 +53,7 @@ export const IconWrapper = styled.span`
       top: 0;
       bottom: 0;
     `};
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: auto;
     right: auto;
     position: relative;

package/src/components/Atoms/Logo/Logo.js

@@ -27,7 +27,7 @@ const LogoWrapper = styled.div`
   width: ${props => props.sizeSm};
   transform: ${props => (props.rotate ? 'rotate(-14deg)' : 'inherit')};
   vertical-align: bottom; // height fix
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     width: ${props => props.sizeMd};
   }
 `;

package/src/components/Atoms/Select/Select.js

@@ -32,7 +32,7 @@ const StyledSelect = styled.select`
     border: 1px solid ${({ theme }) => theme.color('grey_for_forms')};
   }
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     max-width: 290px;
   }
 `;

package/src/components/Atoms/SocialIcons/SocialIcons.js

@@ -14,7 +14,7 @@ const StyledList = styled.ul`
   padding: 0;
   align-items: center;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     justify-content: start;
   }
 `;
@@ -22,7 +22,7 @@ const StyledList = styled.ul`
 const StyledItem = styled.li`
   width: 32px;
   margin-right: ${spacing('m')};
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: 48px;
   }
 `;

package/src/components/Atoms/Text/Text.js

@@ -20,12 +20,12 @@ export const BaseText = styled.span`
     ? css`
           font-size: ${theme.fontSize('xxl')};
           line-height: 3rem;
-          @media ${theme.breakpoint('small')} {
+          @media ${theme.allBreakpoints('M')} {
             font-size: ${theme.fontSize('big')};
             line-height: ${theme.fontSize('big')};
             margin-bottom: 2rem;
           }
-          @media ${theme.breakpoint('medium')} {
+          @media ${theme.allBreakpoints('L')} {
             font-size: ${theme.fontSize('super')};
             line-height: ${theme.fontSize('super')};
             margin-bottom: 2rem;
@@ -40,7 +40,7 @@ export const BaseText = styled.span`
   ${({ size, theme }) => (size === 'm'
     ? css`
       font-size: ${theme.fontSize('s')};
-      @media ${theme.breakpoint('small')} {
+      @media ${theme.allBreakpoints('M')} {
         font-size: ${theme.fontSize('m')};
       }
     `

package/src/components/Molecules/Accordion/Accordion.js

@@ -27,7 +27,7 @@ const Button = styled.button`
   transition: bottom 0.1s linear;
   cursor: pointer;
   text-align: left;
-  
+
   &:focus,
   &:hover {
     color: inherit; // text was flashing white on focus on safari without this.
@@ -37,9 +37,9 @@ const Button = styled.button`
       animation-duration: 0.4s;
     }
   }
-  
+
   padding: ${spacing('l')};
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: ${spacing('l')} ${spacing('lg')};
   }
 `;
@@ -52,11 +52,11 @@ const Icon = styled.div`
 
 const Copy = styled.div`
   overflow: hidden;
-  height: 0; 
+  height: 0;
   visibility: none;
   transition: all 0.2s cubic-bezier(0.21, 1.7, 0.83, 0.68) 0s;
   padding: 0 ${spacing('l')};
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: 0 ${spacing('lg')};
   }
 
@@ -66,7 +66,7 @@ const Copy = styled.div`
     transition: all 0.2s cubic-bezier(0.21, 1.7, 0.83, 0.68) 0s;
     padding: 0 ${spacing('l')} ${spacing('l')};
 
-    @media ${({ theme }) => theme.breakpoint('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
       padding: 0 ${spacing('lg')} ${spacing('l')};
     }
   `)}