@commercetools-frontend/application-shell 22.17.1 → 22.18.0

package/dist/{navbar-388915b2.cjs.prod.js → navbar-7861442e.cjs.prod.js}

@@ -27,7 +27,7 @@ var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTempl
 var _styled = require('@emotion/styled/base');
 var react = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
-var oidc = require('./oidc-3f3b899b.cjs.prod.js');
+var oidc = require('./oidc-cfa56c46.cjs.prod.js');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
 var _everyInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/every');
@@ -79,130 +79,125 @@ var _sortInstanceProperty__default = /*#__PURE__*/_interopDefault(_sortInstanceP
 var isNil__default = /*#__PURE__*/_interopDefault(isNil);
 var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 
-var _templateObject;
-const visible = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
-const leftNavigationOpenStyles = /*#__PURE__*/react.css(".body__menu-open .left-navigation{transition:", oidc.NAVBAR.leftNavigationTransition, ";width:", oidc.NAVBAR.widthLeftNavigationWhenExpanded, ";}.body__menu-open .scrollable-menu{width:", oidc.NAVBAR.widthLeftNavigationWhenExpanded, ";}.body__menu-open .fixed-menu{width:", oidc.NAVBAR.widthLeftNavigationWhenExpanded, ";}.body__menu-open [data-link-level='text-link']{justify-content:start;}.body__menu-open .list-item{height:auto;min-height:", oidc.NAVBAR.itemSize, ";width:100%;}.body__menu-open .list-item .title{opacity:1;margin-left:var(--spacing-25);color:var(--color-surface);transition:", oidc.NAVBAR.leftNavigationTransition, ";animation:", visible, " 150ms cubic-bezier(1, 0, 0.58, 1);}.body__menu-open .item__active{max-height:500px;transition:max-height 0.25s ease-in;}.body__menu-open .item__active .item-icon-text{position:relative;width:auto;}.body__menu-open .item__active .item-icon-text{margin-left:0;}.body__menu-open .item-link{width:100%;}.fixed-menu .list-item .item-icon-text{justify-content:center;display:flex;width:100%;}.list-item{min-height:", oidc.NAVBAR.itemSize, ";background:var(--color-primary);margin:0;list-style:none;cursor:pointer;}.list-item .icon-wrapper{width:auto;display:flex;justify-content:center;align-self:flex-start;}.item_menu-collapsed{text-align:center;}.item__active,.item_menu__active,.item_menu__active:focus-within{background:var(--color-accent-30);border-radius:var(--border-radius-8);}.item__active .item-icon-text{justify-content:flex-start;}.list-item:hover .title,.list-item:focus-within .title{margin-left:calc(var(--spacing-25) + 2px);}.list-item:hover .icon,.list-item:focus-within .icon{transform:scale(1.2);}.list-item:not(.item_menu__active):hover,.list-item:not(.item_menu__active):focus-within{background-color:var(--color-primary-40);border-radius:var(--border-radius-8);}.list-item:not(.item__active):hover .icon>svg *:not([fill='none']),.list-item:not(.item__active):focus-within .icon>svg *:not([fill='none']){fill:var(--color-for-navbar-icon-when-active);}.list-item:not(.item__active):hover .title,.list-item:not(.item__active):focus-within .title{color:var(--color-for-navbar-link-when-hovered);}.list-item:hover .sublist-collapsed__active,.list-item:hover .sublist-collapsed__active__above,.list-item:hover .sublist-expanded__active,.list-item:focus-within .sublist-collapsed__active,.list-item:focus-within .sublist-collapsed__active__above,.list-item:focus-within .sublist-expanded__active{display:flex;flex-direction:column;align-items:flex-start;background-color:var(--color-surface);min-height:50px;width:", oidc.NAVBAR.sublistWidth, ";border-radius:var(--border-radius-8);z-index:20001;box-shadow:-2px 4px 25px 0 rgba(89, 89, 89, 0.5);}.list-item:hover .sublist-collapsed__active.sublist-collapsed__empty,.list-item:hover .sublist-collapsed__active__above.sublist-collapsed__empty,.list-item:focus-within .sublist-collapsed__active.sublist-collapsed__empty,.list-item:focus-within .sublist-collapsed__active__above.sublist-collapsed__empty{visibility:hidden;}.list-item:hover .sublist-expanded__active,.list-item:focus-within .sublist-expanded__active{left:", oidc.NAVBAR.sublistIndentationWhenExpanded, ";}.item-link{color:var(--color-for-navbar-link);width:", oidc.NAVBAR.itemSize, ";position:relative;display:block;}.sublist-expanded__active::before,.sublist-collapsed__active::before,.sublist-collapsed__active__above::before{content:'';position:absolute;display:block;width:calc(", oidc.NAVBAR.sublistWidth, " + var(--spacing-20));height:", oidc.NAVBAR.itemSize, ";left:calc(-1 * var(--spacing-20));}.sublist__inactive{}.sublist-expanded__active,.sublist-collapsed__active,.sublist-collapsed__active__above{opacity:1;display:none;text-align:left;background-color:var(--background-color-for-navbar-when-active);}.highlighted,.highlighted .title{color:var(--color-for-navbar-link-when-active)!important;font-weight:var(--font-weight-for-navbar-link-when-active);}" + ("" ), "" );
 const IconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1meml8k13"
+  target: "e1wv1pdj3"
 } )({
   name: "ex9e0f",
   styles: "width:auto;display:flex;justify-content:center"
 } );
 const Icon = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1meml8k12"
-} )("width:", oidc.NAVBAR.iconSize, ";height:", oidc.NAVBAR.iconSize, ";transition:", oidc.NAVBAR.leftNavigationTransition, ";>svg *:not([fill='none']){fill:var(--color-surface);}" + ("" ));
+  target: "e1wv1pdj2"
+} )("width:", oidc.NAVBAR.iconSize, ";height:", oidc.NAVBAR.iconSize, ";transition:", oidc.NAVBAR.leftNavigationTransition, ";>svg *:not([fill='none']){fill:", designSystem.designTokens.colorSurface, ";}" + ("" ));
 const ItemIconText = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1meml8k11"
+  target: "e1wv1pdj1"
 } )({
   name: "192s9p1",
   styles: "display:flex;flex-direction:row;justify-content:center;align-items:center"
 } );
-const NavigationHeader = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1meml8k10"
-} )("background-color:", designSystem.designTokens.colorAccent10, ";color:", designSystem.designTokens.colorSurface, ";display:flex;justify-content:center;flex-direction:row;align-items:center;padding:", designSystem.designTokens.spacing30, ";" + ("" ));
-const HeaderTitle = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1meml8k9"
-} )("font-weight:600;margin-left:", designSystem.designTokens.spacing20, ";transition:", oidc.NAVBAR.leftNavigationTransition, ";animation:", visible, " 150ms cubic-bezier(1, 0, 0.58, 1);" + ("" ));
-const listStyles = {
-  name: "19z1op4",
-  styles: "margin:0;padding:0;display:flex;flex-direction:column;min-height:0;flex:1 1 0"
-} ;
-const TooltipContainer = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1meml8k8"
-} )("position:absolute;left:0;display:flex;align-items:center;justify-content:flex-start;height:", oidc.NAVBAR.itemSize, ";visibility:visible;", props => props.alignsAgainstBottom ? 'bottom' : 'top', ":-", oidc.NAVBAR.itemSize, ";" + ("" ));
-const Tooltip = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1meml8k7"
-} )("padding:var(--spacing-10) calc(var(--spacing-20) + var(--spacing-10));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;border-radius:var(--border-radius-4);background:var(--color-accent-10);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.25);font-size:var(--font-size-for-navbar-link);line-height:var(--line-height-for-navbar-link);font-weight:var(--font-weight-for-navbar-link);color:var(--color-surface);max-height:", oidc.NAVBAR.itemSize, ";visibility:inherit;" + ("" ));
-var _ref3$1 = {
-  name: "1fwm0dz",
-  styles: ":hover,:focus-within{color:var(--color-for-navbar-link-when-hovered);font-weight:var(--font-weight-for-navbar-link-when-hovered);border-radius:var(--border-radius-4);background:var(--color-primary-95);}:not(.sublist-item__active):hover [data-link-level='text-link-sublist'],:not(.sublist-item__active):focus-within [data-link-level='text-link-sublist']{padding:var(--spacing-25) var(--spacing-25) var(--spacing-25) calc(var(--spacing-30) + var(--spacing-20));}"
-} ;
-var _ref4 = {
-  name: "1lmszfn",
-  styles: "border-radius:var(--border-radius-4);background:var(--color-accent-30)"
-} ;
-const SublistItem = /*#__PURE__*/_styled__default["default"]("li", {
-  target: "e1meml8k6"
-} )("display:flex;align-items:center;align-self:stretch;", props => [props.isActive && _ref4, !props.isActive && _ref3$1], ";" + ("" ));
-const sublistStyles = /*#__PURE__*/react.css("padding:var(--spacing-30);font-weight:var(--font-weight-for-navbar-link);font-size:var(--font-size-for-navbar-link);background-color:var(--background-color-for-navbar);left:", oidc.NAVBAR.sublistIndentationWhenCollapsed, ";z-index:-1;list-style:none;position:fixed;display:none;" + ("" ), "" );
-const ScrollableMenu = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1meml8k5"
-} )("flex:1 1 0;overflow-x:hidden;overflow-y:hidden;padding:var(--spacing-30) var(--spacing-30) ", oidc.NAVBAR.itemSize, ";width:", oidc.NAVBAR.widthLeftNavigation, ";box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--color-primary-40) transparent;:hover{overflow-y:scroll;padding-right:8px;}::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background-color:var(--color-primary-40);border-radius:var(--border-radius-8);}" + ("" ));
-const FixedMenu = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1meml8k4"
-} )("position:relative;width:", oidc.NAVBAR.widthLeftNavigation, ";" + ("" ));
-const TextLink = /*#__PURE__*/_styled__default["default"]("a", {
-  target: "e1meml8k3"
-} )({
-  name: "9b9ezm",
-  styles: "color:var(--color-for-navbar-link);text-decoration:none;display:flex;padding:var(--spacing-25);align-items:center;justify-content:center"
-} );
-const SupportMenu = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1meml8k2"
-} )({
-  name: "1k2kt0t",
-  styles: "padding:var(--spacing-10) var(--spacing-30) var(--spacing-20) var(--spacing-30);height:calc(var(--item-size) + var(--spacing-20))"
-} );
 const Title = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1meml8k1"
-} )("flex:1;font-weight:600;font-size:var(--font-size-for-navbar-link);line-height:var(--line-height-for-navbar-link);color:var(--color-for-navbar-link);opacity:0;transition:", oidc.NAVBAR.leftNavigationTransition, ";text-align:left;text-decoration:none;z-index:1;" + ("" ));
-const Text = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1meml8k0"
-} )({
-  name: "1ocv3vi",
-  styles: "font-weight:var(--font-weight-for-navbar-link);font-size:var(--font-size-for-navbar-link);line-height:var(--line-height-for-navbar-link);width:100%;height:100%"
-} );
-var _ref$2 = {
-  name: "9b9ezm",
-  styles: "color:var(--color-for-navbar-link);text-decoration:none;display:flex;padding:var(--spacing-25);align-items:center;justify-content:center"
-} ;
-var _ref2$1 = {
-  name: "1rg5r4z",
-  styles: "display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--color-solid);font-weight:var(--font-weight-for-navbar-link-when-hovered);text-decoration:none;flex:1;padding:var(--spacing-25) var(--spacing-25) var(--spacing-25) var(--spacing-30);transition:padding 150ms ease-out"
-} ;
-const getMenuItemLinkStyles = isSubmenuLink => [isSubmenuLink && _ref2$1, !isSubmenuLink && _ref$2];
+  target: "e1wv1pdj0"
+} )("flex:1;font-weight:600;font-size:", designSystem.designTokens.fontSize20, ";line-height:", designSystem.designTokens.lineHeight20, ";color:", designSystem.designTokens.colorNeutral, ";opacity:0;transition:", oidc.NAVBAR.leftNavigationTransition, ";text-align:left;text-decoration:none;z-index:1;" + ("" ));
 
 const getSubmenuPositionBasedOnMenuItemPosition = (isSubmenuAboveMenuItem, submenuVerticalPosition) => /*#__PURE__*/react.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":", submenuVerticalPosition, "px;" + ("" ), "" );
-var _ref2 = {
+var _ref4 = {
   name: "abcix4",
   styles: "top:0"
 } ;
-var _ref3 = {
+var _ref5 = {
   name: "8tapst",
   styles: "bottom:0"
 } ;
-const getContainerPositionBasedOnMenuItemPosition = (isSubmenuAboveMenuItem, isSublistActiveWhileIsMenuExpanded, isSublistActiveWhileIsMenuCollapsed) => [isSublistActiveWhileIsMenuCollapsed && /*#__PURE__*/react.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":-", oidc.NAVBAR.itemSize, ";" + ("" ), "" ), isSublistActiveWhileIsMenuExpanded && isSubmenuAboveMenuItem && _ref3, isSublistActiveWhileIsMenuExpanded && !isSubmenuAboveMenuItem && _ref2];
+const getContainerPositionBasedOnMenuItemPosition = (isSubmenuAboveMenuItem, isSublistActiveWhileIsMenuExpanded, isSublistActiveWhileIsMenuCollapsed) => [isSublistActiveWhileIsMenuCollapsed && /*#__PURE__*/react.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":-", oidc.NAVBAR.itemSize, ";" + ("" ), "" ), isSublistActiveWhileIsMenuExpanded && isSubmenuAboveMenuItem && _ref5, isSublistActiveWhileIsMenuExpanded && !isSubmenuAboveMenuItem && _ref4];
 const Faded = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1i568cv5"
+  target: "e1i568cv8"
 } )({
   name: "16qr508",
   styles: "position:absolute;top:-32px;height:32px;width:100%;background:linear-gradient(180deg, rgba(0, 153, 135, 0) 0%, #00b39e 100%);z-index:1"
 } );
-var _ref$1 = {
+var _ref3 = {
   name: "eivff4",
   styles: "display:none"
 } ;
 const Expander = /*#__PURE__*/_styled__default["default"]("li", {
-  target: "e1i568cv4"
-} )("display:flex;align-items:center;justify-content:center;background:linear-gradient(\n    180deg,\n    ", designSystem.designTokens.colorPrimary, " 0%,\n    ", designSystem.designTokens.colorPrimary25, " 100%\n  );padding:", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing25, ";", props => !props.isVisible && _ref$1, "::before{content:'';position:absolute;top:", oidc.NAVBAR.itemHeight, ";height:1px;background:rgba(255, 255, 255, 0.5);width:calc(100% - 2 * ", designSystem.designTokens.spacing30, ");}:hover,:focus{background-color:var(--color-primary-40);}" + ("" ));
+  target: "e1i568cv7"
+} )("display:flex;align-items:center;justify-content:center;background:linear-gradient(\n    180deg,\n    ", designSystem.designTokens.colorPrimary, " 0%,\n    ", designSystem.designTokens.colorPrimary25, " 100%\n  );padding:", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing25, ";", props => !props.isVisible && _ref3, "::before{content:'';position:absolute;top:", oidc.NAVBAR.itemHeight, ";height:1px;background:rgba(255, 255, 255, 0.5);width:calc(100% - 2 * ", designSystem.designTokens.spacing30, ");}:hover,:focus{background-color:", designSystem.designTokens.colorPrimary40, ";}" + ("" ));
 const ExpanderIcon = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1i568cv3"
+  target: "e1i568cv6"
 } )("height:", oidc.NAVBAR.expanderSize, ";width:", oidc.NAVBAR.expanderSize, ";border-radius:", designSystem.designTokens.borderRadius4, ";padding:", designSystem.designTokens.spacing20, ";background:rgba(255, 255, 255, 0.2);display:flex;justify-content:center;align-items:center;:hover,:focus{background:rgba(255, 255, 255, 0.3);cursor:pointer;}" + ("" ));
 const LeftNavigation = /*#__PURE__*/_styled__default["default"]("nav", {
-  target: "e1i568cv2"
+  target: "e1i568cv5"
 } )("display:grid;width:", oidc.NAVBAR.widthLeftNavigation, ";background:", designSystem.designTokens.colorPrimary, ";height:100%;grid-template-rows:56px 1fr;transition:", oidc.NAVBAR.leftNavigationTransition, ";" + ("" ));
 const TextLinkSublistWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1i568cv1"
+  target: "e1i568cv4"
 } )({
   name: "khglpi",
   styles: "display:flex;flex-direction:column;position:relative;min-height:0"
 } );
 const NavlinkClickableContent = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1i568cv0"
+  target: "e1i568cv3"
 } )({
   name: "1kzq5ms",
   styles: "height:100%;width:100%"
 } );
+const listStyles = {
+  name: "19z1op4",
+  styles: "margin:0;padding:0;display:flex;flex-direction:column;min-height:0;flex:1 1 0"
+} ;
+const sublistStyles = /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing30, ";font-weight:", designSystem.designTokens.fontWeight400, ";font-size:", designSystem.designTokens.fontSize20, ";background-color:", designSystem.designTokens.colorAccent10, ";left:", oidc.NAVBAR.sublistIndentationWhenCollapsed, ";z-index:-1;list-style:none;position:fixed;display:none;" + ("" ), "" );
+var _ref2 = {
+  name: "6dhm9o",
+  styles: "visibility:hidden"
+} ;
+const MenuList = /*#__PURE__*/_styled__default["default"]("ul", {
+  target: "e1i568cv2"
+} )(props => [props.level === 1 && listStyles, getSubmenuPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, props.submenuVerticalPosition), props.level === 2 && sublistStyles,
+// prevent glitchy behavior during the initial render when the submenu's vertical position is evaluated as 0
+props.submenuVerticalPosition === 0 && _ref2, (props.isSublistActiveWhileIsMenuExpanded || props.isSublistCollapsedAndActive || props.isSublistCollapsedAndActiveAndAbove) && /*#__PURE__*/react.css("opacity:1;display:none;text-align:left;background-color:", designSystem.designTokens.colorAccent20, ";::before{content:'';position:absolute;display:block;width:calc(", oidc.NAVBAR.sublistWidth, " + ", designSystem.designTokens.spacing20, ");height:", oidc.NAVBAR.itemSize, ";left:calc(-1 * ", designSystem.designTokens.spacing20, ");", getContainerPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, props.isSublistActiveWhileIsMenuExpanded, props.isSublistActiveWhileIsMenuCollapsed), ";}" + ("" ), "" )], " & .highlighted,& .highlighted ", Title, "{color:", designSystem.designTokens.colorSurface, "!important;font-weight:", designSystem.designTokens.fontWeight600, ";}" + ("" ));
+const SublistItem = /*#__PURE__*/_styled__default["default"]("li", {
+  target: "e1i568cv1"
+} )("display:flex;align-items:center;align-self:stretch;", props => [props.isActive && /*#__PURE__*/react.css("border-radius:", designSystem.designTokens.borderRadius4, ";background:", designSystem.designTokens.colorAccent30, ";" + ("" ), "" ), !props.isActive && /*#__PURE__*/react.css(":hover,:focus-within{color:", designSystem.designTokens.colorSurface, ";font-weight:", designSystem.designTokens.fontWeight600, ";border-radius:", designSystem.designTokens.borderRadius4, ";background:", designSystem.designTokens.colorPrimary95, ";[data-link-level='text-link-sublist']{padding:", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing25, " calc(\n                ", designSystem.designTokens.spacing30, " + ", designSystem.designTokens.spacing20, "\n              );}}" + ("" ), "" )], ";" + ("" ));
+var _ref = {
+  name: "1azakc",
+  styles: "text-align:center"
+} ;
+const MenuListItem = /*#__PURE__*/_styled__default["default"]("li", {
+  target: "e1i568cv0"
+} )("height:", oidc.NAVBAR.itemSize, ";width:", oidc.NAVBAR.itemSize, ";margin:0;background:", designSystem.designTokens.colorPrimary, ";list-style:none;cursor:pointer;", IconWrapper, "{width:auto;display:flex;justify-content:center;}", props => [props.isRouteActive && /*#__PURE__*/react.css("background:", designSystem.designTokens.colorAccent30, ";border-radius:", designSystem.designTokens.borderRadius8, ";" + ("" ), "" ), !props.isRouteActive && /*#__PURE__*/react.css(":hover,:focus-within{background-color:", designSystem.designTokens.colorPrimary40, ";border-radius:", designSystem.designTokens.borderRadius8, ";}" + ("" ), "" ), props.isActive && /*#__PURE__*/react.css(ItemIconText, "{justify-content:flex-start;}" + ("" ), "" ), !props.isActive && /*#__PURE__*/react.css(":hover ", Icon, ">svg *:not([fill='none']),:focus-within ", Icon, ">svg *:not([fill='none']){fill:", designSystem.designTokens.colorSurface, ";}:hover .", Title, ",:focus-within ", Title, "{color:", designSystem.designTokens.colorSurface, ";}" + ("" ), "" ), props.isCollapsed && _ref], " :hover ", Title, ",:focus-within ", Title, "{margin-left:calc(", designSystem.designTokens.spacing25, " + 2px);}:hover ", Icon, ",:focus-within ", Icon, "{transform:scale(1.2);}:hover ", MenuList, ".sublist-collapsed__active,:hover ", MenuList, ".sublist-collapsed__active__above,:hover ", MenuList, ".sublist-expanded__active,:focus-within ", MenuList, ".sublist-collapsed__active,:focus-within ", MenuList, ".sublist-collapsed__active__above,:focus-within ", MenuList, ".sublist-expanded__active{display:flex;flex-direction:column;align-items:flex-start;background-color:", designSystem.designTokens.colorSurface, ";min-height:", oidc.NAVBAR.sublistItemMinHeight, ";width:", oidc.NAVBAR.sublistWidth, ";border-radius:", designSystem.designTokens.borderRadius8, ";z-index:20001;box-shadow:-2px 4px 25px 0 rgba(89, 89, 89, 0.5);}:hover ", MenuList, ".sublist-collapsed__active.sublist-collapsed__empty,:hover ", MenuList, ".sublist-collapsed__active__above.sublist-collapsed__empty,:focus-within ", MenuList, ".sublist-collapsed__active.sublist-collapsed__empty,:focus-within ", MenuList, ".sublist-collapsed__active__above.sublist-collapsed__empty{visibility:hidden;}:hover ", MenuList, ".sublist-expanded__active,:focus-within ", MenuList, ".sublist-expanded__active{left:", oidc.NAVBAR.sublistIndentationWhenExpanded, ";}" + ("" ));
+
+var _templateObject;
+const visible = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+const FixedMenu = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k9"
+} )("position:relative;width:", oidc.NAVBAR.widthLeftNavigation, ";", MenuListItem, " ", ItemIconText, "{justify-content:center;display:flex;width:100%;}" + ("" ));
+const ItemContent = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k8"
+} )("color:", designSystem.designTokens.colorNeutral, ";width:", oidc.NAVBAR.itemSize, ";position:relative;display:block;" + ("" ));
+const ScrollableMenu = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k7"
+} )("flex:1 1 0;overflow-x:hidden;overflow-y:hidden;padding:", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing30, " ", oidc.NAVBAR.itemSize, ";width:", oidc.NAVBAR.widthLeftNavigation, ";box-sizing:border-box;:hover{overflow-y:scroll;}scrollbar-width:thin;scrollbar-color:", designSystem.designTokens.colorPrimary40, " transparent;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", designSystem.designTokens.colorPrimary40, ";border-radius:", designSystem.designTokens.borderRadius8, ";}" + ("" ));
+const leftNavigationOpenStyles = /*#__PURE__*/react.css(".body__menu-open ", LeftNavigation, "{transition:", oidc.NAVBAR.leftNavigationTransition, ";width:", oidc.NAVBAR.widthLeftNavigationWhenExpanded, ";}.body__menu-open ", ScrollableMenu, "{width:", oidc.NAVBAR.widthLeftNavigationWhenExpanded, ";}.body__menu-open ", FixedMenu, "{width:", oidc.NAVBAR.widthLeftNavigationWhenExpanded, ";}.body__menu-open [data-link-level='text-link']{justify-content:start;}.body__menu-open ", MenuListItem, "{height:auto;min-height:", oidc.NAVBAR.itemSize, ";width:calc(\n      ", oidc.NAVBAR.sublistIndentationWhenExpanded, " - 2 *\n        ", designSystem.designTokens.spacing25, "\n    );&.active{max-height:500px;transition:max-height 0.25s ease-in;", ItemIconText, "{position:relative;width:auto;margin-left:0;}}", Title, "{opacity:1;margin-left:", designSystem.designTokens.spacing25, ";color:", designSystem.designTokens.colorSurface, ";transition:", oidc.NAVBAR.leftNavigationTransition, ";animation:", visible, " 150ms cubic-bezier(1, 0, 0.58, 1);}}.body__menu-open ", ItemContent, "{width:100%;}" + ("" ), "" );
+const NavigationHeader = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k6"
+} )("background-color:", designSystem.designTokens.colorAccent10, ";color:", designSystem.designTokens.colorSurface, ";display:flex;justify-content:center;flex-direction:row;align-items:center;padding:", designSystem.designTokens.spacing30, ";" + ("" ));
+const HeaderTitle = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k5"
+} )("font-weight:600;margin-left:", designSystem.designTokens.spacing20, ";transition:", oidc.NAVBAR.leftNavigationTransition, ";animation:", visible, " 150ms cubic-bezier(1, 0, 0.58, 1);" + ("" ));
+const TooltipContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k4"
+} )("position:absolute;left:0;display:flex;align-items:center;justify-content:flex-start;height:", oidc.NAVBAR.itemSize, ";visibility:visible;", props => props.alignsAgainstBottom ? 'bottom' : 'top', ":-", oidc.NAVBAR.itemSize, ";" + ("" ));
+const Tooltip = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k3"
+} )("padding:", designSystem.designTokens.spacing10, " calc(", designSystem.designTokens.spacing20, " + ", designSystem.designTokens.spacing10, ");display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;border-radius:", designSystem.designTokens.borderRadius4, ";background:", designSystem.designTokens.colorAccent10, ";box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.25);font-size:", designSystem.designTokens.fontSize20, ";line-height:", designSystem.designTokens.lineHeight20, ";font-weight:", designSystem.designTokens.fontWeight400, ";color:", designSystem.designTokens.colorSurface, ";max-height:", oidc.NAVBAR.itemSize, ";visibility:inherit;" + ("" ));
+const TextLink = /*#__PURE__*/_styled__default["default"]("a", {
+  target: "e1meml8k2"
+} )("color:", designSystem.designTokens.colorNeutral, ";text-decoration:none;display:flex;padding:", designSystem.designTokens.spacing25, ";align-items:center;justify-content:center;" + ("" ));
+const SupportMenu = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k1"
+} )("padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";height:calc(", oidc.NAVBAR.itemSize, " + ", designSystem.designTokens.spacing20, ");" + ("" ));
+const Text = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k0"
+} )("font-weight:", designSystem.designTokens.fontWeight400, ";font-size:", designSystem.designTokens.fontSize20, ";line-height:", designSystem.designTokens.lineHeight20, ";width:100%;height:100%;" + ("" ));
+const getMenuItemLinkStyles = isSubmenuLink => [isSubmenuLink && /*#__PURE__*/react.css("display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:", designSystem.designTokens.colorSolid, ";font-weight:", designSystem.designTokens.fontWeight600, ";text-decoration:none;flex:1;padding:", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing30, ";transition:padding 150ms ease-out;" + ("" ), "" ), !isSubmenuLink && /*#__PURE__*/react.css("color:", designSystem.designTokens.colorNeutral, ";text-decoration:none;display:flex;padding:", designSystem.designTokens.spacing25, ";align-items:center;justify-content:center;" + ("" ), "" )];
 
 const _excluded = ["icon"];
 function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -226,9 +221,9 @@ const ListWithSearchIcon = /*#__PURE__*/react$1.lazy(() => Promise.resolve().the
 // For backwards compatibility purposes, we still support the legacy "icon name",
 // which we then map to one of the pre-defined icons.
 // Eventually, we want to get rid of this "switch" logic.
-const IconSwitcher = _ref2 => {
-  let icon = _ref2.icon,
-    iconProps = _objectWithoutProperties(_ref2, _excluded);
+const IconSwitcher = _ref => {
+  let icon = _ref.icon,
+    iconProps = _objectWithoutProperties(_ref, _excluded);
   if (_includesInstanceProperty__default["default"](icon).call(icon, '<svg')) {
     return jsxRuntime.jsx(InlineSvg__default["default"], _objectSpread$2({
       data: icon
@@ -280,8 +275,8 @@ const IconSwitcher = _ref2 => {
 };
 IconSwitcher.propTypes = {};
 IconSwitcher.displayName = 'IconSwitcher';
-const getIcon = _ref3 => {
-  let isMenuOpen = _ref3.isMenuOpen;
+const getIcon = _ref2 => {
+  let isMenuOpen = _ref2.isMenuOpen;
   const Icon = isMenuOpen ? icons.SidebarCollapseIcon : icons.SidebarExpandIcon;
   return jsxRuntime.jsx(Icon, {
     color: "surface",
@@ -306,19 +301,15 @@ const MenuExpander = props => {
 };
 MenuExpander.propTypes = {};
 MenuExpander.displayName = 'MenuExpander';
-var _ref = {
-  name: "6dhm9o",
-  styles: "visibility:hidden"
-} ;
 const MenuGroup = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   if (props.isExpanded && (props.level === 2 && !props.hasSubmenu || props.level === 2 && !props.isActive)) {
     return null;
   }
-  const isSublistActiveWhileIsMenuExpanded = props.level === 2 && props.isActive && props.isExpanded;
-  const isSublistActiveWhileIsMenuCollapsed = props.level === 2 && props.isActive && !props.isExpanded;
-  return jsxRuntime.jsx("ul", {
+  const isSublistActiveWhileIsMenuExpanded = Boolean(props.level === 2 && props.isActive && props.isExpanded);
+  const isSublistActiveWhileIsMenuCollapsed = Boolean(props.level === 2 && props.isActive && !props.isExpanded);
+  return jsxRuntime.jsx(MenuList, {
     ref: ref && props.level === 2 ? ref : null,
-    css: /*#__PURE__*/react.css(props.level === 1 && listStyles, " ", getSubmenuPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, props.submenuVerticalPosition), ";", props.level === 2 && sublistStyles, props.submenuVerticalPosition === 0 && _ref, "::before{", getContainerPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, isSublistActiveWhileIsMenuExpanded, isSublistActiveWhileIsMenuCollapsed), ";}" + ("" ), "" ),
+    level: props.level,
     id: "group-".concat(props.id),
     "data-testid": "group-".concat(props.id),
     role: "menu",
@@ -331,16 +322,19 @@ const MenuGroup = /*#__PURE__*/react$1.forwardRef((props, ref) => {
       'sublist-collapsed__active': isSublistActiveWhileIsMenuCollapsed && !props.isSubmenuAboveMenuItem
     }, {
       'sublist-collapsed__active__above': isSublistActiveWhileIsMenuCollapsed && props.isSubmenuAboveMenuItem
-    }, {
-      sublist__inactive: !isSublistActiveWhileIsMenuCollapsed
     }),
+    isSublistActiveWhileIsMenuExpanded: isSublistActiveWhileIsMenuExpanded,
+    isSublistActiveWhileIsMenuCollapsed: isSublistActiveWhileIsMenuCollapsed,
+    isSublistCollapsedAndActive: isSublistActiveWhileIsMenuCollapsed && !props.isSubmenuAboveMenuItem,
+    isSublistCollapsedAndActiveAndAbove: Boolean(isSublistActiveWhileIsMenuCollapsed && props.isSubmenuAboveMenuItem),
+    isSubmenuAboveMenuItem: props.isSubmenuAboveMenuItem,
+    submenuVerticalPosition: props.submenuVerticalPosition,
     children: props.children
   });
 });
 MenuGroup.displayName = 'MenuGroup';
 const MenuItem$1 = props => {
-  var _props$isMainMenuRout;
-  return jsxRuntime.jsx("li", {
+  return jsxRuntime.jsx(MenuListItem, {
     role: "menuitem",
     onClick: props.onClick,
     onMouseEnter: props.onMouseEnter,
@@ -348,13 +342,13 @@ const MenuItem$1 = props => {
     onFocus: props.onMouseEnter,
     onBlur: props.onMouseLeave,
     "data-menuitem": props.identifier,
-    className: classnames__default["default"]('list-item', {
-      item__active: props.isActive,
-      item_menu__active: (_props$isMainMenuRout = props.isMainMenuRouteActive) !== null && _props$isMainMenuRout !== void 0 ? _props$isMainMenuRout : false,
-      'item_menu-collapsed': !props.isMenuOpen
+    className: classnames__default["default"]({
+      active: props.isActive
     }),
-    children: jsxRuntime.jsx("div", {
-      className: "item-link",
+    isActive: props.isActive,
+    isRouteActive: Boolean(props.isMainMenuRouteActive),
+    isCollapsed: !props.isMenuOpen,
+    children: jsxRuntime.jsx(ItemContent, {
       children: props.children
     })
   });
@@ -481,7 +475,6 @@ const NavBarLayout$1 = /*#__PURE__*/react$1.forwardRef((props, ref) => jsxRuntim
     styles: leftNavigationOpenStyles
   }), jsxRuntime.jsx(LeftNavigation, {
     ref: ref,
-    className: "left-navigation",
     "data-testid": "left-navigation",
     children: props.children
   })]
@@ -489,9 +482,7 @@ const NavBarLayout$1 = /*#__PURE__*/react$1.forwardRef((props, ref) => jsxRuntim
 NavBarLayout$1.displayName = 'NavBarLayout';
 const ItemContainer = props => {
   return jsxRuntime.jsxs(ItemIconText, {
-    className: "item-icon-text",
     children: [jsxRuntime.jsx(IconWrapper, {
-      className: "icon-wrapper",
       children: jsxRuntime.jsx(Icon, {
         className: "icon",
         children: jsxRuntime.jsx(IconSwitcher, {
@@ -500,7 +491,6 @@ const ItemContainer = props => {
         })
       })
     }), props.isMenuOpen ? jsxRuntime.jsx(Title, {
-      className: "title",
       children: jsxRuntime.jsx(MenuLabel, {
         labelAllLocales: props.labelAllLocales,
         defaultLabel: props.defaultLabel,
@@ -1037,7 +1027,6 @@ const NavBar = props => {
       id: "main",
       level: 1,
       children: [jsxRuntime.jsx(ScrollableMenu, {
-        className: "scrollable-menu",
         children: jsxRuntime.jsx(Spacings__default["default"].Stack, {
           scale: "l",
           children: _mapInstanceProperty__default["default"](allApplicationsNavbarMenuGroups).call(allApplicationsNavbarMenuGroups, navbarMenuGroup => {
@@ -1065,7 +1054,6 @@ const NavBar = props => {
           })
         })
       }), jsxRuntime.jsxs(FixedMenu, {
-        className: "fixed-menu",
         children: [jsxRuntime.jsx(Faded, {}), jsxRuntime.jsx(SupportMenu, {
           children: jsxRuntime.jsx(MenuItem$1, {
             hasSubmenu: false,
@@ -1080,9 +1068,7 @@ const NavBar = props => {
               href: constants.SUPPORT_PORTAL_URL,
               rel: "noopener noreferrer",
               target: "_blank",
-              className: "text-link",
               children: jsxRuntime.jsxs(ItemIconText, {
-                className: "item-icon-text",
                 children: [jsxRuntime.jsx(IconWrapper, {
                   children: jsxRuntime.jsx(Icon, {
                     className: "icon",
@@ -1091,7 +1077,6 @@ const NavBar = props => {
                     })
                   })
                 }), isMenuOpen ? jsxRuntime.jsx(Title, {
-                  className: "title",
                   children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages['NavBar.MCSupport.title']))
                 }) : null]
               })

package/dist/{oidc-3b2cb733.cjs.dev.js → oidc-63e926e1.cjs.dev.js}

@@ -22,6 +22,7 @@ const NAVBAR = {
   itemHeight: '56px',
   sublistIndentationWhenCollapsed: '72px',
   sublistIndentationWhenExpanded: '248px',
+  sublistItemMinHeight: '50px',
   sublistWidth: '253px',
   leftNavigationTransition: 'all 150ms cubic-bezier(1, 0, 0.58, 1)',
   widthLeftNavigation: '80px',

package/dist/{oidc-callback-c8efe7ba.esm.js → oidc-callback-03d24112.esm.js}

@@ -19,7 +19,7 @@ import { AngleLeftIcon } from '@commercetools-uikit/icons';
 import { ContentNotification } from '@commercetools-uikit/notifications';
 import Spacings from '@commercetools-uikit/spacings';
 import Text from '@commercetools-uikit/text';
-import { C as ConfigureIntlProvider } from './index-26c3cd26.esm.js';
+import { C as ConfigureIntlProvider } from './index-cb9692b6.esm.js';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import '@babel/runtime-corejs3/core-js-stable/object/keys';
 import '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
@@ -52,13 +52,12 @@ import 'redux-logger';
 import '@babel/runtime-corejs3/core-js-stable/instance/find';
 import '@babel/runtime-corejs3/core-js-stable/array/is-array';
 import '@emotion/react';
-import './oidc-fc4fcb80.esm.js';
+import './oidc-ff53dfd3.esm.js';
 import '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import '@babel/runtime-corejs3/core-js-stable/instance/map';
 import 'react-intl';
 import '@babel/runtime-corejs3/helpers/taggedTemplateLiteral';
-import '@babel/runtime-corejs3/helpers/objectDestructuringEmpty';
-import '@babel/runtime-corejs3/helpers/extends';
+import '@babel/runtime-corejs3/helpers/objectWithoutProperties';
 import 'memoize-one';
 import 'react-select';
 import '@commercetools-uikit/accessible-hidden';

package/dist/{oidc-callback-3d649198.cjs.dev.js → oidc-callback-0fd6d96a.cjs.dev.js}

@@ -21,7 +21,7 @@ var icons = require('@commercetools-uikit/icons');
 var notifications = require('@commercetools-uikit/notifications');
 var Spacings = require('@commercetools-uikit/spacings');
 var Text = require('@commercetools-uikit/text');
-var dist_commercetoolsFrontendApplicationShell = require('./index-5b8b7642.cjs.dev.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-f4019b48.cjs.dev.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 require('@babel/runtime-corejs3/core-js-stable/object/keys');
 require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
@@ -54,13 +54,12 @@ require('redux-logger');
 require('@babel/runtime-corejs3/core-js-stable/instance/find');
 require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 require('@emotion/react');
-require('./oidc-3b2cb733.cjs.dev.js');
+require('./oidc-63e926e1.cjs.dev.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 require('@babel/runtime-corejs3/core-js-stable/instance/map');
 require('react-intl');
 require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
-require('@babel/runtime-corejs3/helpers/objectDestructuringEmpty');
-require('@babel/runtime-corejs3/helpers/extends');
+require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 require('memoize-one');
 require('react-select');
 require('@commercetools-uikit/accessible-hidden');

package/dist/{oidc-callback-c69379ab.cjs.prod.js → oidc-callback-976ae406.cjs.prod.js}

@@ -21,7 +21,7 @@ var icons = require('@commercetools-uikit/icons');
 var notifications = require('@commercetools-uikit/notifications');
 var Spacings = require('@commercetools-uikit/spacings');
 var Text = require('@commercetools-uikit/text');
-var dist_commercetoolsFrontendApplicationShell = require('./index-34857f5d.cjs.prod.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-e9dcdd6b.cjs.prod.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 require('@babel/runtime-corejs3/core-js-stable/object/keys');
 require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
@@ -54,13 +54,12 @@ require('redux-logger');
 require('@babel/runtime-corejs3/core-js-stable/instance/find');
 require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 require('@emotion/react');
-require('./oidc-3f3b899b.cjs.prod.js');
+require('./oidc-cfa56c46.cjs.prod.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 require('@babel/runtime-corejs3/core-js-stable/instance/map');
 require('react-intl');
 require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
-require('@babel/runtime-corejs3/helpers/objectDestructuringEmpty');
-require('@babel/runtime-corejs3/helpers/extends');
+require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 require('memoize-one');
 require('react-select');
 require('@commercetools-uikit/accessible-hidden');

package/dist/{oidc-3f3b899b.cjs.prod.js → oidc-cfa56c46.cjs.prod.js}

@@ -22,6 +22,7 @@ const NAVBAR = {
   itemHeight: '56px',
   sublistIndentationWhenCollapsed: '72px',
   sublistIndentationWhenExpanded: '248px',
+  sublistItemMinHeight: '50px',
   sublistWidth: '253px',
   leftNavigationTransition: 'all 150ms cubic-bezier(1, 0, 0.58, 1)',
   widthLeftNavigation: '80px',

package/dist/{oidc-fc4fcb80.esm.js → oidc-ff53dfd3.esm.js}

@@ -14,6 +14,7 @@ const NAVBAR = {
   itemHeight: '56px',
   sublistIndentationWhenCollapsed: '72px',
   sublistIndentationWhenExpanded: '248px',
+  sublistItemMinHeight: '50px',
   sublistWidth: '253px',
   leftNavigationTransition: 'all 150ms cubic-bezier(1, 0, 0.58, 1)',
   widthLeftNavigation: '80px',