orcs-design-system 3.2.4 → 3.2.6

package/es/components/Header/index.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
@@ -13,36 +12,31 @@ import StyledLink from "../StyledLink/";
 import { css } from "@styled-system/css";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import { themeGet } from "@styled-system/theme-get";
-var Bar = styled("header").withConfig({
-  shouldForwardProp: shouldForwardProp,
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const Bar = styled("header").withConfig({
+  shouldForwardProp,
   displayName: "Header__Bar",
   componentId: "sc-yf04b-0"
-}).attrs(function (props) {
-  return {
-    "data-testid": props.dataTestId
-  };
-})(function (props) {
-  return {
-    height: themeGet("appScale.navBarSize")(props)
-  };
-}, function (props) {
-  return css({
-    width: "100%",
-    zIndex: 12,
-    position: "sticky",
-    top: "0",
-    display: "flex",
-    alignItems: "center",
-    py: 0,
-    px: 4,
-    bg: themeGet("colors.black")(props),
-    "a[class^='StyledLink'], a[class*=' StyledLink'], div[class^='Badge'], div[class*=' Badge']": {
-      display: ["none", "none", "none", "block", "block"]
-    }
-  });
-}, variant({
+}).attrs(props => ({
+  "data-testid": props.dataTestId
+}))(props => ({
+  height: themeGet("appScale.navBarSize")(props)
+}), props => css({
+  width: "100%",
+  zIndex: 12,
+  position: "sticky",
+  top: "0",
+  display: "flex",
+  alignItems: "center",
+  py: 0,
+  px: 4,
+  bg: themeGet("colors.black")(props),
+  "a[class^='StyledLink'], a[class*=' StyledLink'], div[class^='Badge'], div[class*=' Badge']": {
+    display: ["none", "none", "none", "block", "block"]
+  }
+}), variant({
   variants: {
-    "default": {
+    default: {
       width: "5px",
       height: "5px",
       backgroundColor: "#fff",
@@ -55,7 +49,7 @@ var Bar = styled("header").withConfig({
     }
   }
 }), space);
-var Switcher = styled("button").withConfig({
+const Switcher = styled("button").withConfig({
   displayName: "Header__Switcher",
   componentId: "sc-yf04b-1"
 })(css({
@@ -73,7 +67,7 @@ var Switcher = styled("button").withConfig({
     backgroundColor: "#0091ea"
   }
 }));
-var SwitcherTopLeft = styled("div").withConfig({
+const SwitcherTopLeft = styled("div").withConfig({
   displayName: "Header__SwitcherTopLeft",
   componentId: "sc-yf04b-2"
 })(css({
@@ -82,7 +76,7 @@ var SwitcherTopLeft = styled("div").withConfig({
   backgroundColor: "#fff",
   transition: "all 200ms ease-in-out"
 }));
-var SwitcherTopMiddle = styled("div").withConfig({
+const SwitcherTopMiddle = styled("div").withConfig({
   displayName: "Header__SwitcherTopMiddle",
   componentId: "sc-yf04b-3"
 })(css({
@@ -91,7 +85,7 @@ var SwitcherTopMiddle = styled("div").withConfig({
   backgroundColor: "#fff",
   transition: "all 200ms ease-in-out"
 }));
-var SwitcherTopRight = styled("div").withConfig({
+const SwitcherTopRight = styled("div").withConfig({
   displayName: "Header__SwitcherTopRight",
   componentId: "sc-yf04b-4"
 })(css({
@@ -100,7 +94,7 @@ var SwitcherTopRight = styled("div").withConfig({
   backgroundColor: "#fff",
   transition: "all 200ms ease-in-out"
 }));
-var SwitcherMiddleLeft = styled("div").withConfig({
+const SwitcherMiddleLeft = styled("div").withConfig({
   displayName: "Header__SwitcherMiddleLeft",
   componentId: "sc-yf04b-5"
 })(css({
@@ -109,7 +103,7 @@ var SwitcherMiddleLeft = styled("div").withConfig({
   backgroundColor: "#fff",
   transition: "all 200ms ease-in-out"
 }));
-var SwitcherMiddleMiddle = styled("div").withConfig({
+const SwitcherMiddleMiddle = styled("div").withConfig({
   displayName: "Header__SwitcherMiddleMiddle",
   componentId: "sc-yf04b-6"
 })(css({
@@ -118,7 +112,7 @@ var SwitcherMiddleMiddle = styled("div").withConfig({
   backgroundColor: "#fff",
   transition: "all 200ms ease-in-out"
 }));
-var SwitcherMiddleRight = styled("div").withConfig({
+const SwitcherMiddleRight = styled("div").withConfig({
   displayName: "Header__SwitcherMiddleRight",
   componentId: "sc-yf04b-7"
 })(css({
@@ -127,7 +121,7 @@ var SwitcherMiddleRight = styled("div").withConfig({
   backgroundColor: "#fff",
   transition: "all 200ms ease-in-out"
 }));
-var SwitcherBottomLeft = styled("div").withConfig({
+const SwitcherBottomLeft = styled("div").withConfig({
   displayName: "Header__SwitcherBottomLeft",
   componentId: "sc-yf04b-8"
 })(css({
@@ -136,7 +130,7 @@ var SwitcherBottomLeft = styled("div").withConfig({
   backgroundColor: "#fff",
   transition: "all 200ms ease-in-out"
 }));
-var SwitcherBottomMiddle = styled("div").withConfig({
+const SwitcherBottomMiddle = styled("div").withConfig({
   displayName: "Header__SwitcherBottomMiddle",
   componentId: "sc-yf04b-9"
 })(css({
@@ -145,7 +139,7 @@ var SwitcherBottomMiddle = styled("div").withConfig({
   backgroundColor: "#fff",
   transition: "all 200ms ease-in-out"
 }));
-var SwitcherBottomRight = styled("div").withConfig({
+const SwitcherBottomRight = styled("div").withConfig({
   displayName: "Header__SwitcherBottomRight",
   componentId: "sc-yf04b-10"
 })(css({
@@ -154,102 +148,90 @@ var SwitcherBottomRight = styled("div").withConfig({
   backgroundColor: "#fff",
   transition: "all 200ms ease-in-out"
 }));
-var AppsMenu = styled("div").withConfig({
+const AppsMenu = styled("div").withConfig({
   displayName: "Header__AppsMenu",
   componentId: "sc-yf04b-11"
-})(function (props) {
-  return css({
-    backgroundColor: props.lightAppSwitcher ? "white" : "black",
-    border: props.lightAppSwitcher ? "solid 1px rgba(0, 0, 0, 0.1)" : "none",
-    color: props.lightAppSwitcher ? "black" : "white",
-    width: "260px",
-    display: "inline-block",
-    position: "absolute",
-    cursor: "default",
-    top: "60px",
-    left: "60px",
+})(props => css({
+  backgroundColor: props.lightAppSwitcher ? "white" : "black",
+  border: props.lightAppSwitcher ? "solid 1px rgba(0, 0, 0, 0.1)" : "none",
+  color: props.lightAppSwitcher ? "black" : "white",
+  width: "260px",
+  display: "inline-block",
+  position: "absolute",
+  cursor: "default",
+  top: "60px",
+  left: "60px",
+  padding: "s",
+  borderRadius: "6px",
+  opacity: "0",
+  pointerEvents: "none",
+  transform: "translate(-10px, -10px)",
+  userSelect: "none",
+  zIndex: "-1",
+  transition: "all 200ms ease-in-out",
+  boxShadow: themeGet("shadows.boxDefault")(props),
+  "[class^='StyledLink'], [class*=' StyledLink']": {
+    color: props.lightAppSwitcher ? themeGet("colors.black")(props) : themeGet("colors.white")(props),
+    display: "block",
+    fontWeight: themeGet("fontWeights.2")(props),
     padding: "s",
-    borderRadius: "6px",
-    opacity: "0",
-    pointerEvents: "none",
-    transform: "translate(-10px, -10px)",
-    userSelect: "none",
-    zIndex: "-1",
-    transition: "all 200ms ease-in-out",
-    boxShadow: themeGet("shadows.boxDefault")(props),
-    "[class^='StyledLink'], [class*=' StyledLink']": {
-      color: props.lightAppSwitcher ? themeGet("colors.black")(props) : themeGet("colors.white")(props),
-      display: "block",
-      fontWeight: themeGet("fontWeights.2")(props),
-      padding: "s",
-      borderRadius: themeGet("radii.2")(props),
-      "&:hover, &:focus": {
-        textDecoration: "none",
-        backgroundColor: props.lightAppSwitcher ? themeGet("colors.primaryLightest")(props) : themeGet("colors.primary")(props)
-      }
+    borderRadius: themeGet("radii.2")(props),
+    "&:hover, &:focus": {
+      textDecoration: "none",
+      backgroundColor: props.lightAppSwitcher ? themeGet("colors.primaryLightest")(props) : themeGet("colors.primary")(props)
     }
-  });
-}, function (props) {
-  return props.isOpen ? css({
-    opacity: "1",
-    userSelect: "default",
-    zIndex: "2",
-    transform: "translate(0, 0)",
-    pointerEvents: "auto"
-  }) : null;
-});
-var WorkspaceSwitcher = styled("div").withConfig({
+  }
+}), props => props.isOpen ? css({
+  opacity: "1",
+  userSelect: "default",
+  zIndex: "2",
+  transform: "translate(0, 0)",
+  pointerEvents: "auto"
+}) : null);
+const WorkspaceSwitcher = styled("div").withConfig({
   displayName: "Header__WorkspaceSwitcher",
   componentId: "sc-yf04b-12"
-})(function (props) {
-  return css({
-    borderBottom: props.lightAppSwitcher ? "solid 1px rgba(0,0,0,0.1)" : "solid 1px rgba(255,255,255,0.3)",
-    paddingBottom: "s",
-    "[class^='Small'], [class*=' Small']": {
-      display: "block",
-      fontWeight: themeGet("fontWeights.1")(props)
-    }
-  });
-});
-var InternalAppSwitcher = styled("div").withConfig({
+})(props => css({
+  borderBottom: props.lightAppSwitcher ? "solid 1px rgba(0,0,0,0.1)" : "solid 1px rgba(255,255,255,0.3)",
+  paddingBottom: "s",
+  "[class^='Small'], [class*=' Small']": {
+    display: "block",
+    fontWeight: themeGet("fontWeights.1")(props)
+  }
+}));
+const InternalAppSwitcher = styled("div").withConfig({
   displayName: "Header__InternalAppSwitcher",
   componentId: "sc-yf04b-13"
-})(function (props) {
-  return css({
-    borderBottom: props.lightAppSwitcher ? "solid 1px rgba(0,0,0,0.1)" : "solid 1px rgba(255,255,255,0.3)",
-    paddingBottom: "s",
-    marginTop: "s",
-    "[class^='Small'], [class*=' Small']": {
-      display: "block",
-      fontWeight: themeGet("fontWeights.1")(props)
-    }
-  });
-});
-var ExternalAppSwitcher = styled("div").withConfig({
+})(props => css({
+  borderBottom: props.lightAppSwitcher ? "solid 1px rgba(0,0,0,0.1)" : "solid 1px rgba(255,255,255,0.3)",
+  paddingBottom: "s",
+  marginTop: "s",
+  "[class^='Small'], [class*=' Small']": {
+    display: "block",
+    fontWeight: themeGet("fontWeights.1")(props)
+  }
+}));
+const ExternalAppSwitcher = styled("div").withConfig({
   displayName: "Header__ExternalAppSwitcher",
   componentId: "sc-yf04b-14"
-})(function (props) {
-  return css({
-    marginTop: "s",
-    "[class^='Small'], [class*=' Small']": {
-      display: "block",
-      fontWeight: themeGet("fontWeights.1")(props)
-    }
-  });
-});
-var AppName = styled("div").withConfig({
+})(props => css({
+  marginTop: "s",
+  "[class^='Small'], [class*=' Small']": {
+    display: "block",
+    fontWeight: themeGet("fontWeights.1")(props)
+  }
+}));
+const AppName = styled("div").withConfig({
   displayName: "Header__AppName",
   componentId: "sc-yf04b-15"
-})(function (props) {
-  return css({
-    display: "flex",
-    alignItems: "center",
-    fontSize: themeGet("fontSizes.3")(props),
-    color: themeGet("colors.white")(props)
-  });
-}, variant({
+})(props => css({
+  display: "flex",
+  alignItems: "center",
+  fontSize: themeGet("fontSizes.3")(props),
+  color: themeGet("colors.white")(props)
+}), variant({
   variants: {
-    "default": {
+    default: {
       width: "5px",
       height: "5px",
       backgroundColor: "#fff",
@@ -261,12 +243,12 @@ var AppName = styled("div").withConfig({
     }
   }
 }), space);
-var SearchContainer = styled("div").withConfig({
+const SearchContainer = styled("div").withConfig({
   displayName: "Header__SearchContainer",
   componentId: "sc-yf04b-16"
 })(variant({
   variants: {
-    "default": {
+    default: {
       display: "block"
     },
     search: {
@@ -282,200 +264,186 @@ var SearchContainer = styled("div").withConfig({
     }
   }
 }), space, layout);
-var MobileMenuToggle = styled("button").withConfig({
+const MobileMenuToggle = styled("button").withConfig({
   displayName: "Header__MobileMenuToggle",
   componentId: "sc-yf04b-17"
-})(function (props) {
-  return css({
-    zIndex: 4,
-    cursor: "pointer",
-    userSelect: "none",
-    background: "none",
-    border: "none",
-    position: "relative",
-    padding: "0 0 7px",
-    display: "block",
-    "&:hover, &:focus": {
-      outline: "0",
-      span: {
-        bg: themeGet("colors.white")(props),
-        "&:before, &:after": {
-          bg: themeGet("colors.white")(props)
-        }
+})(props => css({
+  zIndex: 4,
+  cursor: "pointer",
+  userSelect: "none",
+  background: "none",
+  border: "none",
+  position: "relative",
+  padding: "0 0 7px",
+  display: "block",
+  "&:hover, &:focus": {
+    outline: "0",
+    span: {
+      bg: themeGet("colors.white")(props),
+      "&:before, &:after": {
+        bg: themeGet("colors.white")(props)
       }
     }
-  });
-});
-var Hamburger = styled("span").withConfig({
+  }
+}));
+const Hamburger = styled("span").withConfig({
   displayName: "Header__Hamburger",
   componentId: "sc-yf04b-18"
-})(function (props) {
-  return css({
-    "::before": {
-      top: "calc(8px * 1.25)",
-      position: "absolute",
-      content: "''",
-      display: "inline-block",
-      width: "30px",
-      height: "4px",
-      borderRadius: themeGet("radii.2")(props),
-      bg: themeGet("colors.white")(props),
-      left: 0,
-      transformOrigin: "50% 50%",
-      transition: "top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1), background-color 300ms cubic-bezier(0.165, 0.84, 0.44, 1)"
-    },
-    "::after": {
-      position: "absolute",
-      top: "calc(8px * -1.25)",
-      content: "''",
-      display: "inline-block",
-      width: "30px",
-      height: "4px",
-      borderRadius: themeGet("radii.2")(props),
-      bg: themeGet("colors.white")(props),
-      left: 0,
-      transformOrigin: "50% 50%",
-      transition: "top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1), background-color 300ms cubic-bezier(0.165, 0.84, 0.44, 1)"
-    },
+})(props => css({
+  "::before": {
+    top: "calc(8px * 1.25)",
+    position: "absolute",
+    content: "''",
     display: "inline-block",
-    cursor: "pointer",
-    userSelect: "none",
-    transition: themeGet("transition.transitionDefault")(props),
     width: "30px",
     height: "4px",
     borderRadius: themeGet("radii.2")(props),
     bg: themeGet("colors.white")(props),
-    position: "relative"
-  });
-});
-var MobileNavToggle = styled("input").withConfig({
+    left: 0,
+    transformOrigin: "50% 50%",
+    transition: "top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1), background-color 300ms cubic-bezier(0.165, 0.84, 0.44, 1)"
+  },
+  "::after": {
+    position: "absolute",
+    top: "calc(8px * -1.25)",
+    content: "''",
+    display: "inline-block",
+    width: "30px",
+    height: "4px",
+    borderRadius: themeGet("radii.2")(props),
+    bg: themeGet("colors.white")(props),
+    left: 0,
+    transformOrigin: "50% 50%",
+    transition: "top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1), background-color 300ms cubic-bezier(0.165, 0.84, 0.44, 1)"
+  },
+  display: "inline-block",
+  cursor: "pointer",
+  userSelect: "none",
+  transition: themeGet("transition.transitionDefault")(props),
+  width: "30px",
+  height: "4px",
+  borderRadius: themeGet("radii.2")(props),
+  bg: themeGet("colors.white")(props),
+  position: "relative"
+}));
+const MobileNavToggle = styled("input").withConfig({
   displayName: "Header__MobileNavToggle",
   componentId: "sc-yf04b-19"
-})(function (props) {
-  return css({
-    opacity: "0",
-    position: "absolute",
-    visibility: "hidden",
-    margin: 0,
-    zIndex: 0,
-    width: 0,
-    height: 0,
-    overflow: "hidden",
-    pointerEvents: "none",
-    "~ header, ~ div, ~ main": {
-      transition: themeGet("transition.transitionDefault")(props)
+})(props => css({
+  opacity: "0",
+  position: "absolute",
+  visibility: "hidden",
+  margin: 0,
+  zIndex: 0,
+  width: 0,
+  height: 0,
+  overflow: "hidden",
+  pointerEvents: "none",
+  "~ header, ~ div, ~ main": {
+    transition: themeGet("transition.transitionDefault")(props)
+  },
+  "&:checked": {
+    "~ [class^='Header__MobileNavMenu'], ~ [class*=' Header__MobileNavMenu']": {
+      transform: "translateX(-" + themeGet("appScale.mobileNavMenuWidth")(props) + ")"
     },
-    "&:checked": {
-      "~ [class^='Header__MobileNavMenu'], ~ [class*=' Header__MobileNavMenu']": {
-        transform: "translateX(-" + themeGet("appScale.mobileNavMenuWidth")(props) + ")"
-      },
-      "~ main": {
-        transform: "translateX(-" + themeGet("appScale.mobileNavMenuWidth")(props) + ")"
-      },
-      "~ header": {
-        transform: "translateX(-" + themeGet("appScale.mobileNavMenuWidth")(props) + ")"
-      },
-      /* Hamburger */
-      "~ [class^='Header__Bar'], ~ [class*=' Header__Bar']": {
-        "[class^='Header__Hamburger'], [class*=' Header__Hamburger']": {
-          bg: "transparent" /* fade away the middle line */,
-          "&:hover,&:focus": {
-            bg: "transparent"
-          },
-          "::before": {
-            transition: "top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1)",
-            top: 0,
-            width: "24px",
-            transform: "rotate3d(0,0,1,45deg) scale(1.1)"
-          },
-          "::after": {
-            transition: "top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1)",
-            top: 0,
-            width: "24px",
-            transform: "rotate3d(0,0,1,-45deg) scale(1.1)"
-          }
+    "~ main": {
+      transform: "translateX(-" + themeGet("appScale.mobileNavMenuWidth")(props) + ")"
+    },
+    "~ header": {
+      transform: "translateX(-" + themeGet("appScale.mobileNavMenuWidth")(props) + ")"
+    },
+    /* Hamburger */
+    "~ [class^='Header__Bar'], ~ [class*=' Header__Bar']": {
+      "[class^='Header__Hamburger'], [class*=' Header__Hamburger']": {
+        bg: "transparent" /* fade away the middle line */,
+        "&:hover,&:focus": {
+          bg: "transparent"
+        },
+        "::before": {
+          transition: "top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1)",
+          top: 0,
+          width: "24px",
+          transform: "rotate3d(0,0,1,45deg) scale(1.1)"
+        },
+        "::after": {
+          transition: "top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1)",
+          top: 0,
+          width: "24px",
+          transform: "rotate3d(0,0,1,-45deg) scale(1.1)"
         }
-      },
-      /* Overlay */
-      "~ label": {
-        zIndex: 5,
-        opacity: "1"
       }
+    },
+    /* Overlay */
+    "~ label": {
+      zIndex: 5,
+      opacity: "1"
     }
-  });
-});
-var MobileNavMenu = styled("div").attrs(function (props) {
-  return {
-    "aria-hidden": "".concat(!props.isOpen)
-  };
-}).withConfig({
+  }
+}));
+const MobileNavMenu = styled("div").attrs(props => ({
+  "aria-hidden": "".concat(!props.isOpen)
+})).withConfig({
   displayName: "Header__MobileNavMenu",
   componentId: "sc-yf04b-20"
-})(function (props) {
-  return css({
-    display: props.isOpen ? "block" : "none",
-    position: "fixed",
-    overflowY: "auto",
-    height: "100vh",
-    right: "-" + themeGet("appScale.mobileNavMenuWidth")(props),
-    top: 0,
-    width: themeGet("appScale.mobileNavMenuWidth")(props),
-    bg: themeGet("colors.greyDarkest")(props),
-    zIndex: 6,
-    transition: themeGet("transition.transitionDefault")(props),
-    "[class^='StyledLink'], [class*=' StyledLink']": {
-      color: themeGet("colors.white")(props),
-      display: "block",
-      fontWeight: themeGet("fontWeights.2")(props),
-      padding: "r",
-      borderRadius: themeGet("radii.2")(props),
-      "&:hover, &:focus": {
-        textDecoration: "none",
-        backgroundColor: themeGet("colors.primary")(props)
-      }
+})(props => css({
+  display: props.isOpen ? "block" : "none",
+  position: "fixed",
+  overflowY: "auto",
+  height: "100vh",
+  right: "-" + themeGet("appScale.mobileNavMenuWidth")(props),
+  top: 0,
+  width: themeGet("appScale.mobileNavMenuWidth")(props),
+  bg: themeGet("colors.greyDarkest")(props),
+  zIndex: 6,
+  transition: themeGet("transition.transitionDefault")(props),
+  "[class^='StyledLink'], [class*=' StyledLink']": {
+    color: themeGet("colors.white")(props),
+    display: "block",
+    fontWeight: themeGet("fontWeights.2")(props),
+    padding: "r",
+    borderRadius: themeGet("radii.2")(props),
+    "&:hover, &:focus": {
+      textDecoration: "none",
+      backgroundColor: themeGet("colors.primary")(props)
     }
-  });
-});
-var Theme = styled("div").withConfig({
+  }
+}));
+const Theme = styled("div").withConfig({
   displayName: "Header__Theme",
   componentId: "sc-yf04b-21"
-})(function (props) {
-  return css({
-    borderTop: "solid 1px rgba(255,255,255,0.3)",
-    padding: "r",
-    paddingTop: "s",
-    marginTop: "s",
-    "[class^='Small'], [class*=' Small']": {
-      display: "block",
-      fontWeight: themeGet("fontWeights.1")(props),
-      marginTop: "xs"
-    }
-  });
-});
-var RightAligned = styled("div").withConfig({
+})(props => css({
+  borderTop: "solid 1px rgba(255,255,255,0.3)",
+  padding: "r",
+  paddingTop: "s",
+  marginTop: "s",
+  "[class^='Small'], [class*=' Small']": {
+    display: "block",
+    fontWeight: themeGet("fontWeights.1")(props),
+    marginTop: "xs"
+  }
+}));
+const RightAligned = styled("div").withConfig({
   displayName: "Header__RightAligned",
   componentId: "sc-yf04b-22"
 })(css({
   marginLeft: "auto",
   marginRight: "r"
 }));
-var Overlay = styled("label").withConfig({
+const Overlay = styled("label").withConfig({
   displayName: "Header__Overlay",
   componentId: "sc-yf04b-23"
-})(function (props) {
-  return css({
-    position: "fixed",
-    top: 0,
-    left: 0,
-    height: "100vh",
-    width: "100%",
-    bg: themeGet("colors.black50")(props),
-    zIndex: 0,
-    opacity: "0",
-    overflow: "hidden",
-    transition: themeGet("transition.transitionDefault")(props)
-  });
-});
+})(props => css({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  height: "100vh",
+  width: "100%",
+  bg: themeGet("colors.black50")(props),
+  zIndex: 0,
+  opacity: "0",
+  overflow: "hidden",
+  transition: themeGet("transition.transitionDefault")(props)
+}));
 
 /**
  * Header component for global app navigation.
@@ -483,50 +451,43 @@ var Overlay = styled("label").withConfig({
  * At screen sizes less than 1100px the links are instead moved into a mobile menu toggled by a burger icon button to play nice with smaller devices.
  */
 export default function Header(_ref) {
-  var appName = _ref.appName,
-    userName = _ref.userName,
-    avatarSource = _ref.avatarSource,
-    children = _ref.children,
-    sideMenuContent = _ref.sideMenuContent,
-    internalAppSwitcherContent = _ref.internalAppSwitcherContent,
-    externalAppSwitcherContent = _ref.externalAppSwitcherContent,
-    rightAlignedContent = _ref.rightAlignedContent,
-    logoutFunction = _ref.logoutFunction,
-    searchComponent = _ref.searchComponent,
-    dataTestId = _ref.dataTestId,
-    theme = _ref.theme,
-    variant = _ref.variant,
-    themeSwitcherContent = _ref.themeSwitcherContent,
-    workspaceSwitcherContent = _ref.workspaceSwitcherContent,
-    _ref$navToggleId = _ref.navToggleId,
-    navToggleId = _ref$navToggleId === void 0 ? "mobileMenuToggle" : _ref$navToggleId,
-    currentWorkspace = _ref.currentWorkspace,
-    logo = _ref.logo,
-    appSwitcher = _ref.appSwitcher,
-    lightAppSwitcher = _ref.lightAppSwitcher;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    toggleState = _useState2[0],
-    setToggle = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    mobileMenuIsOpen = _useState4[0],
-    setMobileMenuIsOpen = _useState4[1];
-  var switcherRef = useRef();
-  var menuRef = useRef();
-  var toggleMobileMenu = function toggleMobileMenu() {
-    setMobileMenuIsOpen(function (state) {
-      return !state;
-    });
+  let {
+    appName,
+    userName,
+    avatarSource,
+    children,
+    sideMenuContent,
+    internalAppSwitcherContent,
+    externalAppSwitcherContent,
+    rightAlignedContent,
+    logoutFunction,
+    searchComponent,
+    dataTestId,
+    theme,
+    variant,
+    themeSwitcherContent,
+    workspaceSwitcherContent,
+    navToggleId = "mobileMenuToggle",
+    currentWorkspace,
+    logo,
+    appSwitcher,
+    lightAppSwitcher
+  } = _ref;
+  const [toggleState, setToggle] = useState(false);
+  const [mobileMenuIsOpen, setMobileMenuIsOpen] = useState(false);
+  const switcherRef = useRef();
+  const menuRef = useRef();
+  const toggleMobileMenu = () => {
+    setMobileMenuIsOpen(state => !state);
   };
-  var closeMenu = function closeMenu() {
+  const closeMenu = () => {
     setToggle(false);
   };
-  useEffect(function () {
+  useEffect(() => {
     if (!toggleState) {
       return;
     }
-    var handleClicked = function handleClicked(event) {
+    const handleClicked = event => {
       // As the event listener is attached in capture phase, need to do this make sure the sate change are after react event cycle.
       if (menuRef.current && !menuRef.current.contains(event.target) && switcherRef.current && !switcherRef.current.contains(event.target)) {
         closeMenu();
@@ -537,125 +498,161 @@ export default function Header(_ref) {
     // If any of the actions are using stopPropagation(), the event will stop in the react mounting root.
     // So use capture phase to detect anything clicked.
     document.addEventListener("click", handleClicked, true);
-    return function () {
+    return () => {
       // If menu closed, unregister event listener to prevent memory leaks
       document.removeEventListener("click", handleClicked, true);
     };
   }, [toggleState, switcherRef]);
-  var onToggle = function onToggle(e) {
+  const onToggle = e => {
     e.stopPropagation();
     setToggle(!toggleState);
   };
-  var component = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileNavToggle, {
-    type: "checkbox",
-    checked: mobileMenuIsOpen,
-    defaultChecked: mobileMenuIsOpen,
-    id: navToggleId
-  }), /*#__PURE__*/React.createElement(Bar, {
-    theme: theme,
-    dataTestId: dataTestId,
-    variant: variant
-  }, /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center"
-  }, appSwitcher && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Switcher, {
-    title: "Switch to...",
-    onClick: onToggle,
-    "aria-role": "navigation",
-    "aria-label": "Toggle workspace and app switcher menu",
-    ref: switcherRef
-  }, /*#__PURE__*/React.createElement(SwitcherTopLeft, null), /*#__PURE__*/React.createElement(SwitcherTopMiddle, null), /*#__PURE__*/React.createElement(SwitcherTopRight, null), /*#__PURE__*/React.createElement(SwitcherMiddleLeft, null), /*#__PURE__*/React.createElement(SwitcherMiddleMiddle, null), /*#__PURE__*/React.createElement(SwitcherMiddleRight, null), /*#__PURE__*/React.createElement(SwitcherBottomLeft, null), /*#__PURE__*/React.createElement(SwitcherBottomMiddle, null), /*#__PURE__*/React.createElement(SwitcherBottomRight, null)), /*#__PURE__*/React.createElement(AppsMenu, {
-    lightAppSwitcher: lightAppSwitcher,
-    isOpen: toggleState,
-    ref: menuRef
-  }, workspaceSwitcherContent && /*#__PURE__*/React.createElement(WorkspaceSwitcher, null, /*#__PURE__*/React.createElement(Small, {
-    color: lightAppSwitcher ? "black60" : "white60",
-    pb: "s",
-    display: "block"
-  }, "Change workspace:"), workspaceSwitcherContent), internalAppSwitcherContent && /*#__PURE__*/React.createElement(InternalAppSwitcher, {
-    lightAppSwitcher: lightAppSwitcher
-  }, /*#__PURE__*/React.createElement(Small, {
-    color: lightAppSwitcher ? "black60" : "white60",
-    pb: "xs",
-    display: "block"
-  }, "Switch to:"), internalAppSwitcherContent), externalAppSwitcherContent && /*#__PURE__*/React.createElement(ExternalAppSwitcher, {
-    lightAppSwitcher: lightAppSwitcher
-  }, /*#__PURE__*/React.createElement(Small, {
-    color: lightAppSwitcher ? "black60" : "white60",
-    pb: "xs",
-    display: "block"
-  }, "External apps:"), externalAppSwitcherContent))), logo && /*#__PURE__*/React.createElement(FlexItem, null, logo), /*#__PURE__*/React.createElement(Flex, {
-    flexDirection: "column",
-    justifyContent: "center"
-  }, /*#__PURE__*/React.createElement(AppName, {
-    variant: variant
-  }, appName), currentWorkspace && /*#__PURE__*/React.createElement(Small, {
-    color: "white",
-    fontSize: "0",
-    display: ["none", "none", "none", "block"]
-  }, currentWorkspace))), /*#__PURE__*/React.createElement(Spacer, {
-    ml: 4
-  }, children), searchComponent && /*#__PURE__*/React.createElement(SearchContainer, {
-    variant: variant
-  }, searchComponent), /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center",
-    ml: "auto"
-  }, rightAlignedContent && /*#__PURE__*/React.createElement(RightAligned, null, rightAlignedContent), /*#__PURE__*/React.createElement(FlexItem, {
-    flex: "1 0 auto",
-    mr: "r",
-    display: ["none", "none", "none", "none", "flex"]
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    type: "inverted",
-    sizing: "small",
-    title: userName,
-    image: avatarSource,
-    theme: theme
-  })), /*#__PURE__*/React.createElement(MobileMenuToggle, {
+  const component = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(MobileNavToggle, {
+      type: "checkbox",
+      checked: mobileMenuIsOpen,
+      defaultChecked: mobileMenuIsOpen,
+      id: navToggleId
+    }), /*#__PURE__*/_jsxs(Bar, {
+      theme: theme,
+      dataTestId: dataTestId,
+      variant: variant,
+      children: [/*#__PURE__*/_jsxs(Flex, {
+        alignItems: "center",
+        children: [appSwitcher && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(Switcher, {
+            title: "Switch to...",
+            onClick: onToggle,
+            "aria-role": "navigation",
+            "aria-label": "Toggle workspace and app switcher menu",
+            ref: switcherRef,
+            children: [/*#__PURE__*/_jsx(SwitcherTopLeft, {}), /*#__PURE__*/_jsx(SwitcherTopMiddle, {}), /*#__PURE__*/_jsx(SwitcherTopRight, {}), /*#__PURE__*/_jsx(SwitcherMiddleLeft, {}), /*#__PURE__*/_jsx(SwitcherMiddleMiddle, {}), /*#__PURE__*/_jsx(SwitcherMiddleRight, {}), /*#__PURE__*/_jsx(SwitcherBottomLeft, {}), /*#__PURE__*/_jsx(SwitcherBottomMiddle, {}), /*#__PURE__*/_jsx(SwitcherBottomRight, {})]
+          }), /*#__PURE__*/_jsxs(AppsMenu, {
+            lightAppSwitcher: lightAppSwitcher,
+            isOpen: toggleState,
+            ref: menuRef,
+            children: [workspaceSwitcherContent && /*#__PURE__*/_jsxs(WorkspaceSwitcher, {
+              children: [/*#__PURE__*/_jsx(Small, {
+                color: lightAppSwitcher ? "black60" : "white60",
+                pb: "s",
+                display: "block",
+                children: "Change workspace:"
+              }), workspaceSwitcherContent]
+            }), internalAppSwitcherContent && /*#__PURE__*/_jsxs(InternalAppSwitcher, {
+              lightAppSwitcher: lightAppSwitcher,
+              children: [/*#__PURE__*/_jsx(Small, {
+                color: lightAppSwitcher ? "black60" : "white60",
+                pb: "xs",
+                display: "block",
+                children: "Switch to:"
+              }), internalAppSwitcherContent]
+            }), externalAppSwitcherContent && /*#__PURE__*/_jsxs(ExternalAppSwitcher, {
+              lightAppSwitcher: lightAppSwitcher,
+              children: [/*#__PURE__*/_jsx(Small, {
+                color: lightAppSwitcher ? "black60" : "white60",
+                pb: "xs",
+                display: "block",
+                children: "External apps:"
+              }), externalAppSwitcherContent]
+            })]
+          })]
+        }), logo && /*#__PURE__*/_jsx(FlexItem, {
+          children: logo
+        }), /*#__PURE__*/_jsxs(Flex, {
+          flexDirection: "column",
+          justifyContent: "center",
+          children: [/*#__PURE__*/_jsx(AppName, {
+            variant: variant,
+            children: appName
+          }), currentWorkspace && /*#__PURE__*/_jsx(Small, {
+            color: "white",
+            fontSize: "0",
+            display: ["none", "none", "none", "block"],
+            children: currentWorkspace
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Spacer, {
+        ml: 4,
+        children: children
+      }), searchComponent && /*#__PURE__*/_jsx(SearchContainer, {
+        variant: variant,
+        children: searchComponent
+      }), /*#__PURE__*/_jsxs(Flex, {
+        alignItems: "center",
+        ml: "auto",
+        children: [rightAlignedContent && /*#__PURE__*/_jsx(RightAligned, {
+          children: rightAlignedContent
+        }), /*#__PURE__*/_jsx(FlexItem, {
+          flex: "1 0 auto",
+          mr: "r",
+          display: ["none", "none", "none", "none", "flex"],
+          children: /*#__PURE__*/_jsx(Avatar, {
+            type: "inverted",
+            sizing: "small",
+            title: userName,
+            image: avatarSource,
+            theme: theme
+          })
+        }), /*#__PURE__*/_jsx(MobileMenuToggle, {
+          theme: theme,
+          onClick: toggleMobileMenu,
+          "aria-expanded": "".concat(mobileMenuIsOpen),
+          "aria-label": "Menu",
+          children: /*#__PURE__*/_jsx(Hamburger, {
+            id: "hamburger-menu-icon"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(MobileNavMenu, {
+      isOpen: mobileMenuIsOpen,
+      children: /*#__PURE__*/_jsxs(Box, {
+        m: "s",
+        children: [/*#__PURE__*/_jsx(Box, {
+          borderBottomWidth: 1,
+          borderBottomStyle: "solid",
+          borderBottomColor: "white20",
+          pt: "s",
+          pb: "r",
+          mb: "s",
+          display: ["block", "block", "block", "block", "none"],
+          children: /*#__PURE__*/_jsx(Avatar, {
+            type: "inverted",
+            sizing: "small",
+            title: userName,
+            image: avatarSource,
+            theme: theme
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          display: ["block", "block", "block", "none", "none"],
+          children: children
+        }), sideMenuContent, logoutFunction && /*#__PURE__*/_jsxs(StyledLink, {
+          id: "logoutButton",
+          white: true,
+          bold: true,
+          onClick: logoutFunction,
+          children: [/*#__PURE__*/_jsx(Icon, {
+            icon: ["fas", "lock"],
+            colour: "white",
+            mr: "s"
+          }), "Logout"]
+        }), themeSwitcherContent && /*#__PURE__*/_jsxs(Theme, {
+          children: [/*#__PURE__*/_jsx(Small, {
+            color: "white60",
+            pt: "s",
+            pb: "r",
+            display: "block",
+            children: "Switch theme:"
+          }), themeSwitcherContent]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Overlay, {
+      htmlFor: navToggleId
+    })]
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
     theme: theme,
-    onClick: toggleMobileMenu,
-    "aria-expanded": "".concat(mobileMenuIsOpen),
-    "aria-label": "Menu"
-  }, /*#__PURE__*/React.createElement(Hamburger, {
-    id: "hamburger-menu-icon"
-  })))), /*#__PURE__*/React.createElement(MobileNavMenu, {
-    isOpen: mobileMenuIsOpen
-  }, /*#__PURE__*/React.createElement(Box, {
-    m: "s"
-  }, /*#__PURE__*/React.createElement(Box, {
-    borderBottomWidth: 1,
-    borderBottomStyle: "solid",
-    borderBottomColor: "white20",
-    pt: "s",
-    pb: "r",
-    mb: "s",
-    display: ["block", "block", "block", "block", "none"]
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    type: "inverted",
-    sizing: "small",
-    title: userName,
-    image: avatarSource,
-    theme: theme
-  })), /*#__PURE__*/React.createElement(Box, {
-    display: ["block", "block", "block", "none", "none"]
-  }, children), sideMenuContent, logoutFunction && /*#__PURE__*/React.createElement(StyledLink, {
-    id: "logoutButton",
-    white: true,
-    bold: true,
-    onClick: logoutFunction
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "lock"],
-    colour: "white",
-    mr: "s"
-  }), "Logout"), themeSwitcherContent && /*#__PURE__*/React.createElement(Theme, null, /*#__PURE__*/React.createElement(Small, {
-    color: "white60",
-    pt: "s",
-    pb: "r",
-    display: "block"
-  }, "Switch theme:"), themeSwitcherContent))), /*#__PURE__*/React.createElement(Overlay, {
-    htmlFor: navToggleId
-  }));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    children: component
+  }) : component;
 }
 Header.propTypes = {
   /** Logo for app. Preferably an svg logo */