@comicrelief/component-library 7.24.1 → 7.25.0

package/dist/components/Organisms/Header/Nav/Nav.js

@@ -1,12 +1,11 @@
 "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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
 var _BurgerMenu = _interopRequireDefault(require("../Burger/BurgerMenu"));
@@ -16,53 +15,45 @@ var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
 var _allowListed = _interopRequireDefault(require("../../../../utils/allowListed"));
 var _chevronDown = _interopRequireDefault(require("./chevron-down.svg"));
 var _Nav = require("./Nav.style");
-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 MainNav = function MainNav(_ref) {
-  var navItems = _ref.navItems;
-  var menuGroups = navItems.menuGroups;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isExpandable = _useState2[0],
-    setIsExpandable = _useState2[1];
-  var _useState3 = (0, _react.useState)({}),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isSubMenuOpen = _useState4[0],
-    setIsSubMenuOpen = _useState4[1];
-  var _useState5 = (0, _react.useState)({}),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isKeyPressed = _useState6[0],
-    setIsKeyPressed = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    isMobile = _useState8[0],
-    setIsMobile = _useState8[1];
-  var toggleBurgerMenu = function toggleBurgerMenu(event) {
+const MainNav = _ref => {
+  let {
+    navItems
+  } = _ref;
+  const {
+    menuGroups
+  } = navItems;
+  const [isExpandable, setIsExpandable] = (0, _react.useState)(false);
+  const [isSubMenuOpen, setIsSubMenuOpen] = (0, _react.useState)({});
+  const [isKeyPressed, setIsKeyPressed] = (0, _react.useState)({});
+  const [isMobile, setIsMobile] = (0, _react.useState)(false);
+  const toggleBurgerMenu = event => {
     event.preventDefault();
     setIsExpandable(!isExpandable);
   };
-  var toggleSubMenu = function toggleSubMenu(e, item) {
+  const toggleSubMenu = (e, item) => {
     e.preventDefault();
-    setIsSubMenuOpen((0, _defineProperty2.default)({}, item, !isSubMenuOpen[item]));
+    setIsSubMenuOpen({
+      [item]: !isSubMenuOpen[item]
+    });
   };
 
   // Handle tab key on menu nav
-  var keyPressed = function keyPressed(item) {
-    return function () {
-      window.onkeyup = function (e) {
-        if (e.target.querySelector('span') && e.target.querySelector('span').innerText === item) {
-          setIsKeyPressed((0, _defineProperty2.default)({}, item, !isKeyPressed[item]));
-        } else if (!e.target.querySelector('span')) {
-          setIsKeyPressed({});
-        }
-      };
+  const keyPressed = item => () => {
+    window.onkeyup = e => {
+      if (e.target.querySelector('span') && e.target.querySelector('span').innerText === item) {
+        setIsKeyPressed({
+          [item]: !isKeyPressed[item]
+        });
+      } else if (!e.target.querySelector('span')) {
+        setIsKeyPressed({});
+      }
     };
   };
-  (0, _react.useEffect)(function () {
-    var width = window.innerWidth;
+  (0, _react.useEffect)(() => {
+    const width = window.innerWidth;
     setIsMobile(width < _breakpoint.sizes.nav);
     window.addEventListener('onkeyup', setIsKeyPressed);
-    return function () {
+    return () => {
       window.removeEventListener('onkeyup', setIsKeyPressed);
     };
   }, []);
@@ -75,15 +66,15 @@ var MainNav = function MainNav(_ref) {
     tag: "h2"
   }, "Main navigation"), /*#__PURE__*/_react.default.createElement(_Nav.NavMenu, {
     role: "menubar"
-  }, menuGroups.map(function (group, index) {
+  }, menuGroups.map((group, index) => {
     /* Grab the first links properties to use for our parent/button */
-    var thisFirstChild = group.links[0];
+    const thisFirstChild = group.links[0];
 
     /* Determine which field represents our url path */
-    var thisUrl = (0, _navHelper.default)(thisFirstChild);
-    var relNoopener = !(0, _allowListed.default)(thisUrl) && 'noopener';
-    var hasSubMenu = group.links && group.links.length > 1;
-    var hasPopUp = hasSubMenu ? 'true' : null;
+    let thisUrl = (0, _navHelper.default)(thisFirstChild);
+    const relNoopener = !(0, _allowListed.default)(thisUrl) && 'noopener';
+    const hasSubMenu = group.links && group.links.length > 1;
+    const hasPopUp = hasSubMenu ? 'true' : null;
     thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);
     return /*#__PURE__*/_react.default.createElement(_Nav.NavItem, {
       role: "none",
@@ -96,9 +87,7 @@ var MainNav = function MainNav(_ref) {
       rel: relNoopener,
       "aria-expanded": !!isSubMenuOpen[group.id],
       "aria-haspopup": hasPopUp,
-      onClick: hasPopUp ? function (e) {
-        return toggleSubMenu(e, group.id);
-      } : null,
+      onClick: hasPopUp ? e => toggleSubMenu(e, group.id) : null,
       onKeyUp: keyPressed(group.title),
       role: "button"
     }, thisFirstChild.title, hasSubMenu && /*#__PURE__*/_react.default.createElement(_Nav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
@@ -117,8 +106,8 @@ var MainNav = function MainNav(_ref) {
       role: "list",
       isKeyPressed: !!isKeyPressed[group.title],
       isSubMenuOpen: !!isSubMenuOpen[group.id]
-    }, group.links.map(function (child, childIndex) {
-      var thisSubUrl = (0, _navHelper.default)(child);
+    }, group.links.map((child, childIndex) => {
+      let thisSubUrl = (0, _navHelper.default)(child);
       thisSubUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisSubUrl);
 
       /* Wrap our first child item with special tags */

package/dist/components/Organisms/Header/Nav/Nav.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,144 +10,190 @@ var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
 var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
 var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
 var _size = require("../../../../theme/shared/size");
-var NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
+const NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "Navstyle__NavLinkClass",
   componentId: "sc-1ss3uk2-0"
-})(["display:inline-block;border:0;padding:17px 20px;line-height:1.3rem;height:46px;font-weight:700;width:100%;color:", ";:hover{border:0;color:", ";font-weight:inherit;}"], function (_ref) {
-  var theme = _ref.theme;
+})(["display:inline-block;border:0;padding:17px 20px;line-height:1.3rem;height:46px;font-weight:700;width:100%;color:", ";:hover{border:0;color:", ";font-weight:inherit;}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('deep_violet_dark');
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.color('deep_violet_dark');
 });
 
 /**
  * Navigation menu
  */
-var Nav = exports.Nav = _styledComponents.default.nav.withConfig({
+const Nav = exports.Nav = _styledComponents.default.nav.withConfig({
   displayName: "Navstyle__Nav",
   componentId: "sc-1ss3uk2-1"
-})(["display:", ";width:100%;position:absolute;top:75px;left:0;", ";@media (min-width:", "){width:50%;right:0;left:inherit;}@media ", "{", ";position:relative;top:0;display:block;margin:0 10px;width:auto;height:100%;}> h2{", ";}"], function (_ref3) {
-  var isExpandable = _ref3.isExpandable;
+})(["display:", ";width:100%;position:absolute;top:75px;left:0;", ";@media (min-width:", "){width:50%;right:0;left:inherit;}@media ", "{", ";position:relative;top:0;display:block;margin:0 10px;width:auto;height:100%;}> h2{", ";}"], _ref3 => {
+  let {
+    isExpandable
+  } = _ref3;
   return isExpandable ? 'block' : 'none';
-}, (0, _zIndex.default)('higher'), _size.screen.small, function (_ref4) {
-  var theme = _ref4.theme;
+}, (0, _zIndex.default)('higher'), _size.screen.small, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoint('nav');
 }, (0, _zIndex.default)('medium'), _hideVisually.default);
 
 /**
  * Sub Navigation Menu (second level)
  */
-var SubNavMenu = exports.SubNavMenu = _styledComponents.default.ul.withConfig({
+const SubNavMenu = exports.SubNavMenu = _styledComponents.default.ul.withConfig({
   displayName: "Navstyle__SubNavMenu",
   componentId: "sc-1ss3uk2-2"
-})(["display:", ";padding:0;position:relative;list-style:none outside;left:0;top:0;flex-direction:column;justify-content:center;align-items:center;background-color:", ";@media ", "{display:none;display:", ";top:90px;position:absolute;padding:0 0 20px;width:250px;height:auto;}"], function (_ref5) {
-  var isSubMenuOpen = _ref5.isSubMenuOpen;
+})(["display:", ";padding:0;position:relative;list-style:none outside;left:0;top:0;flex-direction:column;justify-content:center;align-items:center;background-color:", ";@media ", "{display:none;display:", ";top:90px;position:absolute;padding:0 0 20px;width:250px;height:auto;}"], _ref5 => {
+  let {
+    isSubMenuOpen
+  } = _ref5;
   return isSubMenuOpen ? 'flex' : 'none';
-}, function (_ref6) {
-  var theme = _ref6.theme;
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.color('deep_violet_dark');
-}, function (_ref7) {
-  var theme = _ref7.theme;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
   return theme.breakpoint('nav');
-}, function (_ref8) {
-  var isKeyPressed = _ref8.isKeyPressed;
+}, _ref8 => {
+  let {
+    isKeyPressed
+  } = _ref8;
   return isKeyPressed ? 'flex' : 'none';
 });
 
 /**
  * Sub Menu list items
  */
-var SubNavItem = exports.SubNavItem = _styledComponents.default.li.withConfig({
+const SubNavItem = exports.SubNavItem = _styledComponents.default.li.withConfig({
   displayName: "Navstyle__SubNavItem",
   componentId: "sc-1ss3uk2-3"
-})(["padding:0;height:100%;width:100%;:hover{background-color:", ";span{border-bottom:0;padding-bottom:2px;color:", ";}}"], function (_ref9) {
-  var theme = _ref9.theme;
+})(["padding:0;height:100%;width:100%;:hover{background-color:", ";span{border-bottom:0;padding-bottom:2px;color:", ";}}"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
   return theme.color('deep_violet_light');
-}, function (_ref10) {
-  var theme = _ref10.theme;
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
   return theme.color('white');
 });
 
 /**
  * Sub menu link item
  */
-var SubNavLink = exports.SubNavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
+const SubNavLink = exports.SubNavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   displayName: "Navstyle__SubNavLink",
   componentId: "sc-1ss3uk2-4"
-})(["padding:14px 14px 7px 21px;color:", ";height:auto;position:relative;"], function (_ref11) {
-  var theme = _ref11.theme;
+})(["padding:14px 14px 7px 21px;color:", ";height:auto;position:relative;"], _ref11 => {
+  let {
+    theme
+  } = _ref11;
   return theme.color('white');
 });
 
 /**
  * Sub menu link item underline
  */
-var SubNavLinkUnderline = exports.SubNavLinkUnderline = (0, _styledComponents.default)(SubNavLink).withConfig({
+const SubNavLinkUnderline = exports.SubNavLinkUnderline = (0, _styledComponents.default)(SubNavLink).withConfig({
   displayName: "Navstyle__SubNavLinkUnderline",
   componentId: "sc-1ss3uk2-5"
-})(["padding:26px 21px;::after{content:'';position:absolute;width:14px;border-bottom:2px solid ", ";left:12px;top:auto;bottom:10px;margin:0 10px;}@media ", "{::before{display:block;position:absolute;content:'';left:34px;width:10px;height:10px;border:11px solid transparent;border-bottom-color:", ";top:-22px;}:hover::before{border-bottom-color:", ";}}"], function (_ref12) {
-  var theme = _ref12.theme;
+})(["padding:26px 21px;::after{content:'';position:absolute;width:14px;border-bottom:2px solid ", ";left:12px;top:auto;bottom:10px;margin:0 10px;}@media ", "{::before{display:block;position:absolute;content:'';left:34px;width:10px;height:10px;border:11px solid transparent;border-bottom-color:", ";top:-22px;}:hover::before{border-bottom-color:", ";}}"], _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.color('white');
-}, function (_ref13) {
-  var theme = _ref13.theme;
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
   return theme.breakpoint('nav');
-}, function (_ref14) {
-  var theme = _ref14.theme;
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
   return theme.color('deep_violet_dark');
-}, function (_ref15) {
-  var theme = _ref15.theme;
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
   return theme.color('deep_violet_light');
 });
 
 /**
  * Navigation Menu (first level)
  */
-var NavMenu = exports.NavMenu = _styledComponents.default.ul.withConfig({
+const NavMenu = exports.NavMenu = _styledComponents.default.ul.withConfig({
   displayName: "Navstyle__NavMenu",
   componentId: "sc-1ss3uk2-6"
-})(["background-color:", ";list-style:none outside;padding:0;margin:0;@media ", "{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;background-color:", ";}"], function (_ref16) {
-  var theme = _ref16.theme;
+})(["background-color:", ";list-style:none outside;padding:0;margin:0;@media ", "{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;background-color:", ";}"], _ref16 => {
+  let {
+    theme
+  } = _ref16;
   return theme.color('grey_extra_light');
-}, function (_ref17) {
-  var theme = _ref17.theme;
+}, _ref17 => {
+  let {
+    theme
+  } = _ref17;
   return theme.breakpoint('nav');
-}, function (_ref18) {
-  var theme = _ref18.theme;
+}, _ref18 => {
+  let {
+    theme
+  } = _ref18;
   return theme.color('white');
 });
 
 /**
  * Menu item link
  */
-var NavLink = exports.NavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
+const NavLink = exports.NavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   displayName: "Navstyle__NavLink",
   componentId: "sc-1ss3uk2-7"
-})(["display:flex;gap:4px;font-family:", ";@media ", "{padding:10px 0;height:auto;:focus + ", "{display:flex;}}"], function (_ref19) {
-  var theme = _ref19.theme;
+})(["display:flex;gap:4px;font-family:", ";@media ", "{padding:10px 0;height:auto;:focus + ", "{display:flex;}}"], _ref19 => {
+  let {
+    theme
+  } = _ref19;
   return theme.fontFamilies(theme.font.regular);
-}, function (_ref20) {
-  var theme = _ref20.theme;
+}, _ref20 => {
+  let {
+    theme
+  } = _ref20;
   return theme.breakpoint('nav');
 }, SubNavMenu);
 
 /**
  * Menu list items
  */
-var NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
+const NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
   displayName: "Navstyle__NavItem",
   componentId: "sc-1ss3uk2-8"
-})(["", ";position:relative;font-weight:700;:hover{li{span{border-bottom:none;padding-bottom:0;}}}li{span{border-bottom:none;padding-bottom:0;}:hover{span{border-bottom:none;padding-bottom:0;}}}:hover{background-color:", ";}@media ", "{margin:0 4px;padding:25px 5px;:hover > ", ",:focus-within > ", "{visibility:visible;opacity:1;display:flex;}:hover{background-color:transparent;", ";span{border-bottom:2px solid ", ";padding-bottom:2px;}", "{display:flex;flex-direction:column;}}}"], (0, _zIndex.default)('medium'), function (_ref21) {
-  var theme = _ref21.theme;
+})(["", ";position:relative;font-weight:700;:hover{li{span{border-bottom:none;padding-bottom:0;}}}li{span{border-bottom:none;padding-bottom:0;}:hover{span{border-bottom:none;padding-bottom:0;}}}:hover{background-color:", ";}@media ", "{margin:0 4px;padding:25px 5px;:hover > ", ",:focus-within > ", "{visibility:visible;opacity:1;display:flex;}:hover{background-color:transparent;", ";span{border-bottom:2px solid ", ";padding-bottom:2px;}", "{display:flex;flex-direction:column;}}}"], (0, _zIndex.default)('medium'), _ref21 => {
+  let {
+    theme
+  } = _ref21;
   return theme.color('teal_light');
-}, function (_ref22) {
-  var theme = _ref22.theme;
+}, _ref22 => {
+  let {
+    theme
+  } = _ref22;
   return theme.breakpoint('nav');
-}, SubNavMenu, SubNavMenu, (0, _zIndex.default)('high'), function (_ref23) {
-  var theme = _ref23.theme;
+}, SubNavMenu, SubNavMenu, (0, _zIndex.default)('high'), _ref23 => {
+  let {
+    theme
+  } = _ref23;
   return theme.color('black');
 }, SubNavMenu);
-var ChevronWrapper = exports.ChevronWrapper = _styledComponents.default.div.withConfig({
+const ChevronWrapper = exports.ChevronWrapper = _styledComponents.default.div.withConfig({
   displayName: "Navstyle__ChevronWrapper",
   componentId: "sc-1ss3uk2-9"
 })(["width:12px;padding-top:2px;"]);

package/dist/components/Organisms/Header/header.test.js

@@ -9,7 +9,7 @@ require("jest-styled-components");
 
 // import data from './data/data';
 // import Link from '../../Atoms/Link/Link';
-it('renders correctly', function () {
+it('renders correctly', () => {
   // const tree = renderWithTheme(
   //   <Header
   //     navItems={data}

package/dist/components/Organisms/ImpactSlider/ImpactMoneybuys.style.js

@@ -1,61 +1,64 @@
 "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.OrLabel = exports.MoneybuyWrapper = exports.MoneybuyImage = exports.MoneybuyDescription = exports.MoneybuyAmount = exports.Moneybuy = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
-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 MoneybuyWrapper = exports.MoneybuyWrapper = _styledComponents.default.div.withConfig({
+const MoneybuyWrapper = exports.MoneybuyWrapper = _styledComponents.default.div.withConfig({
   displayName: "ImpactMoneybuysstyle__MoneybuyWrapper",
   componentId: "sc-1lsmpzi-0"
-})(["margin-top:32px;width:100%;display:flex;align-content:space-between;flex-direction:column;justify-content:space-between;align-items:center;@media ", "{flex-direction:row;align-items:stretch;}"], function (_ref) {
-  var theme = _ref.theme;
+})(["margin-top:32px;width:100%;display:flex;align-content:space-between;flex-direction:column;justify-content:space-between;align-items:center;@media ", "{flex-direction:row;align-items:stretch;}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.breakpoint('medium');
 });
-var Moneybuy = exports.Moneybuy = _styledComponents.default.div.withConfig({
+const Moneybuy = exports.Moneybuy = _styledComponents.default.div.withConfig({
   displayName: "ImpactMoneybuysstyle__Moneybuy",
   componentId: "sc-1lsmpzi-1"
-})(["display:inherit;width:100%;padding:8px 20px;height:auto;background-color:white;border-radius:10px;border:1px solid ", ";position:relative;flex-direction:row;align-items:center;justify-content:flex-start;opacity:1;", " @media ", "{width:70%;padding:8px 40px;}@media ", "{padding:20px 14px;flex-direction:column;width:18%;max-height:none;}"], function (props) {
-  return props.theme.color('black');
-}, function (props) {
-  return props.isInactive && (0, _styledComponents.css)(["opacity:0.5;"]);
-}, function (_ref2) {
-  var theme = _ref2.theme;
+})(["display:inherit;width:100%;padding:8px 20px;height:auto;background-color:white;border-radius:10px;border:1px solid ", ";position:relative;flex-direction:row;align-items:center;justify-content:flex-start;opacity:1;", " @media ", "{width:70%;padding:8px 40px;}@media ", "{padding:20px 14px;flex-direction:column;width:18%;max-height:none;}"], props => props.theme.color('black'), props => props.isInactive && (0, _styledComponents.css)(["opacity:0.5;"]), _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.breakpoint('small');
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.breakpoint('medium');
 });
-var OrLabel = exports.OrLabel = (0, _styledComponents.default)(_Text.default).withConfig({
+const OrLabel = exports.OrLabel = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "ImpactMoneybuysstyle__OrLabel",
   componentId: "sc-1lsmpzi-2"
 })(["display:inherit;align-items:center;margin:8px 0;font-size:14px;"]);
-var MoneybuyImage = exports.MoneybuyImage = _styledComponents.default.span.withConfig({
+const MoneybuyImage = exports.MoneybuyImage = _styledComponents.default.span.withConfig({
   displayName: "ImpactMoneybuysstyle__MoneybuyImage",
   componentId: "sc-1lsmpzi-3"
-})(["background:center / 65% no-repeat url(\"", "\"),", ";width:48px;height:48px;border-radius:48px;@media ", "{width:0;height:0;padding:30%;border-radius:100%;}"], function (props) {
-  return props.imageURL;
-}, function (props) {
-  return props.theme.color('grey_extra_light');
-}, function (_ref4) {
-  var theme = _ref4.theme;
+})(["background:center / 65% no-repeat url(\"", "\"),", ";width:48px;height:48px;border-radius:48px;@media ", "{width:0;height:0;padding:30%;border-radius:100%;}"], props => props.imageURL, props => props.theme.color('grey_extra_light'), _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoint('medium');
 });
-var MoneybuyAmount = exports.MoneybuyAmount = (0, _styledComponents.default)(_Text.default).withConfig({
+const MoneybuyAmount = exports.MoneybuyAmount = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "ImpactMoneybuysstyle__MoneybuyAmount",
   componentId: "sc-1lsmpzi-4"
-})(["text-align:center;margin:0 10px;width:25%;@media ", "{margin:8px 15px 2px;width:auto;}"], function (_ref5) {
-  var theme = _ref5.theme;
+})(["text-align:center;margin:0 10px;width:25%;@media ", "{margin:8px 15px 2px;width:auto;}"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.breakpoint('medium');
 });
-var MoneybuyDescription = exports.MoneybuyDescription = (0, _styledComponents.default)(_Text.default).withConfig({
+const MoneybuyDescription = exports.MoneybuyDescription = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "ImpactMoneybuysstyle__MoneybuyDescription",
   componentId: "sc-1lsmpzi-5"
-})(["text-align:left;width:50%;@media ", "{width:100%;text-align:center;}"], function (_ref6) {
-  var theme = _ref6.theme;
+})(["text-align:left;width:50%;@media ", "{width:100%;text-align:center;}"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.breakpoint('medium');
 });

package/dist/components/Organisms/ImpactSlider/ImpactSlider.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 _react = _interopRequireWildcard(require("react"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _Slider = _interopRequireDefault(require("./_Slider"));
 var _ImpactMoneybuys = _interopRequireDefault(require("./_ImpactMoneybuys"));
 var _utils = _interopRequireDefault(require("./_utils"));
 var _ImpactSlider = require("./ImpactSlider.style");
-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 ImpactSlider = function ImpactSlider(_ref) {
-  var heading = _ref.heading,
-    cartID = _ref.cartID,
-    donateLink = _ref.donateLink,
-    rowID = _ref.rowID,
-    items = _ref.items,
-    step = _ref.step,
-    max = _ref.max,
-    backgroundColour = _ref.backgroundColour,
-    opacityAnimation = _ref.opacityAnimation,
-    children = _ref.children,
-    defaultSliderValue = _ref.defaultSliderValue;
+const ImpactSlider = _ref => {
+  let {
+    heading,
+    cartID,
+    donateLink,
+    rowID,
+    items,
+    step,
+    max,
+    backgroundColour,
+    opacityAnimation,
+    children,
+    defaultSliderValue
+  } = _ref;
   // Use the lowest possible amount as our default:
-  var _useState = (0, _react.useState)(defaultSliderValue || step),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    currentAmount = _useState2[0],
-    setCurrentAmount = _useState2[1];
-  var handleChange = function handleChange(thisValue) {
+  const [currentAmount, setCurrentAmount] = (0, _react.useState)(defaultSliderValue || step);
+  const handleChange = thisValue => {
     if (thisValue) {
       // Return the value of the 'thumb' we care about:
       setCurrentAmount(thisValue[1]);
     }
   };
-  var handleSubmit = function handleSubmit() {
+  const handleSubmit = () => {
     (0, _utils.default)(currentAmount, donateLink, cartID, rowID);
   };
   return /*#__PURE__*/_react.default.createElement(_ImpactSlider.OuterWrapper, {