@comicrelief/component-library 7.24.1 → 7.25.0

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

@@ -1,41 +1,32 @@
 "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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
 var _breakpoint = require("../../../../theme/shared/breakpoint");
 var _navHelper = _interopRequireDefault(require("../../../../utils/navHelper"));
 var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
 var _Nav = require("./Nav.style");
-var _excluded = ["navItems"];
-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 FooterNav = function FooterNav(_ref) {
-  var navItems = _ref.navItems,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var menuGroups = navItems.menuGroups;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-    isExpandable = _useState2[0];
-  var _useState3 = (0, _react.useState)({}),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isSubMenuOpen = _useState4[0],
-    setIsSubMenuOpen = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isSmallBreakpoint = _useState6[0],
-    setIsSmallBreakpoint = _useState6[1];
+const FooterNav = _ref => {
+  let {
+    navItems,
+    ...rest
+  } = _ref;
+  const {
+    menuGroups
+  } = navItems;
+  const [isExpandable] = (0, _react.useState)(false);
+  const [isSubMenuOpen, setIsSubMenuOpen] = (0, _react.useState)({});
+  const [isSmallBreakpoint, setIsSmallBreakpoint] = (0, _react.useState)(false);
 
   // Detect window screen size when screen is resized
-  var resize = function resize() {
-    var screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
+  const resize = () => {
+    const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
     if (screenSize !== null) {
       setIsSmallBreakpoint(screenSize < parseFloat(_breakpoint.sizes.small));
     }
@@ -47,18 +38,18 @@ var FooterNav = function FooterNav(_ref) {
    * Always stop the main 'parent' link from actually firing, but do the
    * collapsing for SM-MD breakpoints
    */
-  var toggleSubMenu = function toggleSubMenu(item) {
-    return function (event) {
-      event.preventDefault();
-      // Only run on SM, as we're only using the hide-show logic on SM
-      if (isSmallBreakpoint) {
-        setIsSubMenuOpen((0, _defineProperty2.default)({}, item, !isSubMenuOpen[item]));
-      }
-    };
+  const toggleSubMenu = item => event => {
+    event.preventDefault();
+    // Only run on SM, as we're only using the hide-show logic on SM
+    if (isSmallBreakpoint) {
+      setIsSubMenuOpen({
+        [item]: !isSubMenuOpen[item]
+      });
+    }
   };
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     // Detect window screen size when page load
-    var width = typeof window !== 'undefined' ? window.innerWidth : null;
+    const width = typeof window !== 'undefined' ? window.innerWidth : null;
     setIsSmallBreakpoint(width < parseFloat(_breakpoint.sizes.small));
   }, []);
   return /*#__PURE__*/_react.default.createElement(_Nav.Nav, {
@@ -70,45 +61,43 @@ var FooterNav = function FooterNav(_ref) {
     tag: "h2"
   }, "Footer navigation"), /*#__PURE__*/_react.default.createElement(_Nav.NavMenu, {
     role: "menubar"
-  }, menuGroups.map(function (group, index) {
-    return /*#__PURE__*/_react.default.createElement(_Nav.NavItem, {
-      role: "none",
-      key: group.id,
-      index: index,
-      isSubMenuOpen: !!isSubMenuOpen[group.id]
-    }, !isSmallBreakpoint ? /*#__PURE__*/_react.default.createElement(_Text.default, {
-      color: "white",
-      weight: "bold"
-    }, group.title) : /*#__PURE__*/_react.default.createElement(_Nav.NavLink, Object.assign({
-      href: "#",
+  }, menuGroups.map((group, index) => /*#__PURE__*/_react.default.createElement(_Nav.NavItem, {
+    role: "none",
+    key: group.id,
+    index: index,
+    isSubMenuOpen: !!isSubMenuOpen[group.id]
+  }, !isSmallBreakpoint ? /*#__PURE__*/_react.default.createElement(_Text.default, {
+    color: "white",
+    weight: "bold"
+  }, group.title) : /*#__PURE__*/_react.default.createElement(_Nav.NavLink, Object.assign({
+    href: "#",
+    inline: true,
+    "aria-expanded": !!isSubMenuOpen[group.id],
+    "aria-haspopup": "true",
+    role: "button",
+    onClick: toggleSubMenu(group.id)
+  }, rest), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    color: "white"
+  }, group.title)), group.links && group.links.length > 0 && /*#__PURE__*/_react.default.createElement(_Nav.SubNavMenu, {
+    role: "list",
+    "aria-label": group.title,
+    isSubMenuOpen: !!isSubMenuOpen[group.id],
+    column: group.links.length % 2 === 0 && group.links.length > 2
+  }, group.links.map(child => {
+    /* Determine which field represents our url path */
+    let thisUrl = (0, _navHelper.default)(child);
+    thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);
+    return /*#__PURE__*/_react.default.createElement(_Nav.SubNavItem, {
+      key: thisUrl,
+      column: group.links.length % 2 === 0 && group.links.length > 2
+    }, /*#__PURE__*/_react.default.createElement(_Nav.SubNavLink, Object.assign({
+      href: thisUrl,
       inline: true,
-      "aria-expanded": !!isSubMenuOpen[group.id],
-      "aria-haspopup": "true",
-      role: "button",
-      onClick: toggleSubMenu(group.id)
+      role: "menuitem"
     }, rest), /*#__PURE__*/_react.default.createElement(_Text.default, {
       color: "white"
-    }, group.title)), group.links && group.links.length > 0 && /*#__PURE__*/_react.default.createElement(_Nav.SubNavMenu, {
-      role: "list",
-      "aria-label": group.title,
-      isSubMenuOpen: !!isSubMenuOpen[group.id],
-      column: group.links.length % 2 === 0 && group.links.length > 2
-    }, group.links.map(function (child) {
-      /* Determine which field represents our url path */
-      var thisUrl = (0, _navHelper.default)(child);
-      thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);
-      return /*#__PURE__*/_react.default.createElement(_Nav.SubNavItem, {
-        key: thisUrl,
-        column: group.links.length % 2 === 0 && group.links.length > 2
-      }, /*#__PURE__*/_react.default.createElement(_Nav.SubNavLink, Object.assign({
-        href: thisUrl,
-        inline: true,
-        role: "menuitem"
-      }, rest), /*#__PURE__*/_react.default.createElement(_Text.default, {
-        color: "white"
-      }, child.title)));
-    })));
-  })));
+    }, child.title)));
+  }))))));
 };
 FooterNav.defaultProps = {
   navItems: {}

package/dist/components/Organisms/Footer/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
 });
@@ -8,18 +8,20 @@ exports.SubNavMenu = exports.SubNavLink = exports.SubNavItem = exports.NavMenu =
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
 var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
-var NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
+const NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "Navstyle__NavLinkClass",
   componentId: "sc-uzf5hs-0"
-})(["border:0;height:46px;width:100%;background-color:", ";&:hover,&:focus{border-bottom:none;}"], function (_ref) {
-  var theme = _ref.theme;
+})(["border:0;height:46px;width:100%;background-color:", ";&:hover,&:focus{border-bottom:none;}"], _ref => {
+  let {
+    theme
+  } = _ref;
   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-uzf5hs-1"
 })(["display:block;width:100%;text-align:left;> h2{", ";}"], _hideVisually.default);
@@ -27,47 +29,63 @@ var Nav = exports.Nav = _styledComponents.default.nav.withConfig({
 /**
  * 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-uzf5hs-2"
-})(["display:flex;transition:max-height 0.5s ease;max-height:", ";overflow:hidden;padding:0;position:relative;list-style:none outside;flex-direction:column;> li a{display:", ";font-size:15px;font-weight:500;cursor:pointer;&:after{content:none;}}@media ", "{max-height:none;height:auto;", ";> li a{display:inline;line-height:24px;}}"], function (_ref2) {
-  var isSubMenuOpen = _ref2.isSubMenuOpen;
+})(["display:flex;transition:max-height 0.5s ease;max-height:", ";overflow:hidden;padding:0;position:relative;list-style:none outside;flex-direction:column;> li a{display:", ";font-size:15px;font-weight:500;cursor:pointer;&:after{content:none;}}@media ", "{max-height:none;height:auto;", ";> li a{display:inline;line-height:24px;}}"], _ref2 => {
+  let {
+    isSubMenuOpen
+  } = _ref2;
   return isSubMenuOpen ? '400px' : '0px';
-}, function (_ref3) {
-  var isSubMenuOpen = _ref3.isSubMenuOpen;
+}, _ref3 => {
+  let {
+    isSubMenuOpen
+  } = _ref3;
   return isSubMenuOpen ? 'inline' : 'none';
-}, function (_ref4) {
-  var theme = _ref4.theme;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoint('small');
-}, function (_ref5) {
-  var column = _ref5.column;
+}, _ref5 => {
+  let {
+    column
+  } = _ref5;
   return column === true ? 'flex-direction: row; flex-wrap: wrap;' : null;
 });
 
 /**
  * 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-uzf5hs-3"
-})(["height:40px;width:100%;background-color:inherit;padding:8px 0;@media ", "{height:auto;margin-top:12px;padding:0;", ";a{background-color:inherit;height:auto;&:after{content:none !important;}&:hover,&:focus{border-bottom:2px solid #fff;span{border-bottom:0;padding-bottom:2px;}}}}@media ", "{", ";}"], function (_ref6) {
-  var theme = _ref6.theme;
+})(["height:40px;width:100%;background-color:inherit;padding:8px 0;@media ", "{height:auto;margin-top:12px;padding:0;", ";a{background-color:inherit;height:auto;&:after{content:none !important;}&:hover,&:focus{border-bottom:2px solid #fff;span{border-bottom:0;padding-bottom:2px;}}}}@media ", "{", ";}"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.breakpoint('small');
-}, function (_ref7) {
-  var column = _ref7.column;
+}, _ref7 => {
+  let {
+    column
+  } = _ref7;
   return column === true ? 'flex: 0 0 100%;' : null;
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.breakpoint('medium');
-}, function (_ref9) {
-  var column = _ref9.column;
+}, _ref9 => {
+  let {
+    column
+  } = _ref9;
   return column === true ? 'flex: 0 0 100%;' : null;
 });
 
 /**
  * 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-uzf5hs-4"
 })(["padding:14px 21px;height:auto;position:relative;"]);
@@ -75,18 +93,20 @@ var SubNavLink = exports.SubNavLink = (0, _styledComponents.default)(NavLinkClas
 /**
  * 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-uzf5hs-5"
-})(["background-color:inherit;list-style:none outside;padding:0;margin:0;@media ", "{display:flex;flex-wrap:wrap;justify-content:start;}"], function (_ref10) {
-  var theme = _ref10.theme;
+})(["background-color:inherit;list-style:none outside;padding:0;margin:0;@media ", "{display:flex;flex-wrap:wrap;justify-content:start;}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
   return theme.breakpoint('small');
 });
 
 /**
  * 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-uzf5hs-6"
 })([""]);
@@ -94,28 +114,42 @@ var NavLink = exports.NavLink = (0, _styledComponents.default)(NavLinkClass).wit
 /**
  * Menu list items
  */
-var NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
+const NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
   displayName: "Navstyle__NavItem",
   componentId: "sc-uzf5hs-7"
-})(["position:relative;font-weight:700;margin:0;margin-bottom:1rem;@media ", "{flex:0 0 30%;margin:0;}@media ", "{flex:0 0 calc(25% - 1rem);margin-right:1rem;margin-bottom:1rem;> span{padding:0;}}a{width:auto;padding:0;height:auto;position:relative;background-color:inherit;font-size:19px;line-height:40px;font-weight:800;@media ", "{font-size:20px;line-height:40px;}&:after{content:'\\2303';position:absolute;font-family:Arial;margin-left:4px;overflow:hidden;line-height:19px;font-size:23px;color:", ";font-weight:100;transition:transform 0.2s ease;transform:", ";top:", ";right:-25px;}@media ", "{cursor:default;display:inline;&:after{content:none;}}}"], function (_ref11) {
-  var theme = _ref11.theme;
+})(["position:relative;font-weight:700;margin:0;margin-bottom:1rem;@media ", "{flex:0 0 30%;margin:0;}@media ", "{flex:0 0 calc(25% - 1rem);margin-right:1rem;margin-bottom:1rem;> span{padding:0;}}a{width:auto;padding:0;height:auto;position:relative;background-color:inherit;font-size:19px;line-height:40px;font-weight:800;@media ", "{font-size:20px;line-height:40px;}&:after{content:'\\2303';position:absolute;font-family:Arial;margin-left:4px;overflow:hidden;line-height:19px;font-size:23px;color:", ";font-weight:100;transition:transform 0.2s ease;transform:", ";top:", ";right:-25px;}@media ", "{cursor:default;display:inline;&:after{content:none;}}}"], _ref11 => {
+  let {
+    theme
+  } = _ref11;
   return theme.breakpoint('small');
-}, function (_ref12) {
-  var theme = _ref12.theme;
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.breakpoint('medium');
-}, function (_ref13) {
-  var theme = _ref13.theme;
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
   return theme.breakpoint('small');
-}, function (_ref14) {
-  var theme = _ref14.theme;
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
   return theme.color('white');
-}, function (_ref15) {
-  var isSubMenuOpen = _ref15.isSubMenuOpen;
+}, _ref15 => {
+  let {
+    isSubMenuOpen
+  } = _ref15;
   return isSubMenuOpen ? 'rotate(0deg)' : 'rotate(180deg)';
-}, function (_ref16) {
-  var isSubMenuOpen = _ref16.isSubMenuOpen;
+}, _ref16 => {
+  let {
+    isSubMenuOpen
+  } = _ref16;
   return isSubMenuOpen ? '6px' : '0';
-}, function (_ref17) {
-  var theme = _ref17.theme;
+}, _ref17 => {
+  let {
+    theme
+  } = _ref17;
   return theme.breakpoint('small');
 });

package/dist/components/Organisms/Header/Burger/BurgerMenu.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,9 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 var _BurgerMenu = require("./BurgerMenu.style");
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
-var BurgerMenu = function BurgerMenu(_ref) {
-  var toggle = _ref.toggle,
-    isExpandable = _ref.isExpandable;
+const BurgerMenu = _ref => {
+  let {
+    toggle,
+    isExpandable
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_BurgerMenu.BurgerWrapper, {
     href: "#",
     role: "button",

package/dist/components/Organisms/Header/Burger/BurgerMenu.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
 });
@@ -13,7 +13,7 @@ var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"))
 /**
  * Burger hidden text
  */
-var BurgerHiddenText = exports.BurgerHiddenText = (0, _styledComponents.default)(_Text.default).withConfig({
+const BurgerHiddenText = exports.BurgerHiddenText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "BurgerMenustyle__BurgerHiddenText",
   componentId: "sc-dtfwej-0"
 })(["", ";"], _hideVisually.default);
@@ -22,40 +22,56 @@ var BurgerHiddenText = exports.BurgerHiddenText = (0, _styledComponents.default)
  * Burger menu bar
  */
 
-var BurgerBar = exports.BurgerBar = _styledComponents.default.span.withConfig({
+const BurgerBar = exports.BurgerBar = _styledComponents.default.span.withConfig({
   displayName: "BurgerMenustyle__BurgerBar",
   componentId: "sc-dtfwej-1"
-})(["background-color:", ";margin:0 auto;"], function (_ref) {
-  var theme = _ref.theme;
+})(["background-color:", ";margin:0 auto;"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('deep_violet_dark');
 });
 
 /**
  * Burger wrapper
  */
-var BurgerWrapper = exports.BurgerWrapper = (0, _styledComponents.default)(_Link.default).withConfig({
+const BurgerWrapper = exports.BurgerWrapper = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "BurgerMenustyle__BurgerWrapper",
   componentId: "sc-dtfwej-2"
-})(["", ";order:50;display:flex;align-items:center;position:relative;text-indent:-9999px;background-color:transparent;height:100%;width:45px;left:5px;cursor:pointer;transition:all 0.2s;:hover{border:none;font-weight:inherit;}", "{position:relative;&,::before,::after{width:25px;height:3px;display:inline-block;}", ";::before,::after{content:'';position:absolute;left:0;background-color:currentColor;transition:all 0.2s;}::before{top:-0.5rem;", ";}::after{top:0.5rem;", ";}}:hover ", "{&,::before,::after{background-color:", ";}::before{", ";}::after{", ";}}@media ", "{display:none;}"], (0, _zIndex.default)('medium'), BurgerBar, function (_ref2) {
-  var isExpandable = _ref2.isExpandable;
+})(["", ";order:50;display:flex;align-items:center;position:relative;text-indent:-9999px;background-color:transparent;height:100%;width:45px;left:5px;cursor:pointer;transition:all 0.2s;:hover{border:none;font-weight:inherit;}", "{position:relative;&,::before,::after{width:25px;height:3px;display:inline-block;}", ";::before,::after{content:'';position:absolute;left:0;background-color:currentColor;transition:all 0.2s;}::before{top:-0.5rem;", ";}::after{top:0.5rem;", ";}}:hover ", "{&,::before,::after{background-color:", ";}::before{", ";}::after{", ";}}@media ", "{display:none;}"], (0, _zIndex.default)('medium'), BurgerBar, _ref2 => {
+  let {
+    isExpandable
+  } = _ref2;
   return isExpandable && ' background-color: transparent';
-}, function (_ref3) {
-  var isExpandable = _ref3.isExpandable;
+}, _ref3 => {
+  let {
+    isExpandable
+  } = _ref3;
   return isExpandable && ' transform:rotate(135deg); top: 0;';
-}, function (_ref4) {
-  var isExpandable = _ref4.isExpandable;
+}, _ref4 => {
+  let {
+    isExpandable
+  } = _ref4;
   return isExpandable && ' transform:rotate(-135deg); top: 0;';
-}, BurgerBar, function (_ref5) {
-  var theme = _ref5.theme,
-    isExpandable = _ref5.isExpandable;
+}, BurgerBar, _ref5 => {
+  let {
+    theme,
+    isExpandable
+  } = _ref5;
   return !isExpandable && theme.color('grey');
-}, function (_ref6) {
-  var isExpandable = _ref6.isExpandable;
+}, _ref6 => {
+  let {
+    isExpandable
+  } = _ref6;
   return !isExpandable && 'top: -0.6rem;';
-}, function (_ref7) {
-  var isExpandable = _ref7.isExpandable;
+}, _ref7 => {
+  let {
+    isExpandable
+  } = _ref7;
   return !isExpandable && 'top: 0.6rem;';
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.breakpoint('nav');
 });

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

@@ -1,21 +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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _Logos = _interopRequireDefault(require("../../Molecules/Logos/Logos"));
 var _Nav = _interopRequireDefault(require("./Nav/Nav"));
 var _Header = require("./Header.style");
-var _excluded = ["navItems", "metaIcons", "campaign"];
-var Header = function Header(_ref) {
-  var navItems = _ref.navItems,
-    metaIcons = _ref.metaIcons,
-    campaign = _ref.campaign,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+const Header = _ref => {
+  let {
+    navItems,
+    metaIcons,
+    campaign,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Header.HeaderWrapper, Object.assign({
     navItems: true
   }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_Logos.default, {

package/dist/components/Organisms/Header/Header.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,38 +9,46 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 var _size = require("../../../theme/shared/size");
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var HeaderWrapper = exports.HeaderWrapper = _styledComponents.default.header.attrs(function () {
-  return {
-    role: 'banner'
-  };
-}).withConfig({
+const HeaderWrapper = exports.HeaderWrapper = _styledComponents.default.header.attrs(() => ({
+  role: 'banner'
+})).withConfig({
   displayName: "Headerstyle__HeaderWrapper",
   componentId: "sc-11ghppe-0"
-})(["position:relative;background-color:", ";padding:0;height:75px;@media ", "{height:auto;}"], function (_ref) {
-  var theme = _ref.theme;
+})(["position:relative;background-color:", ";padding:0;height:75px;@media ", "{height:auto;}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('white');
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.breakpoint('nav');
 });
-var InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
+const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "Headerstyle__InnerWrapper",
   componentId: "sc-11ghppe-1"
-})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _size.container.large, function (_ref3) {
-  var theme = _ref3.theme;
+})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _size.container.large, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.breakpoint('nav');
 });
-var Brand = exports.Brand = _styledComponents.default.div.withConfig({
+const Brand = exports.Brand = _styledComponents.default.div.withConfig({
   displayName: "Headerstyle__Brand",
   componentId: "sc-11ghppe-2"
 })(["", ";margin-right:auto;display:flex;align-items:center;a{border:0;color:transparent;margin-right:", ";img{width:100%;object-fit:contain;}:hover{border:0;}}"], (0, _zIndex.default)('high'), (0, _spacing.default)('md'));
-var MetaIcons = exports.MetaIcons = _styledComponents.default.div.withConfig({
+const MetaIcons = exports.MetaIcons = _styledComponents.default.div.withConfig({
   displayName: "Headerstyle__MetaIcons",
   componentId: "sc-11ghppe-3"
-})(["width:auto;display:flex;align-items:center;> div{height:35px;width:auto;display:inline-block;> a{height:inherit;width:inherit;margin-left:0.5rem;img{padding:5px;height:inherit;width:inherit;}}}@media ", "{position:relative;display:flex;align-items:center;background-color:", ";margin-right:0px;right:0px;}"], function (_ref4) {
-  var theme = _ref4.theme;
+})(["width:auto;display:flex;align-items:center;> div{height:35px;width:auto;display:inline-block;> a{height:inherit;width:inherit;margin-left:0.5rem;img{padding:5px;height:inherit;width:inherit;}}}@media ", "{position:relative;display:flex;align-items:center;background-color:", ";margin-right:0px;right:0px;}"], _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoint('nav');
-}, function (_ref5) {
-  var theme = _ref5.theme;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.color('white');
 });