@arc-ui/components 12.0.0-beta.22 → 12.0.0-beta.24

package/lib/_shared/cjs/SiteHeaderV2NavItemWithSubNav-CagFKPEa.cjs

@@ -1,445 +0,0 @@
-'use strict';
-
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
-var React = require('react');
-var index = require('./index-CTlXMLug.cjs');
-var index_es = require('./index.es-DlNskPlN.cjs');
-var BtIconChevronRight2Px = require('./BtIconChevronRight2Px-CIRaur2B.cjs');
-var useMediaQuery = require('./use-media-query-BsUfHjPZ.cjs');
-var Icon = require('./Icon-CzhyKqMd.cjs');
-var Surface = require('./Surface-BFx1yNsq.cjs');
-var ButtonV2 = require('./ButtonV2-Bta5SVVY.cjs');
-var handleLinkClick = require('./handle-link-click-C7BvOIYa.cjs');
-var BrandLogo = require('./BrandLogo-D5wlIFmm.cjs');
-
-var SiteHeaderV2MenuButton = function (_a) {
-    var _b;
-    var menuOpen = _a.menuOpen, setMenuOpen = _a.setMenuOpen;
-    return (React.createElement("button", { "aria-expanded": menuOpen, className: index.classNames((_b = {},
-            _b["arc-SiteHeaderV2MenuButton"] = true,
-            _b["arc-SiteHeaderV2MenuButton--menuOpen"] = menuOpen,
-            _b)), onClick: function () {
-            setMenuOpen(!menuOpen);
-        }, type: "button" },
-        React.createElement("span", { className: "arc-SiteHeaderV2MenuButton-box" },
-            React.createElement("span", { className: "arc-SiteHeaderV2MenuButton-inner" }),
-            React.createElement("span", { className: "arc-SiteHeaderV2MenuButton-text" }, "Menu"))));
-};
-
-var defaultContext$1 = { transparent: false, menubarRef: null };
-var Context$1 = React.createContext(defaultContext$1);
-var Provider$1 = Context$1.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 = filterAttrs.__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 = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")"));
-    var menubarRef = React.useRef();
-    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 _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");
-    }, []);
-    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.createElement(Provider$1, { value: { transparent: isTransparent, menubarRef: menubarRef } },
-        React.createElement("div", filterAttrs.__assign({ className: index.classNames((_b = {},
-                _b["arc-SiteHeaderV2"] = true,
-                _b["arc-SiteHeaderV2--menuOpen"] = menuOpen,
-                _b["arc-no-js"] = !hasClientSideJavaScript,
-                _b)) }, filterAttrs.filterAttrs(props), { "data-transparent": isTransparent || null }),
-            React.createElement(Surface.Surface, { background: !isTransparent || (menuOpen && !isMinWidthArcBreakpointL)
-                    ? "dark-brand-01"
-                    : undefined },
-                React.createElement("div", { className: "arc-SiteHeaderV2-inner" },
-                    React.createElement("a", { className: "arc-SiteHeaderV2-brand", onClick: handleLinkClick.handleLinkClick({
-                            handler: logoOnClick,
-                        }), href: logoHref },
-                        React.createElement(BrandLogo.BrandLogo, { label: logoLabel, subBrand: subBrand })),
-                    children && (React.createElement("nav", { className: "arc-SiteHeaderV2-nav" },
-                        React.createElement("div", { className: "arc-SiteHeaderV2-menuButton" },
-                            React.createElement(SiteHeaderV2MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
-                        React.createElement("div", { className: "arc-SiteHeaderV2-main", tabIndex: -1 },
-                            React.createElement("ul", { role: "menubar", "aria-label": "navigation", ref: menubarRef, className: "arc-SiteHeaderV2-navItems" }, children),
-                            hasLogin && (React.createElement(React.Fragment, null, loginOnClick ? (React.createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
-                                React.createElement("button", { className: "arc-SiteHeaderV2-mobileLogin", onClick: loginOnClick },
-                                    loginTitle,
-                                    React.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
-                                        React.createElement(Icon.Icon, { icon: BtIconChevronRight2Px.BtIconChevronRight2Px }))))) : (React.createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
-                                React.createElement("a", { className: "arc-SiteHeaderV2-mobileLogin", href: loginHref },
-                                    loginTitle,
-                                    React.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
-                                        React.createElement(Icon.Icon, { icon: BtIconChevronRight2Px.BtIconChevronRight2Px })))))))))),
-                    (basket || hasLogin || search) && (React.createElement("div", { className: "arc-SiteHeaderV2-secondary" },
-                        search ? (React.createElement("div", { className: "arc-SiteHeaderV2-search" }, search)) : null,
-                        basket ? (React.createElement("div", { className: "arc-SiteHeaderV2-basket" }, basket)) : null,
-                        hasLogin && (React.createElement(React.Fragment, null, loginOnClick ? (React.createElement("div", { className: "arc-SiteHeaderV2-loginLink arc-SiteHeaderV2-loginLink--function", onClick: loginOnClick }, loginTitle)) : (React.createElement("a", { className: "arc-SiteHeaderV2-loginLink", href: loginHref }, loginTitle)))))))))));
-};
-function useHeaderV2Context() {
-    return React.useContext(Context$1);
-}
-
-var SiteHeaderV2BackButton = function (_a) {
-    var setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick;
-    return (React.createElement("button", { className: "arc-SiteHeaderV2BackButton", onClick: function () {
-            setOpen(false);
-            setOpenPanelOnFirstClick(false);
-        } },
-        React.createElement("span", { className: "arc-SiteHeaderV2BackButton-icon" },
-            React.createElement(Icon.Icon, { icon: BtIconChevronRight2Px.BtIconChevronLeft2Px })),
-        React.createElement("span", { className: "arc-SiteHeaderV2BackButton-text" }, "Back")));
-};
-
-var SiteHeaderV2Panel = 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, _g = _a.subNavLink, subNavLink = _g === void 0 ? "" : _g, title = _a.title, subtitle = _a.subtitle, viewAll = _a.viewAll, withSubNav = _a.withSubNav, isPrimary = _a.isPrimary, props = filterAttrs.__rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "setOpenPanelOnFirstClick", "subNavItemRef", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "isPrimary"]);
-    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")"));
-    var menubarRef = useHeaderV2Context().menubarRef;
-    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, _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,
-    ]);
-    React.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]);
-    React.useEffect(function () {
-        var handleKeydown = function (e) {
-            var _a, _b;
-            // Check the viewport width at time of press
-            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")")).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.createElement("div", { style: { display: "flex" } },
-        React.createElement("div", filterAttrs.__assign({ className: index.classNames((_b = {},
-                _b["arc-SiteHeaderV2Panel"] = true,
-                _b["arc-SiteHeaderV2Panel--open"] = open,
-                _b["arc-SiteHeaderV2Panel--withSubNav"] = withSubNav,
-                _b["arc-SiteHeaderV2Panel-onlyPanel"] = isPrimary && isNavItem,
-                _b)) }, filterAttrs.filterAttrs(props)),
-            React.createElement(Surface.Surface, { background: "light-white" },
-                React.createElement(SiteHeaderV2BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: setOpenPanelOnFirstClick }),
-                React.createElement("div", { className: index.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.createElement("div", { className: index.classNames((_d = {},
-                            _d["arc-SiteHeaderV2Panel-main"] = !isNavItem && !withSubNav,
-                            _d)) },
-                        React.createElement("div", { className: index.classNames((_e = {},
-                                _e["arc-SiteHeaderV2Panel-mainInnerWithoutSubNav"] = !isNavItem && !withSubNav,
-                                _e["arc-SiteHeaderV2Panel-mainInner"] = !isNavItem,
-                                _e["arc-SiteHeaderV2Panel-mainInnerNavItems"] = isNavItem,
-                                _e)) },
-                            withSubNav && (React.createElement("div", { className: "arc-SiteHeaderV2Panel-subNavArea" })),
-                            !isMinWidthArcBreakpointL && title && (React.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileTitleBlock" },
-                                React.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileTitle" },
-                                    title && (React.createElement("div", { className: "arc-SiteHeaderV2Panel-title" }, title)),
-                                    React.createElement("div", { className: "arc-SiteHeaderV2Panel-subTitle" }, subtitle)))),
-                            React.createElement("ul", { className: index.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 SiteHeaderV2ViewAll = function (_a) {
-    var href = _a.href, title = _a.title, onClick = _a.onClick, buttonStyle = _a.buttonStyle;
-    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")"));
-    if (buttonStyle === "secondary") {
-        return isMinWidthArcBreakpointL ? (React.createElement("div", { className: "arc-SiteHeaderV2Panel-viewAllOutlined" },
-            React.createElement(ButtonV2.ButtonV2, { buttonStyle: buttonStyle, label: title !== null && title !== void 0 ? title : "", href: href, onClick: onClick }))) : (React.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll arc-SiteHeaderV2Panel-mobileViewAllOutlined" },
-            React.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick.handleLinkClick({
-                    handler: onClick,
-                }), href: href }, title)));
-    }
-    else {
-        return isMinWidthArcBreakpointL ? (React.createElement("div", { className: "arc-SiteHeaderV2Panel-viewAll" },
-            React.createElement(ButtonV2.ButtonV2, { buttonStyle: buttonStyle, label: title !== null && title !== void 0 ? title : "", isFullWidth: true, href: href, onClick: onClick }))) : (React.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll" },
-            React.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick.handleLinkClick({
-                    handler: onClick,
-                }), href: href }, title)));
-    }
-};
-
-var SiteHeaderV2HorizontalPanel = 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, props = filterAttrs.__rest(_a, ["children", "navItemRef", "open", "setOpen", "subNavItemRef", "subNavLink", "title", "withSubNav"]);
-    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;
-            // 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]);
-    React.useEffect(function () {
-        var handleKeydown = function (e) {
-            // Check the viewport width at time of press
-            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")")).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.createElement("div", filterAttrs.__assign({ className: index.classNames((_b = {},
-            _b["arc-SiteHeaderV2HorizontalPanel"] = true,
-            _b["arc-SiteHeaderV2HorizontalPanel--open"] = open,
-            _b["arc-SiteHeaderV2HorizontalPanel--withSubNav"] = withSubNav,
-            _b)) }, filterAttrs.filterAttrs(props)),
-        React.createElement(Surface.Surface, { background: "light-neutral-02" },
-            React.createElement("div", { className: index.classNames((_c = {},
-                    _c["arc-SiteHeaderV2HorizontalPanel-container"] = true,
-                    _c)) },
-                React.createElement(SiteHeaderV2BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: function () { } }),
-                title && (React.createElement("div", { className: "arc-SiteHeaderV2Panel-selectedTitle" }, title)),
-                React.createElement("ul", { className: index.classNames((_d = {},
-                        _d["arc-SiteHeaderV2HorizontalPanel-items"] = true,
-                        _d)) }, children)))));
-};
-
-var defaultContext = { navItem: null, subTitle: null };
-var Context = React.createContext(defaultContext);
-var Provider = Context.Provider;
-var SiteHeaderV2NavItemWithSubNav = 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 = filterAttrs.__rest(_a, ["href", "slot1", "slot2", "slot3", "slot4", "slot5", "slot6", "subTitle", "title", "onViewAllClick", "isPrimary", "opensFirstWithPanel", "viewAllTitle"]);
-    var navItem = React.useRef();
-    var _h = React.useState(true), defaultItem = _h[0], setDefaultItem = _h[1];
-    var _j = React.useState(false), panelOpen = _j[0], setPanelOpen = _j[1];
-    var _k = React.useState(false), horizontalPanelOpen = _k[0], setHorizontalPanelOpen = _k[1];
-    var _l = React.useState(true), openSecondaryWithSubNav = _l[0], setOpenSecondaryWithSubNav = _l[1];
-    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")"));
-    React.useEffect(function () {
-        React.Children.map(slot1, function (item) {
-            if (item.props.isDefaultItem) {
-                setDefaultItem(false);
-            }
-        });
-        React.Children.map(slot2, function (item) {
-            if (item.props.isDefaultItem) {
-                setDefaultItem(false);
-            }
-        });
-        React.Children.map(slot3, function (item) {
-            if (item.props.isDefaultItem) {
-                setDefaultItem(false);
-            }
-        });
-        React.Children.map(slot4, function (item) {
-            if (item.props.isDefaultItem) {
-                setDefaultItem(false);
-            }
-        });
-        React.Children.map(slot5, function (item) {
-            if (item.props.isDefaultItem) {
-                setDefaultItem(false);
-            }
-        });
-    }, [slot1, slot2, slot3, slot4, slot5]);
-    return (React.createElement(Provider, { value: { navItem: navItem, subTitle: subTitle } },
-        React.createElement("li", filterAttrs.__assign({ className: index.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 }, filterAttrs.filterAttrs(props)),
-            React.createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
-                React.createElement("button", { "aria-expanded": horizontalPanelOpen || panelOpen, role: "menuitem", "aria-label": title, "aria-haspopup": "true", tabIndex: 0, className: index.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);
-                    } },
-                    React.createElement("div", { className: index.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.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
-                        React.createElement(Icon.Icon, { icon: BtIconChevronRight2Px.BtIconChevronRight2Px })),
-                    subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React.createElement("div", { className: index.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.createElement("div", { className: index.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.createElement(SiteHeaderV2HorizontalPanel, { navItemRef: navItem, open: horizontalPanelOpen, setOpen: setHorizontalPanelOpen, title: !isMinWidthArcBreakpointL && title },
-                slot1,
-                slot2,
-                slot3,
-                slot4,
-                slot5)),
-            React.createElement(SiteHeaderV2Panel, { navItemRef: navItem, open: opensFirstWithPanel && isMinWidthArcBreakpointL
-                    ? openSecondaryWithSubNav
-                    : panelOpen, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, title: !isMinWidthArcBreakpointL && title, subtitle: subTitle, viewAll: href ? (React.createElement(SiteHeaderV2ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle, buttonStyle: "primary" })) : undefined, withSubNav: true, isNavItem: false },
-                defaultItem
-                    ? React.cloneElement(slot1, { isDefaultItem: defaultItem })
-                    : slot1,
-                slot2,
-                slot3,
-                slot4,
-                slot5,
-                slot6))));
-};
-
-exports.Context = Context;
-exports.SiteHeaderV2 = SiteHeaderV2;
-exports.SiteHeaderV2NavItemWithSubNav = SiteHeaderV2NavItemWithSubNav;
-exports.SiteHeaderV2Panel = SiteHeaderV2Panel;
-exports.SiteHeaderV2ViewAll = SiteHeaderV2ViewAll;

package/lib/_shared/cjs/Spinner-bbrOwxv2.cjs

@@ -1,16 +0,0 @@
-'use strict';
-
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
-var React = require('react');
-var index = require('./index-CTlXMLug.cjs');
-
-/**
- * Use `Spinner` to display a loading state.
- */
-var Spinner = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? "m" : _b, color = _a.color, props = filterAttrs.__rest(_a, ["size", "color"]);
-    return (React.createElement("svg", filterAttrs.__assign({ className: index.classNames("arc-Spinner", "arc-Spinner-".concat(color), "arc-Spinner-size--".concat(size)), width: typeof size === "number" ? "".concat(size, "px") : undefined, "data-testid": "arc-Spinner", "aria-label": "loading", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg" }, filterAttrs.filterAttrs(props)),
-        React.createElement("circle", { cx: "24", cy: "24", fill: "none", r: "22", strokeWidth: "4", strokeLinecap: "round" })));
-};
-
-exports.Spinner = Spinner;

package/lib/_shared/cjs/VisuallyHidden-B4XCvPYP.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
-var React = require('react');
-
-/**
- * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
- */
-var VisuallyHidden = function (_a) {
-    var children = _a.children, props = filterAttrs.__rest(_a, ["children"]);
-    return (React.createElement("span", filterAttrs.__assign({ "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, filterAttrs.filterAttrs(props)), children));
-};
-
-exports.VisuallyHidden = VisuallyHidden;

package/lib/_shared/cjs/index-CqYNiqix.cjs

@@ -1,137 +0,0 @@
-'use strict';
-
-var index = require('./index-CTlXMLug.cjs');
-
-var shorterCssColorNames;
-var hasRequiredShorterCssColorNames;
-
-function requireShorterCssColorNames () {
-	if (hasRequiredShorterCssColorNames) return shorterCssColorNames;
-	hasRequiredShorterCssColorNames = 1;
-	shorterCssColorNames = {
-	  aqua: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
-	  azure: /#f0ffff(ff)?(?!\w)/gi,
-	  beige: /#f5f5dc(ff)?(?!\w)/gi,
-	  bisque: /#ffe4c4(ff)?(?!\w)/gi,
-	  black: /#000000(ff)?(?!\w)|#000(f)?(?!\w)/gi,
-	  blue: /#0000ff(ff)?(?!\w)|#00f(f)?(?!\w)/gi,
-	  brown: /#a52a2a(ff)?(?!\w)/gi,
-	  coral: /#ff7f50(ff)?(?!\w)/gi,
-	  cornsilk: /#fff8dc(ff)?(?!\w)/gi,
-	  crimson: /#dc143c(ff)?(?!\w)/gi,
-	  cyan: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
-	  darkblue: /#00008b(ff)?(?!\w)/gi,
-	  darkcyan: /#008b8b(ff)?(?!\w)/gi,
-	  darkgrey: /#a9a9a9(ff)?(?!\w)/gi,
-	  darkred: /#8b0000(ff)?(?!\w)/gi,
-	  deeppink: /#ff1493(ff)?(?!\w)/gi,
-	  dimgrey: /#696969(ff)?(?!\w)/gi,
-	  gold: /#ffd700(ff)?(?!\w)/gi,
-	  green: /#008000(ff)?(?!\w)/gi,
-	  grey: /#808080(ff)?(?!\w)/gi,
-	  honeydew: /#f0fff0(ff)?(?!\w)/gi,
-	  hotpink: /#ff69b4(ff)?(?!\w)/gi,
-	  indigo: /#4b0082(ff)?(?!\w)/gi,
-	  ivory: /#fffff0(ff)?(?!\w)/gi,
-	  khaki: /#f0e68c(ff)?(?!\w)/gi,
-	  lavender: /#e6e6fa(ff)?(?!\w)/gi,
-	  lime: /#00ff00(ff)?(?!\w)|#0f0(f)?(?!\w)/gi,
-	  linen: /#faf0e6(ff)?(?!\w)/gi,
-	  maroon: /#800000(ff)?(?!\w)/gi,
-	  moccasin: /#ffe4b5(ff)?(?!\w)/gi,
-	  navy: /#000080(ff)?(?!\w)/gi,
-	  oldlace: /#fdf5e6(ff)?(?!\w)/gi,
-	  olive: /#808000(ff)?(?!\w)/gi,
-	  orange: /#ffa500(ff)?(?!\w)/gi,
-	  orchid: /#da70d6(ff)?(?!\w)/gi,
-	  peru: /#cd853f(ff)?(?!\w)/gi,
-	  pink: /#ffc0cb(ff)?(?!\w)/gi,
-	  plum: /#dda0dd(ff)?(?!\w)/gi,
-	  purple: /#800080(ff)?(?!\w)/gi,
-	  red: /#ff0000(ff)?(?!\w)|#f00(f)?(?!\w)/gi,
-	  salmon: /#fa8072(ff)?(?!\w)/gi,
-	  seagreen: /#2e8b57(ff)?(?!\w)/gi,
-	  seashell: /#fff5ee(ff)?(?!\w)/gi,
-	  sienna: /#a0522d(ff)?(?!\w)/gi,
-	  silver: /#c0c0c0(ff)?(?!\w)/gi,
-	  skyblue: /#87ceeb(ff)?(?!\w)/gi,
-	  snow: /#fffafa(ff)?(?!\w)/gi,
-	  tan: /#d2b48c(ff)?(?!\w)/gi,
-	  teal: /#008080(ff)?(?!\w)/gi,
-	  thistle: /#d8bfd8(ff)?(?!\w)/gi,
-	  tomato: /#ff6347(ff)?(?!\w)/gi,
-	  violet: /#ee82ee(ff)?(?!\w)/gi,
-	  wheat: /#f5deb3(ff)?(?!\w)/gi,
-	  white: /#ffffff(ff)?(?!\w)|#fff(f)?(?!\w)/gi,
-	};
-	return shorterCssColorNames;
-}
-
-var miniSvgDataUri;
-var hasRequiredMiniSvgDataUri;
-
-function requireMiniSvgDataUri () {
-	if (hasRequiredMiniSvgDataUri) return miniSvgDataUri;
-	hasRequiredMiniSvgDataUri = 1;
-	var shorterNames = requireShorterCssColorNames();
-	var REGEX = {
-	  whitespace: /\s+/g,
-	  urlHexPairs: /%[\dA-F]{2}/g,
-	  quotes: /"/g,
-	};
-
-	function collapseWhitespace(str) {
-	  return str.trim().replace(REGEX.whitespace, ' ');
-	}
-
-	function dataURIPayload(string) {
-	  return encodeURIComponent(string)
-	    .replace(REGEX.urlHexPairs, specialHexEncode);
-	}
-
-	// `#` gets converted to `%23`, so quite a few CSS named colors are shorter than
-	// their equivalent URL-encoded hex codes.
-	function colorCodeToShorterNames(string) {
-	  Object.keys(shorterNames).forEach(function(key) {
-	    if (shorterNames[key].test(string)) {
-	      string = string.replace(shorterNames[key], key);
-	    }
-	  });
-
-	  return string;
-	}
-
-	function specialHexEncode(match) {
-	  switch (match) { // Browsers tolerate these characters, and they're frequent
-	    case '%20': return ' ';
-	    case '%3D': return '=';
-	    case '%3A': return ':';
-	    case '%2F': return '/';
-	    default: return match.toLowerCase(); // compresses better
-	  }
-	}
-
-	function svgToTinyDataUri(svgString) {
-	  if (typeof svgString !== 'string') {
-	    throw new TypeError('Expected a string, but received ' + typeof svgString);
-	  }
-	  // Strip the Byte-Order Mark if the SVG has one
-	  if (svgString.charCodeAt(0) === 0xfeff) { svgString = svgString.slice(1); }
-
-	  var body = colorCodeToShorterNames(collapseWhitespace(svgString))
-	    .replace(REGEX.quotes, "'");
-	  return 'data:image/svg+xml,' + dataURIPayload(body);
-	}
-
-	svgToTinyDataUri.toSrcset = function toSrcset(svgString) {
-	  return svgToTinyDataUri(svgString).replace(/ /g, '%20');
-	};
-
-	miniSvgDataUri = svgToTinyDataUri;
-	return miniSvgDataUri;
-}
-
-var miniSvgDataUriExports = requireMiniSvgDataUri();
-var svgToMiniDataURI = /*@__PURE__*/index.getDefaultExportFromCjs(miniSvgDataUriExports);
-
-exports.svgToMiniDataURI = svgToMiniDataURI;