@comicrelief/component-library 7.36.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

@@ -17,25 +17,45 @@ const angle = {
 const Icon = _styledComponents.default.svg.withConfig({
   displayName: "Arrow__Icon",
   componentId: "sc-1iegggu-0"
-})(["transform:", ";"], _ref => {
+})(["transform:", ";fill:", ";@media ", "{fill:", ";}"], _ref => {
   let {
     direction
   } = _ref;
   return "rotate(".concat(angle[direction], ")");
+}, _ref2 => {
+  let {
+    mobileColour,
+    colour,
+    theme
+  } = _ref2;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.allBreakpoints('L');
+}, _ref4 => {
+  let {
+    colour,
+    theme
+  } = _ref4;
+  return colour ? theme.color(colour) : theme.color('white');
 });
-const Arrow = _ref2 => {
+const Arrow = _ref5 => {
   let {
     colour,
+    mobileColour,
     theme,
     size,
     direction,
     ...rest
-  } = _ref2;
+  } = _ref5;
   return /*#__PURE__*/_react.default.createElement(Icon, Object.assign({
     direction: direction,
     width: size,
     height: size,
-    fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 96 96"
   }, rest), /*#__PURE__*/_react.default.createElement("path", {
@@ -46,6 +66,7 @@ const Arrow = _ref2 => {
 };
 Arrow.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24,
   direction: 'up'
 };

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

@@ -1,24 +1,49 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = require("styled-components");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 const PATH_DATA = 'M40.811,9.307C36.607,4.664,30.48,2,24,2C11.458,2,2,11.458,2,24s9.458,22,22,22c10.221,0,14.032-3.779,15.29-5.031 c0.197-0.115,0.379-0.265,0.533-0.451c0.707-0.849,0.592-2.11-0.257-2.817c-0.438-0.362-1.61-1.049-3.093,0.427 C35.512,39.086,32.585,42,24,42C13.738,42,6,34.262,6,24S13.738,6,24,6c5.353,0,10.398,2.184,13.845,5.991 c3.162,3.495,4.642,8.044,4.165,12.81c-0.364,3.641-1.958,6.013-4.487,6.677c-1.853,0.487-3.658-0.145-4.269-1.011 c-1.001-1.422-0.753-4.747,0.009-8.237c1.035-3.375,2.104-6.939,2.177-7.179c0.308-1.027-0.249-2.114-1.263-2.465 c-1.012-0.349-2.122,0.161-2.515,1.159c-0.097,0.247-0.191,0.491-0.282,0.732c-1.427-1.455-3.424-2.421-5.724-2.66 c-3.983-0.41-9.547,1.602-12.107,8.643c-1.334,3.667-1.19,7.467,0.384,10.163c1.241,2.126,3.291,3.482,5.929,3.921 c4.299,0.714,7.438-0.837,9.464-3.098c0.254,0.695,0.516,1.122,0.659,1.325c1.66,2.358,5.257,3.443,8.555,2.576 c1.987-0.522,6.691-2.557,7.451-10.147C46.581,19.295,44.741,13.651,40.811,9.307z M37.871,41.195 c-0.149-0.03-0.3-0.081-0.448-0.152C37.567,41.112,37.718,41.163,37.871,41.195z M29.195,21.849 c-0.554,1.799-1.07,3.451-1.379,4.375c-0.413,1.243-2.174,5.229-7.297,4.374c-1.468-0.245-2.493-0.896-3.133-1.993 c-0.967-1.657-0.997-4.254-0.078-6.779c1.633-4.492,4.727-6.064,7.296-6.064c0.217,0,0.431,0.011,0.639,0.033 c1.952,0.203,4.068,1.433,4.396,3.726c0.01,0.074,0.024,0.146,0.043,0.217C29.49,20.479,29.329,21.181,29.195,21.849z';
-const AtSign = _ref => {
+const StyledSVG = _styledComponents.default.svg.withConfig({
+  displayName: "AtSign__StyledSVG",
+  componentId: "sc-1328gc9-0"
+})(["fill:", ";@media ", "{fill:", ";}"], _ref => {
+  let {
+    mobileColour,
+    colour,
+    theme
+  } = _ref;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.allBreakpoints('L');
+}, _ref3 => {
+  let {
+    colour,
+    theme
+  } = _ref3;
+  return colour ? theme.color(colour) : theme.color('white');
+});
+const AtSign = _ref4 => {
   let {
     theme,
     size,
     colour,
+    mobileColour,
     ...rest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({
     width: size,
     height: size,
-    fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     viewBox: "0 0 48 48"
   }, rest), /*#__PURE__*/_react.default.createElement("path", {
     d: PATH_DATA
@@ -26,6 +51,7 @@ const AtSign = _ref => {
 };
 AtSign.defaultProps = {
   size: 24,
-  colour: 'white'
+  colour: 'white',
+  mobileColour: null
 };
 var _default = exports.default = (0, _styledComponents.withTheme)(AtSign);

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

@@ -17,25 +17,46 @@ const angle = {
 const Icon = _styledComponents.default.svg.withConfig({
   displayName: "Chevron__Icon",
   componentId: "sc-1p4fsgl-0"
-})(["transform:", ";"], _ref => {
+})(["transform:", ";fill:", ";@media ", "{fill:", ";}"], _ref => {
   let {
     direction
   } = _ref;
   return "rotate(".concat(angle[direction], ")");
+}, _ref2 => {
+  let {
+    mobileColour,
+    colour,
+    theme
+  } = _ref2;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.allBreakpoints('L');
+}, _ref4 => {
+  let {
+    colour,
+    theme
+  } = _ref4;
+  return colour ? theme.color(colour) : theme.color('white');
 });
-const Chevron = _ref2 => {
+const Chevron = _ref5 => {
   let {
     colour,
+    mobileColour,
     theme,
     size,
     direction,
     ...rest
-  } = _ref2;
+  } = _ref5;
   return /*#__PURE__*/_react.default.createElement(Icon, Object.assign({
     direction: direction,
     width: size,
     height: size,
     fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 48 48"
   }, rest), /*#__PURE__*/_react.default.createElement("path", {
@@ -44,6 +65,7 @@ const Chevron = _ref2 => {
 };
 Chevron.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24,
   direction: 'up'
 };

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

@@ -1,23 +1,49 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = require("styled-components");
-const Download = _ref => {
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+const StyledSVG = _styledComponents.default.svg.withConfig({
+  displayName: "Download__StyledSVG",
+  componentId: "sc-eoa7se-0"
+})(["fill:", ";@media ", "{fill:", ";}"], _ref => {
   let {
+    mobileColour,
     colour,
+    theme
+  } = _ref;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.allBreakpoints('L');
+}, _ref3 => {
+  let {
+    colour,
+    theme
+  } = _ref3;
+  return colour ? theme.color(colour) : theme.color('white');
+});
+const Download = _ref4 => {
+  let {
+    colour,
+    mobileColour,
     theme,
     size,
     ...rest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({}, rest, {
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({}, rest, {
     width: size,
     height: size,
     fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 96 96"
   }), /*#__PURE__*/_react.default.createElement("path", {
@@ -26,6 +52,7 @@ const Download = _ref => {
 };
 Download.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24
 };
 var _default = exports.default = (0, _styledComponents.withTheme)(Download);

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

@@ -1,23 +1,49 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = require("styled-components");
-const External = _ref => {
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+const StyledSVG = _styledComponents.default.svg.withConfig({
+  displayName: "External__StyledSVG",
+  componentId: "sc-oha23y-0"
+})(["fill:", ";@media ", "{fill:", ";}"], _ref => {
   let {
+    mobileColour,
     colour,
+    theme
+  } = _ref;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.allBreakpoints('L');
+}, _ref3 => {
+  let {
+    colour,
+    theme
+  } = _ref3;
+  return colour ? theme.color(colour) : theme.color('white');
+});
+const External = _ref4 => {
+  let {
+    colour,
+    mobileColour,
     theme,
     size,
     ...rest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({}, rest, {
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({}, rest, {
     width: size,
     height: size,
     fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 96 96"
   }), /*#__PURE__*/_react.default.createElement("path", {
@@ -26,6 +52,7 @@ const External = _ref => {
 };
 External.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24
 };
 var _default = exports.default = (0, _styledComponents.withTheme)(External);

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

@@ -1,23 +1,49 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = require("styled-components");
-const Favourite = _ref => {
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+const StyledSVG = _styledComponents.default.svg.withConfig({
+  displayName: "Favourite__StyledSVG",
+  componentId: "sc-16rqg62-0"
+})(["fill:", ";@media ", "{fill:", ";}"], _ref => {
   let {
+    mobileColour,
     colour,
+    theme
+  } = _ref;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.allBreakpoints('L');
+}, _ref3 => {
+  let {
+    colour,
+    theme
+  } = _ref3;
+  return colour ? theme.color(colour) : theme.color('white');
+});
+const Favourite = _ref4 => {
+  let {
+    colour,
+    mobileColour,
     theme,
     size,
     ...rest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({}, rest, {
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({}, rest, {
     width: size,
     height: size,
     fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 96 96"
   }), /*#__PURE__*/_react.default.createElement("path", {
@@ -26,6 +52,7 @@ const Favourite = _ref => {
 };
 Favourite.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24
 };
 var _default = exports.default = (0, _styledComponents.withTheme)(Favourite);

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

@@ -1,23 +1,49 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = require("styled-components");
-const Internal = _ref => {
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+const StyledSVG = _styledComponents.default.svg.withConfig({
+  displayName: "Internal__StyledSVG",
+  componentId: "sc-166yk4t-0"
+})(["fill:", ";@media ", "{fill:", ";}"], _ref => {
   let {
+    mobileColour,
     colour,
+    theme
+  } = _ref;
+  return mobileColour ? theme.color(mobileColour) : theme.color(colour);
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.allBreakpoints('L');
+}, _ref3 => {
+  let {
+    colour,
+    theme
+  } = _ref3;
+  return colour ? theme.color(colour) : theme.color('white');
+});
+const Internal = _ref4 => {
+  let {
+    colour,
+    mobileColour,
     theme,
     size,
     ...rest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({}, rest, {
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement(StyledSVG, Object.assign({}, rest, {
     width: size,
     height: size,
     fill: theme.color(colour),
+    colour: colour,
+    mobileColour: mobileColour,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 96 96"
   }), /*#__PURE__*/_react.default.createElement("path", {
@@ -26,6 +52,7 @@ const Internal = _ref => {
 };
 Internal.defaultProps = {
   colour: 'white',
+  mobileColour: null,
   size: 24
 };
 var _default = exports.default = (0, _styledComponents.withTheme)(Internal);

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.md

@@ -44,21 +44,22 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Internal colour="white" />}
+      icon={<Internal colour="white" mobileColour="red"/>}
     >
-      Internal link, 'blue' on tablet and mobile
+      Internal link, 'blue' with red icon on tablet and mobile
     </Link>
   </div>
 
   <div style={{ display: 'block', marginBottom: '10px' }}>
     <Link
-      color="red"
+      color="blue"
+      mobileColour="black"
       href="#anchor"
       target="blank"
       type="button"
-      icon={<External colour="white" />}
+      icon={<External colour="white" mobileColour="blue" />}
     >
-      External link
+      External link (black on mobile, blue on desktop)
     </Link>
   </div>
 
@@ -68,9 +69,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Download colour="white" />}
+      icon={<Download colour="white" mobileColour="blue" />}
     >
-      Download link
+      Download link (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -80,9 +81,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Favourite colour="white" />}
+      icon={<Favourite colour="white" mobileColour="blue" />}
     >
-      Favourite link
+      Favourite link (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -92,9 +93,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Chevron direction="up" colour="white" />}
+      icon={<Chevron direction="up" colour="white" mobileColour="blue" />}
     >
-      Chevron Up
+      Chevron Up (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -104,9 +105,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Chevron direction="down" colour="white" />}
+      icon={<Chevron direction="down" colour="white" mobileColour="blue" />}
     >
-      Chevron Down
+      Chevron Down (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -116,9 +117,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Chevron direction="left" colour="white" />}
+      icon={<Chevron direction="left" colour="white" mobileColour="blue" />}
     >
-      Chevron Left
+      Chevron Left (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -128,9 +129,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<Chevron direction="right" colour="white" />}
+      icon={<Chevron direction="right" colour="white" mobileColour="blue" />}
     >
-      Chevron Right
+      Chevron Right (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -141,9 +142,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       target="blank"
       type="button"
       iconFirst
-      icon={<Arrow direction="left" colour="white" />}
+      icon={<Arrow direction="left" colour="white" mobileColour="blue" />}
     >
-      Arrow Left
+      Arrow Left (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 
@@ -153,9 +154,9 @@ import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from
       href="#anchor"
       target="blank"
       type="button"
-      icon={<AtSign />}
+      icon={<AtSign colour="white" mobileColour="blue" />}
     >
-      At Sign
+      At Sign (blue mobile-tablet icon, white desktop icon)
     </Link>
   </div>
 </div>;

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/Link/Link.test.js

@@ -22,7 +22,7 @@ it("renders a button with an icon", () => {
       colour: "white"
     })
   }, "Internal link")).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      margin-left: 1rem;\n      -webkit-align-self: center;\n      -ms-flex-item-align: center;\n      align-self: center;\n      right: 1.5rem;\n      position: absolute;\n      right: -2rem;\n      top: 0;\n      bottom: 0;\n    }\n\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    @media (min-width:740px) {\n      .c1 {\n        width: auto;\n        right: auto;\n        position: relative;\n        position: absolute;\n        right: -2rem;\n        top: 0;\n        bottom: 0;\n      }\n    }\n\n    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      Internal link\n      <span\n        className=\"c1\"\n        type=\"standard\"\n      >\n        <svg\n          fill=\"#FFFFFF\"\n          height={24}\n          viewBox=\"0 0 96 96\"\n          width={24}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M90.871 50.776c-.016.016-.026.036-.043.052l-32 32C58.047 83.609 57.024 84 56 84s-2.047-.391-2.829-1.171a4 4 0 010-5.657L78.343 52H8a4 4 0 010-8h70.343L53.171 18.829a4 4 0 015.657-5.657l32 32c.016.016.027.036.043.052.167.172.321.357.455.557.069.104.118.216.176.325.065.121.138.236.191.364.057.137.09.279.13.42.032.109.074.214.097.327a4.017 4.017 0 010 1.568c-.023.113-.065.217-.097.327-.041.141-.074.283-.13.42-.053.128-.126.243-.191.364-.059.109-.107.221-.176.325a4.035 4.035 0 01-.455.555z\"\n          />\n        </svg>\n      </span>\n    </a>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      margin-left: 1rem;\n      -webkit-align-self: center;\n      -ms-flex-item-align: center;\n      align-self: center;\n      right: 1.5rem;\n      position: absolute;\n      right: -2rem;\n      top: 0;\n      bottom: 0;\n    }\n\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    .c2 {\n      fill: #FFFFFF;\n    }\n\n    @media (min-width:740px) {\n      .c1 {\n        width: auto;\n        right: auto;\n        position: relative;\n        position: absolute;\n        right: -2rem;\n        top: 0;\n        bottom: 0;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        fill: #FFFFFF;\n      }\n    }\n\n    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      Internal link\n      <span\n        className=\"c1\"\n        type=\"standard\"\n      >\n        <svg\n          className=\"c2\"\n          fill=\"#FFFFFF\"\n          height={24}\n          viewBox=\"0 0 96 96\"\n          width={24}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M90.871 50.776c-.016.016-.026.036-.043.052l-32 32C58.047 83.609 57.024 84 56 84s-2.047-.391-2.829-1.171a4 4 0 010-5.657L78.343 52H8a4 4 0 010-8h70.343L53.171 18.829a4 4 0 015.657-5.657l32 32c.016.016.027.036.043.052.167.172.321.357.455.557.069.104.118.216.176.325.065.121.138.236.191.364.057.137.09.279.13.42.032.109.074.214.097.327a4.017 4.017 0 010 1.568c-.023.113-.065.217-.097.327-.041.141-.074.283-.13.42-.053.128-.126.243-.191.364-.059.109-.107.221-.176.325a4.035 4.035 0 01-.455.555z\"\n          />\n        </svg>\n      </span>\n    </a>\n  ");
 });
 it("renders a standard styled link correctly with target blank and assistive text", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {

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 */