@comicrelief/component-library 7.24.1 → 7.24.2

package/.github/workflows/main.yml

@@ -52,15 +52,13 @@ jobs:
         run: yarn build
 
       - name: Run unit tests
-        run: yarn test --maxWorkers=2
+        run: yarn test:unit --maxWorkers=2
         env:
           NODE_OPTIONS: --max_old_space_size=4096
 
-  cypress:
-    name: Cypress test
-    needs:
-      - lint
-      - unit-test
+  playwright:
+    name: Playwright test
+    timeout-minutes: 10
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -71,37 +69,37 @@ jobs:
         with:
           node-version-file: '.nvmrc'
 
-      # see https://github.com/marketplace/actions/cypress-io
-      - name: Run Cypress tests
-        uses: cypress-io/github-action@v2
+      - name: Restore packages cache
+        uses: actions/cache@v3
         with:
-          start: yarn styleguide
-          command: yarn cy:run
-          wait-on: http://localhost:6060
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile --ignore-scripts
+
+      - name: Install playwright browsers
+        run: yarn playwright install --with-deps chromium
+
+      - name: Run end-to-end tests
+        run: yarn test:e2e:ci
+        continue-on-error: false
         env:
           NODE_OPTIONS: --max_old_space_size=4096
 
-      # NOTE: screenshots will be generated only if the tests failed
-      # thus we store screenshots only on failures
-      - name: Upload screenshots
-        uses: actions/upload-artifact@v3
-        if: failure()
-        with:
-          name: cypress-screenshots
-          path: cypress/screenshots
-
       # Test run video was always captured, so this action uses "always()" condition
       - name: Upload videos
         uses: actions/upload-artifact@v3
         if: always()
         with:
-          name: cypress-videos
-          path: cypress/videos
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 3
 
   publish:
     name: Publish package to npm
     if: github.ref == 'refs/heads/master'
-    needs: cypress
+    needs: playwright
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

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

@@ -1,35 +1,41 @@
 "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 _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _breakpoint = _interopRequireDefault(require("../../../theme/shared/breakpoint"));
-var _excluded = ["children", "wrapper"];
-var StyledButton = _styledComponents.default.button.withConfig({
+const StyledButton = _styledComponents.default.button.withConfig({
   displayName: "Button__StyledButton",
   componentId: "sc-1gm5vj0-0"
-})(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;> a{text-decoration:none;}", ";@media ", "{width:auto;}", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], function (_ref) {
-  var theme = _ref.theme;
+})(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;> a{text-decoration:none;}", ";@media ", "{width:auto;}", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.fontSize('s');
-}, function (_ref2) {
-  var color = _ref2.color,
-    theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    color,
+    theme
+  } = _ref2;
   return color ? theme.buttonColors(color) : theme.buttonColors('red');
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.breakpoint('small');
 }, (0, _breakpoint.default)('medium'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
-var Button = /*#__PURE__*/_react.default.forwardRef(function (_ref4, ref) {
-  var children = _ref4.children,
-    wrapper = _ref4.wrapper,
-    rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
+const Button = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+  let {
+    children,
+    wrapper,
+    ...rest
+  } = _ref4;
   return /*#__PURE__*/_react.default.createElement(StyledButton, Object.assign({}, rest, {
     as: wrapper ? 'span' : 'button',
     ref: ref

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

package/dist/components/Atoms/ButtonWithStates/ButtonWithStates.js

@@ -1,43 +1,40 @@
 "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 _ScaleLoader = _interopRequireDefault(require("react-spinners/ScaleLoader"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
-var _excluded = ["children", "loadingText", "loading", "disabled"];
-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 ButtonWithDisabledState = (0, _styledComponents.default)(_Button.default).withConfig({
+const ButtonWithDisabledState = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "ButtonWithStates__ButtonWithDisabledState",
   componentId: "sc-7gb81g-0"
 })(["&:disabled{cursor:not-allowed;opacity:0.75;}"]);
-var LoaderContainer = _styledComponents.default.div.withConfig({
+const LoaderContainer = _styledComponents.default.div.withConfig({
   displayName: "ButtonWithStates__LoaderContainer",
   componentId: "sc-7gb81g-1"
-})(["", ""], function (_ref) {
-  var withMargin = _ref.withMargin;
+})(["", ""], _ref => {
+  let {
+    withMargin
+  } = _ref;
   return withMargin ? "\n  margin-top: ".concat((0, _spacing.default)('xsm'), ";\n  margin-left: ").concat((0, _spacing.default)('md'), ";\n") : '';
 });
 
 // A button with loading and disabled states.
-var ButtonWithStates = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    loadingText = _ref2.loadingText,
-    loading = _ref2.loading,
-    disabled = _ref2.disabled,
-    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    loaderColour = _useState2[0],
-    setLoaderColour = _useState2[1];
+const ButtonWithStates = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    loadingText,
+    loading,
+    disabled,
+    ...rest
+  } = _ref2;
+  const [loaderColour, setLoaderColour] = (0, _react.useState)(null);
 
   // Can't see a simpler way to get the button's text colour, without reading the value
   //  via JavaScript.
@@ -45,9 +42,9 @@ var ButtonWithStates = /*#__PURE__*/_react.default.forwardRef(function (_ref2, r
   //  don't really want to be parsing that.)
   //  (And can't use inherit because ScaleLoader's color prop is actually setting its
   //  background color.)
-  var getLoaderColour = (0, _react.useCallback)(function (node) {
+  const getLoaderColour = (0, _react.useCallback)(node => {
     if (node && typeof window.getComputedStyle === 'function') {
-      var textColour = window.getComputedStyle(node).color;
+      const textColour = window.getComputedStyle(node).color;
       if (textColour) {
         setLoaderColour(textColour);
       }

package/dist/components/Atoms/Checkbox/Checkbox.js

@@ -1,56 +1,72 @@
 "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 _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Text = _interopRequireDefault(require("../Text/Text"));
 var _tick = _interopRequireDefault(require("./assets/tick.svg"));
-var _excluded = ["label", "value", "children"];
-var StyledCheckboxInput = _styledComponents.default.input.attrs({
+const StyledCheckboxInput = _styledComponents.default.input.attrs({
   type: 'checkbox'
 }).withConfig({
   displayName: "Checkbox__StyledCheckboxInput",
   componentId: "sc-ngak0-0"
-})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:24px;height:24px;margin:0;border:1px solid ", ";+ span{margin-right:12px;width:24px;height:24px;border-radius:4px;background-color:", ";border:1px solid ", ";float:left;flex-shrink:0;}:checked + span{background:url(", ") no-repeat center;background-color:", ";border-color:", ";background-size:contain;}:focus + span{border-color:", ";border-width:1px;}"], function (_ref) {
-  var theme = _ref.theme;
+})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:24px;height:24px;margin:0;border:1px solid ", ";+ span{margin-right:12px;width:24px;height:24px;border-radius:4px;background-color:", ";border:1px solid ", ";float:left;flex-shrink:0;}:checked + span{background:url(", ") no-repeat center;background-color:", ";border-color:", ";background-size:contain;}:focus + span{border-color:", ";border-width:1px;}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.fontSize('sm');
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.color('grey');
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.color('white');
-}, function (_ref4) {
-  var theme = _ref4.theme;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.color('grey');
-}, _tick.default, function (_ref5) {
-  var theme = _ref5.theme;
+}, _tick.default, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.color('red');
-}, function (_ref6) {
-  var theme = _ref6.theme;
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.color('red');
-}, function (_ref7) {
-  var theme = _ref7.theme;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
   return theme.color('red');
 });
-var Label = _styledComponents.default.label.withConfig({
+const Label = _styledComponents.default.label.withConfig({
   displayName: "Checkbox__Label",
   componentId: "sc-ngak0-1"
-})(["display:flex;", " margin-bottom:8px;"], function (_ref8) {
-  var hasLabelAsString = _ref8.hasLabelAsString;
+})(["display:flex;", " margin-bottom:8px;"], _ref8 => {
+  let {
+    hasLabelAsString
+  } = _ref8;
   return hasLabelAsString && 'align-items: center;';
 });
-var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (_ref9, ref) {
-  var label = _ref9.label,
-    value = _ref9.value,
-    children = _ref9.children,
-    rest = (0, _objectWithoutProperties2.default)(_ref9, _excluded);
+const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
+  let {
+    label,
+    value,
+    children,
+    ...rest
+  } = _ref9;
   return /*#__PURE__*/_react.default.createElement(Label, {
     hasLabelAsString: !!label
   }, /*#__PURE__*/_react.default.createElement(StyledCheckboxInput, Object.assign({}, rest, {

package/dist/components/Atoms/Checkbox/Checkbox.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 _Checkbox = _interopRequireDefault(require("./Checkbox"));
-it('renders correctly', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
     name: "sport",
     value: "Tenis",
     label: "Tenis"

package/dist/components/Atoms/Confetti/Confetti.js

@@ -1,19 +1,17 @@
 "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 = Confetti;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactCanvasConfetti = _interopRequireDefault(require("react-canvas-confetti"));
-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; }
 function randomInRange(min, max) {
   return Math.random() * (max - min) + min;
 }
-var canvasStyles = {
+const canvasStyles = {
   position: 'fixed',
   pointerEvents: 'none',
   width: '100%',
@@ -35,32 +33,31 @@ function getAnimationSettings(originXA, originXB) {
   };
 }
 function Confetti(_ref) {
-  var trigger = _ref.trigger,
-    duration = _ref.duration;
-  var refAnimationInstance = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    intervalId = _useState2[0],
-    setIntervalId = _useState2[1];
-  var getInstance = (0, _react.useCallback)(function (instance) {
+  let {
+    trigger,
+    duration
+  } = _ref;
+  const refAnimationInstance = (0, _react.useRef)(null);
+  const [intervalId, setIntervalId] = (0, _react.useState)();
+  const getInstance = (0, _react.useCallback)(instance => {
     refAnimationInstance.current = instance;
   }, []);
-  var nextTickAnimation = (0, _react.useCallback)(function () {
+  const nextTickAnimation = (0, _react.useCallback)(() => {
     if (refAnimationInstance.current) {
       refAnimationInstance.current(getAnimationSettings(0.1, 0.3));
       refAnimationInstance.current(getAnimationSettings(0.7, 0.9));
     }
   }, []);
-  var startAnimation = (0, _react.useCallback)(function () {
+  const startAnimation = (0, _react.useCallback)(() => {
     if (!intervalId) {
       setIntervalId(setInterval(nextTickAnimation, 400));
     }
   }, [intervalId, nextTickAnimation]);
-  var pauseAnimation = (0, _react.useCallback)(function () {
+  const pauseAnimation = (0, _react.useCallback)(() => {
     clearInterval(intervalId);
     setIntervalId(null);
   }, [intervalId]);
-  var stopAnimation = (0, _react.useCallback)(function () {
+  const stopAnimation = (0, _react.useCallback)(() => {
     clearInterval(intervalId);
     setIntervalId(null);
     if (refAnimationInstance.current) {
@@ -69,21 +66,21 @@ function Confetti(_ref) {
   }, [intervalId]);
 
   // eslint-disable-next-line
-  (0, _react.useEffect)(function () {
-    return function () {
+  (0, _react.useEffect)(() => {
+    return () => {
       clearInterval(intervalId);
     };
   }, [intervalId]);
-  (0, _react.useEffect)(function () {
-    var timeOut;
+  (0, _react.useEffect)(() => {
+    let timeOut;
     if (trigger) {
       startAnimation();
-      timeOut = setTimeout(function () {
+      timeOut = setTimeout(() => {
         // This gracefully ends the animation
         pauseAnimation();
       }, duration);
     }
-    return function () {
+    return () => {
       if (timeOut) {
         // this clears up the animation
         stopAnimation();

package/dist/components/Atoms/Confetti/_TriggerConfetti.js

@@ -1,26 +1,19 @@
 "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 = TriggerConfetti;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _Confetti = _interopRequireDefault(require("./Confetti"));
-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; }
 function TriggerConfetti() {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isConfetti = _useState2[0],
-    setIsConfetti = _useState2[1];
+  const [isConfetti, setIsConfetti] = (0, _react.useState)(false);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Confetti.default, {
     trigger: isConfetti
   }), /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
-    onClick: function onClick() {
-      return setIsConfetti(!isConfetti);
-    }
+    onClick: () => setIsConfetti(!isConfetti)
   }, "trigger confetti"));
 }

package/dist/components/Atoms/ErrorText/ErrorText.js

@@ -1,30 +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 _Text = _interopRequireDefault(require("../Text/Text"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _CR_ErrorRed = _interopRequireDefault(require("../Input/assets/CR_Error--red.svg"));
-var _excluded = ["children"];
-var ErrorIcon = _styledComponents.default.span.withConfig({
+const ErrorIcon = _styledComponents.default.span.withConfig({
   displayName: "ErrorText__ErrorIcon",
   componentId: "sc-19bj17r-0"
-})(["display:inline-block;padding:", " ", " ", ";width:100%;z-index:1;margin-top:-10px;background-color:", ";border-radius:", ";font-weight:bold;:before{position:relative;content:'';top:1px;margin-right:3px;background:url(", ") left 0/100% no-repeat;width:18px;height:19px;display:inline-block;vertical-align:top;color:", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('md'), (0, _spacing.default)('md'), function (_ref) {
-  var theme = _ref.theme;
+})(["display:inline-block;padding:", " ", " ", ";width:100%;z-index:1;margin-top:-10px;background-color:", ";border-radius:", ";font-weight:bold;:before{position:relative;content:'';top:1px;margin-right:3px;background:url(", ") left 0/100% no-repeat;width:18px;height:19px;display:inline-block;vertical-align:top;color:", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('error_pink');
-}, (0, _spacing.default)('sm'), _CR_ErrorRed.default, function (_ref2) {
-  var theme = _ref2.theme;
+}, (0, _spacing.default)('sm'), _CR_ErrorRed.default, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.color('red');
 });
-var ErrorText = function ErrorText(_ref3) {
-  var children = _ref3.children,
-    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+const ErrorText = _ref3 => {
+  let {
+    children,
+    ...rest
+  } = _ref3;
   return /*#__PURE__*/_react.default.createElement(_Text.default, Object.assign({}, rest, {
     color: "red"
   }), /*#__PURE__*/_react.default.createElement(ErrorIcon, null, children));

package/dist/components/Atoms/ErrorText/ErrorText.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 _ErrorText = _interopRequireDefault(require("./ErrorText"));
-it('renders correctly', function () {
-  var renderer = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
+it('renders correctly', () => {
+  const renderer = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
     size: "sm"
   }, "This is an error"));
   expect(renderer.toJSON()).toMatchSnapshot();

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

@@ -1,35 +1,36 @@
 "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 = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _excluded = ["colour", "theme", "size", "direction"];
-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 angle = {
+const angle = {
   right: '180deg',
   left: '0',
   down: '-90deg',
   up: '90deg'
 };
-var Icon = _styledComponents.default.svg.withConfig({
+const Icon = _styledComponents.default.svg.withConfig({
   displayName: "Arrow__Icon",
   componentId: "sc-1iegggu-0"
-})(["transform:", ";"], function (_ref) {
-  var direction = _ref.direction;
+})(["transform:", ";"], _ref => {
+  let {
+    direction
+  } = _ref;
   return "rotate(".concat(angle[direction], ")");
 });
-var Arrow = function Arrow(_ref2) {
-  var colour = _ref2.colour,
-    theme = _ref2.theme,
-    size = _ref2.size,
-    direction = _ref2.direction,
-    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+const Arrow = _ref2 => {
+  let {
+    colour,
+    theme,
+    size,
+    direction,
+    ...rest
+  } = _ref2;
   return /*#__PURE__*/_react.default.createElement(Icon, Object.assign({
     direction: direction,
     width: size,

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

@@ -1,20 +1,20 @@
 "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 = require("styled-components");
-var _excluded = ["theme", "size", "colour"];
-var 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';
-var AtSign = function AtSign(_ref) {
-  var theme = _ref.theme,
-    size = _ref.size,
-    colour = _ref.colour,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+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 => {
+  let {
+    theme,
+    size,
+    colour,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
     width: size,
     height: size,