@asante-org/atlascopco-vt-litesitegenerator 1.2.0 → 1.4.1

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useId, useEffect } from 'react';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -11,10 +11,9 @@ function _extends() {
 }
 
 var LsgButton = function (_a) {
-  var children = _a.children,
-    _b = _a.variant,
-    variant = _b === void 0 ? "primary" : _b,
-    _c = _a.disabled,
+  var children = _a.children;
+    _a.variant;
+    var _c = _a.disabled,
     disabled = _c === void 0 ? false : _c,
     href = _a.href,
     onClick = _a.onClick,
@@ -24,7 +23,7 @@ var LsgButton = function (_a) {
     className = _e === void 0 ? "" : _e,
     _f = _a.external,
     external = _f === void 0 ? false : _f;
-  var classNames = ["lsg-button", "lsg-button--".concat(variant), disabled ? "lsg-button--disabled" : "", className].filter(Boolean).join(" ");
+  var classNames = ["lsg-button", disabled ? "lsg-button--disabled" : "", className].filter(Boolean).join(" ");
   if (href) {
     return /*#__PURE__*/React.createElement("a", _extends({
       href: disabled ? undefined : href,
@@ -34,7 +33,9 @@ var LsgButton = function (_a) {
     }, external ? {
       target: "_blank",
       rel: "noopener noreferrer"
-    } : {}), children);
+    } : {}), /*#__PURE__*/React.createElement("span", {
+      className: "lsg-button__text"
+    }, children));
   }
   return /*#__PURE__*/React.createElement("button", {
     type: type,
@@ -101,7 +102,7 @@ var LsgCard = function (_a) {
   }, /*#__PURE__*/React.createElement(LsgButton, {
     href: cta.href,
     external: cta.external,
-    variant: "ghost"
+    variant: "primary"
   }, cta.label))));
   if (href) {
     return /*#__PURE__*/React.createElement("article", {
@@ -159,23 +160,72 @@ var LsgLogo = function (_a) {
 var LsgNavigation = function (_a) {
   var items = _a.items,
     _b = _a.label,
-    label = _b === void 0 ? "Main navigation" : _b;
+    label = _b === void 0 ? "Main navigation" : _b,
+    _c = _a.variant,
+    variant = _c === void 0 ? "simple" : _c,
+    onItemClick = _a.onItemClick;
+  var renderItems = function (navItems, level) {
+    if (level === void 0) {
+      level = 0;
+    }
+    return /*#__PURE__*/React.createElement("ul", {
+      className: level === 0 ? "lsg-nav__list" : "lsg-nav__dropdown",
+      role: "list"
+    }, navItems.map(function (item) {
+      var _a;
+      var hasChildren = Boolean((_a = item.children) === null || _a === void 0 ? void 0 : _a.length);
+      return /*#__PURE__*/React.createElement("li", {
+        key: "".concat(item.href, "-").concat(level),
+        className: ["lsg-nav__item", hasChildren ? "lsg-nav__item--has-children" : "", item.open ? "lsg-nav__item--open" : ""].filter(Boolean).join(" ")
+      }, /*#__PURE__*/React.createElement("a", {
+        href: item.href,
+        onClick: function (event) {
+          if (onItemClick && hasChildren) {
+            event.preventDefault();
+            onItemClick(item, level);
+          }
+        },
+        className: ["lsg-nav__link", item.current ? "lsg-nav__link--current" : ""].filter(Boolean).join(" "),
+        "aria-current": item.current ? "page" : undefined,
+        "aria-expanded": variant === "dropdown" && hasChildren ? item.open : undefined
+      }, /*#__PURE__*/React.createElement("p", null, item.label), hasChildren && /*#__PURE__*/React.createElement("span", {
+        className: "lsg-nav__chevron",
+        "aria-hidden": "true"
+      }, /*#__PURE__*/React.createElement("svg", {
+        viewBox: "0 0 640 640",
+        focusable: "false"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z"
+      })))), hasChildren && renderItems(item.children || [], level + 1));
+    }));
+  };
   return /*#__PURE__*/React.createElement("nav", {
-    className: "lsg-nav",
+    className: ["lsg-nav", "lsg-nav--".concat(variant)].join(" "),
     "aria-label": label
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: "lsg-nav__list",
-    role: "list"
-  }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: item.href,
-      className: "lsg-nav__item"
-    }, /*#__PURE__*/React.createElement("a", {
-      href: item.href,
-      className: ["lsg-nav__link", item.current ? "lsg-nav__link--current" : ""].filter(Boolean).join(" "),
-      "aria-current": item.current ? "page" : undefined
-    }, item.label));
-  })));
+  }, renderItems(items));
+};
+
+var LSG_ICON_PATHS = {
+  bars: "M96 160C96 142.3 110.3 128 128 128L512 128C529.7 128 544 142.3 544 160C544 177.7 529.7 192 512 192L128 192C110.3 192 96 177.7 96 160zM96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320zM544 480C544 497.7 529.7 512 512 512L128 512C110.3 512 96 497.7 96 480C96 462.3 110.3 448 128 448L512 448C529.7 448 544 462.3 544 480z",
+  chevronLeft: "M169.4 297.4C156.9 309.9 156.9 330.2 169.4 342.7L361.4 534.7C373.9 547.2 394.2 547.2 406.7 534.7C419.2 522.2 419.2 501.9 406.7 489.4L237.3 320L406.6 150.6C419.1 138.1 419.1 117.8 406.6 105.3C394.1 92.8 373.8 92.8 361.3 105.3L169.3 297.3z",
+  chevronRight: "M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z",
+  close: "M504.6 148.5C515.9 134.9 514.1 114.7 500.5 103.4C486.9 92.1 466.7 93.9 455.4 107.5L320 270L184.6 107.5C173.3 93.9 153.1 92.1 139.5 103.4C125.9 114.7 124.1 134.9 135.4 148.5L278.3 320L135.4 491.5C124.1 505.1 125.9 525.3 139.5 536.6C153.1 547.9 173.3 546.1 184.6 532.5L320 370L455.4 532.5C466.7 546.1 486.9 547.9 500.5 536.6C514.1 525.3 515.9 505.1 504.6 491.5L361.7 320L504.6 148.5z",
+  globe: "M367.2 477C345.7 520.7 325.8 528 320 528C314.2 528 294.3 520.7 272.8 477C255.8 442.5 243.6 395.4 240.7 344L399.3 344C396.3 395.5 384.1 442.6 367.2 477zM399.3 296L240.7 296C243.7 244.5 255.9 197.4 272.8 163C294.3 119.3 314.2 112 320 112C325.8 112 345.7 119.3 367.2 163C384.2 197.5 396.4 244.6 399.3 296zM447.4 344L526.6 344C518 418.6 469.9 481.3 403.8 510.4C427.8 467.6 444.1 408 447.4 344zM526.6 296L447.4 296C444.1 232 427.8 172.4 403.8 129.6C469.9 158.8 518 221.4 526.6 296zM192.6 296L113.4 296C122 221.4 170.1 158.7 236.2 129.6C212.2 172.4 195.9 232 192.6 296zM113.4 344L192.6 344C195.9 408 212.2 467.6 236.2 510.4C170.1 481.2 122 418.6 113.4 344zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576z",
+  home: "M96 320L320 128L544 320H480V528H352V384H288V528H160V320H96z",
+  search: "M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z"
+};
+var LsgIcon = function (_a) {
+  var name = _a.name,
+    className = _a.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 640 640",
+    "aria-hidden": "true",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: LSG_ICON_PATHS[name]
+  }));
 };
 
 var ChevronIcon = function () {
@@ -203,13 +253,15 @@ var LsgLanguageSwitcher = function (_a) {
   var currentLanguage = _a.currentLanguage,
     languages = _a.languages,
     _b = _a.label,
-    label = _b === void 0 ? "Select language" : _b;
+    label = _b === void 0 ? "Select language" : _b,
+    onLanguageChange = _a.onLanguageChange;
   var _c = useState(false),
     isOpen = _c[0],
     setIsOpen = _c[1];
   var containerRef = useRef(null);
-  var triggerId = "lsg-lang-trigger";
-  var dropdownId = "lsg-lang-dropdown";
+  var reactId = useId();
+  var triggerId = "lsg-lang-trigger-".concat(reactId);
+  var dropdownId = "lsg-lang-dropdown-".concat(reactId);
   // Close on outside click
   useEffect(function () {
     if (!isOpen) return;
@@ -251,7 +303,12 @@ var LsgLanguageSwitcher = function (_a) {
         return !prev;
       });
     }
-  }, currentLanguage, /*#__PURE__*/React.createElement(ChevronIcon, null)), isOpen && /*#__PURE__*/React.createElement("ul", {
+  }, /*#__PURE__*/React.createElement(LsgIcon, {
+    name: "globe",
+    className: "lsg-lang-switcher__globe"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "lsg-lang-switcher__current"
+  }, currentLanguage), /*#__PURE__*/React.createElement(ChevronIcon, null)), isOpen && /*#__PURE__*/React.createElement("ul", {
     id: dropdownId,
     className: "lsg-lang-switcher__dropdown",
     role: "listbox",
@@ -264,7 +321,13 @@ var LsgLanguageSwitcher = function (_a) {
     }, /*#__PURE__*/React.createElement("a", {
       href: lang.href,
       className: ["lsg-lang-switcher__option-link", lang.code === currentLanguage ? "lsg-lang-switcher__option-link--active" : ""].filter(Boolean).join(" "),
-      "aria-current": lang.code === currentLanguage ? true : undefined
+      "aria-current": lang.code === currentLanguage ? true : undefined,
+      onClick: function (event) {
+        if (!onLanguageChange) return;
+        event.preventDefault();
+        onLanguageChange(lang);
+        setIsOpen(false);
+      }
     }, lang.label));
   })));
 };
@@ -442,6 +505,81 @@ var LsgSearchOverlay = function (_a) {
 };
 
 var SEARCH_OVERLAY_ID = "lsg-header-search-overlay";
+var LsgHeaderIcon = function (_a) {
+  var name = _a.name,
+    className = _a.className;
+  return /*#__PURE__*/React.createElement(LsgIcon, {
+    name: name,
+    className: ["lsg-header__icon", className || ""].filter(Boolean).join(" ")
+  });
+};
+var getItemByPath = function (items, activePath, depth) {
+  var currentItems = items;
+  var currentItem;
+  var _loop_1 = function (i) {
+    currentItem = currentItems.find(function (item) {
+      return item.label === activePath[i];
+    });
+    currentItems = (currentItem === null || currentItem === void 0 ? void 0 : currentItem.children) || [];
+  };
+  for (var i = 0; i <= depth; i += 1) {
+    _loop_1(i);
+  }
+  return currentItem;
+};
+var getItemsAtLevel = function (items, activePath, level) {
+  var _a;
+  if (level <= 1) {
+    return items;
+  }
+  return ((_a = getItemByPath(items, activePath, level - 2)) === null || _a === void 0 ? void 0 : _a.children) || [];
+};
+var getMegaColumns = function (items, activePath, maxDepth) {
+  if (maxDepth === void 0) {
+    maxDepth = 4;
+  }
+  var columns = [items];
+  var currentItems = items;
+  activePath.slice(0, maxDepth - 1).forEach(function (label) {
+    var _a;
+    var activeItem = currentItems.find(function (item) {
+      return item.label === label;
+    });
+    if ((_a = activeItem === null || activeItem === void 0 ? void 0 : activeItem.children) === null || _a === void 0 ? void 0 : _a.length) {
+      columns.push(activeItem.children);
+      currentItems = activeItem.children;
+    }
+  });
+  return columns.slice(0, maxDepth);
+};
+var isCurrentOrActiveAtLevel = function (item, activePath, level) {
+  return item.current || activePath[level] === item.label;
+};
+var isSelectedAtLevel = function (item, activePath, level) {
+  return activePath[level] === item.label;
+};
+var hasOpenNavItem = function (items) {
+  return items.some(function (item) {
+    return item.open || hasOpenNavItem(item.children || []);
+  });
+};
+var HeaderActionButton = function (_a) {
+  var label = _a.label,
+    icon = _a.icon,
+    onClick = _a.onClick,
+    controls = _a.controls,
+    className = _a.className;
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: ["lsg-header__icon-button", className || ""].filter(Boolean).join(" "),
+    "aria-label": label,
+    "aria-controls": controls,
+    onClick: onClick,
+    "data-lsg-search-trigger": icon === "search" ? "" : undefined
+  }, /*#__PURE__*/React.createElement(LsgHeaderIcon, {
+    name: icon
+  }));
+};
 var LsgHeader = function (_a) {
   var logo = _a.logo,
     _b = _a.navItems,
@@ -450,35 +588,216 @@ var LsgHeader = function (_a) {
     languages = _c === void 0 ? [] : _c,
     _d = _a.currentLanguage,
     currentLanguage = _d === void 0 ? "EN" : _d,
+    onLanguageChange = _a.onLanguageChange,
     _e = _a.searchLabel,
     searchLabel = _e === void 0 ? "Open search" : _e,
     _f = _a.searchPlaceholder,
-    searchPlaceholder = _f === void 0 ? "Search products, documents…" : _f;
-  var _g = useState(false),
-    searchOpen = _g[0],
-    setSearchOpen = _g[1];
+    searchPlaceholder = _f === void 0 ? "Search products, documents..." : _f,
+    _g = _a.variant,
+    variant = _g === void 0 ? "simple" : _g,
+    _h = _a.menuOpen,
+    menuOpen = _h === void 0 ? false : _h,
+    _j = _a.mobileLevel,
+    mobileLevel = _j === void 0 ? 0 : _j,
+    _k = _a.activePath,
+    activePath = _k === void 0 ? [] : _k,
+    mobileSelectedLabel = _a.mobileSelectedLabel,
+    onMenuToggle = _a.onMenuToggle,
+    onNavItemClick = _a.onNavItemClick,
+    onDropdownClose = _a.onDropdownClose,
+    onMegaItemClick = _a.onMegaItemClick,
+    onMobileItemClick = _a.onMobileItemClick,
+    onMobileBreadcrumbClick = _a.onMobileBreadcrumbClick;
+  var _l = useState(false),
+    searchOpen = _l[0],
+    setSearchOpen = _l[1];
+  var headerRef = useRef(null);
+  var mobileOpen = menuOpen || mobileLevel > 0;
+  var columns = getMegaColumns(navItems, activePath);
+  var mobileItems = getItemsAtLevel(navItems, activePath, mobileLevel || 1);
+  var dropdownOpen = variant === "dropdown" && hasOpenNavItem(navItems);
+  useEffect(function () {
+    if (!menuOpen && !dropdownOpen) {
+      return undefined;
+    }
+    var closeOnOutsidePointerDown = function (event) {
+      var _a;
+      if ((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+        return;
+      }
+      if (menuOpen) {
+        onMenuToggle === null || onMenuToggle === void 0 ? void 0 : onMenuToggle();
+      }
+      if (dropdownOpen) {
+        onDropdownClose === null || onDropdownClose === void 0 ? void 0 : onDropdownClose();
+      }
+    };
+    document.addEventListener("mousedown", closeOnOutsidePointerDown);
+    document.addEventListener("touchstart", closeOnOutsidePointerDown);
+    return function () {
+      document.removeEventListener("mousedown", closeOnOutsidePointerDown);
+      document.removeEventListener("touchstart", closeOnOutsidePointerDown);
+    };
+  }, [dropdownOpen, menuOpen, onDropdownClose, onMenuToggle]);
+  var openSearch = function () {
+    return setSearchOpen(true);
+  };
+  var renderActions = function (showMenu) {
+    if (showMenu === void 0) {
+      showMenu = false;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "lsg-header__actions"
+    }, showMenu && variant === "mega" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "lsg-header__menu-trigger",
+      "aria-expanded": menuOpen,
+      onClick: onMenuToggle
+    }, /*#__PURE__*/React.createElement(LsgHeaderIcon, {
+      name: menuOpen ? "close" : "bars"
+    }), /*#__PURE__*/React.createElement("span", null, menuOpen ? "CLOSE" : "MENU")), /*#__PURE__*/React.createElement("span", {
+      className: "lsg-header__separator",
+      "aria-hidden": "true"
+    }, "|")), /*#__PURE__*/React.createElement(HeaderActionButton, {
+      label: searchLabel,
+      icon: "search",
+      controls: SEARCH_OVERLAY_ID,
+      onClick: openSearch
+    }), languages.length > 0 && /*#__PURE__*/React.createElement(LsgLanguageSwitcher, {
+      currentLanguage: currentLanguage,
+      languages: languages,
+      label: "Current language: ".concat(currentLanguage),
+      onLanguageChange: onLanguageChange
+    }));
+  };
+  var renderMegaPanel = function () {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "lsg-header__mega-panel"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "lsg-header__mega-inner"
+    }, columns.map(function (columnItems, columnIndex) {
+      return /*#__PURE__*/React.createElement("ul", {
+        key: "mega-column-".concat(columnIndex),
+        className: "lsg-header__mega-column",
+        role: "list"
+      }, columnItems.map(function (item) {
+        var _a;
+        var hasChildren = Boolean((_a = item.children) === null || _a === void 0 ? void 0 : _a.length);
+        return /*#__PURE__*/React.createElement("li", {
+          key: "".concat(item.href, "-").concat(columnIndex),
+          className: ["lsg-header__mega-item", hasChildren ? "lsg-header__mega-item--has-children" : "", isSelectedAtLevel(item, activePath, columnIndex) ? "lsg-header__mega-item--active" : ""].filter(Boolean).join(" ")
+        }, /*#__PURE__*/React.createElement("a", {
+          href: item.href,
+          className: "lsg-header__mega-link",
+          onClick: function (event) {
+            if (onMegaItemClick && hasChildren) {
+              event.preventDefault();
+              onMegaItemClick(item, columnIndex);
+            }
+          }
+        }, /*#__PURE__*/React.createElement("span", null, item.label), hasChildren && /*#__PURE__*/React.createElement(LsgHeaderIcon, {
+          name: "chevronRight"
+        })));
+      }));
+    })));
+  };
+  var renderMobileMenu = function () {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "lsg-header__mobile-panel"
+    }, mobileLevel > 1 && /*#__PURE__*/React.createElement("nav", {
+      className: "lsg-header__breadcrumb",
+      "aria-label": "Breadcrumb"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "lsg-header__breadcrumb-home",
+      "aria-label": "Back to top-level menu",
+      onClick: function () {
+        return onMobileBreadcrumbClick === null || onMobileBreadcrumbClick === void 0 ? void 0 : onMobileBreadcrumbClick(1);
+      }
+    }, /*#__PURE__*/React.createElement(LsgHeaderIcon, {
+      name: "home"
+    })), activePath.map(function (label, index) {
+      var isCurrent = index === activePath.length - 1;
+      var isMiddleBreadcrumb = index > 0 && !isCurrent;
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: "".concat(label, "-").concat(index)
+      }, /*#__PURE__*/React.createElement(LsgHeaderIcon, {
+        name: "chevronRight"
+      }), /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: [isCurrent ? "lsg-header__breadcrumb-current" : "lsg-header__breadcrumb-ancestor", isMiddleBreadcrumb ? "lsg-header__breadcrumb-ancestor--ellipsis" : ""].filter(Boolean).join(" "),
+        "aria-label": isMiddleBreadcrumb ? label : undefined,
+        title: isMiddleBreadcrumb ? label : undefined,
+        onClick: function () {
+          return onMobileBreadcrumbClick === null || onMobileBreadcrumbClick === void 0 ? void 0 : onMobileBreadcrumbClick(index + 1);
+        }
+      }, isMiddleBreadcrumb ? "…" : label));
+    })), /*#__PURE__*/React.createElement("ul", {
+      className: "lsg-header__mobile-list",
+      role: "list"
+    }, mobileItems.map(function (item, index) {
+      var _a;
+      var hasChildren = Boolean((_a = item.children) === null || _a === void 0 ? void 0 : _a.length);
+      var isSelected = mobileSelectedLabel ? item.label === mobileSelectedLabel : isCurrentOrActiveAtLevel(item, activePath, Math.max(0, mobileLevel - 1));
+      return /*#__PURE__*/React.createElement("li", {
+        key: "".concat(item.href, "-mobile-").concat(index),
+        className: ["lsg-header__mobile-item", hasChildren ? "lsg-header__mobile-item--has-children" : "", isSelected ? "lsg-header__mobile-item--active" : ""].filter(Boolean).join(" ")
+      }, /*#__PURE__*/React.createElement("a", {
+        href: item.href,
+        className: "lsg-header__mobile-link",
+        onClick: function (event) {
+          if (onMobileItemClick && hasChildren) {
+            event.preventDefault();
+            onMobileItemClick(item, Math.max(1, mobileLevel || 1));
+          }
+        }
+      }, /*#__PURE__*/React.createElement("span", null, item.label), hasChildren && /*#__PURE__*/React.createElement(LsgHeaderIcon, {
+        name: "chevronRight"
+      })));
+    })));
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("header", {
-    className: "lsg-header"
+    ref: headerRef,
+    className: ["lsg-header", "lsg-header--".concat(variant), menuOpen ? "lsg-header--menu-open" : "", "lsg-header--mobile-level-".concat(mobileLevel)].filter(Boolean).join(" ")
   }, /*#__PURE__*/React.createElement("div", {
     className: "lsg-header__inner"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "lsg-header__brand"
-  }, /*#__PURE__*/React.createElement(LsgLogo, logo)), navItems.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "lsg-logo-decorator"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lsg-logo"
+  }, /*#__PURE__*/React.createElement(LsgLogo, logo))), variant !== "mega" && navItems.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: "lsg-header__nav"
   }, /*#__PURE__*/React.createElement(LsgNavigation, {
-    items: navItems
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "lsg-header__actions"
-  }, languages.length > 0 && /*#__PURE__*/React.createElement(LsgLanguageSwitcher, {
-    currentLanguage: currentLanguage,
-    languages: languages
-  }), /*#__PURE__*/React.createElement(LsgSearchTrigger, {
+    items: navItems,
+    variant: variant,
+    onItemClick: onNavItemClick
+  })), variant === "mega" && /*#__PURE__*/React.createElement("div", {
+    className: "lsg-header__desktop-menu"
+  }, renderActions(true)), variant !== "mega" && /*#__PURE__*/React.createElement("div", {
+    className: "lsg-header__desktop-actions"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "lsg-header__separator",
+    "aria-hidden": "true"
+  }, "|"), renderActions(false)), /*#__PURE__*/React.createElement("div", {
+    className: "lsg-header__mobile-actions"
+  }, /*#__PURE__*/React.createElement(HeaderActionButton, {
     label: searchLabel,
-    targetId: SEARCH_OVERLAY_ID,
-    onClick: function () {
-      return setSearchOpen(true);
-    }
-  })))), /*#__PURE__*/React.createElement(LsgSearchOverlay, {
+    icon: "search",
+    controls: SEARCH_OVERLAY_ID,
+    onClick: openSearch
+  }), languages.length > 0 && /*#__PURE__*/React.createElement(LsgLanguageSwitcher, {
+    currentLanguage: currentLanguage,
+    languages: languages,
+    label: "Current language: ".concat(currentLanguage),
+    onLanguageChange: onLanguageChange
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "lsg-header__separator",
+    "aria-hidden": "true"
+  }, "|"), /*#__PURE__*/React.createElement(HeaderActionButton, {
+    label: mobileOpen ? "Close menu" : "Open menu",
+    icon: mobileOpen ? "close" : "bars",
+    onClick: onMenuToggle
+  }))), variant === "mega" && menuOpen && renderMegaPanel(), mobileOpen && renderMobileMenu()), /*#__PURE__*/React.createElement(LsgSearchOverlay, {
     id: SEARCH_OVERLAY_ID,
     isOpen: searchOpen,
     onClose: function () {