@comicrelief/component-library 7.24.0 → 7.24.2

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

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,86 +15,112 @@ var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _srLogo = _interopRequireDefault(require("../../Atoms/Logo/assets/sr-logo.svg"));
 var _crLogo = _interopRequireDefault(require("../../Atoms/Logo/assets/cr-logo.svg"));
 var _RND = _interopRequireDefault(require("./assets/RND.png"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
 /**
  * Article Teaser
  */
-var Wrapper = _styledComponents.default.article.withConfig({
+const Wrapper = _styledComponents.default.article.withConfig({
   displayName: "ArticleTeaser__Wrapper",
   componentId: "sc-1r8ed89-0"
-})(["width:100%;height:100%;display:flex;background-color:", ";border-radius:1rem;box-shadow:0px 0px 20px rgba(0,0,0,0.15);transition:all 0.2s;&:hover{box-shadow:0px 0px 20px rgba(0,0,0,0.3);transform:translateY(-4px);}"], function (_ref) {
-  var theme = _ref.theme;
+})(["width:100%;height:100%;display:flex;background-color:", ";border-radius:1rem;box-shadow:0px 0px 20px rgba(0,0,0,0.15);transition:all 0.2s;&:hover{box-shadow:0px 0px 20px rgba(0,0,0,0.3);transform:translateY(-4px);}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('white');
 });
-var Link = (0, _styledComponents.default)(_Link.default).withConfig({
+const Link = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "ArticleTeaser__Link",
   componentId: "sc-1r8ed89-1"
-})(["padding:0;display:flex;height:100%;flex-direction:", ";align-items:", ";text-decoration:none;color:inherit;width:100%;@media ", "{flex-direction:row;}@media ", "{flex-direction:", ";}"], function (_ref2) {
-  var category = _ref2.category;
+})(["padding:0;display:flex;height:100%;flex-direction:", ";align-items:", ";text-decoration:none;color:inherit;width:100%;@media ", "{flex-direction:row;}@media ", "{flex-direction:", ";}"], _ref2 => {
+  let {
+    category
+  } = _ref2;
   return category || category === '' ? 'row' : 'column';
-}, function (_ref3) {
-  var category = _ref3.category;
+}, _ref3 => {
+  let {
+    category
+  } = _ref3;
   return (category || category === '') && 'center';
-}, function (_ref4) {
-  var theme = _ref4.theme;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoint('small');
-}, function (_ref5) {
-  var theme = _ref5.theme;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.breakpoint('medium');
-}, function (_ref6) {
-  var category = _ref6.category;
+}, _ref6 => {
+  let {
+    category
+  } = _ref6;
   return !category && category !== '' && 'column';
 });
-var ImageWrapper = _styledComponents.default.div.withConfig({
+const ImageWrapper = _styledComponents.default.div.withConfig({
   displayName: "ArticleTeaser__ImageWrapper",
   componentId: "sc-1r8ed89-2"
-})(["display:flex;align-items:center;justify-content:center;position:relative;", ";", ";"], function (_ref7) {
-  var category = _ref7.category;
+})(["display:flex;align-items:center;justify-content:center;position:relative;", ";", ";"], _ref7 => {
+  let {
+    category
+  } = _ref7;
   return (category || category === '') && (0, _styledComponents.css)(["padding-left:", ";img{border-radius:0;}"], (0, _spacing.default)('md'));
-}, function (_ref8) {
-  var category = _ref8.category;
-  return !category && category !== '' && (0, _styledComponents.css)(["img{border-radius:1rem 1rem 0 0;}@media ", "{width:45%;img{border-radius:1rem 0 0 1rem;}}@media ", "{width:100%;img{border-radius:1rem 1rem 0 0;}}"], function (_ref9) {
-    var theme = _ref9.theme;
+}, _ref8 => {
+  let {
+    category
+  } = _ref8;
+  return !category && category !== '' && (0, _styledComponents.css)(["img{border-radius:1rem 1rem 0 0;}@media ", "{width:45%;img{border-radius:1rem 0 0 1rem;}}@media ", "{width:100%;img{border-radius:1rem 1rem 0 0;}}"], _ref9 => {
+    let {
+      theme
+    } = _ref9;
     return theme.breakpoint('small');
-  }, function (_ref10) {
-    var theme = _ref10.theme;
+  }, _ref10 => {
+    let {
+      theme
+    } = _ref10;
     return theme.breakpoint('medium');
   });
 });
-var CopyWrapper = _styledComponents.default.div.withConfig({
+const CopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "ArticleTeaser__CopyWrapper",
   componentId: "sc-1r8ed89-3"
-})(["padding:", ";height:100%;display:flex;flex-direction:column;", ";@media ", "{width:100%;}"], (0, _spacing.default)('l'), function (_ref11) {
-  var category = _ref11.category;
-  return !category && category !== '' && (0, _styledComponents.css)(["@media ", "{width:55%;}"], function (_ref12) {
-    var theme = _ref12.theme;
+})(["padding:", ";height:100%;display:flex;flex-direction:column;", ";@media ", "{width:100%;}"], (0, _spacing.default)('l'), _ref11 => {
+  let {
+    category
+  } = _ref11;
+  return !category && category !== '' && (0, _styledComponents.css)(["@media ", "{width:55%;}"], _ref12 => {
+    let {
+      theme
+    } = _ref12;
     return theme.breakpoint('small');
   });
-}, function (_ref13) {
-  var theme = _ref13.theme;
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
   return theme.breakpoint('medium');
 });
-var Title = (0, _styledComponents.default)(_Text.default).withConfig({
+const Title = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "ArticleTeaser__Title",
   componentId: "sc-1r8ed89-4"
-})(["margin:", ";"], function (_ref14) {
-  var time = _ref14.time;
+})(["margin:", ";"], _ref14 => {
+  let {
+    time
+  } = _ref14;
   return time ? "0 0 ".concat((0, _spacing.default)('md')) : '0';
 });
-var Date = (0, _styledComponents.default)(_Text.default).withConfig({
+const Date = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "ArticleTeaser__Date",
   componentId: "sc-1r8ed89-5"
 })(["display:block;margin-bottom:", ";"], (0, _spacing.default)('md'));
-var Time = (0, _styledComponents.default)(_Text.default).withConfig({
+const Time = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "ArticleTeaser__Time",
   componentId: "sc-1r8ed89-6"
 })(["display:block;margin-top:auto;"]);
-var Image = (0, _styledComponents.default)(_Picture.default).withConfig({
+const Image = (0, _styledComponents.default)(_Picture.default).withConfig({
   displayName: "ArticleTeaser__Image",
   componentId: "sc-1r8ed89-7"
 })(["display:flex;"]);
-var handleCampaignLogo = function handleCampaignLogo(category) {
+const handleCampaignLogo = category => {
   switch (category) {
     case 'Comic Relief':
       return _crLogo.default;
@@ -109,18 +136,20 @@ var handleCampaignLogo = function handleCampaignLogo(category) {
 /**
  * Article teaser component
  */
-var ArticleTeaser = function ArticleTeaser(_ref15) {
-  var href = _ref15.href,
-    date = _ref15.date,
-    title = _ref15.title,
-    imageLow = _ref15.imageLow,
-    image = _ref15.image,
-    images = _ref15.images,
-    alt = _ref15.alt,
-    category = _ref15.category,
-    logoSize = _ref15.logoSize,
-    family = _ref15.family,
-    time = _ref15.time;
+const ArticleTeaser = _ref15 => {
+  let {
+    href,
+    date,
+    title,
+    imageLow,
+    image,
+    images,
+    alt,
+    category,
+    logoSize,
+    family,
+    time
+  } = _ref15;
   return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(Link, {
     href: href,
     type: "standard",

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

@@ -1,13 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _ArticleTeaser = _interopRequireDefault(require("./ArticleTeaser"));
 var _data = require("../../../styleguide/data/data");
-it('renders article teaser correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ArticleTeaser.default, {
+it('renders article teaser correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ArticleTeaser.default, {
     href: "/test",
     images: _data.defaultData.images,
     image: _data.defaultData.image,
@@ -20,8 +20,8 @@ it('renders article teaser correctly', function () {
   })).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c8 {\n      font-size: 0.75rem;\n      line-height: 0.75rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10 {\n      font-size: 2rem;\n      line-height: 2rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      line-height: 2rem;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c4 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c6 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c1 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      font-weight: normal;\n    }\n\n    .c1:hover {\n      color: #000000;\n    }\n\n    .c0 {\n      width: 100%;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      background-color: #FFFFFF;\n      border-radius: 1rem;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n      -webkit-transition: all 0.2s;\n      transition: all 0.2s;\n    }\n\n    .c0:hover {\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.3);\n      -webkit-transform: translateY(-4px);\n      -ms-transform: translateY(-4px);\n      transform: translateY(-4px);\n    }\n\n    .c2 {\n      padding: 0;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      height: 100%;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n    }\n\n    .c3 {\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      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      position: relative;\n    }\n\n    .c3 img {\n      border-radius: 1rem 1rem 0 0;\n    }\n\n    .c7 {\n      padding: 2rem;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    .c11 {\n      margin: 0;\n    }\n\n    .c9 {\n      display: block;\n      margin-bottom: 1rem;\n    }\n\n    .c5 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        -webkit-flex-direction: column;\n        -ms-flex-direction: column;\n        flex-direction: column;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c3 {\n        width: 45%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 0 0 1rem;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c3 {\n        width: 100%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 1rem 0 0;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c7 {\n        width: 55%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c7 {\n        width: 100%;\n      }\n    }\n\n    <article\n      className=\"c0\"\n    >\n      <a\n        className=\"c1 c2\"\n        color=\"red\"\n        href=\"/test\"\n        target=\"_self\"\n        type=\"standard\"\n      >\n        <div\n          className=\"c3\"\n        >\n          <div\n            className=\"c4 c5\"\n            height=\"100%\"\n            width=\"100%\"\n          >\n            <img\n              alt=\"Image's description\"\n              className=\"c6 lazyload\"\n              data-lowsrc={null}\n              data-sizes=\"auto\"\n              data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n              height=\"100%\"\n              src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n              width=\"100%\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"c7\"\n        >\n          <span\n            className=\"c8 c9\"\n            color=\"inherit\"\n            size=\"xs\"\n          >\n             01 July 2019\n          </span>\n          <h3\n            className=\"c10 c11\"\n            color=\"inherit\"\n            height=\"2rem\"\n            size=\"xl\"\n          >\n            News article\n          </h3>\n        </div>\n      </a>\n    </article>\n  ");
 });
-it('renders press realese correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ArticleTeaser.default, {
+it('renders press realese correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ArticleTeaser.default, {
     href: "/test",
     category: "",
     date: " 01 July 2019",

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

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,27 +9,35 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _size = require("../../../theme/shared/size");
-var Wrapper = _styledComponents.default.div.withConfig({
+const Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Banner__Wrapper",
   componentId: "sc-14ows70-0"
-})(["background:", ";"], function (_ref) {
-  var theme = _ref.theme,
-    backgroundColor = _ref.backgroundColor;
+})(["background:", ";"], _ref => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref;
   return theme.color(backgroundColor);
 });
-var Container = _styledComponents.default.div.withConfig({
+const Container = _styledComponents.default.div.withConfig({
   displayName: "Banner__Container",
   componentId: "sc-14ows70-1"
-})(["text-align:center;padding:calc(", " * 2) ", ";margin:0 auto;max-width:", ";@media ", "{padding:", " ", ";}@media ", "{padding:", " ", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), _size.screen.large, function (_ref2) {
-  var theme = _ref2.theme;
+})(["text-align:center;padding:calc(", " * 2) ", ";margin:0 auto;max-width:", ";@media ", "{padding:", " ", ";}@media ", "{padding:", " ", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), _size.screen.large, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.breakpoint('small');
-}, (0, _spacing.default)('xl'), (0, _spacing.default)('l'), function (_ref3) {
-  var theme = _ref3.theme;
+}, (0, _spacing.default)('xl'), (0, _spacing.default)('l'), _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.breakpoint('large');
 }, (0, _spacing.default)('xl'), (0, _spacing.default)('xl'));
-var Banner = function Banner(_ref4) {
-  var children = _ref4.children,
-    backgroundColor = _ref4.backgroundColor;
+const Banner = _ref4 => {
+  let {
+    children,
+    backgroundColor
+  } = _ref4;
   return /*#__PURE__*/_react.default.createElement(Wrapper, {
     backgroundColor: backgroundColor
   }, /*#__PURE__*/_react.default.createElement(Container, null, children));

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

@@ -1,13 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Banner = _interopRequireDefault(require("./Banner"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
-it('renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Banner.default, {
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Banner.default, {
     backgroundColor: "purple_dark"
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",

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

@@ -1,52 +1,58 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var _excluded = ["imageLow", "images", "image", "imageAltText", "height", "width", "children", "squaredCorners"];
-var Container = _styledComponents.default.div.withConfig({
+const Container = _styledComponents.default.div.withConfig({
   displayName: "Box__Container",
   componentId: "sc-1oa7u3c-0"
-})(["display:flex;position:relative;height:100%;flex-direction:column;@media ", "{flex-direction:row;}@media ", "{flex-direction:column;}"], function (_ref) {
-  var theme = _ref.theme;
+})(["display:flex;position:relative;height:100%;flex-direction:column;@media ", "{flex-direction:row;}@media ", "{flex-direction:column;}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.breakpoint('small');
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.breakpoint('large');
 });
-var Image = _styledComponents.default.div.withConfig({
+const Image = _styledComponents.default.div.withConfig({
   displayName: "Box__Image",
   componentId: "sc-1oa7u3c-1"
-})(["height:auto;flex-basis:calc(100% / 3);img{border-radius:", ";overflow:hidden;}"], function (props) {
-  return props.squaredCorners ? '0' : '1rem';
-});
-var Copy = _styledComponents.default.div.withConfig({
+})(["height:auto;flex-basis:calc(100% / 3);img{border-radius:", ";overflow:hidden;}"], props => props.squaredCorners ? '0' : '1rem');
+const Copy = _styledComponents.default.div.withConfig({
   displayName: "Box__Copy",
   componentId: "sc-1oa7u3c-2"
-})(["padding:", ";display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;flex-basis:calc(200% / 3);@media ", "{justify-content:center;}@media ", "{justify-content:normal;}"], (0, _spacing.default)('l'), function (_ref3) {
-  var theme = _ref3.theme;
+})(["padding:", ";display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;flex-basis:calc(200% / 3);@media ", "{justify-content:center;}@media ", "{justify-content:normal;}"], (0, _spacing.default)('l'), _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.breakpoint('small');
-}, function (_ref4) {
-  var theme = _ref4.theme;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoint('large');
 });
-var Box = function Box(_ref5) {
-  var imageLow = _ref5.imageLow,
-    images = _ref5.images,
-    image = _ref5.image,
-    imageAltText = _ref5.imageAltText,
-    height = _ref5.height,
-    width = _ref5.width,
-    children = _ref5.children,
-    squaredCorners = _ref5.squaredCorners,
-    rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
+const Box = _ref5 => {
+  let {
+    imageLow,
+    images,
+    image,
+    imageAltText,
+    height,
+    width,
+    children,
+    squaredCorners,
+    ...rest
+  } = _ref5;
   return /*#__PURE__*/_react.default.createElement(Container, rest, imageLow ? /*#__PURE__*/_react.default.createElement(Image, {
     squaredCorners: squaredCorners
   }, /*#__PURE__*/_react.default.createElement(_Picture.default, {

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

@@ -1,19 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Box = _interopRequireDefault(require("./Box"));
 var _data = require("../../../styleguide/data/data");
-it('renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Box.default, {
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Box.default, {
     imageLow: _data.defaultData.image,
     images: _data.defaultData.image
   }, /*#__PURE__*/_react.default.createElement("h2", null, "Title"), /*#__PURE__*/_react.default.createElement("p", null, "Description"))).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders correctly with no image', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement("h2", null, "Title"), /*#__PURE__*/_react.default.createElement("p", null, "Description"))).toJSON();
+it('renders correctly with no image', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement("h2", null, "Title"), /*#__PURE__*/_react.default.createElement("p", null, "Description"))).toJSON();
   expect(tree).toMatchSnapshot();
 });

package/dist/components/Molecules/Card/Card.js

@@ -1,45 +1,45 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var _excluded = ["backgroundColor", "imageLow", "images", "image", "imageAltText", "height", "width", "children", "squaredCorners"];
-var Container = _styledComponents.default.div.withConfig({
+const Container = _styledComponents.default.div.withConfig({
   displayName: "Card__Container",
   componentId: "sc-15nltsw-0"
-})(["display:flex;position:relative;flex-direction:column;height:100%;border-radius:", ";overflow:hidden;background:", ";"], function (props) {
-  return props.squaredCorners ? '0' : '1rem';
-}, function (_ref) {
-  var theme = _ref.theme,
-    backgroundColor = _ref.backgroundColor;
+})(["display:flex;position:relative;flex-direction:column;height:100%;border-radius:", ";overflow:hidden;background:", ";"], props => props.squaredCorners ? '0' : '1rem', _ref => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref;
   return theme.color(backgroundColor);
 });
-var Image = _styledComponents.default.div.withConfig({
+const Image = _styledComponents.default.div.withConfig({
   displayName: "Card__Image",
   componentId: "sc-15nltsw-1"
 })(["height:auto;"]);
-var Copy = _styledComponents.default.div.withConfig({
+const Copy = _styledComponents.default.div.withConfig({
   displayName: "Card__Copy",
   componentId: "sc-15nltsw-2"
 })(["padding:", ";display:flex;flex-direction:column;"], (0, _spacing.default)('l'));
-var Card = function Card(_ref2) {
-  var backgroundColor = _ref2.backgroundColor,
-    imageLow = _ref2.imageLow,
-    images = _ref2.images,
-    image = _ref2.image,
-    imageAltText = _ref2.imageAltText,
-    height = _ref2.height,
-    width = _ref2.width,
-    children = _ref2.children,
-    squaredCorners = _ref2.squaredCorners,
-    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+const Card = _ref2 => {
+  let {
+    backgroundColor,
+    imageLow,
+    images,
+    image,
+    imageAltText,
+    height,
+    width,
+    children,
+    squaredCorners,
+    ...rest
+  } = _ref2;
   return /*#__PURE__*/_react.default.createElement(Container, Object.assign({
     backgroundColor: backgroundColor,
     squaredCorners: squaredCorners

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

@@ -1,21 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Card = _interopRequireDefault(require("./Card"));
 var _data = require("../../../styleguide/data/data");
-it('renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Card.default, {
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Card.default, {
     image: _data.defaultData.image,
     images: _data.defaultData.image,
     backgroundColor: "yellow"
   }, /*#__PURE__*/_react.default.createElement("h2", null, "Title"), /*#__PURE__*/_react.default.createElement("p", null, "Description"))).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders correctly with no body', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Card.default, {
+it('renders correctly with no body', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Card.default, {
     imageLow: _data.defaultData.image,
     images: _data.defaultData.image,
     backgroundColor: "yellow"