@comicrelief/component-library 7.37.0 → 7.39.0

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

@@ -9,11 +9,10 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var _breakpoint = _interopRequireDefault(require("../../../theme/shared/breakpoint"));
 const StyledButton = _styledComponents.default.button.withConfig({
   displayName: "Button__StyledButton",
   componentId: "sc-1gm5vj0-0"
-})(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;> a{text-decoration:none;}", ";@media ", "{width:auto;}", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], _ref => {
+})(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;> a{text-decoration:none;}", ";@media ", "{width:auto;}@media ", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], _ref => {
   let {
     theme
   } = _ref;
@@ -28,14 +27,19 @@ const StyledButton = _styledComponents.default.button.withConfig({
   let {
     theme
   } = _ref3;
-  return theme.breakpoint('small');
-}, (0, _breakpoint.default)('medium'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
-const Button = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+  return theme.allBreakpoints('M');
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
+const Button = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     children,
     wrapper,
     ...rest
-  } = _ref4;
+  } = _ref5;
   return /*#__PURE__*/_react.default.createElement(StyledButton, Object.assign({}, rest, {
     as: wrapper ? 'span' : 'button',
     ref: ref

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

@@ -5,9 +5,9 @@ var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Button = _interopRequireDefault(require("./Button"));
-it('renders a standard styled link correctly', () => {
+it("renders a standard styled link correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     type: "submit"
   }, "A standard link")).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      position: relative;\n      padding: 0.5rem 1.25rem;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      font-weight: 700;\n      font-size: 1rem;\n      border-radius: 2rem;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      height: 3.125rem;\n      width: 100%;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      border: none;\n      cursor: pointer;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 > a {\n      -webkit-text-decoration: none;\n      text-decoration: none;\n    }\n\n    .c0:hover {\n      background-color: #890B11;\n      color: #FFFFFF;\n    }\n\n    .c0 (min-width:1024px) {\n      width: auto;\n      padding: 1rem 2rem;\n      margin: 0 auto 2rem;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        width: auto;\n      }\n    }\n\n    <button\n      className=\"c0\"\n      type=\"submit\"\n    >\n      A standard link\n    </button>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      position: relative;\n      padding: 0.5rem 1.25rem;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      font-weight: 700;\n      font-size: 1rem;\n      border-radius: 2rem;\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      height: 3.125rem;\n      width: 100%;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      border: none;\n      cursor: pointer;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    .c0 > a {\n      -webkit-text-decoration: none;\n      text-decoration: none;\n    }\n\n    .c0:hover {\n      background-color: #890B11;\n      color: #FFFFFF;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        width: auto;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <button\n      className=\"c0\"\n      type=\"submit\"\n    >\n      A standard link\n    </button>\n  ");
 });

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/Chip/Chip.style.js

@@ -8,7 +8,6 @@ exports.Overlay = exports.LabelGroup = exports.ClearButton = exports.CheckLabel
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
-var _breakpoint = _interopRequireDefault(require("../../../theme/shared/breakpoint"));
 var _CR_RedShed = _interopRequireDefault(require("./assets/CR_RedShed.svg"));
 var _CR_Funding = _interopRequireDefault(require("./assets/CR_Funding.svg"));
 var _CR_MentalHealth = _interopRequireDefault(require("./assets/CR_MentalHealth.svg"));
@@ -50,67 +49,72 @@ const LabelGroup = exports.LabelGroup = _styledComponents.default.div.withConfig
 const CheckLabel = exports.CheckLabel = _styledComponents.default.label.withConfig({
   displayName: "Chipstyle__CheckLabel",
   componentId: "sc-6s9oo3-1"
-})(["display:flex;align-items:center;width:auto;height:48px;border-radius:2rem;background-color:#d5d5d5;margin:", " ", " 0 0;padding:4px;padding-right:1rem;flex:0 0 auto;position:relative;", "{margin:", " ", " 0 0;}"], (0, _spacing.default)('sm'), (0, _spacing.default)('sm'), (0, _breakpoint.default)('small'), (0, _spacing.default)('md'), (0, _spacing.default)('md'));
+})(["display:flex;align-items:center;width:auto;height:48px;border-radius:2rem;background-color:#d5d5d5;margin:", " ", " 0 0;padding:4px;padding-right:1rem;flex:0 0 auto;position:relative;@media ", "{margin:", " ", " 0 0;}"], (0, _spacing.default)('sm'), (0, _spacing.default)('sm'), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('md'), (0, _spacing.default)('md'));
 const Overlay = exports.Overlay = _styledComponents.default.span.withConfig({
   displayName: "Chipstyle__Overlay",
   componentId: "sc-6s9oo3-2"
-})(["display:block;position:absolute;width:100%;height:100%;opacity:0.2;border-radius:2rem;left:0;top:0;right:0;bottom:0;", ";:hover{background:", ";}"], (0, _zIndex.default)('low'), _ref => {
+})(["display:block;position:absolute;width:100%;height:100%;opacity:0.2;border-radius:2rem;left:0;top:0;right:0;bottom:0;", ";:hover{background:", ";}"], (0, _zIndex.default)('low'), _ref2 => {
   let {
     theme
-  } = _ref;
+  } = _ref2;
   return theme.color('grey_medium');
 });
 const CheckInput = exports.CheckInput = _styledComponents.default.input.withConfig({
   displayName: "Chipstyle__CheckInput",
   componentId: "sc-6s9oo3-3"
-})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:40px;height:40px;margin:0;border:1px solid ", ";+ span{background:url(", ") no-repeat center;background-size:24px;margin-right:", ";width:40px;height:40px;border-radius:50%;background-color:", ";float:left;", ";}:checked ~ span{background-size:24px;background-color:", ";}:focus + span{border-color:", ";border-width:3px;}:focus + span{border-color:", ";border-width:3px;}"], _ref2 => {
+})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:40px;height:40px;margin:0;border:1px solid ", ";+ span{background:url(", ") no-repeat center;background-size:24px;margin-right:", ";width:40px;height:40px;border-radius:50%;background-color:", ";float:left;", ";}:checked ~ span{background-size:24px;background-color:", ";}:focus + span{border-color:", ";border-width:3px;}:focus + span{border-color:", ";border-width:3px;}"], _ref3 => {
   let {
     theme
-  } = _ref2;
+  } = _ref3;
   return theme.fontSize('sm');
-}, _ref3 => {
+}, _ref4 => {
   let {
     theme
-  } = _ref3;
+  } = _ref4;
   return theme.color('grey_for_forms');
-}, _ref4 => {
+}, _ref5 => {
   let {
     value
-  } = _ref4;
+  } = _ref5;
   return selectIcon(value);
-}, (0, _spacing.default)('md'), _ref5 => {
+}, (0, _spacing.default)('md'), _ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme.color('grey');
-}, (0, _zIndex.default)('medium'), _ref6 => {
+}, (0, _zIndex.default)('medium'), _ref7 => {
   let {
     theme,
     color
-  } = _ref6;
+  } = _ref7;
   return theme.color(color);
-}, _ref7 => {
+}, _ref8 => {
   let {
     theme
-  } = _ref7;
+  } = _ref8;
   return theme.color('grey_for_forms');
-}, _ref8 => {
+}, _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.color('grey_for_forms');
 });
 const ClearButton = exports.ClearButton = _styledComponents.default.button.withConfig({
   displayName: "Chipstyle__ClearButton",
   componentId: "sc-6s9oo3-4"
-})(["border-radius:2rem;background:none;padding:", " ", ";margin:", " 0 0 0;border:1px solid ", ";outline:none;padding-left:3rem;position:relative;height:48px;:focus{border-color:", ";}:before{content:'';background:url(", ") no-repeat center;width:20px;height:20px;display:block;position:absolute;left:1rem;}"], (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref9 => {
+})(["border-radius:2rem;background:none;padding:", " ", ";margin:", " 0 0 0;border:1px solid ", ";outline:none;padding-left:3rem;position:relative;height:48px;:focus{border-color:", ";}:before{content:'';background:url(", ") no-repeat center;width:20px;height:20px;display:block;position:absolute;left:1rem;}"], (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.color('grey_medium');
-}, _ref10 => {
+}, _ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme.color('grey_for_forms');
 }, _clear.default);

package/dist/components/Molecules/Chip/Chip.test.js

@@ -5,11 +5,11 @@ var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Chip = _interopRequireDefault(require("./Chip"));
-it('renders article teaser correctly', () => {
+it("renders article teaser correctly", () => {
   const handleToggle = e => e.target.value;
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Chip.default, {
     category: "Gender Justice",
     handleToggle: handleToggle
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      width: auto;\n      height: 48px;\n      border-radius: 2rem;\n      background-color: #d5d5d5;\n      margin: 0.5rem 0.5rem 0 0;\n      padding: 4px;\n      padding-right: 1rem;\n      -webkit-flex: 0 0 auto;\n      -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n      position: relative;\n    }\n\n    .c0 (min-width:740px) {\n      margin: 1rem 1rem 0 0;\n    }\n\n    .c2 {\n      display: block;\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      opacity: 0.2;\n      border-radius: 2rem;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n    }\n\n    .c2:hover {\n      background: #E1E2E3;\n    }\n\n    .c1 {\n      display: block;\n      box-sizing: border-box;\n      opacity: 0;\n      position: absolute;\n      left: 0px;\n      width: 40px;\n      height: 40px;\n      margin: 0;\n      border: 1px solid #666;\n    }\n\n    .c1 + span {\n      background: url(mock.asset) no-repeat center;\n      background-size: 24px;\n      margin-right: 1rem;\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      background-color: #969598;\n      float: left;\n      z-index: 2;\n    }\n\n    .c1:checked ~ span {\n      background-size: 24px;\n      background-color: #6F3AAB;\n    }\n\n    .c1:focus + span {\n      border-color: #666;\n      border-width: 3px;\n    }\n\n    .c1:focus + span {\n      border-color: #666;\n      border-width: 3px;\n    }\n\n    <label\n      className=\"c0\"\n    >\n      <input\n        checked={false}\n        className=\"c1\"\n        color=\"purple\"\n        onChange={[Function]}\n        type=\"checkbox\"\n        value=\"Gender Justice\"\n      />\n      <span />\n      <span\n        className=\"c2\"\n      />\n      Gender Justice\n    </label>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      width: auto;\n      height: 48px;\n      border-radius: 2rem;\n      background-color: #d5d5d5;\n      margin: 0.5rem 0.5rem 0 0;\n      padding: 4px;\n      padding-right: 1rem;\n      -webkit-flex: 0 0 auto;\n      -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n      position: relative;\n    }\n\n    .c2 {\n      display: block;\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      opacity: 0.2;\n      border-radius: 2rem;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n    }\n\n    .c2:hover {\n      background: #E1E2E3;\n    }\n\n    .c1 {\n      display: block;\n      box-sizing: border-box;\n      opacity: 0;\n      position: absolute;\n      left: 0px;\n      width: 40px;\n      height: 40px;\n      margin: 0;\n      border: 1px solid #666;\n    }\n\n    .c1 + span {\n      background: url(mock.asset) no-repeat center;\n      background-size: 24px;\n      margin-right: 1rem;\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      background-color: #969598;\n      float: left;\n      z-index: 2;\n    }\n\n    .c1:checked ~ span {\n      background-size: 24px;\n      background-color: #6F3AAB;\n    }\n\n    .c1:focus + span {\n      border-color: #666;\n      border-width: 3px;\n    }\n\n    .c1:focus + span {\n      border-color: #666;\n      border-width: 3px;\n    }\n\n    @media (min-width:740px) {\n      .c0 {\n        margin: 1rem 1rem 0 0;\n      }\n    }\n\n    <label\n      className=\"c0\"\n    >\n      <input\n        checked={false}\n        className=\"c1\"\n        color=\"purple\"\n        onChange={[Function]}\n        type=\"checkbox\"\n        value=\"Gender Justice\"\n      />\n      <span />\n      <span\n        className=\"c2\"\n      />\n      Gender Justice\n    </label>\n  ");
 });

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