@comicrelief/component-library 7.24.0 → 7.24.2

package/dist/components/Organisms/Donate/Form/PopUpComponent.js

@@ -1,56 +1,53 @@
 "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 _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
 var _size = require("../../../../theme/shared/size");
 var _close = _interopRequireDefault(require("../assets/close.svg"));
-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 closeDuration = 0.6;
-var fadeClose = (0, _styledComponents.keyframes)(["0%{opacity:1;max-height:350px;}100%{opacity:0;max-height:0px;display:none;margin-top:-16px;}"]);
-var fadeOpen = (0, _styledComponents.keyframes)(["0%{opacity:0;max-height:0px;display:none;margin-top:-16px;}100%{opacity:1;max-height:350px;}"]);
-var StyledPopUp = _styledComponents.default.div.withConfig({
+const closeDuration = 0.6;
+const fadeClose = (0, _styledComponents.keyframes)(["0%{opacity:1;max-height:350px;}100%{opacity:0;max-height:0px;display:none;margin-top:-16px;}"]);
+const fadeOpen = (0, _styledComponents.keyframes)(["0%{opacity:0;max-height:0px;display:none;margin-top:-16px;}100%{opacity:1;max-height:350px;}"]);
+const StyledPopUp = _styledComponents.default.div.withConfig({
   displayName: "PopUpComponent__StyledPopUp",
   componentId: "sc-1d7imlo-0"
-})(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;", "{width:450px;margin-right:auto;margin-left:auto;}"], function (props) {
-  return props.fadeOpen;
-}, function (props) {
-  return props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, props.fadeClose);
-}, function (_ref) {
-  var theme = _ref.theme;
+})(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;", "{width:450px;margin-right:auto;margin-left:auto;}"], props => props.fadeOpen, props => props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, props.fadeClose), _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('blue_light');
 }, (0, _size.media)('small'));
-var TextWrapper = _styledComponents.default.div.withConfig({
+const TextWrapper = _styledComponents.default.div.withConfig({
   displayName: "PopUpComponent__TextWrapper",
   componentId: "sc-1d7imlo-1"
 })(["margin:0 32px 32px;"]);
-var Button = _styledComponents.default.button.withConfig({
+const Button = _styledComponents.default.button.withConfig({
   displayName: "PopUpComponent__Button",
   componentId: "sc-1d7imlo-2"
-})(["justify-self:end;background-color:transparent;border:0;cursor:pointer;width:30px;height:30px;margin:3px;:active,:focus,:hover{outline:none;border:1px solid ", ";}img{width:15px;height:15px;vertical-align:middle;}"], function (_ref2) {
-  var theme = _ref2.theme;
+})(["justify-self:end;background-color:transparent;border:0;cursor:pointer;width:30px;height:30px;margin:3px;:active,:focus,:hover{outline:none;border:1px solid ", ";}img{width:15px;height:15px;vertical-align:middle;}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.color('grey');
 });
-var PopUpComponent = function PopUpComponent(_ref3) {
-  var PopUpText = _ref3.PopUpText,
-    setPopOpen = _ref3.setPopOpen;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isClosed = _useState2[0],
-    setIsClosed = _useState2[1];
+const PopUpComponent = _ref3 => {
+  let {
+    PopUpText,
+    setPopOpen
+  } = _ref3;
+  const [isClosed, setIsClosed] = (0, _react.useState)(false);
 
   // Only update centralised state - which renders
   // this component - once the closing animation is complete
-  var handleCloser = function handleCloser() {
+  const handleCloser = () => {
     setIsClosed(true);
-    setTimeout(function () {
+    setTimeout(() => {
       setPopOpen(false);
     }, closeDuration * 1000);
   };
@@ -59,9 +56,7 @@ var PopUpComponent = function PopUpComponent(_ref3) {
     fadeOpen: fadeOpen,
     fadeClose: fadeClose
   }, /*#__PURE__*/_react.default.createElement(Button, {
-    onClick: function onClick() {
-      return handleCloser();
-    },
+    onClick: () => handleCloser(),
     "aria-label": "Close"
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: _close.default,

package/dist/components/Organisms/Donate/GivingSelector/GivingSelector.js

@@ -1,19 +1,21 @@
 "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 _react = _interopRequireDefault(require("react"));
 var _GivingSelector = require("./GivingSelector.style");
-var GivingSelector = function GivingSelector(_ref) {
-  var givingType = _ref.givingType,
-    changeGivingType = _ref.changeGivingType,
-    setPopOpen = _ref.setPopOpen,
-    mbshipID = _ref.mbshipID;
+const GivingSelector = _ref => {
+  let {
+    givingType,
+    changeGivingType,
+    setPopOpen,
+    mbshipID
+  } = _ref;
   // Only updates giving type and popup status when appropriate
-  var handleGivingTypeChange = function handleGivingTypeChange(thisButtonType, currentGivingType) {
+  const handleGivingTypeChange = (thisButtonType, currentGivingType) => {
     if (currentGivingType !== thisButtonType) {
       changeGivingType(thisButtonType);
       setPopOpen(thisButtonType === 'single');
@@ -27,9 +29,7 @@ var GivingSelector = function GivingSelector(_ref) {
     type: "radio",
     label: "",
     checked: givingType === 'single',
-    onClick: function onClick() {
-      return handleGivingTypeChange('single', givingType);
-    }
+    onClick: () => handleGivingTypeChange('single', givingType)
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'single',
     htmlFor: "give-once--".concat(mbshipID)
@@ -41,9 +41,7 @@ var GivingSelector = function GivingSelector(_ref) {
     type: "radio",
     label: "",
     checked: givingType === 'monthly',
-    onClick: function onClick() {
-      return handleGivingTypeChange('monthly', givingType);
-    }
+    onClick: () => handleGivingTypeChange('monthly', givingType)
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'monthly',
     htmlFor: "give-monthly--".concat(mbshipID)

package/dist/components/Organisms/Donate/GivingSelector/GivingSelector.style.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
 });
@@ -10,44 +10,60 @@ var _size = require("../../../../theme/shared/size");
 var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"));
 var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
 var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
-var Switch = exports.Switch = _styledComponents.default.span.withConfig({
+const Switch = exports.Switch = _styledComponents.default.span.withConfig({
   displayName: "GivingSelectorstyle__Switch",
   componentId: "sc-5ktn9c-0"
-})(["width:50%;height:48px;border-radius:2rem;", ";display:block;position:absolute;transition:left 0.15s ease-out;background-color:", ";left:2px;box-shadow:0px 0px 16px rgba(0,0,0,0.3);"], (0, _zIndex.default)('low'), function (_ref) {
-  var theme = _ref.theme;
+})(["width:50%;height:48px;border-radius:2rem;", ";display:block;position:absolute;transition:left 0.15s ease-out;background-color:", ";left:2px;box-shadow:0px 0px 16px rgba(0,0,0,0.3);"], (0, _zIndex.default)('low'), _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('blue');
 });
-var Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
+const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "GivingSelectorstyle__Wrapper",
   componentId: "sc-5ktn9c-1"
 })(["display:flex;margin:", " 0;"], (0, _spacing.default)('md'));
-var MoneyBox = exports.MoneyBox = _styledComponents.default.div.withConfig({
+const MoneyBox = exports.MoneyBox = _styledComponents.default.div.withConfig({
   displayName: "GivingSelectorstyle__MoneyBox",
   componentId: "sc-5ktn9c-2"
-})(["width:100%;padding:2px;position:relative;display:flex;flex-direction:row;margin:", " 0;border-radius:2rem;background:", ";", "{width:450px;margin:0 auto;}.give-monthly:checked ~ ", "{left:calc(50% - 2px);}input{", "}input:focus:not(:checked) + label{box-shadow:inset 0 0 0 4px ", ";}"], (0, _spacing.default)('md'), function (_ref2) {
-  var theme = _ref2.theme;
+})(["width:100%;padding:2px;position:relative;display:flex;flex-direction:row;margin:", " 0;border-radius:2rem;background:", ";", "{width:450px;margin:0 auto;}.give-monthly:checked ~ ", "{left:calc(50% - 2px);}input{", "}input:focus:not(:checked) + label{box-shadow:inset 0 0 0 4px ", ";}"], (0, _spacing.default)('md'), _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.color('blue_light');
-}, (0, _size.media)('small'), Switch, _hideVisually.default, function (_ref3) {
-  var theme = _ref3.theme;
+}, (0, _size.media)('small'), Switch, _hideVisually.default, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.color('blue');
 });
-var Label = exports.Label = _styledComponents.default.label.withConfig({
+const Label = exports.Label = _styledComponents.default.label.withConfig({
   displayName: "GivingSelectorstyle__Label",
   componentId: "sc-5ktn9c-3"
-})(["font-size:", ";font-family:", ";font-weight:bold;min-height:48px;align-items:center;justify-content:center;display:flex;flex-basis:50%;border:none;transition:color 0.15s ease-out;", ";cursor:", ";border-radius:2rem;color:", ";&:active:focus{box-shadow:none;}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}"], function (_ref4) {
-  var theme = _ref4.theme;
+})(["font-size:", ";font-family:", ";font-weight:bold;min-height:48px;align-items:center;justify-content:center;display:flex;flex-basis:50%;border:none;transition:color 0.15s ease-out;", ";cursor:", ";border-radius:2rem;color:", ";&:active:focus{box-shadow:none;}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}"], _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.fontSize('s');
-}, function (_ref5) {
-  var theme = _ref5.theme;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.fontFamilies('Montserrat');
-}, (0, _zIndex.default)('medium'), function (_ref6) {
-  var active = _ref6.active;
+}, (0, _zIndex.default)('medium'), _ref6 => {
+  let {
+    active
+  } = _ref6;
   return active === true ? 'default' : 'pointer';
-}, function (_ref7) {
-  var active = _ref7.active,
-    theme = _ref7.theme;
+}, _ref7 => {
+  let {
+    active,
+    theme
+  } = _ref7;
   return active === true ? theme.color('white') : theme.color('black');
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.color('blue');
 });

package/dist/components/Organisms/Donate/MoneyBuy/MoneyBuy.js

@@ -1,56 +1,73 @@
 "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 _Input = _interopRequireDefault(require("../../../Atoms/Input/Input"));
 var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"));
 var _size = require("../../../../theme/shared/size");
-var _excluded = ["setOtherAmount", "amount", "currency", "description"];
-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 MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig({
+const MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "MoneyBuy__MoneyBuyButton",
   componentId: "sc-38g5hn-0"
-})(["display:block;input{border:none;background-color:", ";color:", ";font-size:", ";font-family:", ";font-weight:normal;border-radius:10px;padding:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);height:auto;", "{font-size:", ";padding:", ";}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}&:active:focus{box-shadow:0px 0px 16px rgba(0,0,0,0.3);}", "}"], function (_ref) {
-  var theme = _ref.theme;
+})(["display:block;input{border:none;background-color:", ";color:", ";font-size:", ";font-family:", ";font-weight:normal;border-radius:10px;padding:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);height:auto;", "{font-size:", ";padding:", ";}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}&:active:focus{box-shadow:0px 0px 16px rgba(0,0,0,0.3);}", "}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('blue_light');
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.color('black');
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.fontSize('l');
-}, function (_ref4) {
-  var theme = _ref4.theme;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.fontFamilies('Anton');
-}, (0, _spacing.default)('s'), (0, _size.media)('small'), function (_ref5) {
-  var theme = _ref5.theme;
+}, (0, _spacing.default)('s'), (0, _size.media)('small'), _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.fontSize('xl');
-}, (0, _spacing.default)('m'), function (_ref6) {
-  var theme = _ref6.theme;
+}, (0, _spacing.default)('m'), _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.color('blue');
-}, function (_ref7) {
-  var isSelected = _ref7.isSelected;
-  return isSelected && (0, _styledComponents.css)(["background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.3);color:", ";&:focus{box-shadow:0px 0px 16px rgba(0,0,0,0.3);}"], function (_ref8) {
-    var theme = _ref8.theme;
+}, _ref7 => {
+  let {
+    isSelected
+  } = _ref7;
+  return isSelected && (0, _styledComponents.css)(["background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.3);color:", ";&:focus{box-shadow:0px 0px 16px rgba(0,0,0,0.3);}"], _ref8 => {
+    let {
+      theme
+    } = _ref8;
     return theme.color('blue');
-  }, function (_ref9) {
-    var theme = _ref9.theme;
+  }, _ref9 => {
+    let {
+      theme
+    } = _ref9;
     return theme.color('white');
   });
 });
-var MoneyBuy = function MoneyBuy(_ref10) {
-  var setOtherAmount = _ref10.setOtherAmount,
-    amount = _ref10.amount,
-    currency = _ref10.currency,
-    description = _ref10.description,
-    rest = (0, _objectWithoutProperties2.default)(_ref10, _excluded);
+const MoneyBuy = _ref10 => {
+  let {
+    setOtherAmount,
+    amount,
+    currency,
+    description,
+    ...rest
+  } = _ref10;
   return /*#__PURE__*/_react.default.createElement(MoneyBuyButton, Object.assign({}, rest, {
     "aria-label": description,
     value: "".concat(currency, " ").concat(amount),

package/dist/components/Organisms/EmailSignUp/EmailSignUp.style.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,76 +9,102 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _TextInput = _interopRequireDefault(require("./_TextInput"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
-var ESUWrapper = exports.ESUWrapper = _styledComponents.default.div.withConfig({
+const ESUWrapper = exports.ESUWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__ESUWrapper",
   componentId: "sc-w2b8yk-0"
-})(["display:flex;flex-direction:column;font-size:", ";color:", ";background-color:", ";padding:", ";"], function (_ref) {
-  var theme = _ref.theme;
+})(["display:flex;flex-direction:column;font-size:", ";color:", ";background-color:", ";padding:", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.fontSize('s');
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.color('white');
-}, function (_ref3) {
-  var theme = _ref3.theme,
-    backgroundColour = _ref3.backgroundColour;
+}, _ref3 => {
+  let {
+    theme,
+    backgroundColour
+  } = _ref3;
   return theme.color(backgroundColour);
 }, (0, _spacing.default)('m'));
-var TopCopyWrapper = exports.TopCopyWrapper = _styledComponents.default.div.withConfig({
+const TopCopyWrapper = exports.TopCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__TopCopyWrapper",
   componentId: "sc-w2b8yk-1"
 })(["display:flex;margin-bottom:", ";"], (0, _spacing.default)('md'));
-var ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div.withConfig({
+const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__ButtonWrapper",
   componentId: "sc-w2b8yk-2"
-})(["margin-top:", ";button{background-color:", ";}"], (0, _spacing.default)('md'), function (_ref4) {
-  var theme = _ref4.theme,
-    buttonColour = _ref4.buttonColour;
+})(["margin-top:", ";button{background-color:", ";}"], (0, _spacing.default)('md'), _ref4 => {
+  let {
+    theme,
+    buttonColour
+  } = _ref4;
   return theme.color(buttonColour);
 });
-var PrivacyCopyWrapper = exports.PrivacyCopyWrapper = _styledComponents.default.div.withConfig({
+const PrivacyCopyWrapper = exports.PrivacyCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__PrivacyCopyWrapper",
   componentId: "sc-w2b8yk-3"
-})(["display:flex;flex-direction:column;margin-top:", ";p{font-size:", ";line-height:", ";a{font-size:", ";color:", ";}}"], (0, _spacing.default)('md'), function (_ref5) {
-  var theme = _ref5.theme;
+})(["display:flex;flex-direction:column;margin-top:", ";p{font-size:", ";line-height:", ";a{font-size:", ";color:", ";}}"], (0, _spacing.default)('md'), _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.fontSize('s');
-}, function (_ref6) {
-  var theme = _ref6.theme;
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.fontSize('xl');
-}, function (_ref7) {
-  var theme = _ref7.theme;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
   return theme.fontSize('s');
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.color('white');
 });
-var FormInner = exports.FormInner = _styledComponents.default.div.withConfig({
+const FormInner = exports.FormInner = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__FormInner",
   componentId: "sc-w2b8yk-4"
 })(["display:flex;flex-direction:column;margin:", " 0;"], (0, _spacing.default)('md'));
-var NameWrapper = exports.NameWrapper = _styledComponents.default.div.withConfig({
+const NameWrapper = exports.NameWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__NameWrapper",
   componentId: "sc-w2b8yk-5"
-})(["display:flex;flex-direction:column;gap:0;@media ", "{justify-content:start;flex-direction:", ";gap:", ";)};}"], function (_ref9) {
-  var theme = _ref9.theme;
+})(["display:flex;flex-direction:column;gap:0;@media ", "{justify-content:start;flex-direction:", ";gap:", ";)};}"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
   return theme.breakpoint('medium');
-}, function (_ref10) {
-  var columnLayout = _ref10.columnLayout;
+}, _ref10 => {
+  let {
+    columnLayout
+  } = _ref10;
   return columnLayout ? 'column' : 'row';
-}, function (_ref11) {
-  var columnLayout = _ref11.columnLayout;
+}, _ref11 => {
+  let {
+    columnLayout
+  } = _ref11;
   return columnLayout ? 0 : (0, _spacing.default)('md');
 });
-var InputField = exports.InputField = (0, _styledComponents.default)(_TextInput.default).withConfig({
+const InputField = exports.InputField = (0, _styledComponents.default)(_TextInput.default).withConfig({
   displayName: "EmailSignUpstyle__InputField",
   componentId: "sc-w2b8yk-6"
-})(["width:100%;margin-bottom:", ";& > span:first-child{color:", ";}@media ", "{max-width:290px;}"], (0, _spacing.default)('md'), function (_ref12) {
-  var theme = _ref12.theme;
+})(["width:100%;margin-bottom:", ";& > span:first-child{color:", ";}@media ", "{max-width:290px;}"], (0, _spacing.default)('md'), _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.color('white');
-}, function (_ref13) {
-  var theme = _ref13.theme;
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
   return theme.breakpoint('medium');
 });
-var Title = exports.Title = (0, _styledComponents.default)(_Text.default).withConfig({
+const Title = exports.Title = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "EmailSignUpstyle__Title",
   componentId: "sc-w2b8yk-7"
 })(["margin-bottom:", ";"], (0, _spacing.default)('m'));

package/dist/components/Organisms/EmailSignUp/EmailSignUp.test.js

@@ -1,6 +1,6 @@
 "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"));
@@ -8,19 +8,19 @@ var _EmailSignUp = require("./_EmailSignUp");
 var _RichText = _interopRequireDefault(require("../../Atoms/RichText/RichText"));
 var _reactHookForm = require("react-hook-form");
 var _yup = require("@hookform/resolvers/yup");
-var DummyForm = function DummyForm() {
-  var formMethods = (0, _reactHookForm.useForm)({
+const DummyForm = () => {
+  const formMethods = (0, _reactHookForm.useForm)({
     mode: "onBlur",
     resolver: (0, _yup.yupResolver)(_EmailSignUp.validationSchema)
   });
-  var handleSubmit = formMethods.handleSubmit;
-  var top = "<h1> Top Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>";
-  var success = "<h1> Success Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>";
-  var privacy = 'check <a href="https://www.comicrelief.com/privacy-notice">Privacy policy</a>';
+  const {
+    handleSubmit
+  } = formMethods;
+  const top = "<h1> Top Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>";
+  const success = "<h1> Success Copy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>";
+  const privacy = 'check <a href="https://www.comicrelief.com/privacy-notice">Privacy policy</a>';
   return /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, formMethods, /*#__PURE__*/_react.default.createElement("form", {
-    onSubmit: handleSubmit(function () {
-      return true;
-    }),
+    onSubmit: handleSubmit(() => true),
     noValidate: true
   }, /*#__PURE__*/_react.default.createElement(_EmailSignUp.EmailSignUp, {
     title: "sign up letter",
@@ -36,7 +36,7 @@ var DummyForm = function DummyForm() {
     formContext: formMethods
   })));
 };
-it("renders correctly", function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(DummyForm, null)).toJSON();
+it("renders correctly", () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(DummyForm, null)).toJSON();
   expect(tree).toMatchSnapshot();
 });

package/dist/components/Organisms/EmailSignUp/EmailSignUpForm.js

@@ -1,65 +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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _reactHookForm = require("react-hook-form");
 var _yup = require("@hookform/resolvers/yup");
 var _RichText = _interopRequireDefault(require("../../Atoms/RichText/RichText"));
 var _EmailSignUp = require("./_EmailSignUp");
-var EmailSignUpForm = function EmailSignUpForm() {
-  var validationSchema = (0, _EmailSignUp.buildEsuValidationSchema)({});
-  var formMethods = (0, _reactHookForm.useForm)({
+const EmailSignUpForm = () => {
+  const validationSchema = (0, _EmailSignUp.buildEsuValidationSchema)({});
+  const formMethods = (0, _reactHookForm.useForm)({
     mode: 'onBlur',
     resolver: (0, _yup.yupResolver)(validationSchema)
   });
-  var handleSubmit = formMethods.handleSubmit,
-    trigger = formMethods.trigger,
-    setError = formMethods.setError;
-  function handleSubscribe(_x) {
-    return _handleSubscribe.apply(this, arguments);
+  const {
+    handleSubmit,
+    trigger,
+    setError
+  } = formMethods;
+  async function handleSubscribe(data) {
+    const valid = await trigger([_EmailSignUp.ESU_FIELDS.EMAIL, _EmailSignUp.ESU_FIELDS.FIRST_NAME, _EmailSignUp.ESU_FIELDS.LAST_NAME]);
+    if (valid) {
+      // eslint-disable-next-line no-console
+      console.log(data);
+    } else {
+      setError('formError', {
+        message: 'Error'
+      });
+    }
   }
-  function _handleSubscribe() {
-    _handleSubscribe = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(data) {
-      var valid;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return trigger([_EmailSignUp.ESU_FIELDS.EMAIL, _EmailSignUp.ESU_FIELDS.FIRST_NAME, _EmailSignUp.ESU_FIELDS.LAST_NAME]);
-            case 2:
-              valid = _context.sent;
-              if (valid) {
-                // eslint-disable-next-line no-console
-                console.log(data);
-              } else {
-                setError('formError', {
-                  message: 'Error'
-                });
-              }
-            case 4:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-    return _handleSubscribe.apply(this, arguments);
-  }
-  var title = 'Stay in the know!';
-  var topCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
+  const title = 'Stay in the know!';
+  const topCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
     markup: "<p>Get regular email updates and info on what we're up to!</p>"
   });
-  var privacyCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
+  const privacyCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
     markup: '<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>'
   });
-  var successCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
+  const successCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
     markup: "<p>Thanks! Your first email will be with you shortly</p>"
   });
   return /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, formMethods, /*#__PURE__*/_react.default.createElement("form", {