@arc-ui/components 11.17.0 → 11.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/SiteHeaderV2/SiteHeaderV2.cjs.js +1 -1
  2. package/dist/SiteHeaderV2/SiteHeaderV2.esm.js +1 -1
  3. package/dist/TextArea/TextArea.cjs.js +1 -1
  4. package/dist/TextArea/TextArea.esm.js +1 -1
  5. package/dist/_shared/cjs/{SiteHeaderV2-8ce6d4fc.js → SiteHeaderV2-79930632.js} +77 -24
  6. package/dist/_shared/esm/{SiteHeaderV2-f8377627.js → SiteHeaderV2-9e7e7d3b.js} +77 -24
  7. package/dist/index.es.js +77 -24
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/index.js +77 -24
  10. package/dist/index.js.map +1 -1
  11. package/dist/styles.css +3 -3
  12. package/dist/types/components/SiteHeaderV2/components/BackButton/BackButton.d.ts +1 -0
  13. package/dist/types/components/SiteHeaderV2/components/NavItem/NavItem.d.ts +1 -0
  14. package/dist/types/components/SiteHeaderV2/components/NavItem/NavItemWithSubNav.d.ts +1 -0
  15. package/dist/types/components/SiteHeaderV2/components/Panel/Panel.d.ts +2 -0
  16. package/package.json +10 -3
package/dist/index.js CHANGED
@@ -40038,7 +40038,7 @@ var ItemGroup = function (_a) {
40038
40038
  ? 0
40039
40039
  : -1 }, title),
40040
40040
  React__default["default"].createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
40041
- React__default["default"].createElement(BtIconChevronRightMid, { size: 16 })))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
40041
+ React__default["default"].createElement(BtIconChevronRightMid, null)))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
40042
40042
  React__default["default"].createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
40043
40043
  React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items" },
40044
40044
  children,
@@ -40062,9 +40062,10 @@ var Column = function (_a) {
40062
40062
  };
40063
40063
 
40064
40064
  var BackButton = function (_a) {
40065
- var setOpen = _a.setOpen;
40065
+ var setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick;
40066
40066
  return (React__default["default"].createElement("button", { className: "arc-SiteHeaderV2BackButton", onClick: function () {
40067
40067
  setOpen(false);
40068
+ setOpenPanelOnFirstClick(false);
40068
40069
  } },
40069
40070
  React__default["default"].createElement("span", { className: "arc-SiteHeaderV2BackButton-icon" },
40070
40071
  React__default["default"].createElement(BtIconChevronLeft2Px, null)),
@@ -40073,7 +40074,7 @@ var BackButton = function (_a) {
40073
40074
 
40074
40075
  var Panel = function (_a) {
40075
40076
  var _b, _c, _d, _e, _f;
40076
- 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 = __rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "subNavItemRef", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
40077
+ var children = _a.children, navItemRef = _a.navItemRef, isNavItem = _a.isNavItem, open = _a.open, setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick, subNavItemRef = _a.subNavItemRef; _a.navLink; var _h = _a.subNavLink, subNavLink = _h === void 0 ? "" : _h, title = _a.title, subtitle = _a.subtitle, viewAll = _a.viewAll, withSubNav = _a.withSubNav; _a.fade; var isPrimary = _a.isPrimary, props = __rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "setOpenPanelOnFirstClick", "subNavItemRef", "navLink", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
40077
40078
  var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
40078
40079
  React.useEffect(function () {
40079
40080
  // Where appropriate, close the Panel when clicking outside of it,
@@ -40096,7 +40097,9 @@ var Panel = function (_a) {
40096
40097
  (subNavItemRef &&
40097
40098
  !e.target.classList.contains(subNavLink) &&
40098
40099
  !e.target.classList.contains("".concat(subNavLink, "Title")) &&
40099
- !e.target.classList.contains("".concat(subNavLink, "SubTitle"))) ||
40100
+ !e.target.classList.contains("".concat(subNavLink, "SubTitle")) &&
40101
+ !e.target.classList.contains("".concat(subNavLink, "Slot")) &&
40102
+ !e.target.classList.contains("".concat(subNavLink, "SlotTitle"))) ||
40100
40103
  // Panel is inside a SubNavItem
40101
40104
  // and the click is not inside the Panel's NavItem parent.
40102
40105
  // This prevents SubNavItem Panels in sibling NavItems from being closed.
@@ -40110,7 +40113,31 @@ var Panel = function (_a) {
40110
40113
  return function () {
40111
40114
  document.removeEventListener("click", handleClick);
40112
40115
  };
40113
- }, [navItemRef, setOpen, subNavItemRef, subNavLink]);
40116
+ }, [
40117
+ navItemRef,
40118
+ setOpen,
40119
+ subNavItemRef,
40120
+ subNavLink,
40121
+ setOpenPanelOnFirstClick,
40122
+ ]);
40123
+ React.useEffect(function () {
40124
+ var handleClick = function (e) {
40125
+ // Close the Panel…
40126
+ if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel")) {
40127
+ setOpenPanelOnFirstClick(false);
40128
+ return;
40129
+ }
40130
+ if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel") ||
40131
+ e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-primary")) {
40132
+ setOpenPanelOnFirstClick(true);
40133
+ return;
40134
+ }
40135
+ };
40136
+ document.addEventListener("click", handleClick);
40137
+ return function () {
40138
+ document.removeEventListener("click", handleClick);
40139
+ };
40140
+ }, [navItemRef, setOpenPanelOnFirstClick]);
40114
40141
  React.useEffect(function () {
40115
40142
  var handleKeydown = function (e) {
40116
40143
  // Check the viewport width at time of press
@@ -40134,9 +40161,10 @@ var Panel = function (_a) {
40134
40161
  _b["arc-SiteHeaderV2Panel"] = true,
40135
40162
  _b["arc-SiteHeaderV2Panel--open"] = open,
40136
40163
  _b["arc-SiteHeaderV2Panel--withSubNav"] = withSubNav,
40164
+ _b["arc-SiteHeaderV2Panel-onlyPanel"] = isPrimary && isNavItem,
40137
40165
  _b)) }, filterDataAttrs(props)),
40138
40166
  React__default["default"].createElement(Surface, { background: "white" },
40139
- React__default["default"].createElement(BackButton, { setOpen: setOpen }),
40167
+ React__default["default"].createElement(BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: setOpenPanelOnFirstClick }),
40140
40168
  React__default["default"].createElement("div", { className: classNames((_c = {},
40141
40169
  _c["arc-SiteHeaderV2Panel-inner"] = !isNavItem && withSubNav,
40142
40170
  _c["arc-SiteHeaderV2Panel-innerWithoutSubNav"] = !isNavItem && !withSubNav,
@@ -40159,7 +40187,7 @@ var Panel = function (_a) {
40159
40187
  React__default["default"].createElement("ul", { className: classNames((_f = {},
40160
40188
  _f["arc-SiteHeaderV2Panel-items"] = !isNavItem,
40161
40189
  _f["arc-SiteHeaderV2Panel-itemsNavItems"] = isNavItem,
40162
- _f["arc-SiteHeaderV2NavItemWithSubNav-fadeIn"] = isNavItem && fade && !isPrimary,
40190
+ _f["arc-SiteHeaderV2NavItemWithSubNav-fadeIn"] = open && isNavItem,
40163
40191
  _f)) }, children),
40164
40192
  !withSubNav && viewAll)),
40165
40193
  withSubNav && viewAll)))));
@@ -40189,10 +40217,11 @@ Panel.ViewAll = ViewAll;
40189
40217
 
40190
40218
  var NavItem = function (_a) {
40191
40219
  var _b, _c, _d, _e, _f;
40192
- 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 = __rest(_a, ["children", "href", "isCurrent", "onClick", "title", "viewAllTitle", "isPrimary", "subTitle"]);
40220
+ var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, title = _a.title; _a.viewAllTitle; var isPrimary = _a.isPrimary, opensFirstWithPanel = _a.opensFirstWithPanel, subTitle = _a.subTitle, props = __rest(_a, ["children", "href", "isCurrent", "onClick", "title", "viewAllTitle", "isPrimary", "opensFirstWithPanel", "subTitle"]);
40193
40221
  var navItem = React.useRef();
40194
40222
  var _g = React.useState(false), panelOpen = _g[0], setPanelOpen = _g[1];
40195
- var _h = React.useState(false), animation = _h[0], setAnimation = _h[1];
40223
+ var _h = React.useState(true), openSecondaryWithSubNav = _h[0], setOpenSecondaryWithSubNav = _h[1];
40224
+ var _j = React.useState(false), animation = _j[0], setAnimation = _j[1];
40196
40225
  var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
40197
40226
  React.useEffect(function () {
40198
40227
  React__default["default"].Children.map(children, function (item) {
@@ -40209,7 +40238,8 @@ var NavItem = function (_a) {
40209
40238
  _b["arc-SiteHeaderV2NavItemWithSubNav-Secondary"] = !isPrimary,
40210
40239
  _b["arc-SiteHeaderV2NavItem"] = !subTitle && !isPrimary,
40211
40240
  _b["arc-SiteHeaderV2NavItem--linkSelected"] = (children && panelOpen) || (!children && href && isCurrent),
40212
- _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = !isPrimary && panelOpen,
40241
+ _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = (!isPrimary && panelOpen) ||
40242
+ (opensFirstWithPanel && openSecondaryWithSubNav),
40213
40243
  _b)), ref: navItem }, filterDataAttrs(props)), !children ? (href ? (React__default["default"].createElement("a", { onClick: handleLinkClick({
40214
40244
  handler: onClick
40215
40245
  }), className: "arc-SiteHeaderV2NavItem-link", href: href }, title)) : null) : (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -40217,6 +40247,8 @@ var NavItem = function (_a) {
40217
40247
  React__default["default"].createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
40218
40248
  _c["arc-SiteHeaderV2NavItem-link"] = true,
40219
40249
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
40250
+ _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
40251
+ _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
40220
40252
  _c["arc-SiteHeaderV2NavItem-horizontalPanelLink"] = !isPrimary && !isMinWidthArcBreakpointL,
40221
40253
  _c)), onClick: function (e) {
40222
40254
  e.preventDefault();
@@ -40225,18 +40257,25 @@ var NavItem = function (_a) {
40225
40257
  }, onAnimationEnd: function () { return setAnimation(false); } },
40226
40258
  React__default["default"].createElement("div", { className: classNames((_d = {},
40227
40259
  _d["arc-SiteHeaderV2NavItem-title"] = !subTitle,
40260
+ _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
40261
+ _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
40228
40262
  _d)) }, title),
40229
40263
  React__default["default"].createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
40230
40264
  React__default["default"].createElement(BtIconChevronRight2Px, null)),
40231
40265
  subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default["default"].createElement("div", { className: classNames((_e = {},
40232
40266
  _e["arc-SiteHeaderV2NavItemWithSubNav-text"] = !isPrimary,
40267
+ _e["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
40268
+ _e["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
40233
40269
  _e)) }, subTitle)) : null,
40234
40270
  React__default["default"].createElement("div", { className: classNames((_f = {},
40235
- _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = panelOpen,
40271
+ _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = panelOpen ||
40272
+ (opensFirstWithPanel && openSecondaryWithSubNav),
40236
40273
  _f["arc-SiteHeaderV2NavItemWithSubNav-primaryButtonUnderline"] = isPrimary && panelOpen,
40237
- _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive"] = !isPrimary && panelOpen,
40274
+ _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive"] = !isPrimary && (panelOpen || openSecondaryWithSubNav),
40238
40275
  _f)) }))),
40239
- 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)))));
40276
+ React__default["default"].createElement(Panel, { navItemRef: navItem, isNavItem: true, isPrimary: isPrimary, open: opensFirstWithPanel && isMinWidthArcBreakpointL
40277
+ ? openSecondaryWithSubNav
40278
+ : 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)))));
40240
40279
  };
40241
40280
 
40242
40281
  var HorizontalPanel = function (_a) {
@@ -40305,7 +40344,7 @@ var HorizontalPanel = function (_a) {
40305
40344
  React__default["default"].createElement("div", { className: classNames((_c = {},
40306
40345
  _c["arc-SiteHeaderV2HorizontalPanel-container"] = true,
40307
40346
  _c)) },
40308
- React__default["default"].createElement(BackButton, { setOpen: setOpen }),
40347
+ React__default["default"].createElement(BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: function () { } }),
40309
40348
  title && (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2Panel-selectedTitle" }, title)),
40310
40349
  React__default["default"].createElement("ul", { className: classNames((_d = {},
40311
40350
  _d["arc-SiteHeaderV2HorizontalPanel-items"] = true,
@@ -40317,12 +40356,13 @@ var Context$1 = React.createContext(defaultContext$1);
40317
40356
  var Provider$1 = Context$1.Provider;
40318
40357
  var NavItemWithSubNav = function (_a) {
40319
40358
  var _b, _c, _d, _e, _f;
40320
- 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 = __rest(_a, ["href", "slot1", "slot2", "slot3", "slot4", "slot5", "slot6", "subTitle", "title", "onViewAllClick", "isPrimary", "viewAllTitle"]);
40359
+ var href = _a.href, slot1 = _a.slot1, slot2 = _a.slot2, slot3 = _a.slot3, slot4 = _a.slot4, slot5 = _a.slot5, slot6 = _a.slot6, _g = _a.subTitle, subTitle = _g === void 0 ? null : _g, title = _a.title, onViewAllClick = _a.onViewAllClick, isPrimary = _a.isPrimary, opensFirstWithPanel = _a.opensFirstWithPanel, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["href", "slot1", "slot2", "slot3", "slot4", "slot5", "slot6", "subTitle", "title", "onViewAllClick", "isPrimary", "opensFirstWithPanel", "viewAllTitle"]);
40321
40360
  var navItem = React.useRef();
40322
40361
  var _h = React.useState(true), defaultItem = _h[0], setDefaultItem = _h[1];
40323
40362
  var _j = React.useState(false), panelOpen = _j[0], setPanelOpen = _j[1];
40324
40363
  var _k = React.useState(false), horizontalPanelOpen = _k[0], setHorizontalPanelOpen = _k[1];
40325
40364
  var _l = React.useState(false), animation = _l[0], setAnimation = _l[1];
40365
+ var _m = React.useState(true), openSecondaryWithSubNav = _m[0], setOpenSecondaryWithSubNav = _m[1];
40326
40366
  var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
40327
40367
  React.useEffect(function () {
40328
40368
  React__default["default"].Children.map(slot1, function (item) {
@@ -40359,12 +40399,15 @@ var NavItemWithSubNav = function (_a) {
40359
40399
  _b["arc-SiteHeaderV2NavItem--linkSelected"] = isPrimary
40360
40400
  ? horizontalPanelOpen
40361
40401
  : panelOpen,
40362
- _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen,
40402
+ _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen || (opensFirstWithPanel && openSecondaryWithSubNav),
40363
40403
  _b)), ref: navItem }, filterDataAttrs(props)),
40364
40404
  React__default["default"].createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
40365
40405
  React__default["default"].createElement("button", { "aria-expanded": horizontalPanelOpen, className: classNames((_c = {},
40366
40406
  _c["arc-SiteHeaderV2NavItem-link"] = true,
40367
40407
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
40408
+ _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
40409
+ _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
40410
+ _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-primary"] = isPrimary,
40368
40411
  _c["arc-SiteHeaderV2NavItem-horizontalPanelLink"] = !isPrimary && !isMinWidthArcBreakpointL,
40369
40412
  _c)), onClick: function (e) {
40370
40413
  e.preventDefault();
@@ -40375,18 +40418,25 @@ var NavItemWithSubNav = function (_a) {
40375
40418
  }, onAnimationEnd: function () { return setAnimation(false); } },
40376
40419
  React__default["default"].createElement("div", { className: classNames((_d = {},
40377
40420
  _d["arc-SiteHeaderV2NavItem-title"] = isPrimary,
40421
+ _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
40422
+ _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
40423
+ _d["arc-SiteHeaderV2NavItem-link--itemHasChildren-primary"] = isPrimary,
40378
40424
  _d)) }, title),
40379
40425
  React__default["default"].createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
40380
40426
  React__default["default"].createElement(BtIconChevronRight2Px, null)),
40381
40427
  subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default["default"].createElement("div", { className: classNames((_e = {},
40382
40428
  _e["arc-SiteHeaderV2NavItemWithSubNav-text"] = !isPrimary,
40429
+ _e["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
40430
+ _e["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
40431
+ _e["arc-SiteHeaderV2NavItem-link--itemHasChildren-primary"] = isPrimary,
40383
40432
  _e)) }, subTitle)) : null,
40384
40433
  React__default["default"].createElement("div", { className: classNames((_f = {},
40385
40434
  _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = isPrimary
40386
40435
  ? horizontalPanelOpen
40387
- : panelOpen,
40436
+ : panelOpen ||
40437
+ (opensFirstWithPanel && openSecondaryWithSubNav),
40388
40438
  _f["arc-SiteHeaderV2NavItemWithSubNav-primaryButtonUnderline"] = isPrimary && horizontalPanelOpen,
40389
- _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive "] = !isPrimary && panelOpen,
40439
+ _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive "] = !isPrimary && (panelOpen || openSecondaryWithSubNav),
40390
40440
  _f)) }))),
40391
40441
  isPrimary && (React__default["default"].createElement(HorizontalPanel, { animation: animation, navItemRef: navItem, open: horizontalPanelOpen, setOpen: setHorizontalPanelOpen, title: !isMinWidthArcBreakpointL && title },
40392
40442
  slot1,
@@ -40394,7 +40444,9 @@ var NavItemWithSubNav = function (_a) {
40394
40444
  slot3,
40395
40445
  slot4,
40396
40446
  slot5)),
40397
- 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 },
40447
+ React__default["default"].createElement(Panel, { navItemRef: navItem, open: opensFirstWithPanel && isMinWidthArcBreakpointL
40448
+ ? openSecondaryWithSubNav
40449
+ : 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 },
40398
40450
  defaultItem
40399
40451
  ? React__default["default"].cloneElement(slot1, { isDefaultItem: defaultItem })
40400
40452
  : slot1,
@@ -40471,10 +40523,11 @@ var SubNavItem = function (_a) {
40471
40523
  setPanelOpen(true);
40472
40524
  setFade(true);
40473
40525
  }, onAnimationEnd: function () { return setFade(false); } },
40474
- React__default["default"].createElement("div", { className: "arc-SiteHeaderV2SubNavItem-icon" },
40475
- icon && (React__default["default"].createElement("span", { className: "arc-SiteHeaderV2SubNavItem-panelIcon" }, isMinWidthArcBreakpointL && React__default["default"].createElement(Icon, { icon: icon, size: 48 }))),
40476
- React__default["default"].createElement("span", { "data-cy": "linkTitle", className: "arc-SiteHeaderV2SubNavItem-title" }, linkTitle))),
40477
- React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderV2SubNavItem-link", title: React__default["default"].createElement("span", null,
40526
+ React__default["default"].createElement("div", { className: "arc-SiteHeaderV2SubNavItem-linkSlot" },
40527
+ icon && isMinWidthArcBreakpointL && (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2SubNavItem-linkSlotIcon" },
40528
+ React__default["default"].createElement(Icon, { icon: icon, size: 48 }))),
40529
+ React__default["default"].createElement("span", { "data-cy": "linkTitle", className: "arc-SiteHeaderV2SubNavItem-linkSlotTitle" }, linkTitle))),
40530
+ 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,
40478
40531
  title,
40479
40532
  subTitle && (React__default["default"].createElement(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)))));
40480
40533
  };
@@ -40556,7 +40609,7 @@ var SiteHeaderV2 = function (_a) {
40556
40609
  React__default["default"].createElement("a", { className: "arc-SiteHeaderV2-brand", onClick: handleLinkClick({
40557
40610
  handler: logoOnClick
40558
40611
  }), href: logoHref },
40559
- React__default["default"].createElement(BrandLogo, { label: logoLabel, subBrand: subBrand, size: 40 })),
40612
+ React__default["default"].createElement(BrandLogo, { label: logoLabel, subBrand: subBrand })),
40560
40613
  children && (React__default["default"].createElement("nav", { className: "arc-SiteHeaderV2-nav" },
40561
40614
  React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-menuButton" },
40562
40615
  React__default["default"].createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),