@arc-ui/components 11.4.2 → 11.5.0

package/dist/SiteHeader/SiteHeader.cjs.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../_shared/cjs/index-78b35bc1.js');
+var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
 var index_es = require('../_shared/cjs/index.es-77def0c9.js');
-var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var index = require('../_shared/cjs/index-45bfb67b.js');
 var React = require('react');
-var BrandLogo = require('../_shared/cjs/BrandLogo-3c6102ef.js');
-var Button = require('../_shared/cjs/Button-1af6868c.js');
-var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+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-edf7851e.js');
-var Text = require('../_shared/cjs/Text-1d3844be.js');
+var suffixModifier = require('../_shared/cjs/suffix-modifier-1ee2da04.js');
+var Text = require('../_shared/cjs/Text-6f2827e6.js');
 require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
-require('../_shared/cjs/Icon-719d13d4.js');
+require('../_shared/cjs/Icon-9ae8dbe1.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,11 +23,11 @@ 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 = index.__rest(_a, ["children", "href", "isEmphasised", "onClick"]);
-    return (React__default["default"].createElement("li", index.__assign({ className: index$1.classNames((_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)) }, index.filterDataAttrs(props)),
+            _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))),
@@ -35,7 +35,7 @@ var Item = function (_a) {
 };
 
 var ItemGroup = function (_a) {
-    var children = _a.children, href = _a.href, title = _a.title, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = index.__rest(_a, ["children", "href", "title", "onClick", "viewAllTitle"]);
+    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 () {
@@ -54,7 +54,7 @@ var ItemGroup = function (_a) {
         ElementType = "details";
     }
     return (React__default["default"].createElement("li", { className: "arc-SiteHeaderItemGroup" },
-        React__default["default"].createElement(ElementType, index.__assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, index.filterDataAttrs(props)),
+        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 },
@@ -69,9 +69,9 @@ var ItemGroup = function (_a) {
                         }), href: href }, viewAllTitle || "View all ".concat(title.toLowerCase())))) : null))));
 };
 
-var ItemGroupRehydrator = (function (el, hydrate) { return index.__awaiter(void 0, void 0, void 0, function () {
+var ItemGroupRehydrator = (function (el, hydrate) { return filterDataAttrs.__awaiter(void 0, void 0, void 0, function () {
     var children, titleElement, viewAllElement, title, href, viewAllTitle, props;
-    return index.__generator(this, function (_a) {
+    return filterDataAttrs.__generator(this, function (_a) {
         switch (_a.label) {
             case 0: return [4 /*yield*/, hydrate(el.querySelector(".arc-SiteHeaderItemGroup-items"))];
             case 1:
@@ -94,13 +94,13 @@ var ItemGroupRehydrator = (function (el, hydrate) { return index.__awaiter(void
                     title: title,
                     viewAllTitle: viewAllTitle
                 };
-                return [2 /*return*/, React__default["default"].createElement(ItemGroup, index.__assign({}, props), children)];
+                return [2 /*return*/, React__default["default"].createElement(ItemGroup, filterDataAttrs.__assign({}, props), children)];
         }
     });
 }); });
 
 var Column = function (_a) {
-    var children = _a.children, props = index.__rest(_a, ["children"]);
+    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) {
@@ -108,7 +108,7 @@ var Column = function (_a) {
             }
         });
     }, [children]);
-    return (React__default["default"].createElement("li", index.__assign({ className: "arc-SiteHeaderColumn" }, index.filterDataAttrs(props)),
+    return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: "arc-SiteHeaderColumn" }, filterDataAttrs.filterDataAttrs(props)),
         React__default["default"].createElement("ul", { className: "arc-SiteHeaderColumn-items" }, children)));
 };
 
@@ -124,7 +124,7 @@ var BackButton = function (_a) {
 
 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 = index.__rest(_a, ["children", "navItemRef", "open", "promo", "setOpen", "subNavItemRef", "subNavLink", "title", "viewAll", "withSubNav"]);
+    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,
@@ -180,12 +180,12 @@ var Panel = function (_a) {
             window.removeEventListener("keydown", handleKeydown);
         };
     }, [setOpen, subNavItemRef]);
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {},
+    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)) }, index.filterDataAttrs(props)),
+            _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" },
@@ -209,7 +209,7 @@ 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 = index.__rest(_a, ["children", "href", "isCurrent", "onClick", "promo", "title", "viewAllTitle"]);
+    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)"));
@@ -223,13 +223,13 @@ var NavItem = function (_a) {
             }
         });
     }, [children]);
-    return (React__default["default"].createElement("li", index.__assign({ className: index$1.classNames((_b = {},
+    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 }, index.filterDataAttrs(props)), !children ? (href ? (React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({
+            _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$1.classNames((_c = {},
+        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) {
@@ -241,9 +241,9 @@ var NavItem = function (_a) {
         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 index.__awaiter(void 0, void 0, void 0, function () {
+var NavItemRehydrator = (function (el, hydrate) { return filterDataAttrs.__awaiter(void 0, void 0, void 0, function () {
     var children, promo, link, viewAll, href, title, props;
-    return index.__generator(this, function (_a) {
+    return filterDataAttrs.__generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 children = el.querySelector(".arc-SiteHeaderPanel-items");
@@ -278,14 +278,14 @@ var NavItemRehydrator = (function (el, hydrate) { return index.__awaiter(void 0,
                     title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
-                return [2 /*return*/, React__default["default"].createElement(NavItem, index.__assign({}, props), children)];
+                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 = index.__rest(_a, ["children", "isDefaultItem", "href", "onClick", "offsetXL", "promo", "subTitle", "title", "viewAllTitle"]);
+    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];
@@ -311,12 +311,12 @@ var SubNavItem = function (_a) {
     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", index.__assign({ className: index$1.classNames((_b = {},
+    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 }, index.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$1.classNames((_c = {},
+            _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 () {
@@ -330,10 +330,10 @@ var SubNavItem = function (_a) {
                 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 index.__awaiter(void 0, void 0, void 0, function () {
+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 index.__generator(this, function (_b) {
+    return filterDataAttrs.__generator(this, function (_b) {
         switch (_b.label) {
             case 0:
                 children = el.querySelector(".arc-SiteHeaderPanel-items");
@@ -381,7 +381,7 @@ var SubNavItemRehydrator = (function (el, hydrate) { return index.__awaiter(void
                     title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
-                return [2 /*return*/, React__default["default"].createElement(SubNavItem, index.__assign({}, props), children)];
+                return [2 /*return*/, React__default["default"].createElement(SubNavItem, filterDataAttrs.__assign({}, props), children)];
         }
     });
 }); });
@@ -391,7 +391,7 @@ 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 = index.__rest(_a, ["href", "slot1", "slot2", "slot3", "subTitle", "title", "onViewAllClick", "viewAllTitle"]);
+    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];
@@ -423,11 +423,11 @@ var NavItemWithSubNav = function (_a) {
         });
     }, [slot1, slot2, slot3]);
     return (React__default["default"].createElement(Provider$1, { value: { navItem: navItem, subTitle: subTitle } },
-        React__default["default"].createElement("li", index.__assign({ className: index$1.classNames((_b = {},
+        React__default["default"].createElement("li", filterDataAttrs.__assign({ className: index.classNames((_b = {},
                 _b["arc-SiteHeaderNavItemWithSubNav"] = true,
                 _b["arc-SiteHeaderNavItem--linkSelected"] = panelOpen,
-                _b)), ref: navItem }, index.filterDataAttrs(props)),
-            React__default["default"].createElement("button", { "aria-expanded": panelOpen, className: index$1.classNames((_c = {},
+                _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) {
@@ -448,9 +448,9 @@ function wrap(el, wrapper) {
     el.parentNode.insertBefore(wrapper, el);
     wrapper.appendChild(el);
 }
-var NavItemWithSubNavRehydrator = (function (el, hydrate) { return index.__awaiter(void 0, void 0, void 0, function () {
+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 index.__generator(this, function (_a) {
+    return filterDataAttrs.__generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 subNavItem1 = el.querySelector(".arc-SiteHeaderSubNavItem:first-child");
@@ -494,15 +494,20 @@ var NavItemWithSubNavRehydrator = (function (el, hydrate) { return index.__await
                     title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
-                return [2 /*return*/, React__default["default"].createElement(NavItemWithSubNav, index.__assign({}, props))];
+                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$1.classNames((_b = {},
+    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 () {
@@ -521,13 +526,14 @@ var Provider = Context.Provider;
  */
 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 = index.__rest(_a, ["children", "basket", "hasLogin", "isTransparent", "loginHref", "logoOnClick", "loginOnClick", "loginTitle", "logoHref", "logoLabel", "search", "subBrand"]);
+    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) {
@@ -573,11 +579,11 @@ var SiteHeader = function (_a) {
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
     return (React__default["default"].createElement(Provider, { value: { transparent: isTransparent } },
-        React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {},
+        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)) }, index.filterDataAttrs(props), { "data-transparent": isTransparent || null }),
+                _b)) }, filterDataAttrs.filterDataAttrs(props), { "data-transparent": isTransparent || null }),
             React__default["default"].createElement(Surface.Surface, { background: !isTransparent || (menuOpen && !isMinWidthArcBreakpointL)
                     ? "brand-flat"
                     : undefined },
@@ -603,18 +609,20 @@ 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 index.__awaiter(void 0, void 0, void 0, function () {
+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 index.__generator(this, function (_a) {
+    return filterDataAttrs.__generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 children = el.querySelector(".arc-SiteHeader-navItems");
@@ -656,7 +664,7 @@ var SiteHeaderRehydrator = function (el, hydrate) { return index.__awaiter(void
                     logoLabel: logoLabel,
                     search: search
                 };
-                return [2 /*return*/, React__default["default"].createElement(SiteHeader, index.__assign({}, props), children)];
+                return [2 /*return*/, React__default["default"].createElement(SiteHeader, filterDataAttrs.__assign({}, props), children)];
         }
     });
 }); };

package/dist/SiteHeader/SiteHeader.esm.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FC, ReactNode, ReactElement } from "react";
-import { subBrands } from "../_shared/esm/BrandLogo-4f13fe85";
+import { subBrands } from "../_shared/esm/BrandLogo-56699561";
 declare const Column: FC<ColumnProps>;
 interface ColumnProps {
     /**
@@ -134,6 +134,13 @@ interface NavItemWithSubNavProps {
      */
     onViewAllClick?: () => void;
 }
+declare const NodeItem: FC<NodeItemProps>;
+interface NodeItemProps {
+    /**
+     * Content to display with `SiteHeader.NodeItem`
+     */
+    children?: ReactNode;
+}
 declare const SubNavItem: FC<SubNavItemProps>;
 interface SubNavItemProps {
     /**
@@ -188,6 +195,7 @@ declare const SiteHeader: FC<SiteHeaderProps> & {
     Item: typeof Item;
     ItemGroup: typeof ItemGroup;
     NavItem: typeof NavItem;
+    NodeItem: typeof NodeItem;
     NavItemWithSubNav: typeof NavItemWithSubNav;
     SubNavItem: typeof SubNavItem;
 };

package/dist/SiteHeader/SiteHeader.esm.js

@@ -1,17 +1,17 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from '../_shared/esm/index-229fc864.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
 import { u as useMediaQuery, a as ArcBreakpointL } from '../_shared/esm/index.es-00cb3bcb.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import React__default, { useState, useEffect, Fragment, useContext, useRef, createContext } from 'react';
-import { B as BrandLogo } from '../_shared/esm/BrandLogo-4f13fe85.js';
-import { B as Button } from '../_shared/esm/Button-10700df4.js';
-import { S as Surface } from '../_shared/esm/Surface-bf201530.js';
+import { B as BrandLogo } from '../_shared/esm/BrandLogo-56699561.js';
+import { B as Button } from '../_shared/esm/Button-61241dd0.js';
+import { S as Surface } from '../_shared/esm/Surface-bb100ef8.js';
 import { B as BtIconChevronDown2Px_2 } from '../_shared/esm/BtIconChevronDown2Px-782876e2.js';
 import { h as handleLinkClick } from '../_shared/esm/handle-link-click-f64f55a2.js';
 import { a as BtIconChevronRight2Px_2, B as BtIconChevronLeft2Px_2 } from '../_shared/esm/BtIconChevronRight2Px-b8e7b4ad.js';
-import { s as suffixModifier } from '../_shared/esm/suffix-modifier-f5e28822.js';
-import { T as Text } from '../_shared/esm/Text-6b958ad8.js';
+import { s as suffixModifier } from '../_shared/esm/suffix-modifier-7e640670.js';
+import { T as Text } from '../_shared/esm/Text-00e9743b.js';
 import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
-import '../_shared/esm/Icon-61f7237a.js';
+import '../_shared/esm/Icon-fd247973.js';
 
 var Item = function (_a) {
     var _b;
@@ -491,6 +491,11 @@ var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(voi
     });
 }); });
 
+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;
@@ -520,6 +525,7 @@ var SiteHeader = function (_a) {
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item &&
+                item.type !== NodeItem &&
                 item.type !== NavItem &&
                 item.type !== NavItemWithSubNav &&
                 item.type !== Fragment) {
@@ -595,12 +601,14 @@ 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;
 

package/dist/Surface/Surface.cjs.d.ts

@@ -1 +1 @@
-export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "../_shared/cjs/Surface-d6b8010e";
+export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "../_shared/cjs/Surface-6da0a78e";

package/dist/Surface/Surface.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
-require('../_shared/cjs/index-78b35bc1.js');
+var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
 require('../_shared/cjs/index-45bfb67b.js');
 require('react');
 

package/dist/Surface/Surface.esm.d.ts

@@ -1 +1 @@
-export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "../_shared/esm/Surface-bf201530";
+export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "../_shared/esm/Surface-bb100ef8";

package/dist/Surface/Surface.esm.js

@@ -1,4 +1,4 @@
-export { S as Surface, C as SurfaceContext, b as backgrounds, a as backgroundsBT } from '../_shared/esm/Surface-bf201530.js';
-import '../_shared/esm/index-229fc864.js';
+export { S as Surface, C as SurfaceContext, b as backgrounds, a as backgroundsBT } from '../_shared/esm/Surface-bb100ef8.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
 import '../_shared/esm/index-2ae58626.js';
 import 'react';

package/dist/Switch/Switch.cjs.d.ts

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { SwitchProps as RadixSwitchProps } from "@radix-ui/react-switch";
-import { FormControlProps } from "../_shared/cjs/FormControl-d4d9c665";
+import { FormControlProps } from "../_shared/cjs/FormControl-42360ae8";
 /** Use `Switch` to toggle between checked and not checked. */
 declare const Switch: FC<SwitchProps>;
 interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper"> {

package/dist/Switch/Switch.cjs.js

@@ -5,16 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var index = require('../_shared/cjs/index-45bfb67b.js');
 var index_module = require('../_shared/cjs/index.module-af7c85f2.js');
-var Icon = require('../_shared/cjs/Icon-719d13d4.js');
+var Icon = require('../_shared/cjs/Icon-9ae8dbe1.js');
 var BtIconTickAlt2Px = require('../_shared/cjs/BtIconTickAlt2Px-bdf06f8c.js');
-var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
-var FormControl = require('../_shared/cjs/FormControl-d4d9c665.js');
-var VerticalSpace = require('../_shared/cjs/VerticalSpace-7aed88ab.js');
-var Text = require('../_shared/cjs/Text-1d3844be.js');
+var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
+var FormControl = require('../_shared/cjs/FormControl-42360ae8.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-86f697e7.js');
+var Text = require('../_shared/cjs/Text-6f2827e6.js');
 require('react-dom');
-require('../_shared/cjs/index-78b35bc1.js');
-require('../_shared/cjs/suffix-modifier-edf7851e.js');
-require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+require('../_shared/cjs/suffix-modifier-1ee2da04.js');
+require('../_shared/cjs/BtIconAlert-637db790.js');
+require('../_shared/cjs/DisclosureMini-5af13d3c.js');
+require('../_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Switch/Switch.esm.d.ts

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { SwitchProps as RadixSwitchProps } from "@radix-ui/react-switch";
-import { FormControlProps } from "../_shared/esm/FormControl-2cb96de7";
+import { FormControlProps } from "../_shared/esm/FormControl-0744f93f";
 /** Use `Switch` to toggle between checked and not checked. */
 declare const Switch: FC<SwitchProps>;
 interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper"> {

package/dist/Switch/Switch.esm.js

@@ -1,16 +1,18 @@
 import React__default, { useState, forwardRef, useRef, createElement, useEffect, useContext } from 'react';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import { g as $9f79659886946c16$export$e5c5a5f917a5871c, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, h as $71cd76cc60e0454e$export$6f32135080cb4c3, d as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, e as $e42e1063c40fb3ef$export$b9ecd428b558ff10, i as $010c2913dbd2fe3d$export$5cae361ad82dce8b } from '../_shared/esm/index.module-599b86dd.js';
-import { I as Icon } from '../_shared/esm/Icon-61f7237a.js';
+import { I as Icon } from '../_shared/esm/Icon-fd247973.js';
 import { B as BtIconTickAlt2Px_2 } from '../_shared/esm/BtIconTickAlt2Px-da97e9ae.js';
-import { C as Context } from '../_shared/esm/Surface-bf201530.js';
-import { F as FormControl } from '../_shared/esm/FormControl-2cb96de7.js';
-import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-3579b20e.js';
-import { T as Text } from '../_shared/esm/Text-6b958ad8.js';
+import { C as Context } from '../_shared/esm/Surface-bb100ef8.js';
+import { F as FormControl } from '../_shared/esm/FormControl-0744f93f.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-93980c9c.js';
+import { T as Text } from '../_shared/esm/Text-00e9743b.js';
 import 'react-dom';
-import '../_shared/esm/index-229fc864.js';
-import '../_shared/esm/suffix-modifier-f5e28822.js';
-import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import '../_shared/esm/suffix-modifier-7e640670.js';
+import '../_shared/esm/BtIconAlert-55a6ed5c.js';
+import '../_shared/esm/DisclosureMini-322fccc0.js';
+import '../_shared/esm/BtIconChevronDown2Px-782876e2.js';
 
 function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
     const [size, setSize] = useState(undefined);