@arc-ui/components 11.17.0 → 11.19.0

package/dist/_shared/cjs/{SiteHeaderV2-8ce6d4fc.js → SiteHeaderV2-8c8f3f5c.js}

@@ -9,10 +9,10 @@ var Surface = require('./Surface-038db6e1.js');
 var handleLinkClick = require('./handle-link-click-17a44cf4.js');
 var BtIconChevronRightMid_esm = require('./BtIconChevronRightMid.esm-d01ebbd4.js');
 var BtIconChevronRight2Px_esm = require('./BtIconChevronRight2Px.esm-dbf8cbee.js');
-var Button = require('./Button-4fed080a.js');
+var Button = require('./Button-84533dc8.js');
 var suffixModifier = require('./suffix-modifier-64dcd338.js');
 var Text = require('./Text-606ca3a2.js');
-var Icon = require('./Icon-a9801f05.js');
+var Icon = require('./Icon-b46897a3.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -60,7 +60,7 @@ var ItemGroup = function (_a) {
                             ? 0
                             : -1 }, title),
                     React__default["default"].createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
-                        React__default["default"].createElement(BtIconChevronRightMid_esm.BtIconChevronRightMid, { size: 16 })))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
+                        React__default["default"].createElement(BtIconChevronRightMid_esm.BtIconChevronRightMid, null)))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
                 React__default["default"].createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
             React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items" },
                 children,
@@ -84,9 +84,10 @@ var Column = function (_a) {
 };
 
 var BackButton = function (_a) {
-    var setOpen = _a.setOpen;
+    var setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick;
     return (React__default["default"].createElement("button", { className: "arc-SiteHeaderV2BackButton", onClick: function () {
             setOpen(false);
+            setOpenPanelOnFirstClick(false);
         } },
         React__default["default"].createElement("span", { className: "arc-SiteHeaderV2BackButton-icon" },
             React__default["default"].createElement(BtIconChevronRight2Px_esm.BtIconChevronLeft2Px, null)),
@@ -95,7 +96,7 @@ var BackButton = function (_a) {
 
 var Panel = function (_a) {
     var _b, _c, _d, _e, _f;
-    var children = _a.children, navItemRef = _a.navItemRef, isNavItem = _a.isNavItem, open = _a.open, setOpen = _a.setOpen, subNavItemRef = _a.subNavItemRef, _g = _a.subNavLink, subNavLink = _g === void 0 ? "" : _g, title = _a.title, subtitle = _a.subtitle, viewAll = _a.viewAll, withSubNav = _a.withSubNav, fade = _a.fade, isPrimary = _a.isPrimary, props = filterDataAttrs.__rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "subNavItemRef", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
+    var children = _a.children, navItemRef = _a.navItemRef, isNavItem = _a.isNavItem, open = _a.open, setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick, subNavItemRef = _a.subNavItemRef; _a.navLink; var _h = _a.subNavLink, subNavLink = _h === void 0 ? "" : _h, title = _a.title, subtitle = _a.subtitle, viewAll = _a.viewAll, withSubNav = _a.withSubNav; _a.fade; var isPrimary = _a.isPrimary, props = filterDataAttrs.__rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "setOpenPanelOnFirstClick", "subNavItemRef", "navLink", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
     var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         // Where appropriate, close the Panel when clicking outside of it,
@@ -118,7 +119,9 @@ var Panel = function (_a) {
                 (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, "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.
@@ -132,7 +135,31 @@ var Panel = function (_a) {
         return function () {
             document.removeEventListener("click", handleClick);
         };
-    }, [navItemRef, setOpen, subNavItemRef, subNavLink]);
+    }, [
+        navItemRef,
+        setOpen,
+        subNavItemRef,
+        subNavLink,
+        setOpenPanelOnFirstClick,
+    ]);
+    React.useEffect(function () {
+        var handleClick = function (e) {
+            // 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]);
     React.useEffect(function () {
         var handleKeydown = function (e) {
             // Check the viewport width at time of press
@@ -156,9 +183,10 @@ var Panel = function (_a) {
                 _b["arc-SiteHeaderV2Panel"] = true,
                 _b["arc-SiteHeaderV2Panel--open"] = open,
                 _b["arc-SiteHeaderV2Panel--withSubNav"] = withSubNav,
+                _b["arc-SiteHeaderV2Panel-onlyPanel"] = isPrimary && isNavItem,
                 _b)) }, filterDataAttrs.filterDataAttrs(props)),
             React__default["default"].createElement(Surface.Surface, { background: "white" },
-                React__default["default"].createElement(BackButton, { setOpen: setOpen }),
+                React__default["default"].createElement(BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: setOpenPanelOnFirstClick }),
                 React__default["default"].createElement("div", { className: index.classNames((_c = {},
                         _c["arc-SiteHeaderV2Panel-inner"] = !isNavItem && withSubNav,
                         _c["arc-SiteHeaderV2Panel-innerWithoutSubNav"] = !isNavItem && !withSubNav,
@@ -181,7 +209,7 @@ var Panel = function (_a) {
                             React__default["default"].createElement("ul", { className: index.classNames((_f = {},
                                     _f["arc-SiteHeaderV2Panel-items"] = !isNavItem,
                                     _f["arc-SiteHeaderV2Panel-itemsNavItems"] = isNavItem,
-                                    _f["arc-SiteHeaderV2NavItemWithSubNav-fadeIn"] = isNavItem && fade && !isPrimary,
+                                    _f["arc-SiteHeaderV2NavItemWithSubNav-fadeIn"] = open && isNavItem,
                                     _f)) }, children),
                             !withSubNav && viewAll)),
                     withSubNav && viewAll)))));
@@ -211,10 +239,11 @@ Panel.ViewAll = ViewAll;
 
 var NavItem = function (_a) {
     var _b, _c, _d, _e, _f;
-    var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, title = _a.title; _a.viewAllTitle; var isPrimary = _a.isPrimary, subTitle = _a.subTitle, props = filterDataAttrs.__rest(_a, ["children", "href", "isCurrent", "onClick", "title", "viewAllTitle", "isPrimary", "subTitle"]);
+    var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, title = _a.title; _a.viewAllTitle; var isPrimary = _a.isPrimary, opensFirstWithPanel = _a.opensFirstWithPanel, subTitle = _a.subTitle, props = filterDataAttrs.__rest(_a, ["children", "href", "isCurrent", "onClick", "title", "viewAllTitle", "isPrimary", "opensFirstWithPanel", "subTitle"]);
     var navItem = React.useRef();
     var _g = React.useState(false), panelOpen = _g[0], setPanelOpen = _g[1];
-    var _h = React.useState(false), animation = _h[0], setAnimation = _h[1];
+    var _h = React.useState(true), openSecondaryWithSubNav = _h[0], setOpenSecondaryWithSubNav = _h[1];
+    var _j = React.useState(false), animation = _j[0], setAnimation = _j[1];
     var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
@@ -231,7 +260,8 @@ var NavItem = function (_a) {
             _b["arc-SiteHeaderV2NavItemWithSubNav-Secondary"] = !isPrimary,
             _b["arc-SiteHeaderV2NavItem"] = !subTitle && !isPrimary,
             _b["arc-SiteHeaderV2NavItem--linkSelected"] = (children && panelOpen) || (!children && href && isCurrent),
-            _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = !isPrimary && panelOpen,
+            _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = (!isPrimary && panelOpen) ||
+                (opensFirstWithPanel && openSecondaryWithSubNav),
             _b)), ref: navItem }, filterDataAttrs.filterDataAttrs(props)), !children ? (href ? (React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({
             handler: onClick
         }), className: "arc-SiteHeaderV2NavItem-link", href: href }, title)) : null) : (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -239,6 +269,8 @@ var NavItem = function (_a) {
             React__default["default"].createElement("button", { "aria-expanded": panelOpen, className: index.classNames((_c = {},
                     _c["arc-SiteHeaderV2NavItem-link"] = true,
                     _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
+                    _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
+                    _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
                     _c["arc-SiteHeaderV2NavItem-horizontalPanelLink"] = !isPrimary && !isMinWidthArcBreakpointL,
                     _c)), onClick: function (e) {
                     e.preventDefault();
@@ -247,18 +279,25 @@ var NavItem = function (_a) {
                 }, onAnimationEnd: function () { return setAnimation(false); } },
                 React__default["default"].createElement("div", { className: index.classNames((_d = {},
                         _d["arc-SiteHeaderV2NavItem-title"] = !subTitle,
+                        _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
+                        _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
                         _d)) }, title),
                 React__default["default"].createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
                     React__default["default"].createElement(BtIconChevronRight2Px_esm.BtIconChevronRight2Px, null)),
                 subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default["default"].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)) }, subTitle)) : null,
                 React__default["default"].createElement("div", { className: index.classNames((_f = {},
-                        _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = panelOpen,
+                        _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = panelOpen ||
+                            (opensFirstWithPanel && openSecondaryWithSubNav),
                         _f["arc-SiteHeaderV2NavItemWithSubNav-primaryButtonUnderline"] = isPrimary && panelOpen,
-                        _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive"] = !isPrimary && panelOpen,
+                        _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive"] = !isPrimary && (panelOpen || openSecondaryWithSubNav),
                         _f)) }))),
-        React__default["default"].createElement(Panel, { navItemRef: navItem, isNavItem: true, isPrimary: isPrimary, open: panelOpen, setOpen: setPanelOpen, fade: animation, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: "See all solutions", fill: "solid" })) : undefined }, children)))));
+        React__default["default"].createElement(Panel, { navItemRef: navItem, isNavItem: true, isPrimary: isPrimary, open: opensFirstWithPanel && isMinWidthArcBreakpointL
+                ? openSecondaryWithSubNav
+                : panelOpen, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, fade: animation, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: "See all solutions", fill: "solid" })) : undefined }, children)))));
 };
 
 var HorizontalPanel = function (_a) {
@@ -327,7 +366,7 @@ var HorizontalPanel = function (_a) {
             React__default["default"].createElement("div", { className: index.classNames((_c = {},
                     _c["arc-SiteHeaderV2HorizontalPanel-container"] = true,
                     _c)) },
-                React__default["default"].createElement(BackButton, { setOpen: setOpen }),
+                React__default["default"].createElement(BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: function () { } }),
                 title && (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2Panel-selectedTitle" }, title)),
                 React__default["default"].createElement("ul", { className: index.classNames((_d = {},
                         _d["arc-SiteHeaderV2HorizontalPanel-items"] = true,
@@ -339,12 +378,13 @@ var Context$1 = React.createContext(defaultContext$1);
 var Provider$1 = Context$1.Provider;
 var NavItemWithSubNav = function (_a) {
     var _b, _c, _d, _e, _f;
-    var href = _a.href, slot1 = _a.slot1, slot2 = _a.slot2, slot3 = _a.slot3, slot4 = _a.slot4, slot5 = _a.slot5, slot6 = _a.slot6, _g = _a.subTitle, subTitle = _g === void 0 ? null : _g, title = _a.title, onViewAllClick = _a.onViewAllClick, isPrimary = _a.isPrimary, viewAllTitle = _a.viewAllTitle, props = filterDataAttrs.__rest(_a, ["href", "slot1", "slot2", "slot3", "slot4", "slot5", "slot6", "subTitle", "title", "onViewAllClick", "isPrimary", "viewAllTitle"]);
+    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 = filterDataAttrs.__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(false), animation = _l[0], setAnimation = _l[1];
+    var _m = React.useState(true), openSecondaryWithSubNav = _m[0], setOpenSecondaryWithSubNav = _m[1];
     var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(slot1, function (item) {
@@ -381,12 +421,15 @@ var NavItemWithSubNav = function (_a) {
                 _b["arc-SiteHeaderV2NavItem--linkSelected"] = isPrimary
                     ? horizontalPanelOpen
                     : panelOpen,
-                _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen,
+                _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen || (opensFirstWithPanel && openSecondaryWithSubNav),
                 _b)), ref: navItem }, filterDataAttrs.filterDataAttrs(props)),
             React__default["default"].createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
                 React__default["default"].createElement("button", { "aria-expanded": horizontalPanelOpen, className: index.classNames((_c = {},
                         _c["arc-SiteHeaderV2NavItem-link"] = true,
                         _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();
@@ -397,18 +440,25 @@ var NavItemWithSubNav = function (_a) {
                     }, onAnimationEnd: function () { return setAnimation(false); } },
                     React__default["default"].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__default["default"].createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
                         React__default["default"].createElement(BtIconChevronRight2Px_esm.BtIconChevronRight2Px, null)),
                     subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default["default"].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__default["default"].createElement("div", { className: index.classNames((_f = {},
                             _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = isPrimary
                                 ? horizontalPanelOpen
-                                : panelOpen,
+                                : panelOpen ||
+                                    (opensFirstWithPanel && openSecondaryWithSubNav),
                             _f["arc-SiteHeaderV2NavItemWithSubNav-primaryButtonUnderline"] = isPrimary && horizontalPanelOpen,
-                            _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive "] = !isPrimary && panelOpen,
+                            _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive "] = !isPrimary && (panelOpen || openSecondaryWithSubNav),
                             _f)) }))),
             isPrimary && (React__default["default"].createElement(HorizontalPanel, { animation: animation, navItemRef: navItem, open: horizontalPanelOpen, setOpen: setHorizontalPanelOpen, title: !isMinWidthArcBreakpointL && title },
                 slot1,
@@ -416,7 +466,9 @@ var NavItemWithSubNav = function (_a) {
                 slot3,
                 slot4,
                 slot5)),
-            React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, fade: animation, setOpen: setPanelOpen, title: !isMinWidthArcBreakpointL && title, subtitle: subTitle, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle, fill: "solid" })) : undefined, withSubNav: true, isNavItem: false },
+            React__default["default"].createElement(Panel, { navItemRef: navItem, open: opensFirstWithPanel && isMinWidthArcBreakpointL
+                    ? openSecondaryWithSubNav
+                    : panelOpen, fade: animation, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, title: !isMinWidthArcBreakpointL && title, subtitle: subTitle, navLink: "", viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle, fill: "solid" })) : undefined, withSubNav: true, isNavItem: false },
                 defaultItem
                     ? React__default["default"].cloneElement(slot1, { isDefaultItem: defaultItem })
                     : slot1,
@@ -493,10 +545,11 @@ var SubNavItem = function (_a) {
                 setPanelOpen(true);
                 setFade(true);
             }, onAnimationEnd: function () { return setFade(false); } },
-            React__default["default"].createElement("div", { className: "arc-SiteHeaderV2SubNavItem-icon" },
-                icon && (React__default["default"].createElement("span", { className: "arc-SiteHeaderV2SubNavItem-panelIcon" }, isMinWidthArcBreakpointL && React__default["default"].createElement(Icon.Icon, { icon: icon, size: 48 }))),
-                React__default["default"].createElement("span", { "data-cy": "linkTitle", className: "arc-SiteHeaderV2SubNavItem-title" }, linkTitle))),
-        React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderV2SubNavItem-link", title: React__default["default"].createElement("span", null,
+            React__default["default"].createElement("div", { className: "arc-SiteHeaderV2SubNavItem-linkSlot" },
+                icon && isMinWidthArcBreakpointL && (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2SubNavItem-linkSlotIcon" },
+                    React__default["default"].createElement(Icon.Icon, { icon: icon, size: 48 }))),
+                React__default["default"].createElement("span", { "data-cy": "linkTitle", className: "arc-SiteHeaderV2SubNavItem-linkSlotTitle" }, linkTitle))),
+        React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, setOpenPanelOnFirstClick: function () { }, subNavLink: "arc-SiteHeaderV2SubNavItem-link", 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 || "See all ".concat(title), fill: "outlined" })) : undefined, isNavItem: false, fade: fade }, children)))));
 };
@@ -578,7 +631,7 @@ var SiteHeaderV2 = function (_a) {
                     React__default["default"].createElement("a", { className: "arc-SiteHeaderV2-brand", onClick: handleLinkClick.handleLinkClick({
                             handler: logoOnClick
                         }), href: logoHref },
-                        React__default["default"].createElement(BrandLogo.BrandLogo, { label: logoLabel, subBrand: subBrand, size: 40 })),
+                        React__default["default"].createElement(BrandLogo.BrandLogo, { label: logoLabel, subBrand: subBrand })),
                     children && (React__default["default"].createElement("nav", { className: "arc-SiteHeaderV2-nav" },
                         React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-menuButton" },
                             React__default["default"].createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),

package/dist/_shared/cjs/{Tabs-34db6bc1.js → Tabs-24e6f45b.js}

@@ -8,7 +8,7 @@ var index = require('./index-9f99d686.js');
 var index$3 = require('./index-6eb396a3.js');
 var index$2 = require('./index-dcfdd5da.js');
 var index$4 = require('./index-d38f1bd0.js');
-var Icon = require('./Icon-a9801f05.js');
+var Icon = require('./Icon-b46897a3.js');
 var Surface = require('./Surface-038db6e1.js');
 var index$5 = require('./index-9947ac13.js');
 var BtIconArrowRightFill_esm = require('./BtIconArrowRightFill.esm-435cf4bd.js');

package/dist/_shared/cjs/{Tag-42ddca45.js → Tag-8723b324.js}

@@ -4,7 +4,7 @@ var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
 var React = require('react');
 var index = require('./index-9947ac13.js');
 var Surface = require('./Surface-038db6e1.js');
-var Icon = require('./Icon-a9801f05.js');
+var Icon = require('./Icon-b46897a3.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/_shared/cjs/{TextInput-d0370fa8.js → TextInput-acbd8eda.js}

@@ -6,7 +6,7 @@ var React = require('react');
 var FormControl = require('./FormControl-b26ad353.js');
 var Surface = require('./Surface-038db6e1.js');
 var VisuallyHidden = require('./VisuallyHidden-e2c8b291.js');
-var Icon = require('./Icon-a9801f05.js');
+var Icon = require('./Icon-b46897a3.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -42,7 +42,7 @@ var useNumericInput = function (props) {
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
-var TextInput = React.forwardRef(function (_a, ref) {
+var TextInputComponent = React.forwardRef(function (_a, ref) {
     var _b;
     var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, _g = _a.labelSize, labelSize = _g === void 0 ? "l" : _g, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _h = _a.type, type = _h === void 0 ? "text" : _h, _j = _a.showPassword, showPassword = _j === void 0 ? false : _j, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _k = _a.inputSize, inputSize = _k === void 0 ? "m" : _k, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, props = filterDataAttrs.__rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width"]);
     var surface = React.useContext(Surface.Context).surface;
@@ -96,5 +96,8 @@ var TextInput = React.forwardRef(function (_a, ref) {
                                 ? "Your password is shown"
                                 : "Your password is hidden")))))))));
 });
+var TextInput = React.forwardRef(function (props, ref) { return React__default["default"].createElement(TextInputComponent, filterDataAttrs.__assign({ ref: ref }, props)); });
+var TextInputWithPlaceHolder = React.forwardRef(function (props, ref) { return React__default["default"].createElement(TextInputComponent, filterDataAttrs.__assign({ ref: ref }, props)); });
 
 exports.TextInput = TextInput;
+exports.TextInputWithPlaceHolder = TextInputWithPlaceHolder;

package/dist/_shared/cjs/{Toast-392b1d60.js → Toast-7a20d1b9.js}

@@ -13,7 +13,7 @@ var index$5 = require('./index-9947ac13.js');
 var BtIconCrossAlt2Px_esm = require('./BtIconCrossAlt2Px.esm-1452b14b.js');
 var BtIconTick_esm = require('./BtIconTick.esm-844eac6c.js');
 var BtIconAlert_esm = require('./BtIconAlert.esm-1a0ff9f0.js');
-var Icon = require('./Icon-a9801f05.js');
+var Icon = require('./Icon-b46897a3.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/_shared/esm/{Breadcrumbs-36edfb3d.js → Breadcrumbs-7d55e1a6.js}

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-
 import React__default, { useRef, useState, useEffect } from 'react';
 import { d as debounce_1 } from './debounce-6fed6b84.js';
 import { B as BtIconChevronLeft2Px, a as BtIconChevronRight2Px } from './BtIconChevronRight2Px.esm-75e92636.js';
-import { I as Icon } from './Icon-abd0d990.js';
+import { I as Icon } from './Icon-15799695.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
 

package/dist/_shared/esm/{Button-a453e8e4.js → Button-3f294e64.js}

@@ -4,7 +4,7 @@ import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-32268f1a
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { forwardRef, useContext } from 'react';
 import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
-import { I as Icon } from './Icon-abd0d990.js';
+import { I as Icon } from './Icon-15799695.js';
 import { C as Context } from './Surface-0ca6817d.js';
 
 /**

package/dist/_shared/esm/{Calendar-4033fa48.js → Calendar-753ef6f1.js}

@@ -8,7 +8,7 @@ import { S as Surface } from './Surface-0ca6817d.js';
 import { H as Heading } from './Heading-d16e0e53.js';
 import { B as BtIconChevronLeftMid } from './BtIconChevronLeftMid.esm-1ed8330b.js';
 import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-32268f1a.js';
-import { I as Icon } from './Icon-abd0d990.js';
+import { I as Icon } from './Icon-15799695.js';
 
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {

package/dist/_shared/esm/{Card-201e9f28.js → Card-7fc6c9b4.js}

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useState, useEffect, useContext } from 'react';
 import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-32268f1a.js';
-import { I as Icon } from './Icon-abd0d990.js';
+import { I as Icon } from './Icon-15799695.js';
 import { I as Image } from './Image-12fbd327.js';
 import { H as Heading } from './Heading-d16e0e53.js';
 import { s as suffixModifier } from './suffix-modifier-3d548e45.js';

package/dist/_shared/esm/{CardFooter-dd8d4000.js → CardFooter-55ae9a37.js}

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
 import { B as BtIconArrowRight } from './CardLabel-d6d71407.js';
 import { B as BtIconArrowRightFill } from './BtIconArrowRightFill.esm-99019d1a.js';
-import { I as Icon } from './Icon-abd0d990.js';
+import { I as Icon } from './Icon-15799695.js';
 
 const BtIconPlay = (props) =>
   /*#__PURE__*/ React__default.createElement(

package/dist/_shared/esm/{Icon-abd0d990.js → Icon-15799695.js}

@@ -26,9 +26,13 @@ const ArcIconArc = (props) =>
  */
 var Icon = function (_a) {
     var _b;
-    var testId = _a.testId, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.icon, icon = _d === void 0 ? ArcIconArc : _d, _e = _a.isInline, isInline = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = __rest(_a, ["testId", "color", "icon", "isInline", "label", "size"]);
+    var testId = _a.testId, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.icon, icon = _d === void 0 ? ArcIconArc : _d, _e = _a.isInline, isInline = _e === void 0 ? false : _e, _f = _a.isPresentationIcon, isPresentationIcon = _f === void 0 ? false : _f, label = _a.label, size = _a.size, props = __rest(_a, ["testId", "color", "icon", "isInline", "isPresentationIcon", "label", "size"]);
     var surface = useContext(Context).surface;
     var Icon = icon;
+    var presentationIconProps = {
+        role: "presentation",
+        "aria-hidden": true
+    };
     return (React__default.createElement("span", __assign({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
             _b["arc-Icon"] = true,
             _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
@@ -38,7 +42,7 @@ var Icon = function (_a) {
             height: size,
             width: size
         } }, filterDataAttrs(props)),
-        React__default.createElement(Icon, null)));
+        React__default.createElement(Icon, __assign({}, (isPresentationIcon ? presentationIconProps : {})))));
 };
 
 export { Icon as I };

package/dist/_shared/esm/{ProgressStepper-f51f86c3.js → ProgressStepper-d4c5b6d9.js}

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-
 import React__default, { useContext } from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
 import { B as BtIconAlert } from './BtIconAlert.esm-a4608d47.js';
-import { I as Icon } from './Icon-abd0d990.js';
+import { I as Icon } from './Icon-15799695.js';
 import { C as Context } from './Surface-0ca6817d.js';
 import { V as VerticalSpace } from './VerticalSpace-43cd9138.js';
 import { V as VisuallyHidden } from './VisuallyHidden-b9eebf71.js';

package/dist/_shared/esm/{RadioGroup-37fdb06b.js → RadioGroup-d42dba3a.js}

@@ -15,8 +15,8 @@ var useRadioContext = function () {
  * Radio Button component.
  */
 var RadioButton = forwardRef(function (_a, ref) {
-    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, props = __rest(_a, ["helper", "id", "isDisabled", "label", "value"]);
-    var _b = useRadioContext(), blurEvent = _b.blurEvent, changeEvent = _b.changeEvent, groupDisabled = _b.groupDisabled, checkedValue = _b.checkedValue, labelSize = _b.labelSize, name = _b.name, size = _b.size;
+    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, _b = _a.radioButtonAlignment, radioButtonAlignment = _b === void 0 ? "center" : _b, value = _a.value, props = __rest(_a, ["helper", "id", "isDisabled", "label", "radioButtonAlignment", "value"]);
+    var _c = useRadioContext(), blurEvent = _c.blurEvent, changeEvent = _c.changeEvent, groupDisabled = _c.groupDisabled, checkedValue = _c.checkedValue, labelSize = _c.labelSize, name = _c.name, size = _c.size;
     var surface = useContext(Context).surface;
     var idLabel = "".concat(id, "-label");
     var checked = checkedValue === value ? true : false;
@@ -27,9 +27,13 @@ var RadioButton = forwardRef(function (_a, ref) {
             "arc-RadioButton--smallLabel": labelSize === "s",
             "arc-RadioButton--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
-        React__default.createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel },
+        React__default.createElement("label", { className: classNames("arc-RadioButton-label", {
+                "arc-RadioButton-label--alignTop": radioButtonAlignment === "top"
+            }), htmlFor: id, id: idLabel },
             React__default.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value }),
-            React__default.createElement("span", null,
+            React__default.createElement("span", { className: classNames({
+                    "arc-RadioButton-label--marginTop": radioButtonAlignment === "top"
+                }) },
                 label,
                 helper && React__default.createElement("span", { className: "arc-RadioButton-helper" }, helper)))));
 });

package/dist/_shared/esm/{SiteHeader.rehydrator-32bdcd88.js → SiteHeader.rehydrator-65c8cf71.js}

@@ -7,7 +7,7 @@ import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
 import { a as BtIconChevronRight2Px, B as BtIconChevronLeft2Px } from './BtIconChevronRight2Px.esm-75e92636.js';
 import { S as Surface } from './Surface-0ca6817d.js';
 import { B as BrandLogo } from './BrandLogo-1af78f76.js';
-import { B as Button } from './Button-a453e8e4.js';
+import { B as Button } from './Button-3f294e64.js';
 import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
 import { T as Text } from './Text-14f586ac.js';
 
@@ -580,7 +580,7 @@ var SiteHeader = function (_a) {
                     React__default.createElement("a", { className: "arc-SiteHeader-brand", onClick: handleLinkClick({
                             handler: logoOnClick
                         }), href: logoHref },
-                        React__default.createElement(BrandLogo, { label: logoLabel, subBrand: subBrand, size: 40 })),
+                        React__default.createElement(BrandLogo, { label: logoLabel, subBrand: subBrand })),
                     children && (React__default.createElement("nav", { className: "arc-SiteHeader-nav" },
                         React__default.createElement("div", { className: "arc-SiteHeader-menuButton" },
                             React__default.createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),