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

package/lib/index.cjs

@@ -356,6 +356,17 @@ var AlignItem = function (_a) {
     return React.createElement("div", { className: "arc-Align-item" }, children);
 };
 
+/**
+ * Do not edit directly
+ * Generated on Fri, 15 Aug 2025 18:14:58 GMT
+ */
+var ArcSizeBreakpointsXs = "320px";
+var ArcSizeBreakpointsS = "636px";
+var ArcSizeBreakpointsM = "768px";
+var ArcSizeBreakpointsL = "1024px";
+var ArcSizeBreakpointsXl = "1280px";
+var ArcSizeBreakpointsXxl = "1440px";
+
 var defaultContext$3 = { surface: "light" };
 var Context$3 = React.createContext(defaultContext$3);
 var Provider$5 = Context$3.Provider;
@@ -400,6 +411,26 @@ var backgroundsShared = [
 var backgrounds = __spreadArray([], backgroundsShared, true);
 var backgroundsBT = __spreadArray([], backgroundsShared, true);
 
+/**
+ * Use `Text` to display text.
+ */
+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, _h = _a.elementType, elementType = _h === void 0 ? "span" : _h, props = __rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone", "elementType"]);
+    var surface = React.useContext(Context$3).surface;
+    var Element = elementType;
+    return (React.createElement(Element, __assign({ id: id, className: classNames((_b = {
+                "arc-Text": true
+            },
+            _b[suffixModifier("arc-Text--align", align)] = align !== "left",
+            _b["arc-Text--inline"] = isInline,
+            _b["arc-Text--measured"] = isMeasured,
+            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
+            _b["arc-Text--".concat(tone)] = tone !== "default",
+            _b["arc-Text--onDarkSurface"] = surface === "dark",
+            _b)) }, filterAttrs(props)), children));
+};
+
 /**
  * Use `Icon` to display brand iconography.
  */
@@ -443,11 +474,256 @@ var ThemeIcon = function (_a) {
             _b)) }, filterAttrs(props))));
 };
 
+/**
+ * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
+ */
+var VisuallyHidden$2 = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement("span", __assign({ "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, filterAttrs(props)), children));
+};
+
+/**
+ * Use `Link` to direct users to a new page or piece of information.
+ */
+var Link = function (_a) {
+    var id = _a.id, href = _a.href, title = _a.title, rel = _a.rel, target = _a.target, children = _a.children, onClick = _a.onClick, screenReaderText = _a.screenReaderText, _b = _a.isButton, isButton = _b === void 0 ? false : _b, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, props = __rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
+    var surface = React.useContext(Context$3).surface;
+    var isExternalLink = target === "_blank";
+    var textArray = children.split(" ");
+    var firstText = textArray.slice(0, -1).join(" ");
+    var lastWord = textArray[textArray.length - 1];
+    var commonProps = {
+        id: id,
+        onClick: onClick,
+        className: classNames("arc-Link", "arc-Link--".concat(size), {
+            "arc-Link--onDarkSurface": surface === "dark",
+            "arc-Link--onLightSurface": surface !== "dark",
+            "arc-Link--isImplied": isImplied,
+        }),
+    };
+    var elementProps = {
+        a: __assign(__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
+        button: __assign({}, commonProps),
+        span: __assign({}, commonProps),
+    };
+    var LinkElement = isButton ? "button" : href ? "a" : "span";
+    return (React.createElement(LinkElement, __assign({}, elementProps[LinkElement], filterAttrs(props)),
+        React.createElement("div", { className: "arc-Link-wrapper" },
+            React.createElement(VisuallyHidden$2, null,
+                screenReaderText || children,
+                isExternalLink && " (Opens in new window)"),
+            firstText && (React.createElement("span", { "aria-hidden": true, className: "arc-Link-text" },
+                firstText,
+                "\u00A0")),
+            React.createElement("span", { className: "arc-Link-iconWrapper" },
+                React.createElement("span", { "aria-hidden": true, className: "arc-Link-text" }, lastWord),
+                isExternalLink && (React.createElement(ThemeIcon, { icon: "linkExternal", size: size === "s" ? 20 : 24 }))))));
+};
+
+/**
+ * Use `Heading` to display heading text.
+ */
+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, _e = _a.color, color = _e === void 0 ? "auto" : _e, children = _a.children, level = _a.level, isInline = _a.isInline, _f = _a.fontStyle, fontStyle = _f === void 0 ? "default" : _f, _g = _a.isResponsive, isResponsive = _g === void 0 ? true : _g, size = _a.size, id = _a.id, props = __rest(_a, ["align", "casing", "color", "children", "level", "isInline", "fontStyle", "isResponsive", "size", "id"]);
+    var surface = React.useContext(Context$3).surface;
+    var Element = "span";
+    if (level) {
+        Element = "h".concat(level);
+    }
+    return (React.createElement(Element, __assign({ id: id, className: classNames(" arc-Heading arc-Heading--".concat(camelcase(fontStyle)), (_b = {
+                "arc-Heading--inline": isInline,
+                "arc-Heading--fixedSize": isResponsive === false
+            },
+            _b[suffixModifier("arc-Heading--align", align)] = align && align !== "left",
+            _b["arc-Heading--size".concat(size && size.toUpperCase())] = size,
+            _b["arc-Heading--casingNone"] = casing === "none",
+            _b["arc-Heading--colorBrand"] = color === "brand",
+            _b["arc-Heading--onDarkSurface"] = surface === "dark",
+            _b["arc-Heading--isInline"] = isInline,
+            _b)) }, filterAttrs(props)), children));
+};
+
+/**
+ * Optionally define ariaDescribedBy if errorMessage or helper exist.
+ */
+var useAriaDescribedby = function (_a) {
+    var id = _a.id, _b = _a.idError, idError = _b === void 0 ? "".concat(id, "-error") : _b, _c = _a.idHelper, idHelper = _c === void 0 ? "".concat(id, "-helper") : _c, _d = _a.idDisclosure, idDisclosure = _d === void 0 ? "".concat(id, "-disclosure") : _d, errorMessage = _a.errorMessage, helper = _a.helper, disclosureText = _a.disclosureText;
+    if (!id) {
+        return {
+            ariaDescribedby: undefined,
+            idHelper: undefined,
+            idError: undefined,
+            idDisclosure: undefined,
+        };
+    }
+    var ariaDescribedbyArr = [];
+    if (errorMessage) {
+        ariaDescribedbyArr.push(idError);
+    }
+    if (helper) {
+        ariaDescribedbyArr.push(idHelper);
+    }
+    if (disclosureText) {
+        ariaDescribedbyArr.push(idDisclosure);
+    }
+    var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
+    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper, idDisclosure: idDisclosure };
+};
+
+/**
+ * Detect interaction mode
+ */
+var useInteractionMode = function () {
+    var _a = React.useState("pointer"), interactionMode = _a[0], setInteractionMode = _a[1];
+    React.useEffect(function () {
+        var onKeyDown = function (event) {
+            if (event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            setInteractionMode("keyboard");
+        };
+        var onPointerDown = function () {
+            setInteractionMode("pointer");
+        };
+        if (typeof window !== "undefined") {
+            document.addEventListener("keydown", onKeyDown, true);
+            document.addEventListener("click", onPointerDown, true);
+        }
+        return function () {
+            if (typeof window !== "undefined") {
+                document.removeEventListener("keydown", onKeyDown);
+                document.removeEventListener("click", onPointerDown);
+            }
+        };
+    }, []);
+    return { interactionMode: interactionMode };
+};
+
+/**
+ * Infer the correct inputMode, pattern and type if specifying a `number` type.
+ */
+var useNumericInput = function (props) {
+    var type = props.type === "number" ? "text" : props.type;
+    var inputMode = props.inputMode;
+    if (!props.inputMode) {
+        if (props.type === "email") {
+            inputMode = "email";
+        }
+        else if (props.type === "number") {
+            inputMode = "numeric";
+        }
+        else if (props.type === "tel") {
+            inputMode = "tel";
+        }
+        else if (props.type === "url") {
+            inputMode = "url";
+        }
+    }
+    var pattern = props.pattern;
+    if (!props.pattern && props.type === "number") {
+        pattern = "[0-9]*";
+    }
+    return { inputMode: inputMode, pattern: pattern, type: type };
+};
+
+var usePagination = function (pageCount, selectedPage) {
+    var formatValues = function (range) {
+        return range.map(function (value) { return value.toString(); });
+    };
+    return React.useMemo(function () {
+        if (pageCount > 7 && selectedPage < 5) {
+            // show 1 - 5 the right dots are visible.
+            return formatValues(__spreadArray(__spreadArray([], Array.from({ length: 5 }, function (_value, index) { return index + 1; }), true), [
+                "...",
+                pageCount,
+            ], false));
+        }
+        if (pageCount > 7 && selectedPage >= pageCount - 3) {
+            // show numbers to the end but the left dots are visible
+            return formatValues(__spreadArray([
+                1,
+                "..."
+            ], Array.from({ length: 5 }, function (_value, index) { return pageCount - index; }).reverse(), true));
+        }
+        if (pageCount > 7 && selectedPage >= 5 && selectedPage < pageCount - 3) {
+            // show selected page with one number either side and both the left and the right dots are visible.
+            return formatValues([
+                1,
+                "...",
+                selectedPage - 1,
+                selectedPage,
+                selectedPage + 1,
+                "...",
+                pageCount,
+            ]);
+        }
+        // show all pages from pageCount
+        return formatValues(Array.from({ length: pageCount }, function (_value, index) { return index + 1; }));
+    }, [pageCount, selectedPage]);
+};
+
+var useThemeElement = function () {
+    var _a = React.useState(undefined), themeElement = _a[0], setElement = _a[1];
+    var setThemeElement = function (el) {
+        el &&
+            setElement(el.closest(".arc-ds-sys-theme") || undefined);
+    };
+    return [themeElement, setThemeElement];
+};
+
+var useUniqueString = function (value) {
+    var id = React.useId();
+    return "".concat(value, "-").concat(id);
+};
+
+/**
+ * @typedef MediaQueryOutputs
+ * @param {boolean} matches - does the document match the media query?
+ */
+/**
+ * Handle with care!
+ *
+ * If you need to change something in the browser based on @media query, you
+ * probably don’t need this hook. Use CSS media queries instead.
+ *
+ * Sometimes UI requirements are not achievable with CSS media queries alone. In
+ * these rare cases, use this hook to make media query matches available
+ * to React JavaScript code.
+ *
+ * @param {string} mediaQuery - the media query to parse
+ * @returns {MediaQueryOutputs}
+ */
+var useMediaQuery = function (mediaQuery) {
+    var mediaQueryList = typeof window !== "undefined" ? window.matchMedia(mediaQuery) : undefined;
+    var _a = React.useState(false), matches = _a[0], setMatches = _a[1];
+    React.useEffect(function () {
+        setMatches(typeof window !== "undefined"
+            ? window.matchMedia(mediaQuery).matches
+            : false);
+    }, [mediaQuery]);
+    React.useEffect(function () {
+        var onMatchMedia = function (event) { return setMatches(event.matches); };
+        // Using deprecated addListener methods here for IE & Safari 13 support
+        if (mediaQueryList) {
+            mediaQueryList.addListener(onMatchMedia);
+        }
+        return function () { return mediaQueryList && mediaQueryList.removeListener(onMatchMedia); };
+    }, [mediaQueryList]);
+    return matches;
+};
+
 /** Use `Alert` to inform the user of important changes or actions. */
 var Alert = function (_a) {
-    var _b;
-    var heading = _a.heading, description = _a.description, link = _a.link, linkText = _a.linkText, linkAriaLabel = _a.linkAriaLabel, _c = _a.status, status = _c === void 0 ? "general" : _c, isDismissable = _a.isDismissable, onDismiss = _a.onDismiss, onLinkClick = _a.onLinkClick, icon = _a.icon, props = __rest(_a, ["heading", "description", "link", "linkText", "linkAriaLabel", "status", "isDismissable", "onDismiss", "onLinkClick", "icon"]);
-    var _d = React.useState(false), isDismissed = _d[0], setIsDismissed = _d[1];
+    var _b, _c;
+    var heading = _a.heading, headingLevel = _a.headingLevel, description = _a.description, links = _a.links, _d = _a.status, status = _d === void 0 ? "general" : _d, isDismissable = _a.isDismissable, onDismiss = _a.onDismiss, icon = _a.icon, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.autoFocusOnMount, autoFocusOnMount = _f === void 0 ? false : _f, props = __rest(_a, ["heading", "headingLevel", "description", "links", "status", "isDismissable", "onDismiss", "icon", "isMeasured", "autoFocusOnMount"]);
+    var _g = React.useState(false), isDismissed = _g[0], setIsDismissed = _g[1];
+    var alertRef = React.useRef(null);
+    React.useEffect(function () {
+        var _a;
+        autoFocusOnMount && ((_a = alertRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+    }, [autoFocusOnMount]);
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
     var onDismissHandler = function () {
         setIsDismissed(true);
         onDismiss && onDismiss();
@@ -458,32 +734,38 @@ var Alert = function (_a) {
         warning: "alertWarning",
         success: "alertSuccess",
     };
-    var handleLinkClick = function (event) {
-        event.preventDefault();
-        onLinkClick && onLinkClick();
-    };
     if (isDismissed) {
         return null;
     }
     return (React.createElement("div", __assign({ className: classNames("arc-Alert", (_b = {},
             _b["arc-Alert--".concat(status)] = status !== "general",
-            _b)), role: "alert" }, (status === "warning" && { "aria-live": "assertive" }), filterAttrs(props)),
+            _b)), role: "alert", tabIndex: -1, "aria-labelledby": "alertHeading", "aria-describedby": "alertDescription", ref: alertRef }, filterAttrs(props)),
         React.createElement("div", { className: "arc-Alert-icon" }, icon ? (React.createElement(Icon$1, { size: 24, icon: icon })) : (React.createElement(ThemeIcon, { size: 24, icon: statusIcons[status] }))),
         React.createElement("div", { className: "arc-Alert-content" },
-            React.createElement("div", { className: "arc-Alert-heading" }, heading),
-            description ? (React.isValidElement(description) ? (description) : (React.createElement("div", { className: "arc-Alert-description" }, description))) : null,
-            link && (React.createElement("a", __assign({ className: "arc-Alert-link", href: link, "aria-label": linkAriaLabel }, (onLinkClick && { onClick: handleLinkClick })), linkText))),
-        isDismissable && (React.createElement(React.Fragment, null,
-            React.createElement("button", { "aria-label": "dismiss alert", className: "arc-Alert-dismiss", onClick: onDismissHandler },
-                React.createElement(ThemeIcon, { size: 24, icon: "alertDismiss" }))))));
-};
-
-/**
- * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
- */
-var VisuallyHidden$2 = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (React.createElement("span", __assign({ "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, filterAttrs(props)), children));
+            React.createElement("div", { className: classNames("arc-Alert-heading", (_c = {},
+                    _c["arc-Alert-heading--isDismissable"] = isDismissable,
+                    _c)) },
+                React.createElement(Heading, { level: headingLevel, id: "alertHeading", size: isMinWidthArcBreakpointM ? "s" : "xs" },
+                    React.createElement(VisuallyHidden$2, null,
+                        status,
+                        " alert."),
+                    heading)),
+            description ? (React.isValidElement(description) ? (React.createElement("div", { className: "arc-Alert-description", id: "alertDescription" }, description)) : (React.createElement("div", { className: "arc-Alert-description" },
+                React.createElement(Text, { isMeasured: isMeasured, size: "s", id: "alertDescription" }, description)))) : null,
+            React.createElement("div", { className: "arc-Alert-links" },
+                React.createElement("ul", null, links === null || links === void 0 ? void 0 : links.map(function (link, index) {
+                    var _a;
+                    return (React.createElement("li", { key: index },
+                        React.createElement(Link, __assign({ href: link.href, "aria-label": link.screenReaderText, target: link.target, size: "s" }, (link.onClick && {
+                            onClick: function (e) {
+                                e.preventDefault();
+                                link.onClick && link.onClick(e);
+                            },
+                            isButton: true,
+                        })), (_a = link.children) !== null && _a !== void 0 ? _a : "")));
+                })))),
+        isDismissable && (React.createElement("button", { "aria-label": "dismiss alert", className: "arc-Alert-dismiss", onClick: onDismissHandler, tabIndex: 0 },
+            React.createElement(ThemeIcon, { size: 24, icon: "alertDismiss" })))));
 };
 
 var GooglePlayIcon = function () { return (React.createElement("svg", { "aria-hidden": true, role: "presentation", xmlns: "http://www.w3.org/2000/svg", id: "artwork", version: "1.1", height: "48", width: "162", viewBox: "0 0 135 40" },
@@ -577,41 +859,17 @@ var Image = function (_a) {
             _b["arc-Image--anchor".concat(anchor)] = fit === "cover",
             _b[suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
             _b)), style: __assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, filterAttrs(props)), children ? (React.createElement("picture", null,
-        children,
-        " ",
-        img)) : (React.createElement(React.Fragment, null, img))));
-};
-var ImageSource = function (_a) {
-    var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type, props = __rest(_a, ["height", "media", "srcSet", "sizes", "type"]);
-    return (React.createElement("source", __assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterAttrs(props))));
-};
-var fitOptions = ["cover"];
-var loadingOptions = ["eager", "lazy"];
-var overlayOptions = ["scrimBottomDark"];
-
-/**
- * Use `Heading` to display heading text.
- */
-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, _e = _a.color, color = _e === void 0 ? "auto" : _e, children = _a.children, level = _a.level, isInline = _a.isInline, _f = _a.fontStyle, fontStyle = _f === void 0 ? "default" : _f, _g = _a.isResponsive, isResponsive = _g === void 0 ? true : _g, size = _a.size, id = _a.id, props = __rest(_a, ["align", "casing", "color", "children", "level", "isInline", "fontStyle", "isResponsive", "size", "id"]);
-    var surface = React.useContext(Context$3).surface;
-    var Element = "span";
-    if (level) {
-        Element = "h".concat(level);
-    }
-    return (React.createElement(Element, __assign({ id: id, className: classNames(" arc-Heading arc-Heading--".concat(camelcase(fontStyle)), (_b = {
-                "arc-Heading--inline": isInline,
-                "arc-Heading--fixedSize": isResponsive === false
-            },
-            _b[suffixModifier("arc-Heading--align", align)] = align && align !== "left",
-            _b["arc-Heading--size".concat(size && size.toUpperCase())] = size,
-            _b["arc-Heading--casingNone"] = casing === "none",
-            _b["arc-Heading--colorBrand"] = color === "brand",
-            _b["arc-Heading--onDarkSurface"] = surface === "dark",
-            _b["arc-Heading--isInline"] = isInline,
-            _b)) }, filterAttrs(props)), children));
+        children,
+        " ",
+        img)) : (React.createElement(React.Fragment, null, img))));
+};
+var ImageSource = function (_a) {
+    var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type, props = __rest(_a, ["height", "media", "srcSet", "sizes", "type"]);
+    return (React.createElement("source", __assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterAttrs(props))));
 };
+var fitOptions = ["cover"];
+var loadingOptions = ["eager", "lazy"];
+var overlayOptions = ["scrimBottomDark"];
 
 var AvatarContent = function (_a) {
     var img = _a.img, initials = _a.initials, _b = _a.size, size = _b === void 0 ? "xl" : _b;
@@ -769,7 +1027,7 @@ var BannerRow = function (_a) {
 };
 
 var TemplateBanner = function (_a) {
-    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, _c = _a.alignment, alignment = _c === void 0 ? "center" : _c, additionalTopMargin = _a.additionalTopMargin, _d = _a.minHeight, minHeight = _d === void 0 ? 454 : _d, _e = _a.headingSize, headingSize = _e === void 0 ? "xl" : _e, _f = _a.isReversed, isReversed = _f === void 0 ? false : _f, _g = _a.isElevated, isElevated = _g === void 0 ? false : _g, _h = _a.headingLevel, headingLevel = _h === void 0 ? "2" : _h, _j = _a.type, type = _j === void 0 ? "light" : _j, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
+    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, _c = _a.alignment, alignment = _c === void 0 ? "center" : _c, additionalTopMargin = _a.additionalTopMargin, _d = _a.minHeight, minHeight = _d === void 0 ? 454 : _d, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _e = _a.headingSize, headingSize = _e === void 0 ? "xl" : _e, _f = _a.isReversed, isReversed = _f === void 0 ? false : _f, _g = _a.isElevated, isElevated = _g === void 0 ? false : _g, _h = _a.headingLevel, headingLevel = _h === void 0 ? "2" : _h, _j = _a.type, type = _j === void 0 ? "light" : _j, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
     var backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -787,8 +1045,19 @@ var TemplateBanner = function (_a) {
         "2/3": 8,
         "1/1": 6,
     };
-    return (React.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-TemplateBanner arc-TemplateBanner-background--".concat(type), {
+    var templateBannerStyles = {
+        "--template-banner-min-height": "".concat(minHeight, "px"),
+        "--template-banner-min-height-m": minHeightM ? "".concat(minHeightM, "px") : "auto",
+        "--template-banner-min-height-l": minHeightL ? "".concat(minHeightL, "px") : "auto",
+        "--template-banner-min-height-xl": minHeightXL
+            ? "".concat(minHeightXL, "px")
+            : "auto",
+    };
+    return (React.createElement("div", __assign({ style: templateBannerStyles, className: classNames("arc-TemplateBanner arc-TemplateBanner-background--".concat(type), {
             "arc-TemplateBanner--elevation": isElevated,
+            "arc-TemplateBanner--minHeightM": minHeightM,
+            "arc-TemplateBanner--minHeightL": minHeightL,
+            "arc-TemplateBanner--minHeightXL": minHeightXL,
         }) }, filterAttrs(props)),
         React.createElement(Box, { isBorderRadius: true, "data-testid": "arc-TemplateBanner-box", borderWidth: borderWidth, surface: backgrounds[type], isSurfaceTransparent: !isContained },
             React.createElement(Grid, { isGutterless: true, isFluid: true },
@@ -1785,302 +2054,122 @@ function toDate(argument) {
   } else {
     if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
       // eslint-disable-next-line no-console
-      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");
-      // eslint-disable-next-line no-console
-      console.warn(new Error().stack);
-    }
-    return new Date(NaN);
-  }
-}
-
-/**
- * @name addMonths
- * @category Month Helpers
- * @summary Add the specified number of months to the given date.
- *
- * @description
- * Add the specified number of months to the given date.
- *
- * @param {Date|Number} date - the date to be changed
- * @param {Number} amount - the amount of months to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
- * @returns {Date} the new date with the months added
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Add 5 months to 1 September 2014:
- * const result = addMonths(new Date(2014, 8, 1), 5)
- * //=> Sun Feb 01 2015 00:00:00
- */
-function addMonths(dirtyDate, dirtyAmount) {
-  requiredArgs(2, arguments);
-  var date = toDate(dirtyDate);
-  var amount = toInteger(dirtyAmount);
-  if (isNaN(amount)) {
-    return new Date(NaN);
-  }
-  if (!amount) {
-    // If 0 months, no-op to avoid changing times in the hour before end of DST
-    return date;
-  }
-  var dayOfMonth = date.getDate();
-
-  // The JS Date object supports date math by accepting out-of-bounds values for
-  // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and
-  // new Date(2020, 13, 1) returns 1 Feb 2021.  This is *almost* the behavior we
-  // want except that dates will wrap around the end of a month, meaning that
-  // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So
-  // we'll default to the end of the desired month by adding 1 to the desired
-  // month and using a date of 0 to back up one day to the end of the desired
-  // month.
-  var endOfDesiredMonth = new Date(date.getTime());
-  endOfDesiredMonth.setMonth(date.getMonth() + amount + 1, 0);
-  var daysInMonth = endOfDesiredMonth.getDate();
-  if (dayOfMonth >= daysInMonth) {
-    // If we're already at the end of the month, then this is the correct date
-    // and we're done.
-    return endOfDesiredMonth;
-  } else {
-    // Otherwise, we now know that setting the original day-of-month value won't
-    // cause an overflow, so set the desired day-of-month. Note that we can't
-    // just set the date of `endOfDesiredMonth` because that object may have had
-    // its time changed in the unusual case where where a DST transition was on
-    // the last day of the month and its local time was in the hour skipped or
-    // repeated next to a DST transition.  So we use `date` instead which is
-    // guaranteed to still have the original time.
-    date.setFullYear(endOfDesiredMonth.getFullYear(), endOfDesiredMonth.getMonth(), dayOfMonth);
-    return date;
-  }
-}
-
-/**
- * @name subMonths
- * @category Month Helpers
- * @summary Subtract the specified number of months from the given date.
- *
- * @description
- * Subtract the specified number of months from the given date.
- *
- * @param {Date|Number} date - the date to be changed
- * @param {Number} amount - the amount of months to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
- * @returns {Date} the new date with the months subtracted
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Subtract 5 months from 1 February 2015:
- * const result = subMonths(new Date(2015, 1, 1), 5)
- * //=> Mon Sep 01 2014 00:00:00
- */
-function subMonths(dirtyDate, dirtyAmount) {
-  requiredArgs(2, arguments);
-  var amount = toInteger(dirtyAmount);
-  return addMonths(dirtyDate, -amount);
-}
-
-/**
- * @name startOfMonth
- * @category Month Helpers
- * @summary Return the start of a month for the given date.
- *
- * @description
- * Return the start of a month for the given date.
- * The result will be in the local timezone.
- *
- * @param {Date|Number} date - the original date
- * @returns {Date} the start of a month
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // The start of a month for 2 September 2014 11:55:00:
- * const result = startOfMonth(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Mon Sep 01 2014 00:00:00
- */
-function startOfMonth(dirtyDate) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  date.setDate(1);
-  date.setHours(0, 0, 0, 0);
-  return date;
-}
-
-/**
- * Do not edit directly
- * Generated on Fri, 25 Jul 2025 07:43:07 GMT
- */
-var ArcSizeBreakpointsXs = "320px";
-var ArcSizeBreakpointsS = "636px";
-var ArcSizeBreakpointsM = "768px";
-var ArcSizeBreakpointsL = "1024px";
-var ArcSizeBreakpointsXl = "1280px";
-var ArcSizeBreakpointsXxl = "1440px";
-
-/**
- * Optionally define ariaDescribedBy if errorMessage or helper exist.
- */
-var useAriaDescribedby = function (_a) {
-    var id = _a.id, _b = _a.idError, idError = _b === void 0 ? "".concat(id, "-error") : _b, _c = _a.idHelper, idHelper = _c === void 0 ? "".concat(id, "-helper") : _c, _d = _a.idDisclosure, idDisclosure = _d === void 0 ? "".concat(id, "-disclosure") : _d, errorMessage = _a.errorMessage, helper = _a.helper, disclosureText = _a.disclosureText;
-    if (!id) {
-        return {
-            ariaDescribedby: undefined,
-            idHelper: undefined,
-            idError: undefined,
-            idDisclosure: undefined,
-        };
-    }
-    var ariaDescribedbyArr = [];
-    if (errorMessage) {
-        ariaDescribedbyArr.push(idError);
-    }
-    if (helper) {
-        ariaDescribedbyArr.push(idHelper);
-    }
-    if (disclosureText) {
-        ariaDescribedbyArr.push(idDisclosure);
-    }
-    var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
-    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper, idDisclosure: idDisclosure };
-};
-
-/**
- * Detect interaction mode
- */
-var useInteractionMode = function () {
-    var _a = React.useState("pointer"), interactionMode = _a[0], setInteractionMode = _a[1];
-    React.useEffect(function () {
-        var onKeyDown = function (event) {
-            if (event.altKey || event.ctrlKey || event.metaKey) {
-                return;
-            }
-            setInteractionMode("keyboard");
-        };
-        var onPointerDown = function () {
-            setInteractionMode("pointer");
-        };
-        if (typeof window !== "undefined") {
-            document.addEventListener("keydown", onKeyDown, true);
-            document.addEventListener("click", onPointerDown, true);
-        }
-        return function () {
-            if (typeof window !== "undefined") {
-                document.removeEventListener("keydown", onKeyDown);
-                document.removeEventListener("click", onPointerDown);
-            }
-        };
-    }, []);
-    return { interactionMode: interactionMode };
-};
-
-/**
- * Infer the correct inputMode, pattern and type if specifying a `number` type.
- */
-var useNumericInput = function (props) {
-    var type = props.type === "number" ? "text" : props.type;
-    var inputMode = props.inputMode;
-    if (!props.inputMode) {
-        if (props.type === "email") {
-            inputMode = "email";
-        }
-        else if (props.type === "number") {
-            inputMode = "numeric";
-        }
-        else if (props.type === "tel") {
-            inputMode = "tel";
-        }
-        else if (props.type === "url") {
-            inputMode = "url";
-        }
-    }
-    var pattern = props.pattern;
-    if (!props.pattern && props.type === "number") {
-        pattern = "[0-9]*";
-    }
-    return { inputMode: inputMode, pattern: pattern, type: type };
-};
-
-var usePagination = function (pageCount, selectedPage) {
-    var formatValues = function (range) {
-        return range.map(function (value) { return value.toString(); });
-    };
-    return React.useMemo(function () {
-        if (pageCount > 7 && selectedPage < 5) {
-            // show 1 - 5 the right dots are visible.
-            return formatValues(__spreadArray(__spreadArray([], Array.from({ length: 5 }, function (_value, index) { return index + 1; }), true), [
-                "...",
-                pageCount,
-            ], false));
-        }
-        if (pageCount > 7 && selectedPage >= pageCount - 3) {
-            // show numbers to the end but the left dots are visible
-            return formatValues(__spreadArray([
-                1,
-                "..."
-            ], Array.from({ length: 5 }, function (_value, index) { return pageCount - index; }).reverse(), true));
-        }
-        if (pageCount > 7 && selectedPage >= 5 && selectedPage < pageCount - 3) {
-            // show selected page with one number either side and both the left and the right dots are visible.
-            return formatValues([
-                1,
-                "...",
-                selectedPage - 1,
-                selectedPage,
-                selectedPage + 1,
-                "...",
-                pageCount,
-            ]);
-        }
-        // show all pages from pageCount
-        return formatValues(Array.from({ length: pageCount }, function (_value, index) { return index + 1; }));
-    }, [pageCount, selectedPage]);
-};
+      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");
+      // eslint-disable-next-line no-console
+      console.warn(new Error().stack);
+    }
+    return new Date(NaN);
+  }
+}
 
-var useThemeElement = function () {
-    var _a = React.useState(undefined), themeElement = _a[0], setElement = _a[1];
-    var setThemeElement = function (el) {
-        el &&
-            setElement(el.closest(".arc-ds-sys-theme") || undefined);
-    };
-    return [themeElement, setThemeElement];
-};
+/**
+ * @name addMonths
+ * @category Month Helpers
+ * @summary Add the specified number of months to the given date.
+ *
+ * @description
+ * Add the specified number of months to the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of months to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the months added
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Add 5 months to 1 September 2014:
+ * const result = addMonths(new Date(2014, 8, 1), 5)
+ * //=> Sun Feb 01 2015 00:00:00
+ */
+function addMonths(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var date = toDate(dirtyDate);
+  var amount = toInteger(dirtyAmount);
+  if (isNaN(amount)) {
+    return new Date(NaN);
+  }
+  if (!amount) {
+    // If 0 months, no-op to avoid changing times in the hour before end of DST
+    return date;
+  }
+  var dayOfMonth = date.getDate();
 
-var useUniqueString = function (value) {
-    var id = React.useId();
-    return "".concat(value, "-").concat(id);
-};
+  // The JS Date object supports date math by accepting out-of-bounds values for
+  // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and
+  // new Date(2020, 13, 1) returns 1 Feb 2021.  This is *almost* the behavior we
+  // want except that dates will wrap around the end of a month, meaning that
+  // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So
+  // we'll default to the end of the desired month by adding 1 to the desired
+  // month and using a date of 0 to back up one day to the end of the desired
+  // month.
+  var endOfDesiredMonth = new Date(date.getTime());
+  endOfDesiredMonth.setMonth(date.getMonth() + amount + 1, 0);
+  var daysInMonth = endOfDesiredMonth.getDate();
+  if (dayOfMonth >= daysInMonth) {
+    // If we're already at the end of the month, then this is the correct date
+    // and we're done.
+    return endOfDesiredMonth;
+  } else {
+    // Otherwise, we now know that setting the original day-of-month value won't
+    // cause an overflow, so set the desired day-of-month. Note that we can't
+    // just set the date of `endOfDesiredMonth` because that object may have had
+    // its time changed in the unusual case where where a DST transition was on
+    // the last day of the month and its local time was in the hour skipped or
+    // repeated next to a DST transition.  So we use `date` instead which is
+    // guaranteed to still have the original time.
+    date.setFullYear(endOfDesiredMonth.getFullYear(), endOfDesiredMonth.getMonth(), dayOfMonth);
+    return date;
+  }
+}
 
 /**
- * @typedef MediaQueryOutputs
- * @param {boolean} matches - does the document match the media query?
+ * @name subMonths
+ * @category Month Helpers
+ * @summary Subtract the specified number of months from the given date.
+ *
+ * @description
+ * Subtract the specified number of months from the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of months to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the months subtracted
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Subtract 5 months from 1 February 2015:
+ * const result = subMonths(new Date(2015, 1, 1), 5)
+ * //=> Mon Sep 01 2014 00:00:00
  */
+function subMonths(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var amount = toInteger(dirtyAmount);
+  return addMonths(dirtyDate, -amount);
+}
+
 /**
- * Handle with care!
+ * @name startOfMonth
+ * @category Month Helpers
+ * @summary Return the start of a month for the given date.
  *
- * If you need to change something in the browser based on @media query, you
- * probably don’t need this hook. Use CSS media queries instead.
+ * @description
+ * Return the start of a month for the given date.
+ * The result will be in the local timezone.
  *
- * Sometimes UI requirements are not achievable with CSS media queries alone. In
- * these rare cases, use this hook to make media query matches available
- * to React JavaScript code.
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the start of a month
+ * @throws {TypeError} 1 argument required
  *
- * @param {string} mediaQuery - the media query to parse
- * @returns {MediaQueryOutputs}
+ * @example
+ * // The start of a month for 2 September 2014 11:55:00:
+ * const result = startOfMonth(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Mon Sep 01 2014 00:00:00
  */
-var useMediaQuery = function (mediaQuery) {
-    var mediaQueryList = typeof window !== "undefined" ? window.matchMedia(mediaQuery) : undefined;
-    var _a = React.useState(false), matches = _a[0], setMatches = _a[1];
-    React.useEffect(function () {
-        setMatches(typeof window !== "undefined"
-            ? window.matchMedia(mediaQuery).matches
-            : false);
-    }, [mediaQuery]);
-    React.useEffect(function () {
-        var onMatchMedia = function (event) { return setMatches(event.matches); };
-        // Using deprecated addListener methods here for IE & Safari 13 support
-        if (mediaQueryList) {
-            mediaQueryList.addListener(onMatchMedia);
-        }
-        return function () { return mediaQueryList && mediaQueryList.removeListener(onMatchMedia); };
-    }, [mediaQueryList]);
-    return matches;
-};
+function startOfMonth(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  date.setDate(1);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
 
 var containsDate = function (dates, compareDate) {
     return dates.map(function (date) { return date.getTime(); }).includes(compareDate.getTime());
@@ -5130,26 +5219,6 @@ function cleanEscapedString(input) {
   return matched[1].replace(doubleQuoteRegExp, "'");
 }
 
-/**
- * Use `Text` to display text.
- */
-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, _h = _a.elementType, elementType = _h === void 0 ? "span" : _h, props = __rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone", "elementType"]);
-    var surface = React.useContext(Context$3).surface;
-    var Element = elementType;
-    return (React.createElement(Element, __assign({ id: id, className: classNames((_b = {
-                "arc-Text": true
-            },
-            _b[suffixModifier("arc-Text--align", align)] = align !== "left",
-            _b["arc-Text--inline"] = isInline,
-            _b["arc-Text--measured"] = isMeasured,
-            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
-            _b["arc-Text--".concat(tone)] = tone !== "default",
-            _b["arc-Text--onDarkSurface"] = surface === "dark",
-            _b)) }, filterAttrs(props)), children));
-};
-
 var ArcCalendarContext = React.createContext(null);
 
 var CalendarDayNumber = React.forwardRef(function (_a, autoFocusRef) {
@@ -13783,8 +13852,8 @@ var ContentSwitcherTab = React.forwardRef(function (_a, ref) {
 });
 
 var ContentSwitcherContent = function (_a) {
-    var children = _a.children, value = _a.value;
-    return (React.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherContent", value: value, tabIndex: -1 },
+    var children = _a.children, value = _a.value, _b = _a.hidden, hidden = _b === void 0 ? undefined : _b, _c = _a.forceMount, forceMount = _c === void 0 ? true : _c, props = __rest(_a, ["children", "value", "hidden", "forceMount"]);
+    return (React.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, __assign({ className: "arc-ContentSwitcherContent", value: value, tabIndex: -1, forceMount: forceMount ? true : undefined, hidden: hidden }, filterAttrs(props)),
         React.createElement("div", { className: "arc-ContentSwitcherContent-wrapper" }, children)));
 };
 
@@ -16903,52 +16972,6 @@ var InformationCard = function (_a) {
                             React.createElement(Image, __assign({}, footerLogo)))))))))));
 };
 
-/**
- * Do not edit directly
- * Generated file
- */
-
-const BtIconNewWindow =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M24.702 7.018a.5.5 0 0 0-.191-.039h-7.005a.5.5 0 0 0 0 1h5.798l-8.16 8.16a.5.5 0 1 0 .708.707l8.159-8.16v5.774a.5.5 0 1 0 1 0V7.48a.5.5 0 0 0-.31-.462'/%3e%3cpath d='M26.852 3.99H5.184a1.2 1.2 0 0 0-1.2 1.201v21.7a1.104 1.104 0 0 0 1.102 1.103h21.766a1.18 1.18 0 0 0 1.178-1.18V5.17a1.18 1.18 0 0 0-1.178-1.178m.178 22.825a.18.18 0 0 1-.178.179H5.086a.104.104 0 0 1-.103-.103V5.19a.2.2 0 0 1 .2-.2h21.669a.18.18 0 0 1 .178.178Z'/%3e%3c/svg%3e";
-
-/**
- * Use `Link` to direct users to a new page or piece of information.
- */
-var Link = function (_a) {
-    var id = _a.id, href = _a.href, title = _a.title, rel = _a.rel, target = _a.target, children = _a.children, onClick = _a.onClick, screenReaderText = _a.screenReaderText, _b = _a.isButton, isButton = _b === void 0 ? false : _b, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, props = __rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
-    var surface = React.useContext(Context$3).surface;
-    var isExternalLink = target === "_blank";
-    var textArray = children.split(" ");
-    var firstText = textArray.slice(0, -1).join(" ");
-    var lastWord = textArray[textArray.length - 1];
-    var commonProps = {
-        id: id,
-        onClick: onClick,
-        className: classNames("arc-Link", "arc-Link--".concat(size), {
-            "arc-Link--onDarkSurface": surface === "dark",
-            "arc-Link--onLightSurface": surface !== "dark",
-            "arc-Link--isImplied": isImplied,
-        }),
-    };
-    var elementProps = {
-        a: __assign(__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
-        button: __assign({}, commonProps),
-        span: __assign({}, commonProps),
-    };
-    var LinkElement = isButton ? "button" : href ? "a" : "span";
-    return (React.createElement(LinkElement, __assign({}, elementProps[LinkElement], filterAttrs(props)),
-        React.createElement("div", { className: "arc-Link-wrapper" },
-            React.createElement(VisuallyHidden$2, null,
-                screenReaderText || children,
-                isExternalLink && " (Opens in new window)"),
-            firstText && (React.createElement("span", { "aria-hidden": true, className: "arc-Link-text" },
-                firstText,
-                "\u00A0")),
-            React.createElement("span", { className: "arc-Link-iconWrapper" },
-                React.createElement("span", { "aria-hidden": true, className: "arc-Link-text" }, lastWord),
-                isExternalLink && (React.createElement(Icon$1, { icon: BtIconNewWindow, size: size === "s" ? 20 : 24 }))))));
-};
-
 /**
  * Use `Markup` to display HTML-formatted text.
  */
@@ -18361,7 +18384,7 @@ var MenuHeader = function (_a) {
 var MenuItem = function (_a) {
     var leadingIcon = _a.leadingIcon, supportingText = _a.supportingText, keyCommands = _a.keyCommands, trailingIcon = _a.trailingIcon, children = _a.children, onClick = _a.onClick, _b = _a.shouldKeepOpen, shouldKeepOpen = _b === void 0 ? true : _b, isDisabled = _a.isDisabled, href = _a.href, ariaLabel = _a.ariaLabel, props = __rest(_a, ["leadingIcon", "supportingText", "keyCommands", "trailingIcon", "children", "onClick", "shouldKeepOpen", "isDisabled", "href", "ariaLabel"]);
     var Component = href ? "a" : "div";
-    return (React.createElement(Item2, __assign({ className: "arc-MenuItem", asChild: true, "aria-label": ariaLabel, onClick: onClick, onSelect: function (event) {
+    return (React.createElement(Item2, __assign({ className: "arc-MenuItem", asChild: true, "aria-label": ariaLabel, onClick: isDisabled ? undefined : onClick, onSelect: function (event) {
             if (shouldKeepOpen) {
                 event.preventDefault();
             }
@@ -19252,7 +19275,7 @@ var SiteFooterItemDisclosure = function (_a) {
 var SiteFooterItemGroup = function (props) { return (React.createElement(React.Fragment, null,
     React.createElement(Visible, { "data-testid": "mobile-disclosure", xs: true, s: true },
         React.createElement(SiteFooterItemDisclosure, __assign({}, props, { tabIndex: 0 }))),
-    React.createElement(Visible, { "data-testid": "desktop-disclosure", m: true, l: true, xl: true },
+    React.createElement(Visible, { "data-testid": "desktop-disclosure", m: true, l: true, xl: true, xxl: true },
         React.createElement(SiteFooterItemDisclosure, __assign({}, props, { open: true, tabIndex: -1 }))))); };
 var SiteFooterItem = function (_a) {
     var children = _a.children, href = _a.href, onClick = _a.onClick, props = __rest(_a, ["children", "href", "onClick"]);
@@ -19299,7 +19322,7 @@ var SiteFooterV2ItemGroup = function (_a) {
     return (React.createElement("div", null,
         React.createElement(Visible, { "data-testid": "mobile-disclosure", xs: !hideDisclosure, s: !hideDisclosure },
             React.createElement(SiteFooterV2ItemDisclosure, __assign({}, props, { tabIndex: 0 }))),
-        React.createElement(Visible, { "data-testid": "desktop-disclosure", m: true, l: true, xl: true },
+        React.createElement(Visible, { "data-testid": "desktop-disclosure", m: true, l: true, xl: true, xxl: true },
             React.createElement(SiteFooterV2ItemDisclosure, __assign({}, props, { open: true, tabIndex: -1 })),
             React.createElement(VerticalSpace, { size: "12" }))));
 };
@@ -20155,38 +20178,27 @@ var Switch = function (_a) {
 
 var TabbedBanner = function (_a) {
     var _b;
-    var tabs = _a.tabs, defaultValue = _a.defaultValue, minHeight = _a.minHeight, minHeightM = _a.minHeightM;
+    var tabs = _a.tabs, defaultValue = _a.defaultValue, minHeight = _a.minHeight, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, props = __rest(_a, ["tabs", "defaultValue", "minHeight", "minHeightM", "minHeightL", "minHeightXL"]);
     var initialTab = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.value;
     var _c = React.useState(initialTab), selectedTab = _c[0], setSelectedTab = _c[1];
-    var _d = React.useState(window.innerWidth < parseInt(ArcSizeBreakpointsM)), isBelowArcSizeBreakpointsM = _d[0], SetIsBelowArcSizeBreakpointsM = _d[1];
-    var handleResize = debounce(function () {
-        SetIsBelowArcSizeBreakpointsM(window.innerWidth < parseInt(ArcSizeBreakpointsM));
-    }, 100);
-    React.useEffect(function () {
-        handleResize();
-        window.addEventListener("resize", handleResize);
-        return function () {
-            window.removeEventListener("resize", handleResize);
-            handleResize.cancel();
-        };
-    }, [isBelowArcSizeBreakpointsM]);
-    return (React.createElement("div", { className: "arc-TabbedBanner" }, !isBelowArcSizeBreakpointsM ? (React.createElement("div", null,
-        React.createElement(ContentSwitcher, { value: selectedTab, onValueChange: function (value) { return setSelectedTab(value); } },
-            React.createElement(ContentSwitcherList, { isInset: true }, tabs.map(function (_a, index) {
-                var label = _a.label, value = _a.value;
-                return (React.createElement(ContentSwitcherTab, { label: label, value: value, key: "".concat(index, "-").concat(value) }));
-            })),
-            tabs.map(function (_a, index) {
+    return (React.createElement("div", __assign({ className: "arc-TabbedBanner" }, filterAttrs(props)),
+        React.createElement("div", { className: "arc-TabbedBanner--desktop" },
+            React.createElement(ContentSwitcher, { value: selectedTab, onValueChange: function (value) { return setSelectedTab(value); } },
+                React.createElement(ContentSwitcherList, { isInset: true }, tabs.map(function (_a, index) {
+                    var label = _a.label, value = _a.value;
+                    return (React.createElement(ContentSwitcherTab, { label: label, value: value, key: "".concat(index, "-").concat(value) }));
+                })),
+                tabs.map(function (_a, index) {
+                    var value = _a.value, content = _a.content;
+                    return (React.createElement(ContentSwitcherContent, { value: value, key: index, hidden: value !== selectedTab },
+                        React.createElement(TemplateBanner, __assign({ alignment: "start", headingSize: "m", additionalTopMargin: true, minHeight: minHeight, minHeightM: minHeightM, minHeightL: minHeightL, minHeightXL: minHeightXL }, content))));
+                }))),
+        React.createElement("div", { className: "arc-TabbedBanner--mobile" },
+            React.createElement(ContentSwitcherDropdown, { value: selectedTab, tabs: tabs, isInset: true, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {
                 var value = _a.value, content = _a.content;
-                return (React.createElement(ContentSwitcherContent, { value: value, key: index },
-                    React.createElement(TemplateBanner, __assign({ alignment: "start", headingSize: "m", additionalTopMargin: true, minHeight: minHeight }, content))));
-            })))) : (React.createElement("div", null,
-        React.createElement(ContentSwitcherDropdown, { value: selectedTab, tabs: tabs, isInset: true, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {
-            var value = _a.value, content = _a.content;
-            return (React.createElement(ContentSwitcherDropdownContent, { value: value, key: "".concat(index, "-").concat(value) },
-                React.createElement(TemplateBanner, __assign({ alignment: "start", headingSize: "m", additionalTopMargin: !(window.innerHeight < parseInt(ArcSizeBreakpointsM) &&
-                        content.type === "contained"), minHeight: minHeightM }, content))));
-        }))))));
+                return (React.createElement(ContentSwitcherDropdownContent, { value: value, key: "".concat(index, "-").concat(value) },
+                    React.createElement(TemplateBanner, __assign({ alignment: "start", headingSize: "m", additionalTopMargin: true }, content))));
+            })))));
 };
 
 /** Use `Tabs` to allow users to navigate between different sections of relevant content. */
@@ -20210,8 +20222,8 @@ var TabsItem = function (_a) {
 };
 
 var TabsContent = function (_a) {
-    var children = _a.children, value = _a.value, props = __rest(_a, ["children", "value"]);
-    return (React.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, __assign({ className: "arc-Tabs-content", value: value }, filterAttrs(props)), children));
+    var children = _a.children, value = _a.value, _b = _a.hidden, hidden = _b === void 0 ? undefined : _b, _c = _a.forceMount, forceMount = _c === void 0 ? true : _c, props = __rest(_a, ["children", "value", "hidden", "forceMount"]);
+    return (React.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, __assign({ className: "arc-Tabs-content", value: value, forceMount: forceMount ? true : undefined, hidden: hidden }, filterAttrs(props)), children));
 };
 
 var TabsList = function (_a) {
@@ -20350,7 +20362,7 @@ var TextArea = React.forwardRef(function (_a, ref) {
 var package_default = {
   name: "@arc-ui/helpers",
   private: true,
-  version: "12.0.0-beta.21",
+  version: "12.0.0-beta.22",
   type: "module",
   homepage: "https://ui.digital-ent-int.bt.com",
   author: "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
@@ -26012,7 +26024,8 @@ var BtRedcareLogo = function () { return (React.createElement("svg", { xmlns: "h
     React.createElement("path", { d: "M25 0C11.285 0 0 11.285 0 25s11.285 25 25 25 25-11.285 25-25C49.995 11.287 38.713.005 25 0Zm0 46.92h-.005c-12.028 0-21.925-9.897-21.925-21.925S12.967 3.07 24.995 3.07 46.92 12.967 46.92 24.995V25C46.911 37.022 37.022 46.911 25 46.92Zm95.636-16.632-2.683-2.44-.153.19a5.93 5.93 0 0 1-1.965 1.626 5.484 5.484 0 0 1-2.415.508 4.314 4.314 0 0 1-2.323-.65 4.609 4.609 0 0 1-1.653-1.828 6.386 6.386 0 0 1 0-5.456 4.627 4.627 0 0 1 1.642-1.824 4.267 4.267 0 0 1 2.31-.65 5.014 5.014 0 0 1 2.317.521c.746.411 1.4.97 1.923 1.642l.153.187 2.686-2.436-.142-.176a9.26 9.26 0 0 0-3.09-2.47 8.886 8.886 0 0 0-3.84-.802 9.082 9.082 0 0 0-3.428.644 8.536 8.536 0 0 0-2.798 1.824 8.35 8.35 0 0 0-1.871 2.785 9.462 9.462 0 0 0 0 6.978 8.36 8.36 0 0 0 4.672 4.6 9.204 9.204 0 0 0 3.44.642 9.37 9.37 0 0 0 3.909-.788 9.195 9.195 0 0 0 3.16-2.457l.15-.17h-.001ZM22.8 24.626a4.224 4.224 0 0 0 1.625-3.4c0-3.075-2.224-4.751-5.5-4.751h-6.77v17h7.248c3.25 0 5.526-1.774 5.526-5-.003-1.875-.979-3.175-2.129-3.849Zm3.425-4.501H30.4v13.35h4.1v-13.35h4.175v-3.65h-12.45v3.65Zm126.251 4.57a5.193 5.193 0 0 0 .866-2.976 5.303 5.303 0 0 0-.68-2.7 4.818 4.818 0 0 0-1.98-1.861c-.857-.448-1.915-.676-3.143-.676h-8.354v16.992h4.097v-6.336h2.984l3.235 6.329h4.586l-3.86-7.028a4.777 4.777 0 0 0 2.25-1.744h-.001Zm-75.218 1.947h6.115V23.16h-6.115v-3.2h8.714v-3.484H73.16v16.992h13.048v-3.484h-8.95v-3.342Zm-6.888-1.947a5.193 5.193 0 0 0 .866-2.976 5.306 5.306 0 0 0-.68-2.707 4.825 4.825 0 0 0-1.98-1.861c-.86-.448-1.916-.676-3.135-.676H57.08v16.992h4.095v-6.33h2.983l3.235 6.33h4.586l-3.86-7.028a4.787 4.787 0 0 0 2.252-1.744h-.001Zm28.995-7.144c-1.436-.706-3.175-1.076-5.193-1.076h-6.228v16.992h6.228c2.01 0 3.757-.353 5.193-1.074a7.914 7.914 0 0 0 3.33-3 8.457 8.457 0 0 0 1.154-4.409 8.44 8.44 0 0 0-1.154-4.41 7.894 7.894 0 0 0-3.33-3.023Zm32.205-1.076h-4.279l-6.816 16.992h4.234l1.41-3.683h6.527l1.411 3.683h4.358l-6.786-16.847-.06-.145h.001Zm27.747 13.508v-3.34h6.117v-3.485h-6.117v-3.2h8.715v-3.483h-12.81v16.992h13.047v-3.484h-8.952Zm-140.367.042v.008-.001H16.2v-3.557h2.75c1.15 0 1.825.725 1.825 1.8 0 1.025-.666 1.75-1.825 1.75Zm80.711-5.054c0 1.534-.469 2.765-1.395 3.66-.926.897-2.309 1.356-4.094 1.356h-2.13V19.959h2.13c1.787 0 3.163.458 4.09 1.363.928.905 1.4 2.138 1.4 3.65l-.001-.001Zm27.694 1.588 2.029-5.335 2.05 5.335h-4.079Zm-60.312-4.744a2.02 2.02 0 0 1-.494 1.437c-.323.353-.834.53-1.519.53h-3.856v-3.919h3.856c.706 0 1.216.177 1.53.53.337.392.51.898.483 1.414v.008Zm82.108 0a2.024 2.024 0 0 1-.494 1.437c-.322.353-.833.53-1.52.53h-3.855v-3.919h3.855c.705 0 1.215.177 1.53.53.337.391.51.898.484 1.414v.008ZM16.2 19.932h2.526c.973 0 1.548.625 1.548 1.526 0 .949-.575 1.575-1.548 1.575H16.2v-3.101Z", fill: "currentColor" }))); };
 
 var NavigationHeaderLogo = function (_a) {
-    var _b = _a.brand, brand = _b === void 0 ? "bt" : _b, _c = _a.href, href = _c === void 0 ? "/" : _c, _d = _a.ariaLabel, ariaLabel = _d === void 0 ? "Home" : _d, svg = _a.svg, onClick = _a.onClick;
+    var _b;
+    var _c = _a.brand, brand = _c === void 0 ? "bt" : _c, _d = _a.href, href = _d === void 0 ? "/" : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? "Home" : _e, _f = _a.isSurfaceSensitive, isSurfaceSensitive = _f === void 0 ? true : _f, svg = _a.svg, onClick = _a.onClick;
     var surface = React.useContext(Context$3).surface;
     var logos = {
         bt: BtLogo,
@@ -26023,7 +26036,11 @@ var NavigationHeaderLogo = function (_a) {
         btWholesale: BtWholesaleLogo,
     };
     var icon = svg || React.createElement(logos[brand]);
-    return (React.createElement("a", { className: classNames("arc-NavigationHeaderLogo", suffixModifier("arc-NavigationHeaderLogo--on", surface)), "aria-label": ariaLabel, onClick: onClick, href: href }, icon));
+    return (React.createElement("a", { className: classNames("arc-NavigationHeaderLogo", (_b = {
+                "arc-NavigationHeaderLogo--staticColor": !isSurfaceSensitive
+            },
+            _b[suffixModifier("arc-NavigationHeaderLogo--on", surface)] = isSurfaceSensitive,
+            _b)), "aria-label": ariaLabel, onClick: onClick, href: href }, icon));
 };
 
 // src/check-element-visibility/check-element-visibility.ts
@@ -26036,6 +26053,14 @@ var checkElementVisibility = (element) => {
   }
 };
 
+var NavigationHeaderInlineAction = function (_a) {
+    var icon = _a.icon, text = _a.text, href = _a.href, onClick = _a.onClick;
+    return (React.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React.createElement("a", { "aria-label": text, className: classNames("arc-NavigationHeaderInlineAction", "arc-NavigationHeaderInlineAction-link"), href: href, onClick: onClick }, children)); }, fallback: function (children) { return (React.createElement("button", { "aria-label": text, className: classNames("arc-NavigationHeaderInlineAction", "arc-NavigationHeaderInlineAction-button"), onClick: onClick }, children)); } },
+        React.createElement("div", { className: "arc-NavigationHeaderInlineAction-content" },
+            React.createElement(Icon$1, { "aria-hidden": true, icon: icon, size: 28 }),
+            React.createElement(Text, { size: "l" }, text))));
+};
+
 var NavigationHeaderButton = React.forwardRef(function (_a, ref) {
     var isActive = _a.isActive, children = _a.children, onClick = _a.onClick, _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, props = __rest(_a, ["isActive", "children", "onClick", "isPadded"]);
     var surface = React.useContext(Context$3).surface;
@@ -26045,18 +26070,66 @@ var NavigationHeaderButton = React.forwardRef(function (_a, ref) {
         }) }), children));
 });
 
-var NavigationHeaderNavLink = function (_a) {
-    var text = _a.text, onClick = _a.onClick, href = _a.href, _b = _a.borderRadiusSize, borderRadiusSize = _b === void 0 ? "s" : _b;
-    var surface = React.useContext(Context$3).surface;
-    return (React.createElement("a", { href: href, onClick: onClick, className: classNames("arc-NavigationHeaderNavLink", suffixModifier("arc-NavigationHeaderNavLink--borderRadiusSize", borderRadiusSize), suffixModifier("arc-NavigationHeaderNavLink--on", surface)) },
-        React.createElement(Text, null, text)));
+var NavigationHeaderDisclosure = function (_a) {
+    var heading = _a.heading, children = _a.children;
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var containerRef = React.useRef(null);
+    var handleOnClick = function (e) {
+        e.preventDefault();
+        setIsOpen(function (isOpen) { return !isOpen; });
+    };
+    React.useEffect(function () {
+        if (containerRef.current && containerRef.current.firstChild && isOpen) {
+            containerRef.current.firstChild.focus();
+        }
+    }, [isOpen, containerRef.current]);
+    return (React.createElement("details", { className: "arc-NavigationHeaderDisclosure", open: isOpen },
+        React.createElement("summary", { "aria-expanded": isOpen, onClick: handleOnClick, className: "arc-NavigationHeaderDisclosure-summary" },
+            React.createElement("span", { className: "arc-NavigationHeaderDisclosure-heading" }, heading),
+            React.createElement("span", { className: "arc-NavigationHeaderDisclosure-icon" },
+                React.createElement(ThemeIcon, { size: 28, icon: "navigationHeaderDisclosure" }))),
+        React.createElement("div", { ref: containerRef, className: "arc-NavigationHeaderDisclosure-details" }, children)));
+};
+
+var NavigationHeaderMenuLink = function (_a) {
+    var href = _a.href, onClick = _a.onClick, text = _a.text, _b = _a.size, size = _b === void 0 ? "l" : _b;
+    var icons = {
+        s: {
+            icon: "navigationHeaderMenuLinkSmall",
+            size: 24,
+        },
+        l: {
+            icon: "navigationHeaderMenuLinkLarge",
+            size: 28,
+        },
+    };
+    return (React.createElement("a", { "aria-label": text, href: href, onClick: onClick, className: classNames("arc-NavigationHeaderMenuLink", suffixModifier("arc-NavigationHeaderMenuLink--size", size)) },
+        React.createElement("div", { className: "arc-NavigationHeaderMenuLink-text" }, text),
+        React.createElement("span", { className: "arc-NavigationHeaderMenuLink-icon" },
+            React.createElement(ThemeIcon, __assign({}, icons[size])))));
 };
 
+var NavigationHeaderCloseButton = React.forwardRef(function (_a, ref) {
+    var onClick = _a.onClick, props = __rest(_a, ["onClick"]);
+    return (React.createElement("button", __assign({}, props, { ref: ref, "aria-label": "close", onClick: onClick, className: "arc-NavigationHeaderCloseButton" }),
+        React.createElement(ThemeIcon, { size: 32, icon: "navigationHeaderClose" })));
+});
+
 var NavigationHeaderBurgerMenu = function (_a) {
-    var navItems = _a.navItems, topContent = _a.topContent, bottomContent = _a.bottomContent;
+    var navItems = _a.navItems, actions = _a.actions, header = _a.header, footer = _a.footer, logo = _a.logo;
     var id = React.useId();
     var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
     var triggerRef = React.useRef(null);
+    var interactionMode = useInteractionMode().interactionMode;
+    var _c = useThemeElement(), themeElement = _c[0], setThemeElement = _c[1];
+    var closeMenu = function () {
+        setIsOpen(false);
+    };
+    var focusTriggerElement = function () {
+        if (triggerRef.current && interactionMode === "keyboard") {
+            triggerRef.current.focus();
+        }
+    };
     // Close the menu if the nav or trigger is hidden
     React.useEffect(function () {
         var resizeObserver = new ResizeObserver(function (entries) {
@@ -26077,34 +26150,46 @@ var NavigationHeaderBurgerMenu = function (_a) {
     return (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { asChild: true, delayDuration: 0, title: "Menu", side: "bottom" },
             React.createElement(NavigationHeaderButton, { ref: triggerRef, isPadded: false, "aria-expanded": isOpen, "aria-label": isOpen ? "close menu" : "open menu", onClick: function () { return setIsOpen(!isOpen); } },
-                React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-buttonContent" },
+                React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-trigger" },
                     React.createElement(ThemeIcon, { icon: "siteHeaderBurger", size: 24 })),
                 React.createElement(VisuallyHidden$2, null, isOpen ? "close menu" : "open menu"))),
-        React.createElement(Drawer, { isOpen: isOpen, "aria-describedby": undefined, onRequestClose: function () { return setIsOpen(false); } },
-            React.createElement(Surface, { isTransparent: true, background: "light-white" },
-                React.createElement(DrawerHeader, { title: "Menu" }),
-                React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-content" },
-                    topContent && (React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-topContent" },
-                        React.createElement(VerticalSpace, null),
-                        React.createElement(Rule, null),
-                        React.createElement(VerticalSpace, null),
-                        topContent,
-                        React.createElement(VerticalSpace, null))),
-                    navItems && (React.createElement(DrawerContent, null,
-                        React.createElement("ul", { className: "arc-NavigationHeaderBurgerMenu-list" }, navItems.map(function (navItem, navItemIndex) { return (React.createElement(React.Fragment, { key: "".concat(id, "-burger-nav-item-").concat(navItemIndex) },
-                            React.createElement("li", null,
-                                (navItem.type === "link" ||
-                                    navItem.type === "meatball") && (React.createElement(NavigationHeaderNavLink, __assign({}, navItem))),
-                                (navItem.type === "subnav" ||
-                                    navItem.type === "dropdown") &&
-                                    navItem.items.map(function (subNavItem, subNavItemIndex) { return (React.createElement(NavigationHeaderNavLink, __assign({ key: "".concat(id, "-").concat(navItemIndex, "-burger-sub-nav-item-").concat(subNavItemIndex) }, subNavItem))); })))); })))),
-                    bottomContent && (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-bottomContent" },
-                            React.createElement(VerticalSpace, null),
-                            React.createElement(Rule, null),
-                            React.createElement(VerticalSpace, null),
-                            bottomContent,
-                            React.createElement(VerticalSpace, null)))))))));
+        React.createElement("div", { ref: setThemeElement },
+            React.createElement(Root$3, { open: isOpen },
+                React.createElement(Portal$3, { container: themeElement },
+                    React.createElement(Overlay, { className: "arc-NavigationHeaderBurgerMenu-overlay" },
+                        React.createElement(Content$1, { "aria-describedby": undefined, className: "arc-NavigationHeaderBurgerMenu-slider", onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeMenu, onInteractOutside: closeMenu, "aria-modal": "true" },
+                            React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-container" },
+                                React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-mainContent" },
+                                    React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-header" },
+                                        React.createElement(Title, null,
+                                            React.createElement(VisuallyHidden$2, null, "Menu")),
+                                        React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-logoContainer" },
+                                            React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-logoWrapper" },
+                                                React.createElement(NavigationHeaderLogo, __assign({}, logo, { isSurfaceSensitive: false })))),
+                                        React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-closeButtonContainer" },
+                                            React.createElement(Tooltip, { asChild: true, delayDuration: 0, title: "Close menu", side: "left" },
+                                                React.createElement(NavigationHeaderCloseButton, { onClick: closeMenu })))),
+                                    header && (React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-topContent" }, header)),
+                                    (navItems || actions) && (React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-navigationContent" },
+                                        navItems && (React.createElement("ul", { className: "arc-NavigationHeaderBurgerMenu-list" }, navItems.map(function (navItem, navItemIndex) { return (React.createElement(React.Fragment, { key: "".concat(id, "-burger-nav-item-").concat(navItemIndex) },
+                                            React.createElement("li", { className: "arc-NavigationHeaderBurgerMenu-listItem" },
+                                                React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-listItemContent" },
+                                                    (navItem.type === "link" ||
+                                                        navItem.type === "meatball") && (React.createElement(NavigationHeaderMenuLink, { href: navItem.href, onClick: navItem.onClick, text: navItem.text })),
+                                                    (navItem.type === "subnav" ||
+                                                        navItem.type === "dropdown") && (React.createElement(NavigationHeaderDisclosure, { heading: navItem.text }, navItem.items.map(function (subNavItem, subNavItemIndex) { return (React.createElement(NavigationHeaderMenuLink, { size: "s", key: "".concat(id, "-").concat(navItemIndex, "-burger-sub-nav-item-").concat(subNavItemIndex), href: subNavItem.href, onClick: subNavItem.onClick, text: subNavItem.text })); }))))))); }))),
+                                        actions && (React.createElement("div", { className: classNames("arc-NavigationHeaderBurgerMenu-actionsContainer", {
+                                                "arc-NavigationHeaderBurgerMenu-actionsContainer--seperator": navItems && actions,
+                                            }) }, actions.map(function (props, i) { return (React.createElement(NavigationHeaderInlineAction, __assign({ key: "".concat(id, "-action-{").concat(i, "}") }, props))); })))))),
+                                footer && (React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-footer" },
+                                    React.createElement(Surface, { isTransparent: true, background: "dark-black" }, footer)))))))))));
+};
+
+var NavigationHeaderNavLink = function (_a) {
+    var text = _a.text, onClick = _a.onClick, href = _a.href, _b = _a.borderRadiusSize, borderRadiusSize = _b === void 0 ? "s" : _b;
+    var surface = React.useContext(Context$3).surface;
+    return (React.createElement("a", { href: href, onClick: onClick, className: classNames("arc-NavigationHeaderNavLink", suffixModifier("arc-NavigationHeaderNavLink--borderRadiusSize", borderRadiusSize), suffixModifier("arc-NavigationHeaderNavLink--on", surface)) },
+        React.createElement(Text, null, text)));
 };
 
 // src/get-focusable-elements/get-focusable-elements.ts
@@ -27196,7 +27281,7 @@ var defaultHeaderVisibility = {
 };
 
 var NavigationHeader = function (_a) {
-    var leftSlot = _a.leftSlot, middleSlot = _a.middleSlot, rightSlot = _a.rightSlot, isPill = _a.isPill, isExtended = _a.isExtended, isFluid = _a.isFluid, logo = _a.logo, navItems = _a.navItems, background = _a.background, meatballMenuTooltip = _a.meatballMenuTooltip, burgerMenuBottomContent = _a.burgerMenuBottomContent, burgerMenuTopContent = _a.burgerMenuTopContent, burgerMenuVisibility = _a.burgerMenuVisibility, navMenuVisibility = _a.navMenuVisibility;
+    var leftSlot = _a.leftSlot, middleSlot = _a.middleSlot, rightSlot = _a.rightSlot, isPill = _a.isPill, isExtended = _a.isExtended, isFluid = _a.isFluid, logo = _a.logo, navItems = _a.navItems, background = _a.background, meatballMenuTooltip = _a.meatballMenuTooltip, burgerMenuActions = _a.burgerMenuActions, burgerMenuFooter = _a.burgerMenuFooter, burgerMenuHeader = _a.burgerMenuHeader, burgerMenuVisibility = _a.burgerMenuVisibility, navMenuVisibility = _a.navMenuVisibility;
     var navBarPortalRef = React.useRef(null);
     var _b = React.useState(false), isSubMenuItemActive = _b[0], setIsSubMenuItemActive = _b[1];
     var navBarBackground = isSubMenuItemActive ? "lightElevated" : background;
@@ -27221,7 +27306,7 @@ var NavigationHeader = function (_a) {
                 rightSlot && (React.createElement("div", { className: "arc-NavigationHeader-rightSlot" }, rightSlot)),
                 React.createElement(Visible, __assign({}, burgerMenuVisibilityProps),
                     React.createElement("div", { className: "arc-NavigationHeader-burgerMenuSlot" },
-                        React.createElement(NavigationHeaderBurgerMenu, { navItems: navItems, topContent: burgerMenuTopContent, bottomContent: burgerMenuBottomContent })))))));
+                        React.createElement(NavigationHeaderBurgerMenu, { logo: logo, navItems: navItems, actions: burgerMenuActions, header: burgerMenuHeader, footer: burgerMenuFooter })))))));
 };
 
 var NavigationHeaderAction = function (_a) {