@arc-ui/components 11.16.0 → 11.17.0

package/dist/index.es.js

@@ -316,9 +316,9 @@ var AlignItem = function (_a) {
     return React__default.createElement("div", { className: "arc-Align-item" }, children);
 };
 
-var defaultContext$3 = { surface: "light" };
-var Context$3 = createContext(defaultContext$3);
-var Provider$4 = Context$3.Provider;
+var defaultContext$5 = { surface: "light" };
+var Context$5 = createContext(defaultContext$5);
+var Provider$6 = Context$5.Provider;
 /**
  * Use `Surface` to compose content using the Arc system.
  */
@@ -333,7 +333,7 @@ var Surface = function (_a) {
         background === "darker") {
         surface = "dark";
     }
-    return (React__default.createElement(Provider$4, { value: { surface: surface } },
+    return (React__default.createElement(Provider$6, { value: { surface: surface } },
         React__default.createElement("div", __assign({ "data-testid": "arc-surface", className: classNames((_b = {
                     "arc-Surface": true
                 },
@@ -382,7 +382,7 @@ 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 surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var Icon = icon;
     return (React__default.createElement("span", __assign({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
             _b["arc-Icon"] = true,
@@ -402,7 +402,7 @@ var Icon = function (_a) {
 var Heading = function (_a) {
     var _b;
     var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, children = _a.children, _e = _a.color, color = _e === void 0 ? "auto" : _e, level = _a.level, size = _a.size, id = _a.id, props = __rest(_a, ["align", "casing", "children", "color", "level", "size", "id"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var Element = "span";
     if (level) {
         Element = "h".concat(level);
@@ -429,7 +429,7 @@ Heading.Proposition = HeadingProposition;
 var Text = function (_a) {
     var _b;
     var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, id = _a.id, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = __rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     return (React__default.createElement("span", __assign({ id: id, className: classNames((_b = {
                 "arc-Text": true
             },
@@ -557,7 +557,7 @@ const BtIconTick = (props) =>
 var Alert = function (_a) {
     var _b;
     var heading = _a.heading, description = _a.description, link = _a.link, linkText = _a.linkText, linkAriaLabel = _a.linkAriaLabel, type = _a.type, _c = _a.status, status = _c === void 0 ? "general" : _c, isDismissable = _a.isDismissable, headingLevel = _a.headingLevel, onDismiss = _a.onDismiss, onLinkClick = _a.onLinkClick, icon = _a.icon, props = __rest(_a, ["heading", "description", "link", "linkText", "linkAriaLabel", "type", "status", "isDismissable", "headingLevel", "onDismiss", "onLinkClick", "icon"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var _d = useState(false), isDismissed = _d[0], setIsDismissed = _d[1];
     var onDismissHandler = function () {
         setIsDismissed(true);
@@ -599,7 +599,7 @@ var Alert = function (_a) {
 var Badge = function (_a) {
     var _b, _c;
     var children = _a.children, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.fill, fill = _f === void 0 ? "solid" : _f, ariaLabel = _a.ariaLabel, ariaRole = _a.ariaRole, props = __rest(_a, ["children", "state", "size", "fill", "ariaLabel", "ariaRole"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     return (React__default.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Badge": true,
                 "arc-Badge--onDarkSurface": surface === "dark",
@@ -650,7 +650,7 @@ var Box = function (_a) {
 var BrandLogo = function (_a) {
     var _b;
     var _c = _a.color, color = _c === void 0 ? "auto" : _c, label = _a.label, _d = _a.size, size = _d === void 0 ? 34 : _d, subBrand = _a.subBrand, props = __rest(_a, ["color", "label", "size", "subBrand"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     return (React__default.createElement("div", __assign({ className: classNames((_b = {
                 "arc-BrandLogo": true,
                 "arc-BrandLogo--colorBrand": color === "brand",
@@ -1380,7 +1380,7 @@ const BtIconChevronRightMid = (props) =>
 var Button = forwardRef(function (_a, ref) {
     var _b;
     var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, _h = _a.size, size = _h === void 0 ? "m" : _h, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var buttonClasses = classNames((_b = {
             "arc-Button": true,
             "arc-Button--displayBlock": isDisplayBlock
@@ -1572,7 +1572,7 @@ var useNumericInput = function (props) {
 var Card = function (_a) {
     var _b;
     var actionId = _a.actionId, _c = _a.actionLabel, actionLabel = _c === void 0 ? "Read more" : _c, children = _a.children, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, href = _a.href, imageAlt = _a.imageAlt, imageHeight = _a.imageHeight, imageLoading = _a.imageLoading, imageSrc = _a.imageSrc, imageSrcSet = _a.imageSrcSet, linkData = _a.linkData, minHeight = _a.minHeight, onClick = _a.onClick, target = _a.target, title = _a.title, _e = _a.titleSize, titleSize = _e === void 0 ? "s" : _e, props = __rest(_a, ["actionId", "actionLabel", "children", "fill", "href", "imageAlt", "imageHeight", "imageLoading", "imageSrc", "imageSrcSet", "linkData", "minHeight", "onClick", "target", "title", "titleSize"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var interactionMode = useInteractionMode().interactionMode;
     var Wrapper = function (_a) {
         var children = _a.children;
@@ -1629,7 +1629,7 @@ Card.Image = CardImage;
  */
 var CardLink = function (_a) {
     var actionId = _a.actionId, isButton = _a.isButton, children = _a.children, fill = _a.fill, href = _a.href, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, onClick = _a.onClick, stretch = _a.stretch, target = _a.target;
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     return (React__default.createElement("a", __assign({ onClick: handleLinkClick({ handler: onClick }), "aria-describedby": actionId, className: classNames({
             "arc-Card-link": true,
             "arc-Card-link--button": isButton,
@@ -1681,7 +1681,7 @@ const BtIconChevronDown2Px = (props) =>
  */
 var DisclosureMini = function (_a) {
     var children = _a.children, summary = _a.summary, onClick = _a.onClick, id = _a.id, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? "left" : _c, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "summary", "onClick", "id", "isOpen", "iconPosition", "size"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var _e = useState(false), disclousreState = _e[0], setDisclosureState = _e[1];
     var handleOnClick = function () {
         onClick && onClick();
@@ -1705,23 +1705,31 @@ var DisclosureMini = function (_a) {
                 React__default.createElement("span", { id: id }, children)))));
 };
 
-var defaultContext$2 = {
+/**
+ * Provides text for screen readers that is visually hidden.
+ */
+var VisuallyHidden = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("span", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
+};
+
+var defaultContext$4 = {
     requirementStatus: null
 };
-var Context$2 = createContext(defaultContext$2);
-var Provider$3 = Context$2.Provider;
+var Context$4 = createContext(defaultContext$4);
+var Provider$5 = Context$4.Provider;
 /**
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
-    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
-    var surface = useContext(Context$3).surface;
-    var _f = useAriaDescribedby({
+    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, _f = _a.hideLabel, hideLabel = _f === void 0 ? false : _f, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var surface = useContext(Context$5).surface;
+    var _g = useAriaDescribedby({
         disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
         id: htmlFor || id
-    }), ariaDescribedby = _f.ariaDescribedby, idError = _f.idError, idHelper = _f.idHelper, idDisclosure = _f.idDisclosure;
+    }), ariaDescribedby = _g.ariaDescribedby, idError = _g.idError, idHelper = _g.idHelper, idDisclosure = _g.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -1739,16 +1747,18 @@ var FormControl = function (_a) {
     }
     var hasInfo = !helperUnderLabel &&
         Boolean(errorMessage || disclosureTitle || helper || supplementaryInfo);
-    return (React__default.createElement(Provider$3, { value: { requirementStatus: requirementStatus } },
+    return (React__default.createElement(Provider$5, { value: { requirementStatus: requirementStatus } },
         React__default.createElement(ElementType, __assign({ className: classNames({
                 "arc-FormControl": true,
                 "arc-FormControl--isDisabled": isDisabled,
                 "arc-FormControl--smallLabel": labelSize === "s",
                 "arc-FormControl--onDarkSurface": surface === "dark"
             }), id: id }, elementProps, filterDataAttrs(props)),
-            React__default.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
+            React__default.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps), hideLabel === true ? (React__default.createElement(VisuallyHidden, null,
+                label,
+                requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")))) : (React__default.createElement(React__default.Fragment, null,
                 label,
-                requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+                requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))))),
             helperUnderLabel && (React__default.createElement(React__default.Fragment, null, helper && (React__default.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)))),
             children,
             React__default.createElement("div", { className: classNames("arc-FormControl-info", {
@@ -1767,8 +1777,8 @@ var FormControl = function (_a) {
  */
 var Checkbox = forwardRef(function (_a, ref) {
     var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _e = _a.size, size = _e === void 0 ? "l" : _e, value = _a.value, _f = _a.checkboxAlignment, checkboxAlignment = _f === void 0 ? "center" : _f, props = __rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment"]);
-    var requirementStatus = useContext(Context$2).requirementStatus;
-    var surface = useContext(Context$3).surface;
+    var requirementStatus = useContext(Context$4).requirementStatus;
+    var surface = useContext(Context$5).surface;
     var _g = useAriaDescribedby({
         id: id,
         errorMessage: errorMessage
@@ -1910,7 +1920,7 @@ var Curve = function (_a) {
  */
 var Disclosure = function (_a) {
     var children = _a.children, headingLevel = _a.headingLevel, _b = _a.indentDetails, indentDetails = _b === void 0 ? false : _b, _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, summary = _a.summary, props = __rest(_a, ["children", "headingLevel", "indentDetails", "isOpen", "summary"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     return (React__default.createElement("details", __assign({ className: classNames({
             "arc-Disclosure": true,
             "arc-Disclosure--indentDetails": indentDetails,
@@ -1939,7 +1949,7 @@ var Elevation = function (_a) {
 
 var FilterControl = function (_a) {
     var children = _a.children, onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b;
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var _c = useState(isSelected), selected = _c[0], setSelected = _c[1];
     var onClickHandler = function () {
         onClick && onClick();
@@ -2048,7 +2058,7 @@ Filter.Item = FilterItem;
 var Group = function (_a) {
     var _b;
     var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.growEqual, growEqual = _d === void 0 ? false : _d, _e = _a.gutterBorder, gutterBorder = _e === void 0 ? false : _e, _f = _a.noWrap, noWrap = _f === void 0 ? false : _f, props = __rest(_a, ["children", "grow", "growEqual", "gutterBorder", "noWrap"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item && item.type !== Group.Item) {
@@ -2149,7 +2159,7 @@ const BtIconCrossFill = (props) =>
  */
 var Tag = function (_a) {
     var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var _b = useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
     var onRemoveHandler = function () {
         setIsRemoved(function (p) { return !p; });
@@ -2195,59 +2205,23 @@ var VerticalSpace = function (_a) {
             _b)) }, filterDataAttrs(props))));
 };
 
-var InformationCard = function (_a) {
-    var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "headingLevel"]);
-    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcBreakpointS, "px)"));
-    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
-    var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
-    var assetSpacing = isMinWidthArcBreakpointM ? "24" : "20";
-    var containerSpacing = isMinWidthArcBreakpointS ? "32" : "24";
+var CardHeading = function (_a) {
+    var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "s" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.linkData, linkData = _d === void 0 ? {} : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e;
     var HeadingElement = "h".concat(headingLevel);
-    return (React__default.createElement("div", __assign({ className: classNames("arc-InformationCard", {
-            "arc-InformationCard--interactive": cardUrl
-        }) }, filterDataAttrs(props)),
-        React__default.createElement(Surface, { growVertically: true, padding: containerSpacing, background: "white" },
-            React__default.createElement("div", null,
-                image && (React__default.createElement("div", { className: "arc-InformationCard-img" },
-                    React__default.createElement(Image, __assign({}, image)),
-                    React__default.createElement(VerticalSpace, { size: assetSpacing }))),
-                icon && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Icon, { testId: "information-card-icon", icon: icon, size: 96 }),
-                    React__default.createElement(VerticalSpace, { size: assetSpacing }))),
-                label && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("span", { className: "arc-InformationCard-label" }, label),
-                    React__default.createElement(VerticalSpace, { size: headingSpacing }))),
-                React__default.createElement(HeadingElement, { className: "arc-InformationCard-heading" }, cardUrl ? (React__default.createElement("a", { className: "arc-InformationCard-headingLink", href: cardUrl, onClick: onClick }, heading)) : (heading))),
-            React__default.createElement("div", { className: "arc-InformationCard-contentContainer" },
-                text && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(VerticalSpace, { size: headingSpacing }),
-                    React__default.createElement(Text, null, text),
-                    (button || tags || footerLogo) && React__default.createElement(VerticalSpace, { size: "24" }))),
-                tags && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("div", { className: "arc-InformationCard-tagContainer" }, tags.map(function (_a, i) {
-                        var text = _a.text, tagProps = __rest(_a, ["text"]);
-                        return (React__default.createElement("div", { className: "arc-InformationCard-tag", key: "information-card-tag-".concat(i) },
-                            React__default.createElement(Tag, __assign({}, tagProps), text)));
-                    })),
-                    (button || footerLogo) && React__default.createElement(VerticalSpace, { size: "24" })))),
-            React__default.createElement("div", { className: "arc-InformationCard-footer" },
-                button && !cardUrl && (React__default.createElement("div", { className: "arc-InformationCard-footerButtonContainer" },
-                    React__default.createElement(Button, __assign({}, button, { iconPosition: "beforeText", fill: "flat", icon: BtIconArrowRight })))),
-                footerLogo && (React__default.createElement("div", { className: "arc-InformationCard-footerLogoContainer" },
-                    React__default.createElement(Image, __assign({}, footerLogo))))))));
+    return (React__default.createElement(HeadingElement, { className: classNames("arc-CardHeading", "arc-CardHeading--".concat(size), {
+            "arc-CardHeading--darkPathway": isDarkPathway
+        }) }, href ? (React__default.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterDataAttrs(linkData)), heading)) : (heading)));
 };
 
-/**
- * Use `Markup` to display HTML-formatted text.
- */
-var Markup = function (_a) {
-    var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isMeasured"]);
-    var surface = useContext(Context$3).surface;
-    return (React__default.createElement("div", __assign({ className: classNames({
-            "arc-Markup": true,
-            "arc-Markup--measured": isMeasured,
-            "arc-Markup--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs(props)), children));
+var CardLabel = function (_a) {
+    var _b;
+    var text = _a.text, _c = _a.color, color = _c === void 0 ? "muted" : _c, _d = _a.isBold, isBold = _d === void 0 ? true : _d, _e = _a.isDarkPathway, isDarkPathway = _e === void 0 ? false : _e;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("span", { className: classNames("arc-CardLabel", (_b = {},
+                _b[suffixModifier("arc-CardLabel--color", color)] = !isDarkPathway,
+                _b["arc-CardLabel--bold"] = isBold,
+                _b["arc-CardLabel--darkPathway"] = isDarkPathway,
+                _b)) }, text)));
 };
 
 const BtIconPlay = (props) =>
@@ -2309,31 +2283,103 @@ const BtIconPlayFill = (props) =>
     }),
   );
 
+var CardFooter = function (_a) {
+    var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.showButton, showButton = _d === void 0 ? true : _d, _e = _a.showFilledIcon, showFilledIcon = _e === void 0 ? false : _e;
+    var icons = {
+        arrow: {
+            regular: BtIconArrowRight,
+            filled: BtIconArrowRightFill
+        },
+        play: {
+            regular: BtIconPlay,
+            filled: BtIconPlayFill
+        }
+    };
+    return (React__default.createElement("div", { className: classNames("arc-CardFooter", {
+            "arc-CardFooter--darkPathway": isDarkPathway,
+            "arc-CardFooter--showFilledIcon": showFilledIcon
+        }) },
+        React__default.createElement("div", { className: "arc-CardFooter-metaTextContainer" }, metaText && (React__default.createElement("span", { className: "arc-CardFooter-metaText" }, metaText))),
+        showButton && (React__default.createElement("div", null,
+            React__default.createElement("div", { className: "arc-CardFooter-button" },
+                React__default.createElement("div", { className: classNames("arc-CardFooter-buttonIcon", "arc-CardFooter-buttonIcon--regular") },
+                    React__default.createElement(Icon, { icon: icons[buttonIcon].regular, size: 40 })),
+                React__default.createElement("div", { className: "arc-CardFooter-buttonIcon arc-CardFooter-buttonIcon--filled" },
+                    React__default.createElement(Icon, { icon: icons[buttonIcon].filled, size: 40 })))))));
+};
+
 var ConditionalWrapper = function (_a) {
     var condition = _a.condition, wrapper = _a.wrapper, children = _a.children;
     return (React__default.createElement(React__default.Fragment, null, condition ? wrapper(children) : children));
 };
 
+var InformationCard = function (_a) {
+    var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "headingLevel"]);
+    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcBreakpointS, "px)"));
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
+    var _c = useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
+    var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
+    var assetSpacing = isMinWidthArcBreakpointM ? "24" : "20";
+    var containerSpacing = isMinWidthArcBreakpointS ? "32" : "24";
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    return (React__default.createElement("div", __assign({ className: classNames("arc-InformationCard", {
+            "arc-InformationCard--outlined": cardUrl && showHoverState
+        }) }, filterDataAttrs(props)),
+        React__default.createElement(Surface, { growVertically: true, padding: containerSpacing, background: "white" },
+            React__default.createElement("div", null,
+                image && (React__default.createElement("div", { className: "arc-InformationCard-img" },
+                    React__default.createElement(Image, __assign({}, image)),
+                    React__default.createElement(VerticalSpace, { size: assetSpacing }))),
+                icon && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Icon, { testId: "information-card-icon", icon: icon, size: 96 }),
+                    React__default.createElement(VerticalSpace, { size: assetSpacing }))),
+                label && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(CardLabel, { color: "supporting", text: label }),
+                    React__default.createElement(VerticalSpace, { size: headingSpacing }))),
+                React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
+            React__default.createElement("div", { className: "arc-InformationCard-contentContainer" },
+                text && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(VerticalSpace, { size: headingSpacing }),
+                    React__default.createElement(Text, null, text),
+                    (button || tags || footerLogo) && React__default.createElement(VerticalSpace, { size: "24" }))),
+                tags && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("div", { className: "arc-InformationCard-tagContainer" }, tags.map(function (_a, i) {
+                        var text = _a.text, tagProps = __rest(_a, ["text"]);
+                        return (React__default.createElement("div", { className: "arc-InformationCard-tag", key: "information-card-tag-".concat(i) },
+                            React__default.createElement(Tag, __assign({}, tagProps), text)));
+                    })),
+                    (button || footerLogo) && React__default.createElement(VerticalSpace, { size: "24" })))),
+            React__default.createElement("div", { className: "arc-InformationCard-footer" },
+                button && !cardUrl && (React__default.createElement("div", { className: "arc-InformationCard-footerButtonContainer" },
+                    React__default.createElement(Button, __assign({}, button, { iconPosition: "beforeText", fill: "flat", icon: BtIconArrowRight })))),
+                footerLogo && (React__default.createElement("div", { className: "arc-InformationCard-footerLogoContainer" },
+                    React__default.createElement(Image, __assign({}, footerLogo))))))));
+};
+
+/**
+ * Use `Markup` to display HTML-formatted text.
+ */
+var Markup = function (_a) {
+    var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isMeasured"]);
+    var surface = useContext(Context$5).surface;
+    return (React__default.createElement("div", __assign({ className: classNames({
+            "arc-Markup": true,
+            "arc-Markup--measured": isMeasured,
+            "arc-Markup--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props)), children));
+};
+
 /**
  * Use `MediaCard` to contain content and an image about a single subject.
  */
 var MediaCard = function (_a) {
     var img = _a.img, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, text = _a.text, metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isContained, isContained = _c === void 0 ? true : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, props = __rest(_a, ["img", "url", "onClick", "heading", "label", "text", "metaText", "buttonIcon", "isContained", "headingLevel"]);
+    var _e = useState(false), showHoverState = _e[0], setShowHoverState = _e[1];
     var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcBreakpointS, "px)"));
     var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
-    var HeadingElement = "h".concat(headingLevel);
-    var icons = {
-        arrow: {
-            regular: BtIconArrowRight,
-            hover: BtIconArrowRightFill
-        },
-        play: {
-            regular: BtIconPlay,
-            hover: BtIconPlayFill
-        }
-    };
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     return (React__default.createElement("div", __assign({ className: classNames("arc-MediaCard", {
-            "arc-MediaCard--interactive": url,
+            "arc-MediaCard--outlined": url && isContained && showHoverState,
             "arc-MediaCard--contained": isContained
         }) }, filterDataAttrs(props)),
         React__default.createElement(ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React__default.createElement(Surface, { growVertically: true, background: "white" }, children)); } },
@@ -2341,21 +2387,14 @@ var MediaCard = function (_a) {
                 React__default.createElement(Image, __assign({}, img))),
             React__default.createElement("div", { className: "arc-MediaCard-content" },
                 label && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("span", { className: "arc-MediaCard-label" }, label),
+                    React__default.createElement(CardLabel, { text: label }),
                     React__default.createElement(VerticalSpace, { size: headingSpacing }))),
-                React__default.createElement(HeadingElement, { className: "arc-MediaCard-heading" }, url ? (React__default.createElement("a", { className: "arc-MediaCard-headingLink", href: url, onClick: onClick }, heading)) : (heading)),
+                React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
                 React__default.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(VerticalSpace, { size: headingSpacing }),
                     React__default.createElement(Text, null, text),
                     (url || metaText) && React__default.createElement(VerticalSpace, { size: "24" })))),
-                React__default.createElement("div", { className: "arc-MediaCard-footer" },
-                    React__default.createElement("div", { className: "arc-MediaCard-metaTextContainer" }, metaText && (React__default.createElement("span", { className: "arc-MediaCard-metaText" }, metaText))),
-                    url && (React__default.createElement("div", null,
-                        React__default.createElement("div", { className: "arc-MediaCard-footerButton" },
-                            React__default.createElement("div", { className: classNames("arc-MediaCard-footerButtonIcon", "arc-MediaCard-footerButtonIcon--regular") },
-                                React__default.createElement(Icon, { icon: icons[buttonIcon].regular, size: 40 })),
-                            React__default.createElement("div", { className: "arc-MediaCard-footerButtonIcon arc-MediaCard-footerButtonIcon--hover" },
-                                React__default.createElement(Icon, { icon: icons[buttonIcon].hover, size: 40 }))))))))));
+                React__default.createElement(CardFooter, { showFilledIcon: showHoverState, buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) })))));
 };
 
 function _extends() {
@@ -33728,25 +33767,6 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22$1 = /*#__PURE__*/ forwardRef((pr
         onPointerDownCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
     }));
 });
-const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
-    const context = useContext($5cb92bef7577960e$var$DismissableLayerContext$1);
-    const ref = useRef(null);
-    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, ref);
-    useEffect(()=>{
-        const node = ref.current;
-        if (node) {
-            context.branches.add(node);
-            return ()=>{
-                context.branches.delete(node);
-            };
-        }
-    }, [
-        context.branches
-    ]);
-    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$1.div, _extends({}, props, {
-        ref: composedRefs
-    }));
-});
 /* -----------------------------------------------------------------------------------------------*/ /**
  * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
  * to mimic layer dismissing behaviour present in OS.
@@ -33784,7 +33804,9 @@ const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ forwardRef((prop
                         once: true
                     });
                 } else handleAndDispatchPointerDownOutsideEvent();
-            }
+            } else // We need to remove the event listener in case the outside click has been canceled.
+            // See: https://github.com/radix-ui/primitives/issues/2171
+            ownerDocument.removeEventListener('click', handleClickRef.current);
             isPointerInsideReactTreeRef.current = false;
         };
         /**
@@ -33863,16 +33885,14 @@ function $5cb92bef7577960e$var$handleAndDispatchCustomEvent$1(name, handler, det
     if (discrete) $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event);
     else target.dispatchEvent(event);
 }
-const $5cb92bef7577960e$export$be92b6f5f03c0fe9 = $5cb92bef7577960e$export$177fb62ff3ec1f22$1;
-const $5cb92bef7577960e$export$aecb2ddcb55c95be = $5cb92bef7577960e$export$4d5eb2109db14228;
 
-const $d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT$1 = 'focusScope.autoFocusOnMount';
-const $d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT$1 = 'focusScope.autoFocusOnUnmount';
-const $d3863c46a17e8a28$var$EVENT_OPTIONS$1 = {
+const $d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
+const $d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
+const $d3863c46a17e8a28$var$EVENT_OPTIONS = {
     bubbles: false,
     cancelable: true
 };
-const $d3863c46a17e8a28$export$20e40289641fbbb6$1 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { loop: loop = false , trapped: trapped = false , onMountAutoFocus: onMountAutoFocusProp , onUnmountAutoFocus: onUnmountAutoFocusProp , ...scopeProps } = props;
     const [container1, setContainer] = useState(null);
     const onMountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onMountAutoFocusProp);
@@ -33895,7 +33915,7 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6$1 = /*#__PURE__*/ forwardRef((pr
                 if (focusScope.paused || !container1) return;
                 const target = event.target;
                 if (container1.contains(target)) lastFocusedElementRef.current = target;
-                else $d3863c46a17e8a28$var$focus$1(lastFocusedElementRef.current, {
+                else $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
                     select: true
                 });
             }
@@ -33913,7 +33933,7 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6$1 = /*#__PURE__*/ forwardRef((pr
                 //    throws the CPU to 100%, so we avoid doing anything for this reason here too.
                 if (relatedTarget === null) return; // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)
                 // that is outside the container, we move focus to the last valid focused element inside.
-                if (!container1.contains(relatedTarget)) $d3863c46a17e8a28$var$focus$1(lastFocusedElementRef.current, {
+                if (!container1.contains(relatedTarget)) $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
                     select: true
                 });
             } // When the focused element gets removed from the DOM, browsers move focus
@@ -33921,11 +33941,8 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6$1 = /*#__PURE__*/ forwardRef((pr
             // to keep focus trapped correctly.
             function handleMutations(mutations) {
                 const focusedElement = document.activeElement;
-                for (const mutation of mutations){
-                    if (mutation.removedNodes.length > 0) {
-                        if (!(container1 !== null && container1 !== void 0 && container1.contains(focusedElement))) $d3863c46a17e8a28$var$focus$1(container1);
-                    }
-                }
+                if (focusedElement !== document.body) return;
+                for (const mutation of mutations)if (mutation.removedNodes.length > 0) $d3863c46a17e8a28$var$focus(container1);
             }
             document.addEventListener('focusin', handleFocusIn);
             document.addEventListener('focusout', handleFocusOut);
@@ -33947,34 +33964,34 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6$1 = /*#__PURE__*/ forwardRef((pr
     ]);
     useEffect(()=>{
         if (container1) {
-            $d3863c46a17e8a28$var$focusScopesStack$1.add(focusScope);
+            $d3863c46a17e8a28$var$focusScopesStack.add(focusScope);
             const previouslyFocusedElement = document.activeElement;
             const hasFocusedCandidate = container1.contains(previouslyFocusedElement);
             if (!hasFocusedCandidate) {
-                const mountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT$1, $d3863c46a17e8a28$var$EVENT_OPTIONS$1);
-                container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT$1, onMountAutoFocus);
+                const mountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
+                container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
                 container1.dispatchEvent(mountEvent);
                 if (!mountEvent.defaultPrevented) {
-                    $d3863c46a17e8a28$var$focusFirst$1($d3863c46a17e8a28$var$removeLinks$1($d3863c46a17e8a28$var$getTabbableCandidates$1(container1)), {
+                    $d3863c46a17e8a28$var$focusFirst($d3863c46a17e8a28$var$removeLinks($d3863c46a17e8a28$var$getTabbableCandidates(container1)), {
                         select: true
                     });
-                    if (document.activeElement === previouslyFocusedElement) $d3863c46a17e8a28$var$focus$1(container1);
+                    if (document.activeElement === previouslyFocusedElement) $d3863c46a17e8a28$var$focus(container1);
                 }
             }
             return ()=>{
-                container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT$1, onMountAutoFocus); // We hit a react bug (fixed in v17) with focusing in unmount.
+                container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus); // We hit a react bug (fixed in v17) with focusing in unmount.
                 // We need to delay the focus a little to get around it for now.
                 // See: https://github.com/facebook/react/issues/17894
                 setTimeout(()=>{
-                    const unmountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT$1, $d3863c46a17e8a28$var$EVENT_OPTIONS$1);
-                    container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT$1, onUnmountAutoFocus);
+                    const unmountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
+                    container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
                     container1.dispatchEvent(unmountEvent);
-                    if (!unmountEvent.defaultPrevented) $d3863c46a17e8a28$var$focus$1(previouslyFocusedElement !== null && previouslyFocusedElement !== void 0 ? previouslyFocusedElement : document.body, {
+                    if (!unmountEvent.defaultPrevented) $d3863c46a17e8a28$var$focus(previouslyFocusedElement !== null && previouslyFocusedElement !== void 0 ? previouslyFocusedElement : document.body, {
                         select: true
                     });
                      // we need to remove the listener after we `dispatchEvent`
-                    container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT$1, onUnmountAutoFocus);
-                    $d3863c46a17e8a28$var$focusScopesStack$1.remove(focusScope);
+                    container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
+                    $d3863c46a17e8a28$var$focusScopesStack.remove(focusScope);
                 }, 0);
             };
         }
@@ -33991,19 +34008,19 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6$1 = /*#__PURE__*/ forwardRef((pr
         const focusedElement = document.activeElement;
         if (isTabKey && focusedElement) {
             const container = event.currentTarget;
-            const [first, last] = $d3863c46a17e8a28$var$getTabbableEdges$1(container);
+            const [first, last] = $d3863c46a17e8a28$var$getTabbableEdges(container);
             const hasTabbableElementsInside = first && last; // we can only wrap focus if we have tabbable edges
             if (!hasTabbableElementsInside) {
                 if (focusedElement === container) event.preventDefault();
             } else {
                 if (!event.shiftKey && focusedElement === last) {
                     event.preventDefault();
-                    if (loop) $d3863c46a17e8a28$var$focus$1(first, {
+                    if (loop) $d3863c46a17e8a28$var$focus(first, {
                         select: true
                     });
                 } else if (event.shiftKey && focusedElement === first) {
                     event.preventDefault();
-                    if (loop) $d3863c46a17e8a28$var$focus$1(last, {
+                    if (loop) $d3863c46a17e8a28$var$focus(last, {
                         select: true
                     });
                 }
@@ -34026,10 +34043,10 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6$1 = /*#__PURE__*/ forwardRef((pr
  * -----------------------------------------------------------------------------------------------*/ /**
  * Attempts focusing the first element in a list of candidates.
  * Stops when focus has actually moved.
- */ function $d3863c46a17e8a28$var$focusFirst$1(candidates, { select: select = false  } = {}) {
+ */ function $d3863c46a17e8a28$var$focusFirst(candidates, { select: select = false  } = {}) {
     const previouslyFocusedElement = document.activeElement;
     for (const candidate of candidates){
-        $d3863c46a17e8a28$var$focus$1(candidate, {
+        $d3863c46a17e8a28$var$focus(candidate, {
             select: select
         });
         if (document.activeElement !== previouslyFocusedElement) return;
@@ -34037,10 +34054,10 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6$1 = /*#__PURE__*/ forwardRef((pr
 }
 /**
  * Returns the first and last tabbable elements inside a container.
- */ function $d3863c46a17e8a28$var$getTabbableEdges$1(container) {
-    const candidates = $d3863c46a17e8a28$var$getTabbableCandidates$1(container);
-    const first = $d3863c46a17e8a28$var$findVisible$1(candidates, container);
-    const last = $d3863c46a17e8a28$var$findVisible$1(candidates.reverse(), container);
+ */ function $d3863c46a17e8a28$var$getTabbableEdges(container) {
+    const candidates = $d3863c46a17e8a28$var$getTabbableCandidates(container);
+    const first = $d3863c46a17e8a28$var$findVisible(candidates, container);
+    const last = $d3863c46a17e8a28$var$findVisible(candidates.reverse(), container);
     return [
         first,
         last
@@ -34055,7 +34072,7 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6$1 = /*#__PURE__*/ forwardRef((pr
  *
  * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
  * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
- */ function $d3863c46a17e8a28$var$getTabbableCandidates$1(container) {
+ */ function $d3863c46a17e8a28$var$getTabbableCandidates(container) {
     const nodes = [];
     const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
         acceptNode: (node)=>{
@@ -34073,15 +34090,15 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6$1 = /*#__PURE__*/ forwardRef((pr
 /**
  * Returns the first visible element in a list.
  * NOTE: Only checks visibility up to the `container`.
- */ function $d3863c46a17e8a28$var$findVisible$1(elements, container) {
+ */ function $d3863c46a17e8a28$var$findVisible(elements, container) {
     for (const element of elements){
         // we stop checking if it's hidden at the `container` level (excluding)
-        if (!$d3863c46a17e8a28$var$isHidden$1(element, {
+        if (!$d3863c46a17e8a28$var$isHidden(element, {
             upTo: container
         })) return element;
     }
 }
-function $d3863c46a17e8a28$var$isHidden$1(node, { upTo: upTo  }) {
+function $d3863c46a17e8a28$var$isHidden(node, { upTo: upTo  }) {
     if (getComputedStyle(node).visibility === 'hidden') return true;
     while(node){
         // we stop at `upTo` (excluding it)
@@ -34091,23 +34108,23 @@ function $d3863c46a17e8a28$var$isHidden$1(node, { upTo: upTo  }) {
     }
     return false;
 }
-function $d3863c46a17e8a28$var$isSelectableInput$1(element) {
+function $d3863c46a17e8a28$var$isSelectableInput(element) {
     return element instanceof HTMLInputElement && 'select' in element;
 }
-function $d3863c46a17e8a28$var$focus$1(element, { select: select = false  } = {}) {
+function $d3863c46a17e8a28$var$focus(element, { select: select = false  } = {}) {
     // only focus if that element is focusable
     if (element && element.focus) {
         const previouslyFocusedElement = document.activeElement; // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users
         element.focus({
             preventScroll: true
         }); // only select if its not the same element, it supports selection and we need to select
-        if (element !== previouslyFocusedElement && $d3863c46a17e8a28$var$isSelectableInput$1(element) && select) element.select();
+        if (element !== previouslyFocusedElement && $d3863c46a17e8a28$var$isSelectableInput(element) && select) element.select();
     }
 }
 /* -------------------------------------------------------------------------------------------------
  * FocusScope stack
- * -----------------------------------------------------------------------------------------------*/ const $d3863c46a17e8a28$var$focusScopesStack$1 = $d3863c46a17e8a28$var$createFocusScopesStack$1();
-function $d3863c46a17e8a28$var$createFocusScopesStack$1() {
+ * -----------------------------------------------------------------------------------------------*/ const $d3863c46a17e8a28$var$focusScopesStack = $d3863c46a17e8a28$var$createFocusScopesStack();
+function $d3863c46a17e8a28$var$createFocusScopesStack() {
     /** A stack of focus scopes, with the active one at the top */ let stack = [];
     return {
         add (focusScope) {
@@ -34115,17 +34132,17 @@ function $d3863c46a17e8a28$var$createFocusScopesStack$1() {
             const activeFocusScope = stack[0];
             if (focusScope !== activeFocusScope) activeFocusScope === null || activeFocusScope === void 0 || activeFocusScope.pause();
              // remove in case it already exists (because we'll re-add it at the top of the stack)
-            stack = $d3863c46a17e8a28$var$arrayRemove$1(stack, focusScope);
+            stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
             stack.unshift(focusScope);
         },
         remove (focusScope) {
             var _stack$;
-            stack = $d3863c46a17e8a28$var$arrayRemove$1(stack, focusScope);
+            stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
             (_stack$ = stack[0]) === null || _stack$ === void 0 || _stack$.resume();
         }
     };
 }
-function $d3863c46a17e8a28$var$arrayRemove$1(array, item) {
+function $d3863c46a17e8a28$var$arrayRemove(array, item) {
     const updatedArray = [
         ...array
     ];
@@ -34133,7 +34150,7 @@ function $d3863c46a17e8a28$var$arrayRemove$1(array, item) {
     if (index !== -1) updatedArray.splice(index, 1);
     return updatedArray;
 }
-function $d3863c46a17e8a28$var$removeLinks$1(items) {
+function $d3863c46a17e8a28$var$removeLinks(items) {
     return items.filter((item)=>item.tagName !== 'A'
     );
 }
@@ -35231,7 +35248,7 @@ const $5d3850c4d0b4e6c7$export$b6d9565de1e068cf = /*#__PURE__*/ forwardRef((prop
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, contentRef); // Make sure the whole tree has focus guards as our `Dialog` will be
     // the last element in the DOM (beacuse of the `Portal`)
     $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c();
-    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement($d3863c46a17e8a28$export$20e40289641fbbb6$1, {
+    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement($d3863c46a17e8a28$export$20e40289641fbbb6, {
         asChild: true,
         loop: true,
         trapped: trapFocus,
@@ -35369,7 +35386,7 @@ var usePagination = function (pageCount, selectedPage) {
  */
 var Pagination = function (_a) {
     var pageCount = _a.pageCount, onPageChange = _a.onPageChange, _b = _a.defaultSelectedPage, defaultSelectedPage = _b === void 0 ? 1 : _b, props = __rest(_a, ["pageCount", "onPageChange", "defaultSelectedPage"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var _c = useState(defaultSelectedPage), selectedPage = _c[0], setSelectedPage = _c[1];
     var pageRange = usePagination(pageCount, selectedPage);
     var handlePagechange = function (pageToSelect) { return function () {
@@ -35402,7 +35419,7 @@ var Pagination = function (_a) {
  */
 var PaginationSimple = function (_a) {
     var hidePrev = _a.hidePrev, hideNext = _a.hideNext, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid, props = __rest(_a, ["hidePrev", "hideNext", "onPrevPage", "onNextPage", "isFluid"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     return (React__default.createElement("nav", __assign({ className: classNames("arc-PaginationSimple", {
             "arc-PaginationSimple--onDarkSurface": surface === "dark",
             "arc-PaginationSimple--fluid": isFluid,
@@ -35504,7 +35521,7 @@ var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
 
 var ProgressBar = function (_a) {
     var _b = _a.state, state = _b === void 0 ? "loading" : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, _d = _a.isIndeterminate, isIndeterminate = _d === void 0 ? false : _d, headline = _a.headline, ariaLabel = _a.ariaLabel, action = _a.action, title = _a.title, description = _a.description, displayValue = _a.displayValue, props = __rest(_a, ["state", "value", "isIndeterminate", "headline", "ariaLabel", "action", "title", "description", "displayValue"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var progressValue = Math.min(100, Math.max(0, value));
     return (React__default.createElement("div", __assign({ "data-testid": "progress", className: classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state), {
             "arc-ProgressBar--onDarkSurface": surface === "dark"
@@ -35583,18 +35600,10 @@ const BtIconCircle = (props) =>
     }),
   );
 
-/**
- * Provides text for screen readers that is visually hidden.
- */
-var VisuallyHidden = function (_a) {
-    var children = _a.children;
-    return (React__default.createElement("span", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
-};
-
 var ProgressStepperItem = function (_a) {
     var _b, _c, _d;
     var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _e = _a.direction, direction = _e === void 0 ? "horizontal" : _e, _f = _a.status, status = _f === void 0 ? "todo" : _f, _g = _a.size, size = _g === void 0 ? "large" : _g, _h = _a.position, position = _h === void 0 ? "middle" : _h, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, isExpandable = _a.isExpandable, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "position", "isFluid", "ariaLabel", "onClick", "previousStep", "isExpandable", "stepContent", "isStepContentHidden"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var statusIcons = {
         completed: BtIconTickVariant,
         current: BtIconCircle,
@@ -35664,7 +35673,7 @@ var ProgressStepper = function (_a) {
 ProgressStepper.Item = ProgressStepperItem;
 
 var RadioContext = createContext({});
-var Provider$2 = RadioContext.Provider;
+var Provider$4 = RadioContext.Provider;
 var useRadioContext = function () {
     var context = useContext(RadioContext);
     return context;
@@ -35676,7 +35685,7 @@ var useRadioContext = function () {
 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 surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var idLabel = "".concat(id, "-label");
     var checked = checkedValue === value ? true : false;
     return (React__default.createElement("div", __assign({ className: classNames({
@@ -35705,7 +35714,7 @@ var RadioGroup = function (_a) {
             }
         });
     }, [children]);
-    return (React__default.createElement(Provider$2, { value: {
+    return (React__default.createElement(Provider$4, { value: {
             blurEvent: onBlur,
             changeEvent: onChange,
             groupDisabled: isDisabled,
@@ -35723,7 +35732,7 @@ RadioGroup.RadioButton = RadioButton;
  * Use `Rule` to display a horizontal rule.
  */
 var Rule = function (props) {
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     return (React__default.createElement("hr", __assign({ className: classNames({
             "arc-Rule": true,
             "arc-Rule--onDarkSurface": surface === "dark"
@@ -35887,505 +35896,6 @@ const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ createContext(undef
     return localDir || globalDir || 'ltr';
 }
 
-const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
-const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
-const $5cb92bef7577960e$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
-let $5cb92bef7577960e$var$originalBodyPointerEvents;
-const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ createContext({
-    layers: new Set(),
-    layersWithOutsidePointerEventsDisabled: new Set(),
-    branches: new Set()
-});
-const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
-    var _node$ownerDocument;
-    const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
-    const context = useContext($5cb92bef7577960e$var$DismissableLayerContext);
-    const [node1, setNode] = useState(null);
-    const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
-    const [, force] = useState({});
-    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>setNode(node)
-    );
-    const layers = Array.from(context.layers);
-    const [highestLayerWithOutsidePointerEventsDisabled] = [
-        ...context.layersWithOutsidePointerEventsDisabled
-    ].slice(-1); // prettier-ignore
-    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore
-    const index = node1 ? layers.indexOf(node1) : -1;
-    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
-    const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
-    const pointerDownOutside = $5cb92bef7577960e$var$usePointerDownOutside((event)=>{
-        const target = event.target;
-        const isPointerDownOnBranch = [
-            ...context.branches
-        ].some((branch)=>branch.contains(target)
-        );
-        if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
-        onPointerDownOutside === null || onPointerDownOutside === void 0 || onPointerDownOutside(event);
-        onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
-        if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
-    }, ownerDocument);
-    const focusOutside = $5cb92bef7577960e$var$useFocusOutside((event)=>{
-        const target = event.target;
-        const isFocusInBranch = [
-            ...context.branches
-        ].some((branch)=>branch.contains(target)
-        );
-        if (isFocusInBranch) return;
-        onFocusOutside === null || onFocusOutside === void 0 || onFocusOutside(event);
-        onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
-        if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
-    }, ownerDocument);
-    $addc16e1bbe58fd0$export$3a72a57244d6e765((event)=>{
-        const isHighestLayer = index === context.layers.size - 1;
-        if (!isHighestLayer) return;
-        onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event);
-        if (!event.defaultPrevented && onDismiss) {
-            event.preventDefault();
-            onDismiss();
-        }
-    }, ownerDocument);
-    useEffect(()=>{
-        if (!node1) return;
-        if (disableOutsidePointerEvents) {
-            if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
-                $5cb92bef7577960e$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
-                ownerDocument.body.style.pointerEvents = 'none';
-            }
-            context.layersWithOutsidePointerEventsDisabled.add(node1);
-        }
-        context.layers.add(node1);
-        $5cb92bef7577960e$var$dispatchUpdate();
-        return ()=>{
-            if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $5cb92bef7577960e$var$originalBodyPointerEvents;
-        };
-    }, [
-        node1,
-        ownerDocument,
-        disableOutsidePointerEvents,
-        context
-    ]);
-    /**
-   * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
-   * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
-   * and add it to the end again so the layering order wouldn't be _creation order_.
-   * We only want them to be removed from context stacks when unmounted.
-   */ useEffect(()=>{
-        return ()=>{
-            if (!node1) return;
-            context.layers.delete(node1);
-            context.layersWithOutsidePointerEventsDisabled.delete(node1);
-            $5cb92bef7577960e$var$dispatchUpdate();
-        };
-    }, [
-        node1,
-        context
-    ]);
-    useEffect(()=>{
-        const handleUpdate = ()=>force({})
-        ;
-        document.addEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate);
-        return ()=>document.removeEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate)
-        ;
-    }, []);
-    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$1.div, _extends({}, layerProps, {
-        ref: composedRefs,
-        style: {
-            pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
-            ...props.style
-        },
-        onFocusCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(props.onFocusCapture, focusOutside.onFocusCapture),
-        onBlurCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(props.onBlurCapture, focusOutside.onBlurCapture),
-        onPointerDownCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
-    }));
-});
-/* -----------------------------------------------------------------------------------------------*/ /**
- * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
- * to mimic layer dismissing behaviour present in OS.
- * Returns props to pass to the node we want to check for outside events.
- */ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
-    const handlePointerDownOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onPointerDownOutside);
-    const isPointerInsideReactTreeRef = useRef(false);
-    const handleClickRef = useRef(()=>{});
-    useEffect(()=>{
-        const handlePointerDown = (event)=>{
-            if (event.target && !isPointerInsideReactTreeRef.current) {
-                const eventDetail = {
-                    originalEvent: event
-                };
-                function handleAndDispatchPointerDownOutsideEvent() {
-                    $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
-                        discrete: true
-                    });
-                }
-                /**
-         * On touch devices, we need to wait for a click event because browsers implement
-         * a ~350ms delay between the time the user stops touching the display and when the
-         * browser executres events. We need to ensure we don't reactivate pointer-events within
-         * this timeframe otherwise the browser may execute events that should have been prevented.
-         *
-         * Additionally, this also lets us deal automatically with cancellations when a click event
-         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
-         *
-         * This is why we also continuously remove the previous listener, because we cannot be
-         * certain that it was raised, and therefore cleaned-up.
-         */ if (event.pointerType === 'touch') {
-                    ownerDocument.removeEventListener('click', handleClickRef.current);
-                    handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
-                    ownerDocument.addEventListener('click', handleClickRef.current, {
-                        once: true
-                    });
-                } else handleAndDispatchPointerDownOutsideEvent();
-            } else // We need to remove the event listener in case the outside click has been canceled.
-            // See: https://github.com/radix-ui/primitives/issues/2171
-            ownerDocument.removeEventListener('click', handleClickRef.current);
-            isPointerInsideReactTreeRef.current = false;
-        };
-        /**
-     * if this hook executes in a component that mounts via a `pointerdown` event, the event
-     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
-     * this by delaying the event listener registration on the document.
-     * This is not React specific, but rather how the DOM works, ie:
-     * ```
-     * button.addEventListener('pointerdown', () => {
-     *   console.log('I will log');
-     *   document.addEventListener('pointerdown', () => {
-     *     console.log('I will also log');
-     *   })
-     * });
-     */ const timerId = window.setTimeout(()=>{
-            ownerDocument.addEventListener('pointerdown', handlePointerDown);
-        }, 0);
-        return ()=>{
-            window.clearTimeout(timerId);
-            ownerDocument.removeEventListener('pointerdown', handlePointerDown);
-            ownerDocument.removeEventListener('click', handleClickRef.current);
-        };
-    }, [
-        ownerDocument,
-        handlePointerDownOutside
-    ]);
-    return {
-        // ensures we check React component tree (not just DOM tree)
-        onPointerDownCapture: ()=>isPointerInsideReactTreeRef.current = true
-    };
-}
-/**
- * Listens for when focus happens outside a react subtree.
- * Returns props to pass to the root (node) of the subtree we want to check.
- */ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
-    const handleFocusOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onFocusOutside);
-    const isFocusInsideReactTreeRef = useRef(false);
-    useEffect(()=>{
-        const handleFocus = (event)=>{
-            if (event.target && !isFocusInsideReactTreeRef.current) {
-                const eventDetail = {
-                    originalEvent: event
-                };
-                $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
-                    discrete: false
-                });
-            }
-        };
-        ownerDocument.addEventListener('focusin', handleFocus);
-        return ()=>ownerDocument.removeEventListener('focusin', handleFocus)
-        ;
-    }, [
-        ownerDocument,
-        handleFocusOutside
-    ]);
-    return {
-        onFocusCapture: ()=>isFocusInsideReactTreeRef.current = true
-        ,
-        onBlurCapture: ()=>isFocusInsideReactTreeRef.current = false
-    };
-}
-function $5cb92bef7577960e$var$dispatchUpdate() {
-    const event = new CustomEvent($5cb92bef7577960e$var$CONTEXT_UPDATE);
-    document.dispatchEvent(event);
-}
-function $5cb92bef7577960e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete  }) {
-    const target = detail.originalEvent.target;
-    const event = new CustomEvent(name, {
-        bubbles: false,
-        cancelable: true,
-        detail: detail
-    });
-    if (handler) target.addEventListener(name, handler, {
-        once: true
-    });
-    if (discrete) $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event);
-    else target.dispatchEvent(event);
-}
-
-const $d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
-const $d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
-const $d3863c46a17e8a28$var$EVENT_OPTIONS = {
-    bubbles: false,
-    cancelable: true
-};
-const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
-    const { loop: loop = false , trapped: trapped = false , onMountAutoFocus: onMountAutoFocusProp , onUnmountAutoFocus: onUnmountAutoFocusProp , ...scopeProps } = props;
-    const [container1, setContainer] = useState(null);
-    const onMountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onMountAutoFocusProp);
-    const onUnmountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onUnmountAutoFocusProp);
-    const lastFocusedElementRef = useRef(null);
-    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>setContainer(node)
-    );
-    const focusScope = useRef({
-        paused: false,
-        pause () {
-            this.paused = true;
-        },
-        resume () {
-            this.paused = false;
-        }
-    }).current; // Takes care of trapping focus if focus is moved outside programmatically for example
-    useEffect(()=>{
-        if (trapped) {
-            function handleFocusIn(event) {
-                if (focusScope.paused || !container1) return;
-                const target = event.target;
-                if (container1.contains(target)) lastFocusedElementRef.current = target;
-                else $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
-                    select: true
-                });
-            }
-            function handleFocusOut(event) {
-                if (focusScope.paused || !container1) return;
-                const relatedTarget = event.relatedTarget; // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:
-                //
-                // 1. When the user switches app/tabs/windows/the browser itself loses focus.
-                // 2. In Google Chrome, when the focused element is removed from the DOM.
-                //
-                // We let the browser do its thing here because:
-                //
-                // 1. The browser already keeps a memory of what's focused for when the page gets refocused.
-                // 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it
-                //    throws the CPU to 100%, so we avoid doing anything for this reason here too.
-                if (relatedTarget === null) return; // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)
-                // that is outside the container, we move focus to the last valid focused element inside.
-                if (!container1.contains(relatedTarget)) $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
-                    select: true
-                });
-            } // When the focused element gets removed from the DOM, browsers move focus
-            // back to the document.body. In this case, we move focus to the container
-            // to keep focus trapped correctly.
-            function handleMutations(mutations) {
-                const focusedElement = document.activeElement;
-                if (focusedElement !== document.body) return;
-                for (const mutation of mutations)if (mutation.removedNodes.length > 0) $d3863c46a17e8a28$var$focus(container1);
-            }
-            document.addEventListener('focusin', handleFocusIn);
-            document.addEventListener('focusout', handleFocusOut);
-            const mutationObserver = new MutationObserver(handleMutations);
-            if (container1) mutationObserver.observe(container1, {
-                childList: true,
-                subtree: true
-            });
-            return ()=>{
-                document.removeEventListener('focusin', handleFocusIn);
-                document.removeEventListener('focusout', handleFocusOut);
-                mutationObserver.disconnect();
-            };
-        }
-    }, [
-        trapped,
-        container1,
-        focusScope.paused
-    ]);
-    useEffect(()=>{
-        if (container1) {
-            $d3863c46a17e8a28$var$focusScopesStack.add(focusScope);
-            const previouslyFocusedElement = document.activeElement;
-            const hasFocusedCandidate = container1.contains(previouslyFocusedElement);
-            if (!hasFocusedCandidate) {
-                const mountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
-                container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
-                container1.dispatchEvent(mountEvent);
-                if (!mountEvent.defaultPrevented) {
-                    $d3863c46a17e8a28$var$focusFirst($d3863c46a17e8a28$var$removeLinks($d3863c46a17e8a28$var$getTabbableCandidates(container1)), {
-                        select: true
-                    });
-                    if (document.activeElement === previouslyFocusedElement) $d3863c46a17e8a28$var$focus(container1);
-                }
-            }
-            return ()=>{
-                container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus); // We hit a react bug (fixed in v17) with focusing in unmount.
-                // We need to delay the focus a little to get around it for now.
-                // See: https://github.com/facebook/react/issues/17894
-                setTimeout(()=>{
-                    const unmountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
-                    container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
-                    container1.dispatchEvent(unmountEvent);
-                    if (!unmountEvent.defaultPrevented) $d3863c46a17e8a28$var$focus(previouslyFocusedElement !== null && previouslyFocusedElement !== void 0 ? previouslyFocusedElement : document.body, {
-                        select: true
-                    });
-                     // we need to remove the listener after we `dispatchEvent`
-                    container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
-                    $d3863c46a17e8a28$var$focusScopesStack.remove(focusScope);
-                }, 0);
-            };
-        }
-    }, [
-        container1,
-        onMountAutoFocus,
-        onUnmountAutoFocus,
-        focusScope
-    ]); // Takes care of looping focus (when tabbing whilst at the edges)
-    const handleKeyDown = useCallback((event)=>{
-        if (!loop && !trapped) return;
-        if (focusScope.paused) return;
-        const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
-        const focusedElement = document.activeElement;
-        if (isTabKey && focusedElement) {
-            const container = event.currentTarget;
-            const [first, last] = $d3863c46a17e8a28$var$getTabbableEdges(container);
-            const hasTabbableElementsInside = first && last; // we can only wrap focus if we have tabbable edges
-            if (!hasTabbableElementsInside) {
-                if (focusedElement === container) event.preventDefault();
-            } else {
-                if (!event.shiftKey && focusedElement === last) {
-                    event.preventDefault();
-                    if (loop) $d3863c46a17e8a28$var$focus(first, {
-                        select: true
-                    });
-                } else if (event.shiftKey && focusedElement === first) {
-                    event.preventDefault();
-                    if (loop) $d3863c46a17e8a28$var$focus(last, {
-                        select: true
-                    });
-                }
-            }
-        }
-    }, [
-        loop,
-        trapped,
-        focusScope.paused
-    ]);
-    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$1.div, _extends({
-        tabIndex: -1
-    }, scopeProps, {
-        ref: composedRefs,
-        onKeyDown: handleKeyDown
-    }));
-});
-/* -------------------------------------------------------------------------------------------------
- * Utils
- * -----------------------------------------------------------------------------------------------*/ /**
- * Attempts focusing the first element in a list of candidates.
- * Stops when focus has actually moved.
- */ function $d3863c46a17e8a28$var$focusFirst(candidates, { select: select = false  } = {}) {
-    const previouslyFocusedElement = document.activeElement;
-    for (const candidate of candidates){
-        $d3863c46a17e8a28$var$focus(candidate, {
-            select: select
-        });
-        if (document.activeElement !== previouslyFocusedElement) return;
-    }
-}
-/**
- * Returns the first and last tabbable elements inside a container.
- */ function $d3863c46a17e8a28$var$getTabbableEdges(container) {
-    const candidates = $d3863c46a17e8a28$var$getTabbableCandidates(container);
-    const first = $d3863c46a17e8a28$var$findVisible(candidates, container);
-    const last = $d3863c46a17e8a28$var$findVisible(candidates.reverse(), container);
-    return [
-        first,
-        last
-    ];
-}
-/**
- * Returns a list of potential tabbable candidates.
- *
- * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
- * elements are not visible. This cannot be worked out easily by just reading a property, but rather
- * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
- *
- * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
- * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
- */ function $d3863c46a17e8a28$var$getTabbableCandidates(container) {
-    const nodes = [];
-    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-        acceptNode: (node)=>{
-            const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
-            if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
-            // runtime's understanding of tabbability, so this automatically accounts
-            // for any kind of element that could be tabbed to.
-            return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-        }
-    });
-    while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it
-    // hinders accessibility to have tab order different from visual order.
-    return nodes;
-}
-/**
- * Returns the first visible element in a list.
- * NOTE: Only checks visibility up to the `container`.
- */ function $d3863c46a17e8a28$var$findVisible(elements, container) {
-    for (const element of elements){
-        // we stop checking if it's hidden at the `container` level (excluding)
-        if (!$d3863c46a17e8a28$var$isHidden(element, {
-            upTo: container
-        })) return element;
-    }
-}
-function $d3863c46a17e8a28$var$isHidden(node, { upTo: upTo  }) {
-    if (getComputedStyle(node).visibility === 'hidden') return true;
-    while(node){
-        // we stop at `upTo` (excluding it)
-        if (upTo !== undefined && node === upTo) return false;
-        if (getComputedStyle(node).display === 'none') return true;
-        node = node.parentElement;
-    }
-    return false;
-}
-function $d3863c46a17e8a28$var$isSelectableInput(element) {
-    return element instanceof HTMLInputElement && 'select' in element;
-}
-function $d3863c46a17e8a28$var$focus(element, { select: select = false  } = {}) {
-    // only focus if that element is focusable
-    if (element && element.focus) {
-        const previouslyFocusedElement = document.activeElement; // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users
-        element.focus({
-            preventScroll: true
-        }); // only select if its not the same element, it supports selection and we need to select
-        if (element !== previouslyFocusedElement && $d3863c46a17e8a28$var$isSelectableInput(element) && select) element.select();
-    }
-}
-/* -------------------------------------------------------------------------------------------------
- * FocusScope stack
- * -----------------------------------------------------------------------------------------------*/ const $d3863c46a17e8a28$var$focusScopesStack = $d3863c46a17e8a28$var$createFocusScopesStack();
-function $d3863c46a17e8a28$var$createFocusScopesStack() {
-    /** A stack of focus scopes, with the active one at the top */ let stack = [];
-    return {
-        add (focusScope) {
-            // pause the currently active focus scope (at the top of the stack)
-            const activeFocusScope = stack[0];
-            if (focusScope !== activeFocusScope) activeFocusScope === null || activeFocusScope === void 0 || activeFocusScope.pause();
-             // remove in case it already exists (because we'll re-add it at the top of the stack)
-            stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
-            stack.unshift(focusScope);
-        },
-        remove (focusScope) {
-            var _stack$;
-            stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
-            (_stack$ = stack[0]) === null || _stack$ === void 0 || _stack$.resume();
-        }
-    };
-}
-function $d3863c46a17e8a28$var$arrayRemove(array, item) {
-    const updatedArray = [
-        ...array
-    ];
-    const index = updatedArray.indexOf(item);
-    if (index !== -1) updatedArray.splice(index, 1);
-    return updatedArray;
-}
-function $d3863c46a17e8a28$var$removeLinks(items) {
-    return items.filter((item)=>item.tagName !== 'A'
-    );
-}
-
 const sides = ['top', 'right', 'bottom', 'left'];
 const min = Math.min;
 const max = Math.max;
@@ -38534,14 +38044,6 @@ const $cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9 = $cf1ac5d9fe0e8206$export$badac
 const $cf1ac5d9fe0e8206$export$b688253958b8dfe7 = $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d;
 const $cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2 = $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc;
 
-const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
-    var _globalThis$document;
-    const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props;
-    return container ? /*#__PURE__*/ $7SXl2$reactdom.createPortal(/*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$1.div, _extends({}, portalProps, {
-        ref: forwardedRef
-    })), container) : null;
-});
-
 function $010c2913dbd2fe3d$export$5cae361ad82dce8b$1(value) {
     const ref = useRef({
         value: value,
@@ -38785,7 +38287,7 @@ const $cc7e05a45900e73f$export$99b400cabb58c515 = /*#__PURE__*/ forwardRef((prop
     }), children || '▼');
 });
 const $cc7e05a45900e73f$export$b2af6c9944296213 = (props)=>{
-    return /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c, _extends({
+    return /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c$1, _extends({
         asChild: true
     }, props));
 };
@@ -39004,7 +38506,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ forwardRef((props,
             });
             event.preventDefault();
         })
-    }, /*#__PURE__*/ createElement($5cb92bef7577960e$export$177fb62ff3ec1f22, {
+    }, /*#__PURE__*/ createElement($5cb92bef7577960e$export$177fb62ff3ec1f22$1, {
         asChild: true,
         disableOutsidePointerEvents: true,
         onEscapeKeyDown: onEscapeKeyDown,
@@ -39694,10 +39196,10 @@ const BtIconChevronUp2Px = (props) =>
 /** Use `Select` to choose from a dropdown list of options. */
 var Select = function (_a) {
     var _b;
-    var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, _c = _a.ariaLabel, ariaLabel = _c === void 0 ? label : _c, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, labelSize = _a.labelSize, helper = _a.helper, name = _a.name, width = _a.width, isFluid = _a.isFluid, onBlur = _a.onBlur, onChange = _a.onChange, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, _d = _a.selectSize, selectSize = _d === void 0 ? "m" : _d, props = __rest(_a, ["isRequired", "isDisabled", "placeholder", "label", "ariaLabel", "options", "onOpenChange", "isDefaultOpen", "defaultValue", "errorMessage", "labelSize", "helper", "name", "width", "isFluid", "onBlur", "onChange", "disclosureTitle", "disclosureText", "onClickDisclosure", "selectSize"]);
+    var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, _c = _a.ariaLabel, ariaLabel = _c === void 0 ? label : _c, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, labelSize = _a.labelSize, helper = _a.helper, hideLabel = _a.hideLabel, name = _a.name, width = _a.width, isFluid = _a.isFluid, onBlur = _a.onBlur, onChange = _a.onChange, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, _d = _a.selectSize, selectSize = _d === void 0 ? "m" : _d, props = __rest(_a, ["isRequired", "isDisabled", "placeholder", "label", "ariaLabel", "options", "onOpenChange", "isDefaultOpen", "defaultValue", "errorMessage", "labelSize", "helper", "hideLabel", "name", "width", "isFluid", "onBlur", "onChange", "disclosureTitle", "disclosureText", "onClickDisclosure", "selectSize"]);
     var id = useId();
     var arcRootElement = useContext(ArcRootElementContext);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var _e = useState(defaultValue), selectedValue = _e[0], setSelectedValue = _e[1];
     var onValueChange = function (value) {
         onChange && onChange(value);
@@ -39717,7 +39219,7 @@ var Select = function (_a) {
                 return 20;
         }
     };
-    return (React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", isDisabled: isDisabled, disclosureText: disclosureText, disclosureTitle: disclosureTitle, onClickDisclosure: onClickDisclosure },
+    return (React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", isDisabled: isDisabled, disclosureText: disclosureText, disclosureTitle: disclosureTitle, onClickDisclosure: onClickDisclosure },
         React__default.createElement($cc7e05a45900e73f$export$be92b6f5f03c0fe9, { name: name, required: isRequired, disabled: isDisabled, defaultOpen: isDefaultOpen, value: selectedValue, onOpenChange: onOpenChange, onValueChange: function (value) { return onValueChange(value); } },
             React__default.createElement("div", { className: "arc-Select-wrapper" },
                 React__default.createElement($cc7e05a45900e73f$export$41fb9f06171c75f4, __assign({ id: id, name: name, onBlur: onBlur, "aria-label": ariaLabel, style: { width: width }, className: classNames("arc-Select-trigger", (_b = {
@@ -39824,7 +39326,7 @@ var SiteFooter_rehydrator = (function (el, rehydrateChildren) { return __awaiter
     });
 }); });
 
-var Item = function (_a) {
+var Item$1 = function (_a) {
     var _b;
     var children = _a.children, href = _a.href, isEmphasised = _a.isEmphasised, onClick = _a.onClick, props = __rest(_a, ["children", "href", "isEmphasised", "onClick"]);
     return (React__default.createElement("li", __assign({ className: classNames((_b = {},
@@ -39837,13 +39339,13 @@ var Item = function (_a) {
             children)));
 };
 
-var ItemGroup = function (_a) {
+var ItemGroup$1 = function (_a) {
     var children = _a.children, href = _a.href, title = _a.title, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "href", "title", "onClick", "viewAllTitle"]);
     var _b = useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
         React__default.Children.map(children, function (item) {
-            if (item && item.type !== Item && item.type !== Fragment) {
+            if (item && item.type !== Item$1 && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.ItemGroup />. Ensure to only use <SiteHeader.Item />.");
             }
         });
@@ -39897,16 +39399,16 @@ var ItemGroupRehydrator = (function (el, hydrate) { return __awaiter(void 0, voi
                     title: title,
                     viewAllTitle: viewAllTitle
                 };
-                return [2 /*return*/, React__default.createElement(ItemGroup, __assign({}, props), children)];
+                return [2 /*return*/, React__default.createElement(ItemGroup$1, __assign({}, props), children)];
         }
     });
 }); });
 
-var Column = function (_a) {
+var Column$1 = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     useEffect(function () {
         React__default.Children.map(children, function (item) {
-            if (item && item.type !== ItemGroup) {
+            if (item && item.type !== ItemGroup$1) {
                 throw new Error("Illegal child passed to <SiteHeader.Column />. Ensure to only use <SiteHeader.ItemGroup />.");
             }
         });
@@ -39915,7 +39417,7 @@ var Column = function (_a) {
         React__default.createElement("ul", { className: "arc-SiteHeaderColumn-items" }, children)));
 };
 
-var BackButton = function (_a) {
+var BackButton$1 = function (_a) {
     var setOpen = _a.setOpen;
     return (React__default.createElement("button", { className: "arc-SiteHeaderBackButton", onClick: function () {
             setOpen(false);
@@ -39925,10 +39427,10 @@ var BackButton = function (_a) {
         React__default.createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
 };
 
-var Panel = function (_a) {
+var Panel$1 = 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 = __rest(_a, ["children", "navItemRef", "open", "promo", "setOpen", "subNavItemRef", "subNavLink", "title", "viewAll", "withSubNav"]);
-    var transparent = useContext(Context).transparent;
+    var transparent = useContext(Context$2).transparent;
     useEffect(function () {
         // Where appropriate, close the Panel when clicking outside of it,
         // by listening to clicks on the entire document and acting accordingly.
@@ -39990,7 +39492,7 @@ var Panel = function (_a) {
             _b["arc-SiteHeaderPanel--withSubNav"] = withSubNav,
             _b)) }, filterDataAttrs(props)),
         React__default.createElement(Surface, { background: "white", growVertically: true },
-            React__default.createElement(BackButton, { setOpen: setOpen }),
+            React__default.createElement(BackButton$1, { setOpen: setOpen }),
             React__default.createElement("div", { className: "arc-SiteHeaderPanel-inner" },
                 React__default.createElement("div", { className: "arc-SiteHeaderPanel-main" },
                     React__default.createElement("div", { className: "arc-SiteHeaderPanel-mainInner" },
@@ -40000,16 +39502,16 @@ var Panel = function (_a) {
                     viewAll),
                 promo && React__default.createElement("div", { className: "arc-SiteHeaderPanel-promo" }, promo)))));
 };
-var ViewAll = function (_a) {
+var ViewAll$1 = function (_a) {
     var href = _a.href, title = _a.title, onClick = _a.onClick;
     return (React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href },
         title,
         React__default.createElement("span", { className: "arc-SiteHeaderPanel-viewAllIcon" },
             React__default.createElement(BtIconChevronRight2Px, null))));
 };
-Panel.ViewAll = ViewAll;
+Panel$1.ViewAll = ViewAll$1;
 
-var NavItem = function (_a) {
+var NavItem$1 = 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 = __rest(_a, ["children", "href", "isCurrent", "onClick", "promo", "title", "viewAllTitle"]);
     var navItem = useRef();
@@ -40018,8 +39520,8 @@ var NavItem = function (_a) {
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item &&
-                item.type !== ItemGroup &&
-                item.type !== Column &&
+                item.type !== ItemGroup$1 &&
+                item.type !== Column$1 &&
                 item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItem />. Ensure to only use <SiteHeader.ItemGroup /> or <SiteHeader.Column />.");
             }
@@ -40040,7 +39542,7 @@ var NavItem = function (_a) {
             } },
             React__default.createElement("span", null, title),
             React__default.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default.createElement(BtIconChevronDown2Px, null)) : (React__default.createElement(BtIconChevronRight2Px, null)))),
-        React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined }, children)))));
+        React__default.createElement(Panel$1, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React__default.createElement(Panel$1.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined }, children)))));
 };
 
 var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
@@ -40080,23 +39582,23 @@ var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void
                     title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
-                return [2 /*return*/, React__default.createElement(NavItem, __assign({}, props), children)];
+                return [2 /*return*/, React__default.createElement(NavItem$1, __assign({}, props), children)];
         }
     });
 }); });
 
-var SubNavItem = function (_a) {
+var SubNavItem$1 = 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 = __rest(_a, ["children", "isDefaultItem", "href", "onClick", "offsetXL", "promo", "subTitle", "title", "viewAllTitle"]);
-    var navItem = useContext(Context$1).navItem;
+    var navItem = useContext(Context$3).navItem;
     var subNavItem = useRef();
     var _e = useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item &&
-                item.type !== ItemGroup &&
-                item.type !== Column &&
+                item.type !== ItemGroup$1 &&
+                item.type !== Column$1 &&
                 item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.SubNavItem />. Ensure to only use <SiteHeader.ItemGroup /> or <SiteHeader.Column />.");
             }
@@ -40127,9 +39629,9 @@ var SubNavItem = function (_a) {
             linkTitle,
             children && (React__default.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkIcon" },
                 React__default.createElement(BtIconChevronRight2Px, null)))),
-        React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React__default.createElement("span", null,
+        React__default.createElement(Panel$1, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React__default.createElement("span", null,
                 title,
-                subTitle && (React__default.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined }, children)))));
+                subTitle && (React__default.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default.createElement(Panel$1.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined }, children)))));
 };
 
 var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
@@ -40183,15 +39685,15 @@ var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, vo
                     title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
-                return [2 /*return*/, React__default.createElement(SubNavItem, __assign({}, props), children)];
+                return [2 /*return*/, React__default.createElement(SubNavItem$1, __assign({}, props), children)];
         }
     });
 }); });
 
-var defaultContext$1 = { navItem: null, subTitle: null };
-var Context$1 = createContext(defaultContext$1);
-var Provider$1 = Context$1.Provider;
-var NavItemWithSubNav = function (_a) {
+var defaultContext$3 = { navItem: null, subTitle: null };
+var Context$3 = createContext(defaultContext$3);
+var Provider$3 = Context$3.Provider;
+var NavItemWithSubNav$1 = 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 = __rest(_a, ["href", "slot1", "slot2", "slot3", "subTitle", "title", "onViewAllClick", "viewAllTitle"]);
     var navItem = useRef();
@@ -40200,7 +39702,7 @@ var NavItemWithSubNav = function (_a) {
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
         React__default.Children.map(slot1, function (item) {
-            if (item && item.type !== SubNavItem && item.type !== Fragment) {
+            if (item && item.type !== SubNavItem$1 && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot1` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
             if (item.props.isDefaultItem) {
@@ -40208,7 +39710,7 @@ var NavItemWithSubNav = function (_a) {
             }
         });
         React__default.Children.map(slot2, function (item) {
-            if (item && item.type !== SubNavItem && item.type !== Fragment) {
+            if (item && item.type !== SubNavItem$1 && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot2` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
             if (item.props.isDefaultItem) {
@@ -40216,7 +39718,7 @@ var NavItemWithSubNav = function (_a) {
             }
         });
         React__default.Children.map(slot3, function (item) {
-            if (item && item.type !== SubNavItem && item.type !== Fragment) {
+            if (item && item.type !== SubNavItem$1 && item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader.NavItemWithSubNav /> `slot3` prop. Ensure to only use <SiteHeader.SubNavItem />.");
             }
             if (item.props.isDefaultItem) {
@@ -40224,7 +39726,7 @@ var NavItemWithSubNav = function (_a) {
             }
         });
     }, [slot1, slot2, slot3]);
-    return (React__default.createElement(Provider$1, { value: { navItem: navItem, subTitle: subTitle } },
+    return (React__default.createElement(Provider$3, { value: { navItem: navItem, subTitle: subTitle } },
         React__default.createElement("li", __assign({ className: classNames((_b = {},
                 _b["arc-SiteHeaderNavItemWithSubNav"] = true,
                 _b["arc-SiteHeaderNavItem--linkSelected"] = panelOpen,
@@ -40238,7 +39740,7 @@ var NavItemWithSubNav = function (_a) {
                 } },
                 title,
                 React__default.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default.createElement(BtIconChevronDown2Px, null)) : (React__default.createElement(BtIconChevronRight2Px, null)))),
-            React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined, withSubNav: true },
+            React__default.createElement(Panel$1, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React__default.createElement(Panel$1.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined, withSubNav: true },
                 defaultItem
                     ? React__default.cloneElement(slot1, { isDefaultItem: defaultItem })
                     : slot1,
@@ -40296,17 +39798,17 @@ var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(voi
                     title: title,
                     viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
-                return [2 /*return*/, React__default.createElement(NavItemWithSubNav, __assign({}, props))];
+                return [2 /*return*/, React__default.createElement(NavItemWithSubNav$1, __assign({}, props))];
         }
     });
 }); });
 
-var NodeItem = function (_a) {
+var NodeItem$1 = 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 MenuButton$1 = function (_a) {
     var _b;
     var menuOpen = _a.menuOpen, setMenuOpen = _a.setMenuOpen;
     return (React__default.createElement("button", { "aria-expanded": menuOpen, className: classNames((_b = {},
@@ -40320,9 +39822,9 @@ var MenuButton = function (_a) {
             React__default.createElement("span", { className: "arc-MenuButton-text" }, "Menu"))));
 };
 
-var defaultContext = { transparent: false };
-var Context = createContext(defaultContext);
-var Provider = Context.Provider;
+var defaultContext$2 = { transparent: false };
+var Context$2 = createContext(defaultContext$2);
+var Provider$2 = Context$2.Provider;
 /**
  * Use `SiteHeader` to display brand logo and navigation at the top of a page.
  */
@@ -40335,9 +39837,9 @@ 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 !== NodeItem$1 &&
+                item.type !== NavItem$1 &&
+                item.type !== NavItemWithSubNav$1 &&
                 item.type !== Fragment) {
                 throw new Error("Illegal child passed to <SiteHeader />. Ensure to only use <SiteHeader.NavItem /> or <SiteHeader.NavItemWithSubNav />");
             }
@@ -40380,7 +39882,7 @@ var SiteHeader = function (_a) {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
-    return (React__default.createElement(Provider, { value: { transparent: isTransparent } },
+    return (React__default.createElement(Provider$2, { value: { transparent: isTransparent } },
         React__default.createElement("div", __assign({ className: classNames((_b = {},
                 _b["arc-SiteHeader"] = true,
                 _b["arc-SiteHeader--menuOpen"] = menuOpen,
@@ -40393,10 +39895,10 @@ 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 })),
+                        React__default.createElement(BrandLogo, { label: logoLabel, subBrand: subBrand, size: 40 })),
                     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 })),
+                            React__default.createElement(MenuButton$1, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
                         React__default.createElement("div", { className: "arc-SiteHeader-main" },
                             React__default.createElement("ul", { className: "arc-SiteHeader-navItems" }, children),
                             hasLogin && (React__default.createElement(React__default.Fragment, null, loginOnClick ? (React__default.createElement("div", { className: "arc-SiteHeader-loginButton" },
@@ -40407,13 +39909,13 @@ var SiteHeader = function (_a) {
                         basket ? (React__default.createElement("div", { className: "arc-SiteHeader-basket" }, basket)) : null,
                         hasLogin && (React__default.createElement(React__default.Fragment, null, loginOnClick ? (React__default.createElement("div", { className: "arc-SiteHeader-loginLink arc-SiteHeader-loginLink--function", onClick: loginOnClick }, loginTitle)) : (React__default.createElement("a", { className: "arc-SiteHeader-loginLink", href: loginHref }, loginTitle)))))))))));
 };
-SiteHeader.Column = Column;
-SiteHeader.Item = Item;
-SiteHeader.ItemGroup = ItemGroup;
-SiteHeader.NavItem = NavItem;
-SiteHeader.NodeItem = NodeItem;
-SiteHeader.NavItemWithSubNav = NavItemWithSubNav;
-SiteHeader.SubNavItem = SubNavItem;
+SiteHeader.Column = Column$1;
+SiteHeader.Item = Item$1;
+SiteHeader.ItemGroup = ItemGroup$1;
+SiteHeader.NavItem = NavItem$1;
+SiteHeader.NodeItem = NodeItem$1;
+SiteHeader.NavItemWithSubNav = NavItemWithSubNav$1;
+SiteHeader.SubNavItem = SubNavItem$1;
 
 var SiteHeaderRehydrator = function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
     var children, basket, search, brand, login, logoHref, logoLabel, props;
@@ -40468,6 +39970,595 @@ SiteHeaderRehydrator.NavItemRehydrator = NavItemRehydrator;
 SiteHeaderRehydrator.NavItemWithSubNavRehydrator = NavItemWithSubNavRehydrator;
 SiteHeaderRehydrator.SubNavItemRehydrator = SubNavItemRehydrator;
 
+var Item = function (_a) {
+    var _b;
+    var children = _a.children, href = _a.href; _a.isEmphasised; var onClick = _a.onClick, props = __rest(_a, ["children", "href", "isEmphasised", "onClick"]);
+    return (React__default.createElement("li", __assign({ className: classNames((_b = {},
+            _b["arc-SiteHeaderV2Item"] = true,
+            _b["arc-SiteHeaderV2Item--emphasised"] = true,
+            _b)) }, filterDataAttrs(props)),
+        React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href },
+            React__default.createElement("span", { className: "arc-SiteHeaderV2Item-linkIcon" },
+                React__default.createElement(BtIconChevronRightMid, null)),
+            children)));
+};
+
+var ItemGroup = function (_a) {
+    var children = _a.children, href = _a.href, title = _a.title, subtitle = _a.subtitle, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "href", "title", "subtitle", "onClick", "viewAllTitle"]);
+    var _b = useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== Item && item.type !== Fragment) {
+                throw new Error("Illegal child passed to <SiteHeaderV2.ItemGroup />. Ensure to only use <SiteHeaderV2.Item />.");
+            }
+        });
+    }, [children]);
+    useEffect(function () {
+        // useEffect does not run in ReactDomServer renders
+        setHasClientSideJavaScript(true);
+    }, [setHasClientSideJavaScript]);
+    var ElementType = "div";
+    if (title) {
+        ElementType = "details";
+    }
+    return (React__default.createElement("li", { className: "arc-SiteHeaderV2ItemGroup" },
+        React__default.createElement(ElementType, __assign({ className: "arc-SiteHeaderV2ItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
+            title ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("summary", { className: "arc-SiteHeaderV2ItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
+                    React__default.createElement("a", { onClick: handleLinkClick({
+                            handler: onClick
+                        }), className: "arc-SiteHeaderV2ItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL
+                            ? 0
+                            : -1 }, title),
+                    React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
+                        React__default.createElement(BtIconChevronRightMid, { size: 16 })))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
+                React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
+            React__default.createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items" },
+                children,
+                href && title ? (React__default.createElement("li", { className: "arc-SiteHeaderV2Item arc-SiteHeaderV2Item--viewAll" },
+                    React__default.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick({
+                            handler: onClick
+                        }), href: href }, viewAllTitle || "View all ".concat(title.toLowerCase())))) : null))));
+};
+
+var Column = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== ItemGroup) {
+                throw new Error("Illegal child passed to <SiteHeaderV2.Column />. Ensure to only use <SiteHeaderV2.ItemGroup />.");
+            }
+        });
+    }, [children]);
+    return (React__default.createElement("li", __assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs(props)),
+        React__default.createElement("ul", { className: "arc-SiteHeaderV2Column-items" }, children)));
+};
+
+var BackButton = function (_a) {
+    var setOpen = _a.setOpen;
+    return (React__default.createElement("button", { className: "arc-SiteHeaderV2BackButton", onClick: function () {
+            setOpen(false);
+        } },
+        React__default.createElement("span", { className: "arc-SiteHeaderV2BackButton-icon" },
+            React__default.createElement(BtIconChevronLeft2Px, null)),
+        React__default.createElement("span", { className: "arc-SiteHeaderV2BackButton-text" }, "Back")));
+};
+
+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 = __rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "subNavItemRef", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    useEffect(function () {
+        // Where appropriate, close the Panel when clicking outside of it,
+        // by listening to clicks on the entire document and acting accordingly.
+        var handleClick = function (e) {
+            var _a, _b;
+            // Don't close the Panel…
+            if (
+            // The click is inside the current SubNavItem.
+            ((_a = subNavItemRef === null || subNavItemRef === void 0 ? void 0 : subNavItemRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) ||
+                // The click is inside the current NavItem
+                // and the Panel is not inside a SubNavItem.
+                // and the target is not a link
+                (((_b = navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target)) &&
+                    !subNavItemRef &&
+                    !e.target.getAttribute("href")) ||
+                // The Panel is inside a SubNavItem
+                // and the click is not on a SubNavItem-link.
+                // This ensures that one SubNavItem Panel per NavItem always remains open.
+                (subNavItemRef &&
+                    !e.target.classList.contains(subNavLink) &&
+                    !e.target.classList.contains("".concat(subNavLink, "Title")) &&
+                    !e.target.classList.contains("".concat(subNavLink, "SubTitle"))) ||
+                // Panel is inside a SubNavItem
+                // and the click is not inside the Panel's NavItem parent.
+                // This prevents SubNavItem Panels in sibling NavItems from being closed.
+                (subNavItemRef && !(navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current.contains(e.target)))) {
+                return;
+            }
+            // Close the panel.
+            setOpen(false);
+        };
+        document.addEventListener("click", handleClick);
+        return function () {
+            document.removeEventListener("click", handleClick);
+        };
+    }, [navItemRef, setOpen, subNavItemRef, subNavLink]);
+    useEffect(function () {
+        var handleKeydown = function (e) {
+            // Check the viewport width at time of press
+            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(ArcBreakpointL, "px)")).matches;
+            if (e.key === "Escape" || e.keyCode === 27) {
+                if (isMinWidthArcBreakpointL && subNavItemRef) {
+                    // Don't close Panels inside SubNavItems when viewport width is above
+                    // the "desktop" breakpoint.
+                    return false;
+                }
+                return setOpen(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeydown);
+        return function () {
+            window.removeEventListener("keydown", handleKeydown);
+        };
+    }, [setOpen, subNavItemRef]);
+    return (React__default.createElement("div", { style: { display: "flex" } },
+        React__default.createElement("div", __assign({ className: classNames((_b = {},
+                _b["arc-SiteHeaderV2Panel"] = true,
+                _b["arc-SiteHeaderV2Panel--open"] = open,
+                _b["arc-SiteHeaderV2Panel--withSubNav"] = withSubNav,
+                _b)) }, filterDataAttrs(props)),
+            React__default.createElement(Surface, { background: "white" },
+                React__default.createElement(BackButton, { setOpen: setOpen }),
+                React__default.createElement("div", { className: classNames((_c = {},
+                        _c["arc-SiteHeaderV2Panel-inner"] = !isNavItem && withSubNav,
+                        _c["arc-SiteHeaderV2Panel-innerWithoutSubNav"] = !isNavItem && !withSubNav,
+                        _c["arc-SiteHeaderV2NavItemWithSubNav-fadeIn"] = !isNavItem && !withSubNav,
+                        _c["arc-SiteHeaderV2Panel-innerNavItems"] = isNavItem,
+                        _c)) },
+                    React__default.createElement("div", { className: classNames((_d = {},
+                            _d["arc-SiteHeaderV2Panel-main"] = !isNavItem && !withSubNav,
+                            _d)) },
+                        React__default.createElement("div", { className: classNames((_e = {},
+                                _e["arc-SiteHeaderV2Panel-mainInnerWithoutSubNav"] = !isNavItem && !withSubNav,
+                                _e["arc-SiteHeaderV2Panel-mainInner"] = !isNavItem,
+                                _e["arc-SiteHeaderV2Panel-mainInnerNavItems"] = isNavItem,
+                                _e)) },
+                            withSubNav && (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-subNavArea" })),
+                            !isMinWidthArcBreakpointL && title && (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileTitleBlock" },
+                                React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileTitle" },
+                                    title && (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-title" }, title)),
+                                    React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-subTitle" }, subtitle)))),
+                            React__default.createElement("ul", { className: classNames((_f = {},
+                                    _f["arc-SiteHeaderV2Panel-items"] = !isNavItem,
+                                    _f["arc-SiteHeaderV2Panel-itemsNavItems"] = isNavItem,
+                                    _f["arc-SiteHeaderV2NavItemWithSubNav-fadeIn"] = isNavItem && fade && !isPrimary,
+                                    _f)) }, children),
+                            !withSubNav && viewAll)),
+                    withSubNav && viewAll)))));
+};
+var ViewAll = function (_a) {
+    var href = _a.href, title = _a.title, onClick = _a.onClick, fill = _a.fill;
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    if (fill === "outlined") {
+        return isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-viewAllOutlined" },
+            React__default.createElement(Button, { fill: fill, label: title !== null && title !== void 0 ? title : "", href: href, onClick: onClick }),
+            " ")) : (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll arc-SiteHeaderV2Panel-mobileViewAllOutlined" },
+            React__default.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick({
+                    handler: onClick
+                }), href: href }, title)));
+    }
+    else {
+        return isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-viewAll" },
+            " ",
+            React__default.createElement(Button, { fill: fill, label: title !== null && title !== void 0 ? title : "", isFullWidth: true, href: href, onClick: onClick }),
+            " ")) : (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll" },
+            React__default.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick({
+                    handler: onClick
+                }), href: href }, title)));
+    }
+};
+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 = __rest(_a, ["children", "href", "isCurrent", "onClick", "title", "viewAllTitle", "isPrimary", "subTitle"]);
+    var navItem = useRef();
+    var _g = useState(false), panelOpen = _g[0], setPanelOpen = _g[1];
+    var _h = useState(false), animation = _h[0], setAnimation = _h[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item &&
+                item.type !== ItemGroup &&
+                item.type !== Column &&
+                item.type !== Fragment) {
+                throw new Error("Illegal child passed to <SiteHeaderV2.NavItem />. Ensure to only use <SiteHeaderV2.ItemGroup /> or <SiteHeaderV2.Column />.");
+            }
+        });
+    }, [children]);
+    return (React__default.createElement("li", __assign({ className: classNames((_b = {},
+            _b["arc-SiteHeaderV2NavItem-primary"] = isPrimary,
+            _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)), ref: navItem }, filterDataAttrs(props)), !children ? (href ? (React__default.createElement("a", { onClick: handleLinkClick({
+            handler: onClick
+        }), className: "arc-SiteHeaderV2NavItem-link", href: href }, title)) : null) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
+            React__default.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
+                    _c["arc-SiteHeaderV2NavItem-link"] = true,
+                    _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
+                    _c["arc-SiteHeaderV2NavItem-horizontalPanelLink"] = !isPrimary && !isMinWidthArcBreakpointL,
+                    _c)), onClick: function (e) {
+                    e.preventDefault();
+                    setPanelOpen(!panelOpen);
+                    setAnimation(true);
+                }, onAnimationEnd: function () { return setAnimation(false); } },
+                React__default.createElement("div", { className: classNames((_d = {},
+                        _d["arc-SiteHeaderV2NavItem-title"] = !subTitle,
+                        _d)) }, title),
+                React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
+                    React__default.createElement(BtIconChevronRight2Px, null)),
+                subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: classNames((_e = {},
+                        _e["arc-SiteHeaderV2NavItemWithSubNav-text"] = !isPrimary,
+                        _e)) }, subTitle)) : null,
+                React__default.createElement("div", { className: classNames((_f = {},
+                        _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = panelOpen,
+                        _f["arc-SiteHeaderV2NavItemWithSubNav-primaryButtonUnderline"] = isPrimary && panelOpen,
+                        _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive"] = !isPrimary && panelOpen,
+                        _f)) }))),
+        React__default.createElement(Panel, { navItemRef: navItem, isNavItem: true, isPrimary: isPrimary, open: panelOpen, setOpen: setPanelOpen, fade: animation, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: "See all solutions", fill: "solid" })) : undefined }, children)))));
+};
+
+var HorizontalPanel = function (_a) {
+    var _b, _c, _d;
+    var children = _a.children, navItemRef = _a.navItemRef, open = _a.open, setOpen = _a.setOpen, subNavItemRef = _a.subNavItemRef, _e = _a.subNavLink, subNavLink = _e === void 0 ? "" : _e, title = _a.title, withSubNav = _a.withSubNav; _a.animation; var props = __rest(_a, ["children", "navItemRef", "open", "setOpen", "subNavItemRef", "subNavLink", "title", "withSubNav", "animation"]);
+    useEffect(function () {
+        // Where appropriate, close the Panel when clicking outside of it,
+        // by listening to clicks on the entire document and acting accordingly.
+        var handleClick = function (e) {
+            var _a, _b;
+            // Don't close the Panel…
+            if (
+            // The click is inside the current SubNavItem.
+            ((_a = subNavItemRef === null || subNavItemRef === void 0 ? void 0 : subNavItemRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) ||
+                // The click is inside the current NavItem
+                // and the Panel is not inside a SubNavItem.
+                // and the target is not a link
+                (((_b = navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target)) &&
+                    !subNavItemRef &&
+                    !e.target.getAttribute("href")) ||
+                // The Panel is inside a SubNavItem
+                // and the click is not on a SubNavItem-link.
+                // This ensures that one SubNavItem Panel per NavItem always remains open.
+                (subNavItemRef &&
+                    !e.target.classList.contains(subNavLink) &&
+                    !e.target.classList.contains("".concat(subNavLink, "Title")) &&
+                    !e.target.classList.contains("".concat(subNavLink, "SubTitle"))) ||
+                // Panel is inside a SubNavItem
+                // and the click is not inside the Panel's NavItem parent.
+                // This prevents SubNavItem Panels in sibling NavItems from being closed.
+                (subNavItemRef && !(navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current.contains(e.target)))) {
+                return;
+            }
+            // Close the panel.
+            setOpen(false);
+        };
+        document.addEventListener("click", handleClick);
+        return function () {
+            document.removeEventListener("click", handleClick);
+        };
+    }, [navItemRef, setOpen, subNavItemRef, subNavLink]);
+    useEffect(function () {
+        var handleKeydown = function (e) {
+            // Check the viewport width at time of press
+            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(ArcBreakpointL, "px)")).matches;
+            if (e.key === "Escape" || e.keyCode === 27) {
+                if (isMinWidthArcBreakpointL && subNavItemRef) {
+                    // Don't close Panels inside SubNavItems when viewport width is above
+                    // the "desktop" breakpoint.
+                    return false;
+                }
+                return setOpen(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeydown);
+        return function () {
+            window.removeEventListener("keydown", handleKeydown);
+        };
+    }, [setOpen, subNavItemRef]);
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {},
+            _b["arc-SiteHeaderV2HorizontalPanel"] = true,
+            _b["arc-SiteHeaderV2HorizontalPanel--open"] = open,
+            _b["arc-SiteHeaderV2HorizontalPanel--withSubNav"] = withSubNav,
+            _b)) }, filterDataAttrs(props)),
+        React__default.createElement(Surface, { background: "light" },
+            React__default.createElement("div", { className: classNames((_c = {},
+                    _c["arc-SiteHeaderV2HorizontalPanel-container"] = true,
+                    _c)) },
+                React__default.createElement(BackButton, { setOpen: setOpen }),
+                title && (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-selectedTitle" }, title)),
+                React__default.createElement("ul", { className: classNames((_d = {},
+                        _d["arc-SiteHeaderV2HorizontalPanel-items"] = true,
+                        _d)) }, children)))));
+};
+
+var defaultContext$1 = { navItem: null, subTitle: null };
+var Context$1 = 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 = __rest(_a, ["href", "slot1", "slot2", "slot3", "slot4", "slot5", "slot6", "subTitle", "title", "onViewAllClick", "isPrimary", "viewAllTitle"]);
+    var navItem = useRef();
+    var _h = useState(true), defaultItem = _h[0], setDefaultItem = _h[1];
+    var _j = useState(false), panelOpen = _j[0], setPanelOpen = _j[1];
+    var _k = useState(false), horizontalPanelOpen = _k[0], setHorizontalPanelOpen = _k[1];
+    var _l = useState(false), animation = _l[0], setAnimation = _l[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    useEffect(function () {
+        React__default.Children.map(slot1, function (item) {
+            if (item.props.isDefaultItem) {
+                setDefaultItem(false);
+            }
+        });
+        React__default.Children.map(slot2, function (item) {
+            if (item.props.isDefaultItem) {
+                setDefaultItem(false);
+            }
+        });
+        React__default.Children.map(slot3, function (item) {
+            if (item.props.isDefaultItem) {
+                setDefaultItem(false);
+            }
+        });
+        React__default.Children.map(slot4, function (item) {
+            if (item.props.isDefaultItem) {
+                setDefaultItem(false);
+            }
+        });
+        React__default.Children.map(slot5, function (item) {
+            if (item.props.isDefaultItem) {
+                setDefaultItem(false);
+            }
+        });
+    }, [slot1, slot2, slot3, slot4, slot5]);
+    return (React__default.createElement(Provider$1, { value: { navItem: navItem, subTitle: subTitle } },
+        React__default.createElement("li", __assign({ className: classNames((_b = {},
+                _b["arc-SiteHeaderV2NavItemWithSubNav"] = true,
+                _b["arc-SiteHeaderV2NavItemWithSubNav-Secondary"] = !isPrimary,
+                _b["arc-SiteHeaderV2NavItem-primary"] = isPrimary,
+                _b["arc-SiteHeaderV2NavItem--linkSelected"] = isPrimary
+                    ? horizontalPanelOpen
+                    : panelOpen,
+                _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen,
+                _b)), ref: navItem }, filterDataAttrs(props)),
+            React__default.createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
+                React__default.createElement("button", { "aria-expanded": horizontalPanelOpen, className: classNames((_c = {},
+                        _c["arc-SiteHeaderV2NavItem-link"] = true,
+                        _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
+                        _c["arc-SiteHeaderV2NavItem-horizontalPanelLink"] = !isPrimary && !isMinWidthArcBreakpointL,
+                        _c)), onClick: function (e) {
+                        e.preventDefault();
+                        isPrimary
+                            ? setHorizontalPanelOpen(!horizontalPanelOpen)
+                            : setPanelOpen(!horizontalPanelOpen);
+                        setAnimation(true);
+                    }, onAnimationEnd: function () { return setAnimation(false); } },
+                    React__default.createElement("div", { className: classNames((_d = {},
+                            _d["arc-SiteHeaderV2NavItem-title"] = isPrimary,
+                            _d)) }, title),
+                    React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
+                        React__default.createElement(BtIconChevronRight2Px, null)),
+                    subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: classNames((_e = {},
+                            _e["arc-SiteHeaderV2NavItemWithSubNav-text"] = !isPrimary,
+                            _e)) }, subTitle)) : null,
+                    React__default.createElement("div", { className: classNames((_f = {},
+                            _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = isPrimary
+                                ? horizontalPanelOpen
+                                : panelOpen,
+                            _f["arc-SiteHeaderV2NavItemWithSubNav-primaryButtonUnderline"] = isPrimary && horizontalPanelOpen,
+                            _f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive "] = !isPrimary && panelOpen,
+                            _f)) }))),
+            isPrimary && (React__default.createElement(HorizontalPanel, { animation: animation, navItemRef: navItem, open: horizontalPanelOpen, setOpen: setHorizontalPanelOpen, title: !isMinWidthArcBreakpointL && title },
+                slot1,
+                slot2,
+                slot3,
+                slot4,
+                slot5)),
+            React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, fade: animation, setOpen: setPanelOpen, title: !isMinWidthArcBreakpointL && title, subtitle: subTitle, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle, fill: "solid" })) : undefined, withSubNav: true, isNavItem: false },
+                defaultItem
+                    ? React__default.cloneElement(slot1, { isDefaultItem: defaultItem })
+                    : slot1,
+                slot2,
+                slot3,
+                slot4,
+                slot5,
+                slot6))));
+};
+
+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;
+    return (React__default.createElement("button", { "aria-expanded": menuOpen, className: classNames((_b = {},
+            _b["arc-MenuButton"] = true,
+            _b["arc-MenuButton--menuOpen"] = menuOpen,
+            _b)), onClick: function () {
+            setMenuOpen(!menuOpen);
+        }, type: "button" },
+        React__default.createElement("span", { className: "arc-MenuButton-box" },
+            React__default.createElement("span", { className: "arc-MenuButton-inner" }),
+            React__default.createElement("span", { className: "arc-MenuButton-text" }, "Menu"))));
+};
+
+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, subTitle = _a.subTitle, title = _a.title, viewAllTitle = _a.viewAllTitle, icon = _a.icon, props = __rest(_a, ["children", "isDefaultItem", "href", "onClick", "offsetXL", "subTitle", "title", "viewAllTitle", "icon"]);
+    var navItem = useContext(Context$1).navItem;
+    var subNavItem = useRef();
+    var _e = useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
+    var _f = useState(false), fade = _f[0], setFade = _f[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item &&
+                item.type !== ItemGroup &&
+                item.type !== Column &&
+                item.type !== Fragment) {
+                throw new Error("Illegal child passed to <SiteHeaderV2.SubNavItem />. Ensure to only use <SiteHeaderV2.ItemGroup /> or <SiteHeaderV2.Column />.");
+            }
+        });
+    }, [children]);
+    useEffect(function () {
+        if (isDefaultItem && isMinWidthArcBreakpointL) {
+            setPanelOpen(true);
+        }
+        else {
+            setPanelOpen(false);
+        }
+    }, [isDefaultItem, isMinWidthArcBreakpointL]);
+    var linkTitle = (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-linkTitle" }, title),
+        children && panelOpen && (React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-linkIcon" },
+            React__default.createElement(BtIconChevronRight2Px, null))),
+        children && !isMinWidthArcBreakpointL && (React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-linkIcon" },
+            React__default.createElement(BtIconChevronRight2Px, null))),
+        subTitle ? (React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-linkSubTitle" }, subTitle)) : null));
+    return (React__default.createElement("li", __assign({ className: classNames((_b = {},
+            _b["arc-SiteHeaderV2SubNavItem"] = true,
+            _b["arc-SiteHeaderV2SubNavItem--linkSelected"] = children && panelOpen,
+            _b["arc-SiteHeaderV2SubNavItem--linkNotSelected"] = children && !panelOpen,
+            _b[suffixModifier("arc-SiteHeaderV2SubNavItem--offsetXL", offsetXL || "")] = offsetXL,
+            _b)), ref: subNavItem }, filterDataAttrs(props), { "data-default-item": isDefaultItem || null }), !children ? (href ? (React__default.createElement("a", { className: "arc-SiteHeaderV2SubNavItem-link", onClick: handleLinkClick({ handler: onClick }), href: href }, linkTitle)) : null) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
+                _c["arc-SiteHeaderV2SubNavItem-link"] = true,
+                _c["arc-SiteHeaderV2SubNavItem-link--itemHasChildren"] = children,
+                _c)), onClick: function (e) {
+                e.preventDefault();
+                setPanelOpen(true);
+                setFade(true);
+            }, onAnimationEnd: function () { return setFade(false); } },
+            React__default.createElement("div", { className: "arc-SiteHeaderV2SubNavItem-icon" },
+                icon && (React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-panelIcon" }, isMinWidthArcBreakpointL && React__default.createElement(Icon, { icon: icon, size: 48 }))),
+                React__default.createElement("span", { "data-cy": "linkTitle", className: "arc-SiteHeaderV2SubNavItem-title" }, linkTitle))),
+        React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderV2SubNavItem-link", title: React__default.createElement("span", null,
+                title,
+                subTitle && (React__default.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "See all ".concat(title), fill: "outlined" })) : undefined, isNavItem: false, fade: fade }, children)))));
+};
+
+var VerticalDivider = function () {
+    return React__default.createElement("li", { className: "arc-SiteHeaderV2VerticalDivider-line" });
+};
+
+var defaultContext = { transparent: false };
+var Context = createContext(defaultContext);
+var Provider = Context.Provider;
+/**
+ * Use `SiteHeaderV2` to display brand logo and navigation at the top of a page.
+ */
+var SiteHeaderV2 = function (_a) {
+    var _b;
+    var children = _a.children, basket = _a.basket, _c = _a.hasLogin, hasLogin = _c === void 0 ? true : _c, _d = _a.isTransparent, isTransparent = _d === void 0 ? false : _d, _e = _a.loginHref, loginHref = _e === void 0 ? "/login" : _e, logoOnClick = _a.logoOnClick, loginOnClick = _a.loginOnClick, _f = _a.loginTitle, loginTitle = _f === void 0 ? "Log in / Register" : _f, _g = _a.logoHref, logoHref = _g === void 0 ? "/" : _g, _h = _a.logoLabel, logoLabel = _h === void 0 ? "Home" : _h, search = _a.search, subBrand = _a.subBrand, props = __rest(_a, ["children", "basket", "hasLogin", "isTransparent", "loginHref", "logoOnClick", "loginOnClick", "loginTitle", "logoHref", "logoLabel", "search", "subBrand"]);
+    var _j = useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
+    var _k = useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item &&
+                item.type !== NodeItem &&
+                item.type !== NavItem &&
+                item.type !== NavItemWithSubNav &&
+                item.type !== Fragment) {
+                throw new Error("Illegal child passed to <SiteHeaderV2 />. Ensure to only use <SiteHeaderV2.NavItem /> or <SiteHeaderV2.NavItemWithSubNav />");
+            }
+        });
+    }, [children]);
+    useEffect(function () {
+        if (!isMinWidthArcBreakpointL && menuOpen) {
+            document.body.classList.add("arc-body--overflowHidden");
+        }
+        else {
+            document.body.classList.remove("arc-body--overflowHidden");
+        }
+        return function () {
+            document.body.classList.remove("arc-body--overflowHidden");
+        };
+    }, [isMinWidthArcBreakpointL, menuOpen]);
+    useEffect(function () {
+        var handleKeydown = function (e) {
+            if (e.key === "Escape" || e.keyCode === 27) {
+                setMenuOpen(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeydown);
+        return function () {
+            window.removeEventListener("keydown", handleKeydown);
+        };
+    }, [setMenuOpen]);
+    useEffect(function () {
+        var handleClick = function (e) {
+            if (e.target.getAttribute("href")) {
+                setMenuOpen(false);
+            }
+        };
+        document.addEventListener("click", handleClick);
+        return function () {
+            document.removeEventListener("click", handleClick);
+        };
+    }, [setMenuOpen]);
+    useEffect(function () {
+        // useEffect does not run in ReactDomServer renders
+        setHasClientSideJavaScript(true);
+    }, [setHasClientSideJavaScript]);
+    return (React__default.createElement(Provider, { value: { transparent: isTransparent } },
+        React__default.createElement("div", __assign({ className: classNames((_b = {},
+                _b["arc-SiteHeaderV2"] = true,
+                _b["arc-SiteHeaderV2--menuOpen"] = menuOpen,
+                _b["arc-no-js"] = !hasClientSideJavaScript,
+                _b)) }, filterDataAttrs(props), { "data-transparent": isTransparent || null }),
+            React__default.createElement(Surface, { background: !isTransparent || (menuOpen && !isMinWidthArcBreakpointL)
+                    ? "brand-flat"
+                    : undefined },
+                React__default.createElement("div", { className: "arc-SiteHeaderV2-inner" },
+                    React__default.createElement("a", { className: "arc-SiteHeaderV2-brand", onClick: handleLinkClick({
+                            handler: logoOnClick
+                        }), href: logoHref },
+                        React__default.createElement(BrandLogo, { label: logoLabel, subBrand: subBrand, size: 40 })),
+                    children && (React__default.createElement("nav", { className: "arc-SiteHeaderV2-nav" },
+                        React__default.createElement("div", { className: "arc-SiteHeaderV2-menuButton" },
+                            React__default.createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
+                        React__default.createElement("div", { className: "arc-SiteHeaderV2-main" },
+                            React__default.createElement("ul", { className: "arc-SiteHeaderV2-navItems" }, children),
+                            hasLogin && (React__default.createElement(React__default.Fragment, null, loginOnClick ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
+                                React__default.createElement("button", { className: "arc-SiteHeaderV2-mobileLogin", onClick: loginOnClick },
+                                    loginTitle,
+                                    React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
+                                        React__default.createElement(BtIconChevronRight2Px, null))))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
+                                React__default.createElement("a", { className: "arc-SiteHeaderV2-mobileLogin", href: loginHref },
+                                    loginTitle,
+                                    React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
+                                        React__default.createElement(BtIconChevronRight2Px, null)))))))))),
+                    (basket || hasLogin || search) && (React__default.createElement("div", { className: "arc-SiteHeaderV2-secondary" },
+                        search ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-search" }, search)) : null,
+                        basket ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-basket" }, basket)) : null,
+                        hasLogin && (React__default.createElement(React__default.Fragment, null, loginOnClick ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-loginLink arc-SiteHeaderV2-loginLink--function", onClick: loginOnClick }, loginTitle)) : (React__default.createElement("a", { className: "arc-SiteHeaderV2-loginLink", href: loginHref }, loginTitle)))))))))));
+};
+SiteHeaderV2.Column = Column;
+SiteHeaderV2.Item = Item;
+SiteHeaderV2.ItemGroup = ItemGroup;
+SiteHeaderV2.NavItem = NavItem;
+SiteHeaderV2.NodeItem = NodeItem;
+SiteHeaderV2.NavItemWithSubNav = NavItemWithSubNav;
+SiteHeaderV2.SubNavItem = SubNavItem;
+SiteHeaderV2.VerticalDivider = VerticalDivider;
+
 function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true  } = {}) {
     return function handleEvent(event) {
         originalEventHandler === null || originalEventHandler === void 0 || originalEventHandler(event);
@@ -40957,11 +41048,11 @@ const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07b
 /** Use `Switch` to toggle between checked and not checked. */
 var Switch = function (_a) {
     var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, name = _a.name, onBlur = _a.onBlur, value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, id = _a.id, _c = _a.labelSize, labelSize = _c === void 0 ? "s" : _c, statusText = _a.statusText, _d = _a.hideLabel, hideLabel = _d === void 0 ? false : _d, props = __rest(_a, ["defaultChecked", "onCheckedChange", "label", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "labelSize", "statusText", "hideLabel"]);
-    var surface = useContext(Context$3).surface;
-    return (React__default.createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: hideLabel ? "" : label, labelSize: labelSize, requirementStatus: "not-applicable" },
+    var surface = useContext(Context$5).surface;
+    return (React__default.createElement(FormControl, { errorMessage: errorMessage, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: "not-applicable" },
         !hideLabel && React__default.createElement(VerticalSpace, { size: "8" }),
         React__default.createElement("div", { className: "arc-Switch-container" },
-            React__default.createElement($6be4966fd9bbc698$export$be92b6f5f03c0fe9, __assign({ id: id, "aria-label": label, defaultChecked: defaultChecked, name: name, value: value, onBlur: onBlur, onCheckedChange: onCheckedChange, disabled: isDisabled, className: classNames("arc-Switch", {
+            React__default.createElement($6be4966fd9bbc698$export$be92b6f5f03c0fe9, __assign({ id: id, defaultChecked: defaultChecked, name: name, value: value, onBlur: onBlur, onCheckedChange: onCheckedChange, disabled: isDisabled, className: classNames("arc-Switch", {
                     "arc-Switch--large": labelSize === "l",
                     "arc-Switch--isDisabled": isDisabled,
                     "arc-Switch--onDarkSurface": surface === "dark"
@@ -41350,7 +41441,7 @@ const $69cb30bb0017df05$export$7c6e2c02157bb7d2 = $69cb30bb0017df05$export$bd905
 
 var Tab = function (_a) {
     var label = _a.label, value = _a.value, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["label", "value", "icon", "iconActive"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     return (React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: classNames("arc-Tab-trigger", {
             "arc-Tab-trigger--onDarkSurface": surface === "dark",
             "arc-Tab-trigger--hasIcon": icon || iconActive
@@ -41386,7 +41477,7 @@ const BtIconArrowLeftFill = (props) =>
 
 var TabsList = function (_a) {
     var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel, props = __rest(_a, ["children", "type", "isJustified", "ariaLabel"]);
-    var surface = useContext(Context$3).surface;
+    var surface = useContext(Context$5).surface;
     var tabsRef = useRef(null);
     var _b = useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
     var _c = useState(false), leftOverflow = _c[0], setLeftOverflow = _c[1];
@@ -41444,8 +41535,8 @@ Tabs.Content = TabContent;
 
 /** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
 var TextArea = forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _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, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText"]);
-    var surface = useContext(Context$3).surface;
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _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, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, width = _a.width, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText", "width"]);
+    var surface = useContext(Context$5).surface;
     var ourRef = useRef(null);
     var _j = useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _j[0], setCharacterCount = _j[1];
     var setSmartHeight = function (el) {
@@ -41467,7 +41558,7 @@ var TextArea = forwardRef(function (_a, ref) {
         onChange && onChange(e);
         setCharacterCount(e.target.value.length);
     };
-    return (React__default.createElement(FormControl, __assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
+    return (React__default.createElement(FormControl, __assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
             showCharacterCount && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Text, { tone: isDisabled ? "muted" : "default" },
                 React__default.createElement("span", { className: "arc-TextArea-characterCount" },
@@ -41478,7 +41569,7 @@ var TextArea = forwardRef(function (_a, ref) {
                 "arc-TextArea--noResize": resize !== "manual",
                 "arc-TextArea--onDarkSurface": surface === "dark",
                 "arc-TextArea--invalid": errorMessage
-            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef })));
+            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width } })));
 });
 
 /**
@@ -41486,8 +41577,8 @@ var TextArea = forwardRef(function (_a, ref) {
  */
 var TextInput = forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, 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, 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, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "prefix", "suffix", "inputAlignment"]);
-    var surface = useContext(Context$3).surface;
+    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 = __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 = useContext(Context$5).surface;
     var _m = useState(false), showPasswordToggle = _m[0], setShowPasswordToggle = _m[1];
     var inferredInputProps = useNumericInput({
         inputMode: inputMode,
@@ -41501,8 +41592,14 @@ var TextInput = forwardRef(function (_a, ref) {
         helper: helper,
         disclosureText: disclosureText
     }).ariaDescribedby;
+    var buttonIconSize = {
+        s: 24,
+        m: 32,
+        l: 40
+    };
     return (React__default.createElement("div", __assign({ className: classNames((_b = {
                 "arc-TextInput": true,
+                "arc-TextInput--withAdditionalControl": showPassword || iconButton,
                 "arc-TextInput--alignRight": inputAlignment === "right",
                 "arc-TextInput--withPasswordToggle": showPassword,
                 "arc-TextInput--isDisabled": isDisabled,
@@ -41513,12 +41610,18 @@ var TextInput = forwardRef(function (_a, ref) {
             },
             _b["arc-TextInput--size".concat(inputSize && inputSize.toUpperCase())] = inputSize && inputSize !== "m",
             _b)) }, filterDataAttrs(props)),
-        React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
-            React__default.createElement("div", { className: "arc-TextInput-inputWrapper" },
+        React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
+            React__default.createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width } },
                 prefix && (React__default.createElement("span", { className: "arc-TextInput-prefix", "aria-hidden": true }, prefix)),
-                React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)),
+                React__default.createElement("input", __assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)),
+                iconButton && !showPassword && (React__default.createElement("div", { className: "arc-TextInput-additionalControl" },
+                    React__default.createElement("button", { ref: iconButton.ref, className: "arc-TextInput-iconButton", disabled: isReadOnly || isDisabled, "aria-label": iconButton.label, onFocus: iconButton.onFocus, onClick: function (e) {
+                            e.preventDefault();
+                            iconButton.onClick();
+                        } },
+                        React__default.createElement(Icon, { icon: iconButton.icon, size: buttonIconSize[inputSize] })))),
                 suffix && !showPassword ? (React__default.createElement("span", { className: "arc-TextInput-suffix", "aria-hidden": true }, suffix)) : null,
-                showPassword && (React__default.createElement(React__default.Fragment, null,
+                showPassword && (React__default.createElement("div", { className: "arc-TextInput-additionalControl" },
                     React__default.createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
                     React__default.createElement(VisuallyHidden, null,
                         React__default.createElement("div", { "aria-live": "polite" },
@@ -41527,6 +41630,263 @@ var TextInput = forwardRef(function (_a, ref) {
                                 : "Your password is hidden")))))))));
 });
 
+const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
+const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
+const $5cb92bef7577960e$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
+let $5cb92bef7577960e$var$originalBodyPointerEvents;
+const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ createContext({
+    layers: new Set(),
+    layersWithOutsidePointerEventsDisabled: new Set(),
+    branches: new Set()
+});
+const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    var _node$ownerDocument;
+    const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
+    const context = useContext($5cb92bef7577960e$var$DismissableLayerContext);
+    const [node1, setNode] = useState(null);
+    const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
+    const [, force] = useState({});
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>setNode(node)
+    );
+    const layers = Array.from(context.layers);
+    const [highestLayerWithOutsidePointerEventsDisabled] = [
+        ...context.layersWithOutsidePointerEventsDisabled
+    ].slice(-1); // prettier-ignore
+    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore
+    const index = node1 ? layers.indexOf(node1) : -1;
+    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+    const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
+    const pointerDownOutside = $5cb92bef7577960e$var$usePointerDownOutside((event)=>{
+        const target = event.target;
+        const isPointerDownOnBranch = [
+            ...context.branches
+        ].some((branch)=>branch.contains(target)
+        );
+        if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
+        onPointerDownOutside === null || onPointerDownOutside === void 0 || onPointerDownOutside(event);
+        onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
+        if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
+    }, ownerDocument);
+    const focusOutside = $5cb92bef7577960e$var$useFocusOutside((event)=>{
+        const target = event.target;
+        const isFocusInBranch = [
+            ...context.branches
+        ].some((branch)=>branch.contains(target)
+        );
+        if (isFocusInBranch) return;
+        onFocusOutside === null || onFocusOutside === void 0 || onFocusOutside(event);
+        onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
+        if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
+    }, ownerDocument);
+    $addc16e1bbe58fd0$export$3a72a57244d6e765((event)=>{
+        const isHighestLayer = index === context.layers.size - 1;
+        if (!isHighestLayer) return;
+        onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event);
+        if (!event.defaultPrevented && onDismiss) {
+            event.preventDefault();
+            onDismiss();
+        }
+    }, ownerDocument);
+    useEffect(()=>{
+        if (!node1) return;
+        if (disableOutsidePointerEvents) {
+            if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+                $5cb92bef7577960e$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+                ownerDocument.body.style.pointerEvents = 'none';
+            }
+            context.layersWithOutsidePointerEventsDisabled.add(node1);
+        }
+        context.layers.add(node1);
+        $5cb92bef7577960e$var$dispatchUpdate();
+        return ()=>{
+            if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $5cb92bef7577960e$var$originalBodyPointerEvents;
+        };
+    }, [
+        node1,
+        ownerDocument,
+        disableOutsidePointerEvents,
+        context
+    ]);
+    /**
+   * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
+   * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
+   * and add it to the end again so the layering order wouldn't be _creation order_.
+   * We only want them to be removed from context stacks when unmounted.
+   */ useEffect(()=>{
+        return ()=>{
+            if (!node1) return;
+            context.layers.delete(node1);
+            context.layersWithOutsidePointerEventsDisabled.delete(node1);
+            $5cb92bef7577960e$var$dispatchUpdate();
+        };
+    }, [
+        node1,
+        context
+    ]);
+    useEffect(()=>{
+        const handleUpdate = ()=>force({})
+        ;
+        document.addEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate);
+        return ()=>document.removeEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate)
+        ;
+    }, []);
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$1.div, _extends({}, layerProps, {
+        ref: composedRefs,
+        style: {
+            pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
+            ...props.style
+        },
+        onFocusCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(props.onFocusCapture, focusOutside.onFocusCapture),
+        onBlurCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(props.onBlurCapture, focusOutside.onBlurCapture),
+        onPointerDownCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
+    }));
+});
+const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const context = useContext($5cb92bef7577960e$var$DismissableLayerContext);
+    const ref = useRef(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, ref);
+    useEffect(()=>{
+        const node = ref.current;
+        if (node) {
+            context.branches.add(node);
+            return ()=>{
+                context.branches.delete(node);
+            };
+        }
+    }, [
+        context.branches
+    ]);
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$1.div, _extends({}, props, {
+        ref: composedRefs
+    }));
+});
+/* -----------------------------------------------------------------------------------------------*/ /**
+ * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
+ * to mimic layer dismissing behaviour present in OS.
+ * Returns props to pass to the node we want to check for outside events.
+ */ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
+    const handlePointerDownOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onPointerDownOutside);
+    const isPointerInsideReactTreeRef = useRef(false);
+    const handleClickRef = useRef(()=>{});
+    useEffect(()=>{
+        const handlePointerDown = (event)=>{
+            if (event.target && !isPointerInsideReactTreeRef.current) {
+                const eventDetail = {
+                    originalEvent: event
+                };
+                function handleAndDispatchPointerDownOutsideEvent() {
+                    $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
+                        discrete: true
+                    });
+                }
+                /**
+         * On touch devices, we need to wait for a click event because browsers implement
+         * a ~350ms delay between the time the user stops touching the display and when the
+         * browser executres events. We need to ensure we don't reactivate pointer-events within
+         * this timeframe otherwise the browser may execute events that should have been prevented.
+         *
+         * Additionally, this also lets us deal automatically with cancellations when a click event
+         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
+         *
+         * This is why we also continuously remove the previous listener, because we cannot be
+         * certain that it was raised, and therefore cleaned-up.
+         */ if (event.pointerType === 'touch') {
+                    ownerDocument.removeEventListener('click', handleClickRef.current);
+                    handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
+                    ownerDocument.addEventListener('click', handleClickRef.current, {
+                        once: true
+                    });
+                } else handleAndDispatchPointerDownOutsideEvent();
+            }
+            isPointerInsideReactTreeRef.current = false;
+        };
+        /**
+     * if this hook executes in a component that mounts via a `pointerdown` event, the event
+     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
+     * this by delaying the event listener registration on the document.
+     * This is not React specific, but rather how the DOM works, ie:
+     * ```
+     * button.addEventListener('pointerdown', () => {
+     *   console.log('I will log');
+     *   document.addEventListener('pointerdown', () => {
+     *     console.log('I will also log');
+     *   })
+     * });
+     */ const timerId = window.setTimeout(()=>{
+            ownerDocument.addEventListener('pointerdown', handlePointerDown);
+        }, 0);
+        return ()=>{
+            window.clearTimeout(timerId);
+            ownerDocument.removeEventListener('pointerdown', handlePointerDown);
+            ownerDocument.removeEventListener('click', handleClickRef.current);
+        };
+    }, [
+        ownerDocument,
+        handlePointerDownOutside
+    ]);
+    return {
+        // ensures we check React component tree (not just DOM tree)
+        onPointerDownCapture: ()=>isPointerInsideReactTreeRef.current = true
+    };
+}
+/**
+ * Listens for when focus happens outside a react subtree.
+ * Returns props to pass to the root (node) of the subtree we want to check.
+ */ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
+    const handleFocusOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onFocusOutside);
+    const isFocusInsideReactTreeRef = useRef(false);
+    useEffect(()=>{
+        const handleFocus = (event)=>{
+            if (event.target && !isFocusInsideReactTreeRef.current) {
+                const eventDetail = {
+                    originalEvent: event
+                };
+                $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+                    discrete: false
+                });
+            }
+        };
+        ownerDocument.addEventListener('focusin', handleFocus);
+        return ()=>ownerDocument.removeEventListener('focusin', handleFocus)
+        ;
+    }, [
+        ownerDocument,
+        handleFocusOutside
+    ]);
+    return {
+        onFocusCapture: ()=>isFocusInsideReactTreeRef.current = true
+        ,
+        onBlurCapture: ()=>isFocusInsideReactTreeRef.current = false
+    };
+}
+function $5cb92bef7577960e$var$dispatchUpdate() {
+    const event = new CustomEvent($5cb92bef7577960e$var$CONTEXT_UPDATE);
+    document.dispatchEvent(event);
+}
+function $5cb92bef7577960e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete  }) {
+    const target = detail.originalEvent.target;
+    const event = new CustomEvent(name, {
+        bubbles: false,
+        cancelable: true,
+        detail: detail
+    });
+    if (handler) target.addEventListener(name, handler, {
+        once: true
+    });
+    if (discrete) $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event);
+    else target.dispatchEvent(event);
+}
+const $5cb92bef7577960e$export$be92b6f5f03c0fe9 = $5cb92bef7577960e$export$177fb62ff3ec1f22;
+const $5cb92bef7577960e$export$aecb2ddcb55c95be = $5cb92bef7577960e$export$4d5eb2109db14228;
+
+const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    var _globalThis$document;
+    const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props;
+    return container ? /*#__PURE__*/ $7SXl2$reactdom.createPortal(/*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$1.div, _extends({}, portalProps, {
+        ref: forwardedRef
+    })), container) : null;
+});
+
 /* -------------------------------------------------------------------------------------------------
  * ToastProvider
  * -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$PROVIDER_NAME = 'ToastProvider';
@@ -42034,7 +42394,7 @@ $054eb8030ebde76e$var$ToastImpl.propTypes = {
         return ()=>window.clearTimeout(timer)
         ;
     }, []);
-    return isAnnounced ? null : /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c$1, {
+    return isAnnounced ? null : /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c, {
         asChild: true
     }, /*#__PURE__*/ createElement($ea1ef594cf570d83$export$439d29a4e110a164, announceProps, renderAnnounceText && /*#__PURE__*/ createElement(Fragment, null, context.label, " ", children)));
 };
@@ -42223,37 +42583,21 @@ var Truncate = function (_a) {
     return (React__default.createElement("div", __assign({ className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, filterDataAttrs(props)), children));
 };
 
-// move arrow to right all the time when no meta text
-// 1 typography card + 2 media cards
 var TypographyCard = function (_a) {
     var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, _c = _a.pathway, pathway = _c === void 0 ? "light" : _c, _d = _a.buttonIcon, buttonIcon = _d === void 0 ? "arrow" : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "linkData", "pathway", "buttonIcon", "headingLevel"]);
-    var HeadingElement = "h".concat(headingLevel);
-    var icons = {
-        arrow: {
-            regular: BtIconArrowRight,
-            hover: BtIconArrowRightFill
-        },
-        play: {
-            regular: BtIconPlay,
-            hover: BtIconPlayFill
-        }
-    };
+    var _f = useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    var isDarkPathway = pathway === "dark";
     return (React__default.createElement("div", __assign({ className: classNames("arc-TypographyCard", {
-            "arc-TypographyCard--darkPathway": pathway === "dark",
-            "arc-TypographyCard--lightPathway": pathway === "light"
+            "arc-TypographyCard--outlined": showHoverState,
+            "arc-TypographyCard--darkPathway": isDarkPathway,
+            "arc-TypographyCard--lightPathway": !isDarkPathway
         }) }, filterDataAttrs(props)),
         React__default.createElement("div", { className: "arc-TypographyCard-contentContainer" },
             label && (React__default.createElement("div", { className: "arc-TypographyCard-labelContainer" },
-                React__default.createElement("span", { className: "arc-TypographyCard-label" }, label))),
-            React__default.createElement(HeadingElement, { className: "arc-TypographyCard-heading" },
-                React__default.createElement("a", __assign({ className: "arc-TypographyCard-headingLink", href: url, onClick: onClick }, filterDataAttrs(linkData)), heading))),
-        React__default.createElement("div", { className: "arc-TypographyCard-footer" },
-            React__default.createElement("div", { className: "arc-TypographyCard-metaTextContainer" }, metaText && (React__default.createElement("span", { className: "arc-TypographyCard-metaText" }, metaText))),
-            React__default.createElement("div", { className: "arc-TypographyCard-footerButton" },
-                React__default.createElement("div", { className: classNames("arc-TypographyCard-footerButtonIcon", "arc-TypographyCard-footerButtonIcon--regular") },
-                    React__default.createElement(Icon, { icon: icons[buttonIcon].regular, size: 40 })),
-                React__default.createElement("div", { className: "arc-TypographyCard-footerButtonIcon arc-TypographyCard-footerButtonIcon--hover" },
-                    React__default.createElement(Icon, { icon: icons[buttonIcon].hover, size: 40 }))))));
+                React__default.createElement(CardLabel, { isDarkPathway: isDarkPathway, isBold: false, text: label }))),
+            React__default.createElement(CardHeading, { size: "m", linkData: linkData, heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, isDarkPathway: isDarkPathway, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
+        React__default.createElement(CardFooter, { showButton: true, isDarkPathway: isDarkPathway, showFilledIcon: showHoverState, buttonIcon: buttonIcon, metaText: metaText })));
 };
 
 /**
@@ -42281,5 +42625,5 @@ var UniversalHeaderItem = function (_a) {
 };
 UniversalHeader.Item = UniversalHeaderItem;
 
-export { Alert, Align, Badge, Base, Box, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, DisclosureMini, Elevation, Filter, FormControl, Group, Heading, Icon, Image, InformationCard, Markup, MediaCard, Modal, Pagination, PaginationSimple, Poster, ProgressBar, ProgressStepper, RadioGroup, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, Surface, Context$3 as SurfaceContext, Switch, Tabs, Tag, Text, TextArea, TextInput, Toast, Truncate, TypographyCard, UniversalHeader, VerticalSpace, VisuallyHidden };
+export { Alert, Align, Badge, Base, Box, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, DisclosureMini, Elevation, Filter, FormControl, Group, Heading, Icon, Image, InformationCard, Markup, MediaCard, Modal, Pagination, PaginationSimple, Poster, ProgressBar, ProgressStepper, RadioGroup, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, SiteHeaderV2, Surface, Context$5 as SurfaceContext, Switch, Tabs, Tag, Text, TextArea, TextInput, Toast, Truncate, TypographyCard, UniversalHeader, VerticalSpace, VisuallyHidden };
 //# sourceMappingURL=index.es.js.map