@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.4

package/dist/_shared/esm/SiteHeaderV2-8208ddb7.js

@@ -0,0 +1,683 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { b as SemSizeBreakpointsL } from './index.es-28a91edf.js';
+import { c as classNames } from './index-2e73c2e9.js';
+import React__default, { useEffect, Fragment, useRef, useState, createContext, useContext } from 'react';
+import { B as BrandLogo } from './BrandLogo-7ed8aeda.js';
+import { u as useMediaQuery } from './use-media-query-d3622da8.js';
+import { S as Surface } from './Surface-71d21a9e.js';
+import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
+import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-4764708f.js';
+import './Heading-906c7c7c.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper-59be8f35.js';
+import { B as ButtonV2 } from './ButtonV2-49cd0615.js';
+import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
+import { T as Text } from './Text-a46fb76b.js';
+import { I as Icon } from './Icon-512f834f.js';
+
+var Item = function (_a) {
+    var _b;
+    var children = _a.children, href = _a.href; _a.isEmphasised; var onClick = _a.onClick, props = __rest(_a, ["children", "href", "isEmphasised", "onClick"]);
+    return (React__default.createElement("li", __assign({ className: classNames((_b = {},
+            _b["arc-SiteHeaderV2Item"] = true,
+            _b["arc-SiteHeaderV2Item--emphasised"] = true,
+            _b)) }, filterDataAttrs(props), { role: "none" }),
+        React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href, role: "menuitem" },
+            children,
+            React__default.createElement("span", { className: "arc-SiteHeaderV2Item-linkIcon" },
+                React__default.createElement(BtIconChevronRightMid, null)))));
+};
+
+var ItemGroup = function (_a) {
+    var children = _a.children, href = _a.href, title = _a.title, subtitle = _a.subtitle, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "href", "title", "subtitle", "onClick", "viewAllTitle"]);
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== Item && item.type !== Fragment) {
+                throw new Error("Illegal child passed to <SiteHeaderV2.ItemGroup />. Ensure to only use <SiteHeaderV2.Item />.");
+            }
+        });
+    }, [children]);
+    var ElementType = title ? "details" : "div";
+    return (React__default.createElement("li", { className: "arc-SiteHeaderV2ItemGroup" },
+        React__default.createElement(ElementType, __assign({ className: "arc-SiteHeaderV2ItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
+            title ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("summary", { tabIndex: isMinWidthArcBreakpointL ? -1 : 0, className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
+                    React__default.createElement(ConditionalWrapper, { condition: isMinWidthArcBreakpointL, wrapper: function (children) { return (React__default.createElement("a", { onClick: handleLinkClick({
+                                handler: onClick
+                            }), className: "arc-SiteHeaderV2ItemGroup-title", href: href }, children)); }, fallback: function (children) { return (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, children)); } }, title),
+                    React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
+                        React__default.createElement(BtIconChevronRightMid, null)))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
+                React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
+            React__default.createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items", role: "menubar" },
+                children,
+                href && title ? (React__default.createElement("li", { className: "arc-SiteHeaderV2Item arc-SiteHeaderV2Item--viewAll" },
+                    React__default.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick({
+                            handler: onClick
+                        }), href: href }, viewAllTitle || "View all ".concat(title.toLowerCase())))) : null))));
+};
+
+var Column = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== ItemGroup) {
+                throw new Error("Illegal child passed to <SiteHeaderV2.Column />. Ensure to only use <SiteHeaderV2.ItemGroup />.");
+            }
+        });
+    }, [children]);
+    return (React__default.createElement("li", __assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs(props), { role: "none" }),
+        React__default.createElement("ul", { className: "arc-SiteHeaderV2Column-items", role: "none" }, children)));
+};
+
+const BtIconChevronLeft2Px = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M22.5,29.99854a.99676.99676,0,0,1-.707-.293L8.08594,15.99268,21.793,2.294A1.00023,1.00023,0,0,1,23.207,3.709l-12.293,12.28467L23.207,28.2915a1,1,0,0,1-.707,1.707Z",
+      fill: "currentColor",
+    }),
+  );
+
+var BackButton = function (_a) {
+    var setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick;
+    return (React__default.createElement("button", { className: "arc-SiteHeaderV2BackButton", onClick: function () {
+            setOpen(false);
+            setOpenPanelOnFirstClick(false);
+        } },
+        React__default.createElement("span", { className: "arc-SiteHeaderV2BackButton-icon" },
+            React__default.createElement(BtIconChevronLeft2Px, null)),
+        React__default.createElement("span", { className: "arc-SiteHeaderV2BackButton-text" }, "Back")));
+};
+
+var Panel = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var children = _a.children, navItemRef = _a.navItemRef, isNavItem = _a.isNavItem, open = _a.open, setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick, subNavItemRef = _a.subNavItemRef; _a.navLink; var _h = _a.subNavLink, subNavLink = _h === void 0 ? "" : _h, title = _a.title, subtitle = _a.subtitle, viewAll = _a.viewAll, withSubNav = _a.withSubNav; _a.fade; var isPrimary = _a.isPrimary, props = __rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "setOpenPanelOnFirstClick", "subNavItemRef", "navLink", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
+    var menubarRef = useHeaderV2Context().menubarRef;
+    useEffect(function () {
+        // Where appropriate, close the Panel when clicking outside of it,
+        // by listening to clicks on the entire document and acting accordingly.
+        var handleClick = function (e) {
+            var _a, _b, _c, _d;
+            (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("noFocus");
+            // Don't close the Panel…
+            if (
+            // The click is inside the current SubNavItem.
+            ((_c = subNavItemRef === null || subNavItemRef === void 0 ? void 0 : subNavItemRef.current) === null || _c === void 0 ? void 0 : _c.contains(e.target)) ||
+                // The click is inside the current NavItem
+                // and the Panel is not inside a SubNavItem.
+                // and the target is not a link
+                (((_d = navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current) === null || _d === void 0 ? void 0 : _d.contains(e.target)) &&
+                    !subNavItemRef &&
+                    !e.target.getAttribute("href")) ||
+                // The Panel is inside a SubNavItem
+                // and the click is not on a SubNavItem-link.
+                // This ensures that one SubNavItem Panel per NavItem always remains open.
+                (subNavItemRef &&
+                    !e.target.classList.contains(subNavLink) &&
+                    !e.target.classList.contains("".concat(subNavLink, "Title")) &&
+                    !e.target.classList.contains("".concat(subNavLink, "SubTitle")) &&
+                    !e.target.classList.contains("".concat(subNavLink, "Slot")) &&
+                    !e.target.classList.contains("".concat(subNavLink, "SlotTitle"))) ||
+                // Panel is inside a SubNavItem
+                // and the click is not inside the Panel's NavItem parent.
+                // This prevents SubNavItem Panels in sibling NavItems from being closed.
+                (subNavItemRef && !(navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current.contains(e.target)))) {
+                return;
+            }
+            // Close the panel.
+            setOpen(false);
+            setOpenPanelOnFirstClick(false);
+        };
+        document.addEventListener("click", handleClick);
+        return function () {
+            document.removeEventListener("click", handleClick);
+        };
+    }, [
+        navItemRef,
+        setOpen,
+        subNavItemRef,
+        subNavLink,
+        setOpenPanelOnFirstClick,
+        menubarRef,
+    ]);
+    useEffect(function () {
+        var handleClick = function (e) {
+            var _a, _b;
+            (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("noFocus");
+            // Close the Panel…
+            if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel")) {
+                setOpenPanelOnFirstClick(false);
+                return;
+            }
+            if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel") ||
+                e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-primary")) {
+                setOpenPanelOnFirstClick(true);
+                return;
+            }
+        };
+        document.addEventListener("click", handleClick);
+        return function () {
+            document.removeEventListener("click", handleClick);
+        };
+    }, [navItemRef, setOpenPanelOnFirstClick, menubarRef]);
+    useEffect(function () {
+        var handleKeydown = function (e) {
+            var _a, _b;
+            // Check the viewport width at time of press
+            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(SemSizeBreakpointsL, ")")).matches;
+            if (e.key === "Escape" || e.keyCode === 27) {
+                if (isMinWidthArcBreakpointL && subNavItemRef) {
+                    // Don't close Panels inside SubNavItems when viewport width is above
+                    // the "desktop" breakpoint.
+                    return false;
+                }
+                return setOpen(false);
+            }
+            if (e.key === "Tab") {
+                (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove("noFocus");
+            }
+        };
+        window.addEventListener("keydown", handleKeydown);
+        return function () {
+            window.removeEventListener("keydown", handleKeydown);
+        };
+    }, [setOpen, subNavItemRef, menubarRef]);
+    return (React__default.createElement("div", { style: { display: "flex" } },
+        React__default.createElement("div", __assign({ className: classNames((_b = {},
+                _b["arc-SiteHeaderV2Panel"] = true,
+                _b["arc-SiteHeaderV2Panel--open"] = open,
+                _b["arc-SiteHeaderV2Panel--withSubNav"] = withSubNav,
+                _b["arc-SiteHeaderV2Panel-onlyPanel"] = isPrimary && isNavItem,
+                _b)) }, filterDataAttrs(props)),
+            React__default.createElement(Surface, { background: "light-white" },
+                React__default.createElement(BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: setOpenPanelOnFirstClick }),
+                React__default.createElement("div", { className: classNames((_c = {},
+                        _c["arc-SiteHeaderV2Panel-inner"] = !isNavItem && withSubNav,
+                        _c["arc-SiteHeaderV2Panel-innerWithoutSubNav"] = !isNavItem && !withSubNav,
+                        _c["arc-SiteHeaderV2NavItemWithSubNav-fadeIn"] = !isNavItem && !withSubNav,
+                        _c["arc-SiteHeaderV2Panel-innerNavItems"] = isNavItem,
+                        _c)) },
+                    React__default.createElement("div", { className: classNames((_d = {},
+                            _d["arc-SiteHeaderV2Panel-main"] = !isNavItem && !withSubNav,
+                            _d)) },
+                        React__default.createElement("div", { className: classNames((_e = {},
+                                _e["arc-SiteHeaderV2Panel-mainInnerWithoutSubNav"] = !isNavItem && !withSubNav,
+                                _e["arc-SiteHeaderV2Panel-mainInner"] = !isNavItem,
+                                _e["arc-SiteHeaderV2Panel-mainInnerNavItems"] = isNavItem,
+                                _e)) },
+                            withSubNav && (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-subNavArea" })),
+                            !isMinWidthArcBreakpointL && title && (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileTitleBlock" },
+                                React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileTitle" },
+                                    title && (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-title" }, title)),
+                                    React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-subTitle" }, subtitle)))),
+                            React__default.createElement("ul", { className: classNames((_f = {},
+                                    _f["arc-SiteHeaderV2Panel-items"] = !isNavItem,
+                                    _f["arc-SiteHeaderV2Panel-itemsNavItems"] = isNavItem,
+                                    _f["arc-SiteHeaderV2NavItemWithSubNav-fadeIn"] = open && isNavItem,
+                                    _f)) }, children),
+                            !withSubNav && viewAll)),
+                    withSubNav && viewAll)))));
+};
+var ViewAll = function (_a) {
+    var href = _a.href, title = _a.title, onClick = _a.onClick, buttonStyle = _a.buttonStyle;
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
+    if (buttonStyle === "secondary") {
+        return isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-viewAllOutlined" },
+            React__default.createElement(ButtonV2, { buttonStyle: buttonStyle, label: title !== null && title !== void 0 ? title : "", href: href, onClick: onClick }))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll arc-SiteHeaderV2Panel-mobileViewAllOutlined" },
+            React__default.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick({
+                    handler: onClick
+                }), href: href }, title)));
+    }
+    else {
+        return isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-viewAll" },
+            React__default.createElement(ButtonV2, { buttonStyle: buttonStyle, label: title !== null && title !== void 0 ? title : "", isFullWidth: true, href: href, onClick: onClick }))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll" },
+            React__default.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick({
+                    handler: onClick
+                }), href: href }, title)));
+    }
+};
+Panel.ViewAll = ViewAll;
+
+const BtIconChevronRight2Px = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M9.5,29.99854A1.00025,1.00025,0,0,1,8.793,28.291l12.293-12.28467L8.793,3.7085A.99989.99989,0,0,1,10.207,2.29443l13.707,13.71289L10.207,29.70605A.99827.99827,0,0,1,9.5,29.99854Z",
+      fill: "currentColor",
+    }),
+  );
+
+var NavItem = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, title = _a.title; _a.viewAllTitle; var isPrimary = _a.isPrimary, opensFirstWithPanel = _a.opensFirstWithPanel, subTitle = _a.subTitle, props = __rest(_a, ["children", "href", "isCurrent", "onClick", "title", "viewAllTitle", "isPrimary", "opensFirstWithPanel", "subTitle"]);
+    var navItem = useRef();
+    var _g = useState(false), panelOpen = _g[0], setPanelOpen = _g[1];
+    var _h = useState(true), openSecondaryWithSubNav = _h[0], setOpenSecondaryWithSubNav = _h[1];
+    var _j = useState(false), animation = _j[0], setAnimation = _j[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item &&
+                item.type !== ItemGroup &&
+                item.type !== Column &&
+                item.type !== Fragment) {
+                throw new Error("Illegal child passed to <SiteHeaderV2.NavItem />. Ensure to only use <SiteHeaderV2.ItemGroup /> or <SiteHeaderV2.Column />.");
+            }
+        });
+    }, [children]);
+    return (React__default.createElement("li", __assign({ className: classNames((_b = {},
+            _b["arc-SiteHeaderV2NavItem-primary"] = isPrimary,
+            _b["arc-SiteHeaderV2NavItemWithSubNav-Secondary"] = !isPrimary,
+            _b["arc-SiteHeaderV2NavItem"] = !subTitle && !isPrimary,
+            _b["arc-SiteHeaderV2NavItem--linkSelected"] = (children && panelOpen) || (!children && href && isCurrent),
+            _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = (!isPrimary && panelOpen) ||
+                (opensFirstWithPanel && openSecondaryWithSubNav),
+            _b)), ref: navItem }, filterDataAttrs(props)), !children ? (href ? (React__default.createElement("a", { onClick: handleLinkClick({
+            handler: onClick
+        }), className: "arc-SiteHeaderV2NavItem-link", href: href }, title)) : null) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
+            React__default.createElement("button", { "aria-expanded": panelOpen, role: "menuitem", "aria-haspopup": "true", "aria-label": title, className: classNames((_c = {},
+                    _c["arc-SiteHeaderV2NavItem-link"] = true,
+                    _c["arc-SiteHeaderV2NavItem-horizontalPanelFocus"] = !isPrimary,
+                    _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
+                    _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
+                    _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
+                    _c["arc-SiteHeaderV2NavItem-horizontalPanelLink"] = !isPrimary && !isMinWidthArcBreakpointL,
+                    _c)), onClick: function (e) {
+                    e.preventDefault();
+                    setPanelOpen(!panelOpen);
+                    setAnimation(true);
+                }, onAnimationEnd: function () { return setAnimation(false); } },
+                React__default.createElement("div", { className: classNames((_d = {},
+                        _d["arc-SiteHeaderV2NavItem-title"] = !subTitle,
+                        _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
+                        _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
+                        _d)) }, title),
+                React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
+                    React__default.createElement(BtIconChevronRight2Px, null)),
+                subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: classNames((_e = {},
+                        _e["arc-SiteHeaderV2NavItemWithSubNav-text"] = !isPrimary,
+                        _e["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
+                        _e["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
+                        _e)) }, subTitle)) : null,
+                React__default.createElement("div", { className: classNames((_f = {},
+                        _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = panelOpen ||
+                            (opensFirstWithPanel && openSecondaryWithSubNav),
+                        _f["arc-SiteHeaderV2NavItemWithSubNav-primaryButtonUnderline"] = isPrimary && panelOpen,
+                        _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive"] = !isPrimary && (panelOpen || openSecondaryWithSubNav),
+                        _f)) }))),
+        React__default.createElement(Panel, { navItemRef: navItem, isNavItem: true, isPrimary: isPrimary, open: opensFirstWithPanel && isMinWidthArcBreakpointL
+                ? openSecondaryWithSubNav
+                : panelOpen, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, fade: animation, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: "See all solutions", buttonStyle: "primary" })) : undefined }, children)))));
+};
+
+var HorizontalPanel = function (_a) {
+    var _b, _c, _d;
+    var children = _a.children, navItemRef = _a.navItemRef, open = _a.open, setOpen = _a.setOpen, subNavItemRef = _a.subNavItemRef, _e = _a.subNavLink, subNavLink = _e === void 0 ? "" : _e, title = _a.title, withSubNav = _a.withSubNav; _a.animation; var props = __rest(_a, ["children", "navItemRef", "open", "setOpen", "subNavItemRef", "subNavLink", "title", "withSubNav", "animation"]);
+    useEffect(function () {
+        // Where appropriate, close the Panel when clicking outside of it,
+        // by listening to clicks on the entire document and acting accordingly.
+        var handleClick = function (e) {
+            var _a;
+            // Close the Horizontal Panel…
+            if (
+            // The click is not inside the current NavItem
+            !((_a = navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) ||
+                e.target.classList.contains("arc-SiteHeaderV2HorizontalPanel--open")) {
+                setOpen(false);
+                return;
+            }
+        };
+        document.addEventListener("click", handleClick);
+        return function () {
+            document.removeEventListener("click", handleClick);
+        };
+    }, [navItemRef, setOpen, subNavItemRef, subNavLink]);
+    useEffect(function () {
+        var handleKeydown = function (e) {
+            // Check the viewport width at time of press
+            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(SemSizeBreakpointsL, ")")).matches;
+            if (e.key === "Escape" || e.keyCode === 27) {
+                if (isMinWidthArcBreakpointL && subNavItemRef) {
+                    // Don't close Panels inside SubNavItems when viewport width is above
+                    // the "desktop" breakpoint.
+                    return false;
+                }
+                return setOpen(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeydown);
+        return function () {
+            window.removeEventListener("keydown", handleKeydown);
+        };
+    }, [setOpen, subNavItemRef]);
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {},
+            _b["arc-SiteHeaderV2HorizontalPanel"] = true,
+            _b["arc-SiteHeaderV2HorizontalPanel--open"] = open,
+            _b["arc-SiteHeaderV2HorizontalPanel--withSubNav"] = withSubNav,
+            _b)) }, filterDataAttrs(props)),
+        React__default.createElement(Surface, { background: "light-neutral-02" },
+            React__default.createElement("div", { className: classNames((_c = {},
+                    _c["arc-SiteHeaderV2HorizontalPanel-container"] = true,
+                    _c)) },
+                React__default.createElement(BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: function () { } }),
+                title && (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-selectedTitle" }, title)),
+                React__default.createElement("ul", { className: classNames((_d = {},
+                        _d["arc-SiteHeaderV2HorizontalPanel-items"] = true,
+                        _d)) }, children)))));
+};
+
+var defaultContext$1 = { navItem: null, subTitle: null };
+var Context$1 = createContext(defaultContext$1);
+var Provider$1 = Context$1.Provider;
+var NavItemWithSubNav = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var href = _a.href, slot1 = _a.slot1, slot2 = _a.slot2, slot3 = _a.slot3, slot4 = _a.slot4, slot5 = _a.slot5, slot6 = _a.slot6, _g = _a.subTitle, subTitle = _g === void 0 ? null : _g, title = _a.title, onViewAllClick = _a.onViewAllClick, isPrimary = _a.isPrimary, opensFirstWithPanel = _a.opensFirstWithPanel, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["href", "slot1", "slot2", "slot3", "slot4", "slot5", "slot6", "subTitle", "title", "onViewAllClick", "isPrimary", "opensFirstWithPanel", "viewAllTitle"]);
+    var navItem = useRef();
+    var _h = useState(true), defaultItem = _h[0], setDefaultItem = _h[1];
+    var _j = useState(false), panelOpen = _j[0], setPanelOpen = _j[1];
+    var _k = useState(false), horizontalPanelOpen = _k[0], setHorizontalPanelOpen = _k[1];
+    var _l = useState(false), animation = _l[0], setAnimation = _l[1];
+    var _m = useState(true), openSecondaryWithSubNav = _m[0], setOpenSecondaryWithSubNav = _m[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
+    useEffect(function () {
+        React__default.Children.map(slot1, function (item) {
+            if (item.props.isDefaultItem) {
+                setDefaultItem(false);
+            }
+        });
+        React__default.Children.map(slot2, function (item) {
+            if (item.props.isDefaultItem) {
+                setDefaultItem(false);
+            }
+        });
+        React__default.Children.map(slot3, function (item) {
+            if (item.props.isDefaultItem) {
+                setDefaultItem(false);
+            }
+        });
+        React__default.Children.map(slot4, function (item) {
+            if (item.props.isDefaultItem) {
+                setDefaultItem(false);
+            }
+        });
+        React__default.Children.map(slot5, function (item) {
+            if (item.props.isDefaultItem) {
+                setDefaultItem(false);
+            }
+        });
+    }, [slot1, slot2, slot3, slot4, slot5]);
+    return (React__default.createElement(Provider$1, { value: { navItem: navItem, subTitle: subTitle } },
+        React__default.createElement("li", __assign({ className: classNames((_b = {},
+                _b["arc-SiteHeaderV2NavItemWithSubNav"] = true,
+                _b["arc-SiteHeaderV2NavItemWithSubNav-Secondary"] = !isPrimary,
+                _b["arc-SiteHeaderV2NavItem-primary"] = isPrimary,
+                _b["arc-SiteHeaderV2NavItem--linkSelected"] = isPrimary
+                    ? horizontalPanelOpen
+                    : panelOpen,
+                _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen || (opensFirstWithPanel && openSecondaryWithSubNav),
+                _b)), role: "none", ref: navItem }, filterDataAttrs(props)),
+            React__default.createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
+                React__default.createElement("button", { "aria-expanded": horizontalPanelOpen || panelOpen, role: "menuitem", "aria-label": title, "aria-haspopup": "true", tabIndex: 0, className: classNames((_c = {},
+                        _c["arc-SiteHeaderV2NavItem-link"] = true,
+                        _c["arc-SiteHeaderV2NavItem-horizontalPanelFocus"] = !isPrimary,
+                        _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
+                        _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
+                        _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
+                        _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-primary"] = isPrimary,
+                        _c["arc-SiteHeaderV2NavItem-horizontalPanelLink"] = !isPrimary && !isMinWidthArcBreakpointL,
+                        _c)), onClick: function (e) {
+                        e.preventDefault();
+                        isPrimary
+                            ? setHorizontalPanelOpen(!horizontalPanelOpen)
+                            : setPanelOpen(!horizontalPanelOpen);
+                        setAnimation(true);
+                    }, onAnimationEnd: function () { return setAnimation(false); } },
+                    React__default.createElement("div", { className: classNames((_d = {},
+                            _d["arc-SiteHeaderV2NavItem-title"] = isPrimary,
+                            _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
+                            _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
+                            _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-primary"] = isPrimary,
+                            _d)) }, title),
+                    React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
+                        React__default.createElement(BtIconChevronRight2Px, null)),
+                    subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: classNames((_e = {},
+                            _e["arc-SiteHeaderV2NavItemWithSubNav-text"] = !isPrimary,
+                            _e["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
+                            _e["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
+                            _e["arc-SiteHeaderV2NavItem-link--itemHasChildren-primary"] = isPrimary,
+                            _e)) }, subTitle)) : null,
+                    React__default.createElement("div", { className: classNames((_f = {},
+                            _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = isPrimary
+                                ? horizontalPanelOpen
+                                : panelOpen ||
+                                    (opensFirstWithPanel && openSecondaryWithSubNav),
+                            _f["arc-SiteHeaderV2NavItemWithSubNav-primaryButtonUnderline"] = isPrimary && horizontalPanelOpen,
+                            _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive "] = !isPrimary && (panelOpen || openSecondaryWithSubNav),
+                            _f)) }))),
+            isPrimary && (React__default.createElement(HorizontalPanel, { animation: animation, navItemRef: navItem, open: horizontalPanelOpen, setOpen: setHorizontalPanelOpen, title: !isMinWidthArcBreakpointL && title },
+                slot1,
+                slot2,
+                slot3,
+                slot4,
+                slot5)),
+            React__default.createElement(Panel, { navItemRef: navItem, open: opensFirstWithPanel && isMinWidthArcBreakpointL
+                    ? openSecondaryWithSubNav
+                    : panelOpen, fade: animation, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, title: !isMinWidthArcBreakpointL && title, subtitle: subTitle, navLink: "", viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle, buttonStyle: "primary" })) : undefined, withSubNav: true, isNavItem: false },
+                defaultItem
+                    ? React__default.cloneElement(slot1, { isDefaultItem: defaultItem })
+                    : slot1,
+                slot2,
+                slot3,
+                slot4,
+                slot5,
+                slot6))));
+};
+
+var NodeItem = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React__default.createElement(React__default.Fragment, __assign({}, filterDataAttrs(props)), children));
+};
+
+var MenuButton = function (_a) {
+    var _b;
+    var menuOpen = _a.menuOpen, setMenuOpen = _a.setMenuOpen;
+    return (React__default.createElement("button", { "aria-expanded": menuOpen, className: classNames((_b = {},
+            _b["arc-MenuButton"] = true,
+            _b["arc-MenuButton--menuOpen"] = menuOpen,
+            _b)), onClick: function () {
+            setMenuOpen(!menuOpen);
+        }, type: "button" },
+        React__default.createElement("span", { className: "arc-MenuButton-box" },
+            React__default.createElement("span", { className: "arc-MenuButton-inner" }),
+            React__default.createElement("span", { className: "arc-MenuButton-text" }, "Menu"))));
+};
+
+var SubNavItem = function (_a) {
+    var _b, _c;
+    var children = _a.children, _d = _a.isDefaultItem, isDefaultItem = _d === void 0 ? false : _d, href = _a.href, onClick = _a.onClick, offsetXL = _a.offsetXL, subTitle = _a.subTitle, title = _a.title, viewAllTitle = _a.viewAllTitle, icon = _a.icon, props = __rest(_a, ["children", "isDefaultItem", "href", "onClick", "offsetXL", "subTitle", "title", "viewAllTitle", "icon"]);
+    var navItem = useContext(Context$1).navItem;
+    var subNavItem = useRef();
+    var _e = useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
+    var _f = useState(false), fade = _f[0], setFade = _f[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item &&
+                item.type !== ItemGroup &&
+                item.type !== Column &&
+                item.type !== Fragment) {
+                throw new Error("Illegal child passed to <SiteHeaderV2.SubNavItem />. Ensure to only use <SiteHeaderV2.ItemGroup /> or <SiteHeaderV2.Column />.");
+            }
+        });
+    }, [children]);
+    useEffect(function () {
+        if (isDefaultItem && isMinWidthArcBreakpointL) {
+            setPanelOpen(true);
+        }
+        else {
+            setPanelOpen(false);
+        }
+    }, [isDefaultItem, isMinWidthArcBreakpointL]);
+    var linkTitle = (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-linkTitle" }, title),
+        children && panelOpen && (React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-linkIcon" },
+            React__default.createElement(BtIconChevronRight2Px, null))),
+        children && !isMinWidthArcBreakpointL && (React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-linkIcon" },
+            React__default.createElement(BtIconChevronRight2Px, null))),
+        subTitle ? (React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-linkSubTitle" }, subTitle)) : null));
+    return (React__default.createElement("li", __assign({ className: classNames((_b = {},
+            _b["arc-SiteHeaderV2SubNavItem"] = true,
+            _b["arc-SiteHeaderV2SubNavItem--linkSelected"] = children && panelOpen,
+            _b["arc-SiteHeaderV2SubNavItem--linkNotSelected"] = children && !panelOpen,
+            _b[suffixModifier("arc-SiteHeaderV2SubNavItem--offsetXL", offsetXL || "")] = offsetXL,
+            _b)), ref: subNavItem }, filterDataAttrs(props), { "data-default-item": isDefaultItem || null }), !children ? (href ? (React__default.createElement("a", { className: "arc-SiteHeaderV2SubNavItem-link", onClick: handleLinkClick({ handler: onClick }), href: href }, linkTitle)) : null) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
+                _c["arc-SiteHeaderV2SubNavItem-link"] = true,
+                _c["arc-SiteHeaderV2SubNavItem-link--itemHasChildren"] = children,
+                _c)), onClick: function (e) {
+                e.preventDefault();
+                setPanelOpen(true);
+                setFade(true);
+            }, onAnimationEnd: function () { return setFade(false); } },
+            React__default.createElement("div", { className: "arc-SiteHeaderV2SubNavItem-linkSlot" },
+                icon && isMinWidthArcBreakpointL && (React__default.createElement("div", { className: "arc-SiteHeaderV2SubNavItem-linkSlotIcon" },
+                    React__default.createElement(Icon, { icon: icon, size: 48 }))),
+                React__default.createElement("span", { "data-cy": "linkTitle", className: "arc-SiteHeaderV2SubNavItem-linkSlotTitle" }, linkTitle))),
+        React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, setOpenPanelOnFirstClick: function () { }, subNavLink: "arc-SiteHeaderV2SubNavItem-link", title: React__default.createElement("span", null,
+                title,
+                subTitle && (React__default.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "See all ".concat(title), buttonStyle: "secondary" })) : undefined, isNavItem: false, fade: fade }, children)))));
+};
+
+var VerticalDivider = function () {
+    return React__default.createElement("li", { className: "arc-SiteHeaderV2VerticalDivider-line" });
+};
+
+var defaultContext = { transparent: false, menubarRef: null };
+var Context = createContext(defaultContext);
+var Provider = Context.Provider;
+/**
+ * Use `SiteHeaderV2` to display brand logo and navigation at the top of a page.
+ */
+var SiteHeaderV2 = function (_a) {
+    var _b;
+    var children = _a.children, basket = _a.basket, _c = _a.hasLogin, hasLogin = _c === void 0 ? true : _c, _d = _a.isTransparent, isTransparent = _d === void 0 ? false : _d, _e = _a.loginHref, loginHref = _e === void 0 ? "/login" : _e, logoOnClick = _a.logoOnClick, loginOnClick = _a.loginOnClick, _f = _a.loginTitle, loginTitle = _f === void 0 ? "Log in / Register" : _f, _g = _a.logoHref, logoHref = _g === void 0 ? "/" : _g, _h = _a.logoLabel, logoLabel = _h === void 0 ? "Home" : _h, search = _a.search, subBrand = _a.subBrand, props = __rest(_a, ["children", "basket", "hasLogin", "isTransparent", "loginHref", "logoOnClick", "loginOnClick", "loginTitle", "logoHref", "logoLabel", "search", "subBrand"]);
+    var _j = useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
+    var _k = useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
+    var menubarRef = useRef();
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item &&
+                item.type !== NodeItem &&
+                item.type !== NavItem &&
+                item.type !== NavItemWithSubNav &&
+                item.type !== Fragment) {
+                throw new Error("Illegal child passed to <SiteHeaderV2 />. Ensure to only use <SiteHeaderV2.NavItem /> or <SiteHeaderV2.NavItemWithSubNav />");
+            }
+        });
+    }, [children]);
+    useEffect(function () {
+        if (!isMinWidthArcBreakpointL && menuOpen) {
+            document.body.classList.add("arc-body--overflowHidden");
+        }
+        else {
+            document.body.classList.remove("arc-body--overflowHidden");
+        }
+        return function () {
+            document.body.classList.remove("arc-body--overflowHidden");
+        };
+    }, [isMinWidthArcBreakpointL, menuOpen]);
+    useEffect(function () {
+        var handleKeydown = function (e) {
+            if (e.key === "Escape" || e.keyCode === 27) {
+                setMenuOpen(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeydown);
+        return function () {
+            window.removeEventListener("keydown", handleKeydown);
+        };
+    }, [setMenuOpen]);
+    useEffect(function () {
+        var _a, _b;
+        (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("noFocus");
+    }, []);
+    useEffect(function () {
+        var handleClick = function (e) {
+            if (e.target.getAttribute("href")) {
+                setMenuOpen(false);
+            }
+        };
+        document.addEventListener("click", handleClick);
+        return function () {
+            document.removeEventListener("click", handleClick);
+        };
+    }, [setMenuOpen]);
+    useEffect(function () {
+        // useEffect does not run in ReactDomServer renders
+        setHasClientSideJavaScript(true);
+    }, [setHasClientSideJavaScript]);
+    return (React__default.createElement(Provider, { value: { transparent: isTransparent, menubarRef: menubarRef } },
+        React__default.createElement("div", __assign({ className: classNames((_b = {},
+                _b["arc-SiteHeaderV2"] = true,
+                _b["arc-SiteHeaderV2--menuOpen"] = menuOpen,
+                _b["arc-no-js"] = !hasClientSideJavaScript,
+                _b)) }, filterDataAttrs(props), { "data-transparent": isTransparent || null }),
+            React__default.createElement(Surface, { background: !isTransparent || (menuOpen && !isMinWidthArcBreakpointL)
+                    ? "dark-brand-01"
+                    : undefined },
+                React__default.createElement("div", { className: "arc-SiteHeaderV2-inner" },
+                    React__default.createElement("a", { className: "arc-SiteHeaderV2-brand", onClick: handleLinkClick({
+                            handler: logoOnClick
+                        }), href: logoHref },
+                        React__default.createElement(BrandLogo, { label: logoLabel, subBrand: subBrand })),
+                    children && (React__default.createElement("nav", { className: "arc-SiteHeaderV2-nav" },
+                        React__default.createElement("div", { className: "arc-SiteHeaderV2-menuButton" },
+                            React__default.createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
+                        React__default.createElement("div", { className: "arc-SiteHeaderV2-main", tabIndex: -1 },
+                            React__default.createElement("ul", { role: "menubar", "aria-label": "navigation", ref: menubarRef, className: "arc-SiteHeaderV2-navItems" }, children),
+                            hasLogin && (React__default.createElement(React__default.Fragment, null, loginOnClick ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
+                                React__default.createElement("button", { className: "arc-SiteHeaderV2-mobileLogin", onClick: loginOnClick },
+                                    loginTitle,
+                                    React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
+                                        React__default.createElement(BtIconChevronRight2Px, null))))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
+                                React__default.createElement("a", { className: "arc-SiteHeaderV2-mobileLogin", href: loginHref },
+                                    loginTitle,
+                                    React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
+                                        React__default.createElement(BtIconChevronRight2Px, null)))))))))),
+                    (basket || hasLogin || search) && (React__default.createElement("div", { className: "arc-SiteHeaderV2-secondary" },
+                        search ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-search" }, search)) : null,
+                        basket ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-basket" }, basket)) : null,
+                        hasLogin && (React__default.createElement(React__default.Fragment, null, loginOnClick ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-loginLink arc-SiteHeaderV2-loginLink--function", onClick: loginOnClick }, loginTitle)) : (React__default.createElement("a", { className: "arc-SiteHeaderV2-loginLink", href: loginHref }, loginTitle)))))))))));
+};
+function useHeaderV2Context() {
+    return useContext(Context);
+}
+SiteHeaderV2.Column = Column;
+SiteHeaderV2.Item = Item;
+SiteHeaderV2.ItemGroup = ItemGroup;
+SiteHeaderV2.NavItem = NavItem;
+SiteHeaderV2.NodeItem = NodeItem;
+SiteHeaderV2.NavItemWithSubNav = NavItemWithSubNav;
+SiteHeaderV2.SubNavItem = SubNavItem;
+SiteHeaderV2.VerticalDivider = VerticalDivider;
+
+export { SiteHeaderV2 as S };