@comicrelief/component-library 7.24.0 → 7.24.2

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

@@ -1,6 +1,7 @@
 "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
 });
@@ -8,55 +9,65 @@ exports.default = exports.IconWrapper = exports.HelperText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVisually"));
-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 buttonStyle = function buttonStyle() {
-  return (0, _styledComponents.css)(["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;cursor:pointer;", ";@media ", "{width:auto;}"], function (_ref) {
-    var theme = _ref.theme;
-    return theme.fontSize('s');
-  }, function (_ref2) {
-    var color = _ref2.color,
-      theme = _ref2.theme;
-    return color ? theme.buttonColors(color) : theme.buttonColors('red');
-  }, function (_ref3) {
-    var theme = _ref3.theme;
-    return theme.breakpoint('small');
-  });
-};
-var linkStyle = function linkStyle() {
-  return (0, _styledComponents.css)(["position:relative;text-decoration:none;display:inline;line-height:", ";", ";"], function (_ref4) {
-    var theme = _ref4.theme;
-    return theme.fontSize('l');
-  }, function (_ref5) {
-    var type = _ref5.type,
-      theme = _ref5.theme,
-      underline = _ref5.underline;
-    return type ? theme.linkStyles(type, underline) : theme.linkStyles('standard', underline);
-  });
-};
-var IconWrapper = exports.IconWrapper = _styledComponents.default.span.withConfig({
+const buttonStyle = () => (0, _styledComponents.css)(["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;cursor:pointer;", ";@media ", "{width:auto;}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.fontSize('s');
+}, _ref2 => {
+  let {
+    color,
+    theme
+  } = _ref2;
+  return color ? theme.buttonColors(color) : theme.buttonColors('red');
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.breakpoint('small');
+});
+const linkStyle = () => (0, _styledComponents.css)(["position:relative;text-decoration:none;display:inline;line-height:", ";", ";"], _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.fontSize('l');
+}, _ref5 => {
+  let {
+    type,
+    theme,
+    underline
+  } = _ref5;
+  return type ? theme.linkStyles(type, underline) : theme.linkStyles('standard', underline);
+});
+const IconWrapper = exports.IconWrapper = _styledComponents.default.span.withConfig({
   displayName: "Linkstyle__IconWrapper",
   componentId: "sc-t360tr-0"
-})(["display:inline-flex;margin-left:", ";align-self:center;right:", ";", ";@media ", "{width:auto;right:auto;position:relative;", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), function (_ref6) {
-  var type = _ref6.type;
+})(["display:inline-flex;margin-left:", ";align-self:center;right:", ";", ";@media ", "{width:auto;right:auto;position:relative;", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), _ref6 => {
+  let {
+    type
+  } = _ref6;
   return type === 'standard' && (0, _styledComponents.css)(["position:absolute;right:-2rem;top:0;bottom:0;"]);
-}, function (_ref7) {
-  var theme = _ref7.theme;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
   return theme.breakpoint('small');
-}, function (_ref8) {
-  var type = _ref8.type;
+}, _ref8 => {
+  let {
+    type
+  } = _ref8;
   return type === 'standard' && (0, _styledComponents.css)(["position:absolute;right:-2rem;top:0;bottom:0;"]);
 });
-var StyledLink = _styledComponents.default.a.withConfig({
+const StyledLink = _styledComponents.default.a.withConfig({
   displayName: "Linkstyle__StyledLink",
   componentId: "sc-t360tr-1"
-})(["", " ", ";"], function (props) {
-  return props.type === 'button' ? buttonStyle : linkStyle;
-}, function (_ref9) {
-  var iconFirst = _ref9.iconFirst;
+})(["", " ", ";"], props => props.type === 'button' ? buttonStyle : linkStyle, _ref9 => {
+  let {
+    iconFirst
+  } = _ref9;
   return iconFirst && (0, _styledComponents.css)(["flex-direction:row-reverse;span[type=\"button\"]{margin-left:0;margin-right:1rem;}"]);
 });
-var HelperText = exports.HelperText = _styledComponents.default.span.withConfig({
+const HelperText = exports.HelperText = _styledComponents.default.span.withConfig({
   displayName: "Linkstyle__HelperText",
   componentId: "sc-t360tr-2"
 })(["", ";"], _hideVisually.default);

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

@@ -1,20 +1,20 @@
 "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 _Link = _interopRequireDefault(require("./Link"));
 var _index = require("../Icons/index");
-it('renders a standard styled link correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
+it('renders a standard styled link correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/test",
     type: "standard"
   }, "A standard link")).toJSON();
   expect(tree).toMatchInlineSnapshot("\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    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      A standard link\n    </a>\n  ");
 });
-it('renders a button with an icon', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
+it('renders a button with an icon', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/test",
     type: "standard",
     color: "red",
@@ -24,16 +24,16 @@ it('renders a button with an icon', function () {
   }, "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  ");
 });
-it('renders a standard styled link correctly with target blank and assistive text', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
+it('renders a standard styled link correctly with target blank and assistive text', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/test",
     type: "standard",
     target: "blank"
   }, "A standard link")).toJSON();
   expect(tree).toMatchInlineSnapshot("\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    .c1 {\n      border: 0;\n      -webkit-clip: rect(0 0 0 0);\n      clip: rect(0 0 0 0);\n      -webkit-clip-path: inset(50%);\n      clip-path: inset(50%);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: 1px;\n    }\n\n    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_blank\"\n      type=\"standard\"\n    >\n      A standard link\n      <span\n        className=\"c1\"\n      >\n        (opens in new window)\n      </span>\n    </a>\n  ");
 });
-it('renders link styled as button correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
+it('renders link styled as button correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/test",
     type: "button",
     color: "yellow"

package/dist/components/Atoms/Logo/Logo.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
 });
@@ -13,7 +13,7 @@ var _crLogo = _interopRequireDefault(require("./assets/cr-logo.svg"));
 var _srLogo = _interopRequireDefault(require("./assets/sr-logo.svg"));
 var _srGameonLogo = _interopRequireDefault(require("./assets/sr-gameon-logo.svg"));
 var _CR_LOGO_PRIDE_KEY_RGB = _interopRequireDefault(require("./assets/CR_LOGO_PRIDE_KEY_RGB.svg"));
-var Image = _styledComponents.default.img.withConfig({
+const Image = _styledComponents.default.img.withConfig({
   displayName: "Logo__Image",
   componentId: "sc-18yiye8-0"
 })(["object-fit:cover;width:100%;display:block;height:auto;margin-right:", ";"], (0, _spacing.default)('md'));
@@ -22,20 +22,16 @@ var Image = _styledComponents.default.img.withConfig({
  * Logo wrapper
  */
 
-var LogoWrapper = _styledComponents.default.div.withConfig({
+const LogoWrapper = _styledComponents.default.div.withConfig({
   displayName: "Logo__LogoWrapper",
   componentId: "sc-18yiye8-1"
-})(["display:inline-block;", " width:", ";transform:", ";vertical-align:bottom;@media ", "{width:", ";}"], (0, _zIndex.default)('high'), function (props) {
-  return props.sizeSm;
-}, function (props) {
-  return props.rotate ? 'rotate(-14deg)' : 'inherit';
-}, function (_ref) {
-  var theme = _ref.theme;
+})(["display:inline-block;", " width:", ";transform:", ";vertical-align:bottom;@media ", "{width:", ";}"], (0, _zIndex.default)('high'), props => props.sizeSm, props => props.rotate ? 'rotate(-14deg)' : 'inherit', _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.breakpoint('nav');
-}, function (props) {
-  return props.sizeMd;
-});
-var themeSwitcher = function themeSwitcher(theme) {
+}, props => props.sizeMd);
+const themeSwitcher = theme => {
   switch (theme) {
     case 'Sport Relief':
       return _srLogo.default;
@@ -47,11 +43,13 @@ var themeSwitcher = function themeSwitcher(theme) {
       return _crLogo.default;
   }
 };
-var Logo = function Logo(_ref2) {
-  var rotate = _ref2.rotate,
-    sizeSm = _ref2.sizeSm,
-    sizeMd = _ref2.sizeMd,
-    campaign = _ref2.campaign;
+const Logo = _ref2 => {
+  let {
+    rotate,
+    sizeSm,
+    sizeMd,
+    campaign
+  } = _ref2;
   return /*#__PURE__*/_react.default.createElement(LogoWrapper, {
     rotate: rotate ? 1 : 0,
     sizeSm: sizeSm,

package/dist/components/Atoms/Logo/Logo.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 _Logo = _interopRequireDefault(require("./Logo"));
-it("renders correctly", function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Logo.default, {
+it("renders correctly", () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Logo.default, {
     rotate: true
   })).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      object-fit: cover;\n      width: 100%;\n      display: block;\n      height: auto;\n      margin-right: 1rem;\n    }\n\n    .c0 {\n      display: inline-block;\n      z-index: 3;\n      width: 51px;\n      -webkit-transform: rotate(-14deg);\n      -ms-transform: rotate(-14deg);\n      transform: rotate(-14deg);\n      vertical-align: bottom;\n    }\n\n    @media (min-width:1150px) {\n      .c0 {\n        width: 70px;\n      }\n    }\n\n    <div\n      className=\"c0\"\n      rotate={1}\n    >\n      <img\n        alt=\"Comic Relief logo\"\n        className=\"c1\"\n        src=\"mock.asset\"\n      />\n    </div>\n  ");

package/dist/components/Atoms/Pagination/Item/Item.js

@@ -1,18 +1,18 @@
 "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 _Item = _interopRequireDefault(require("./Item.style"));
-var _excluded = ["children", "target"];
-var Item = function Item(_ref) {
-  var children = _ref.children,
-    target = _ref.target,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+const Item = _ref => {
+  let {
+    children,
+    target,
+    ...restProps
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Item.default, Object.assign({
     target: "_".concat(target)
   }, restProps), children);

package/dist/components/Atoms/Pagination/Item/Item.style.js

@@ -1,53 +1,60 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-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 StyledItem = _styledComponents.default.a.withConfig({
+const StyledItem = _styledComponents.default.a.withConfig({
   displayName: "Itemstyle__StyledItem",
   componentId: "sc-19pu4qu-0"
-})(["padding:9px 14px 9px 14px;border-radius:30px;text-align:center;text-decoration:none;font-weight:700;cursor:", ";background:", ";color:", ";", ";"], function (_ref) {
-  var selected = _ref.selected,
-    disabled = _ref.disabled;
+})(["padding:9px 14px 9px 14px;border-radius:30px;text-align:center;text-decoration:none;font-weight:700;cursor:", ";background:", ";color:", ";", ";"], _ref => {
+  let {
+    selected,
+    disabled
+  } = _ref;
   return selected || disabled ? 'default' : 'pointer';
-}, function (_ref2) {
-  var theme = _ref2.theme,
-    selected = _ref2.selected,
-    disabled = _ref2.disabled,
-    backgroundColor = _ref2.backgroundColor,
-    selectedBackgroundColor = _ref2.selectedBackgroundColor,
-    disabledBackgroundColor = _ref2.disabledBackgroundColor;
-  var processedBackgroundColor = backgroundColor;
+}, _ref2 => {
+  let {
+    theme,
+    selected,
+    disabled,
+    backgroundColor,
+    selectedBackgroundColor,
+    disabledBackgroundColor
+  } = _ref2;
+  let processedBackgroundColor = backgroundColor;
   if (disabled) {
     processedBackgroundColor = disabledBackgroundColor;
   } else if (selected) {
     processedBackgroundColor = selectedBackgroundColor;
   }
   return theme.color(processedBackgroundColor);
-}, function (_ref3) {
-  var theme = _ref3.theme,
-    selected = _ref3.selected,
-    disabled = _ref3.disabled,
-    color = _ref3.color,
-    selectedColor = _ref3.selectedColor,
-    disabledColor = _ref3.disabledColor;
-  var processedColor = color;
+}, _ref3 => {
+  let {
+    theme,
+    selected,
+    disabled,
+    color,
+    selectedColor,
+    disabledColor
+  } = _ref3;
+  let processedColor = color;
   if (disabled) {
     processedColor = disabledColor;
   } else if (selected) {
     processedColor = selectedColor;
   }
   return theme.color(processedColor);
-}, function (_ref4) {
-  var theme = _ref4.theme,
-    selected = _ref4.selected,
-    disabled = _ref4.disabled,
-    backgroundColorOnHover = _ref4.backgroundColorOnHover,
-    colorOnHover = _ref4.colorOnHover;
+}, _ref4 => {
+  let {
+    theme,
+    selected,
+    disabled,
+    backgroundColorOnHover,
+    colorOnHover
+  } = _ref4;
   if (!(selected || disabled)) {
     return (0, _styledComponents.css)([":hover{background:", ";color:", ";}"], theme.color(backgroundColorOnHover), theme.color(colorOnHover));
   }

package/dist/components/Atoms/Pagination/List/List.js

@@ -1,35 +1,37 @@
 "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 _excluded = ["PageComponent", "pages", "createURL", "onSelect", "pageComponentProps"];
-var StyledList = _styledComponents.default.ul.withConfig({
+const StyledList = _styledComponents.default.ul.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-vcfyaz-0"
 })(["display:flex;padding-left:0;justify-content:center;flex-wrap:wrap;list-style-type:none;"]);
-var StyledItem = _styledComponents.default.li.withConfig({
+const StyledItem = _styledComponents.default.li.withConfig({
   displayName: "List__StyledItem",
   componentId: "sc-vcfyaz-1"
 })(["padding:10px;"]);
-var List = function List(_ref) {
-  var PageComponent = _ref.PageComponent,
-    pages = _ref.pages,
-    createURL = _ref.createURL,
-    onSelect = _ref.onSelect,
-    pageComponentProps = _ref.pageComponentProps,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(StyledList, null, pages.map(function (_ref2) {
-    var selected = _ref2.selected,
-      disabled = _ref2.disabled,
-      label = _ref2.label,
-      ariaLabel = _ref2.ariaLabel,
-      value = _ref2.value;
+const List = _ref => {
+  let {
+    PageComponent,
+    pages,
+    createURL,
+    onSelect,
+    pageComponentProps,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(StyledList, null, pages.map(_ref2 => {
+    let {
+      selected,
+      disabled,
+      label,
+      ariaLabel,
+      value
+    } = _ref2;
     return /*#__PURE__*/_react.default.createElement(StyledItem, {
       key: "".concat(ariaLabel, " ").concat(value)
     }, /*#__PURE__*/_react.default.createElement(PageComponent, Object.assign({
@@ -37,7 +39,7 @@ var List = function List(_ref) {
       disabled: disabled,
       "aria-label": ariaLabel,
       href: selected || disabled ? null : createURL(value),
-      onClick: function onClick(event) {
+      onClick: event => {
         if (selected || disabled) {
           return event.preventDefault();
         }

package/dist/components/Atoms/Pagination/Pagination.js

@@ -1,69 +1,65 @@
 "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 _List = _interopRequireDefault(require("./List/List"));
 var _Item = _interopRequireDefault(require("./Item/Item"));
 var _PaginationCalculator = require("./Utils/PaginationCalculator");
-var _excluded = ["PageComponent", "totalPages", "maxPages", "currentPage", "showFirst", "firstLabel", "firstAriaLabel", "showPrevious", "previousLabel", "previousAriaLabel", "showMore", "moreLabel", "moreAriaLabel", "showNext", "nextLabel", "nextAriaLabel", "showLast", "lastLabel", "lastAriaLabel", "getPageLabel", "getPageAriaLabel", "onSelect", "createURL", "pageComponentProps"];
 /** Customizable Pagination component */
-var Pagination = function Pagination(_ref) {
-  var PageComponent = _ref.PageComponent,
-    totalPages = _ref.totalPages,
-    maxPages = _ref.maxPages,
-    currentPage = _ref.currentPage,
-    showFirst = _ref.showFirst,
-    firstLabel = _ref.firstLabel,
-    firstAriaLabel = _ref.firstAriaLabel,
-    showPrevious = _ref.showPrevious,
-    previousLabel = _ref.previousLabel,
-    previousAriaLabel = _ref.previousAriaLabel,
-    showMore = _ref.showMore,
-    moreLabel = _ref.moreLabel,
-    moreAriaLabel = _ref.moreAriaLabel,
-    showNext = _ref.showNext,
-    nextLabel = _ref.nextLabel,
-    nextAriaLabel = _ref.nextAriaLabel,
-    showLast = _ref.showLast,
-    lastLabel = _ref.lastLabel,
-    lastAriaLabel = _ref.lastAriaLabel,
-    getPageLabel = _ref.getPageLabel,
-    getPageAriaLabel = _ref.getPageAriaLabel,
-    onSelect = _ref.onSelect,
-    createURL = _ref.createURL,
-    pageComponentProps = _ref.pageComponentProps,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+const Pagination = _ref => {
+  let {
+    PageComponent,
+    totalPages,
+    maxPages,
+    currentPage,
+    showFirst,
+    firstLabel,
+    firstAriaLabel,
+    showPrevious,
+    previousLabel,
+    previousAriaLabel,
+    showMore,
+    moreLabel,
+    moreAriaLabel,
+    showNext,
+    nextLabel,
+    nextAriaLabel,
+    showLast,
+    lastLabel,
+    lastAriaLabel,
+    getPageLabel,
+    getPageAriaLabel,
+    onSelect,
+    createURL,
+    pageComponentProps,
+    ...restProps
+  } = _ref;
   if (!totalPages) {
     return null;
   }
-  var getItem = function getItem(label, ariaLabel, value, disabled) {
-    return {
-      disabled: disabled,
-      selected: currentPage === value,
-      label: label,
-      value: value,
-      ariaLabel: ariaLabel
-    };
-  };
-  var items = [];
+  const getItem = (label, ariaLabel, value, disabled) => ({
+    disabled,
+    selected: currentPage === value,
+    label,
+    value,
+    ariaLabel
+  });
+  let items = [];
   if (showFirst) {
     items.push(getItem(firstLabel, firstAriaLabel, 1, currentPage === 1));
   }
   if (showPrevious) {
     items.push(getItem(previousLabel, previousAriaLabel, currentPage - 1, currentPage === 1));
   }
-  var pages = (0, _PaginationCalculator.getPages)(currentPage, maxPages, totalPages);
+  const pages = (0, _PaginationCalculator.getPages)(currentPage, maxPages, totalPages);
   if (showMore && pages[0] > 1) {
     items.push(getItem(moreLabel, moreAriaLabel, -1, true));
   }
-  items = items.concat(pages.map(function (value) {
-    return getItem(getPageLabel(value), getPageAriaLabel(value), value, false);
-  }));
+  items = items.concat(pages.map(value => getItem(getPageLabel(value), getPageAriaLabel(value), value, false)));
   if (showMore && pages[pages.length - 1] < totalPages) {
     items.push(getItem(moreLabel, moreAriaLabel, -2, true));
   }
@@ -95,17 +91,13 @@ Pagination.defaultProps = {
   firstLabel: '«',
   lastLabel: '»',
   moreLabel: '...',
-  getPageLabel: function getPageLabel(currentPage) {
-    return currentPage.toString();
-  },
+  getPageLabel: currentPage => currentPage.toString(),
   previousAriaLabel: 'Previous page',
   nextAriaLabel: 'Next page',
   firstAriaLabel: 'First page',
   lastAriaLabel: 'Last page',
   moreAriaLabel: 'More pages',
-  getPageAriaLabel: function getPageAriaLabel(currentPage) {
-    return "Page ".concat(currentPage);
-  },
+  getPageAriaLabel: currentPage => "Page ".concat(currentPage),
   target: 'self',
   color: 'black',
   backgroundColor: 'white',