@blateral/b.kit 2.4.2 → 2.5.0-beta.1.1

package/esm/Navigation-3ded0cfc.js

@@ -0,0 +1,1713 @@
+import { _ as __assign, a as __makeTemplateObject, p as AngleLeft, f as Cross, q as AngleRight, e as __spreadArray } from './ClockFilled-62515a8f.js';
+import React__default, { useState, useRef, useEffect, useMemo, forwardRef } from 'react';
+import { u as useLibTheme, L as LibThemeProvider } from './LibThemeProvider-52555ac9.js';
+import { a as useMediaQueries } from './useMediaQuery-b08dda62.js';
+import { L as Link } from './Link-3fd9c9b8.js';
+import styled, { css } from 'styled-components';
+import { i as isValidArray } from './arrays-65b644ef.js';
+import { c as clampValue } from './clamp-12d37b65.js';
+import { g as getCurrentNavPath, a as getCurrentNavItem } from './navigation-ada7fd84.js';
+import { m as mq, s as spacings, g as getColors, a as getFonts, w as withRange, c as getGlobals } from './styles-da982973.js';
+import { c as copyStyle, C as Copy } from './Copy-a28aeb61.js';
+import { I as Image } from './Image-dc2b33c1.js';
+import { L as LanguageSwitcher } from './LanguageSwitcher-3fa20077.js';
+
+/**
+ * Hooks in to menu state to control it with keyboard inputs
+ * @param initialMenuState
+ * @param settings
+ * @returns
+ */
+
+var useMenuKeyboard = function (initialMenuState, settings) {
+  var _a = useState(initialMenuState),
+      isMenuOpen = _a[0],
+      setIsMenuOpen = _a[1];
+
+  var prevMenuState = useRef(false);
+
+  var _b = useState(null),
+      root = _b[0],
+      setRoot = _b[1];
+
+  var openBtnRef = useRef(null);
+  var closeBtnRef = useRef(null);
+
+  var defaultSettings = __assign({
+    openMenuIdent: 'button[aria-label="open menu"]',
+    closeMenuIdent: 'button[aria-label="close menu"]'
+  }, settings);
+
+  useEffect(function () {
+    if (!root) return; // setting up menu toggle button refs
+
+    if (!openBtnRef.current) {
+      openBtnRef.current = root.querySelector(defaultSettings.openMenuIdent);
+    }
+
+    if (!closeBtnRef.current) {
+      closeBtnRef.current = root.querySelector(defaultSettings.closeMenuIdent);
+    }
+  }, [defaultSettings.closeMenuIdent, defaultSettings.openMenuIdent, isMenuOpen, root]);
+  useEffect(function () {
+    var _a, _b;
+
+    var handleKeyDown = function (ev) {
+      if (ev.key === 'Escape' && isMenuOpen) {
+        setIsMenuOpen(false);
+      }
+    }; // settings focus if menu is open
+
+
+    if (isMenuOpen) {
+      (_a = closeBtnRef === null || closeBtnRef === void 0 ? void 0 : closeBtnRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    } else if (prevMenuState.current) {
+      (_b = openBtnRef === null || openBtnRef === void 0 ? void 0 : openBtnRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+
+    prevMenuState.current = isMenuOpen;
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isMenuOpen]);
+  return {
+    setRoot: setRoot,
+    isMenuOpen: isMenuOpen,
+    setIsMenuOpen: setIsMenuOpen
+  };
+};
+
+var useScrollThrottle = function (timeout, callback) {
+  if (timeout === void 0) {
+    timeout = 0;
+  }
+
+  var _a = useState(null),
+      throttledState = _a[0],
+      setThrottledState = _a[1];
+
+  var timeoutRef = useRef(-1);
+  var lastState = useRef({
+    scrollX: 0,
+    scrollY: 0
+  });
+
+  var updateScrollState = function () {
+    if (typeof window === 'undefined') return;
+    lastState.current = {
+      scrollX: window.scrollX,
+      scrollY: window.scrollY
+    };
+  };
+
+  useEffect(function () {
+    if (typeof window === 'undefined') return;
+
+    var handleScroll = function () {
+      updateScrollState();
+
+      if (timeoutRef.current === -1) {
+        timeoutRef.current = window.setTimeout(function () {
+          callback === null || callback === void 0 ? void 0 : callback(lastState.current);
+          setThrottledState(lastState.current);
+          timeoutRef.current = -1;
+        }, timeout);
+      }
+    };
+
+    updateScrollState();
+    callback === null || callback === void 0 ? void 0 : callback(lastState.current);
+    setThrottledState(lastState.current);
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [callback, timeout]);
+  return throttledState;
+};
+
+var PageScrollDirection;
+
+(function (PageScrollDirection) {
+  PageScrollDirection[PageScrollDirection["UP"] = 0] = "UP";
+  PageScrollDirection[PageScrollDirection["DOWN"] = 1] = "DOWN";
+})(PageScrollDirection || (PageScrollDirection = {}));
+
+var usePageScroll = function (settings) {
+  var _a, _b;
+
+  var _c = useState(true),
+      isTop = _c[0],
+      setIsTop = _c[1];
+
+  var _d = useState(true),
+      isInOffset = _d[0],
+      setIsInOffset = _d[1];
+
+  var _e = useState(false),
+      leftOffsetFromTop = _e[0],
+      setLeftOffsetFromTop = _e[1];
+
+  var lastScrollPos = useRef(0);
+  var pxSinceLastSwitch = useRef(0);
+
+  var _f = useState(PageScrollDirection.DOWN),
+      scrollDirection = _f[0],
+      setScrollDirection = _f[1];
+
+  var directionDownOffset = ((_a = settings === null || settings === void 0 ? void 0 : settings.directionOffset) === null || _a === void 0 ? void 0 : _a.down) || 0;
+  var directionUpOffset = ((_b = settings === null || settings === void 0 ? void 0 : settings.directionOffset) === null || _b === void 0 ? void 0 : _b.up) || 0; // Throttle scroll event for perfomance
+
+  var scrollState = useScrollThrottle((settings === null || settings === void 0 ? void 0 : settings.resizeThrottleTimeout) !== undefined ? settings.resizeThrottleTimeout : 200);
+  useEffect(function () {
+    if (!scrollState) return;
+    if (typeof window === 'undefined') return;
+    var scrollY = scrollState.scrollY;
+    var isTop = scrollY <= 0; // check if page is scroll on top
+
+    setIsTop(isTop); // check offset
+
+    if ((settings === null || settings === void 0 ? void 0 : settings.offset) && scrollY <= settings.offset) {
+      setIsInOffset(true);
+    } else {
+      setIsInOffset(function (prev) {
+        var _a;
+
+        if (prev) {
+          (_a = settings === null || settings === void 0 ? void 0 : settings.onLeftOffset) === null || _a === void 0 ? void 0 : _a.call(settings, scrollDirection);
+          setLeftOffsetFromTop(true);
+        }
+
+        return false;
+      });
+    }
+    /**
+     * calculate direction changes
+     */
+    // get difference between current and last scrollY position
+
+
+    var diff = scrollY - lastScrollPos.current; // get accumulated pixels since last direction change
+
+    var absAccPx = Math.abs(pxSinceLastSwitch.current); // check if direction changed. if not iterate accumulated pixels value
+
+    if (diff < 0 && pxSinceLastSwitch.current > 0) {
+      pxSinceLastSwitch.current = 0;
+    } else if (diff > 0 && pxSinceLastSwitch.current < 0) {
+      pxSinceLastSwitch.current = 0;
+    } else {
+      pxSinceLastSwitch.current += diff;
+    } // set current accumulated value
+
+
+    absAccPx = Math.abs(pxSinceLastSwitch.current); // set direction states
+
+    if (isTop) {
+      setScrollDirection(PageScrollDirection.DOWN);
+    } else if (diff < 0 && absAccPx >= directionUpOffset) {
+      setScrollDirection(PageScrollDirection.UP);
+    } else if (diff > 0 && absAccPx >= directionDownOffset) {
+      setScrollDirection(PageScrollDirection.DOWN);
+    } // save last scroll position
+
+
+    lastScrollPos.current = scrollY;
+  }, [directionDownOffset, directionUpOffset, scrollDirection, scrollState, settings]);
+  useEffect(function () {
+    // reset left offset flag on top
+    if (isTop) setLeftOffsetFromTop(false);
+  }, [isTop]);
+  return {
+    isTop: isTop,
+    scrollDirection: scrollDirection,
+    isInOffset: isInOffset,
+    leftOffsetFromTop: leftOffsetFromTop
+  };
+};
+
+var View$3 = styled.nav.withConfig({
+  displayName: "BarBreadCrumbs__View",
+  componentId: "sc-bian0m-0"
+})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n    min-width: 0;\n"], ["\n    min-width: 0;\n"])));
+var List = styled.ul.withConfig({
+  displayName: "BarBreadCrumbs__List",
+  componentId: "sc-bian0m-1"
+})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    min-width: inherit;\n\n    & > li:first-child {\n        flex: 1 0 auto;\n    }\n\n    @media ", " {\n        & > li + li {\n            margin-left: ", "px;\n        }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    min-width: inherit;\n\n    & > li:first-child {\n        flex: 1 0 auto;\n    }\n\n    @media ", " {\n        & > li + li {\n            margin-left: ", "px;\n        }\n    }\n"])), mq.semilarge, spacings.nudge);
+var ListItem = styled.li.withConfig({
+  displayName: "BarBreadCrumbs__ListItem",
+  componentId: "sc-bian0m-2"
+})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n    display: ", ";\n    min-width: inherit;\n\n    @media ", " {\n        display: flex;\n\n        & > * + * {\n            margin-left: ", "px;\n        }\n    }\n"], ["\n    display: ", ";\n    min-width: inherit;\n\n    @media ", " {\n        display: flex;\n\n        & > * + * {\n            margin-left: ", "px;\n        }\n    }\n"])), function (_a) {
+  var isCurrent = _a.isCurrent;
+  return isCurrent ? 'flex' : 'none';
+}, mq.semilarge, spacings.nudge);
+var NavLink$1 = styled(Link).withConfig({
+  displayName: "BarBreadCrumbs__NavLink",
+  componentId: "sc-bian0m-3"
+})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n    display: ", ";\n    align-items: center;\n    max-width: ", ";\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    ", "\n    color: ", ";\n    text-decoration: underline;\n\n    & > * {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    @media ", " {\n        display: ", ";\n    }\n"], ["\n    display: ", ";\n    align-items: center;\n    max-width: ", ";\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    ", "\n    color: ", ";\n    text-decoration: underline;\n\n    & > * {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    @media ", " {\n        display: ", ";\n    }\n"])), function (_a) {
+  var showOnMobile = _a.showOnMobile;
+  return showOnMobile ? 'inline-flex' : 'none';
+}, function (_a) {
+  var clamp = _a.clamp;
+  return clamp && '120px';
+}, copyStyle('copy', 'small'), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).text.inverted : getColors(theme).text.default;
+}, spacings.nudge, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).text.inverted : getColors(theme).text.default;
+}, mq.semilarge, function (_a) {
+  var showOnDesktop = _a.showOnDesktop;
+  return showOnDesktop ? 'inline-block' : 'none';
+});
+var NavLabel = styled.span.withConfig({
+  displayName: "BarBreadCrumbs__NavLabel",
+  componentId: "sc-bian0m-4"
+})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n    display: ", ";\n    align-items: center;\n    max-width: ", ";\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    ", "\n    color: ", ";\n    text-decoration: none;\n\n    & > * {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        display: ", ";\n    }\n"], ["\n    display: ", ";\n    align-items: center;\n    max-width: ", ";\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    ", "\n    color: ", ";\n    text-decoration: none;\n\n    & > * {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        display: ", ";\n    }\n"])), function (_a) {
+  var showOnMobile = _a.showOnMobile;
+  return showOnMobile ? 'inline-flex' : 'none';
+}, function (_a) {
+  var clamp = _a.clamp;
+  return clamp && '120px';
+}, copyStyle('copy', 'small'), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).text.inverted : getColors(theme).text.default;
+}, spacings.nudge, mq.semilarge, function (_a) {
+  var showOnDesktop = _a.showOnDesktop;
+  return showOnDesktop ? 'inline-block' : 'none';
+});
+var Seperator = styled(Copy).withConfig({
+  displayName: "BarBreadCrumbs__Seperator",
+  componentId: "sc-bian0m-5"
+})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n    display: none;\n\n    transition: color 0.2s ease-in-out;\n\n    @media ", " {\n        display: inline-block;\n    }\n"], ["\n    display: none;\n\n    transition: color 0.2s ease-in-out;\n\n    @media ", " {\n        display: inline-block;\n    }\n"])), mq.semilarge);
+var BackIconContainer = styled.span.withConfig({
+  displayName: "BarBreadCrumbs__BackIconContainer",
+  componentId: "sc-bian0m-6"
+})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n    flex: 0 0 auto;\n"], ["\n    flex: 0 0 auto;\n"])));
+
+var BreadcrumbItem = function (_a) {
+  var isInverted = _a.isInverted,
+      label = _a.label,
+      link = _a.link,
+      showOnMobile = _a.showOnMobile,
+      showOnDesktop = _a.showOnDesktop,
+      children = _a.children;
+
+  if (link === null || link === void 0 ? void 0 : link.href) {
+    return React__default.createElement(NavLink$1, __assign({}, link, {
+      isInverted: isInverted,
+      showOnMobile: showOnMobile,
+      showOnDesktop: showOnDesktop
+    }), children || label);
+  } else {
+    return React__default.createElement(NavLabel, {
+      isInverted: isInverted,
+      showOnMobile: showOnMobile,
+      showOnDesktop: showOnDesktop
+    }, children || label);
+  }
+};
+
+var BarBreadcrumbs = function (_a) {
+  var _b = _a.isInverted,
+      isInverted = _b === void 0 ? false : _b,
+      rootLink = _a.rootLink,
+      rootLabel = _a.rootLabel,
+      navItems = _a.navItems,
+      seperator = _a.seperator,
+      back = _a.back,
+      className = _a.className;
+  var currentNavPath = useMemo(function () {
+    return getCurrentNavPath(navItems, (rootLink === null || rootLink === void 0 ? void 0 : rootLink.href) ? [rootLink === null || rootLink === void 0 ? void 0 : rootLink.href] : []);
+  }, [navItems, rootLink === null || rootLink === void 0 ? void 0 : rootLink.href]);
+  var rootItem = {
+    uid: 'root',
+    label: rootLabel || 'Home',
+    link: rootLink
+  };
+  return React__default.createElement(View$3, {
+    "aria-label": "breadcrumbs",
+    className: className
+  }, React__default.createElement(List, null, React__default.createElement(ListItem, null, React__default.createElement(BreadcrumbItem, __assign({
+    showOnDesktop: true,
+    isInverted: isInverted
+  }, rootItem))), currentNavPath === null || currentNavPath === void 0 ? void 0 : currentNavPath.map(function (item, i) {
+    var isCurrent = i === currentNavPath.length - 1;
+    var prev = i - 1 >= 0 ? currentNavPath[i - 1] : rootItem;
+    return React__default.createElement(ListItem, {
+      key: i,
+      isCurrent: isCurrent
+    }, React__default.createElement(Seperator, {
+      size: "small",
+      isInverted: isInverted
+    }, seperator ? seperator({
+      isInverted: isInverted
+    }) : '/'), isCurrent ? React__default.createElement(React__default.Fragment, null, prev && React__default.createElement(BreadcrumbItem, __assign({}, prev, {
+      showOnMobile: true,
+      isInverted: isInverted
+    }), React__default.createElement(BackIconContainer, null, back ? back({
+      isInverted: isInverted
+    }) : React__default.createElement(AngleLeft, null)), React__default.createElement("span", null, prev.label)), React__default.createElement(BreadcrumbItem, __assign({}, item, {
+      link: {},
+      showOnDesktop: true,
+      isInverted: isInverted
+    }))) : React__default.createElement(BreadcrumbItem, __assign({}, item, {
+      showOnDesktop: true,
+      isInverted: isInverted
+    })));
+  })));
+};
+var templateObject_1$7, templateObject_2$5, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2;
+
+var Column = styled.div.withConfig({
+  displayName: "BarColumn__Column",
+  componentId: "sc-1sqtyni-0"
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n    flex: ", ";\n\n    padding: ", "px 0;\n    min-width: -webkit-min-content;\n    align-self: ", ";\n\n    text-align: center;\n    color: ", ";\n\n    &:first-child {\n        text-align: left;\n    }\n\n    &:last-child {\n        text-align: right;\n    }\n\n    &:not(:first-child):not(:last-child) {\n        margin: 0 ", "px;\n    }\n"], ["\n    flex: ", ";\n\n    padding: ", "px 0;\n    min-width: -webkit-min-content;\n    align-self: ", ";\n\n    text-align: center;\n    color: ", ";\n\n    &:first-child {\n        text-align: left;\n    }\n\n    &:last-child {\n        text-align: right;\n    }\n\n    &:not(:first-child):not(:last-child) {\n        margin: 0 ", "px;\n    }\n"])), function (_a) {
+  var takeSpace = _a.takeSpace;
+  return takeSpace ? 1 : undefined;
+}, spacings.nudge, function (_a) {
+  var vAlign = _a.vAlign;
+
+  switch (vAlign) {
+    case 'center':
+      return 'center';
+
+    case 'bottom':
+      return 'flex-end';
+
+    case 'top':
+      return 'flex-start';
+
+    default:
+      return undefined;
+  }
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).text.inverted : getColors(theme).text.inverted;
+}, spacings.nudge * 2);
+var templateObject_1$6;
+
+var View$2 = styled(Link).withConfig({
+  displayName: "BarLogo__View",
+  componentId: "sc-jul8nq-0"
+})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n    display: block;\n    display: flex;\n    justify-content: center;\n    min-width: 60px;\n    max-width: 100%;\n    max-height: 100%;\n\n    &:focus {\n        outline: 2px solid ", ";\n        outline-offset: 1px;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    display: block;\n    display: flex;\n    justify-content: center;\n    min-width: 60px;\n    max-width: 100%;\n    max-height: 100%;\n\n    &:focus {\n        outline: 2px solid ", ";\n        outline-offset: 1px;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+});
+var Logo = styled(Image).withConfig({
+  displayName: "BarLogo__Logo",
+  componentId: "sc-jul8nq-1"
+})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    width: auto;\n    height: 100%;\n    object-fit: contain;\n"], ["\n    width: auto;\n    height: 100%;\n    object-fit: contain;\n"])));
+
+var BarLogo = function (_a) {
+  var link = _a.link,
+      logo = _a.logo,
+      className = _a.className;
+  return React__default.createElement(View$2, __assign({}, link, {
+    className: className
+  }), (logo === null || logo === void 0 ? void 0 : logo.small) && React__default.createElement(Logo, __assign({}, logo, {
+    coverSpace: false,
+    ratios: undefined,
+    showPlaceholder: false
+  })));
+};
+var templateObject_1$5, templateObject_2$4;
+
+var Toggle = styled.button.withConfig({
+  displayName: "BarMenuToggle__Toggle",
+  componentId: "sc-5pjose-0"
+})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    background: transparent;\n    border: none;\n    color: ", ";\n\n    padding: ", "px;\n    margin-left: -", "px;\n    outline: none;\n\n    cursor: pointer;\n\n    transition: color 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    &:focus > * {\n        outline: dotted 2px\n            ", ";\n        outline-offset: 4px;\n\n        color: ", ";\n    }\n\n    &:focus:not(:focus-visible) > * {\n        outline: none;\n    }\n"], ["\n    background: transparent;\n    border: none;\n    color: ", ";\n\n    padding: ", "px;\n    margin-left: -", "px;\n    outline: none;\n\n    cursor: pointer;\n\n    transition: color 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    &:focus > * {\n        outline: dotted 2px\n            ", ";\n        outline-offset: 4px;\n\n        color: ", ";\n    }\n\n    &:focus:not(:focus-visible) > * {\n        outline: none;\n    }\n"])), function (_a) {
+  var isInverted = _a.isInverted,
+      theme = _a.theme;
+  return isInverted ? getColors(theme).text.inverted : getColors(theme).text.default;
+}, spacings.nudge, spacings.nudge, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).primary.invertedHover : getColors(theme).primary.hover;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).primary.invertedHover : getColors(theme).primary.hover;
+});
+
+var BarMenuToggle = function (_a) {
+  var isInverted = _a.isInverted,
+      _b = _a.isExpanded,
+      isExpanded = _b === void 0 ? false : _b,
+      onClick = _a.onClick,
+      children = _a.children,
+      className = _a.className;
+  return React__default.createElement(Toggle, {
+    isInverted: isInverted,
+    "aria-expanded": isExpanded,
+    "aria-label": isExpanded ? 'close menu' : 'open menu',
+    "aria-haspopup": "true",
+    "aria-controls": "mainMenu",
+    onClick: onClick,
+    className: className
+  }, children);
+};
+var templateObject_1$4;
+
+var View$1 = styled.nav.withConfig({
+  displayName: "BarNavList__View",
+  componentId: "sc-1r50tdm-0"
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n\n    margin: 0 -", "px;\n\n    & > * + * {\n        &:before {\n            content: '';\n            display: block;\n            position: absolute;\n            top: 3px;\n            left: 0;\n            height: 1em;\n            width: 2px;\n            background-color: ", ";\n\n            transition: background-color 0.2s ease-in-out;\n        }\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n\n    margin: 0 -", "px;\n\n    & > * + * {\n        &:before {\n            content: '';\n            display: block;\n            position: absolute;\n            top: 3px;\n            left: 0;\n            height: 1em;\n            width: 2px;\n            background-color: ", ";\n\n            transition: background-color 0.2s ease-in-out;\n        }\n    }\n"])), spacings.nudge, function (_a) {
+  var isInverted = _a.isInverted,
+      theme = _a.theme;
+  return isInverted ? getColors(theme).text.inverted : getColors(theme).text.default;
+});
+var NavLink = styled(Link).withConfig({
+  displayName: "BarNavList__NavLink",
+  componentId: "sc-1r50tdm-1"
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n    display: inline-block;\n    position: relative;\n    padding: 0 ", "px;\n\n    ", "\n    font-weight: ", ";\n\n    color: ", ";\n    text-decoration: none;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n            text-decoration: underline;\n        }\n    }\n"], ["\n    display: inline-block;\n    position: relative;\n    padding: 0 ", "px;\n\n    ", "\n    font-weight: ", ";\n\n    color: ", ";\n    text-decoration: none;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n            text-decoration: underline;\n        }\n    }\n"])), spacings.nudge, copyStyle('copy', 'medium'), function (_a) {
+  var isActive = _a.isActive;
+  return isActive && '700';
+}, function (_a) {
+  var isInverted = _a.isInverted,
+      theme = _a.theme;
+  return isInverted ? getColors(theme).text.inverted : getColors(theme).text.default;
+}, function (_a) {
+  var isInverted = _a.isInverted,
+      theme = _a.theme;
+  return isInverted ? getColors(theme).text.inverted : getColors(theme).text.default;
+});
+
+var BarNavList = function (_a) {
+  var isInverted = _a.isInverted,
+      navLinks = _a.navLinks,
+      className = _a.className;
+  return React__default.createElement(View$1, {
+    isInverted: isInverted,
+    className: className
+  }, navLinks === null || navLinks === void 0 ? void 0 : navLinks.map(function (item, i) {
+    return React__default.createElement(NavLink, __assign({
+      key: i
+    }, item.link, {
+      isInverted: isInverted,
+      isActive: item.isCurrent
+    }), item.label);
+  }));
+};
+var templateObject_1$3, templateObject_2$3;
+
+var Header$2 = styled.div.withConfig({
+  displayName: "MenuHeader__Header",
+  componentId: "sc-1tk7hrl-0"
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n\n    padding: 0 ", "px;\n    padding-top: ", "px;\n"], ["\n    display: flex;\n    align-items: center;\n\n    padding: 0 ", "px;\n    padding-top: ", "px;\n"])), spacings.nudge * 2, spacings.nudge * 5);
+var LanguageCol = styled.div.withConfig({
+  displayName: "MenuHeader__LanguageCol",
+  componentId: "sc-1tk7hrl-1"
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    display: block;\n    margin-left: ", "px;\n    margin-top: 2px;\n"], ["\n    display: block;\n    margin-left: ", "px;\n    margin-top: 2px;\n"])), spacings.nudge * 3);
+
+var MenuHeader = function (_a) {
+  var isInverted = _a.isInverted,
+      customToggle = _a.customToggle,
+      menuStates = _a.menuStates,
+      langs = _a.langs,
+      action = _a.action;
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Header$2, null, React__default.createElement(BarMenuToggle, {
+    isInverted: isInverted,
+    isExpanded: true,
+    onClick: menuStates === null || menuStates === void 0 ? void 0 : menuStates.closeMenu
+  }, customToggle ? customToggle({
+    isInverted: isInverted
+  }) : React__default.createElement(Cross, {
+    ariaHidden: true
+  })), isValidArray(langs, false) && React__default.createElement(LanguageCol, null, React__default.createElement(LanguageSwitcher, {
+    isInverted: isInverted,
+    langs: langs
+  })), action && action(__assign({
+    isInverted: isInverted
+  }, menuStates))));
+};
+var templateObject_1$2, templateObject_2$2;
+
+var navigationStyle = function (type) {
+  return css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-style: ", ";\n    ", "\n    line-height: ", ";\n    letter-spacing: ", ";\n    text-transform: ", ";\n    text-decoration: ", ";\n"], ["\n    font-family: ", ";\n    font-weight: ", ";\n    font-style: ", ";\n    ", "\n    line-height: ", ";\n    letter-spacing: ", ";\n    text-transform: ", ";\n    text-decoration: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return getFonts(theme).navigation[type].family;
+  }, function (_a) {
+    var theme = _a.theme;
+    return getFonts(theme).navigation[type].weight;
+  }, function (_a) {
+    var theme = _a.theme;
+    return getFonts(theme).navigation[type].style;
+  }, function (_a) {
+    var theme = _a.theme;
+    return withRange(getFonts(theme).navigation[type].size, 'font-size');
+  }, function (_a) {
+    var theme = _a.theme;
+    return getFonts(theme).navigation[type].lineHeight;
+  }, function (_a) {
+    var theme = _a.theme;
+    return getFonts(theme).navigation[type].letterSpacing;
+  }, function (_a) {
+    var theme = _a.theme;
+    return getFonts(theme).navigation[type].textTransform;
+  }, function (_a) {
+    var theme = _a.theme;
+    return getFonts(theme).navigation[type].textDecoration;
+  });
+};
+
+var Backdrop = styled.div.withConfig({
+  displayName: "MenuFlyout__Backdrop",
+  componentId: "sc-19pnt0u-0"
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    background-color: rgba(0, 0, 0, 0.5);\n    opacity: ", ";\n    pointer-events: ", ";\n    z-index: 101;\n\n    transition: opacity 0.3s ease-in-out;\n\n    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {\n        backdrop-filter: ", ";\n    }\n"], ["\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    background-color: rgba(0, 0, 0, 0.5);\n    opacity: ", ";\n    pointer-events: ", ";\n    z-index: 101;\n\n    transition: opacity 0.3s ease-in-out;\n\n    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {\n        backdrop-filter: ", ";\n    }\n"])), function (_a) {
+  var isOpen = _a.isOpen;
+  return isOpen ? 1 : 0;
+}, function (_a) {
+  var isOpen = _a.isOpen;
+  return isOpen ? 'all' : 'none';
+}, function (_a) {
+  var filter = _a.filter;
+  return filter;
+});
+var Stage = styled.div.withConfig({
+  displayName: "MenuFlyout__Stage",
+  componentId: "sc-19pnt0u-1"
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    position: fixed;\n    top: 0;\n    left: ", ";\n    height: 100vh;\n    width: 100vw;\n    max-width: ", "px;\n    pointer-events: none;\n\n    z-index: 102;\n\n    transform: translate(", ", 0px);\n\n    transition: transform 0.4s ease-in-out, left 0.4s ease-in-out;\n    will-change: transform;\n"], ["\n    position: fixed;\n    top: 0;\n    left: ", ";\n    height: 100vh;\n    width: 100vw;\n    max-width: ", "px;\n    pointer-events: none;\n\n    z-index: 102;\n\n    transform: translate(", ", 0px);\n\n    transition: transform 0.4s ease-in-out, left 0.4s ease-in-out;\n    will-change: transform;\n"])), function (_a) {
+  var isOpen = _a.isOpen;
+  return isOpen ? '50%' : '0px';
+}, function (_a) {
+  var clampWidth = _a.clampWidth;
+  return clampWidth === 'content' ? spacings.wrapper : spacings.wrapperLarge;
+}, function (_a) {
+  var isOpen = _a.isOpen;
+  return isOpen ? '-50%' : '-100%';
+});
+var Flyout = styled.div.withConfig({
+  displayName: "MenuFlyout__Flyout",
+  componentId: "sc-19pnt0u-2"
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    visibility: visible;\n\n    position: relative;\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n\n    pointer-events: ", ";\n\n    /** Animation to disable keyboard tabbing if flyout is closed */\n    animation: ", ";\n\n    @media ", " {\n        width: 384px;\n    }\n\n    @media ", " {\n        width: 460px;\n    }\n\n    &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 2px;\n        height: 100%;\n        width: 40vw;\n        background-color: ", ";\n        z-index: -1;\n\n        transform: translateX(-100%);\n    }\n\n    @keyframes hideAnim {\n        to {\n            visibility: hidden;\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    visibility: visible;\n\n    position: relative;\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n\n    pointer-events: ", ";\n\n    /** Animation to disable keyboard tabbing if flyout is closed */\n    animation: ", ";\n\n    @media ", " {\n        width: 384px;\n    }\n\n    @media ", " {\n        width: 460px;\n    }\n\n    &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 2px;\n        height: 100%;\n        width: 40vw;\n        background-color: ", ";\n        z-index: -1;\n\n        transform: translateX(-100%);\n    }\n\n    @keyframes hideAnim {\n        to {\n            visibility: hidden;\n        }\n    }\n"])), function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.light;
+}, function (_a) {
+  var isOpen = _a.isOpen;
+  return isOpen ? 'all' : 'none';
+}, function (_a) {
+  var isOpen = _a.isOpen;
+  return !isOpen && 'hideAnim 0s ease-in 2s forwards';
+}, mq.medium, mq.large, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.light;
+});
+var getMenuHeaderHeights = function (theme, size) {
+  var heights = size === 'large' ? getGlobals(theme).navigation.menu.headerHeight.large : getGlobals(theme).navigation.menu.headerHeight.small; // if second value is not defined use first array index value for both
+
+  return [clampValue(heights[0], 0), clampValue((heights === null || heights === void 0 ? void 0 : heights[1]) === undefined ? heights[0] : heights[1], 0)];
+};
+var hasMenuHeader = function (theme) {
+  var largeHeights = getMenuHeaderHeights(theme, 'large');
+  var smallHeights = getMenuHeaderHeights(theme, 'small');
+  return largeHeights[0] > 0 || largeHeights[1] > 0 || smallHeights[0] > 0 || smallHeights[1] > 0;
+};
+var Header$1 = styled.div.withConfig({
+  displayName: "MenuFlyout__Header",
+  componentId: "sc-19pnt0u-3"
+})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n    flex: 0 0\n        ", "px;\n    height: ", "px;\n\n    @media ", " {\n        height: ", "px;\n        flex: 0 0\n            ", "px;\n    }\n"], ["\n    flex: 0 0\n        ", "px;\n    height: ", "px;\n\n    @media ", " {\n        height: ", "px;\n        flex: 0 0\n            ", "px;\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      navBarSize = _a.navBarSize;
+  return getMenuHeaderHeights(theme, navBarSize)[0];
+}, function (_a) {
+  var theme = _a.theme,
+      navBarSize = _a.navBarSize;
+  return getMenuHeaderHeights(theme, navBarSize)[0];
+}, mq.semilarge, function (_a) {
+  var theme = _a.theme,
+      navBarSize = _a.navBarSize;
+  return getMenuHeaderHeights(theme, navBarSize)[1];
+}, function (_a) {
+  var theme = _a.theme,
+      navBarSize = _a.navBarSize;
+  return getMenuHeaderHeights(theme, navBarSize)[1];
+});
+var ScrollContainer = styled.div.withConfig({
+  displayName: "MenuFlyout__ScrollContainer",
+  componentId: "sc-19pnt0u-4"
+})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n    display: block;\n    max-height: 100%;\n    min-height: 0;\n"], ["\n    display: block;\n    max-height: 100%;\n    min-height: 0;\n"])));
+var ScrollArea = styled.div.withConfig({
+  displayName: "MenuFlyout__ScrollArea",
+  componentId: "sc-19pnt0u-5"
+})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n    display: block;\n    width: 100vw;\n    max-height: 100%;\n    overflow: auto;\n    -ms-overflow-style: none; /* for Internet Explorer, Edge */\n    scrollbar-width: none; /* for Firefox */\n    overflow-y: scroll;\n\n    &::-webkit-scrollbar {\n        display: none; /* for Chrome, Safari, and Opera */\n    }\n\n    & > *:last-child {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        max-width: 100%;\n    }\n"], ["\n    display: block;\n    width: 100vw;\n    max-height: 100%;\n    overflow: auto;\n    -ms-overflow-style: none; /* for Internet Explorer, Edge */\n    scrollbar-width: none; /* for Firefox */\n    overflow-y: scroll;\n\n    &::-webkit-scrollbar {\n        display: none; /* for Chrome, Safari, and Opera */\n    }\n\n    & > *:last-child {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        max-width: 100%;\n    }\n"])), spacings.nudge * 10, mq.medium); //#region NAVIGATION
+//#region NAVIGATION.Containers
+
+var NavView = styled.nav.withConfig({
+  displayName: "MenuFlyout__NavView",
+  componentId: "sc-19pnt0u-6"
+})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject([""], [""])));
+
+var Navigation$1 = function (_a) {
+  var children = _a.children;
+  return React__default.createElement(NavView, {
+    "aria-label": "menu"
+  }, children);
+};
+
+var NavList = styled.ul.withConfig({
+  displayName: "MenuFlyout__NavList",
+  componentId: "sc-19pnt0u-7"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    margin: ", "px 0;\n\n    border-bottom: ", ";\n"], ["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    margin: ", "px 0;\n\n    border-bottom: ", ";\n"])), spacings.nudge * 2, function (_a) {
+  var hasNonFeaturedItems = _a.hasNonFeaturedItems,
+      theme = _a.theme;
+  return hasNonFeaturedItems && "solid 2px ".concat(getColors(theme).elementBg.medium);
+}); // #endregion
+// #region NAVIGATION.NavItem
+
+var NavItemView = styled.li.withConfig({
+  displayName: "MenuFlyout__NavItemView",
+  componentId: "sc-19pnt0u-8"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    flex: 0 0 80px;\n\n    height: 100%;\n    background-color: ", ";\n\n    transition: background-color 0.2s ease-in-out;\n\n    li + &:not([data-featured='true']) {\n        border-top: solid 2px ", ";\n    }\n\n    li[data-featured='true'] + &:not([data-featured='true']) {\n        margin-top: ", "px;\n    }\n\n    &:not([data-featured='true']):first-child {\n        border-top: solid 2px ", ";\n    }\n\n    @media ", " {\n        flex-direction: row;\n        justify-content: flex-start;\n        align-items: center;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            background-color: ", ";\n        }\n    }\n"], ["\n    flex: 0 0 80px;\n\n    height: 100%;\n    background-color: ", ";\n\n    transition: background-color 0.2s ease-in-out;\n\n    li + &:not([data-featured='true']) {\n        border-top: solid 2px ", ";\n    }\n\n    li[data-featured='true'] + &:not([data-featured='true']) {\n        margin-top: ", "px;\n    }\n\n    &:not([data-featured='true']):first-child {\n        border-top: solid 2px ", ";\n    }\n\n    @media ", " {\n        flex-direction: row;\n        justify-content: flex-start;\n        align-items: center;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            background-color: ", ";\n        }\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      isActive = _a.isActive;
+  return isActive ? getColors(theme).elementBg.medium : getColors(theme).elementBg.light;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.medium;
+}, spacings.spacer, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.medium;
+}, mq.semilarge, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.medium;
+});
+var NavItemContent = styled.span.withConfig({
+  displayName: "MenuFlyout__NavItemContent",
+  componentId: "sc-19pnt0u-9"
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    position: relative;\n    min-height: 80px;\n\n    padding: 0 ", "px;\n\n    ", "\n    color: ", ";\n    text-decoration: ", ";\n"], ["\n    display: flex;\n    align-items: center;\n    position: relative;\n    min-height: 80px;\n\n    padding: 0 ", "px;\n\n    ", "\n    color: ", ";\n    text-decoration: ", ";\n"])), spacings.nudge * 2, function (_a) {
+  var isFeatured = _a.isFeatured;
+  return navigationStyle(isFeatured ? 'featured' : 'main');
+}, function (_a) {
+  var theme = _a.theme,
+      isFeatured = _a.isFeatured;
+  return isFeatured ? getFonts(theme).navigation.featured.color : getFonts(theme).navigation.main.color;
+}, function (_a) {
+  var isCurrent = _a.isCurrent;
+  return isCurrent ? 'underline' : 'none';
+});
+var NavItemIcon = styled.span.withConfig({
+  displayName: "MenuFlyout__NavItemIcon",
+  componentId: "sc-19pnt0u-10"
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    width: 48px;\n    max-width: 48px;\n\n    * {\n        width: 100%;\n        max-width: 48px;\n        max-height: 80px;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    width: 48px;\n    max-width: 48px;\n\n    * {\n        width: 100%;\n        max-width: 48px;\n        max-height: 80px;\n    }\n"])));
+var NavItemLabel = styled.span.withConfig({
+  displayName: "MenuFlyout__NavItemLabel",
+  componentId: "sc-19pnt0u-11"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    display: block;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    &:not(:first-child) {\n        margin-left: ", "px;\n    }\n"], ["\n    display: block;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    &:not(:first-child) {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2);
+var NavItemCollapse = styled.span.withConfig({
+  displayName: "MenuFlyout__NavItemCollapse",
+  componentId: "sc-19pnt0u-12"
+})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    display: block;\n    margin-left: auto;\n    padding-left: ", "px;\n"], ["\n    display: block;\n    margin-left: auto;\n    padding-left: ", "px;\n"])), spacings.nudge * 3);
+var NavItemCollapseIcon = styled(AngleRight).withConfig({
+  displayName: "MenuFlyout__NavItemCollapseIcon",
+  componentId: "sc-19pnt0u-13"
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    transform: ", ";\n\n    transition: transform 0.2s ease-in-out;\n\n    @media ", " {\n        transform: rotate(0deg);\n    }\n"], ["\n    transform: ", ";\n\n    transition: transform 0.2s ease-in-out;\n\n    @media ", " {\n        transform: rotate(0deg);\n    }\n"])), function (_a) {
+  var isCollapsed = _a.isCollapsed;
+  return !isCollapsed && 'rotate(90deg)';
+}, mq.semilarge);
+var NavItemLink = styled(Link).withConfig({
+  displayName: "MenuFlyout__NavItemLink",
+  componentId: "sc-19pnt0u-14"
+})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    &:focus {\n        outline: solid 2px\n            ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    &:focus {\n        outline: solid 2px\n            ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+});
+var NavItemButton = styled.button.withConfig({
+  displayName: "MenuFlyout__NavItemButton",
+  componentId: "sc-19pnt0u-15"
+})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    background: none;\n    border: none;\n    border-bottom: solid 2px ", ";\n    width: 100%;\n    cursor: pointer;\n    outline: none;\n    border-radius: 0px;\n\n    &:focus {\n        outline: solid 2px ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    @media ", " {\n        border-bottom: none;\n    }\n"], ["\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    background: none;\n    border: none;\n    border-bottom: solid 2px ", ";\n    width: 100%;\n    cursor: pointer;\n    outline: none;\n    border-radius: 0px;\n\n    &:focus {\n        outline: solid 2px ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    @media ", " {\n        border-bottom: none;\n    }\n"])), function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.light;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+}, mq.semilarge);
+var SubNavList = styled.ul.withConfig({
+  displayName: "MenuFlyout__SubNavList",
+  componentId: "sc-19pnt0u-16"
+})(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: ", ";\n    position: relative;\n    margin: 0;\n    padding: 0;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    list-style: none;\n\n    max-height: 100%;\n    overflow: auto;\n    -ms-overflow-style: none; /* for Internet Explorer, Edge */\n    scrollbar-width: none; /* for Firefox */\n    overflow-y: scroll;\n\n    &::-webkit-scrollbar {\n        display: none; /* for Chrome, Safari, and Opera */\n    }\n\n    background-color: ", ";\n\n    @media ", " {\n        position: absolute;\n        top: 0;\n        left: calc(100% - 1px);\n        width: 100vw;\n        height: 100%;\n        max-width: 384px;\n        padding-left: ", "px;\n    }\n"], ["\n    display: ", ";\n    position: relative;\n    margin: 0;\n    padding: 0;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    list-style: none;\n\n    max-height: 100%;\n    overflow: auto;\n    -ms-overflow-style: none; /* for Internet Explorer, Edge */\n    scrollbar-width: none; /* for Firefox */\n    overflow-y: scroll;\n\n    &::-webkit-scrollbar {\n        display: none; /* for Chrome, Safari, and Opera */\n    }\n\n    background-color: ", ";\n\n    @media ", " {\n        position: absolute;\n        top: 0;\n        left: calc(100% - 1px);\n        width: 100vw;\n        height: 100%;\n        max-width: 384px;\n        padding-left: ", "px;\n    }\n"])), function (_a) {
+  var isActive = _a.isActive;
+  return !isActive && 'none';
+}, function (_a) {
+  var isIndented = _a.isIndented;
+  return isIndented ? 48 + spacings.nudge * 4 : spacings.nudge * 2;
+}, spacings.nudge * 2, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.medium;
+}, mq.semilarge, spacings.nudge * 3);
+var NavigationItem = forwardRef(function (_a, ref) {
+  var isCurrent = _a.isCurrent,
+      isActive = _a.isActive,
+      isFeatured = _a.isFeatured,
+      label = _a.label,
+      link = _a.link,
+      icon = _a.icon,
+      subNavTitle = _a.subNavTitle,
+      navBarSize = _a.navBarSize,
+      onItemClick = _a.onItemClick,
+      collapseIcon = _a.collapseIcon,
+      canFocus = _a.canFocus,
+      children = _a.children;
+  var hasSubItems = !!children && React__default.Children.count(children) > 0;
+  return React__default.createElement(NavItemView, {
+    ref: ref,
+    isActive: isActive,
+    "data-featured": isFeatured
+  }, React__default.createElement(NavItemContent, {
+    isCurrent: isCurrent,
+    isFeatured: isFeatured
+  }, icon && React__default.createElement(NavItemIcon, null, icon), label && React__default.createElement(NavItemLabel, null, label), hasSubItems && React__default.createElement(NavItemCollapse, null, collapseIcon ? collapseIcon({
+    isCollapsed: !isActive
+  }) : React__default.createElement(NavItemCollapseIcon, {
+    ariaHidden: true,
+    isCollapsed: !isActive
+  })), !hasSubItems && (link === null || link === void 0 ? void 0 : link.href) && React__default.createElement(NavItemLink, __assign({}, link, {
+    ariaLabel: label,
+    tabIndex: !canFocus ? -1 : undefined
+  })), hasSubItems && React__default.createElement(React__default.Fragment, null, React__default.createElement(NavItemButton, {
+    "aria-label": label,
+    "aria-expanded": isActive,
+    onClick: onItemClick,
+    tabIndex: !canFocus ? -1 : undefined
+  }))), hasSubItems && React__default.createElement(SubNavList, {
+    isActive: isActive,
+    isIndented: !!icon
+  }, (link === null || link === void 0 ? void 0 : link.href) && React__default.createElement(MenuNav.SubItem, {
+    key: "overview",
+    link: link,
+    label: subNavTitle || 'Overview',
+    navBarSize: navBarSize,
+    canFocus: canFocus
+  }), children));
+});
+NavigationItem.displayName = 'NavigationItem'; //#endregion NAVIGATION.NavItem
+//#region NAVIGATION.SubNavItem
+
+var SubNavItem = styled.li.withConfig({
+  displayName: "MenuFlyout__SubNavItem",
+  componentId: "sc-19pnt0u-17"
+})(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    height: 56px;\n\n    ", "\n    color: ", ";\n\n    @media ", " {\n        &:first-child {\n            margin-top: ", "px;\n        }\n\n        &:last-child {\n            margin-bottom: ", "px;\n        }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    height: 56px;\n\n    ", "\n    color: ", ";\n\n    @media ", " {\n        &:first-child {\n            margin-top: ", "px;\n        }\n\n        &:last-child {\n            margin-bottom: ", "px;\n        }\n    }\n"])), navigationStyle('main'), function (_a) {
+  var theme = _a.theme;
+  return getFonts(theme).navigation.sub.color;
+}, mq.semilarge, function (_a) {
+  var theme = _a.theme,
+      navBarSize = _a.navBarSize;
+  return getMenuHeaderHeights(theme, navBarSize)[1] + spacings.nudge * 2;
+}, spacings.spacer);
+var SubNavLink = styled(Link).withConfig({
+  displayName: "MenuFlyout__SubNavLink",
+  componentId: "sc-19pnt0u-18"
+})(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    /* width: 100%; */\n    padding: ", "px 0;\n    outline-color: ", ";\n    vertical-align: middle;\n\n    ", "\n    color: ", ";\n    text-decoration: ", ";\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    & > * {\n        margin: 2px;\n    }\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus > * {\n        outline: dashed 1px\n            ", ";\n        outline-offset: 1px;\n    }\n\n    &:focus:not(:focus-visible) > * {\n        outline: none;\n    }\n"], ["\n    /* width: 100%; */\n    padding: ", "px 0;\n    outline-color: ", ";\n    vertical-align: middle;\n\n    ", "\n    color: ", ";\n    text-decoration: ", ";\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    & > * {\n        margin: 2px;\n    }\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus > * {\n        outline: dashed 1px\n            ", ";\n        outline-offset: 1px;\n    }\n\n    &:focus:not(:focus-visible) > * {\n        outline: none;\n    }\n"])), spacings.nudge, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+}, navigationStyle('sub'), function (_a) {
+  var theme = _a.theme;
+  return getFonts(theme).navigation.sub.color;
+}, function (_a) {
+  var isCurrent = _a.isCurrent;
+  return isCurrent ? 'underline' : 'none';
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+});
+var NavigationSubItem = forwardRef(function (_a, ref) {
+  var isCurrent = _a.isCurrent,
+      label = _a.label,
+      link = _a.link,
+      navBarSize = _a.navBarSize,
+      canFocus = _a.canFocus;
+  return React__default.createElement(SubNavItem, {
+    ref: ref,
+    navBarSize: navBarSize
+  }, React__default.createElement(SubNavLink, __assign({
+    tabIndex: !canFocus ? -1 : undefined,
+    isCurrent: isCurrent
+  }, link), React__default.createElement("span", null, label)));
+});
+NavigationSubItem.displayName = 'NavigationSubItem'; //#endregion
+//#region NAVIGATION.SecondaryNavigation
+
+var SecondaryNavList = styled.ul.withConfig({
+  displayName: "MenuFlyout__SecondaryNavList",
+  componentId: "sc-19pnt0u-19"
+})(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n    display: block;\n    list-style: none;\n    padding: 0 ", "px;\n    margin: ", "px 0;\n\n    li {\n        display: flex;\n        margin: 0;\n        padding: 0;\n    }\n"], ["\n    display: block;\n    list-style: none;\n    padding: 0 ", "px;\n    margin: ", "px 0;\n\n    li {\n        display: flex;\n        margin: 0;\n        padding: 0;\n    }\n"])), spacings.nudge * 2, spacings.spacer);
+var SecondaryNavLink = styled(Link).withConfig({
+  displayName: "MenuFlyout__SecondaryNavLink",
+  componentId: "sc-19pnt0u-20"
+})(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n    display: inline-block;\n    padding: ", "px 0;\n    outline-color: ", ";\n    vertical-align: middle;\n\n    ", "\n    color: ", ";\n    text-decoration: ", ";\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    &:focus {\n        outline: dashed 2px\n            ", ";\n        outline-offset: 1px;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    display: inline-block;\n    padding: ", "px 0;\n    outline-color: ", ";\n    vertical-align: middle;\n\n    ", "\n    color: ", ";\n    text-decoration: ", ";\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    &:focus {\n        outline: dashed 2px\n            ", ";\n        outline-offset: 1px;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), spacings.nudge * 0.5, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+}, navigationStyle('secondary'), function (_a) {
+  var theme = _a.theme;
+  return getFonts(theme).navigation.secondary.color;
+}, function (_a) {
+  var isCurrent = _a.isCurrent;
+  return isCurrent ? 'underline' : 'none';
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+});
+
+var SecondaryNavigation = function (_a) {
+  var items = _a.items,
+      canFocus = _a.canFocus;
+  return items && items.length > 0 ? React__default.createElement(SecondaryNavList, null, items === null || items === void 0 ? void 0 : items.filter(function (n) {
+    var _a;
+
+    return (_a = n.link) === null || _a === void 0 ? void 0 : _a.href;
+  }).map(function (item, i) {
+    var _a;
+
+    return React__default.createElement("li", {
+      key: i
+    }, React__default.createElement(SecondaryNavLink, {
+      isCurrent: item.isCurrent,
+      href: (_a = item.link) === null || _a === void 0 ? void 0 : _a.href,
+      tabIndex: !canFocus ? -1 : undefined
+    }, item.label));
+  })) : null;
+}; //#endregion
+
+
+var MenuNav = {
+  View: Navigation$1,
+  List: NavList,
+  Item: NavigationItem,
+  SubItem: NavigationSubItem,
+  SubList: SecondaryNavigation
+};
+
+var menuFilter = function (item) {
+  return !item.hideFromMenu && item.uid && item.label;
+};
+
+var MenuFlyout = function (_a) {
+  var isOpen = _a.isOpen,
+      clampWidth = _a.clampWidth,
+      isIndexPage = _a.isIndexPage,
+      mainNavigation = _a.mainNavigation,
+      subNavigation = _a.subNavigation,
+      navBarSize = _a.navBarSize,
+      subNavTitle = _a.subNavTitle,
+      _b = _a.backdropFilter,
+      backdropFilter = _b === void 0 ? 'grayscale(1)' : _b,
+      header = _a.header,
+      footer = _a.footer,
+      onClose = _a.onClose,
+      collapseIcon = _a.collapseIcon,
+      navItemsHeader = _a.navItemsHeader;
+  var theme = useLibTheme().theme;
+  var flyoutRef = useRef(null);
+  var hasHeader = useMemo(function () {
+    return hasMenuHeader(theme);
+  }, [theme]);
+  var mainList = useMemo(function () {
+    var featured = (mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.filter(function (n) {
+      return n.isFeatured;
+    })) || [];
+    var main = (mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.filter(function (n) {
+      return !n.isFeatured;
+    })) || [];
+    return __spreadArray(__spreadArray([], featured, true), main, true).filter(menuFilter);
+  }, [mainNavigation]);
+  var hasNonFeaturedItems = useMemo(function () {
+    var main = (mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.filter(function (n) {
+      return !n.isFeatured;
+    })) || [];
+    return main && main.length > 0;
+  }, [mainNavigation]);
+  var subList = useMemo(function () {
+    return subNavigation === null || subNavigation === void 0 ? void 0 : subNavigation.filter(menuFilter);
+  }, [subNavigation]);
+
+  var _c = useState(function () {
+    var _a, _b;
+
+    var initial = (_b = (_a = getCurrentNavItem(mainList, true)) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.uid;
+    return initial ? [initial] : [''];
+  }),
+      activeItems = _c[0],
+      setActiveItems = _c[1];
+
+  var _d = useState(null),
+      currentNavEl = _d[0],
+      setCurrentNavEl = _d[1];
+
+  var _e = useState(null),
+      currentSubNavEl = _e[0],
+      setCurrentSubNavEl = _e[1];
+
+  var toggleActiveItem = function (uid) {
+    setActiveItems(function (prev) {
+      return prev.includes(uid) ? [] : [uid];
+    }); // if multiple nav items can be selected:
+    // setActiveItems((prev) => {
+    //     const copy = [...prev];
+    //     const activeIndex = activeItems.indexOf(index);
+    //     if (activeIndex !== -1) {
+    //         copy.splice(activeIndex, 1);
+    //     } else {
+    //         copy.push(index);
+    //     }
+    //     return copy;
+    // });
+  }; // check if flyout lost focus
+
+
+  useEffect(function () {
+    var handleFocus = function (ev) {
+      if (!flyoutRef.current || !ev.target) return;
+      var isFlyoutChild = flyoutRef.current.contains(ev.target);
+      if (!isFlyoutChild) onClose && onClose();
+    };
+
+    if (isOpen) {
+      document.addEventListener('focusin', handleFocus);
+    } else {
+      document.removeEventListener('focusin', handleFocus);
+    }
+
+    return function () {
+      document.removeEventListener('focusin', handleFocus);
+    };
+  }, [isOpen, onClose]); // scroll to current nav items
+
+  useEffect(function () {
+    try {
+      currentNavEl === null || currentNavEl === void 0 ? void 0 : currentNavEl.scrollIntoView({
+        block: 'center',
+        inline: 'start'
+      });
+      currentSubNavEl === null || currentSubNavEl === void 0 ? void 0 : currentSubNavEl.scrollIntoView({
+        block: 'center',
+        inline: 'start'
+      });
+    } catch (e) {// console.log(e);
+    }
+  }, [currentNavEl, currentSubNavEl]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Backdrop, {
+    isOpen: isOpen,
+    filter: backdropFilter,
+    onClick: onClose
+  }), React__default.createElement(Stage, {
+    isOpen: isOpen,
+    clampWidth: clampWidth
+  }, React__default.createElement(Flyout, {
+    ref: flyoutRef,
+    isOpen: isOpen
+  }, hasHeader && React__default.createElement(Header$1, {
+    navBarSize: navBarSize
+  }, header ? header({
+    isOpen: isOpen,
+    mainNavigation: mainList,
+    subNavigation: subList,
+    isIndexPage: isIndexPage,
+    navBarSize: navBarSize
+  }) : React__default.createElement(MenuHeader, {
+    menuStates: {
+      isOpen: isOpen,
+      mainNavigation: mainNavigation,
+      subNavigation: subNavigation,
+      isIndexPage: isIndexPage,
+      navBarSize: navBarSize
+    }
+  })), React__default.createElement(ScrollContainer, null, React__default.createElement(ScrollArea, null, navItemsHeader && navItemsHeader({
+    isOpen: isOpen,
+    mainNavigation: mainList,
+    subNavigation: subList,
+    isIndexPage: isIndexPage,
+    navBarSize: navBarSize
+  }), React__default.createElement(MenuNav.View, null, isValidArray(mainList, false) && React__default.createElement(MenuNav.List, {
+    id: "mainMenu",
+    hasNonFeaturedItems: hasNonFeaturedItems
+  }, mainList.map(function (item) {
+    var _a;
+
+    var isActive = activeItems.includes(item.uid);
+    var hasCurrentSubItem = (item === null || item === void 0 ? void 0 : item.subItems) ? item.subItems.findIndex(function (n) {
+      return n.isCurrent;
+    }) >= 0 : false;
+    var isCurrent = item.isCurrent || hasCurrentSubItem;
+    return React__default.createElement(MenuNav.Item, __assign({
+      key: item.uid
+    }, item, {
+      ref: isCurrent ? setCurrentNavEl : undefined,
+      isActive: isActive,
+      isCurrent: isCurrent,
+      subNavTitle: subNavTitle,
+      navBarSize: navBarSize,
+      collapseIcon: collapseIcon,
+      onItemClick: function () {
+        return toggleActiveItem(item.uid);
+      },
+      canFocus: isOpen
+    }), (_a = item === null || item === void 0 ? void 0 : item.subItems) === null || _a === void 0 ? void 0 : _a.filter(menuFilter).map(function (subItem) {
+      return React__default.createElement(MenuNav.SubItem, __assign({
+        key: subItem.uid,
+        ref: subItem.isCurrent ? setCurrentSubNavEl : undefined
+      }, subItem, {
+        navBarSize: navBarSize,
+        canFocus: isOpen
+      }));
+    }));
+  })), isValidArray(subList, false) && React__default.createElement(MenuNav.SubList, {
+    items: subList,
+    canFocus: isOpen
+  })), footer ? footer({
+    isOpen: isOpen,
+    mainNavigation: mainList,
+    subNavigation: subList,
+    isIndexPage: isIndexPage
+  }) : '')))));
+};
+var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
+
+var Menu = function (_a) {
+  var isOpen = _a.isOpen,
+      clampWidth = _a.clampWidth,
+      isIndexPage = _a.isIndexPage,
+      mainNavigation = _a.mainNavigation,
+      subNavigation = _a.subNavigation,
+      navBarSize = _a.navBarSize,
+      header = _a.header,
+      footer = _a.footer,
+      navItemsHeader = _a.navItemsHeader,
+      onClose = _a.onClose,
+      typeSettings = _a.typeSettings;
+
+  if (!typeSettings) {
+    typeSettings = {
+      type: 'flyout'
+    };
+  }
+
+  switch (typeSettings === null || typeSettings === void 0 ? void 0 : typeSettings.type) {
+    // case 'large': {
+    //     return (
+    //         <MenuLarge
+    //             isOpen={isOpen}
+    //             clampWidth={clampWidth}
+    //             isIndexPage={isIndexPage}
+    //             mainNavigation={mainNavigation}
+    //             subNavigation={subNavigation}
+    //             navBarSize={navBarSize}
+    //             header={header}
+    //             footer={footer}
+    //             navItemsHeader={navItemsHeader}
+    //             onClose={onClose}
+    //             {...(typeSettings as LargeMenuProps)}
+    //         />
+    //     );
+    // }
+    default:
+    case 'flyout':
+      {
+        return React__default.createElement(MenuFlyout, __assign({
+          isOpen: isOpen,
+          clampWidth: clampWidth,
+          isIndexPage: isIndexPage,
+          mainNavigation: mainNavigation,
+          subNavigation: subNavigation,
+          navBarSize: navBarSize,
+          header: header,
+          footer: footer,
+          onClose: onClose,
+          navItemsHeader: navItemsHeader
+        }, typeSettings));
+      }
+  }
+};
+
+var getTopHeights = function (theme, size) {
+  var heights = size === 'large' ? getGlobals(theme).navigation.navBar.topHeight.large : getGlobals(theme).navigation.navBar.topHeight.small; // if second value is not defined use first array index value for both
+
+  return [clampValue(heights[0], 0), clampValue((heights === null || heights === void 0 ? void 0 : heights[1]) === undefined ? heights[0] : heights[1], 0)];
+};
+var hasTopBar = function (theme) {
+  var largeHeights = getTopHeights(theme, 'large');
+  var smallHeights = getTopHeights(theme, 'small');
+  return largeHeights[0] > 0 || largeHeights[1] > 0 || smallHeights[0] > 0 || smallHeights[1] > 0;
+};
+var getMainHeights = function (theme, size) {
+  var heights = size === 'large' ? getGlobals(theme).navigation.navBar.mainHeight.large : getGlobals(theme).navigation.navBar.mainHeight.small; // if second value is not defined use first array index value for both
+
+  return [clampValue(heights[0], 0), clampValue((heights === null || heights === void 0 ? void 0 : heights[1]) === undefined ? heights[0] : heights[1], 0)];
+};
+var getBottomHeights = function (theme, size) {
+  var heights = size === 'large' ? getGlobals(theme).navigation.navBar.bottomHeight.large : getGlobals(theme).navigation.navBar.bottomHeight.small; // if second value is not defined use first array index value for both
+
+  return [clampValue(heights[0], 0), clampValue((heights === null || heights === void 0 ? void 0 : heights[1]) === undefined ? heights[0] : heights[1], 0)];
+};
+var hasBottomBar = function (theme) {
+  var largeHeights = getBottomHeights(theme, 'large');
+  var smallHeights = getBottomHeights(theme, 'small');
+  return largeHeights[0] > 0 || largeHeights[1] > 0 || smallHeights[0] > 0 || smallHeights[1] > 0;
+};
+/**
+ * Get full height of navigation bar
+ * @param theme Theme object
+ * @param size Navigation bar size
+ * @param exclude Exclude parts of the navbar for height calculation
+ * @returns [mobile, desktop]
+ */
+
+var getFullHeight = function (theme, size, exclude) {
+  var includeTop = exclude ? exclude.indexOf('top') === -1 : true;
+  var includeMain = exclude ? exclude.indexOf('main') === -1 : true;
+  var includeBottom = exclude ? exclude.indexOf('bottom') === -1 : true;
+  var topHeights = includeTop ? getTopHeights(theme, size) : [0, 0];
+  var mainHeights = includeMain ? getMainHeights(theme, size) : [0, 0];
+  var bottomHeights = includeBottom ? getBottomHeights(theme, size) : [0, 0]; // calculate mobile navbar height
+
+  var mobile = topHeights[0] + mainHeights[0] + bottomHeights[0]; // calculate desktop navbar height
+
+  var desktop = topHeights[1] + mainHeights[1] + bottomHeights[1];
+  return [mobile, desktop];
+};
+var View = styled.div.withConfig({
+  displayName: "NavBar__View",
+  componentId: "sc-f6gpx5-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: ", ";\n    top: 0;\n    left: 0;\n    right: 0;\n\n    transform: ", ";\n\n    margin: 0 auto;\n    /* max-width: ", "px; */\n    z-index: 100;\n\n    ", "\n    will-change: transform;\n\n    &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        background: ", ";\n        margin: 0 auto;\n        max-width: ", "px;\n        z-index: -1;\n    }\n\n    // print version\n    @media print {\n        position: relative;\n    }\n"], ["\n    position: ", ";\n    top: 0;\n    left: 0;\n    right: 0;\n\n    transform: ", ";\n\n    margin: 0 auto;\n    /* max-width: ", "px; */\n    z-index: 100;\n\n    ", "\n    will-change: transform;\n\n    &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        background: ", ";\n        margin: 0 auto;\n        max-width: ", "px;\n        z-index: -1;\n    }\n\n    // print version\n    @media print {\n        position: relative;\n    }\n"])), function (_a) {
+  var isSticky = _a.isSticky;
+  return isSticky ? 'fixed' : 'absolute';
+}, function (_a) {
+  var isOpen = _a.isOpen;
+  return !isOpen && 'translate3d(0, -101%, 0)';
+}, spacings.wrapperLarge, function (_a) {
+  var isAnimated = _a.isAnimated;
+  return "transition: ".concat(isAnimated ? 'transform 0.3s ease-in-out, ' : '', "height 0.3s ease-in-out,\n                opacity 0.3s ease-in-out;");
+}, function (_a) {
+  var bgGradient = _a.bgGradient;
+  return bgGradient || '';
+}, spacings.wrapperLarge);
+var Header = styled.div.withConfig({
+  displayName: "NavBar__Header",
+  componentId: "sc-f6gpx5-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    opacity: ", ";\n    pointer-events: ", ";\n    overflow: ", ";\n\n    background-color: ", ";\n    color: ", ";\n\n    transition: background-color 0.2s ease-in-out;\n\n    @media ", " {\n        opacity: ", ";\n        pointer-events: ", ";\n        overflow: ", ";\n    }\n"], ["\n    opacity: ", ";\n    pointer-events: ", ";\n    overflow: ", ";\n\n    background-color: ", ";\n    color: ", ";\n\n    transition: background-color 0.2s ease-in-out;\n\n    @media ", " {\n        opacity: ", ";\n        pointer-events: ", ";\n        overflow: ", ";\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getTopHeights(theme, size)[0] > 0 ? 1 : 0;
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getTopHeights(theme, size)[0] > 0 ? 'all' : 'none';
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getTopHeights(theme, size)[0] <= 0 && 'hidden';
+}, function (_a) {
+  var background = _a.background;
+  return background;
+}, function (_a) {
+  var theme = _a.theme,
+      background = _a.background;
+  return background ? getColors(theme).text.default : getColors(theme).text.inverted;
+}, mq.semilarge, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getTopHeights(theme, size)[1] > 0 ? 1 : 0;
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getTopHeights(theme, size)[1] > 0 ? 'all' : 'none';
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getTopHeights(theme, size)[1] <= 0 && 'hidden';
+});
+var Main = styled.div.withConfig({
+  displayName: "NavBar__Main",
+  componentId: "sc-f6gpx5-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n\n    transition: background-color 0.2s ease-in-out;\n"], ["\n    background-color: ", ";\n    color: ", ";\n\n    transition: background-color 0.2s ease-in-out;\n"])), function (_a) {
+  var background = _a.background;
+  return background;
+}, function (_a) {
+  var theme = _a.theme,
+      background = _a.background;
+  return background ? getColors(theme).text.default : getColors(theme).text.inverted;
+});
+var Footer = styled.div.withConfig({
+  displayName: "NavBar__Footer",
+  componentId: "sc-f6gpx5-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    opacity: ", ";\n    pointer-events: ", ";\n    overflow: ", ";\n\n    background-color: ", ";\n    color: ", ";\n\n    opacity: ", ";\n\n    transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;\n\n    @media ", " {\n        opacity: ", ";\n        pointer-events: ", ";\n        overflow: ", ";\n\n        opacity: ", ";\n    }\n"], ["\n    opacity: ", ";\n    pointer-events: ", ";\n    overflow: ", ";\n\n    background-color: ", ";\n    color: ", ";\n\n    opacity: ", ";\n\n    transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;\n\n    @media ", " {\n        opacity: ", ";\n        pointer-events: ", ";\n        overflow: ", ";\n\n        opacity: ", ";\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getBottomHeights(theme, size)[0] > 0 ? 1 : 0;
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getBottomHeights(theme, size)[0] > 0 ? 'all' : 'none';
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getBottomHeights(theme, size)[0] <= 0 && 'hidden';
+}, function (_a) {
+  var background = _a.background;
+  return background;
+}, function (_a) {
+  var theme = _a.theme,
+      background = _a.background;
+  return background ? getColors(theme).text.default : getColors(theme).text.inverted;
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getBottomHeights(theme, size)[0] > 0 ? 1 : 0;
+}, mq.semilarge, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getBottomHeights(theme, size)[1] > 0 ? 1 : 0;
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getBottomHeights(theme, size)[1] > 0 ? 'all' : 'none';
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getBottomHeights(theme, size)[1] <= 0 && 'hidden';
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getBottomHeights(theme, size)[1] > 0 ? 1 : 0;
+});
+var TopContent = styled.div.withConfig({
+  displayName: "NavBar__TopContent",
+  componentId: "sc-f6gpx5-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    justify-content: flex-end;\n    position: relative;\n    max-width: ", "px;\n    padding: ", ";\n    margin: 0 auto;\n\n    height: ", "px;\n\n    transition: height 0.2s ease-in-out, padding-top 0.2s ease-in-out,\n        padding-bottom 0.2s ease-in-out;\n    will-change: height;\n\n    @media ", " {\n        height: ", "px;\n        padding: ", ";\n    }\n"], ["\n    display: flex;\n    justify-content: flex-end;\n    position: relative;\n    max-width: ", "px;\n    padding: ", ";\n    margin: 0 auto;\n\n    height: ", "px;\n\n    transition: height 0.2s ease-in-out, padding-top 0.2s ease-in-out,\n        padding-bottom 0.2s ease-in-out;\n    will-change: height;\n\n    @media ", " {\n        height: ", "px;\n        padding: ", ";\n    }\n"])), function (_a) {
+  var clamp = _a.clamp;
+  return clamp ? spacings.wrapper : spacings.wrapperLarge;
+}, function (_a) {
+  var size = _a.size,
+      theme = _a.theme;
+  return getTopHeights(theme, size)[0] > 0 && "0 ".concat(spacings.nudge * 2, "px");
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getTopHeights(theme, size)[0];
+}, mq.semilarge, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getTopHeights(theme, size)[1];
+}, function (_a) {
+  var size = _a.size,
+      theme = _a.theme;
+  return getTopHeights(theme, size)[1] > 0 && "0 ".concat(spacings.nudge * 2, "px");
+});
+var Content = styled.div.withConfig({
+  displayName: "NavBar__Content",
+  componentId: "sc-f6gpx5-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    position: relative;\n    max-width: ", "px;\n    padding: 0 ", "px;\n    margin: 0 auto;\n\n    height: ", "px;\n\n    transition: height 0.2s ease-in-out;\n    will-change: height;\n\n    @media ", " {\n        height: ", "px;\n    }\n"], ["\n    display: flex;\n    position: relative;\n    max-width: ", "px;\n    padding: 0 ", "px;\n    margin: 0 auto;\n\n    height: ", "px;\n\n    transition: height 0.2s ease-in-out;\n    will-change: height;\n\n    @media ", " {\n        height: ", "px;\n    }\n"])), function (_a) {
+  var clamp = _a.clamp;
+  return clamp ? spacings.wrapper : spacings.wrapperLarge;
+}, spacings.nudge * 2, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getMainHeights(theme, size)[0];
+}, mq.semilarge, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getMainHeights(theme, size)[1] || getMainHeights(theme, size)[0];
+});
+var BottomContent = styled.div.withConfig({
+  displayName: "NavBar__BottomContent",
+  componentId: "sc-f6gpx5-6"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    justify-content: flex-start;\n    position: relative;\n    max-width: ", "px;\n    padding: 0 ", "px;\n    margin: 0 auto;\n\n    height: ", "px;\n    transition: 0.2s height ease-in-out;\n\n    @media ", " {\n        height: ", "px;\n        padding: 0 ", "px;\n    }\n"], ["\n    display: flex;\n    justify-content: flex-start;\n    position: relative;\n    max-width: ", "px;\n    padding: 0 ", "px;\n    margin: 0 auto;\n\n    height: ", "px;\n    transition: 0.2s height ease-in-out;\n\n    @media ", " {\n        height: ", "px;\n        padding: 0 ", "px;\n    }\n"])), function (_a) {
+  var clamp = _a.clamp;
+  return clamp ? spacings.wrapper : spacings.wrapperLarge;
+}, spacings.nudge * 2, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getBottomHeights(theme, size)[0];
+}, mq.semilarge, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getBottomHeights(theme, size)[1];
+}, spacings.nudge * 2);
+var BarSpacer = styled.div.withConfig({
+  displayName: "NavBar__BarSpacer",
+  componentId: "sc-f6gpx5-7"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    height: ", "px;\n\n    @media ", " {\n        height: ", "px;\n    }\n\n    // print version\n    @media print {\n        display: none;\n    }\n"], ["\n    height: ", "px;\n\n    @media ", " {\n        height: ", "px;\n    }\n\n    // print version\n    @media print {\n        display: none;\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      hasHeader = _a.hasHeader,
+      hasFooter = _a.hasFooter;
+  var excludes = [];
+  if (!hasHeader) excludes.push('top');
+  if (!hasFooter) excludes.push('bottom');
+  return getFullHeight(theme, 'large', excludes)[0];
+}, mq.semilarge, function (_a) {
+  var theme = _a.theme,
+      hasHeader = _a.hasHeader,
+      hasFooter = _a.hasFooter;
+  var excludes = [];
+  if (!hasHeader) excludes.push('top');
+  if (!hasFooter) excludes.push('bottom');
+  return getFullHeight(theme, 'large', excludes)[1];
+});
+
+var NavBar = function (_a) {
+  var _b = _a.size,
+      size = _b === void 0 ? 'large' : _b,
+      _c = _a.isOpen,
+      isOpen = _c === void 0 ? false : _c,
+      _d = _a.isSticky,
+      isSticky = _d === void 0 ? false : _d,
+      _e = _a.isAnimated,
+      isAnimated = _e === void 0 ? false : _e,
+      _f = _a.clampWidth,
+      clampWidth = _f === void 0 ? false : _f,
+      _g = _a.pageFlow,
+      pageFlow = _g === void 0 ? 'beforeContent' : _g,
+      topBg = _a.topBg,
+      mainBg = _a.mainBg,
+      bottomBg = _a.bottomBg,
+      onContentBg = _a.onContentBg,
+      topBar = _a.topBar,
+      mainBar = _a.mainBar,
+      bottomBar = _a.bottomBar,
+      className = _a.className;
+
+  var _h = useLibTheme(),
+      theme = _h.theme,
+      colors = _h.colors;
+
+  var clampContent = clampWidth === 'content';
+  var isOverContent = pageFlow === 'overContent';
+  var hasHeader = useMemo(function () {
+    return hasTopBar(theme) && topBar !== null;
+  }, [theme, topBar]);
+  var hasFooter = useMemo(function () {
+    return hasBottomBar(theme) && bottomBar !== null;
+  }, [bottomBar, theme]);
+  var showBg = useMemo(function () {
+    return size === 'small' || size === 'large' && !isOverContent;
+  }, [isOverContent, size]);
+  var topBackground = topBg || colors.elementBg.light;
+  var mainBackground = mainBg || colors.elementBg.light;
+  var bottomBackground = bottomBg || colors.elementBg.light;
+  var onContentBackground = onContentBg || 'linear-gradient(180deg,rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0) 100%)';
+  var topBarContent = useMemo(function () {
+    return topBar && topBar({
+      size: size,
+      isOpen: isOpen,
+      isSticky: isSticky,
+      pageFlow: pageFlow
+    });
+  }, [isOpen, isSticky, pageFlow, size, topBar]);
+  var mainBarContent = useMemo(function () {
+    return mainBar && mainBar({
+      size: size,
+      isOpen: isOpen,
+      isSticky: isSticky,
+      pageFlow: pageFlow
+    });
+  }, [isOpen, isSticky, mainBar, pageFlow, size]);
+  var bottomBarContent = useMemo(function () {
+    return bottomBar && bottomBar({
+      size: size,
+      isOpen: isOpen,
+      isSticky: isSticky,
+      pageFlow: pageFlow
+    });
+  }, [bottomBar, isOpen, isSticky, pageFlow, size]);
+  return React__default.createElement(React__default.Fragment, null, pageFlow === 'beforeContent' && React__default.createElement(BarSpacer, {
+    hasHeader: hasHeader,
+    hasFooter: hasFooter
+  }), React__default.createElement(View, {
+    isOpen: isOpen,
+    isSticky: isSticky,
+    isAnimated: isAnimated,
+    bgGradient: size === 'large' && isOverContent ? onContentBackground : undefined,
+    className: className
+  }, hasHeader && React__default.createElement(Header, {
+    size: size,
+    background: showBg ? topBackground : undefined
+  }, React__default.createElement(TopContent, {
+    size: size,
+    clamp: clampContent
+  }, topBarContent ? topBarContent : React__default.createElement(Column, {
+    isInverted: true
+  }, "Top Nav"))), mainBar !== null && React__default.createElement(Main, {
+    background: showBg ? mainBackground : undefined
+  }, React__default.createElement(Content, {
+    size: size,
+    clamp: clampContent
+  }, mainBarContent ? mainBarContent : React__default.createElement(React__default.Fragment, null, React__default.createElement(Column, {
+    takeSpace: true,
+    isInverted: size === 'large' && isOverContent
+  }, "Left"), React__default.createElement(Column, {
+    isInverted: size === 'large' && isOverContent
+  }, "Center"), React__default.createElement(Column, {
+    takeSpace: true,
+    isInverted: size === 'large' && isOverContent
+  }, "Right")))), hasFooter && React__default.createElement(Footer, {
+    size: size,
+    background: showBg ? bottomBackground : undefined
+  }, React__default.createElement(BottomContent, {
+    size: size,
+    clamp: clampContent
+  }, bottomBarContent ? bottomBarContent : 'bottom bar'))));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+
+/**
+ * Checks which navbar parts are defined in navigation.
+ * With this values you can calculate each height by the Navbar component functions
+ * @param ident Identification string from Navigation component
+ * @returns
+ */
+
+var getNavbarState = function (ident) {
+  var navbarIdent = ident || '';
+  var pageFlow = undefined;
+
+  switch (true) {
+    case navbarIdent.search('overContent') !== -1:
+      {
+        pageFlow = 'overContent';
+        break;
+      }
+
+    case navbarIdent.search('beforeContent') !== -1:
+      {
+        pageFlow = 'beforeContent';
+        break;
+      }
+  }
+
+  return {
+    hasTop: navbarIdent.search('top') !== -1,
+    hasMain: navbarIdent.search('main') !== -1,
+    hasBottom: navbarIdent.search('bottom') !== -1,
+    pageFlow: pageFlow,
+    isStickable: navbarIdent.search('stickable') !== -1
+  };
+};
+/** Generate Navbar identifier */
+
+var generateNavbarIdent = function (props) {
+  if (!props) return '';
+  var stateArray = [];
+  if (props.hasTop) stateArray.push('top');
+  if (props.hasMain) stateArray.push('main');
+  if (props.hasBottom) stateArray.push('bottom');
+  if (props.isStickable) stateArray.push('stickable');
+  if (props.pageFlow) stateArray.push(props.pageFlow);
+  return stateArray.join('-');
+};
+/**
+ * Get full navbar heights
+ * @param theme Theme object
+ * @param ident Indentification string from Navigation component
+ * @returns
+ */
+
+var getFullNavbarHeights = function (theme, ident) {
+  var _a = getNavbarState(ident || ''),
+      hasTop = _a.hasTop,
+      hasBottom = _a.hasBottom;
+
+  var excludes = [];
+  if (!hasTop) excludes.push('top');
+  if (!hasBottom) excludes.push('bottom');
+  return {
+    large: getFullHeight(theme, 'large', excludes),
+    small: getFullHeight(theme, 'small', excludes)
+  };
+};
+
+var Navigation = function (_a) {
+  var _b = _a.clampWidth,
+      clampWidth = _b === void 0 ? 'content' : _b,
+      navBar = _a.navBar,
+      menu = _a.menu;
+  var isStickable = (navBar === null || navBar === void 0 ? void 0 : navBar.isStickable) || false;
+  var isCollapsible = (navBar === null || navBar === void 0 ? void 0 : navBar.isCollapsible) || false;
+  var mediaQueries = useMediaQueries();
+  var theme = useLibTheme().theme;
+  /** Navigation bar states */
+
+  var _c = useState(false),
+      isNavBarSticky = _c[0],
+      setIsNavBarSticky = _c[1];
+
+  var _d = useState(true),
+      isNavBarOpen = _d[0],
+      setNavBarOpen = _d[1];
+
+  var _e = usePageScroll({
+    directionOffset: {
+      up: 40,
+      down: 40
+    },
+    offset: getFullHeight(theme, 'large')[mediaQueries.semilarge ? 1 : 0]
+  }),
+      isTop = _e.isTop,
+      scrollDirection = _e.scrollDirection,
+      isInOffset = _e.isInOffset,
+      leftOffsetFromTop = _e.leftOffsetFromTop;
+
+  var navbarSize = useMemo(function () {
+    return isTop || isInOffset || !isStickable ? 'large' : 'small';
+  }, [isTop, isInOffset, isStickable]);
+  useEffect(function () {
+    if (isStickable && isCollapsible) {
+      setNavBarOpen(isTop || isInOffset || scrollDirection === PageScrollDirection.UP);
+    }
+  }, [scrollDirection, isTop, isStickable, isInOffset, isCollapsible]);
+  useEffect(function () {
+    if (!isStickable) return;
+
+    if (!isCollapsible || leftOffsetFromTop && scrollDirection === PageScrollDirection.UP) {
+      setIsNavBarSticky(true);
+    } else if (isTop) {
+      setIsNavBarSticky(false);
+    }
+  }, [isCollapsible, isStickable, isTop, leftOffsetFromTop, scrollDirection]);
+  /** Menu states */
+
+  var _f = useMenuKeyboard(false, {}),
+      isMenuOpen = _f.isMenuOpen,
+      setIsMenuOpen = _f.setIsMenuOpen,
+      setRoot = _f.setRoot;
+
+  var openMenu = function () {
+    setIsMenuOpen(true);
+  };
+
+  var closeMenu = function () {
+    setIsMenuOpen(false);
+  };
+
+  useEffect(function () {
+    document.body.style.overflow = isMenuOpen ? 'hidden' : 'visible';
+  }, [isMenuOpen]);
+  var topBar = (navBar === null || navBar === void 0 ? void 0 : navBar.topBar) ? function (props) {
+    if (!(navBar === null || navBar === void 0 ? void 0 : navBar.topBar)) return '';
+    return navBar.topBar(__assign(__assign({}, props), {
+      isMenuOpen: isMenuOpen,
+      openMenu: openMenu,
+      closeMenu: closeMenu,
+      mainNavigation: menu === null || menu === void 0 ? void 0 : menu.mainNavigation,
+      subNavigation: menu === null || menu === void 0 ? void 0 : menu.subNavigation,
+      isOnPageTop: isTop,
+      isInTopOffset: isInOffset
+    }));
+  } : navBar === null || navBar === void 0 ? void 0 : navBar.topBar;
+  var mainBar = (navBar === null || navBar === void 0 ? void 0 : navBar.mainBar) ? function (props) {
+    if (!(navBar === null || navBar === void 0 ? void 0 : navBar.mainBar)) return '';
+    return navBar.mainBar(__assign(__assign({}, props), {
+      isMenuOpen: isMenuOpen,
+      openMenu: openMenu,
+      closeMenu: closeMenu,
+      mainNavigation: menu === null || menu === void 0 ? void 0 : menu.mainNavigation,
+      subNavigation: menu === null || menu === void 0 ? void 0 : menu.subNavigation,
+      isOnPageTop: isTop,
+      isInTopOffset: isInOffset
+    }));
+  } : navBar === null || navBar === void 0 ? void 0 : navBar.mainBar;
+  var bottomBar = (navBar === null || navBar === void 0 ? void 0 : navBar.bottomBar) ? function (props) {
+    if (!(navBar === null || navBar === void 0 ? void 0 : navBar.bottomBar)) return '';
+    return navBar.bottomBar(__assign(__assign({}, props), {
+      isMenuOpen: isMenuOpen,
+      openMenu: openMenu,
+      closeMenu: closeMenu,
+      mainNavigation: menu === null || menu === void 0 ? void 0 : menu.mainNavigation,
+      subNavigation: menu === null || menu === void 0 ? void 0 : menu.subNavigation,
+      isOnPageTop: isTop,
+      isInTopOffset: isInOffset
+    }));
+  } : navBar === null || navBar === void 0 ? void 0 : navBar.bottomBar;
+  var menuHeader = (menu === null || menu === void 0 ? void 0 : menu.header) ? function (props) {
+    if (!(menu === null || menu === void 0 ? void 0 : menu.header)) return '';
+    return menu === null || menu === void 0 ? void 0 : menu.header(__assign(__assign({}, props), {
+      openMenu: openMenu,
+      closeMenu: closeMenu,
+      mainNavigation: menu === null || menu === void 0 ? void 0 : menu.mainNavigation,
+      subNavigation: menu === null || menu === void 0 ? void 0 : menu.subNavigation,
+      navBarSize: navbarSize
+    }));
+  } : undefined;
+  var menuFooter = (menu === null || menu === void 0 ? void 0 : menu.footer) ? function (props) {
+    if (!(menu === null || menu === void 0 ? void 0 : menu.footer)) return '';
+    return menu === null || menu === void 0 ? void 0 : menu.footer(__assign(__assign({}, props), {
+      openMenu: openMenu,
+      closeMenu: closeMenu,
+      mainNavigation: menu === null || menu === void 0 ? void 0 : menu.mainNavigation,
+      subNavigation: menu === null || menu === void 0 ? void 0 : menu.subNavigation,
+      navBarSize: navbarSize
+    }));
+  } : undefined;
+  var menuNavItemsHeader = (menu === null || menu === void 0 ? void 0 : menu.navItemsHeader) ? function (props) {
+    if (!(menu === null || menu === void 0 ? void 0 : menu.navItemsHeader)) return '';
+    return menu === null || menu === void 0 ? void 0 : menu.navItemsHeader(__assign(__assign({}, props), {
+      openMenu: openMenu,
+      closeMenu: closeMenu,
+      mainNavigation: menu === null || menu === void 0 ? void 0 : menu.mainNavigation,
+      subNavigation: menu === null || menu === void 0 ? void 0 : menu.subNavigation,
+      navBarSize: navbarSize
+    }));
+  } : undefined;
+  /**
+   * Get ident string that shows if each navbar section is defined.
+   * @returns Navbar ident string
+   */
+
+  var getNavBarIdent = function (theme) {
+    var ident = generateNavbarIdent({
+      hasTop: topBar !== null && hasTopBar(theme),
+      hasMain: mainBar !== null,
+      hasBottom: bottomBar !== null && hasBottomBar(theme),
+      isStickable: navBar === null || navBar === void 0 ? void 0 : navBar.isStickable,
+      pageFlow: navBar === null || navBar === void 0 ? void 0 : navBar.pageFlow
+    });
+    return ident;
+  };
+
+  return React__default.createElement("header", {
+    ref: setRoot,
+    "data-navbar-ident": getNavBarIdent(theme)
+  }, React__default.createElement(LibThemeProvider, {
+    theme: navBar === null || navBar === void 0 ? void 0 : navBar.theme
+  }, React__default.createElement(NavBar, {
+    isOpen: isNavBarOpen,
+    isSticky: isNavBarSticky,
+    isAnimated: true,
+    size: navbarSize,
+    clampWidth: clampWidth,
+    pageFlow: navBar === null || navBar === void 0 ? void 0 : navBar.pageFlow,
+    topBar: topBar,
+    mainBar: mainBar,
+    bottomBar: bottomBar,
+    topBg: navBar === null || navBar === void 0 ? void 0 : navBar.topBg,
+    mainBg: navBar === null || navBar === void 0 ? void 0 : navBar.mainBg,
+    bottomBg: navBar === null || navBar === void 0 ? void 0 : navBar.bottomBg,
+    onContentBg: navBar === null || navBar === void 0 ? void 0 : navBar.onContentBg
+  })), React__default.createElement(LibThemeProvider, {
+    theme: menu === null || menu === void 0 ? void 0 : menu.theme
+  }, React__default.createElement(Menu, {
+    isOpen: isMenuOpen,
+    clampWidth: clampWidth,
+    isIndexPage: menu === null || menu === void 0 ? void 0 : menu.isIndexPage,
+    mainNavigation: menu === null || menu === void 0 ? void 0 : menu.mainNavigation,
+    subNavigation: menu === null || menu === void 0 ? void 0 : menu.subNavigation,
+    typeSettings: menu === null || menu === void 0 ? void 0 : menu.typeSettings,
+    navBarSize: navbarSize,
+    header: menuHeader,
+    footer: menuFooter,
+    navItemsHeader: menuNavItemsHeader,
+    onClose: closeMenu
+  })));
+};
+
+export { BarBreadcrumbs as B, Column as C, MenuHeader as M, Navigation as N, getFullNavbarHeights as a, BarLogo as b, BarMenuToggle as c, BarNavList as d, getNavbarState as e, generateNavbarIdent as g };
+//# sourceMappingURL=Navigation-3ded0cfc.js.map