@blateral/b.kit 2.3.2-beta.1.0 → 2.4.0

package/esm/Navigation-03339030.js

@@ -1,1664 +0,0 @@
-import { _ as __assign, a as __makeTemplateObject, q as AngleLeft, C as Cross, r as AngleRight, e as __spreadArray } from './ClockFilled-6bae80dc.js';
-import React__default, { useState, useRef, useEffect, useMemo, forwardRef } from 'react';
-import { u as useLibTheme, L as LibThemeProvider } from './LibThemeProvider-acf2e2bb.js';
-import { a as useMediaQueries } from './useMediaQuery-388bd65e.js';
-import { u as useScrollThrottle, a as getCurrentNavPath, g as getCurrentNavItem } from './navigation-a2998143.js';
-import { L as Link } from './Link-bccdb082.js';
-import styled, { css } from 'styled-components';
-import { i as isValidArray } from './arrays-65b644ef.js';
-import { c as clampValue } from './clamp-12d37b65.js';
-import { m as mq, s as spacings, g as getColors, a as getFonts, w as withRange, c as getGlobals } from './styles-c387bdc6.js';
-import { c as copyStyle, C as Copy } from './Copy-bca0854c.js';
-import { I as Image } from './Image-301c4433.js';
-import { L as LanguageSwitcher } from './LanguageSwitcher-57c4a924.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 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, getNavbarState as b, BarLogo as c, BarMenuToggle as d, BarNavList as e, generateNavbarIdent as g };
-//# sourceMappingURL=Navigation-03339030.js.map