@arc-ui/components 11.5.0 → 11.6.0

package/dist/SiteHeader/SiteHeader.cjs.js

@@ -2,676 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
-var index_es = require('../_shared/cjs/index.es-77def0c9.js');
-var index = require('../_shared/cjs/index-45bfb67b.js');
-var React = require('react');
-var BrandLogo = require('../_shared/cjs/BrandLogo-8008f0c4.js');
-var Button = require('../_shared/cjs/Button-5dff284a.js');
-var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
-var BtIconChevronDown2Px = require('../_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js');
-var handleLinkClick = require('../_shared/cjs/handle-link-click-17a44cf4.js');
-var BtIconChevronRight2Px = require('../_shared/cjs/BtIconChevronRight2Px-a8e40136.js');
-var suffixModifier = require('../_shared/cjs/suffix-modifier-1ee2da04.js');
-var Text = require('../_shared/cjs/Text-6f2827e6.js');
+var SiteHeader_rehydrator = require('../_shared/cjs/SiteHeader.rehydrator-f7fa2efe.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+require('react');
+require('../_shared/cjs/index-45bfb67b.js');
+require('../_shared/cjs/index.es-77def0c9.js');
+require('../_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js');
+require('../_shared/cjs/handle-link-click-17a44cf4.js');
+require('../_shared/cjs/BtIconChevronRight2Px-a8e40136.js');
+require('../_shared/cjs/Surface-6da0a78e.js');
+require('../_shared/cjs/BrandLogo-8008f0c4.js');
+require('../_shared/cjs/suffix-modifier-1ee2da04.js');
+require('../_shared/cjs/Button-27512fee.js');
+require('../_shared/cjs/BtIconChevronLeftMid-df952a3e.js');
 require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
 require('../_shared/cjs/Icon-9ae8dbe1.js');
+require('../_shared/cjs/Text-6f2827e6.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var Item = function (_a) {
-    var _b;
-    var children = _a.children, href = _a.href, isEmphasised = _a.isEmphasised, onClick = _a.onClick, props = filterDataAttrs.__rest(_a, ["children", "href", "isEmphasised", "onClick"]);
-    return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: index.classNames((_b = {},
-            _b["arc-SiteHeaderItem"] = true,
-            _b["arc-SiteHeaderItem--emphasised"] = isEmphasised,
-            _b)) }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href },
-            isEmphasised && (React__default["default"].createElement("span", { className: "arc-SiteHeaderItem-linkIcon" },
-                React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null))),
-            children)));
-};
-
-var ItemGroup = function (_a) {
-    var children = _a.children, href = _a.href, title = _a.title, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = filterDataAttrs.__rest(_a, ["children", "href", "title", "onClick", "viewAllTitle"]);
-    var _b = React.useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
-    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
-    React.useEffect(function () {
-        React__default["default"].Children.map(children, function (item) {
-            if (item && item.type !== Item && item.type !== React.Fragment) {
-                throw new Error("Illegal child passed to <SiteHeader.ItemGroup />. Ensure to only use <SiteHeader.Item />.");
-            }
-        });
-    }, [children]);
-    React.useEffect(function () {
-        // useEffect does not run in ReactDomServer renders
-        setHasClientSideJavaScript(true);
-    }, [setHasClientSideJavaScript]);
-    var ElementType = "div";
-    if (title) {
-        ElementType = "details";
-    }
-    return (React__default["default"].createElement("li", { className: "arc-SiteHeaderItemGroup" },
-        React__default["default"].createElement(ElementType, filterDataAttrs.__assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs.filterDataAttrs(props)),
-            title ? (React__default["default"].createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({
-                    handler: onClick
-                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 },
-                title,
-                React__default["default"].createElement("span", { className: "arc-SiteHeaderItemGroup-titleIcon" },
-                    React__default["default"].createElement(BtIconChevronDown2Px.BtIconChevronDown2Px_2, null)))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
-            React__default["default"].createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
-                children,
-                href && title ? (React__default["default"].createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
-                    React__default["default"].createElement("a", { className: "arc-SiteHeaderItem-link", onClick: handleLinkClick.handleLinkClick({
-                            handler: onClick
-                        }), href: href }, viewAllTitle || "View all ".concat(title.toLowerCase())))) : null))));
-};
-
-var ItemGroupRehydrator = (function (el, hydrate) { return filterDataAttrs.__awaiter(void 0, void 0, void 0, function () {
-    var children, titleElement, viewAllElement, title, href, viewAllTitle, props;
-    return filterDataAttrs.__generator(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, hydrate(el.querySelector(".arc-SiteHeaderItemGroup-items"))];
-            case 1:
-                children = _a.sent();
-                titleElement = el.querySelector(".arc-SiteHeaderItemGroup-title");
-                viewAllElement = el.querySelector(".arc-SiteHeaderItem--viewAll");
-                title = "";
-                href = "";
-                viewAllTitle = "";
-                if (titleElement) {
-                    title = titleElement.textContent || /* istanbul ignore next */ "";
-                    href = titleElement.getAttribute("href") || /* istanbul ignore next */ "";
-                }
-                if (viewAllElement) {
-                    viewAllTitle = viewAllElement.textContent || /* istanbul ignore next */ "";
-                }
-                props = {
-                    children: children,
-                    href: href,
-                    title: title,
-                    viewAllTitle: viewAllTitle
-                };
-                return [2 /*return*/, React__default["default"].createElement(ItemGroup, filterDataAttrs.__assign({}, props), children)];
-        }
-    });
-}); });
-
-var Column = function (_a) {
-    var children = _a.children, props = filterDataAttrs.__rest(_a, ["children"]);
-    React.useEffect(function () {
-        React__default["default"].Children.map(children, function (item) {
-            if (item && item.type !== ItemGroup) {
-                throw new Error("Illegal child passed to <SiteHeader.Column />. Ensure to only use <SiteHeader.ItemGroup />.");
-            }
-        });
-    }, [children]);
-    return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: "arc-SiteHeaderColumn" }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement("ul", { className: "arc-SiteHeaderColumn-items" }, children)));
-};
-
-var BackButton = function (_a) {
-    var setOpen = _a.setOpen;
-    return (React__default["default"].createElement("button", { className: "arc-SiteHeaderBackButton", onClick: function () {
-            setOpen(false);
-        } },
-        React__default["default"].createElement("span", { className: "arc-SiteHeaderBackButton-icon" },
-            React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronLeft2Px_2, null)),
-        React__default["default"].createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
-};
-
-var Panel = function (_a) {
-    var _b;
-    var children = _a.children, navItemRef = _a.navItemRef, open = _a.open, promo = _a.promo, setOpen = _a.setOpen, subNavItemRef = _a.subNavItemRef, _c = _a.subNavLink, subNavLink = _c === void 0 ? "" : _c, title = _a.title, viewAll = _a.viewAll, withSubNav = _a.withSubNav, props = filterDataAttrs.__rest(_a, ["children", "navItemRef", "open", "promo", "setOpen", "subNavItemRef", "subNavLink", "title", "viewAll", "withSubNav"]);
-    var transparent = React.useContext(Context).transparent;
-    React.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;
-            // Don't close the Panel…
-            if (
-            // The click is inside the current SubNavItem.
-            ((_a = subNavItemRef === null || subNavItemRef === void 0 ? void 0 : subNavItemRef.current) === null || _a === void 0 ? void 0 : _a.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
-                (((_b = navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current) === null || _b === void 0 ? void 0 : _b.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"))) ||
-                // 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);
-        };
-        document.addEventListener("click", handleClick);
-        return function () {
-            document.removeEventListener("click", handleClick);
-        };
-    }, [navItemRef, setOpen, subNavItemRef, subNavLink]);
-    React.useEffect(function () {
-        var handleKeydown = function (e) {
-            // Check the viewport width at time of press
-            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(index_es.ArcBreakpointL, "px)")).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["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {},
-            _b["arc-SiteHeaderPanel"] = true,
-            _b["arc-SiteHeaderPanel--open"] = open,
-            _b["arc-SiteHeaderPanel--transparent"] = transparent,
-            _b["arc-SiteHeaderPanel--withSubNav"] = withSubNav,
-            _b)) }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement(Surface.Surface, { background: "white", growVertically: true },
-            React__default["default"].createElement(BackButton, { setOpen: setOpen }),
-            React__default["default"].createElement("div", { className: "arc-SiteHeaderPanel-inner" },
-                React__default["default"].createElement("div", { className: "arc-SiteHeaderPanel-main" },
-                    React__default["default"].createElement("div", { className: "arc-SiteHeaderPanel-mainInner" },
-                        withSubNav && (React__default["default"].createElement("div", { className: "arc-SiteHeaderPanel-subNavArea" })),
-                        title && (React__default["default"].createElement("div", { className: "arc-SiteHeaderPanel-title" }, title)),
-                        React__default["default"].createElement("ul", { className: "arc-SiteHeaderPanel-items" }, children)),
-                    viewAll),
-                promo && React__default["default"].createElement("div", { className: "arc-SiteHeaderPanel-promo" }, promo)))));
-};
-var ViewAll = function (_a) {
-    var href = _a.href, title = _a.title, onClick = _a.onClick;
-    return (React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href },
-        title,
-        React__default["default"].createElement("span", { className: "arc-SiteHeaderPanel-viewAllIcon" },
-            React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null))));
-};
-ViewAll.displayName = "Panel.ViewAll";
-Panel.ViewAll = ViewAll;
-
-var NavItem = function (_a) {
-    var _b, _c;
-    var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, promo = _a.promo, title = _a.title, viewAllTitle = _a.viewAllTitle, props = filterDataAttrs.__rest(_a, ["children", "href", "isCurrent", "onClick", "promo", "title", "viewAllTitle"]);
-    var navItem = React.useRef();
-    var _d = React.useState(false), panelOpen = _d[0], setPanelOpen = _d[1];
-    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
-    React.useEffect(function () {
-        React__default["default"].Children.map(children, function (item) {
-            if (item &&
-                item.type !== ItemGroup &&
-                item.type !== Column &&
-                item.type !== React.Fragment) {
-                throw new Error("Illegal child passed to <SiteHeader.NavItem />. Ensure to only use <SiteHeader.ItemGroup /> or <SiteHeader.Column />.");
-            }
-        });
-    }, [children]);
-    return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: index.classNames((_b = {},
-            _b["arc-SiteHeaderNavItem"] = true,
-            _b["arc-SiteHeaderNavItem--linkSelected"] = (children && panelOpen) || (!children && href && isCurrent),
-            _b)), ref: navItem }, filterDataAttrs.filterDataAttrs(props)), !children ? (href ? (React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({
-            handler: onClick
-        }), className: "arc-SiteHeaderNavItem-link", href: href }, title)) : null) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("button", { "aria-expanded": panelOpen, className: index.classNames((_c = {},
-                _c["arc-SiteHeaderNavItem-link"] = true,
-                _c["arc-SiteHeaderNavItem-link--itemHasChildren"] = true,
-                _c)), onClick: function (e) {
-                e.preventDefault();
-                setPanelOpen(!panelOpen);
-            } },
-            React__default["default"].createElement("span", null, title),
-            React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default["default"].createElement(BtIconChevronDown2Px.BtIconChevronDown2Px_2, null)) : (React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null)))),
-        React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
-};
-
-var NavItemRehydrator = (function (el, hydrate) { return filterDataAttrs.__awaiter(void 0, void 0, void 0, function () {
-    var children, promo, link, viewAll, href, title, props;
-    return filterDataAttrs.__generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                children = el.querySelector(".arc-SiteHeaderPanel-items");
-                promo = el.querySelector(".arc-SiteHeaderPanel-promo");
-                if (!children) return [3 /*break*/, 2];
-                return [4 /*yield*/, hydrate(children)];
-            case 1:
-                children = _a.sent();
-                _a.label = 2;
-            case 2:
-                if (!promo) return [3 /*break*/, 4];
-                return [4 /*yield*/, hydrate(promo)];
-            case 3:
-                promo = _a.sent();
-                _a.label = 4;
-            case 4:
-                link = el.querySelector(".arc-SiteHeaderNavItem-link");
-                viewAll = el.querySelector(".arc-SiteHeaderPanel-viewAll");
-                href = "";
-                title = "";
-                if (link) {
-                    title = link.textContent || /* istanbul ignore next */ "";
-                    href = link.getAttribute("href") || /* istanbul ignore next */ "";
-                }
-                if (viewAll) {
-                    href = viewAll.getAttribute("href") || /* istanbul ignore next */ "";
-                }
-                props = {
-                    href: href,
-                    isCurrent: el.classList.contains("arc-SiteHeaderNavItem--linkSelected") || undefined,
-                    promo: promo || undefined,
-                    title: title,
-                    viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
-                };
-                return [2 /*return*/, React__default["default"].createElement(NavItem, filterDataAttrs.__assign({}, props), children)];
-        }
-    });
-}); });
-
-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, promo = _a.promo, subTitle = _a.subTitle, title = _a.title, viewAllTitle = _a.viewAllTitle, props = filterDataAttrs.__rest(_a, ["children", "isDefaultItem", "href", "onClick", "offsetXL", "promo", "subTitle", "title", "viewAllTitle"]);
-    var navItem = React.useContext(Context$1).navItem;
-    var subNavItem = React.useRef();
-    var _e = React.useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
-    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
-    React.useEffect(function () {
-        React__default["default"].Children.map(children, function (item) {
-            if (item &&
-                item.type !== ItemGroup &&
-                item.type !== Column &&
-                item.type !== React.Fragment) {
-                throw new Error("Illegal child passed to <SiteHeader.SubNavItem />. Ensure to only use <SiteHeader.ItemGroup /> or <SiteHeader.Column />.");
-            }
-        });
-    }, [children]);
-    React.useEffect(function () {
-        if (isDefaultItem && isMinWidthArcBreakpointL) {
-            setPanelOpen(true);
-        }
-        else {
-            setPanelOpen(false);
-        }
-    }, [isDefaultItem, isMinWidthArcBreakpointL]);
-    var linkTitle = (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("span", { className: "arc-SiteHeaderSubNavItem-linkTitle" }, title),
-        subTitle ? (React__default["default"].createElement("span", { className: "arc-SiteHeaderSubNavItem-linkSubTitle" }, subTitle)) : null));
-    return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: index.classNames((_b = {},
-            _b["arc-SiteHeaderSubNavItem"] = true,
-            _b["arc-SiteHeaderSubNavItem--linkSelected"] = children && panelOpen,
-            _b[suffixModifier.suffixModifier("arc-SiteHeaderSubNavItem--offsetXL", offsetXL || "")] = offsetXL,
-            _b)), ref: subNavItem }, filterDataAttrs.filterDataAttrs(props), { "data-default-item": isDefaultItem || null }), !children ? (href ? (React__default["default"].createElement("a", { className: "arc-SiteHeaderSubNavItem-link", onClick: handleLinkClick.handleLinkClick({ handler: onClick }), href: href }, linkTitle)) : null) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("button", { "aria-expanded": panelOpen, className: index.classNames((_c = {},
-                _c["arc-SiteHeaderSubNavItem-link"] = true,
-                _c["arc-SiteHeaderSubNavItem-link--itemHasChildren"] = children,
-                _c)), onClick: function () {
-                setPanelOpen(true);
-            } },
-            linkTitle,
-            children && (React__default["default"].createElement("span", { className: "arc-SiteHeaderSubNavItem-linkIcon" },
-                React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null)))),
-        React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React__default["default"].createElement("span", null,
-                title,
-                subTitle && (React__default["default"].createElement(Text.Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
-};
-
-var SubNavItemRehydrator = (function (el, hydrate) { return filterDataAttrs.__awaiter(void 0, void 0, void 0, function () {
-    var children, promo, link, linkTitle, viewAll, href, title, offsetXL, props;
-    var _a;
-    return filterDataAttrs.__generator(this, function (_b) {
-        switch (_b.label) {
-            case 0:
-                children = el.querySelector(".arc-SiteHeaderPanel-items");
-                promo = el.querySelector(".arc-SiteHeaderPanel-promo");
-                if (!children) return [3 /*break*/, 2];
-                return [4 /*yield*/, hydrate(children)];
-            case 1:
-                children = _b.sent();
-                _b.label = 2;
-            case 2:
-                if (!promo) return [3 /*break*/, 4];
-                return [4 /*yield*/, hydrate(promo)];
-            case 3:
-                promo = _b.sent();
-                _b.label = 4;
-            case 4:
-                link = el.querySelector(".arc-SiteHeaderSubNavItem-link");
-                linkTitle = el.querySelector(".arc-SiteHeaderSubNavItem-linkTitle");
-                viewAll = el.querySelector(".arc-SiteHeaderPanel-viewAll");
-                href = "";
-                title = "";
-                if (link) {
-                    href = link.getAttribute("href") || /* istanbul ignore next */ "";
-                }
-                if (linkTitle) {
-                    title = linkTitle.textContent || /* istanbul ignore next */ "";
-                }
-                if (viewAll) {
-                    href = viewAll.getAttribute("href") || /* istanbul ignore next */ "";
-                }
-                offsetXL = undefined;
-                if (el.classList.contains("arc-SiteHeaderSubNavItem--offsetXL24")) {
-                    offsetXL = "24";
-                }
-                if (el.classList.contains("arc-SiteHeaderSubNavItem--offsetXL48")) {
-                    offsetXL = "48";
-                }
-                props = {
-                    href: href,
-                    isDefaultItem: Boolean(el.dataset.defaultItem),
-                    offsetXL: offsetXL,
-                    promo: promo || undefined,
-                    subTitle: ((_a = el.querySelector(".arc-SiteHeaderSubNavItem-linkSubTitle")) === null || _a === void 0 ? void 0 : _a.textContent) ||
-                        undefined,
-                    title: title,
-                    viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
-                };
-                return [2 /*return*/, React__default["default"].createElement(SubNavItem, filterDataAttrs.__assign({}, props), children)];
-        }
-    });
-}); });
-
-var defaultContext$1 = { navItem: null, subTitle: null };
-var Context$1 = React.createContext(defaultContext$1);
-var Provider$1 = Context$1.Provider;
-var NavItemWithSubNav = function (_a) {
-    var _b, _c;
-    var href = _a.href, slot1 = _a.slot1, slot2 = _a.slot2, slot3 = _a.slot3, _d = _a.subTitle, subTitle = _d === void 0 ? null : _d, title = _a.title, onViewAllClick = _a.onViewAllClick, viewAllTitle = _a.viewAllTitle, props = filterDataAttrs.__rest(_a, ["href", "slot1", "slot2", "slot3", "subTitle", "title", "onViewAllClick", "viewAllTitle"]);
-    var navItem = React.useRef();
-    var _e = React.useState(true), defaultItem = _e[0], setDefaultItem = _e[1];
-    var _f = React.useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
-    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
-    React.useEffect(function () {
-        React__default["default"].Children.map(slot1, function (item) {
-            if (item && item.type !== SubNavItem && item.type !== React.Fragment) {
-                throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot1` prop. Ensure to only use <SiteHeader.SubNavItem />.");
-            }
-            if (item.props.isDefaultItem) {
-                setDefaultItem(false);
-            }
-        });
-        React__default["default"].Children.map(slot2, function (item) {
-            if (item && item.type !== SubNavItem && item.type !== React.Fragment) {
-                throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot2` prop. Ensure to only use <SiteHeader.SubNavItem />.");
-            }
-            if (item.props.isDefaultItem) {
-                setDefaultItem(false);
-            }
-        });
-        React__default["default"].Children.map(slot3, function (item) {
-            if (item && item.type !== SubNavItem && item.type !== React.Fragment) {
-                throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot3` prop. Ensure to only use <SiteHeader.SubNavItem />.");
-            }
-            if (item.props.isDefaultItem) {
-                setDefaultItem(false);
-            }
-        });
-    }, [slot1, slot2, slot3]);
-    return (React__default["default"].createElement(Provider$1, { value: { navItem: navItem, subTitle: subTitle } },
-        React__default["default"].createElement("li", filterDataAttrs.__assign({ className: index.classNames((_b = {},
-                _b["arc-SiteHeaderNavItemWithSubNav"] = true,
-                _b["arc-SiteHeaderNavItem--linkSelected"] = panelOpen,
-                _b)), ref: navItem }, filterDataAttrs.filterDataAttrs(props)),
-            React__default["default"].createElement("button", { "aria-expanded": panelOpen, className: index.classNames((_c = {},
-                    _c["arc-SiteHeaderNavItem-link"] = true,
-                    _c["arc-SiteHeaderNavItem-link--itemHasChildren"] = true,
-                    _c)), onClick: function (e) {
-                    e.preventDefault();
-                    setPanelOpen(!panelOpen);
-                } },
-                title,
-                React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default["default"].createElement(BtIconChevronDown2Px.BtIconChevronDown2Px_2, null)) : (React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null)))),
-            React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined), withSubNav: true },
-                defaultItem
-                    ? React__default["default"].cloneElement(slot1, { isDefaultItem: defaultItem })
-                    : slot1,
-                slot2,
-                slot3))));
-};
-
-function wrap(el, wrapper) {
-    el.parentNode.insertBefore(wrapper, el);
-    wrapper.appendChild(el);
-}
-var NavItemWithSubNavRehydrator = (function (el, hydrate) { return filterDataAttrs.__awaiter(void 0, void 0, void 0, function () {
-    var subNavItem1, subNavItem2, subNavItem3, div1, div2, slot1, slot2, slot3, div3, link, subTitle, viewAllNodes, viewAll, title, props;
-    return filterDataAttrs.__generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                subNavItem1 = el.querySelector(".arc-SiteHeaderSubNavItem:first-child");
-                subNavItem2 = el.querySelector(".arc-SiteHeaderSubNavItem:nth-child(2)");
-                subNavItem3 = el.querySelector(".arc-SiteHeaderSubNavItem:nth-child(3)");
-                div1 = document.createElement("div");
-                div1.className = "slot1";
-                div2 = document.createElement("div");
-                div2.className = "slot2";
-                wrap(subNavItem1, div1);
-                wrap(subNavItem2, div2);
-                return [4 /*yield*/, hydrate(el.querySelector(".slot1"))];
-            case 1:
-                slot1 = _a.sent();
-                return [4 /*yield*/, hydrate(el.querySelector(".slot2"))];
-            case 2:
-                slot2 = _a.sent();
-                if (!subNavItem3) return [3 /*break*/, 4];
-                div3 = document.createElement("div");
-                div3.className = "slot3";
-                wrap(subNavItem3, div3);
-                return [4 /*yield*/, hydrate(el.querySelector(".slot3"))];
-            case 3:
-                slot3 = _a.sent();
-                _a.label = 4;
-            case 4:
-                link = el.querySelector(".arc-SiteHeaderNavItem-link");
-                subTitle = el.querySelector(".arc-SiteHeaderPanel-title");
-                viewAllNodes = el.querySelectorAll(".arc-SiteHeaderPanel-viewAll");
-                viewAll = viewAllNodes[viewAllNodes.length - 1];
-                title = "";
-                if (link) {
-                    title = link.textContent || /* istanbul ignore next */ "";
-                }
-                props = {
-                    href: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.getAttribute("href")) || undefined,
-                    slot1: slot1 || /* istanbul ignore next */ undefined,
-                    slot2: slot2 || /* istanbul ignore next */ undefined,
-                    slot3: slot3 || undefined,
-                    subTitle: (subTitle === null || subTitle === void 0 ? void 0 : subTitle.textContent) || undefined,
-                    title: title,
-                    viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
-                };
-                return [2 /*return*/, React__default["default"].createElement(NavItemWithSubNav, filterDataAttrs.__assign({}, props))];
-        }
-    });
-}); });
-
-var NodeItem = function (_a) {
-    var children = _a.children, props = filterDataAttrs.__rest(_a, ["children"]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, filterDataAttrs.__assign({}, filterDataAttrs.filterDataAttrs(props)), children));
-};
-
-var MenuButton = function (_a) {
-    var _b;
-    var menuOpen = _a.menuOpen, setMenuOpen = _a.setMenuOpen;
-    return (React__default["default"].createElement("button", { "aria-expanded": menuOpen, className: index.classNames((_b = {},
-            _b["arc-MenuButton"] = true,
-            _b["arc-MenuButton--menuOpen"] = menuOpen,
-            _b)), onClick: function () {
-            setMenuOpen(!menuOpen);
-        }, type: "button" },
-        React__default["default"].createElement("span", { className: "arc-MenuButton-box" },
-            React__default["default"].createElement("span", { className: "arc-MenuButton-inner" }),
-            React__default["default"].createElement("span", { className: "arc-MenuButton-text" }, "Menu"))));
-};
-
-var defaultContext = { transparent: false };
-var Context = React.createContext(defaultContext);
-var Provider = Context.Provider;
-/**
- * Use `SiteHeader` to display brand logo and navigation at the top of a page.
- */
-var SiteHeader = 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 = filterDataAttrs.__rest(_a, ["children", "basket", "hasLogin", "isTransparent", "loginHref", "logoOnClick", "loginOnClick", "loginTitle", "logoHref", "logoLabel", "search", "subBrand"]);
-    var _j = React.useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
-    var _k = React.useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
-    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
-    React.useEffect(function () {
-        React__default["default"].Children.map(children, function (item) {
-            if (item &&
-                item.type !== NodeItem &&
-                item.type !== NavItem &&
-                item.type !== NavItemWithSubNav &&
-                item.type !== React.Fragment) {
-                throw new Error("Illegal child passed to <SiteHeader />. Ensure to only use <SiteHeader.NavItem /> or <SiteHeader.NavItemWithSubNav />");
-            }
-        });
-    }, [children]);
-    React.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]);
-    React.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]);
-    React.useEffect(function () {
-        var handleClick = function (e) {
-            if (e.target.getAttribute("href")) {
-                setMenuOpen(false);
-            }
-        };
-        document.addEventListener("click", handleClick);
-        return function () {
-            document.removeEventListener("click", handleClick);
-        };
-    }, [setMenuOpen]);
-    React.useEffect(function () {
-        // useEffect does not run in ReactDomServer renders
-        setHasClientSideJavaScript(true);
-    }, [setHasClientSideJavaScript]);
-    return (React__default["default"].createElement(Provider, { value: { transparent: isTransparent } },
-        React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {},
-                _b["arc-SiteHeader"] = true,
-                _b["arc-SiteHeader--menuOpen"] = menuOpen,
-                _b["arc-no-js"] = !hasClientSideJavaScript,
-                _b)) }, filterDataAttrs.filterDataAttrs(props), { "data-transparent": isTransparent || null }),
-            React__default["default"].createElement(Surface.Surface, { background: !isTransparent || (menuOpen && !isMinWidthArcBreakpointL)
-                    ? "brand-flat"
-                    : undefined },
-                React__default["default"].createElement("div", { className: "arc-SiteHeader-inner" },
-                    React__default["default"].createElement("a", { className: "arc-SiteHeader-brand", onClick: handleLinkClick.handleLinkClick({
-                            handler: logoOnClick
-                        }), href: logoHref },
-                        React__default["default"].createElement(BrandLogo.BrandLogo, { label: logoLabel, subBrand: subBrand })),
-                    children && (React__default["default"].createElement("nav", { className: "arc-SiteHeader-nav" },
-                        React__default["default"].createElement("div", { className: "arc-SiteHeader-menuButton" },
-                            React__default["default"].createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
-                        React__default["default"].createElement("div", { className: "arc-SiteHeader-main" },
-                            React__default["default"].createElement("ul", { className: "arc-SiteHeader-navItems" }, children),
-                            hasLogin && (React__default["default"].createElement(React__default["default"].Fragment, null, loginOnClick ? (React__default["default"].createElement("div", { className: "arc-SiteHeader-loginButton" },
-                                React__default["default"].createElement(Button.Button, { onClick: loginOnClick, isFullWidth: true, label: loginTitle }))) : (React__default["default"].createElement("div", { className: "arc-SiteHeader-loginButton" },
-                                React__default["default"].createElement(Button.Button, { href: loginHref, isFullWidth: true, label: loginTitle })))))))),
-                    (basket || hasLogin || search) && (React__default["default"].createElement("div", { className: "arc-SiteHeader-secondary" },
-                        search ? (React__default["default"].createElement("div", { className: "arc-SiteHeader-search" }, search)) : null,
-                        basket ? (React__default["default"].createElement("div", { className: "arc-SiteHeader-basket" }, basket)) : null,
-                        hasLogin && (React__default["default"].createElement(React__default["default"].Fragment, null, loginOnClick ? (React__default["default"].createElement("div", { className: "arc-SiteHeader-loginLink arc-SiteHeader-loginLink--function", onClick: loginOnClick }, loginTitle)) : (React__default["default"].createElement("a", { className: "arc-SiteHeader-loginLink", href: loginHref }, loginTitle)))))))))));
-};
-Column.displayName = "SiteHeader.Column";
-Item.displayName = "SiteHeader.Item";
-ItemGroup.displayName = "SiteHeader.ItemGroup";
-NavItem.displayName = "SiteHeader.NavItem";
-NodeItem.displayName = "SiteHeader.NodeItem";
-NavItemWithSubNav.displayName = "SiteHeader.NavItemWithSubNav";
-SubNavItem.displayName = "SiteHeader.SubNavItem";
-SiteHeader.Column = Column;
-SiteHeader.Item = Item;
-SiteHeader.ItemGroup = ItemGroup;
-SiteHeader.NavItem = NavItem;
-SiteHeader.NodeItem = NodeItem;
-SiteHeader.NavItemWithSubNav = NavItemWithSubNav;
-SiteHeader.SubNavItem = SubNavItem;
-
-var SiteHeaderRehydrator = function (el, hydrate) { return filterDataAttrs.__awaiter(void 0, void 0, void 0, function () {
-    var children, basket, search, brand, login, logoHref, logoLabel, props;
-    return filterDataAttrs.__generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                children = el.querySelector(".arc-SiteHeader-navItems");
-                basket = el.querySelector(".arc-SiteHeader-basket");
-                search = el.querySelector(".arc-SiteHeader-search");
-                if (!children) return [3 /*break*/, 2];
-                return [4 /*yield*/, hydrate(children)];
-            case 1:
-                children = _a.sent();
-                _a.label = 2;
-            case 2:
-                if (!basket) return [3 /*break*/, 4];
-                return [4 /*yield*/, hydrate(basket)];
-            case 3:
-                basket = _a.sent();
-                _a.label = 4;
-            case 4:
-                if (!search) return [3 /*break*/, 6];
-                return [4 /*yield*/, hydrate(search)];
-            case 5:
-                search = _a.sent();
-                _a.label = 6;
-            case 6:
-                brand = el.querySelector(".arc-SiteHeader-brand");
-                login = el.querySelector(".arc-SiteHeader-loginLink");
-                logoHref = "";
-                logoLabel = "";
-                if (brand) {
-                    logoHref = brand.getAttribute("href") || /* istanbul ignore next */ "";
-                    logoLabel = brand.textContent || /* istanbul ignore next */ "";
-                }
-                props = {
-                    basket: basket,
-                    hasLogin: Boolean(login),
-                    isTransparent: Boolean(el.dataset.transparent),
-                    loginHref: (login === null || login === void 0 ? void 0 : login.getAttribute("href")) || undefined,
-                    loginTitle: (login === null || login === void 0 ? void 0 : login.textContent) || undefined,
-                    logoHref: logoHref,
-                    logoLabel: logoLabel,
-                    search: search
-                };
-                return [2 /*return*/, React__default["default"].createElement(SiteHeader, filterDataAttrs.__assign({}, props), children)];
-        }
-    });
-}); };
-SiteHeaderRehydrator.ItemGroupRehydrator = ItemGroupRehydrator;
-SiteHeaderRehydrator.NavItemRehydrator = NavItemRehydrator;
-SiteHeaderRehydrator.NavItemWithSubNavRehydrator = NavItemWithSubNavRehydrator;
-SiteHeaderRehydrator.SubNavItemRehydrator = SubNavItemRehydrator;
-
-exports.SiteHeader = SiteHeader;
-exports.SiteHeaderRehydrator = SiteHeaderRehydrator;
+exports.SiteHeader = SiteHeader_rehydrator.SiteHeader;
+exports.SiteHeaderRehydrator = SiteHeader_rehydrator.SiteHeaderRehydrator;