@comicrelief/component-library 7.24.0 → 7.24.2

package/dist/components/Atoms/RichText/RichText.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 _RichText = _interopRequireDefault(require("./RichText"));
-var htmlContent = "<p>Here's some copy</p><span>More copy</span>";
-it('It sanitises markup and renders properly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_RichText.default, {
+const htmlContent = "<p>Here's some copy</p><span>More copy</span>";
+it('It sanitises markup and renders properly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_RichText.default, {
     align: "right",
     markup: htmlContent
   })).toJSON();

package/dist/components/Atoms/Select/Select.js

@@ -1,65 +1,74 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Label = _interopRequireDefault(require("../Label/Label"));
 var _ErrorText = _interopRequireDefault(require("../ErrorText/ErrorText"));
 var _dropDownDarkPurple = _interopRequireDefault(require("./assets/drop-down-dark-purple.svg"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var _excluded = ["errorMsg", "description", "label", "options", "hideLabel", "defaultValue", "onChange", "greyDescription", "className", "optional"];
-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; }
-var StyledSelect = _styledComponents.default.select.withConfig({
+const StyledSelect = _styledComponents.default.select.withConfig({
   displayName: "Select__StyledSelect",
   componentId: "sc-1atp8e3-0"
-})(["width:100%;font-size:", ";display:block;box-sizing:border-box;padding:0 ", ";padding-right:", ";margin:0;position:relative;height:48px;font-weight:400;font-family:", ";background:", " url(", ") calc(100% - 1.5rem) 14px/20px 1.5rem no-repeat;border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:0.5rem;cursor:pointer;:focus{border:1px solid ", ";}@media ", "{max-width:290px;}"], function (_ref) {
-  var theme = _ref.theme;
+})(["width:100%;font-size:", ";display:block;box-sizing:border-box;padding:0 ", ";padding-right:", ";margin:0;position:relative;height:48px;font-weight:400;font-family:", ";background:", " url(", ") calc(100% - 1.5rem) 14px/20px 1.5rem no-repeat;border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:0.5rem;cursor:pointer;:focus{border:1px solid ", ";}@media ", "{max-width:290px;}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.fontSize('m');
-}, (0, _spacing.default)('m'), (0, _spacing.default)('xl'), function (_ref2) {
-  var theme = _ref2.theme;
+}, (0, _spacing.default)('m'), (0, _spacing.default)('xl'), _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.fontFamilies(theme.font.regular);
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.color('grey_light');
-}, _dropDownDarkPurple.default, function (_ref4) {
-  var theme = _ref4.theme,
-    error = _ref4.error;
+}, _dropDownDarkPurple.default, _ref4 => {
+  let {
+    theme,
+    error
+  } = _ref4;
   return error ? theme.color('red') : theme.color('grey_medium');
-}, function (_ref5) {
-  var theme = _ref5.theme,
-    greyDescription = _ref5.greyDescription,
-    hasValue = _ref5.hasValue;
+}, _ref5 => {
+  let {
+    theme,
+    greyDescription,
+    hasValue
+  } = _ref5;
   return greyDescription && !hasValue ? 'grey' : theme.color('black');
-}, function (_ref6) {
-  var theme = _ref6.theme;
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.color('grey_for_forms');
-}, function (_ref7) {
-  var theme = _ref7.theme;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
   return theme.breakpoint('small');
 });
-var Select = /*#__PURE__*/_react.default.forwardRef(function (_ref8, ref) {
-  var errorMsg = _ref8.errorMsg,
-    description = _ref8.description,
-    label = _ref8.label,
-    options = _ref8.options,
-    hideLabel = _ref8.hideLabel,
-    defaultValue = _ref8.defaultValue,
-    _onChange = _ref8.onChange,
-    greyDescription = _ref8.greyDescription,
-    className = _ref8.className,
-    optional = _ref8.optional,
-    rest = (0, _objectWithoutProperties2.default)(_ref8, _excluded);
-  var _useState = (0, _react.useState)(''),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
+const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+  let {
+    errorMsg,
+    description,
+    label,
+    options,
+    hideLabel,
+    defaultValue,
+    onChange,
+    greyDescription,
+    className,
+    optional,
+    ...rest
+  } = _ref8;
+  const [value, setValue] = (0, _react.useState)('');
   return /*#__PURE__*/_react.default.createElement(_Label.default, {
     label: label,
     hideLabel: hideLabel,
@@ -67,10 +76,10 @@ var Select = /*#__PURE__*/_react.default.forwardRef(function (_ref8, ref) {
     className: className,
     optional: optional
   }, /*#__PURE__*/_react.default.createElement(StyledSelect, Object.assign({
-    onChange: function onChange(e) {
+    onChange: e => {
       setValue(e.currentTarget.value);
-      if (_onChange) {
-        _onChange(e);
+      if (onChange) {
+        onChange(e);
       }
     }
   }, rest, {
@@ -83,12 +92,10 @@ var Select = /*#__PURE__*/_react.default.forwardRef(function (_ref8, ref) {
   }), /*#__PURE__*/_react.default.createElement("option", {
     disabled: true,
     value: ""
-  }, description), options.map(function (option) {
-    return /*#__PURE__*/_react.default.createElement("option", {
-      key: option.value,
-      value: option.value
-    }, option.displayValue);
-  })), errorMsg && /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
+  }, description), options.map(option => /*#__PURE__*/_react.default.createElement("option", {
+    key: option.value,
+    value: option.value
+  }, option.displayValue))), errorMsg && /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
     size: "sm",
     weight: "bold",
     "data-test": "error-message"

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

@@ -1,12 +1,12 @@
 "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 _Select = _interopRequireDefault(require("./Select"));
-it('renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Select.default, {
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Select.default, {
     label: "Label",
     description: "Please choose an option",
     errorMsg: "",

package/dist/components/Atoms/SocialIcons/Icon/Icon.js

@@ -1,34 +1,34 @@
 "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 _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
-var _excluded = ["href", "target", "icon", "brand", "title"];
-var StyledLink = _styledComponents.default.a.withConfig({
+const StyledLink = _styledComponents.default.a.withConfig({
   displayName: "Icon__StyledLink",
   componentId: "sc-no6fx6-0"
 })(["text-decoration:none;cursor:pointer;display:block;transition:opacity 0.2s;&:hover,&:focus{opacity:0.6;}"]);
-var StyledImage = _styledComponents.default.img.withConfig({
+const StyledImage = _styledComponents.default.img.withConfig({
   displayName: "Icon__StyledImage",
   componentId: "sc-no6fx6-1"
 })(["width:100%;"]);
-var HelperText = _styledComponents.default.span.withConfig({
+const HelperText = _styledComponents.default.span.withConfig({
   displayName: "Icon__HelperText",
   componentId: "sc-no6fx6-2"
 })(["", ";"], _hideVisually.default);
-var Icon = function Icon(_ref) {
-  var href = _ref.href,
-    target = _ref.target,
-    icon = _ref.icon,
-    brand = _ref.brand,
-    title = _ref.title,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+const Icon = _ref => {
+  let {
+    href,
+    target,
+    icon,
+    brand,
+    title,
+    ...restProps
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(StyledLink, Object.assign({
     href: href,
     target: "_".concat(target)

package/dist/components/Atoms/SocialIcons/SocialIcons.js

@@ -1,48 +1,50 @@
 "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 _Links = _interopRequireDefault(require("./Utils/Links"));
 var _Icons = _interopRequireDefault(require("./Utils/Icons"));
 var _Icon = _interopRequireDefault(require("./Icon/Icon"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var _excluded = ["campaign"];
-var StyledList = _styledComponents.default.ul.withConfig({
+const StyledList = _styledComponents.default.ul.withConfig({
   displayName: "SocialIcons__StyledList",
   componentId: "sc-i6jfaw-0"
-})(["display:flex;list-style-type:none;margin:0 auto;justify-content:center;padding:0;align-items:center;@media ", "{justify-content:start;}"], function (_ref) {
-  var theme = _ref.theme;
+})(["display:flex;list-style-type:none;margin:0 auto;justify-content:center;padding:0;align-items:center;@media ", "{justify-content:start;}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.breakpoint('small');
 });
-var StyledItem = _styledComponents.default.li.withConfig({
+const StyledItem = _styledComponents.default.li.withConfig({
   displayName: "SocialIcons__StyledItem",
   componentId: "sc-i6jfaw-1"
-})(["width:32px;margin-right:", ";@media ", "{width:48px;}"], (0, _spacing.default)('m'), function (_ref2) {
-  var theme = _ref2.theme;
+})(["width:32px;margin-right:", ";@media ", "{width:48px;}"], (0, _spacing.default)('m'), _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.breakpoint('small');
 });
 
 /** Social media icons with customizable style linked to campaign social media accounts */
-var SocialIcons = function SocialIcons(_ref3) {
-  var campaign = _ref3.campaign,
-    restProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-  var links = (0, _Links.default)(campaign);
-  return /*#__PURE__*/_react.default.createElement(StyledList, null, Object.keys(_Icons.default).map(function (brand) {
-    return /*#__PURE__*/_react.default.createElement(StyledItem, {
-      key: brand
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, Object.assign({
-      icon: _Icons.default[brand],
-      href: links[brand].url,
-      title: links[brand].title,
-      brand: brand
-    }, restProps)));
-  }));
+const SocialIcons = _ref3 => {
+  let {
+    campaign,
+    ...restProps
+  } = _ref3;
+  const links = (0, _Links.default)(campaign);
+  return /*#__PURE__*/_react.default.createElement(StyledList, null, Object.keys(_Icons.default).map(brand => /*#__PURE__*/_react.default.createElement(StyledItem, {
+    key: brand
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, Object.assign({
+    icon: _Icons.default[brand],
+    href: links[brand].url,
+    title: links[brand].title,
+    brand: brand
+  }, restProps)))));
 };
 SocialIcons.defaultProps = {
   target: 'blank'

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

@@ -1,24 +1,24 @@
 "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 _SocialIcons = _interopRequireDefault(require("./SocialIcons"));
-it('renders correctly with Comic Relief links', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SocialIcons.default, {
+it('renders correctly with Comic Relief links', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SocialIcons.default, {
     campaign: "comicrelief"
   })).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders correctly with Sport Relief links', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SocialIcons.default, {
+it('renders correctly with Sport Relief links', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SocialIcons.default, {
     campaign: "sportrelief"
   })).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders correctly with Red Nose Day links and self target', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SocialIcons.default, {
+it('renders correctly with Red Nose Day links and self target', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SocialIcons.default, {
     campaign: "rednoseday",
     target: "self"
   })).toJSON();

package/dist/components/Atoms/SocialIcons/Utils/Icons.js

@@ -1,17 +1,17 @@
 "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 _facebook = _interopRequireDefault(require("../assets/facebook.svg"));
-var _xLogo = _interopRequireDefault(require("../assets/x-logo.svg"));
+var _XWhiteSubtract = _interopRequireDefault(require("../assets/X-white-Subtract.svg"));
 var _youtube = _interopRequireDefault(require("../assets/youtube.svg"));
 var _instagram = _interopRequireDefault(require("../assets/instagram.svg"));
 var _default = exports.default = {
   facebook: _facebook.default,
   instagram: _instagram.default,
-  twitter: _xLogo.default,
+  twitter: _XWhiteSubtract.default,
   youtube: _youtube.default
 };

package/dist/components/Atoms/SocialIcons/Utils/Links.js

@@ -9,23 +9,22 @@ exports.default = void 0;
  * @param  {string} campaign
  * @return {object}
  */
-var _default = exports.default = function _default(campaign) {
-  return {
-    facebook: {
-      url: "https://www.facebook.com/".concat(campaign),
-      title: 'Check out our Facebook page'
-    },
-    twitter: {
-      url: "https://twitter.com/".concat(campaign),
-      title: 'Check out our Twitter account'
-    },
-    youtube: {
-      url: 'https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw',
-      title: 'Check out our YouTube channel'
-    },
-    instagram: {
-      url: "https://www.instagram.com/".concat(campaign),
-      title: 'Check out our Instagram account'
-    }
-  };
-};
+var _default = campaign => ({
+  facebook: {
+    url: "https://www.facebook.com/".concat(campaign),
+    title: 'Check out our Facebook page'
+  },
+  twitter: {
+    url: "https://twitter.com/".concat(campaign),
+    title: 'Check out our Twitter account'
+  },
+  youtube: {
+    url: 'https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw',
+    title: 'Check out our YouTube channel'
+  },
+  instagram: {
+    url: "https://www.instagram.com/".concat(campaign),
+    title: 'Check out our Instagram account'
+  }
+});
+exports.default = _default;

package/dist/components/Atoms/SocialIcons/assets/X-white-Subtract.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48ZM37.0874 9.18501L26.6638 21.3016H26.6632L38 37.8003H29.6623L22.0281 26.6901L12.4702 37.8003H10L20.9315 25.0942L10 9.18501H18.3377L25.5665 19.7057L34.6174 9.18501H37.0874ZM22.1729 23.6501L23.2805 25.2343V25.2349L30.8244 36.0253H34.6185L25.3739 22.8019L24.2663 21.2177L17.1544 11.0446H13.3603L22.1729 23.6501Z" fill="white"/>
+</svg>

package/dist/components/Atoms/Text/Text.js

@@ -1,71 +1,92 @@
 "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
 });
 exports.default = exports.BaseText = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _excluded = ["tag", "children", "height", "weight", "family"];
-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; }
 /** Text component */
-var BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
+const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
   displayName: "Text__BaseText",
   componentId: "sc-1snl0ya-0"
-})(["color:", ";font-size:", ";line-height:", ";text-transform:", ";", ";", ";", ";font-family:", ";", ";", ";", ";"], function (_ref) {
-  var color = _ref.color,
-    theme = _ref.theme;
+})(["color:", ";font-size:", ";line-height:", ";text-transform:", ";", ";", ";", ";font-family:", ";", ";", ";", ";"], _ref => {
+  let {
+    color,
+    theme
+  } = _ref;
   return color ? theme.color(color) : 'inherit';
-}, function (_ref2) {
-  var size = _ref2.size,
-    theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    size,
+    theme
+  } = _ref2;
   return theme.fontSize(size);
-}, function (_ref3) {
-  var size = _ref3.size,
-    theme = _ref3.theme;
+}, _ref3 => {
+  let {
+    size,
+    theme
+  } = _ref3;
   return theme.fontSize(size);
-}, function (_ref4) {
-  var uppercase = _ref4.uppercase;
+}, _ref4 => {
+  let {
+    uppercase
+  } = _ref4;
   return uppercase ? 'uppercase' : 'inherit';
-}, function (_ref5) {
-  var weight = _ref5.weight;
+}, _ref5 => {
+  let {
+    weight
+  } = _ref5;
   return weight ? "font-weight: ".concat(weight) : null;
-}, function (_ref6) {
-  var height = _ref6.height;
+}, _ref6 => {
+  let {
+    height
+  } = _ref6;
   return height ? "line-height: ".concat(height) : null;
-}, function (_ref7) {
-  var as = _ref7.as;
+}, _ref7 => {
+  let {
+    as
+  } = _ref7;
   return as === 'p' || as === 'span' ? 'line-height: normal;' : null;
-}, function (_ref8) {
-  var family = _ref8.family,
-    theme = _ref8.theme;
+}, _ref8 => {
+  let {
+    family,
+    theme
+  } = _ref8;
   return family ? theme.fontFamilies(family) : theme.fontFamilies(theme.font.regular);
-}, function (_ref9) {
-  var family = _ref9.family;
+}, _ref9 => {
+  let {
+    family
+  } = _ref9;
   return family === 'Anton' ? 'letter-spacing: 0.03rem' : null;
-}, function (_ref10) {
-  var size = _ref10.size,
-    theme = _ref10.theme;
+}, _ref10 => {
+  let {
+    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;
-}, function (_ref11) {
-  var size = _ref11.size,
-    theme = _ref11.theme;
+}, _ref11 => {
+  let {
+    size,
+    theme
+  } = _ref11;
   return size === 'm' ? (0, _styledComponents.css)(["font-size:", ";@media ", "{font-size:", ";}"], theme.fontSize('s'), theme.breakpoint('small'), theme.fontSize('m')) : null;
 });
 
 /** Text renders different elements based on the `tag` prop
  *  Weight is checked for existence to prevent overriding the tag's css
  */
-var Text = function Text(_ref12) {
-  var tag = _ref12.tag,
-    children = _ref12.children,
-    height = _ref12.height,
-    weight = _ref12.weight,
-    family = _ref12.family,
-    rest = (0, _objectWithoutProperties2.default)(_ref12, _excluded);
+const Text = _ref12 => {
+  let {
+    tag,
+    children,
+    height,
+    weight,
+    family,
+    ...rest
+  } = _ref12;
   return /*#__PURE__*/_react.default.createElement(BaseText, Object.assign({}, rest, {
     as: tag,
     height: height,

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

@@ -1,41 +1,41 @@
 "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 _Text = _interopRequireDefault(require("./Text"));
-it('renders high heading correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Text.default, {
+it('renders high heading correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h3",
     height: "5"
   }, "Heading 3 high")).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders heavy heading correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Text.default, {
+it('renders heavy heading correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h3",
     weight: "1000"
   }, "Heading 3 heavy")).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders large heading correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Text.default, {
+it('renders large heading correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h3",
     size: "l"
   }, "Heading 3 large")).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders xl yellow paragraph correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Text.default, {
+it('renders xl yellow paragraph correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
     size: "xl",
     color: "yellow"
   }, "My paragraph xl and yellow")).toJSON();
   expect(tree).toMatchSnapshot();
 });
-it('renders xl paragraph with Anton font correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Text.default, {
+it('renders xl paragraph with Anton font correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
     size: "xl",
     family: "Anton"